/* Layout: Apple-like calm workspace. Sidebar on desktop, floating pill tab bar on phones, full-screen reel for clips. Warm neutrals, one lime accent, black CTA pills. */
:root{
  --canvas:#fbfaf7; --panel:#ffffff; --tile:#f4f1ec; --sel:#ecE9e3;
  --ink:#1f1c19; --ink-2:#5f5952; --ink-3:#9a938a; --line:#ece8e1; --line-2:#e2ddd4;
  --accent:#f1ff67; --accent-deep:#e3f23f; --on-accent:#1f1c19;
  --cta:#121212; --on-cta:#ffffff;
  --success:#3fb878; --success-soft:#e3f5ea; --warn:#e0912a; --warn-soft:#fbf0de; --danger:#d9573a; --danger-soft:#fbe7e1; --info:#3b82f6; --info-soft:#e6efff;
  --ch-reel:#d24b8e; --ch-post:#8a63d2; --ch-story:#e0912a; --ch-tiktok:#1f1c19; --ch-shorts:#d9573a;
  --ring:0 0 0 1px rgba(18,18,18,.05);
  --lift:0 0 0 1px rgba(18,18,18,.05),0 14px 36px rgba(31,28,25,.09),0 2px 6px rgba(31,28,25,.04);
  --overlay:rgba(24,22,19,.32);
  --f-body:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --canvas:#121110; --panel:#1a1917; --tile:#23211e; --sel:#2b2926;
  --ink:#f3f0ea; --ink-2:#bab3a9; --ink-3:#7f786f; --line:#2a2724; --line-2:#36322d;
  --accent:#f1ff67; --accent-deep:#e3f23f; --on-accent:#1f1c19;
  --cta:#f3f0ea; --on-cta:#121212;
  --success:#5fd096; --success-soft:#173024; --warn:#f2b056; --warn-soft:#352812; --danger:#f07a5e; --danger-soft:#3a1d16; --info:#7aa8ff; --info-soft:#18233a;
  --ch-reel:#ee78b2; --ch-post:#ae8cf3; --ch-story:#f2b056; --ch-tiktok:#f3f0ea; --ch-shorts:#f07a5e;
  --ring:0 0 0 1px rgba(255,255,255,.06);
  --lift:0 0 0 1px rgba(255,255,255,.07),0 14px 36px rgba(0,0,0,.45);
  --overlay:rgba(0,0,0,.55); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --canvas:#121110; --panel:#1a1917; --tile:#23211e; --sel:#2b2926;
  --ink:#f3f0ea; --ink-2:#bab3a9; --ink-3:#7f786f; --line:#2a2724; --line-2:#36322d;
  --accent:#f1ff67; --accent-deep:#e3f23f; --on-accent:#1f1c19;
  --cta:#f3f0ea; --on-cta:#121212;
  --success:#5fd096; --success-soft:#173024; --warn:#f2b056; --warn-soft:#352812; --danger:#f07a5e; --danger-soft:#3a1d16; --info:#7aa8ff; --info-soft:#18233a;
  --ch-reel:#ee78b2; --ch-post:#ae8cf3; --ch-story:#f2b056; --ch-tiktok:#f3f0ea; --ch-shorts:#f07a5e;
  --ring:0 0 0 1px rgba(255,255,255,.06);
  --lift:0 0 0 1px rgba(255,255,255,.07),0 14px 36px rgba(0,0,0,.45);
  --overlay:rgba(0,0,0,.55); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--f-body);font-size:14.5px;line-height:1.45;-webkit-font-smoothing:antialiased;letter-spacing:-.003em}
