/* ============================================================================ סטטוס לקוחות — 5 Sfarot Algo · premium command-center design system Light (default) + Dark themes via [data-theme] on . ========================================================================== */ :root { /* brand purple — constant across themes */ --p1:#8B30FF; --p2:#6D1FCC; --p3:#A855F7; /* shape */ --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px; /* motion */ --t:.22s cubic-bezier(.22,.61,.36,1); --t-fast:.16s ease-out; /* layering */ --z-topbar:50; --z-modal:1000; --z-toast:1200; --z-lock:2000; --accent-grad:linear-gradient(90deg,var(--p2),var(--p1),var(--p3)); /* ===================== LIGHT THEME (default) — soft off-white, low glare ===================== */ --bg:#ECE8F7; --bg2:#E6E1F4; --glow1:rgba(139,48,255,0.11); --glow2:rgba(109,31,204,0.08); --glow3:rgba(168,85,247,0.07); --dot:rgba(139,48,255,0.06); --surface:rgba(139,48,255,0.04); --surface2:rgba(139,48,255,0.065); --panel:rgba(247,245,252,0.72); --panel-bdr:rgba(139,48,255,0.14); --card:#FBF9FE; --card2:#ECE4FA; --card-edge:rgba(139,48,255,0.16); --card-edge-on:rgba(139,48,255,0.40); --line:rgba(139,48,255,0.10); --glass-hi:inset 0 1px 0 rgba(255,255,255,0.5); --p-soft:rgba(139,48,255,0.08); --p-glow:0 0 22px rgba(139,48,255,0.20); --p-ink:#6D1FCC; --text:#1A1035; --text2:#3D2B6B; --muted:#7060A0; --muted2:#9B8ABF; --green:#16A34A; --green-hi:#15803D; --green-bg:rgba(22,163,74,0.14); --green-bdr:rgba(22,163,74,0.38); --red:#DC2626; --red-hi:#B91C1C; --red-bg:rgba(220,38,38,0.11); --red-bdr:rgba(220,38,38,0.36); --amber:#B45309; --amber-hi:#92400E; --amber-bg:rgba(245,158,11,0.17); --amber-bdr:rgba(245,158,11,0.44); --disc:#6B5E8C; --disc-bg:rgba(107,94,140,0.13); --disc-bdr:rgba(107,94,140,0.34); --shadow:0 16px 34px -16px rgba(109,31,204,0.34), 0 4px 12px -6px rgba(109,31,204,0.18); --shadow-soft:0 9px 22px -12px rgba(109,31,204,0.24), 0 2px 7px -4px rgba(109,31,204,0.13); --scrim:rgba(26,16,53,0.42); color-scheme: light; } /* ========================== DARK THEME ========================== */ [data-theme="dark"] { --bg:#0B0716; --bg2:#120B24; --glow1:rgba(139,48,255,0.20); --glow2:rgba(109,31,204,0.14); --glow3:rgba(168,85,247,0.10); --dot:rgba(139,48,255,0.06); --surface:rgba(255,255,255,0.04); --surface2:rgba(255,255,255,0.07); --panel:rgba(18,11,36,0.74); --panel-bdr:rgba(139,48,255,0.16); --card:#15102B; --card2:#120D24; --card-edge:rgba(139,48,255,0.16); --card-edge-on:rgba(139,48,255,0.40); --line:rgba(139,48,255,0.12); --glass-hi:inset 0 1px 0 rgba(255,255,255,0.06); --p-soft:rgba(139,48,255,0.12); --p-glow:0 0 24px rgba(139,48,255,0.45); --p-ink:#CDA8FF; --text:#F2EEFF; --text2:#C6BAE6; --muted:#8E80B5; --muted2:#6E6291; --green:#10C257; --green-hi:#3CF187; --green-bg:rgba(16,194,87,0.12); --green-bdr:rgba(16,194,87,0.34); --red:#FF3B30; --red-hi:#FF6F6A; --red-bg:rgba(255,59,48,0.12); --red-bdr:rgba(255,59,48,0.34); --amber:#F5A623; --amber-hi:#FFC257; --amber-bg:rgba(245,166,35,0.12); --amber-bdr:rgba(245,166,35,0.34); --disc:#B98AA0; --disc-bg:rgba(185,138,160,0.12); --disc-bdr:rgba(185,138,160,0.30); --shadow:0 18px 50px -18px rgba(60,16,140,0.55); --shadow-soft:0 10px 30px -16px rgba(60,16,140,0.40); --scrim:rgba(6,3,14,0.62); color-scheme: dark; } /* --------------------------------- reset --------------------------------- */ *,*::before,*::after { box-sizing:border-box; } * { margin:0; } html { -webkit-text-size-adjust:100%; } body { font-family:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); line-height:1.55; min-height:100dvh; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition:background .3s ease, color .3s ease; } h1,h2,h3 { font-family:'Rubik',sans-serif; line-height:1.2; font-weight:700; } button,input,select,textarea { font:inherit; color:inherit; } button { cursor:pointer; background:none; border:none; } svg { display:block; } a { color:inherit; } ::selection { background:rgba(139,48,255,0.30); color:inherit; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } [hidden] { display:none !important; } .kpi-num,.table .num,.pkg-badge,.cell-num,.col-count { font-variant-numeric:tabular-nums; } /* ------------------------- background canvas layers ----------------------- */ .bg-glows { position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(620px 440px at 88% -6%, var(--glow1), transparent 60%), radial-gradient(540px 420px at 6% 8%, var(--glow2), transparent 62%), radial-gradient(900px 700px at 50% 118%, var(--glow3), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg2) 55%, var(--bg)); } .bg-dots { position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(var(--dot) 1px, transparent 1.4px); background-size:26px 26px; -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%); mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%); } /* ------------------------------- logo lockup ----------------------------- */ .logo-wrap { flex:none; display:grid; place-items:center; border-radius:14px; overflow:hidden; box-shadow:0 8px 22px -8px rgba(109,31,204,0.5), var(--glass-hi); } .logo-wrap.sm { width:46px; height:46px; border-radius:13px; } .logo-wrap.lg { width:78px; height:78px; border-radius:22px; } .logo-img { width:100%; height:100%; object-fit:cover; display:block; } .brand-mark { /* fallback when logo.png is missing */ width:100%; height:100%; display:grid; place-items:center; font-family:'Rubik',sans-serif; font-weight:800; color:#fff; background:linear-gradient(145deg,var(--p3),var(--p1) 45%,var(--p2)); } .logo-wrap.sm .brand-mark { font-size:24px; } .logo-wrap.lg .brand-mark { font-size:40px; } /* ============================== LOCK SCREEN ============================== */ .lockscreen { position:fixed; inset:0; z-index:var(--z-lock); display:grid; place-items:center; padding:24px; /* light theme: subtle premium light-purple gradient + faint brand glow */ background: radial-gradient(680px 500px at 80% -6%, rgba(139,48,255,0.10), transparent 58%), radial-gradient(600px 460px at 12% 108%, rgba(168,85,247,0.09), transparent 62%), linear-gradient(150deg, #F0EAFB 0%, #E9E1F7 46%, #ECE8F7 100%); } /* dark lock screen: subtle premium diagonal #15102B -> #0B0716 + faint purple glow */ [data-theme="dark"] .lockscreen { background: radial-gradient(720px 520px at 78% -8%, rgba(139,48,255,0.20), transparent 58%), radial-gradient(620px 480px at 14% 110%, rgba(109,31,204,0.16), transparent 62%), linear-gradient(155deg, #15102B 0%, #100A20 46%, #0B0716 100%); } .lock-card { width:min(400px,100%); display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; padding:36px 30px 30px; border-radius:var(--r-xl); background:linear-gradient(180deg, var(--card), var(--card2)); border:1px solid var(--card-edge-on); box-shadow:var(--shadow), var(--glass-hi); animation:pop .3s cubic-bezier(.22,.61,.36,1); } .lock-title { font-size:25px; font-weight:800; } .lock-sub { color:var(--muted); font-size:14px; margin-top:-6px; } .lock-card form { width:100%; display:flex; flex-direction:column; gap:12px; margin-top:8px; } .lock-submit { width:100%; } .lock-foot { color:var(--muted2); font-size:11px; letter-spacing:.2em; margin-top:6px; } /* --------------------------------- layout -------------------------------- */ .app { width:min(1280px,100%); margin-inline:auto; padding:22px clamp(14px,3vw,32px) 60px; } /* ================================ TOPBAR ================================= */ .topbar { position:sticky; top:0; z-index:var(--z-topbar); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:13px clamp(14px,2.4vw,20px); margin-bottom:22px; background:var(--panel); border:1px solid var(--panel-bdr); border-radius:var(--r-lg); box-shadow:var(--shadow-soft), var(--glass-hi); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); } .brand { display:flex; align-items:center; gap:13px; min-width:0; } .brand-text { display:flex; flex-direction:column; min-width:0; } .brand-wordmark { font-size:11px; letter-spacing:.22em; color:var(--p-ink); font-weight:700; } .brand-title { font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:-.01em; } .live-pill { display:inline-flex; align-items:center; gap:7px; margin-inline-start:4px; padding:5px 11px; font-size:12px; font-weight:600; color:var(--green-hi); background:var(--green-bg); border:1px solid var(--green-bdr); border-radius:999px; } .live-dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:livePulse 2s ease-out infinite; } @keyframes livePulse { 0% { box-shadow:0 0 0 0 var(--green-bdr); } 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } } .topbar-actions { display:flex; align-items:center; gap:10px; } .role-pill { display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--p-ink); background:var(--p-soft); border:1px solid var(--card-edge-on); } /* ================================ BUTTONS =============================== */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:var(--r-sm); font-weight:600; font-size:14.5px; white-space:nowrap; border:1px solid transparent; transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t); } .btn .ico { width:18px; height:18px; } .btn:active { transform:translateY(1px) scale(.99); } .btn.primary { color:#fff; background:linear-gradient(135deg,var(--p1),var(--p2)); box-shadow:0 10px 26px -12px rgba(139,48,255,0.85), var(--glass-hi); } .btn.primary:hover { box-shadow:0 14px 30px -10px rgba(139,48,255,0.95), var(--glass-hi); transform:translateY(-1px); } .btn.ghost { color:var(--text2); background:var(--surface); border-color:var(--card-edge); } .btn.ghost:hover { color:var(--text); background:var(--surface2); border-color:var(--card-edge-on); } .btn.danger { color:#fff; background:linear-gradient(135deg,var(--red),#B01810); box-shadow:0 10px 26px -12px rgba(220,38,38,0.7); } .btn.danger:hover { transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(220,38,38,0.85); } .btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; } .icon-btn { width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:11px; color:var(--muted); background:var(--surface); border:1px solid var(--card-edge); transition:color var(--t), background var(--t), border-color var(--t); } .icon-btn svg { width:19px; height:19px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .icon-btn:hover { color:var(--text); background:var(--surface2); border-color:var(--card-edge-on); } /* theme toggle: show moon in light (switch to dark), sun in dark */ .theme-toggle .ico-sun { display:none; } .theme-toggle .ico-moon { display:block; } [data-theme="dark"] .theme-toggle .ico-sun { display:block; } [data-theme="dark"] .theme-toggle .ico-moon { display:none; } /* shared inline-icon defaults */ .ico,.kpi-ico svg,.seg-btn svg,.search-ico,.empty-art svg,.warn-badge svg, .card-act svg,.cell-flag svg,.dotflag svg,.card-date svg { stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } /* role gating */ .admin-only { display:none !important; } body.is-admin .admin-only { display:inline-flex !important; } body.is-admin th.admin-only,body.is-admin td.admin-only { display:table-cell !important; } /* the [hidden] attribute must still win over the admin-only show rules */ body.is-admin .admin-only[hidden], body.is-admin th.admin-only[hidden], body.is-admin td.admin-only[hidden] { display:none !important; } /* ============================= SUMMARY STRIP ============================= */ .summary { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; } .kpi { position:relative; overflow:hidden; flex:1 1 150px; min-width:140px; display:flex; flex-direction:column; gap:2px; padding:15px 16px 13px; background:linear-gradient(180deg, var(--card), var(--card2)); border:1px solid var(--card-edge); border-radius:var(--r-md); box-shadow:var(--shadow-soft), var(--glass-hi); transition:transform var(--t), border-color var(--t), box-shadow var(--t); --kc:var(--p1); } .kpi::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:linear-gradient(90deg, transparent, var(--kc), transparent); opacity:.9; } .kpi:hover { transform:translateY(-3px); border-color:var(--card-edge-on); box-shadow:var(--shadow), var(--glass-hi); } .kpi-top { display:flex; align-items:center; margin-bottom:8px; } .kpi-ico { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--kc); background:color-mix(in srgb, var(--kc) 14%, transparent); border:1px solid color-mix(in srgb, var(--kc) 26%, transparent); } .kpi-ico svg { width:18px; height:18px; } .kpi-num { font-family:'Rubik',sans-serif; font-weight:800; font-size:clamp(25px,3.2vw,34px); line-height:1; color:var(--text); } [data-theme="dark"] .kpi-num { text-shadow:0 0 22px color-mix(in srgb, var(--kc) 45%, transparent); } .kpi-label { font-size:12.5px; color:var(--muted); font-weight:500; } .k-total{--kc:var(--p1);} .k-connected{--kc:var(--green);} .k-straddle{--kc:var(--amber);} .k-install{--kc:var(--p3);} .k-disconnected{--kc:var(--disc);} .k-burned{--kc:var(--red);} .k-payout{--kc:var(--green);} .k-burn{--kc:var(--red);} .k-withdrawn{--kc:#0E9F6E;} [data-theme="dark"] .k-withdrawn{--kc:#2DD4BF;} .k-total { background:radial-gradient(120% 120% at 100% 0%, var(--p-soft), transparent 60%), linear-gradient(180deg, var(--card), var(--card2)); } /* =============================== CONTROLS =============================== */ .controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; } .seg { display:inline-flex; padding:4px; gap:3px; border-radius:14px; background:var(--surface); border:1px solid var(--card-edge); box-shadow:var(--glass-hi); } .seg-btn { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 16px; border-radius:10px; font-weight:600; font-size:14px; color:var(--muted); transition:color var(--t), background var(--t), box-shadow var(--t); } .seg-btn svg { width:17px; height:17px; } .seg-btn:hover { color:var(--text2); } .seg-btn.is-active { color:#fff; background:linear-gradient(135deg,var(--p1),var(--p2)); box-shadow:0 8px 20px -12px rgba(139,48,255,0.85); } .control-field { position:relative; } .select,.input { min-height:44px; padding:0 14px; border-radius:12px; font-size:14.5px; color:var(--text); background:var(--card); border:1px solid var(--card-edge); transition:border-color var(--t), box-shadow var(--t), background var(--t); width:100%; } .select { -webkit-appearance:none; appearance:none; padding-inline-end:38px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B8ABF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 12px center; background-size:16px; } .select option { background:var(--card); color:var(--text); } .input::placeholder { color:var(--muted2); } .select:hover,.input:hover { border-color:var(--card-edge-on); } .select:focus-visible,.input:focus-visible { outline:none; border-color:var(--p1); box-shadow:0 0 0 3px var(--p-soft); } .control-field.search { flex:1 1 220px; min-width:180px; } .search .input { padding-inline-start:42px; } .search-ico { position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none; } /* ================================= MAIN ================================= */ .main { position:relative; min-height:300px; } .block { margin-bottom:30px; } .section-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 2px 14px; } .section-title { font-family:'Rubik',sans-serif; font-weight:700; font-size:17px; color:var(--text); } .section-sub { font-size:13px; color:var(--muted); } .loading { display:flex; flex-direction:column; align-items:center; gap:14px; padding:80px 0; color:var(--muted); } .spinner { width:42px; height:42px; border-radius:50%; border:3px solid var(--p-soft); border-top-color:var(--p1); animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* ======================= ONBOARDING PIPELINE (board) ===================== */ .board { display:flex; flex-direction:column; gap:14px; } @media (min-width:860px) { .board { flex-direction:row; align-items:flex-start; gap:14px; } .col { flex:1 1 0; min-width:0; width:auto; } } .col { width:100%; display:flex; flex-direction:column; gap:11px; padding:14px 12px; border-radius:var(--r-lg); background:linear-gradient(180deg, var(--surface2), var(--surface)); border:1px solid var(--card-edge); box-shadow:var(--glass-hi); --c:var(--p3); } .col-head { display:flex; align-items:center; gap:9px; padding:4px 6px 12px; border-bottom:1px solid var(--line); } .col-dot { width:9px; height:9px; border-radius:50%; flex:none; background:var(--c); } [data-theme="dark"] .col-dot { box-shadow:0 0 12px var(--c); } .col-name { font-family:'Rubik',sans-serif; font-weight:600; font-size:14.5px; color:var(--text); flex:1; min-width:0; } .col-count { font-family:'Rubik',sans-serif; font-weight:700; font-size:13px; color:var(--c); min-width:26px; height:24px; padding:0 8px; display:grid; place-items:center; border-radius:999px; background:color-mix(in srgb, var(--c) 14%, transparent); border:1px solid color-mix(in srgb, var(--c) 30%, transparent); } .col-body { display:flex; flex-direction:column; gap:11px; min-height:8px; } .col-empty { padding:18px 8px; text-align:center; color:var(--muted2); font-size:13px; } .col-add { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; border-radius:12px; font-size:13.5px; font-weight:600; color:var(--p-ink); background:var(--p-soft); border:1px dashed var(--card-edge-on); transition:background var(--t), border-color var(--t), color var(--t); } .col-add svg { width:16px; height:16px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; } .col-add:hover { background:color-mix(in srgb, var(--p1) 18%, transparent); color:var(--p1); border-color:var(--p1); } /* ===================== ACTIVE/CONNECTED GRID (R6) ===================== */ .active-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:12px; } .active-empty { padding:30px 10px; text-align:center; color:var(--muted2); font-size:14px; border:1px dashed var(--card-edge); border-radius:var(--r-lg); } .chips { display:flex; gap:7px; flex-wrap:wrap; margin-inline-start:auto; } .chip { min-height:34px; padding:0 13px; border-radius:999px; font-size:13px; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--card-edge); transition:color var(--t), background var(--t), border-color var(--t); } .chip:hover { color:var(--text); border-color:var(--card-edge-on); } .chip.is-active { color:#fff; background:linear-gradient(135deg,var(--p1),var(--p2)); border-color:transparent; } /* status color mapping (applies to .col and .card) */ .s-connected { --c:var(--green); --c-hi:var(--green-hi); --c-bg:var(--green-bg); --c-bdr:var(--green-bdr); } .s-withdrawn { --c:#0E9F6E; --c-hi:#047857; --c-bg:rgba(16,185,129,0.10); --c-bdr:rgba(16,185,129,0.30); } .s-straddle { --c:var(--amber); --c-hi:var(--amber-hi); --c-bg:var(--amber-bg); --c-bdr:var(--amber-bdr); } .s-install { --c:var(--p3); --c-hi:var(--p-ink); --c-bg:var(--p-soft); --c-bdr:var(--card-edge-on); } .s-disconnected{ --c:var(--disc); --c-hi:var(--disc); --c-bg:var(--disc-bg); --c-bdr:var(--disc-bdr); } .s-burned { --c:var(--red); --c-hi:var(--red-hi); --c-bg:var(--red-bg); --c-bdr:var(--red-bdr); } [data-theme="dark"] .s-withdrawn { --c:#2DD4BF; --c-hi:#5EEAD4; --c-bg:rgba(45,212,191,0.12); --c-bdr:rgba(45,212,191,0.34); } /* =============================== CARD =============================== */ .card { position:relative; overflow:hidden; padding:13px 14px; border-radius:var(--r-md); background:linear-gradient(180deg, var(--card), var(--card2)); border:1px solid var(--card-edge); box-shadow:var(--shadow-soft), var(--glass-hi); transition:transform var(--t), border-color var(--t), box-shadow var(--t); } .card::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:linear-gradient(90deg, var(--c), transparent 85%); opacity:.9; } .card:hover { transform:translateY(-3px); border-color:var(--card-edge-on); box-shadow:var(--shadow), 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent), var(--glass-hi); } .card-head { display:flex; align-items:flex-start; gap:8px; } .card-name { font-family:'Rubik',sans-serif; font-weight:700; font-size:15.5px; color:var(--text); flex:1; min-width:0; word-break:break-word; line-height:1.3; } .card-tools { display:flex; align-items:center; gap:5px; flex:none; } .card-acts { display:flex; gap:3px; } .dotflag { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; border:1px solid transparent; } .dotflag svg { width:14px; height:14px; } .dotflag.payout { color:var(--green-hi); background:var(--green-bg); border-color:var(--green-bdr); } .dotflag.burn { color:var(--red-hi); background:var(--red-bg); border-color:var(--red-bdr); } .dotflag.note { color:var(--muted); background:var(--surface2); border-color:var(--card-edge); transition:color var(--t), background var(--t), border-color var(--t); } .dotflag.note:hover { color:var(--p-ink); border-color:var(--card-edge-on); } .dotflag.note.open { color:#fff; background:linear-gradient(135deg,var(--p1),var(--p2)); border-color:transparent; } .card-act { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--muted); transition:color var(--t), background var(--t); } .card-act svg { width:15px; height:15px; } .card-act:hover { color:var(--text); background:var(--surface2); } .card-act.del:hover { color:var(--red-hi); background:var(--red-bg); } .card-sub { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:11px; } .pill { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; font-size:12px; font-weight:600; border-radius:999px; color:var(--c-hi); background:var(--c-bg); border:1px solid var(--c-bdr); } .pill .pdot { width:7px; height:7px; border-radius:50%; background:var(--c-hi); } [data-theme="dark"] .pill .pdot { box-shadow:0 0 8px var(--c-hi); } .pkg-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:12px; font-weight:600; border-radius:999px; color:var(--text2); background:var(--surface2); border:1px solid var(--card-edge); } .pkg-badge b { font-family:'Rubik',sans-serif; color:var(--text); font-weight:700; } .card-date { margin-inline-start:auto; display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--muted2); white-space:nowrap; } .card-date svg { width:12px; height:12px; } .card-notes { margin-top:11px; padding-top:11px; border-top:1px solid var(--line); font-size:13px; color:var(--text2); line-height:1.55; } @keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } /* =============================== TABLE =============================== */ .table-wrap { overflow-x:auto; border:1px solid var(--card-edge); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-soft), var(--glass-hi); } .table { width:100%; border-collapse:collapse; min-width:760px; } .table thead th { position:sticky; top:0; z-index:1; text-align:start; font-family:'Rubik',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.02em; color:var(--p-ink); white-space:nowrap; padding:14px 16px; background:var(--panel); backdrop-filter:blur(8px); border-bottom:1px solid var(--card-edge-on); } .table th.num { text-align:center; } .table tbody td { padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; } .table tbody tr { transition:background var(--t); } .table tbody tr:hover { background:var(--surface); } .table tbody tr:last-child td { border-bottom:none; } .cell-name { font-family:'Rubik',sans-serif; font-weight:600; color:var(--text); white-space:nowrap; } .cell-num { text-align:center; font-weight:600; color:var(--text); } .cell-muted { color:var(--muted2); } .cell-notes { max-width:280px; color:var(--text2); font-size:13px; } .cell-flag { display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:13px; } .cell-flag svg { width:15px; height:15px; } .cell-flag.yes-payout { color:var(--green-hi); } .cell-flag.yes-burn { color:var(--red-hi); } .cell-flag.no { color:var(--muted2); } .table td.actions { white-space:nowrap; } .table td.actions .card-act { display:inline-grid; } .table .pill { white-space:nowrap; } /* ============================ WEEKLY LOG ============================ */ .weekly-save { margin-inline-start:auto; } .weekly-list { display:flex; flex-direction:column; gap:12px; } .weekly-empty { padding:34px 16px; text-align:center; color:var(--muted2); font-size:14px; border:1px dashed var(--card-edge); border-radius:var(--r-lg); } .log-card { position:relative; overflow:hidden; padding:15px 16px 14px; border-radius:var(--r-md); background:linear-gradient(180deg, var(--card), var(--card2)); border:1px solid var(--card-edge); box-shadow:var(--shadow-soft), var(--glass-hi); transition:transform var(--t), border-color var(--t), box-shadow var(--t); } .log-card::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:var(--accent-grad); opacity:.85; } .log-card:hover { transform:translateY(-2px); border-color:var(--card-edge-on); box-shadow:var(--shadow), var(--glass-hi); } .log-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; } .log-date { font-family:'Rubik',sans-serif; font-weight:700; font-size:16px; color:var(--text); } .log-meta { font-size:12px; color:var(--muted2); margin-inline-start:auto; } .log-del { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:8px; color:var(--muted2); margin-inline-start:6px; transition:color var(--t), background var(--t); } .log-del svg { width:15px; height:15px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .log-del:hover { color:var(--red-hi); background:var(--red-bg); } .log-stats { display:flex; flex-wrap:wrap; gap:7px; } .log-stat { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; font-size:12.5px; color:var(--muted); background:var(--surface); border:1px solid var(--card-edge); } .log-stat b { font-family:'Rubik',sans-serif; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; } .log-stat.pos b { color:var(--green-hi); } .log-stat.neg b { color:var(--red-hi); } .log-notes { margin-top:12px; padding-top:11px; border-top:1px solid var(--line); font-size:13px; color:var(--text2); line-height:1.55; } /* ============================ EMPTY STATE ============================ */ .empty-state { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:60px 24px; } .empty-art { width:84px; height:84px; display:grid; place-items:center; border-radius:24px; color:var(--p-ink); background:var(--p-soft); border:1px solid var(--card-edge-on); box-shadow:var(--p-glow); } .empty-art svg { width:38px; height:38px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .empty-state h3 { font-size:19px; color:var(--text); } .empty-state p { color:var(--muted); max-width:340px; } .empty-state .btn { margin-top:6px; } /* =============================== FOOTER =============================== */ .foot { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:40px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted2); font-size:12.5px; letter-spacing:.02em; } .foot-dot { color:var(--p-ink); } /* =============================== MODALS =============================== */ .modal-backdrop { position:fixed; inset:0; z-index:var(--z-modal); background:var(--scrim); backdrop-filter:blur(6px); animation:fade .2s ease-out; } .modal { position:fixed; z-index:calc(var(--z-modal) + 1); inset-block-start:50%; inset-inline-start:50%; transform:translate(50%,-50%); width:min(520px, calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; background:linear-gradient(180deg, var(--card), var(--card2)); border:1px solid var(--card-edge-on); border-radius:var(--r-lg); box-shadow:var(--shadow), var(--glass-hi); animation:pop .22s cubic-bezier(.22,.61,.36,1); } .modal.sm { width:min(420px, calc(100vw - 32px)); } @keyframes pop { from { opacity:0; transform:translate(50%,-50%) scale(.95); } to { opacity:1; transform:translate(50%,-50%) scale(1); } } @keyframes fade { from { opacity:0; } to { opacity:1; } } .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); } .modal-head h2 { font-size:18px; font-weight:700; } .modal-body { padding:20px; display:flex; flex-direction:column; gap:16px; } .modal-foot { display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:16px 20px; border-top:1px solid var(--line); } .modal-hint { color:var(--text2); font-size:14px; text-align:center; } .modal-hint strong { color:var(--text); } .field { display:flex; flex-direction:column; gap:7px; } .field label { font-size:13.5px; font-weight:600; color:var(--text2); } .field .req { color:var(--p-ink); } .field-error { font-size:12.5px; color:var(--red-hi); font-weight:600; } .field-row { display:flex; gap:12px; flex-wrap:wrap; } .textarea { min-height:84px; padding:11px 14px; line-height:1.5; resize:vertical; } /* switch toggle */ .switch { flex:1 1 160px; display:flex; align-items:center; gap:10px; cursor:pointer; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--card-edge); transition:border-color var(--t), background var(--t); min-height:50px; } .switch:hover { border-color:var(--card-edge-on); } .switch input { position:absolute; opacity:0; width:0; height:0; } .switch-track { position:relative; width:42px; height:24px; flex:none; border-radius:999px; background:var(--surface2); border:1px solid var(--card-edge); transition:background var(--t), border-color var(--t); } .switch-thumb { position:absolute; top:2px; inset-inline-start:2px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:transform var(--t), background var(--t); } .switch-label { font-size:14px; font-weight:600; color:var(--text2); } .switch input:checked ~ .switch-track { background:var(--green-bg); border-color:var(--green-bdr); } .switch input:checked ~ .switch-track .switch-thumb { background:var(--green); transform:translateX(-18px); } .switch.danger input:checked ~ .switch-track { background:var(--red-bg); border-color:var(--red-bdr); } .switch.danger input:checked ~ .switch-track .switch-thumb { background:var(--red); } .switch input:focus-visible ~ .switch-track { box-shadow:0 0 0 3px var(--p-soft); } .switch input:checked ~ .switch-label { color:var(--text); } .warn-badge { width:58px; height:58px; margin:0 auto; display:grid; place-items:center; border-radius:18px; color:var(--red-hi); background:var(--red-bg); border:1px solid var(--red-bdr); } .warn-badge svg { width:26px; height:26px; } /* =============================== TOASTS =============================== */ .toasts { position:fixed; z-index:var(--z-toast); inset-block-end:22px; inset-inline-start:50%; transform:translateX(50%); display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; width:max-content; max-width:calc(100vw - 28px); } .toast { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; font-size:14px; font-weight:600; color:var(--text); background:linear-gradient(180deg, var(--card), var(--card2)); border:1px solid var(--card-edge-on); box-shadow:var(--shadow); animation:toastIn .25s cubic-bezier(.22,.61,.36,1); } .toast.out { animation:toastOut .2s ease-in forwards; } .toast .tdot { width:9px; height:9px; border-radius:50%; flex:none; } .toast.ok .tdot { background:var(--green); } .toast.err .tdot { background:var(--red); } .toast.info .tdot { background:var(--p1); } @keyframes toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes toastOut { to { opacity:0; transform:translateY(8px); } } .noscript { padding:20px; text-align:center; color:var(--text); } /* =============================== FOCUS =============================== */ :focus-visible { outline:2px solid var(--p1); outline-offset:2px; border-radius:4px; } .btn:focus-visible,.seg-btn:focus-visible,.icon-btn:focus-visible,.card-act:focus-visible,.chip:focus-visible,.dotflag:focus-visible { outline:2px solid var(--p1); outline-offset:2px; } /* ===================== iOS-STYLE BRAND ICON (replaces logo image) ===================== */ .brand-icon { flex:none; display:grid; place-items:center; color:#fff; font-family:'Rubik',sans-serif; font-weight:800; line-height:1; background:linear-gradient(150deg,#8B30FF,#6D1FCC); box-shadow:0 6px 16px -6px rgba(109,31,204,0.6), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -2px 6px rgba(0,0,0,0.16); } .brand-icon.sm { width:44px; height:44px; border-radius:13px; font-size:23px; } .brand-icon.lg { width:74px; height:74px; border-radius:21px; font-size:38px; } /* app-icon image (header + lock) */ .brand-img { flex:none; display:block; object-fit:cover; box-shadow:0 6px 16px -7px rgba(109,31,204,0.55), var(--glass-hi); } .brand-img.sm { width:44px; height:44px; border-radius:13px; } .brand-img.lg { width:74px; height:74px; border-radius:21px; } /* ===================== CARD EXPANDER (chevron) + collapsible details ===================== */ .card-expand { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--muted); transition:color var(--t), background var(--t), transform var(--t); } .card-expand svg { width:16px; height:16px; stroke:currentColor; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; } .card-expand:hover { color:var(--text); background:var(--surface2); } .card.is-open .card-expand { transform:rotate(180deg); color:var(--p-ink); } .card-details { margin-top:11px; padding-top:11px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:11px; } .detail-date { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); } .detail-date svg { width:13px; height:13px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .detail-notes { font-size:13px; color:var(--text2); line-height:1.55; } /* ===================== WITHDRAWALS block inside a card ===================== */ .wd-block { display:flex; flex-direction:column; gap:8px; } .wd-head { display:flex; align-items:center; gap:8px; } .wd-title { font-weight:700; font-size:13px; color:var(--text); } .wd-total { margin-inline-start:auto; font-family:'Rubik',sans-serif; font-weight:800; font-size:14px; color:#9A7B16; font-variant-numeric:tabular-nums; } [data-theme="dark"] .wd-total { color:#F0C75E; } .wd-list { display:flex; flex-direction:column; gap:6px; } .wd-row { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; background:var(--surface); border:1px solid var(--card-edge); font-size:12.5px; } .wd-row .wd-amt { font-family:'Rubik',sans-serif; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; } .wd-row .wd-acc { color:var(--muted); } .wd-row .wd-date { color:var(--muted2); margin-inline-start:auto; } .wd-row .wd-del { width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:7px; color:var(--muted); } .wd-row .wd-del svg { width:13px; height:13px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .wd-row .wd-del:hover { color:var(--red-hi); background:var(--red-bg); } .wd-empty { font-size:12.5px; color:var(--muted2); } .wd-add { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:0 13px; border-radius:10px; font-size:12.5px; font-weight:700; color:#9A7B16; background:rgba(212,175,55,0.12); border:1px dashed rgba(212,175,55,0.5); align-self:flex-start; transition:background var(--t), color var(--t); } .wd-add svg { width:14px; height:14px; stroke:currentColor; stroke-width:2.6; fill:none; stroke-linecap:round; } .wd-add:hover { background:rgba(212,175,55,0.22); } [data-theme="dark"] .wd-add { color:#F0C75E; } /* ===================== GOLD withdrawals summary tile ===================== */ .k-withdrawals { --kc:#D4AF37; border-color:rgba(212,175,55,0.32); background:radial-gradient(120% 120% at 100% 0%, rgba(212,175,55,0.16), transparent 60%), linear-gradient(180deg, var(--card), var(--card2)); } .k-withdrawals .kpi-ico { color:#B8902A; background:rgba(212,175,55,0.16); border-color:rgba(212,175,55,0.34); } .k-withdrawals .kpi-num { color:#9A7B16; } [data-theme="dark"] .k-withdrawals { border-color:rgba(240,199,94,0.34); } [data-theme="dark"] .k-withdrawals .kpi-ico { color:#F0C75E; background:rgba(240,199,94,0.14); border-color:rgba(240,199,94,0.34); } [data-theme="dark"] .k-withdrawals .kpi-num { color:#F0C75E; } /* gold stat chip in the weekly log card */ .log-stat.gold { background:rgba(212,175,55,0.12); border-color:rgba(212,175,55,0.34); color:#9A7B16; } .log-stat.gold b { color:#9A7B16; } [data-theme="dark"] .log-stat.gold { color:#F0C75E; } [data-theme="dark"] .log-stat.gold b { color:#F0C75E; } /* ===================== LIGHT THEME — REAL DEPTH WITH COLOR ===================== */ /* On a light background soft glows are nearly invisible, so the light theme earns its premium depth with COLOR, TINT, SATURATION and CRISP PURPLE-TINTED SHADOWS instead of glow. Surfaces carry a faint lavender gradient (tokens), accent bars are bold & saturated, shadows are colored, and the header reads branded. Every rule is scoped to [data-theme="light"] so the dark theme is untouched. */ /* page background: gentle purple ambient wash over the base gradient */ [data-theme="light"] .bg-glows { background: radial-gradient(720px 520px at 92% -4%, rgba(139,48,255,0.15), transparent 60%), radial-gradient(640px 520px at 4% 10%, rgba(109,31,204,0.11), transparent 62%), radial-gradient(900px 720px at 50% 116%, rgba(168,85,247,0.10), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg2) 55%, var(--bg)); } /* header bar: clearly branded — purple-tinted glass, a colored bottom border, and a crisp purple-tinted drop-shadow so the top of the app reads intentional, not white */ [data-theme="light"] .topbar { background:linear-gradient(180deg, rgba(249,246,254,0.9), rgba(238,231,251,0.84)); border-color:rgba(139,48,255,0.24); border-bottom:2px solid rgba(139,48,255,0.34); box-shadow:0 16px 30px -18px rgba(109,31,204,0.42), 0 3px 9px -6px rgba(109,31,204,0.20), inset 0 1px 0 rgba(255,255,255,0.7); } [data-theme="light"] .brand-img { box-shadow:0 8px 18px -6px rgba(109,31,204,0.55), var(--glass-hi); } /* summary tiles: BOLD saturated top accent bar, saturated icon chip, crisp colored lift */ [data-theme="light"] .kpi { box-shadow:0 14px 30px -18px rgba(109,31,204,0.30), 0 3px 10px -5px rgba(109,31,204,0.16), var(--glass-hi); } [data-theme="light"] .kpi:hover { box-shadow:0 22px 40px -18px rgba(109,31,204,0.42), 0 5px 14px -6px rgba(109,31,204,0.22), var(--glass-hi); } [data-theme="light"] .kpi::before { height:4px; opacity:1; background:linear-gradient(90deg, var(--kc), color-mix(in srgb, var(--kc) 58%, #ffffff)); } [data-theme="light"] .kpi-ico { background:color-mix(in srgb, var(--kc) 20%, #ffffff); border-color:color-mix(in srgb, var(--kc) 42%, transparent); box-shadow:0 5px 11px -5px color-mix(in srgb, var(--kc) 48%, transparent); } [data-theme="light"] .k-withdrawals { box-shadow:0 14px 30px -18px rgba(184,144,42,0.42), 0 3px 10px -5px rgba(184,144,42,0.22), var(--glass-hi); } /* cards: BOLD status-colored top accent + crisp purple-tinted elevation */ [data-theme="light"] .card { box-shadow:0 14px 30px -18px rgba(109,31,204,0.26), 0 3px 9px -5px rgba(109,31,204,0.15), var(--glass-hi); } [data-theme="light"] .card::before { height:4px; opacity:1; background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, transparent) 96%); } [data-theme="light"] .card:hover { box-shadow:0 24px 42px -18px rgba(109,31,204,0.36), 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent), 0 4px 12px -6px rgba(109,31,204,0.20), var(--glass-hi); } [data-theme="light"] .log-card { box-shadow:0 14px 30px -18px rgba(109,31,204,0.24), 0 3px 9px -5px rgba(109,31,204,0.14), var(--glass-hi); } [data-theme="light"] .log-card::before { height:4px; opacity:1; } /* onboarding columns: faint status-colored surface wash + colored header rule & count */ [data-theme="light"] .col { background:linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, #ffffff), color-mix(in srgb, var(--c) 4%, #ffffff)); border-color:color-mix(in srgb, var(--c) 24%, transparent); box-shadow:0 10px 24px -18px color-mix(in srgb, var(--c) 60%, transparent), var(--glass-hi); } [data-theme="light"] .col-head { border-bottom-color:color-mix(in srgb, var(--c) 26%, transparent); } [data-theme="light"] .col-count { background:color-mix(in srgb, var(--c) 20%, #ffffff); border-color:color-mix(in srgb, var(--c) 40%, transparent); } /* role chip: a saturated purple chip that pops on white */ [data-theme="light"] .role-pill { background:color-mix(in srgb, var(--p1) 13%, #ffffff); border-color:color-mix(in srgb, var(--p1) 34%, transparent); } /* ============================ RESPONSIVE ============================ */ @media (max-width:760px) { .app { padding:16px 14px 46px; } .brand-title { font-size:20px; } .live-pill { display:none; } .kpi { flex:1 1 calc(50% - 6px); min-width:0; padding:13px 14px; } .kpi-num { font-size:26px; } .seg { flex:1 1 100%; } .seg-btn { flex:1; justify-content:center; } .control-field.search { flex:1 1 100%; order:4; } .section-head { gap:10px; } .section-head .chips { margin-inline-start:0; width:100%; } .active-grid { grid-template-columns:1fr 1fr; gap:11px; } /* roomier tap targets on touch */ .dotflag { width:32px; height:32px; } .dotflag svg { width:15px; height:15px; } .card-act { width:36px; height:36px; } .card-act svg { width:17px; height:17px; } .chip { min-height:38px; padding:0 14px; } } /* phones: header reflows to logo+title row, then actions underneath — no squish/overflow */ @media (max-width:480px) { .topbar { gap:12px; } .brand { width:100%; min-width:0; } .brand-title { font-size:19px; } .topbar-actions { width:100%; justify-content:flex-start; gap:8px; flex-wrap:wrap; } .summary { gap:10px; } .active-grid { grid-template-columns:1fr; } .block, .pipeline-section { margin-bottom:24px; } .section-title { font-size:16px; } } @media (max-width:380px) { .brand-wordmark { display:none; } .app { padding:14px 12px 40px; } .role-pill { padding:6px 10px; font-size:12px; } .btn { padding:0 14px; } .kpi-num { font-size:24px; } } /* ====================== REDUCED MOTION (a11y) ====================== */ @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .live-dot { animation:none; } }