/* Store CRM — Mellow Kind purple theme */
:root{
  --brand:#7d4bb3; --brand-2:#9a6dd0; --brand-soft:#efe6f9; --brand-ink:#4b2775; --brand-deep:#2b1844;
  --bg:#f6f2fb; --panel:#ffffff; --panel-2:#faf7fd; --fg:#1e1530; --muted:#6c6280; --border:#e8e0f2; --grid:#eee8f5;
  --good:#0f8a55; --bad:#d23a45; --warn:#c06a00; --info:#2d7fbf;
  --good-soft:#e5f5ed; --bad-soft:#fdebec; --warn-soft:#fdf1e1;
  --s1:#7d4bb3; --s2:#e0703a; --s3:#2d8fbf; --s4:#d23a45; --s5:#d9a21b; --s6:#0f8a55; --s7:#b897e0; --s8:#8a8299;
  --font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; --r-sm:10px; --shadow:0 1px 2px rgba(43,24,68,.04),0 4px 16px rgba(43,24,68,.05); --shadow-lg:0 12px 40px rgba(43,24,68,.18);
  --side-w:236px; --top-h:72px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --brand:#b68ae8; --brand-2:#c9a6f0; --brand-soft:#2c1f40; --brand-ink:#e3d2f7; --brand-deep:#0e0915;
  --bg:#120d19; --panel:#1b1426; --panel-2:#211830; --fg:#f2ecfa; --muted:#a99dbd; --border:#2e2440; --grid:#2a2139;
  --good:#3fc387; --bad:#f06a72; --warn:#f0a24a; --info:#5cb6e3; --good-soft:#123326; --bad-soft:#3a1a20; --warn-soft:#3a2914;
  --s1:#b68ae8; --s2:#f0915e; --s3:#5cb6e3; --s4:#f06a72; --s5:#ebc04f; --s6:#3fc387; --s7:#d8c3f3; --s8:#8f849f;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 12px 40px rgba(0,0,0,.55); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --brand:#b68ae8; --brand-2:#c9a6f0; --brand-soft:#2c1f40; --brand-ink:#e3d2f7; --brand-deep:#0e0915;
  --bg:#120d19; --panel:#1b1426; --panel-2:#211830; --fg:#f2ecfa; --muted:#a99dbd; --border:#2e2440; --grid:#2a2139;
  --good:#3fc387; --bad:#f06a72; --warn:#f0a24a; --info:#5cb6e3; --good-soft:#123326; --bad-soft:#3a1a20; --warn-soft:#3a2914;
  --s1:#b68ae8; --s2:#f0915e; --s3:#5cb6e3; --s4:#f06a72; --s5:#ebc04f; --s6:#3fc387; --s7:#d8c3f3; --s8:#8f849f;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 12px 40px rgba(0,0,0,.55); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased;line-height:1.4}
[hidden]{display:none!important}
a{color:var(--brand)}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
.muted{color:var(--muted)}
.small{font-size:12px}
.good{color:var(--good)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:var(--fg)}

/* Buttons & inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem .95rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--panel);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}
.btn:hover{border-color:var(--brand-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 35%,transparent)}
:root[data-theme="dark"] .btn.primary{color:#1a1024}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.primary{color:#1a1024}}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--brand-soft);color:var(--fg)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.sm{padding:.35rem .65rem;font-size:12px}
.btn.lg{padding:.8rem 1.2rem;font-size:15px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible,.icon-btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--brand-soft);color:var(--fg)}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);font-weight:600;min-width:0}
.field .hint{font-weight:400;font-size:11.5px}
.input,.field input:not([type=checkbox]):not([type=radio]):not([type=range]),.field select,.field textarea,select.input{width:100%;padding:.6rem .75rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--panel);font-size:14px;font-weight:500;transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:84px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:14px}
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:.4rem .75rem;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:var(--shadow)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--brand-soft);color:var(--brand-ink);white-space:nowrap}
.chip.good{background:var(--good-soft);color:var(--good)}.chip.bad{background:var(--bad-soft);color:var(--bad)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.gray{background:var(--panel-2);color:var(--muted);border:1px solid var(--border)}
.chip button{border:0;background:none;padding:0;cursor:pointer;color:inherit;font-size:13px;line-height:1}
.toggle{position:relative;display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-size:13px;font-weight:600;color:var(--fg)}
.toggle input{appearance:none;width:36px;height:20px;border-radius:999px;background:var(--border);position:relative;cursor:pointer;transition:background .2s;margin:0;flex:none}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.toggle input:checked{background:var(--brand)}
.toggle input:checked::after{transform:translateX(16px)}
.avatar{display:inline-grid;place-items:center;border-radius:50%;background:var(--av);color:#fff;font-weight:700;flex:none;letter-spacing:.02em}
.avatar.empty{background:var(--panel-2);color:var(--muted);border:1px dashed var(--border);font-size:11px}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 20% 0%,color-mix(in srgb,var(--brand) 22%,transparent),transparent),radial-gradient(900px 500px at 100% 100%,color-mix(in srgb,var(--s7) 25%,transparent),transparent),var(--bg)}
.login form{width:min(380px,100%);background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-lg)}
.login img{width:150px;height:auto;align-self:center}
.login h1{text-align:center;font-size:24px}
.login p.muted{text-align:center;margin:-6px 0 6px}
.login label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.login input{font-size:16px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}
.login .err{min-height:1.2em;margin:0;color:var(--bad);font-size:12.5px;text-align:center}

/* App layout */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);grid-template-rows:var(--top-h) 1fr;min-height:100vh}
.topbar{grid-column:1/-1;position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;padding:0 20px;height:var(--top-h);background:linear-gradient(100deg,var(--brand-deep),color-mix(in srgb,var(--brand-deep) 70%,var(--brand)) 60%,color-mix(in srgb,var(--brand-deep) 55%,var(--brand)));color:#fff;box-shadow:0 2px 20px rgba(43,24,68,.25)}
.tb-left{position:relative;min-width:0}
.store-switch{display:inline-flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;cursor:pointer;max-width:100%;transition:background .15s}
.store-switch:hover{background:rgba(255,255,255,.14)}
.store-logo{width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;font-weight:800;color:var(--brand)}
.store-logo img{width:100%;height:100%;object-fit:contain;padding:3px}
.store-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.2}
.store-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.store-txt small{font-size:11.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.store-menu{position:absolute;top:calc(100% + 8px);left:0;width:300px;background:var(--panel);color:var(--fg);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;z-index:40;animation:pop .16s ease-out}
.store-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;background:none;border-radius:10px;cursor:pointer;text-align:left}
.store-menu button:hover,.store-menu button[aria-selected="true"]{background:var(--brand-soft)}
.store-menu .store-logo{width:32px;height:32px;border:1px solid var(--border)}
.store-menu .sm-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.store-menu .sm-txt small{color:var(--muted);font-size:11.5px}
.store-menu hr{border:0;border-top:1px solid var(--border);margin:6px 0}
.store-menu .add{color:var(--brand);font-weight:600}
.tb-center{text-align:center;min-width:0}
.greet{font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.greet-sub{margin:2px 0 0;font-size:12px;opacity:.72;white-space:nowrap}
.tb-right{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.tb-right .icon-btn{color:rgba(255,255,255,.75)}
.tb-right .icon-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.live{display:inline-flex;align-items:center;gap:.4rem;font-size:12px;font-weight:600;opacity:.85;margin-right:6px}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:#3fe08f;box-shadow:0 0 0 0 rgba(63,224,143,.6);animation:pulse 2s infinite}
.live.loading::before{background:#f0c24a;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,224,143,.55)}70%{box-shadow:0 0 0 8px rgba(63,224,143,0)}100%{box-shadow:0 0 0 0 rgba(63,224,143,0)}}
#refresh-btn.spin svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.sidebar{position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:14px 12px;background:var(--panel);border-right:1px solid var(--border);overflow:auto}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-h{margin:12px 10px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.nav-h:first-child{margin-top:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;color:var(--muted);text-decoration:none;font-weight:600;font-size:13.5px;transition:background .15s,color .15s;position:relative}
.nav a svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a span:not(.count){flex:1}
.nav a:hover{background:var(--brand-soft);color:var(--fg)}
.nav a[aria-current="page"]{background:var(--brand-soft);color:var(--brand-ink)}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav a[aria-current="page"] svg{color:var(--brand)}
.count{min-width:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;text-align:center;line-height:18px}
.side-foot{display:flex;flex-direction:column;gap:6px;padding:10px 6px 2px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.health{display:inline-flex;align-items:center;gap:.45rem;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--panel-2);border-radius:999px;padding:4px 10px;cursor:pointer;align-self:flex-start}
.health::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.health.ok::before{background:var(--good)}.health.bad::before{background:var(--bad)}.health.warn::before{background:var(--warn)}
.save-state[data-state=saving]{color:var(--warn)}.save-state[data-state=bad]{color:var(--bad)}

.main{min-width:0;padding:0 28px 48px}
.pagebar{position:sticky;top:var(--top-h);z-index:20;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:18px 0 14px;background:linear-gradient(var(--bg) 82%,transparent)}
.pb-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pb-title h2{font-size:22px}
.pb-range{font-size:12.5px;color:var(--muted);font-weight:500}
.periods{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.periods .seg{flex-wrap:wrap}
.periods input[type=date]{padding:.35rem .5rem;border:1px solid var(--border);border-radius:9px;background:var(--panel);font-size:12.5px}
.banner{margin:0 0 14px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--panel);font-size:12.5px;color:var(--muted)}
.banner.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--border));background:var(--bad-soft)}
.banner.info{color:var(--brand-ink);background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}
.page{display:flex;flex-direction:column;gap:22px;animation:pagein .32s cubic-bezier(.2,.8,.2,1)}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* Cards, KPI tiles */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column;gap:12px}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card-h h3{font-size:15px}
.card-h p{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-h h3{font-size:16px}
.sec-h p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:14px}
.tiles.hero{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.tile{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:15px 16px 12px;display:flex;flex-direction:column;gap:6px;min-width:0;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(43,24,68,.09);border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}
.tile .t-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tile .lbl{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:.4rem}
.tile .lbl i{width:8px;height:8px;border-radius:3px;display:inline-block}
.tile .v{font-size:25px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiles.hero .tile .v{font-size:31px}
.tile .sub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.tile .sub b{color:var(--fg);font-weight:700}
.tile .spark{width:100%;height:34px;display:block;margin-top:2px}
.tile.accent{background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#3a1a66));border-color:transparent;color:#fff}
.tile.accent .lbl,.tile.accent .sub{color:rgba(255,255,255,.8)}
.tile.accent .sub b{color:#fff}
.tile.accent .delta{background:rgba(255,255,255,.18);color:#fff}
.tile.pos{border-color:color-mix(in srgb,var(--good) 35%,var(--border))}
.tile.pos .v{color:var(--good)}
.tile.neg{border-color:color-mix(in srgb,var(--bad) 35%,var(--border))}
.tile.neg .v{color:var(--bad)}
.delta{display:inline-flex;align-items:center;gap:.25rem;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.delta em{font-style:normal;font-weight:500;opacity:.75}
.delta.good{background:var(--good-soft);color:var(--good)}.delta.bad{background:var(--bad-soft);color:var(--bad)}.delta.flat{background:var(--panel-2);color:var(--muted)}
.chart-box{position:relative;height:280px}
.chart-box.sm{height:200px}
.chart-box.lg{height:340px}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);font-weight:600}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend i.line{height:3px;border-radius:2px}
.bar{height:8px;border-radius:999px;background:var(--grid);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--brand);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar.good i{background:var(--good)}.bar.bad i{background:var(--bad)}.bar.warn i{background:var(--warn)}
.ring{display:block}

/* Breakdown list (cost waterfall) */
.blist{display:flex;flex-direction:column;gap:10px}
.bl-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:13px}
.bl-row i{width:10px;height:10px;border-radius:3px}
.bl-row .v{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.bl-row .p{color:var(--muted);font-variant-numeric:tabular-nums;min-width:48px;text-align:right;font-size:12px}
.bl-row.total{border-top:1px solid var(--border);padding-top:10px;font-weight:700}

/* Funnel */
.funnel{display:flex;flex-direction:column;gap:12px}
.fn-step .fn-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.fn-step .fn-top b{font-variant-numeric:tabular-nums}
.fn-step .fn-bar{height:26px;background:var(--grid);border-radius:8px;overflow:hidden}
.fn-step .fn-bar i{display:flex;align-items:center;justify-content:flex-end;padding-right:8px;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font-size:11.5px;font-weight:700;min-width:44px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.fn-step .fn-meta{font-size:11.5px;color:var(--muted);margin-top:3px}

/* Tables */
.tw{overflow:auto;max-height:520px;border-radius:10px}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;font-variant-numeric:tabular-nums}
.table th,.table td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
.table th:first-child,.table td:first-child{text-align:left}
.table td.l,.table th.l{text-align:left}
.table th{position:sticky;top:0;background:var(--panel);color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;z-index:1}
.table th[data-sort]{cursor:pointer;user-select:none}
.table th[data-sort]:hover{color:var(--fg)}
.table th[data-dir=desc]::after{content:" ↓"}.table th[data-dir=asc]::after{content:" ↑"}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:var(--panel-2)}
.table tr.total td{font-weight:700;border-top:2px solid var(--border);border-bottom:0}
.table td.name{max-width:280px;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.table td .sub{display:block;font-size:11px;color:var(--muted);font-weight:500;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.table .thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--panel-2);vertical-align:middle;margin-right:8px}
.empty{padding:28px 16px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty p{margin:0;max-width:52ch;line-height:1.5}

/* Status dot */
.st{display:inline-flex;align-items:center;gap:.35rem;font-size:11.5px;font-weight:600}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.st.on::before{background:var(--good)}.st.off::before{background:var(--muted)}.st.err::before{background:var(--bad)}

/* Kanban */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow-x:auto;padding-bottom:6px;align-items:start}
.col{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:10px;min-height:220px;transition:background .15s,border-color .15s}
.col.drop{background:var(--brand-soft);border-color:var(--brand)}
.col-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 2px}
.col-h h4{font-size:13px;display:flex;align-items:center;gap:.5rem}
.col-h h4 i{width:9px;height:9px;border-radius:50%}
.col-h .n{font-size:12px;color:var(--muted);font-weight:700;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:0 8px}
.col-list{display:flex;flex-direction:column;gap:10px;min-height:60px}
.kcard{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:grab;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,opacity .15s;display:flex;flex-direction:column}
.kcard:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(43,24,68,.12)}
.kcard.dragging{opacity:.4}
.kcard .media{position:relative;aspect-ratio:4/5;background:var(--grid);overflow:hidden;max-height:220px}
.kcard .media img,.kcard .media video{width:100%;height:100%;object-fit:cover;display:block}
.kcard .media .badge{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:rgba(20,10,30,.7);color:#fff}
.kcard .media.brief{aspect-ratio:auto;max-height:none;padding:14px;background:repeating-linear-gradient(45deg,var(--panel-2),var(--panel-2) 8px,var(--grid) 8px,var(--grid) 16px);color:var(--muted);font-size:12px;display:flex;align-items:center;gap:8px}
.kcard .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:7px}
.kcard .title{font-weight:700;font-size:13.5px;line-height:1.3}
.kcard .meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted)}
.kcard .acts{display:flex;gap:6px;flex-wrap:wrap}
.task{padding:11px 12px;gap:8px}
.task .title{font-weight:600;font-size:13.5px}
.prio{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:5px}
.prio.high{background:var(--bad-soft);color:var(--bad)}.prio.medium{background:var(--warn-soft);color:var(--warn)}.prio.low{background:var(--panel-2);color:var(--muted);border:1px solid var(--border)}
.due{font-size:11.5px;font-weight:600}
.due.over{color:var(--bad)}.due.today{color:var(--warn)}