img{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--f-body)}
svg{flex:none}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100%}
.side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:6px;padding:20px 14px 16px;border-right:1px solid var(--line);background:var(--canvas);overflow-y:auto}
.logo{display:flex;align-items:center;gap:11px;padding:4px 8px 16px}
.logo-tile{width:36px;height:36px;border-radius:10px;background:var(--cta);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:17px;letter-spacing:-.04em}
.logo b{font-weight:600;font-size:17px;letter-spacing:-.02em}
.nav-sec{font-size:12.5px;color:var(--ink-3);padding:14px 12px 4px;font-weight:500}
.nav-btn{display:flex;align-items:center;gap:12px;border:0;background:none;padding:9px 12px;border-radius:12px;color:var(--ink);font-weight:500;font-size:15px;text-align:left;width:100%}
.nav-btn:hover{background:var(--tile)}
.nav-btn[aria-current="page"]{background:var(--sel)}
.nav-btn svg{width:20px;height:20px;color:var(--ink-2)}
.nav-btn .badge{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding:14px 4px 0}
.me{display:flex;align-items:center;gap:10px;padding:0 6px}
.me .who{min-width:0;flex:1}
.me .nm{font-weight:600;font-size:14px}
.me .em{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13px;flex:none}
.av.sm{width:26px;height:26px;font-size:11px}
.av.t2{background:var(--tile);color:var(--ink)}
.main{padding-block:34px 80px;padding-inline:clamp(16px,3.4vw,48px);min-width:0;max-width:1480px;padding-top:calc(34px + env(safe-area-inset-top,0px))}

/* Floating tab bar (phones) */
.tabbar{display:none;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--panel);border-radius:30px;box-shadow:var(--lift);padding:8px 10px;grid-template-columns:repeat(5,1fr);align-items:center}
.tabbar button{border:0;background:none;display:grid;place-items:center;height:48px;color:var(--ink-3);border-radius:16px}
.tabbar button[aria-current="page"]{color:var(--ink)}
.tabbar button svg{width:25px;height:25px}
.tabbar .plus{background:var(--cta);color:var(--accent);width:66px;height:48px;justify-self:center;border-radius:16px}
.tabbar .plus svg{width:26px;height:26px}
.tabbar .av{width:34px;height:34px}

