/* ============================================================
   Olaf Minten — Studio (owner workspace) shared stylesheet
   Dark editorial theme · copper accent
   ============================================================ */

:root{
  --bg:#14110e;
  --bg-2:#1c1814;
  --bg-3:#26211b;
  --card:#1b1713;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --fg:#f4f0e9;
  --muted:#a79c8d;
  --copper:#c08a5e;
  --copper-2:#d9ab7d;
  --copper-soft:rgba(192,138,94,.16);
  --destructive:#e0705c;
  --ok:#5fb98a;
  --radius:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Inter',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --page-max:1180px;
  --topbar-h:64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--copper-soft); color:#fff; }
:focus-visible{ outline:2px solid var(--copper); outline-offset:2px; border-radius:4px; }
.hidden{ display:none !important; }

.serif{ font-family:var(--serif); font-weight:700; letter-spacing:-.015em; }
.eyebrow{
  margin:0; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.arw{ display:inline-block; transition:transform .2s var(--ease); }
a:hover .arw, button:hover .arw{ transform:translateX(3px); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--copper); color:#1a130d; padding:10px 16px; border-radius:0 0 8px 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-weight:600; font-size:.9rem; line-height:1;
  padding:11px 18px; border-radius:999px; border:1px solid transparent;
  background:var(--copper); color:#1a130d; cursor:pointer; text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn--copper{ background:linear-gradient(135deg,var(--copper),var(--copper-2)); color:#1a130d; }
.btn--copper:hover{ filter:brightness(1.06); }
.btn--ghost{ background:transparent; border-color:var(--line-strong); color:var(--fg); }
.btn--ghost:hover{ border-color:var(--copper); color:var(--copper-2); background:var(--copper-soft); }
.btn--dark{ background:var(--bg-3); border-color:var(--line); color:var(--fg); }
.btn--dark:hover{ border-color:var(--line-strong); }
.btn--sm{ padding:8px 14px; font-size:.82rem; }
.btn:disabled{ opacity:.6; cursor:default; transform:none; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:14px;
  height:var(--topbar-h); padding:0 clamp(16px,3vw,28px);
  background:rgba(20,17,14,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .spacer{ flex:1; }
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.mark{
  display:inline-grid; place-items:center; width:40px; height:40px; flex:0 0 40px;
  border-radius:12px; background:linear-gradient(150deg,var(--copper),var(--copper-2));
  color:#171310; font-weight:800; letter-spacing:.04em; font-size:.9rem;
}
.brand-name{ display:flex; flex-direction:column; line-height:1.05; font-weight:700; letter-spacing:-.01em; }
.brand-name small{ color:var(--muted); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; margin-top:3px; font-weight:600; }
.who{ display:flex; flex-direction:column; line-height:1.15; text-align:right; }
.who small{ color:var(--muted); font-size:.68rem; letter-spacing:.04em; }
.topnav{ display:flex; align-items:center; gap:6px; }
.topnav a{ padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--muted); font-size:.86rem; font-weight:500; }
.topnav a:hover{ color:var(--fg); background:var(--bg-3); }
.avatar{
  width:34px; height:34px; border-radius:50%; overflow:hidden; border:1px solid var(--line-strong);
  background:var(--bg-3); display:grid; place-items:center; font-size:.78rem; font-weight:700; color:var(--copper-2);
}
.icon-btn{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:transparent; border:1px solid var(--line-strong); color:var(--muted); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); position:relative;
}
.icon-btn:hover{ color:var(--fg); border-color:var(--copper); background:var(--copper-soft); }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn .dot-badge{
  position:absolute; top:2px; right:2px; width:8px; height:8px; border-radius:50%;
  background:var(--copper); border:2px solid var(--bg);
}
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:12px; background:transparent;
  border:1px solid var(--line); color:var(--fg); cursor:pointer;
}
.nav-toggle svg{ width:22px; height:22px; }