/* Dropzone */
.drop-zone{border:2px dashed color-mix(in srgb,var(--brand) 40%,var(--border));border-radius:var(--r);padding:22px;text-align:center;background:color-mix(in srgb,var(--brand-soft) 50%,transparent);cursor:pointer;transition:background .15s,border-color .15s;display:flex;flex-direction:column;align-items:center;gap:6px}
.drop-zone.over{background:var(--brand-soft);border-color:var(--brand)}
.drop-zone b{font-size:14px}
.drop-zone span{color:var(--muted);font-size:12.5px}
.uploads{display:flex;flex-direction:column;gap:6px}
.up-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px;align-items:center;font-size:12.5px}

/* To-dos */
.todo-list{display:flex;flex-direction:column;gap:6px}
.todo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--border);transition:background .15s,opacity .2s,transform .15s}
.todo:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}
.todo.done .tt{text-decoration:line-through;color:var(--muted)}
.todo .tt{font-weight:600;font-size:14px;word-break:break-word}
.todo .tm{font-size:11.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.check{appearance:none;width:22px;height:22px;border-radius:7px;border:2px solid color-mix(in srgb,var(--brand) 55%,var(--border));cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s;margin:0}
.check:checked{background:var(--brand);border-color:var(--brand)}
.check:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.todo .acts{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.todo:hover .acts,.todo:focus-within .acts{opacity:1}
.add-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px}

/* Goals */
.goal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.goal .ring-wrap{position:relative;width:84px;height:84px}
.goal .ring-wrap b{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;font-weight:800}
.goal h4{font-size:14.5px}
.goal .gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px 14px;margin-top:8px;font-size:12px;color:var(--muted)}
.goal .gl b{display:block;color:var(--fg);font-size:14px;font-variant-numeric:tabular-nums}

