/* ===== Creator Dashboard — liquid-glass design system ===== Sibling to KCM OS: same glass language (blur 40px / saturate 180% / .5px hairline / 16px radius / ambient orbs / system font stack, KCM blue #2160E0) and the same collapsible pure-black sidebar. Personal and analytics-forward: numbers lead, and spacing is generous — legibility over density. Dark is the default; the toggle stamps data-theme on . */ *{box-sizing:border-box;margin:0;padding:0} :root{ --blue:#2160E0; --blue2:#5B8DEF; --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --purple:#BF5AF2; --teal:#64D2FF; --r-btn:10px; --r-sm:12px; --r-card:16px; --r-modal:20px; --sans:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Monaco,"Cascadia Code",monospace; --blur:saturate(180%) blur(40px); /* spacing scale — the de-clump lives here */ --gap-xs:8px; --gap-sm:14px; --gap:20px; --gap-lg:28px; --gap-section:44px; --pad-card:22px; --sidebar-w:260px; --sidebar-collapsed:72px; } /* dark (default) */ :root,[data-theme="dark"]{ --bg:#0a0a0b; --surface:#141416; --elevated:#1c1c1e; --secondary:#2c2c2e; --glass:rgba(255,255,255,.05); --glass-hover:rgba(255,255,255,.08); --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14); --ink:#f5f5f7; --ink-2:#aeaeb2; --ink-3:#86868b; --ink-4:#6a6a70; --pos:#30D158; --warn:#FF9F0A; --danger:#FF453A; --blue-soft:rgba(33,96,224,.18); --pos-soft:rgba(48,209,88,.16); --warn-soft:rgba(255,159,10,.16); --danger-soft:rgba(255,69,58,.16); --elev-shadow:0 8px 30px rgba(0,0,0,.5); --gridline:rgba(255,255,255,.09); --shadow-card:none; --rail:#000; /* chart series — dark steps of the validated categorical order. Validated (surface #141416): CVD ΔE 8.4 worst adjacent, all >= 3:1. */ --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500; --series-5:#d55181; --series-6:#008300; --money:#30D158; } [data-theme="light"]{ --bg:#f7f7f9; --surface:#f5f5f7; --elevated:#fff; --secondary:#e9e9ee; --glass:rgba(255,255,255,.66); --glass-hover:rgba(255,255,255,.88); --border:rgba(0,0,0,.10); --border-strong:rgba(0,0,0,.16); --ink:#1d1d1f; --ink-2:#515154; --ink-3:#86868b; --ink-4:#a1a1a6; --pos:#248a3d; --warn:#b25000; --danger:#d70015; --blue-soft:rgba(33,96,224,.12); --pos-soft:rgba(48,209,88,.14); --warn-soft:rgba(255,159,10,.16); --danger-soft:rgba(255,69,58,.14); --elev-shadow:0 10px 30px rgba(0,0,0,.10); --gridline:rgba(0,0,0,.09); --shadow-card:0 1px 2px rgba(0,0,0,.04); --rail:#fbfbfd; /* light steps of the same eight hues. Validated (surface #f5f5f7): three slots sit below 3:1 — the relief rule applies, so every series is direct- labelled in the legend AND repeated as a number in the accounts table. */ --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100; --series-5:#e87ba4; --series-6:#008300; --money:#248a3d; } html,body{height:100%} body{ background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45; display:flex;overflow:hidden;-webkit-font-smoothing:antialiased;position:relative; transition:background .4s ease,color .3s ease; } ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px} button,input,select{font-family:inherit;font-size:inherit} h1,h2,h3{letter-spacing:-.02em;font-weight:600} /* ambient orbs */ .orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.13} [data-theme="light"] .orb{opacity:.08} .orb-blue{width:620px;height:620px;background:var(--blue);top:-220px;left:120px} .orb-teal{width:460px;height:460px;background:var(--teal);top:28%;right:-160px;opacity:.09} .orb-purple{width:520px;height:520px;background:var(--purple);bottom:-260px;left:40%;opacity:.10} /* ===== SIDEBAR ===== */ .sidebar{ position:relative;z-index:3;width:var(--sidebar-w);flex-shrink:0;background:var(--rail); border-right:.5px solid var(--border);display:flex;flex-direction:column;padding:20px 14px; transition:width .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden; } .brand-mark{display:flex;align-items:center;gap:9px;padding:2px 8px 20px;margin-bottom:16px; border-bottom:.5px solid var(--border);position:relative} .mark-name{font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--ink);white-space:nowrap} .mark-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue);flex-shrink:0} .mark-tag{font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.06em} .sidebar-collapse{margin-left:auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center; border:.5px solid var(--border);border-radius:8px;background:var(--glass);color:var(--ink-3);cursor:pointer;transition:all .18s} .sidebar-collapse:hover{background:var(--glass-hover);color:var(--ink)} .nav{display:flex;flex-direction:column;gap:2px} .nav-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--r-btn);cursor:pointer; color:var(--ink-3);font-size:14px;font-weight:500;transition:all .16s ease;border:.5px solid transparent; position:relative;white-space:nowrap;background:none;text-align:left;width:100%} .nav-item:hover{background:var(--glass);color:var(--ink-2)} .nav-item.active{background:var(--glass-hover);color:var(--ink);border-color:var(--border)} .nav-item.active .nav-ic{color:var(--blue2)} .nav-ic{width:19px;height:19px;flex-shrink:0;opacity:.95;transition:color .16s} .nav-text{flex:1;overflow:hidden;text-overflow:ellipsis} .nav-badge{font-size:11px;font-weight:600;color:var(--ink-3);background:var(--glass);padding:1px 8px; border-radius:99px;border:.5px solid var(--border)} .nav-item.active .nav-badge{color:var(--blue2);background:var(--blue-soft);border-color:transparent} .nav-swatch{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin:0 5px} .nav-item.active .nav-swatch{box-shadow:0 0 10px currentColor} .nav-group{margin-top:22px} .nav-group-head{display:flex;align-items:center;padding:0 11px 8px} .nav-group-title{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)} .nav-item.add{color:var(--ink-4);font-weight:500;border-style:dashed;border-color:var(--border);margin-top:4px} .nav-item.add:hover{color:var(--ink-2);border-color:var(--border-strong)} .sidebar-foot{margin-top:auto;padding:16px 6px 2px;border-top:.5px solid var(--border)} .foot-row{display:flex;align-items:center;gap:10px;overflow:hidden} .foot-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--blue),var(--teal)); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff} .foot-meta{min-width:0;flex:1} .foot-name{font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .foot-sub{font-size:11px;color:var(--ink-3);white-space:nowrap} .icon-btn{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px; border:.5px solid var(--border);background:var(--glass);color:var(--ink-3);cursor:pointer;transition:all .16s} .icon-btn:hover{background:var(--glass-hover);color:var(--ink)} .icon-btn svg{width:16px;height:16px} /* collapsed */ body.nav-collapsed .sidebar{width:var(--sidebar-collapsed);padding-left:10px;padding-right:10px} body.nav-collapsed .nav-text, body.nav-collapsed .nav-badge, body.nav-collapsed .mark-tag, body.nav-collapsed .mark-name, body.nav-collapsed .nav-group-title, body.nav-collapsed .foot-meta{display:none} body.nav-collapsed .nav-item{justify-content:center;padding:9px} body.nav-collapsed .brand-mark{justify-content:center;padding:2px 0 20px} body.nav-collapsed .sidebar-collapse{position:absolute;right:2px;top:-2px;margin:0} body.nav-collapsed .sidebar-collapse svg{transform:rotate(180deg)} body.nav-collapsed .foot-row{justify-content:center} body.nav-collapsed .nav-group-head{justify-content:center;padding:0 0 8px} body.nav-collapsed .nav-group-head::after{content:"";width:18px;height:1px;background:var(--border)} body.nav-collapsed .nav-swatch{margin:0} /* ===== MAIN ===== */ .main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0} .topbar{ height:64px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 var(--gap-lg); border-bottom:.5px solid var(--border);background:var(--glass); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); } .tb-heading{display:flex;flex-direction:column;justify-content:center;min-width:0} .tb-eyebrow{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)} .tb-title{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2;white-space:nowrap} .tb-spacer{flex:1} .nav-open{display:none} .save-indicator{font-size:12px;color:var(--ink-3);font-weight:500;min-width:56px;text-align:right} .save-indicator.saving{color:var(--warn)} .save-indicator.saved{color:var(--pos)} .save-indicator.error{color:var(--danger)} .scroll-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--gap-lg) var(--gap-lg) 96px} .btn{ display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-btn); border:.5px solid var(--border);background:var(--glass);color:var(--ink-2);font-size:13px;font-weight:500; cursor:pointer;transition:all .16s ease;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);white-space:nowrap; } .btn:hover:not(:disabled){background:var(--glass-hover);color:var(--ink);border-color:var(--border-strong)} .btn:disabled{opacity:.4;cursor:default} .btn.primary{background:var(--blue);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(33,96,224,.35)} .btn.primary:hover:not(:disabled){background:#3570e8;color:#fff} .btn.danger{color:var(--danger);border-color:var(--danger-soft)} .btn.danger:hover:not(:disabled){background:var(--danger-soft);color:var(--danger)} .btn.icon{padding:8px 10px} .btn.sm{padding:6px 11px;font-size:12px} .btn svg{width:15px;height:15px;flex-shrink:0} [data-theme="dark"] .ic-sun{display:block} [data-theme="dark"] .ic-moon{display:none} [data-theme="light"] .ic-sun{display:none} [data-theme="light"] .ic-moon{display:block} .banner{ display:none;align-items:center;gap:10px;margin-bottom:var(--gap);padding:11px 15px;border-radius:var(--r-sm); background:var(--warn-soft);border:.5px solid var(--warn);color:var(--ink);font-size:13px;font-weight:500; } .banner.show{display:flex} .banner.error{background:var(--danger-soft);border-color:var(--danger)} /* ===== WINDOW CONTROL ===== */ .controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--gap-lg)} .controls[hidden]{display:none} .segmented{display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-btn);border:.5px solid var(--border); background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} .seg{padding:6px 14px;border-radius:8px;border:none;background:transparent;color:var(--ink-3);font-size:13px; font-weight:600;cursor:pointer;transition:all .16s} .seg:hover{color:var(--ink-2)} .seg.active{background:var(--blue);color:#fff;box-shadow:0 2px 10px rgba(33,96,224,.3)} .date-range{display:none;align-items:center;gap:8px} .date-range.show{display:flex} .date-range span{font-size:12px;color:var(--ink-3)} input[type="date"],input[type="text"],input[type="number"],select,textarea{ padding:8px 12px;border-radius:var(--r-btn);border:.5px solid var(--border);background:var(--glass); color:var(--ink);font-size:13px;outline:none;transition:border-color .16s,background .16s;color-scheme:dark; } [data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{color-scheme:light} input:focus,select:focus,textarea:focus{border-color:var(--blue);background:var(--glass-hover)} .window-label{font-size:12.5px;color:var(--ink-3);font-weight:500;margin-left:auto} /* ===== SECTIONS ===== */ .card{ background:var(--glass);border:.5px solid var(--border);border-radius:var(--r-card); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow-card); } .section{margin-top:var(--gap-section)} .section:first-child{margin-top:0} .section-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:var(--gap);flex-wrap:wrap} .section-head .titles{min-width:0} .section-head .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-4);display:block;margin-bottom:3px} .section-head h2{font-size:17px} .section-head .hint{font-size:12.5px;color:var(--ink-3);padding-bottom:2px} .section-head .spacer{flex:1} /* KPI row */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap)} .kpi{padding:var(--pad-card) 24px;position:relative;overflow:hidden} .kpi .label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .kpi .value{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1.08;margin-top:12px; font-variant-numeric:tabular-nums} .kpi .value.money{color:var(--money)} .kpi .meta{font-size:12.5px;color:var(--ink-3);margin-top:10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .kpi.hero .value{font-size:52px} .delta{font-weight:600;font-variant-numeric:tabular-nums} .delta.up{color:var(--pos)} .delta.down{color:var(--danger)} .delta.flat{color:var(--ink-3)} /* ===== CHART ===== */ .chart-card{padding:var(--pad-card) 24px 18px} .chart-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap} .chart-head h3{font-size:14.5px;font-weight:600} .chart-head .spacer{flex:1} .legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px} .legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);font-weight:500} .legend-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0} .legend-note{font-size:11.5px;color:var(--ink-3);width:100%} /* the value rides in the legend so a squashed line is still readable as a number */ .legend-value{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;margin-left:2px} .chart-svg{width:100%;display:block;overflow:visible} .chart-scroll{overflow-x:auto} .axis-label{font-size:10px;fill:var(--ink-3);font-family:var(--sans)} .point-label{font-size:10.5px;font-weight:600;fill:var(--ink-2);font-family:var(--sans);font-variant-numeric:tabular-nums} .gridline{stroke:var(--gridline);stroke-width:1} .crosshair{stroke:var(--border-strong);stroke-width:1;stroke-dasharray:3 3;opacity:0} .chart-svg:hover .crosshair{opacity:1} .hover-band{fill:transparent;cursor:crosshair} .tooltip{ position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translate(-50%,-112%); padding:10px 13px;border-radius:var(--r-sm);background:var(--elevated);border:.5px solid var(--border-strong); box-shadow:var(--elev-shadow);font-size:12px;min-width:140px;transition:opacity .12s; } .tooltip.show{opacity:1} .tooltip .tt-date{font-size:11px;color:var(--ink-3);font-weight:600;margin-bottom:6px} .tooltip .tt-row{display:flex;align-items:center;gap:8px;margin-top:4px} .tooltip .tt-row .sw{width:8px;height:8px;border-radius:2px;flex-shrink:0} .tooltip .tt-row .nm{color:var(--ink-2);flex:1} .tooltip .tt-row .vl{font-weight:600;font-variant-numeric:tabular-nums} .tooltip .tt-row .vl.muted{color:var(--ink-4);font-weight:500} .tooltip .tt-note{display:block;font-size:10.5px;color:var(--ink-4);font-weight:500} /* ===== ACCOUNT CARD GRID (de-clumped) ===== */ .account-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--gap)} .acct-card{padding:var(--pad-card);display:flex;flex-direction:column;gap:18px;transition:border-color .16s,transform .16s} .acct-card:hover{border-color:var(--border-strong)} .acct-head{display:flex;align-items:flex-start;gap:13px;min-width:0} .pf{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0; border:.5px solid var(--border);background:var(--glass)} .pf svg{width:19px;height:19px} .pf.youtube{color:#FF3B30} .pf.instagram{color:#E1306C} .pf.tiktok{color:var(--teal)} .pf.x{color:var(--ink)} .acct-titles{min-width:0;flex:1} .acct-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acct-sub{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px 7px;flex-wrap:wrap;margin-top:5px} .acct-sub .handle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .acct-spark{margin-left:auto;flex-shrink:0} .acct-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 14px} .stat{min-width:0} .stat .k{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)} .stat .v{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.025em;margin-top:4px} .stat .v.money{color:var(--money)} .stat .d{font-size:11.5px;margin-top:3px;color:var(--ink-4)} .acct-foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:16px;border-top:.5px solid var(--border)} .acct-foot .spacer{flex:1} .spark{width:96px;height:30px;display:block} .pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600; border:.5px solid var(--border);color:var(--ink-3);background:var(--glass);white-space:nowrap} .pill.auto{color:var(--blue2);border-color:var(--blue-soft);background:var(--blue-soft)} .pill.manual{color:var(--ink-3)} .pill.stale{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)} .pill.fresh{color:var(--pos);border-color:var(--pos-soft);background:var(--pos-soft)} .pill.money{color:var(--money);border-color:var(--pos-soft);background:var(--pos-soft)} /* ===== UPDATE TAB (daily entry) ===== */ .pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px} .pick-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-card); border:.5px solid var(--border);background:var(--glass);backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);cursor:pointer;transition:all .16s;text-align:left;width:100%; color:var(--ink);min-height:76px} .pick-card:hover{background:var(--glass-hover);border-color:var(--border-strong);transform:translateY(-1px)} .pick-card.today{border-color:var(--pos-soft)} .pick-card.done{border-color:var(--pos-soft)} .pick-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0} .pick-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .pick-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pick-sub{font-size:12px;color:var(--ink-3)} .pick-check{font-size:18px;color:var(--pos);font-weight:700;flex-shrink:0} .pick-go{font-size:22px;color:var(--ink-4);flex-shrink:0;line-height:1} .entry-card{padding:var(--pad-card) 24px} .entry-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:6px} .entry-fields input{font-size:19px;padding:12px 14px;font-variant-numeric:tabular-nums} .entry-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px} .entry-actions .btn{padding:11px 20px;font-size:14px} .entry-last{margin-top:16px;padding-top:14px;border-top:.5px solid var(--border); font-size:12.5px;color:var(--ink-3)} /* ===== RUNNING TOTALS / PAYOUT HISTORY ===== */ .totals-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px} .total-cell{padding:14px 16px;border-radius:var(--r-sm);border:.5px solid var(--border);background:var(--glass)} .total-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-4);margin-bottom:10px} .total-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px; font-size:12.5px;color:var(--ink-3);padding:3px 0} .total-row b{font-size:15px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .payout-row{display:flex;align-items:baseline;gap:12px;padding:6px 0;font-size:12.5px} .payout-period{color:var(--ink-2);min-width:120px} .payout-amount{color:var(--money);font-weight:600;font-variant-numeric:tabular-nums} .payout-received{color:var(--ink-4);font-size:11.5px} .pick-card.quiet .pick-name{color:var(--ink-2)} /* ===== BRAND SETTINGS / ROSTER ===== */ .nav-gear{width:24px;height:24px;flex-shrink:0;display:none;align-items:center;justify-content:center; border-radius:7px;border:.5px solid transparent;background:none;color:var(--ink-4);cursor:pointer; padding:0;margin-left:2px;transition:all .15s} .nav-gear svg{width:14px;height:14px} .nav-item:hover .nav-gear,.nav-gear.on{display:flex} .nav-gear:hover{background:var(--glass-hover);color:var(--ink);border-color:var(--border)} .nav-gear.on{color:var(--blue2)} .roster-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center; padding:16px 0;border-bottom:.5px solid var(--border)} .roster-row:last-child{border-bottom:none} .roster-row.archived{opacity:.62} .roster-id{min-width:0} .roster-name{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .roster-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:11.5px;color:var(--ink-3)} .roster-meta{display:flex;gap:14px;font-size:11.5px;color:var(--ink-4);white-space:nowrap} .roster-actions{display:flex;gap:7px} .platform-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .platform-option{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:var(--r-sm); border:.5px solid var(--border);background:var(--glass);color:var(--ink);font-size:13.5px;font-weight:600; cursor:pointer;transition:all .16s;text-align:left} .platform-option:hover{background:var(--glass-hover);border-color:var(--border-strong)} .platform-option .pf{width:30px;height:30px;border-radius:9px} .platform-option .pf svg{width:16px;height:16px} .platform-option.taken{color:var(--ink-3)} .platform-option .pill{margin-left:auto} @media (max-width:700px){ .roster-row{grid-template-columns:auto minmax(0,1fr);row-gap:10px} .roster-meta,.roster-actions{grid-column:1/-1} } /* ===== SHARED GRAPH CONTROLS ===== */ .chart-hint{font-size:12px;color:var(--ink-3);font-weight:500} .chart-filter{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 0 16px} .chart-filter-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-4);margin-right:2px} .chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:99px; border:.5px solid var(--border);background:var(--glass);color:var(--ink-4);font-size:12.5px;font-weight:500; cursor:pointer;transition:all .15s ease} .chip:hover{background:var(--glass-hover);color:var(--ink-2);border-color:var(--border-strong)} .chip.on{color:var(--ink);border-color:var(--border-strong);background:var(--glass-hover)} .chip-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;opacity:.35;transition:opacity .15s} .chip.on .chip-dot{opacity:1} .chip.ghost{border-style:dashed;color:var(--ink-4)} .legend-item{background:none;border:none;padding:2px 0;cursor:pointer;font:inherit;font-size:12px; color:var(--ink-2);font-weight:500;display:inline-flex;align-items:center;gap:7px;transition:opacity .15s} .legend-item:hover{opacity:.6} .small-multiples{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px} .multiple{min-width:0} .multiple-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;margin-bottom:6px} .multiple-head .sw{width:9px;height:9px;border-radius:3px;flex-shrink:0} .multiple-head .muted{color:var(--ink-3);font-weight:500;margin-left:auto;font-variant-numeric:tabular-nums} .tt-total{border-top:.5px solid var(--border);margin-top:6px;padding-top:6px} .stacked-chart{cursor:crosshair} /* expanded chart overlay */ .chart-overlay{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.62);backdrop-filter:blur(8px); display:none;align-items:center;justify-content:center;padding:28px} .chart-overlay.show{display:flex} .chart-overlay-inner{width:100%;max-width:1320px;max-height:92vh;overflow-y:auto} .chart-overlay-inner .chart-card{background:var(--elevated);border-color:var(--border-strong); box-shadow:var(--elev-shadow);padding:26px 28px 22px} .chart-overlay-inner .chart-head h3{font-size:18px} /* ===== OUTPUT / POSTS-PER-DAY ===== */ .posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:26px} .posts-card{display:flex;flex-direction:column;gap:12px} .posts-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .posts-head .spacer{flex:1} .posts-chart-wrap{min-height:0} .posts-chart{cursor:crosshair} .posts-foot{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:.5px solid var(--border)} .posts-foot .spacer{flex:1} .axis-note{font-size:11.5px;color:var(--ink-4)} .btn-pair{display:inline-flex;gap:4px} /* ===== CADENCE (revenue trend strip) ===== */ .cadence{display:flex;flex-direction:column;padding:6px 24px} .cad-row{display:grid;grid-template-columns:minmax(160px,1fr) 2fr 150px;gap:22px;align-items:center;padding:18px 0; border-bottom:.5px solid var(--border)} .cad-row:last-child{border-bottom:none} .cad-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:9px;min-width:0} .cad-name .sw{width:9px;height:9px;border-radius:3px;flex-shrink:0} .cad-stats{display:flex;gap:18px;justify-content:flex-end;font-size:12px;color:var(--ink-3)} .cad-stats b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .streak{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600} .streak.on{color:var(--warn)} .streak.off{color:var(--ink-3)} /* ===== TABLES ===== */ .table-wrap{overflow-x:auto;margin-top:12px} table.data{width:100%;border-collapse:collapse;font-size:13px} table.data th{text-align:right;font-weight:700;color:var(--ink-4);font-size:10.5px;letter-spacing:.07em; text-transform:uppercase;padding:10px 12px;border-bottom:.5px solid var(--border);white-space:nowrap} table.data th:first-child,table.data td:first-child{text-align:left} table.data td{text-align:right;padding:12px;border-bottom:.5px solid var(--border);font-variant-numeric:tabular-nums; white-space:nowrap} table.data tbody tr:last-child td{border-bottom:none} table.data tr.group-row td{font-weight:600;background:var(--glass)} table.data tr.group-row td:first-child{border-left:2px solid var(--brand-color,var(--blue))} table.data td.money{color:var(--money);font-weight:600} table.data .sw{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px;vertical-align:middle} table.data .muted{color:var(--ink-4)} .table-card{padding:8px 22px 14px} /* ===== EMPTY STATES ===== */ .empty{padding:56px 28px;text-align:center;color:var(--ink-3)} .empty h3{font-size:16px;color:var(--ink-2);margin-bottom:8px} .empty p{font-size:13.5px;max-width:460px;margin:0 auto 20px;line-height:1.6} /* ===== MODAL ===== */ .modal-backdrop{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center;padding:20px} .modal-backdrop.show{display:flex} .modal{width:100%;max-width:500px;max-height:88vh;overflow-y:auto;border-radius:var(--r-modal); background:var(--elevated);border:.5px solid var(--border-strong);box-shadow:var(--elev-shadow);padding:26px 28px} .modal h2{font-size:19px;margin-bottom:5px} .modal .modal-sub{font-size:12.5px;color:var(--ink-3);margin-bottom:20px;line-height:1.5} .field{margin-bottom:15px} .field label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3);margin-bottom:6px} .field input,.field select{width:100%} .field .help{font-size:11.5px;color:var(--ink-4);margin-top:5px} .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px} .modal-error{display:none;font-size:12.5px;color:var(--danger);margin-top:10px} .modal-error.show{display:block} .swatches{display:flex;gap:9px;flex-wrap:wrap} .swatch-btn{width:28px;height:28px;border-radius:9px;border:2px solid transparent;cursor:pointer;padding:0} .swatch-btn.active{border-color:var(--ink)} .money-row{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:14px;align-items:center; padding:12px 0;border-bottom:.5px solid var(--border)} .money-row:last-of-type{border-bottom:none} .money-row .who{min-width:0} .money-row .who .nm{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .money-row .who .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px} .money-row input{width:100%;text-align:right} .scrim{position:fixed;inset:0;z-index:2;background:rgba(0,0,0,.5);backdrop-filter:blur(3px)} /* ===== RESPONSIVE ===== */ @media (max-width:1100px){ .account-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .posts-grid{grid-template-columns:1fr} } @media (max-width:900px){ .cad-row{grid-template-columns:1fr;gap:12px} .cad-stats{justify-content:flex-start} } @media (max-width:820px){ :root{--gap-section:32px;--gap-lg:20px} .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:var(--elev-shadow)} body.nav-open-mobile .sidebar{transform:translateX(0)} body.nav-collapsed .sidebar{width:var(--sidebar-w);padding-left:14px;padding-right:14px} body.nav-collapsed .nav-text,body.nav-collapsed .nav-badge,body.nav-collapsed .mark-name, body.nav-collapsed .mark-tag,body.nav-collapsed .nav-group-title,body.nav-collapsed .foot-meta{display:revert} body.nav-collapsed .nav-item{justify-content:flex-start;padding:9px 11px} .nav-open{display:flex} .sidebar-collapse{display:none} .account-grid{grid-template-columns:1fr} } @media (max-width:700px){ .chart-overlay{padding:10px} .chart-overlay-inner .chart-card{padding:16px 14px} .small-multiples{grid-template-columns:1fr} } @media (max-width:600px){ .scroll-area{padding:20px 14px 70px} .topbar{padding:0 14px;gap:8px} .tb-eyebrow{display:none} .tb-title{font-size:17px} .save-indicator{display:none} .btn{padding:7px 10px;font-size:12px} .kpi .value{font-size:32px} .kpi.hero .value{font-size:38px} .acct-stats{grid-template-columns:1fr 1fr} .cad-stats{flex-wrap:wrap;gap:12px} .posts-card{padding:18px 16px 14px} .posts-head{gap:8px} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }