/* Creoseen — panels (creator, brand, agency, admin). Builds on base.css. */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{position:sticky;top:0;height:100vh;height:100dvh;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px 18px;background:var(--bg)}
.side__brand{display:flex;align-items:center;gap:10px;padding:0 8px 26px;text-decoration:none}
.side__brand .mark{color:var(--fg)}
.wordmark{font-family:var(--wide);font-weight:600;font-size:13px;letter-spacing:.34em;text-transform:uppercase}
.side__role{margin:0 8px 18px;padding:12px;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.side__role:hover{border-color:var(--line-3);color:inherit}
.side__nav{display:flex;flex-direction:column;gap:2px}
.navlink{display:flex;align-items:center;gap:14px;height:44px;padding:0 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:color .2s,background .2s}
.navlink:hover{color:var(--fg);background:var(--tint-3)}
.navlink[aria-current="page"]{color:var(--fg);background:var(--panel-2)}
.navlink[aria-current="page"]::after{content:"";margin-left:auto;width:4px;height:4px;border-radius:50%;background:var(--fg)}
.navlink .count{margin-left:auto}
.side__sep{height:1px;background:var(--line);margin:14px 12px}
.side__foot{margin-top:auto;padding:0 12px;display:flex;flex-direction:column;gap:10px}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;height:68px;display:flex;align-items:center;gap:14px;padding:0 max(28px,env(safe-area-inset-right,0px)) 0 32px;background:var(--bg-a);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar__title{font-family:var(--wide);font-size:15px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__back{display:none}
.content{width:100%;max-width:1160px;padding:32px 32px 80px;display:flex;flex-direction:column;gap:28px}
.content--narrow{max-width:760px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pagehead__t{display:flex;flex-direction:column;gap:10px;min-width:0}
.section{display:flex;flex-direction:column;gap:14px}
.section__h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start}
.cols--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{height:44px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:var(--fg)} .tab[aria-current="page"]{color:var(--fg);border-color:var(--fg)}
.banner{display:flex;gap:14px;align-items:center;padding:14px 18px;border:1px solid rgba(59,110,56,.35);background:rgba(59,110,56,.05);border-radius:var(--r);font-size:14px;line-height:1.45}
.tabbar{display:none}

/* dial (telemetry ring) */
.dial{position:relative;display:grid;place-items:center}
.dial svg{position:absolute;inset:0;width:100%;height:100%}
.dial__c{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.dial__v{font-family:var(--wide);font-weight:500;font-size:42px;letter-spacing:.08em;line-height:1}

/* campaign / creator cards */
.ccard{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;min-width:0}
.ccard__media{position:relative;aspect-ratio:4/3.4;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 90% at 50% 30%,var(--media-a) 0%,var(--media-b) 70%)}
.ccard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ccard:hover .ccard__media img{transform:scale(1.03)}
.ccard__init{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--wide);font-size:40px;letter-spacing:.14em;color:var(--soft)}
.ccard__tl{position:absolute;left:10px;top:10px;display:flex;gap:6px}
.ccard__tl .tag{background:var(--shade);backdrop-filter:blur(6px)}
.camp{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.camp:hover{color:inherit} .camp:hover .camp__title{text-decoration:underline;text-underline-offset:4px}
.camp__title{font-size:17px;line-height:1.35;margin-top:4px}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.meta span{display:inline-flex;align-items:center;gap:6px}

/* stage axis */
.axis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));position:relative}
.axis::before{content:"";position:absolute;left:6.25%;right:6.25%;top:34px;height:1px;background:var(--line-2)}
.axis__c{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-decoration:none}
.axis__n{font-weight:300;font-size:22px;line-height:1;color:var(--dim);font-variant-numeric:tabular-nums}
.axis__d{width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--line-3)}
.axis__l{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:center}
.axis__c.on .axis__n{color:var(--fg)} .axis__c.on .axis__d{background:var(--fg);border-color:var(--fg)} .axis__c.on .axis__l{color:var(--soft)}