/* Scenarios */
.scen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.sc{border:1px solid var(--border);border-radius:var(--r);padding:16px;background:var(--panel);display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.sc.pos{border-color:color-mix(in srgb,var(--good) 40%,var(--border));background:linear-gradient(180deg,var(--good-soft),var(--panel) 60%)}
.sc.neg{border-color:color-mix(in srgb,var(--bad) 40%,var(--border));background:linear-gradient(180deg,var(--bad-soft),var(--panel) 60%)}
.sc .n{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sc .big{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sc.pos .big{color:var(--good)}.sc.neg .big{color:var(--bad)}
.sc dl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin:0;font-size:12px}
.sc dt{color:var(--muted)}.sc dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.sc.real{outline:2px solid var(--brand);outline-offset:-2px}
.sc .tag{position:absolute;top:12px;right:12px}

/* Ads builder */
.builder{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);gap:18px;align-items:start}
.step{display:flex;flex-direction:column;gap:14px}
.step-h{display:flex;align-items:center;gap:10px}
.step-h .sn{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12.5px;flex:none}
.step-h h3{font-size:15px}
.countries{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;padding:6px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--panel)}
.countries input{border:0!important;box-shadow:none!important;padding:.25rem!important;flex:1;min-width:120px;background:transparent!important}
.sugg{position:absolute;z-index:10;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);max-height:220px;overflow:auto;min-width:220px}
.sugg button{display:block;width:100%;text-align:left;padding:7px 10px;border:0;background:none;cursor:pointer;font-size:13px}
.sugg button:hover,.sugg button.hl{background:var(--brand-soft)}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.pick{position:relative;border:2px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--panel);transition:border-color .15s,transform .15s}
.pick:hover{transform:translateY(-1px)}
.pick.on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.pick .media{aspect-ratio:4/5;background:var(--grid)}
.pick .media img,.pick .media video{width:100%;height:100%;object-fit:cover;display:block}
.pick .cap{padding:6px 8px;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick .tick{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:none;place-items:center;font-size:12px;font-weight:800}
.pick.on .tick{display:grid}
.counter{font-weight:500;font-size:11px}
.counter.over{color:var(--warn)}
/* Facebook-style preview */
.fbprev{position:sticky;top:calc(var(--top-h) + 80px);background:#fff;color:#050505;border:1px solid #dadde1;border-radius:12px;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;box-shadow:var(--shadow)}
.fbprev .fh{display:flex;gap:8px;align-items:center;padding:12px}
.fbprev .fh .pg{width:40px;height:40px;border-radius:50%;background:#efe6f9;display:grid;place-items:center;overflow:hidden;border:1px solid #eee}
.fbprev .fh .pg img{width:100%;height:100%;object-fit:contain}
.fbprev .fh b{font-size:14px;display:block}
.fbprev .fh small{font-size:12px;color:#65676b}
.fbprev .pt{padding:0 12px 10px;font-size:14px;line-height:1.35;white-space:pre-wrap;word-break:break-word}
.fbprev .med{background:#f0f2f5;aspect-ratio:4/5;display:grid;place-items:center;color:#65676b;font-size:13px;overflow:hidden}
.fbprev .med img,.fbprev .med video{width:100%;height:100%;object-fit:cover}
.fbprev .ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#f0f2f5}
.fbprev .ft small{display:block;font-size:12px;color:#65676b;text-transform:uppercase}
.fbprev .ft b{display:block;font-size:15px;line-height:1.25;word-break:break-word}
.fbprev .ft span{font-size:13px;color:#65676b;display:block}
.fbprev .ft .cta{flex:none;background:#e4e6eb;border-radius:6px;padding:8px 12px;font-weight:700;font-size:14px}
.tree td.l{padding-left:10px}
.tree tr.lvl1 td:first-child{padding-left:28px}
.tree tr.lvl2 td:first-child{padding-left:50px}
.tree tr.lvl0{background:var(--panel-2)}
.tree tr.lvl0 td{font-weight:700}
.tree .exp{border:0;background:none;cursor:pointer;color:var(--muted);width:18px;padding:0}

/* Team */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
.pcard{display:flex;gap:12px;align-items:center;padding:14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--brand-2);transform:translateY(-1px)}
.pcard.sel{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.pcard .pi{min-width:0;flex:1}
.pcard .pi b{display:block;font-size:14px}
.pcard .pi small{color:var(--muted);font-size:12px}
.pcard .pn{display:flex;gap:10px;font-size:11.5px;color:var(--muted);margin-top:4px}
.pcard .pn b{display:inline;font-size:12px;color:var(--fg)}

/* Modal */
.modal-wrap{position:fixed;inset:0;z-index:100;background:rgba(20,10,32,.45);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .18s}
.modal-wrap.in{opacity:1}
.modal{width:min(560px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);transform:translateY(10px) scale(.98);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.modal.wide{width:min(980px,100%)}
.modal-wrap.in .modal{transform:none}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal header h2{font-size:17px}
.modal-body{padding:18px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--border)}
.preview-media{border-radius:12px;overflow:hidden;background:var(--grid);max-height:60vh;display:grid;place-items:center}
.preview-media img,.preview-media video{max-width:100%;max-height:60vh;display:block}

/* Toasts */
.toasts{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{padding:11px 16px;border-radius:12px;background:var(--fg);color:var(--bg);font-weight:600;font-size:13px;box-shadow:var(--shadow-lg);animation:pop .2s ease-out;transition:opacity .4s,transform .4s;max-width:380px}
.toast.bad{background:var(--bad);color:#fff}
.toast.out{opacity:0;transform:translateY(6px)}

/* Skeleton */
.sk{color:transparent!important;background:linear-gradient(90deg,var(--grid),var(--border),var(--grid));background-size:200% 100%;border-radius:8px;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--brand-ink);border-bottom-color:var(--brand)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* Responsive */
@media (max-width: 1180px){ .builder{grid-template-columns:minmax(0,1fr)} .fbprev{position:static} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 980px){
  .g2,.g3,.g-2-1,.g-1-2{grid-template-columns:minmax(0,1fr)}
  .greet{font-size:18px}
  .store-txt small{display:none}
}
@media (max-width: 820px){
  :root{--top-h:64px}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
  .topbar{grid-template-columns:auto minmax(0,1fr) auto;padding:0 12px;gap:8px}
  .store-txt{display:none}
  .greet{font-size:16px;overflow:hidden;text-overflow:ellipsis}
  .greet-sub{display:none}
  .live{display:none}
  .sidebar{position:sticky;top:var(--top-h);z-index:25;height:auto;flex-direction:row;padding:6px 8px;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto}
  .nav{flex-direction:row;gap:2px}
  .nav-h,.side-foot{display:none}
  .nav a{padding:8px 10px;white-space:nowrap}
  .nav a[aria-current="page"]::before{display:none}
  .main{padding:0 16px 40px}
  .pagebar{position:static}
  .tiles.hero .tile .v{font-size:26px}
}