/* ---------- Common ---------- */
.note{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--tile);border-radius:14px;padding:9px 14px;color:var(--ink-2);font-size:13px;margin-bottom:26px}
.note button{border:0;background:none;color:var(--ink-3);padding:2px;display:grid}
.note svg{width:16px;height:16px}
.phead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.ptitle{display:flex;align-items:center;gap:16px;min-width:0}
.ptile{width:56px;height:56px;border-radius:16px;background:linear-gradient(160deg,var(--panel),var(--tile));box-shadow:var(--ring),0 6px 16px rgba(31,28,25,.06);display:grid;place-items:center;flex:none}
.ptile svg{width:26px;height:26px;color:var(--ink)}
.ptitle h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.ptitle p{margin:4px 0 0;color:var(--ink-2);font-size:15px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cta{display:inline-flex;align-items:center;gap:12px;border:0;background:var(--cta);color:var(--on-cta);border-radius:999px;padding:6px 6px 6px 20px;font-weight:600;font-size:15px;white-space:nowrap;height:46px}
.cta .go{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.cta .go svg{width:17px;height:17px}
.cta:hover{filter:brightness(1.12)}
.cta[disabled]{opacity:.6;cursor:default}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--tile);color:var(--ink);border-radius:999px;padding:9px 16px;font-weight:500;font-size:14px;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--sel)}
.btn svg{width:17px;height:17px}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.ghost{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.danger{color:var(--danger)}
.btn.dark{background:var(--cta);color:var(--on-cta)}
.iconbtn{width:38px;height:38px;border-radius:50%;border:0;background:var(--tile);display:grid;place-items:center;padding:0;color:var(--ink)}
.iconbtn:hover{background:var(--sel)}
.iconbtn svg{width:18px;height:18px}
.sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 14px}
.sec h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em}
.sec .link{border:0;background:none;color:var(--ink-2);font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:4px;padding:0}
.sec .link svg{width:15px;height:15px}
.seg{display:inline-flex;background:var(--tile);border-radius:999px;padding:4px;gap:2px;max-width:100%;overflow-x:auto}
.seg button{border:0;background:none;border-radius:999px;padding:7px 16px;font-size:14px;color:var(--ink-2);font-weight:500;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(18,18,18,.08),var(--ring)}
.seg.sm button{padding:5px 12px;font-size:13px}
.tabs{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:4px 0 10px;color:var(--ink-3);font-weight:500;font-size:15px;position:relative;white-space:nowrap}
.tabs button[aria-pressed="true"]{color:var(--ink)}
.tabs button[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:0;width:6px;height:6px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.tabs .ct{font-size:12.5px;color:var(--ink-3);margin-left:5px;font-variant-numeric:tabular-nums}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:18px}
.filters{display:flex;gap:2px 4px;flex-wrap:wrap;align-items:center}
.picker{border:0;background:transparent;border-radius:10px;padding:6px 8px;color:var(--ink-2);font-size:14px;max-width:180px;appearance:auto}
.picker:hover,.picker:focus{background:var(--tile)}
.picker.on{color:var(--ink);font-weight:600}
.search{display:flex;align-items:center;gap:8px;background:var(--tile);border-radius:999px;padding:8px 14px;flex:1 1 220px;max-width:320px;min-width:0}
.search input{border:0;background:none;outline:none;width:100%;min-width:0;font-size:16px}
.search svg{width:16px;height:16px;color:var(--ink-3)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:500;background:var(--tile);color:var(--ink-2);white-space:nowrap}
.pill.win{background:var(--success-soft);color:var(--success)}
.pill.scale{background:var(--warn-soft);color:var(--warn)}
.pill.test{background:var(--info-soft);color:var(--info)}
.pill.bad{background:var(--danger-soft);color:var(--danger)}
.pill.lime{background:var(--accent);color:var(--on-accent)}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ch{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ch i{width:8px;height:8px;border-radius:3px;display:inline-block}
.empty{border:1.5px dashed var(--line-2);border-radius:28px;padding:56px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.empty h3{margin:6px 0 0;font-size:19px;font-weight:600;letter-spacing:-.015em}
.empty p{margin:0 0 6px;color:var(--ink-2);max-width:42ch}
.empty .art{width:96px;height:96px;border-radius:28px;background:linear-gradient(160deg,var(--panel),var(--tile));box-shadow:var(--ring);display:grid;place-items:center}
.empty .art svg{width:40px;height:40px;color:var(--ink-3)}
.hint{font-size:13px;color:var(--ink-3)}
.err{font-size:13.5px;color:var(--danger)}

/* ---------- Clip cards ---------- */
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.vcard{position:relative;border:0;padding:0;border-radius:18px;overflow:hidden;aspect-ratio:9/16;max-width:100%;background:var(--tile);box-shadow:var(--ring);cursor:pointer;text-align:left;color:#fff;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.vcard:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.vcard video,.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene{position:absolute;inset:0;background-size:130% 130%;background-position:0% 50%;transition:background-position 5s linear}
.vcard:hover .scene{background-position:100% 50%}
.vcard .grad{position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.35) 45%,transparent)}
.vcard .top{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.glass{display:inline-flex;align-items:center;gap:5px;background:rgba(18,18,18,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:500}
.glass svg{width:12px;height:12px}
.glass.lime{background:var(--accent);color:var(--on-accent)}
.vcard .bot{position:absolute;left:12px;right:12px;bottom:11px;display:flex;flex-direction:column;gap:3px}
.vcard .bot b{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard .bot span{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard .bot .mono{font-size:11px;opacity:.75}
.udot{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.u-paid{background:var(--success)} .u-organic{background:var(--info)} .u-none{background:var(--danger)}
.prog{position:absolute;inset:auto 12px 12px 12px;height:5px;border-radius:9px;background:rgba(255,255,255,.3);overflow:hidden}
.prog i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:9px}
.session{margin-bottom:34px}
.shead{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:12px}
.shead h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em}
.shead span{color:var(--ink-3);font-size:13.5px}

/* Reel strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(140px,22vw,176px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-width:none;margin-inline:-2px}
.strip::-webkit-scrollbar{display:none}
.strip .vcard{scroll-snap-align:start}

/* ---------- Home ---------- */
.hello h1{font-size:32px;font-weight:600;letter-spacing:-.03em;margin:0;text-wrap:balance}
.hello p{margin:6px 0 0;color:var(--ink-2);font-size:15.5px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--panel);border-radius:22px;box-shadow:var(--ring);padding:18px 20px;display:flex;flex-direction:column;gap:8px;min-width:0;border:0;text-align:left}
button.kpi:hover{box-shadow:var(--lift)}
.kpi small{font-size:13px;color:var(--ink-2);font-weight:500}
.kpi b{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12.5px;font-weight:500;display:inline-flex;gap:6px;align-items:center;color:var(--ink-3)}
.up{color:var(--success)} .dn{color:var(--danger)}
.kpis.small .kpi{padding:14px 16px;border-radius:18px}
.kpis.small .kpi b{font-size:21px}
.two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}
.list{background:var(--panel);border-radius:24px;box-shadow:var(--ring);overflow:hidden}
.row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--line);border-left:0;border-right:0;border-bottom:0;background:none;width:100%;text-align:left}
.list .row:first-child{border-top:0}
button.row:hover{background:var(--tile)}
.row .main-t{flex:1;min-width:0}
.row .t1{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t2{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .when{font-size:13px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.minithumb{width:36px;height:48px;border-radius:9px;overflow:hidden;position:relative;background:var(--tile);flex:none}
.minithumb video,.minithumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmt-row .tx{font-size:13.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}

/* ---------- Campaigns ---------- */
.camps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.camp{background:var(--panel);border-radius:24px;box-shadow:var(--ring);overflow:hidden;border:0;padding:0;text-align:left;display:flex;flex-direction:column;transition:box-shadow .2s}
.camp:hover{box-shadow:var(--lift)}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;aspect-ratio:16/9;max-width:100%;background:var(--tile)}
.mosaic div{position:relative;overflow:hidden;background:var(--tile)}
.mosaic video,.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camp .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.camp h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em}
.camp .meta{color:var(--ink-3);font-size:13px;display:flex;gap:10px;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;background:var(--tile);color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--cta);color:var(--on-cta)}
.chip svg{width:14px;height:14px}
.chip.add{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}