/* thread */
.thread{display:flex;flex-direction:column;gap:10px}
.msg{max-width:min(520px,86%);padding:11px 15px;border-radius:14px 14px 14px 4px;background:var(--panel);border:1px solid var(--line);font-size:15px;line-height:1.5;align-self:flex-start;overflow-wrap:anywhere}
.msg--me{align-self:flex-end;background:var(--fg);color:var(--on-fg);border-color:var(--fg);border-radius:14px 14px 4px 14px}
.msg__t{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;opacity:.55}
.msg--sys{align-self:center;background:none;border:0;padding:4px 0;color:var(--muted);font-size:12.5px;display:flex;gap:8px;align-items:center;text-align:center;max-width:100%}
.prop{align-self:flex-start;width:min(360px,92%);border:1px solid var(--line-3);border-radius:14px;overflow:hidden;background:var(--bg)}
.prop--me{align-self:flex-end}
.prop__h{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.prop__b{padding:2px 14px}
.prop__a{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.prop__a button{height:46px;border:0;background:transparent;font-size:11.5px;font-weight:600;letter-spacing:.18em;cursor:pointer;color:var(--fg)}
.prop__a button+button{background:var(--flare);color:#fff}
.prop__a button:hover{opacity:.85}
.prop__a button[value=no]{color:var(--danger-text)}
.composer{display:flex;gap:10px;align-items:flex-end}
.composer .textarea{min-height:48px;height:48px;border-radius:24px;padding:12px 18px;resize:none}
.composer .ib{width:48px;height:48px;background:var(--fg);color:var(--on-fg);border-color:var(--fg)}

/* timeline (payments) */
.tl{display:flex;flex-direction:column}
.tl__i{position:relative;display:flex;gap:14px;padding-bottom:16px}
.tl__i:last-child{padding-bottom:0}
.tl__d{width:18px;height:18px;border-radius:50%;border:1px solid var(--line-3);flex-shrink:0;display:grid;place-items:center;background:var(--bg);position:relative;z-index:1}
.tl__i.done .tl__d{background:var(--fg);border-color:var(--fg);color:var(--on-fg)}
.tl__i.now .tl__d{border-color:transparent} .tl__i.now .tl__d::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--flare);box-shadow:0 0 0 4px var(--flare-soft)}
.tl__i:not(:last-child)::before{content:"";position:absolute;left:8.5px;top:20px;bottom:-2px;width:1px;background:var(--line-2)}
.tl__i.done:not(:last-child)::before{background:var(--fg)}

/* sheet / dialogs (details-based, no script required) */
details.drop{position:relative}
details.drop>summary{list-style:none;cursor:pointer}
details.drop>summary::-webkit-details-marker{display:none}
details.drop[open]>.drop__p{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);padding:8px;box-shadow:var(--pop-shadow)}
.drop__p>a,.drop__p>button{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 10px;border-radius:6px;text-decoration:none;font-size:14px;background:none;border:0;cursor:pointer;color:var(--fg);text-align:left}
.drop__p>a:hover,.drop__p>button:hover{background:var(--tint-4);color:var(--fg)}
details.fold>summary{list-style:none;cursor:pointer}
details.fold>summary::-webkit-details-marker{display:none}

/* responsive */
@media (max-width:1100px){.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .shell{display:block}
  .side{display:none}
  .topbar{height:58px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));top:0}
  .topbar__brand{display:flex!important}
  .content{padding:20px max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px));gap:24px}
  .cols--even{grid-template-columns:minmax(0,1fr)}
  .tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:40;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--bg-a2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:9px 0 max(10px,env(safe-area-inset-bottom,0px))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;position:relative}
  .tabbar a[aria-current="page"]{color:var(--fg)}
  .tabbar .badge-dot{top:-2px;right:calc(50% - 16px)}
  .stats{--n:3!important}
  .axis__l{font-size:7.5px;letter-spacing:.04em}
}
@media (max-width:560px){
  .stats.stats--wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats.stats--wrap .stat:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .stats.stats--wrap .stat:nth-child(4){border-top:1px solid var(--line)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .hide-sm{display:none!important}
}
.topbar__brand{display:none;align-items:center;gap:10px;text-decoration:none}

/* auth pages (login/register share this) */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth__art{position:relative;overflow:hidden;border-right:1px solid var(--line)}
.auth__art canvas{position:absolute;inset:0;width:100%;height:100%}
.auth__form{display:flex;flex-direction:column;justify-content:center;padding:48px max(24px,env(safe-area-inset-right,0px)) 48px max(24px,env(safe-area-inset-left,0px))}
.auth__in{width:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
@media (max-width:900px){.auth{grid-template-columns:minmax(0,1fr)}.auth__art{display:none}}