/* ---------- Shell + Rail ---------- */
.shell{ display:flex; align-items:flex-start; width:100%; }
.rail{
  position:sticky; top:var(--topbar-h); flex:0 0 250px; width:250px;
  height:calc(100vh - var(--topbar-h)); overflow-y:auto;
  display:flex; flex-direction:column;
  padding:22px 16px 26px; border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
}
.rail-label{
  margin:0 0 10px 12px; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.rail nav{ display:flex; flex-direction:column; gap:3px; }
.rail nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px;
  color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:500;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.rail nav a svg{ width:18px; height:18px; flex:0 0 18px; opacity:.85; }
.rail nav a:hover{ background:var(--bg-3); color:var(--fg); }
.rail nav a.is-active,
.rail nav a[aria-current="page"]{
  background:var(--copper-soft); color:var(--copper-2); font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(192,138,94,.28);
}
.rail nav a.is-active svg,
.rail nav a[aria-current="page"] svg{ opacity:1; }
.count{
  margin-left:auto; font-size:.66rem; font-weight:700; letter-spacing:.02em;
  background:var(--bg-3); color:var(--muted); border-radius:999px; padding:3px 9px;
}
.rail nav a.is-active .count,
.rail nav a[aria-current="page"] .count{ background:rgba(192,138,94,.24); color:var(--copper-2); }
.count--hot{ background:var(--copper); color:#1a130d; }
.rail-foot{ margin-top:auto; padding:18px 12px 0; border-top:1px solid var(--line); }
.rail-foot p{ margin:.35rem 0 0; font-size:.82rem; color:var(--muted); }
.rail-foot .eyebrow{ margin-bottom:6px; }
.meter{ margin-top:12px; height:7px; border-radius:999px; background:var(--bg-3); overflow:hidden; }
.meter i{ display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--copper),var(--copper-2)); transition:width .8s var(--ease); }
.meter--light{ background:rgba(255,255,255,.14); }

/* ---------- Main ---------- */
main.studio-main{
  flex:1; min-width:0; width:100%; max-width:var(--page-max);
  margin:0 auto; padding:clamp(20px,3.4vw,40px);
}
.stack{ display:flex; flex-direction:column; gap:clamp(16px,2.2vw,24px); }

/* ---------- Dashboard head ---------- */
.dash-head{
  display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end; justify-content:space-between;
  background:linear-gradient(180deg,var(--bg-2),var(--card));
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,4vw,36px);
}
.dash-head h1{ margin:.25em 0 0; font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.03; }
.dash-sub{ margin:.7em 0 0; color:var(--muted); max-width:52ch; font-size:.95rem; }
.dash-sub strong{ color:var(--fg); font-weight:600; }
.dash-head-side{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dash-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,18px); }
.stats .stat{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:18px 18px 16px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.stats .stat:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.stat-ic{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--copper-soft); color:var(--copper-2); margin-bottom:14px;
}
.stat-ic svg{ width:17px; height:17px; }
.stats .k{ font-size:.8rem; color:var(--muted); letter-spacing:.01em; }
.stats .n{ font-size:1.95rem; font-weight:800; letter-spacing:-.025em; line-height:1; margin-top:6px; }
.stats .n small{ font-size:.5em; color:var(--copper-2); margin-left:2px; }
.stats .d{ font-size:.74rem; color:var(--muted); margin-top:7px; display:flex; align-items:center; gap:6px; }
.stats .d .up{ color:var(--ok); font-weight:600; }
.stats .stat .bar-wrap{ margin-top:12px; }