/* ---------- References ---------- */
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.ref{background:var(--panel);border-radius:24px;box-shadow:var(--ring);overflow:hidden;display:flex;flex-direction:column}
.ref .th{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden}
.ref .th .glass{position:absolute;top:12px;left:12px}
.ref .bd{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.ref h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px;margin:0}
.kv dt{color:var(--ink-3)} .kv dd{margin:0;color:var(--ink-2);min-width:0}
.ref .ft{display:flex;gap:8px;padding:0 16px 16px;flex-wrap:wrap}

/* ---------- Planner ---------- */
.board-wrap{overflow-x:auto;padding-bottom:8px;margin-inline:-4px;padding-inline:4px}
.board{display:grid;grid-template-columns:repeat(4,minmax(250px,1fr));gap:14px;min-width:min-content}
.col{background:var(--tile);border-radius:24px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:300px;outline:2px dashed transparent;outline-offset:-3px;transition:outline-color .15s}
.col.over{outline-color:var(--ink-3)}
.col h2{display:flex;align-items:center;gap:8px;margin:0 2px 4px;font-size:15px;font-weight:600}
.col h2 span{color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.post{background:var(--panel);border-radius:18px;box-shadow:var(--ring);padding:13px 14px;display:flex;flex-direction:column;gap:9px;cursor:pointer;text-align:left;border:0;width:100%}
.post[draggable="true"]{cursor:grab}
.post.dragging{opacity:.4}
.post .t{font-weight:600;font-size:14.5px;line-height:1.3;letter-spacing:-.01em}
.post .r{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--ink-3);font-size:12.5px}
.minis{display:flex;gap:4px}
.mini{width:24px;height:32px;border-radius:6px;overflow:hidden;position:relative;background:var(--tile)}
.mini video,.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Calendar ---------- */
.calhead{display:flex;align-items:center;gap:10px}
.calhead h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em;min-width:150px;text-align:center}
.summary{display:flex;gap:8px;flex-wrap:wrap}
.cal-wrap{overflow-x:auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(112px,1fr));background:var(--line);gap:1px;border-radius:24px;overflow:hidden;box-shadow:var(--ring)}
.dow{background:var(--panel);padding:10px 12px;font-size:12.5px;color:var(--ink-3);font-weight:500}
.day{background:var(--panel);min-height:118px;padding:8px 8px 10px;display:flex;flex-direction:column;gap:5px;transition:background .15s}
.day.out{background:var(--canvas)}
.day.over{background:var(--tile)}
.day .n{font-size:13px;color:var(--ink-3);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-variant-numeric:tabular-nums}
.day.today .n{background:var(--cta);color:var(--on-cta);font-weight:600}
.ev{display:flex;align-items:center;gap:7px;border-radius:9px;padding:5px 8px;font-size:12px;font-weight:500;text-align:left;border:0;background:var(--tile);color:var(--ink);min-width:0;width:100%}
.ev[draggable="true"]{cursor:grab}
.ev span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ev i{width:7px;height:7px;border-radius:3px;flex:none}
.ev.planned{background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.ev.posted{opacity:.55}
.agenda{display:none;flex-direction:column;gap:18px}
.agenda .d{display:flex;flex-direction:column;gap:8px}
.agenda h3{margin:0;font-size:13px;color:var(--ink-3);font-weight:500}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}

/* ---------- Analytics ---------- */
.conns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:22px}
.conn{display:flex;align-items:center;gap:14px;background:var(--panel);border-radius:20px;box-shadow:var(--ring);padding:14px 16px}
.conn .lg{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.conn .lg.meta{background:var(--info-soft);color:var(--info)}
.conn .lg.shop{background:var(--success-soft);color:var(--success)}
.conn .lg.klav{background:var(--warn-soft);color:var(--warn)}
.conn .t{flex:1;min-width:0}
.conn .t b{display:block;font-weight:600}
.conn .t span{font-size:12.5px;color:var(--ink-3)}
.hero-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.hero-kpis .kpi b{font-size:32px}
.charts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;margin-top:22px}
.charts.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.chart{background:var(--panel);border-radius:24px;box-shadow:var(--ring);padding:18px 18px 10px;min-width:0}
.chart h3{margin:0;font-size:15px;font-weight:600}
.chart .sub{font-size:12.5px;color:var(--ink-3);margin:2px 0 8px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.chart .sub i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.chart svg{width:100%;height:auto;display:block}
.ax{fill:var(--ink-3);font-family:var(--f-body);font-size:11px}
.gl{stroke:var(--line);stroke-width:1}
.prods{width:100%;border-collapse:collapse;font-size:14px}
.prods th{text-align:left;font-weight:500;color:var(--ink-3);font-size:12.5px;padding:0 0 8px}
.prods td{padding:10px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.prods td:not(:first-child),.prods th:not(:first-child){text-align:right}
.prods.wide{min-width:560px}
.tbl-wrap{overflow-x:auto;margin-inline:-4px;padding-inline:4px}
.bar{height:6px;border-radius:9px;background:var(--tile);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:9px}
.attrib{font-size:13.5px;color:var(--ink-2);margin-top:12px;line-height:1.5}
.ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.ad{background:var(--panel);border-radius:22px;box-shadow:var(--ring);display:flex;gap:14px;padding:12px;min-width:0}
.ad .th{width:78px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;position:relative;background:var(--tile);flex:none;border:0;padding:0}
.ad .th video,.ad .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad .bd{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;padding:2px 2px 0 0}
.ad .nm{font-weight:600;font-size:14px;line-height:1.3;letter-spacing:-.01em}
.stats{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 10px;font-size:12.5px;align-items:baseline}
.stats span{color:var(--ink-3)} .stats b{font-weight:500;font-variant-numeric:tabular-nums}
.noclip{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:10.5px;color:var(--ink-3);padding:6px;background:repeating-linear-gradient(135deg,var(--tile) 0 7px,var(--panel) 7px 14px)}
.costbox{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.costbox input{width:64px;border:0;background:var(--tile);border-radius:10px;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums}
.sample{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:3px 10px}

/* ---------- Team ---------- */
.person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--line)}
.person:first-child{border-top:0}
.person .nm{font-weight:600} .person .k{color:var(--ink-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invite{background:var(--panel);border-radius:24px;box-shadow:var(--ring);padding:20px;display:flex;flex-direction:column;gap:14px;max-width:640px}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--tile);border-radius:14px;padding:8px 8px 8px 14px;min-width:0}
.linkbox code{font-family:var(--f-mono);font-size:12.5px;overflow-x:auto;white-space:nowrap;flex:1;min-width:0}

/* ---------- Sheets, modals, forms ---------- */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:40;animation:fade .2s ease;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sheet{position:fixed;top:12px;right:12px;bottom:12px;width:min(470px,calc(100% - 24px));background:var(--panel);z-index:41;display:flex;flex-direction:column;border-radius:28px;box-shadow:var(--lift);animation:slide .28s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow-y:auto;background:var(--panel);border-radius:28px;z-index:41;box-shadow:var(--lift);animation:pop .24s cubic-bezier(.2,.8,.2,1)}
.shd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px 6px}
.shd h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.handle{display:none;width:40px;height:5px;border-radius:9px;background:var(--line-2);margin:8px auto 0;border:0;padding:0}
.sbd{padding:14px 20px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;flex:1}
.sft{padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.group{background:var(--tile);border-radius:18px;overflow:hidden}
.group .gi{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--line-2);min-height:48px}
.group .gi:first-child{border-top:0}
.group label,.group .lb{font-size:14.5px;font-weight:500;flex:none}
.group input,.group select,.group textarea{border:0;background:none;outline:none;text-align:right;min-width:0;flex:1;font-size:16px;color:var(--ink-2)}
.group select{text-align-last:right;max-width:60%}
.group textarea{text-align:left;resize:vertical;min-height:84px;width:100%;padding:0}
.group .gi.stack{flex-direction:column;align-items:stretch;gap:6px}
.group .gi.stack label{font-size:13px;color:var(--ink-3)}
.glabel{font-size:13px;color:var(--ink-3);font-weight:500;margin:0 4px -10px}
.drop{border:1.5px dashed var(--line-2);border-radius:22px;padding:26px 18px;text-align:center;color:var(--ink-2);display:flex;flex-direction:column;gap:6px;align-items:center;cursor:pointer;background:var(--canvas)}
.drop:hover{border-color:var(--ink-3)}
.drop .ic{width:48px;height:48px;border-radius:14px;background:var(--cta);color:var(--accent);display:grid;place-items:center;margin-bottom:4px}
.drop .ic svg{width:22px;height:22px}
.drop b{color:var(--ink);font-weight:600}
.files{display:flex;flex-direction:column;gap:6px}
.files div{display:flex;justify-content:space-between;gap:10px;font-size:13px;background:var(--tile);border-radius:12px;padding:8px 12px}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.pick{position:relative;border:0;border-radius:12px;overflow:hidden;padding:0;background:var(--tile);aspect-ratio:9/16}
.pick.on{box-shadow:0 0 0 3px var(--ink)}
.pick video,.pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick em{position:absolute;left:5px;bottom:5px;right:5px;font-style:normal;font-size:10px;color:#fff;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--cta);color:var(--on-cta);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:500;z-index:80;box-shadow:var(--lift);max-width:calc(100% - 32px);text-align:center}
@media (min-width:861px){.toast{bottom:28px}}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
@keyframes pop{from{opacity:0;transform:translate(-50%,-47%) scale(.98)}}
@keyframes up{from{transform:translateY(40px);opacity:0}}

/* ---------- Reel ---------- */
.reel{position:fixed;inset:0;z-index:60;background:#0c0b0a;display:grid;grid-template-columns:minmax(0,1fr) 410px;animation:fade .2s ease}
.reel-main{position:relative;min-width:0;height:100%}
.reel-stage{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.reel-stage::-webkit-scrollbar{display:none}
.slide{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:grid;place-items:center;padding:20px 80px}
.media{position:relative;height:min(100%,900px);aspect-ratio:9/16;max-width:100%;border-radius:22px;overflow:hidden;background:#000}
.slide.h .media{height:auto;width:min(100%,1000px);aspect-ratio:16/9}
.media video,.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide.h .media video,.slide.h .media img{object-fit:contain}
.slide.cur .scene{animation:pan 9s linear infinite alternate}
@keyframes pan{from{background-position:0% 50%}to{background-position:100% 50%}}
.media .grad{position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);pointer-events:none}
.sinfo{position:absolute;left:16px;right:76px;bottom:18px;color:#fff;display:flex;flex-direction:column;gap:6px}
.sinfo b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.sinfo .m{font-size:13.5px;opacity:.85}
.sinfo .chips .chip{background:rgba(255,255,255,.16);color:#fff;padding:4px 10px;font-size:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rail{position:absolute;right:12px;bottom:18px;display:flex;flex-direction:column;gap:14px;align-items:center}
.rail button{border:0;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;position:relative;padding:0}
.rail button svg{width:22px;height:22px}
.rail button.on{color:#ffd84a}
.rail .mute{width:40px;height:40px}
.rail .ct{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.rtop{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;z-index:2;pointer-events:none}
.rtop>*{pointer-events:auto}
.rbtn{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;padding:0}
.rbtn svg{width:20px;height:20px}
.rbtn:hover{background:rgba(255,255,255,.24)}
.rcount{color:#fff;font-size:13px;font-weight:500;background:rgba(255,255,255,.14);border-radius:999px;padding:6px 12px;font-variant-numeric:tabular-nums}
.rnav{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:2}
.reel-panel{background:var(--panel);color:var(--ink);display:flex;flex-direction:column;min-width:0;min-height:0}
.pp-head{display:flex;align-items:center;gap:12px;padding:20px 20px 14px}
.pp-head .t{flex:1;min-width:0}
.pp-head .t b{display:block;font-weight:600;font-size:16px;letter-spacing:-.015em}
.pp-head .t span{font-size:13px;color:var(--ink-3)}
.pp-close{display:none}
.pp-camps{padding:0 20px 16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.pp-camps .lb{font-size:13px;color:var(--ink-3);font-weight:500}
.newcamp{display:flex;gap:6px}
.newcamp input{flex:1;min-width:0;border:0;background:var(--tile);border-radius:999px;padding:7px 14px;font-size:16px;outline:none}
.pp-tabs{padding:12px 20px 0}
.pp-body{flex:1;overflow-y:auto;padding:12px 20px 18px;display:flex;flex-direction:column;gap:16px;min-height:0}
.cmt{display:flex;gap:10px}
.cmt .bx{min-width:0;flex:1}
.cmt .hd{display:flex;gap:8px;align-items:baseline}
.cmt .hd b{font-weight:600;font-size:14px}
.cmt .hd span{font-size:12px;color:var(--ink-3)}
.cmt p{margin:2px 0 0;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.compose{display:flex;gap:8px;align-items:center;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.compose input{flex:1;min-width:0;border:0;background:var(--tile);border-radius:999px;padding:11px 16px;outline:none;font-size:16px}
.send{width:42px;height:42px;border-radius:50%;border:0;background:var(--cta);color:var(--accent);display:grid;place-items:center;padding:0}
.send svg{width:18px;height:18px}
.usedlist{display:flex;flex-direction:column;gap:6px}
.usedlist>*{display:flex;justify-content:space-between;gap:10px;align-items:center;border:0;background:var(--tile);border-radius:14px;padding:10px 12px;text-align:left;font-size:13.5px;width:100%}
.scrim{display:none}
.thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard.failed{outline:2px solid var(--danger);outline-offset:-2px}

/* ---------- Login ---------- */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.show{background:var(--tile);margin:14px;border-radius:32px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:40px;min-height:560px}
.show h2{font-size:34px;font-weight:600;letter-spacing:-.035em;margin:0;max-width:16ch;line-height:1.08;text-wrap:balance}
.show p{color:var(--ink-2);margin:10px 0 0;max-width:40ch;font-size:15.5px}
.flow{display:flex;flex-direction:column;gap:10px;max-width:380px}
.step{display:flex;align-items:center;gap:14px;background:var(--panel);border-radius:20px;box-shadow:var(--lift);padding:12px 14px;animation:step 8s infinite both}
.step:nth-child(2){animation-delay:.6s;margin-left:24px}
.step:nth-child(3){animation-delay:1.2s;margin-left:48px}
.step:nth-child(4){animation-delay:1.8s;margin-left:72px}
@keyframes step{0%{opacity:.35;transform:translateY(6px)}8%,85%{opacity:1;transform:none}100%{opacity:.35}}
.step .mt{width:38px;height:50px;border-radius:10px;overflow:hidden;position:relative;flex:none}
.step .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--tile);flex:none}
.step .ic svg{width:19px;height:19px}
.step b{display:block;font-size:14px;font-weight:600}
.step span{font-size:12.5px;color:var(--ink-3)}
.signin{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 24px}
.signin .box{width:min(380px,100%);display:flex;flex-direction:column;gap:18px}
.signin h1{font-size:30px;font-weight:600;letter-spacing:-.03em;margin:8px 0 0}
.signin p{margin:0;color:var(--ink-2)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;height:52px;border-radius:999px;border:0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(0,0,0,.04);font-weight:600;font-size:15.5px;width:100%}
.gbtn:hover{background:var(--tile)}
.gbtn svg{width:20px;height:20px}
.boot{min-height:100vh;min-height:100dvh;display:grid;place-items:center;color:var(--ink-3);font-size:14px;text-align:center}
.spin{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--ink);animation:rot .8s linear infinite;margin:0 auto 12px}
@keyframes rot{to{transform:rotate(360deg)}}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-2)}
.emailrow{display:flex;gap:8px}
.emailrow input{flex:1;min-width:0;border:0;background:var(--tile);border-radius:999px;padding:0 18px;height:52px;font-size:16px;outline:none}
.emailrow input:focus{box-shadow:0 0 0 2px var(--ink)}
.okbox{background:var(--success-soft);color:var(--success);border-radius:16px;padding:12px 14px;font-size:14px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .charts,.charts.even,.two{grid-template-columns:minmax(0,1fr)}
  .reel{grid-template-columns:minmax(0,1fr) 360px}
}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .tabbar{display:grid}
  .main{padding-bottom:120px;padding-top:calc(22px + env(safe-area-inset-top,0px))}
  .ptile{width:46px;height:46px;border-radius:14px}
  .ptile svg{width:22px;height:22px}
  .ptitle h1{font-size:25px}
  .phead .actions .cta,.phead .actions .btn{height:42px}
  .sheet{top:auto;left:0;right:0;bottom:0;width:100%;max-height:92dvh;border-radius:28px 28px 0 0;animation:up .3s cubic-bezier(.2,.8,.2,1)}
  .modal{top:auto;bottom:0;left:0;transform:none;width:100%;max-height:92dvh;border-radius:28px 28px 0 0;animation:up .3s cubic-bezier(.2,.8,.2,1)}
  .handle{display:block}
  .login{grid-template-columns:minmax(0,1fr)}
  .show{min-height:auto;padding:28px;gap:26px;order:2}
  .show h2{font-size:26px}
  .signin{padding:48px 20px 24px}
  .reel{grid-template-columns:minmax(0,1fr)}
  .slide{padding:0}
  .media,.slide.h .media{height:100%;width:100%;aspect-ratio:auto;border-radius:0}
  .sinfo{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  .rail{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  .rnav{display:none}
  .reel-panel{position:fixed;left:0;right:0;bottom:0;height:74dvh;border-radius:28px 28px 0 0;z-index:3;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(0,0,0,.35)}
  .reel-panel.open{transform:none}
  .pp-close{display:grid}
  .scrim{display:block;position:fixed;inset:0;z-index:2;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .3s}
  .scrim.open{opacity:1;pointer-events:auto}
}
@media (max-width:700px){
  .cal-wrap{display:none}
  .agenda{display:flex}
}
@media (max-width:520px){
  .clips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .search{max-width:none;flex-basis:100%}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi b{font-size:23px}
  .hero-kpis .kpi b{font-size:24px}
  .kpi{padding:14px 15px;border-radius:20px}
  .hello h1{font-size:27px}
  .phead{align-items:flex-start}
  .stats{grid-template-columns:auto 1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}