/* ---------- Generic card / section ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(18px,2.4vw,26px); }
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.sec-head h2{ font-size:1.02rem; font-weight:700; letter-spacing:-.005em; }
.sec-link{ font-size:.82rem; color:var(--copper); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.sec-link:hover{ color:var(--copper-2); }

.pill{
  display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:600;
  padding:5px 11px; border-radius:999px; background:var(--bg-3); border:1px solid var(--line); color:var(--muted);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--copper); }
.pill--live{ color:#9fd6b8; background:rgba(95,185,138,.12); border-color:rgba(95,185,138,.28); }
.pill--live .dot{ background:var(--ok); }
.pill--draft{ color:var(--muted); }
.pill--new{ color:var(--copper-2); background:var(--copper-soft); border-color:rgba(192,138,94,.3); }
.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--copper); }
.dot--amber{ background:#e0b05a; }

/* ---------- Editor ---------- */
.editor{ padding:0; overflow:hidden; }
.editor-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.crumbs{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--muted); }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--fg); }
.crumbs strong{ color:var(--fg); font-weight:600; }
.editor-head .meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tabs{ display:flex; gap:4px; padding:12px 14px 0; overflow-x:auto; border-bottom:1px solid var(--line); }
.tab{
  appearance:none; background:transparent; border:0; border-bottom:2px solid transparent;
  color:var(--muted); font:inherit; font-size:.85rem; font-weight:500; padding:9px 13px; cursor:pointer;
  white-space:nowrap; transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover{ color:var(--fg); }
.tab.is-active{ color:var(--copper-2); border-bottom-color:var(--copper); font-weight:600; }
.editor-body{ display:grid; grid-template-columns:1fr 300px; gap:22px; padding:20px; }
.editor-main{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.preview{
  position:relative; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/10; background:var(--bg-3);
}
.preview img{ width:100%; height:100%; object-fit:cover; }
.preview .overlay{
  position:absolute; inset:auto 0 0 0; padding:22px;
  background:linear-gradient(0deg,rgba(12,10,8,.86),rgba(12,10,8,.1) 70%,transparent);
}
.preview .overlay .eyebrow{ color:var(--copper-2); }
.preview .overlay h3{ margin:.4em 0 0; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; }
.preview .overlay p{ margin:.55em 0 0; color:#cfc6b9; font-size:.88rem; max-width:46ch; }
.preview .overlay .btn{ margin-top:14px; }
.editor-block h4{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.editor-block p{ color:#cfc6b9; font-size:.92rem; line-height:1.65; }
.editor-block .btn{ margin-top:14px; }
.panel{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; align-self:start; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.panel-head h4{ font-size:.82rem; font-weight:700; letter-spacing:.01em; }
.panel-head .eyebrow{ margin:0; }
.row-kv{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.84rem; }
.row-kv:first-of-type{ border-top:0; }
.row-kv .lbl{ color:var(--muted); }
.row-kv .val{ color:var(--fg); font-weight:500; text-align:right; }
.panel .actions{ display:flex; gap:9px; margin-top:16px; }
.panel .actions .btn{ flex:1; justify-content:center; }
.editor-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; border-top:1px solid var(--line); }

/* ---------- Attention list ---------- */
.attn-group{ border-top:1px solid var(--line); padding:14px 0; }
.attn-group:first-of-type{ border-top:0; padding-top:2px; }
.attn-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.attn-head h3{ margin:0; font-size:.9rem; }
.attn-head a{ font-size:.78rem; color:var(--copper); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.attn-head a:hover{ color:var(--copper-2); }
.attn-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.attn-list li{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem;
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:6px 12px; }
.attn-badge{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--copper);
  background:var(--copper-soft); border-radius:999px; padding:2px 8px; }
.mini-empty{ color:var(--muted); font-size:.88rem; padding:8px 0 2px; }
.err-note{ color:var(--destructive); font-size:.86rem; }

/* ---------- Inbox ---------- */
.inbox{ display:flex; flex-direction:column; }
.msg{ display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line); }
.msg:first-child{ border-top:0; padding-top:2px; }
.ini{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-size:.76rem; font-weight:700; color:var(--copper-2); background:var(--copper-soft);
  border:1px solid rgba(192,138,94,.28); text-transform:uppercase;
}
.msg .txt{ min-width:0; flex:1; }
.msg .txt strong{ font-size:.88rem; display:block; }
.msg .txt span{ display:block; font-size:.78rem; color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg .when{ font-size:.72rem; color:var(--muted); white-space:nowrap; }
.msg.is-new .ini{ background:var(--copper); color:#1a130d; border-color:var(--copper); }
.unread{ display:inline-block; min-width:20px; text-align:center; font-size:.68rem; font-weight:700;
  color:#1a130d; background:var(--copper); border-radius:999px; padding:2px 7px; }

/* ---------- Activity ---------- */
.activity{ display:flex; flex-direction:column; }
.act{ display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--line); font-size:.84rem; }
.act:first-child{ border-top:0; }
.act .ai{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:var(--bg-3); color:var(--muted); flex:0 0 30px; }
.act .ai svg{ width:15px; height:15px; }
.act .when{ margin-left:auto; color:var(--muted); font-size:.74rem; white-space:nowrap; }

/* ---------- Media / gallery ---------- */
.media-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.media-grid .mtile{ position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-3); }
.media-grid .mtile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.media-grid .mtile:hover img{ transform:scale(1.06); }
.media-grid .mtile .cap{ position:absolute; left:8px; bottom:8px; font-size:.72rem; font-weight:600;
  background:rgba(12,10,8,.6); backdrop-filter:blur(4px); border-radius:6px; padding:3px 8px; }
.media-grid .mtile .tag{ position:absolute; left:8px; top:8px; font-size:.62rem; font-weight:700;
  letter-spacing:.03em; color:#1a130d; background:var(--copper-2); border-radius:999px; padding:2px 8px; }
.add{
  display:grid; place-items:center; gap:6px; border:1px dashed var(--line-strong); border-radius:var(--radius);
  background:var(--bg-2); color:var(--muted); text-decoration:none; aspect-ratio:1; text-align:center; padding:8px;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.add:hover{ border-color:var(--copper); color:var(--copper-2); }
.add strong{ font-size:.86rem; color:var(--fg); }
.add span{ font-size:.72rem; }

/* ---------- Projects grid (mini) ---------- */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.proj{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.proj:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.proj .thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-3); }
.proj .thumb img{ width:100%; height:100%; object-fit:cover; }
.proj .body{ padding:13px 14px 15px; display:flex; flex-direction:column; gap:7px; }
.proj .cat{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.proj h3{ margin:0; font-size:.92rem; line-height:1.25; }
.proj .foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.views{ font-size:.74rem; color:var(--muted); }
.soon-badge{ margin-left:auto; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  background:var(--bg-3); border:1px solid var(--line); border-radius:999px; padding:2px 7px; white-space:nowrap; }
.rail nav a.is-soon{ opacity:.5; cursor:not-allowed; }
.rail nav a.is-soon:hover{ color:inherit; }

/* ---------- CTA / coming soon ---------- */
.cta{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:linear-gradient(180deg,var(--bg-2),var(--card)); }
.cta .txt{ display:flex; align-items:center; gap:14px; }
.cta h2{ margin:0; font-size:1.05rem; }
.cta p{ margin:4px 0 0; color:var(--muted); font-size:.85rem; }
.spark{ color:var(--copper); display:inline-flex; }
.soon-card h2{ font-size:1.05rem; }

/* ---------- Footer ---------- */
.site-foot{ padding:22px 4px 6px; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }
.cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
.base{ color:var(--muted); font-size:.85rem; }

/* ---------- Misc layout ---------- */
.dash-row{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(16px,2.2vw,24px); align-items:start; }
.split{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(16px,2.2vw,24px); align-items:start; }
.hero{ background:linear-gradient(180deg,var(--bg-2),var(--card)); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(22px,4vw,40px); }
.hero-inner{ max-width:60ch; }
.axis{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.8rem; }
.statuscard{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; }
.statuscard .top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.statuscard .big{ font-size:1.8rem; font-weight:800; letter-spacing:-.02em; }
.qa-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.qa{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:.76rem; padding:6px 12px; border-radius:999px; background:var(--bg-3); border:1px solid var(--line); color:var(--muted); }
.page-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.pt{ font-weight:600; }
.meta{ color:var(--muted); font-size:.78rem; }
.more{ color:var(--copper); text-decoration:none; font-size:.82rem; }
.editor-foot .meta{ font-size:.8rem; }
.stat-cell,.bar-cell,.meta-cell,.act-cell{ }
.bar-wrap{ height:8px; border-radius:999px; background:var(--bg-3); overflow:hidden; }
.bar-wrap i{ display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--copper),var(--copper-2)); transition:width .8s var(--ease); }
.meter-card{ display:flex; flex-direction:column; }
.meter-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.meter-num{ margin:.15em 0 0; font-size:clamp(2rem,5vw,2.9rem); font-weight:800; letter-spacing:-.03em; line-height:1; }
.meter-num small{ font-size:.46em; color:var(--copper); margin-left:2px; }
.meter-note{ margin:14px 0 0; color:var(--muted); font-size:.9rem; }
.meter-card .bar-wrap{ margin-top:16px; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--bg-3); border:1px solid var(--line-strong); color:var(--fg);
  padding:12px 20px; border-radius:999px; font-size:.86rem; box-shadow:0 18px 50px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); z-index:200;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast.in{ opacity:1; }

/* ---------- Scrim (mobile nav) ---------- */
.scrim{ display:none; }

/* ---------- Sign-in gate ---------- */
.gate{
  min-height:100vh; display:grid; place-items:center; padding:clamp(20px,5vw,48px);
  background:radial-gradient(1100px 560px at 50% -10%, rgba(192,138,94,.16), transparent 60%), var(--bg);
}
.gate-card{
  width:min(430px,100%); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(24px,5vw,40px);
  display:flex; flex-direction:column; gap:16px; box-shadow:0 34px 90px rgba(0,0,0,.5);
}
.gate-card .mark{ margin-bottom:2px; }
.gate h1{ font-size:1.55rem; letter-spacing:-.01em; }
.gate p.lead{ margin:-6px 0 6px; color:var(--muted); font-size:.9rem; }
.gate label{ display:flex; flex-direction:column; gap:6px; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.gate input{ background:var(--bg-2); border:1px solid var(--line-strong); border-radius:var(--radius);
  color:var(--fg); padding:11px 13px; font:inherit; font-size:.95rem; }
.gate input:focus{ outline:none; border-color:var(--copper); box-shadow:0 0 0 3px var(--copper-soft); }
.gate .btn{ justify-content:center; }
.gate-msg{ min-height:1.15em; margin:0; font-size:.84rem; color:var(--destructive); }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .editor-body{ grid-template-columns:1fr; }
  .media-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:920px){
  .dash-row,.split{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .nav-toggle{ display:inline-grid; place-items:center; }
  .shell{ display:block; }
  .rail{
    position:fixed; top:var(--topbar-h); left:0; bottom:0; height:auto; z-index:80;
    width:270px; flex-basis:270px; transform:translateX(-104%);
    transition:transform .32s var(--ease); box-shadow:24px 0 60px rgba(0,0,0,.5);
  }
  .rail.open{ transform:translateX(0); }
  .scrim{ display:block; position:fixed; inset:var(--topbar-h) 0 0 0; z-index:70;
    background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
  .scrim.show{ opacity:1; pointer-events:auto; }
}
@media (max-width:640px){
  .proj-grid{ grid-template-columns:1fr 1fr; }
  .media-grid{ grid-template-columns:1fr 1fr; }
  .who{ display:none; }
  .dash-head-side{ width:100%; }
}
@media (max-width:420px){
  .proj-grid,.media-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
}

/* ---------- Studio kit primitives ---------- */
:root{--st-bg:#faf7f2;--st-surface:#fff;--st-text:#1c1917;--st-muted:#6b7280;--st-border:rgba(0,0,0,.12);--st-accent:#b45309;--st-radius:12px;--st-font:inherit;--st-mono:ui-monospace,SFMono-Regular,Menlo,monospace;}
[data-studio-app],[data-studio-gate]{font-family:var(--st-font);color:var(--st-text);}
[data-studio],[data-studio] *{color:var(--st-text);}
.st-state{padding:22px;border:1px dashed var(--st-border);border-radius:var(--st-radius);color:var(--st-muted);text-align:center;font-size:14px;}
.st-summary{display:flex;gap:14px;flex-wrap:wrap;}
.st-metric{flex:1;min-width:140px;background:var(--st-surface);border:1px solid var(--st-border);border-radius:var(--st-radius);padding:16px 18px;color:var(--st-text);}
.st-metric__n{font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--st-text);}
.st-metric__l{margin-top:2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-muted);}
.st-group{margin-top:16px;}
.st-group__h{display:flex;justify-content:space-between;font-weight:600;font-size:14px;padding:6px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-count{color:var(--st-muted);font-family:var(--st-mono);font-size:12px;}
.st-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-row__l{flex:0 0 38%;font-size:13px;color:var(--st-muted);}
.st-input{flex:1;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--st-border);border-radius:9px;background:var(--st-surface);color:var(--st-text);}
.st-input[data-ph]{border-style:dashed;}
.st-btn{font:inherit;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;border:1px solid var(--st-border);background:var(--st-surface);color:var(--st-text);cursor:pointer;}
.st-btn--primary{margin-top:16px;background:var(--st-accent);border-color:var(--st-accent);color:#fff;}
.st-btn:disabled{opacity:.6;cursor:default;}
.st-list{margin-top:6px;color:var(--st-text);}
.st-msg{padding:12px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-msg.is-new{border-left:3px solid var(--st-accent);padding-left:12px;}
.st-msg__h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;color:var(--st-text);}
.st-msg__h strong{color:var(--st-text);}
.st-when{font-size:12px;color:var(--st-muted);}
.st-kv{font-size:13px;margin:2px 0;color:var(--st-text);}
.st-kv span{color:var(--st-muted);}
/* studio-chrome:canonical */
/*studio-kit*/
:root{--st-bg:#faf7f2;--st-surface:#fff;--st-text:#1c1917;--st-muted:#6b7280;--st-border:rgba(0,0,0,.12);--st-accent:#b45309;--st-radius:12px;--st-font:inherit;--st-mono:ui-monospace,SFMono-Regular,Menlo,monospace;}
[data-studio-app],[data-studio-gate]{font-family:var(--st-font);color:var(--st-text);}
/* Every primitive sets its OWN colour explicitly (not inherited), so a page's colour on the region
   container can never bleed in and make the module unreadable (#studio-kit contrast). */
[data-studio],[data-studio] *{color:var(--st-text);}
.st-state{padding:22px;border:1px dashed var(--st-border);border-radius:var(--st-radius);color:var(--st-muted);text-align:center;font-size:14px;}
.st-summary{display:flex;gap:14px;flex-wrap:wrap;}
.st-metric{flex:1;min-width:140px;background:var(--st-surface);border:1px solid var(--st-border);border-radius:var(--st-radius);padding:16px 18px;color:var(--st-text);}
.st-metric__n{font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--st-text);}
.st-metric__l{margin-top:2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-muted);}
.st-group{margin-top:16px;}
.st-group__h{display:flex;justify-content:space-between;font-weight:600;font-size:14px;padding:6px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-count{color:var(--st-muted);font-family:var(--st-mono);font-size:12px;}
.st-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-row__l{flex:0 0 38%;font-size:13px;color:var(--st-muted);}
.st-input{flex:1;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--st-border);border-radius:9px;background:var(--st-surface);color:var(--st-text);}
.st-input[data-ph]{border-style:dashed;}
.st-btn{font:inherit;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;border:1px solid var(--st-border);background:var(--st-surface);color:var(--st-text);cursor:pointer;}
.st-btn--primary{margin-top:16px;background:var(--st-accent);border-color:var(--st-accent);color:#fff;}
.st-btn:disabled{opacity:.6;cursor:default;}
.st-list{margin-top:6px;color:var(--st-text);}
.st-msg{padding:12px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-msg.is-new{border-left:3px solid var(--st-accent);padding-left:12px;}
.st-msg__h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;color:var(--st-text);}
.st-msg__h strong{color:var(--st-text);}
.st-when{font-size:12px;color:var(--st-muted);}
.st-kv{font-size:13px;margin:2px 0;color:var(--st-text);}
.st-kv span{color:var(--st-muted);}