/* ==========================================================================
   ARC AI Studio — shared theme (arc.css)
   Every page links this file. Change a color here and the whole site follows.
   Fix shared things HERE, never with a per-page override.
   ========================================================================== */

:root{
  /* Surfaces — taken from the Arc network site: near-black top, deep navy body */
  --ink:#070D1C;            /* top bar / deepest */
  --navy-900:#0B1633;
  --navy-800:#0F2038;
  --navy-700:#15304F;
  --card:rgba(30,45,72,.62);         /* slate glass, like Arc's stat tiles */
  --card-solid:#1B2A45;
  --panel-grad:linear-gradient(180deg, #4C5A76 0%, #384868 100%);
  --line:rgba(160,190,255,.16);
  --line-strong:rgba(160,190,255,.32);

  /* Brand glow — sampled from the ARCAI triangle-orb logo */
  --violet:#5B2DB8;
  --rose:#F04E8A;
  --pink:#FF4FD8;
  --cyan:#4FE3FF;
  --blue:#3D7BFF;
  --grad-brand:linear-gradient(100deg,var(--cyan) 0%,var(--blue) 38%,var(--violet) 68%,var(--pink) 100%);
  --grad-warm:linear-gradient(100deg,var(--violet),var(--rose));

  /* Type */
  --text:#FFFFFF;
  --text-soft:#E9EEFA;
  --text-dim:#C0CCE5;
  --ok:#5BE6A8;
  --warn:#FFC857;
  --bad:#FF6B81;

  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:26px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.65);
  --glow-a:rgba(91,45,184,.42); --glow-b:rgba(79,227,255,.16); --glow-c:rgba(240,78,138,.20);
  --bar:rgba(7,13,28,.82);        /* top bar + footer */
  --well:rgba(7,13,28,.55);       /* inputs, inset panels */
  --on-accent:#FFFFFF;            /* text that sits on a gradient button */
  --wrap:1180px;
  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  color:var(--text);
  font-family:var(--font-body);
  font-size:1.02rem;
  line-height:1.65;
  background:var(--navy-800);
  display:flex;flex-direction:column;
}
/* Fixed site background: Arc's dark-to-navy vertical wash with the logo's two glows */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 520px at 12% -8%,var(--glow-a),transparent 62%),
    radial-gradient(760px 480px at 96% 4%,var(--glow-b),transparent 60%),
    radial-gradient(900px 600px at 80% 108%,var(--glow-c),transparent 60%),
    linear-gradient(180deg,var(--ink) 0%,var(--navy-900) 22%,var(--navy-800) 55%,var(--navy-700) 100%);
}
/* Faint survey-grid, echoing the Arc explorer hero */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(160,190,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,190,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,#000 0,transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 70%);
}
main{flex:1}
img{max-width:100%;display:block}
a{color:var(--cyan);text-decoration:none}
/* Accessibility: an inline text link relying on color alone isn't distinguishable for colorblind users --
   underline links that appear inside body text/prose specifically, without touching nav/button/card links
   (those are already visually distinct as buttons or cards, not text relying on color alone). */
p a, li a, .hint a, .dim a { text-decoration: underline; text-underline-offset: 2px; }
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.14;letter-spacing:-.025em;margin:0 0 .5em;color:var(--text)}
h1{font-size:clamp(2.2rem,5.4vw,4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1em;color:var(--text-soft)}
.lead{font-size:1.14rem;color:var(--text-soft);max-width:60ch}
.dim{color:var(--text-dim)}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,8vw,104px) 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 44px}
.section-head .lead{margin:0 auto}

/* Eyebrow: one canonical class, mirror-image lines fading outward on BOTH sides */
.eyebrow{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--font-display);font-size:.86rem;font-weight:600;letter-spacing:.04em;
  color:var(--cyan);margin-bottom:14px;
}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:clamp(28px,8vw,84px)}
.eyebrow::before{background:linear-gradient(90deg,transparent,var(--cyan))}
.eyebrow::after{background:linear-gradient(90deg,var(--cyan),transparent)}

/* ---- Cards: one shared identity. Add new card types to this selector list. ---- */
.card,.docs-card,.plan-card,.tool-card,.auth-card,.meter{
  background:var(--panel-grad);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.card{padding:26px}
.grid{display:grid;gap:20px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  color:var(--on-accent);background:var(--grad-warm);
  box-shadow:0 10px 30px -10px rgba(240,78,138,.65);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  text-decoration:none;
}
.btn:hover{transform:translateY(-1px);text-decoration:none;box-shadow:0 14px 34px -10px rgba(240,78,138,.8)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.ghost{background:rgba(127,127,127,.08);border-color:var(--line-strong);box-shadow:none;color:var(--text)}
.btn.ghost:hover{background:rgba(127,127,127,.16);border-color:var(--cyan)}
.btn.light{background:#CFE0FF;color:#0B1633;box-shadow:none}   /* Arc's pale "Log in" button */
.btn.sm{padding:9px 16px;font-size:.85rem}
.btn.block{width:100%}

/* ---- Forms ---- */
label{display:block;font-size:.86rem;font-weight:600;color:var(--text-soft);margin:16px 0 6px}
input,select,textarea{
  width:100%;font:inherit;color:var(--text);
  background:var(--well);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:12px 14px;
}
input::placeholder{color:var(--text-dim)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(79,227,255,.18)}

.notice{padding:12px 16px;border-radius:var(--radius-sm);font-size:.92rem;border:1px solid var(--line)}
.notice.ok{background:rgba(91,230,168,.1);border-color:rgba(91,230,168,.4);color:var(--ok)}
.notice.bad{background:rgba(255,107,129,.1);border-color:rgba(255,107,129,.4);color:var(--bad)}
.notice.warn{background:rgba(255,200,87,.08);border-color:rgba(255,200,87,.35);color:var(--warn)}
[hidden]{display:none!important}

/* ==========================================================================
   Top navigation — 3-column grid so the nav is TRULY centered
   ========================================================================== */
.topnav{
  position:sticky;top:0;z-index:50;
  background:var(--bar);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.topnav-bar{
  max-width:1320px;margin:0 auto;padding:0 24px;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);justify-self:start}
.brand:hover{text-decoration:none}
.brand img{width:40px;height:40px;filter:drop-shadow(0 0 10px rgba(255,79,216,.45))}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:1.06rem;letter-spacing:.02em}
.brand-name small{display:block;font-weight:500;font-size:.62rem;letter-spacing:.34em;color:var(--text-dim);margin-top:-2px}

.nav-links{display:flex;align-items:center;gap:4px;justify-self:center}
.nav-links a{
  color:var(--text-soft);font-weight:500;font-size:.96rem;padding:9px 16px;border-radius:999px;
  position:relative;transition:color .15s,background .15s;
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.06);text-decoration:none}
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;border-radius:2px;background:var(--grad-brand);
}
.nav-right{display:flex;align-items:center;gap:10px;justify-self:end}
.credit-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(79,227,255,.08);border:1px solid rgba(79,227,255,.3);
  color:var(--text);font-family:var(--font-display);font-weight:600;font-size:.86rem;
}
.credit-pill:hover{text-decoration:none;border-color:var(--cyan)}
.credit-pill i{width:9px;height:9px;border-radius:50%;background:var(--grad-brand);box-shadow:0 0 10px var(--cyan)}
.acct{position:relative}
.acct-btn{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line-strong);
  color:var(--text);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;font:inherit;font-size:.88rem;
}
.acct-btn .av{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--grad-warm);display:grid;place-items:center;font-weight:700;font-size:.8rem}
.acct-menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:210px;padding:8px;
  background:var(--card-solid);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);
  display:none;
}
.acct-menu.open{display:block}
.acct-menu a,.acct-menu button{
  display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;color:var(--text-soft);
  background:none;border:0;font:inherit;font-size:.92rem;cursor:pointer;
}
.acct-menu a:hover,.acct-menu button:hover{background:rgba(255,255,255,.07);color:var(--text);text-decoration:none}
.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:10px;width:42px;height:42px;color:var(--text);cursor:pointer}
.burger svg{width:20px;height:20px}

@media (max-width:960px){
  .topnav-bar{grid-template-columns:1fr auto}
  .burger{display:grid;place-items:center}
  .nav-links{
    display:none;position:absolute;left:12px;right:12px;top:calc(var(--nav-h) + 8px);
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    background:var(--card-solid);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 14px}
  .nav-links a.active::after{display:none}
  .nav-links a.active{background:rgba(255,255,255,.07)}
  .acct-btn .nm{display:none}          /* avatar only on mobile — the name caused sideways scroll */
  .acct-btn{padding:4px}
  .brand-name small{display:none}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{margin-top:60px;border-top:1px solid var(--line);background:var(--bar)}
.footer-grid{
  max-width:var(--wrap);margin:0 auto;padding:52px 24px 30px;
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;
}
.footer-grid h4{font-size:.9rem;color:var(--text);margin-bottom:14px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:9px}
.footer-grid a{color:var(--text-dim);font-size:.94rem}
.footer-grid a:hover{color:var(--text)}
.footer-brand p{color:var(--text-dim);font-size:.94rem;max-width:34ch;margin-top:14px}
.footer-base{
  max-width:var(--wrap);margin:0 auto;padding:18px 24px 34px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;color:var(--text-dim);font-size:.85rem;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}

/* ==========================================================================
   Docs pages (Terms, Privacy) — visible immediately, never scroll-revealed
   ========================================================================== */
.docs-wrap{max-width:var(--wrap);margin:0 auto;padding:56px 24px 40px}
.docs-head{text-align:center;margin-bottom:36px}
.docs-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.docs-toc{position:sticky;top:calc(var(--nav-h) + 20px);padding:20px}
.docs-toc h4{font-size:.85rem;color:var(--text-dim);margin-bottom:10px}
.docs-toc ol{margin:0;padding-left:20px;font-size:.92rem}
.docs-toc li{margin-bottom:7px}
.docs-toc a{color:var(--text-soft)}
.docs-card{padding:26px 28px;margin-bottom:16px;box-shadow:none}
.docs-card h2{font-size:1.25rem;margin-bottom:12px}
.docs-card h2 span{color:var(--cyan);margin-right:10px;font-variant-numeric:tabular-nums}
.docs-card h3{font-size:1.02rem;margin:18px 0 8px}
.docs-card ul{padding-left:22px;margin:0 0 1em;color:var(--text-soft)}
.docs-card li{margin-bottom:7px}
.docs-card strong{color:var(--text)}
.docs-card p:last-child,.docs-card ul:last-child{margin-bottom:0}
@media (max-width:900px){.docs-layout{grid-template-columns:1fr}.docs-toc{position:static}}

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

/* ==========================================================================
   Studio shell — left sidebar + content. Add <body data-layout="studio">.
   site.js builds the sidebar; pages only supply <main>.
   ========================================================================== */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);max-width:1480px;margin:0 auto;width:100%;flex:1}
.sidebar{
  position:sticky;top:var(--nav-h);align-self:start;height:calc(100vh - var(--nav-h));overflow-y:auto;
  padding:22px 14px;border-right:1px solid var(--line);background:var(--well);
}
.sidebar h5{font:600 .74rem var(--font-display);color:var(--text-dim);margin:18px 12px 8px;letter-spacing:.04em}
.sidebar h5:first-child{margin-top:0}
.sidebar a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;margin-bottom:2px;
  color:var(--text-soft);font-weight:500;font-size:.95rem;border:1px solid transparent;
}
.sidebar a svg{width:19px;height:19px;flex:none;color:var(--text-dim)}
.sidebar a:hover{background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}
.sidebar a.active{background:linear-gradient(100deg,rgba(91,45,184,.45),rgba(240,78,138,.22));border-color:var(--line-strong);color:var(--text)}
.sidebar a.active svg{color:var(--cyan)}
.shell > main{padding:34px clamp(18px,3vw,40px) 60px;min-width:0}
.page-title{margin-bottom:26px}
.page-title h1{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:6px}
.page-title p{margin:0;color:var(--text-dim);max-width:70ch}
@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:sticky;top:var(--nav-h);z-index:20;height:auto;display:flex;gap:6px;overflow-x:auto;padding:10px 12px;
    border-right:0;border-bottom:1px solid var(--line);background:var(--well);backdrop-filter:blur(12px);scrollbar-width:none}
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar h5{display:none}
  .sidebar a{white-space:nowrap;margin:0;padding:8px 13px;font-size:.88rem}
  .shell > main{padding:22px 16px 50px}
}

/* ---- Tool pages: controls on the left, results on the right ---- */
.tool{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:24px;align-items:start}
.tool .panel{position:sticky;top:calc(var(--nav-h) + 20px)}
@media (max-width:1100px){.tool{grid-template-columns:1fr}.tool .panel{position:static}}
.panel{background:var(--panel-grad);border:1px solid var(--line);border-radius:var(--radius);padding:22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.panel h2{font-size:1.05rem;margin-bottom:4px}
.panel label:first-of-type{margin-top:6px}
textarea{min-height:120px;resize:vertical}
.hint{font-size:.82rem;color:var(--text-dim);margin:6px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{
  font:500 .88rem var(--font-body);color:var(--text-soft);background:var(--well);border:1px solid var(--line-strong);
  padding:8px 14px;border-radius:999px;cursor:pointer;
}
.chips button small{color:var(--text-dim);margin-left:6px}
.chips button[aria-pressed="true"]{color:var(--text);border-color:var(--cyan);background:rgba(79,227,255,.12)}
.run-row{display:flex;align-items:center;gap:14px;margin-top:20px}
.run-row .btn{flex:1}
.cost-tag{font:600 .86rem var(--font-display);white-space:nowrap;color:var(--text-soft)}
.cost-tag b{color:var(--text);font-size:1.05rem}
.drop{
  display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  cursor:pointer;color:var(--text-dim);font-size:.9rem;background:var(--well);
}
.drop:hover{border-color:var(--cyan);color:var(--text)}
.drop img,.drop video{width:54px;height:54px;object-fit:cover;border-radius:8px}
.drop input{display:none}
.drop .x{margin-left:auto;background:none;border:0;color:var(--text-dim);cursor:pointer;font-size:1.2rem}

.results-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.results-head h2{font-size:1.05rem;margin:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tile{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--well)}
.tile-media{position:relative;overflow:hidden;aspect-ratio:1/1}
.tile.wide .tile-media{aspect-ratio:16/9}
.tile.tall .tile-media{aspect-ratio:9/16}
.tile-media img,.tile-media video{width:100%;height:100%;object-fit:cover;display:block}
.tile .meta{position:absolute;inset:auto 0 0 0;padding:26px 10px 9px;background:linear-gradient(transparent,rgba(4,8,20,.92));display:flex;gap:6px;justify-content:flex-end;opacity:0;transition:opacity .15s}
.tile:hover .meta,.tile:focus-within .meta{opacity:1}
@media (hover:none){.tile .meta{opacity:1}}
.icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line-strong);background:var(--well);color:var(--text);cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{border-color:var(--cyan)}
.icon-btn svg{width:16px;height:16px}
.tile-media .state{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;font-size:.88rem;color:var(--text-soft)}
.tile-media .badge{position:absolute;top:8px;left:8px;padding:2px 9px;border-radius:999px;font:600 .7rem var(--font-display);background:var(--well);border:1px solid var(--line-strong)}
/* Narrow screens (2-per-row grid, see .tiles below): the button row no longer floats over the picture.
   It drops into normal flow underneath it instead, so nothing ever overlaps the image, and the buttons
   themselves shrink to fit a much narrower tile. */
@media (max-width:699px){
  .tile{display:flex;flex-direction:column}
  .tile .meta{position:static;opacity:1;background:none;padding:6px 4px 0;justify-content:center;flex-wrap:wrap;gap:5px}
  .icon-btn{width:26px;height:26px;border-radius:8px}
  .icon-btn svg{width:13px;height:13px}
}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--cyan);animation:spin .9s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:50px 20px;text-align:center;color:var(--text-dim);border:1px dashed var(--line);border-radius:var(--radius)}

.track{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--well);margin-bottom:10px}
.track img,.track .noart{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--grad-warm)}
.track h3{font-size:1rem;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track p{margin:0;font-size:.84rem;color:var(--text-dim)}
.track audio{width:100%;height:34px;margin-top:8px}
.track .acts{display:flex;gap:6px}
@media (max-width:560px){.track{grid-template-columns:52px minmax(0,1fr)}.track .acts{grid-column:1/-1;justify-content:flex-end}}

@media (min-width:640px){.aic-detail-grid{grid-template-columns:1fr 1fr !important}}
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:90;display:grid;gap:8px;max-width:min(420px,calc(100vw - 36px))}
.toast{padding:12px 16px;border-radius:12px;background:var(--card-solid);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-size:.92rem}
.toast.ok{border-color:rgba(91,230,168,.5)} .toast.bad{border-color:rgba(255,107,129,.6)}

.modal{position:fixed;inset:0;z-index:80;background:rgba(4,8,20,.82);display:none;place-items:center;padding:20px}
.modal.open{display:grid}
.modal-box{max-width:min(1100px,100%);max-height:92vh;overflow:auto;background:var(--card-solid);border:1px solid var(--line-strong);border-radius:var(--radius);padding:18px}
.modal-box img,.modal-box video{max-width:100%;max-height:72vh;border-radius:12px;margin:0 auto}

/* Admin tables */
.tabs-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tabs-row button{font:600 .9rem var(--font-display);color:var(--text-dim);background:var(--well);border:1px solid var(--line);padding:9px 16px;border-radius:999px;cursor:pointer}
.tabs-row button[aria-selected="true"]{color:var(--text);border-color:var(--cyan);background:rgba(79,227,255,.1)}
.data{width:100%;border-collapse:collapse;font-size:.9rem}
.data th,.data td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.data th{font:600 .78rem var(--font-display);color:var(--text-dim);white-space:nowrap}
.data td.n,.data th.n{text-align:right;font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto}
.stat{padding:18px}
.stat b{display:block;font:800 1.7rem/1.1 var(--font-display);letter-spacing:-.02em}
.stat span{color:var(--text-dim);font-size:.86rem}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font:600 .74rem var(--font-display);border:1px solid var(--line-strong)}
.pill.ok{color:var(--ok);border-color:rgba(91,230,168,.4)} .pill.bad{color:var(--bad);border-color:rgba(255,107,129,.4)} .pill.warn{color:var(--warn);border-color:rgba(255,200,87,.4)}

/* Small phones: the top bar only has room for the mark, the balance and the menu */
@media (max-width:520px){
  .topnav-bar{padding:0 14px;gap:8px}
  .brand-name{display:none}
  .credit-pill{padding:7px 11px;font-size:.8rem}
  .credit-pill span.w{display:none}
  .nav-right{gap:7px}
}


/* ==========================================================================
   ARC bot mascot. Files live in /img: arcbot-logo, -wave, -think, -welcome (+ "-sm" small versions).
   ========================================================================== */
.bot{display:block;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)) drop-shadow(0 0 26px rgba(255,79,216,.22));user-select:none;-webkit-user-drag:none}
.bot.float{animation:botFloat 5.5s ease-in-out infinite}
@keyframes botFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.page-title.with-bot{display:flex;align-items:center;gap:20px;justify-content:space-between}
.page-title.with-bot .bot{width:clamp(84px,10vw,124px);flex:none}
@media (max-width:620px){.page-title.with-bot .bot{width:72px}}
.empty.with-bot{display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 20px}
.empty.with-bot .bot{width:110px;opacity:.95}
.empty.with-bot b{color:var(--text);font-family:var(--font-display);font-size:1.02rem}
.login-nudge{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;padding:14px 18px;margin-bottom:20px;border-radius:var(--radius);border:1px solid rgba(79,227,255,.35);background:rgba(79,227,255,.07)}
.login-nudge p{margin:0;color:var(--text)}
.speech{position:relative;display:inline-block;padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid var(--line-strong);font-size:.95rem;color:var(--text)}


/* Sidebar runs the full height of the page; its links stay pinned while you scroll. */
@media (min-width:961px){
  .sidebar{position:static;align-self:stretch;height:auto;overflow:visible;padding:0}
  .sidebar-inner{position:sticky;top:var(--nav-h);max-height:calc(100vh - var(--nav-h));overflow-y:auto;padding:22px 14px}
}
@media (max-width:960px){.sidebar-inner{display:contents}}

/* Promo bar: black, white lettering, above the top bar */
.promo-bar{background:#000;color:#fff;font-size:.9rem;padding:9px 44px 9px 16px;text-align:center;position:relative;display:flex;gap:6px 16px;justify-content:center;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.14)}
.promo-bar a{color:#fff;text-decoration:underline;font-weight:600}
.promo-bar button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:1.3rem;cursor:pointer;width:32px;height:32px}


/* ==========================================================================
   THEMES. The picker in the top bar sets <html data-theme="...">. "arc" (no attribute) is the default.
   To add one: copy a block, change the values, and add it to THEMES in shared/site.js.
   ========================================================================== */
:root[data-theme="violet"]{--ink:#0C0717;--navy-900:#140B2B;--navy-800:#1B1038;--navy-700:#2A1752;--card:rgba(52,32,92,.6);--card-solid:#251548;
  --line:rgba(200,170,255,.18);--line-strong:rgba(200,170,255,.36);--cyan:#C9A6FF;--blue:#8B5CF6;--violet:#7C3AED;--rose:#E85BD0;--text-soft:#F1ECFB;--text-dim:#C9BEE0;
  --glow-a:rgba(124,58,237,.5);--glow-b:rgba(232,91,208,.18);--glow-c:rgba(91,45,184,.3);--bar:rgba(12,7,23,.84);--well:rgba(12,7,23,.55)}
:root[data-theme="rose"]{--ink:#16070F;--navy-900:#240B1A;--navy-800:#2E0F22;--navy-700:#45152F;--card:rgba(84,28,58,.58);--card-solid:#3A1229;
  --line:rgba(255,170,210,.18);--line-strong:rgba(255,170,210,.38);--cyan:#FF8CC6;--blue:#F04E8A;--violet:#B8246E;--rose:#FF6B6B;--text-soft:#FCEDF3;--text-dim:#E0BFCE;
  --glow-a:rgba(240,78,138,.42);--glow-b:rgba(255,140,198,.16);--glow-c:rgba(184,36,110,.3);--bar:rgba(22,7,15,.84);--well:rgba(22,7,15,.55)}
:root[data-theme="ocean"]{--ink:#04121A;--navy-900:#06202C;--navy-800:#082B3A;--navy-700:#0C4054;--card:rgba(16,66,86,.58);--card-solid:#0D3546;
  --line:rgba(140,230,255,.18);--line-strong:rgba(140,230,255,.36);--cyan:#5EEAD4;--blue:#22B8E0;--violet:#0E7FA6;--rose:#2DD4BF;--text-soft:#E9F8FA;--text-dim:#B3D5DE;
  --glow-a:rgba(14,127,166,.45);--glow-b:rgba(94,234,212,.16);--glow-c:rgba(34,184,224,.2);--bar:rgba(4,18,26,.84);--well:rgba(4,18,26,.55)}
:root[data-theme="carbon"]{--ink:#050505;--navy-900:#0B0B0D;--navy-800:#111114;--navy-700:#19191E;--card:rgba(38,38,44,.7);--card-solid:#1C1C21;
  --line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.26);--text-soft:#EDEDF0;--text-dim:#BFBFC7;
  --glow-a:rgba(91,45,184,.22);--glow-b:rgba(79,227,255,.08);--glow-c:rgba(240,78,138,.1);--bar:rgba(5,5,5,.86);--well:rgba(0,0,0,.5)}
:root[data-theme="emerald"]{--ink:#03120C;--navy-900:#062016;--navy-800:#082A1D;--navy-700:#0D3F2B;--card:rgba(18,70,50,.58);--card-solid:#0E3526;
  --line:rgba(150,255,210,.17);--line-strong:rgba(150,255,210,.36);--cyan:#5BE6A8;--blue:#1FBF83;--violet:#0F8F6A;--rose:#A3E635;--text-soft:#E9FAF1;--text-dim:#B5D9C7;
  --glow-a:rgba(15,143,106,.45);--glow-b:rgba(163,230,53,.12);--glow-c:rgba(31,191,131,.2);--bar:rgba(3,18,12,.85);--well:rgba(3,18,12,.55)}
:root[data-theme="sunset"]{--ink:#160A05;--navy-900:#24110A;--navy-800:#2E160C;--navy-700:#472011;--card:rgba(88,42,22,.58);--card-solid:#3B1B0E;
  --line:rgba(255,200,150,.18);--line-strong:rgba(255,200,150,.38);--cyan:#FFB45C;--blue:#FF7A3D;--violet:#D9480F;--rose:#FF4D6D;--text-soft:#FDF0E6;--text-dim:#E2C2AD;
  --glow-a:rgba(217,72,15,.42);--glow-b:rgba(255,180,92,.16);--glow-c:rgba(255,77,109,.22);--bar:rgba(22,10,5,.85);--well:rgba(22,10,5,.55)}
:root[data-theme="gold"]{--ink:#0A0905;--navy-900:#12100A;--navy-800:#18150C;--navy-700:#241F11;--card:rgba(54,47,26,.62);--card-solid:#231E10;
  --line:rgba(240,201,74,.18);--line-strong:rgba(240,201,74,.4);--cyan:#F0C94A;--blue:#D9A520;--violet:#9A6B12;--rose:#F59E0B;--text-soft:#F8F1E1;--text-dim:#D0C6A9;
  --glow-a:rgba(154,107,18,.4);--glow-b:rgba(240,201,74,.14);--glow-c:rgba(245,158,11,.14);--bar:rgba(10,9,5,.86);--well:rgba(0,0,0,.5);--on-accent:#1A1405}
:root[data-theme="slate"]{--ink:#0C1118;--navy-900:#131A24;--navy-800:#18212D;--navy-700:#223041;--card:rgba(48,62,82,.6);--card-solid:#1F2A39;
  --line:rgba(180,205,235,.16);--line-strong:rgba(180,205,235,.34);--cyan:#7BACD0;--blue:#5B8DB8;--violet:#44698C;--rose:#8FA8C8;--text-soft:#EBF0F7;--text-dim:#B7C2D3;
  --glow-a:rgba(68,105,140,.35);--glow-b:rgba(123,172,208,.12);--glow-c:rgba(91,141,184,.14);--bar:rgba(12,17,24,.86);--well:rgba(12,17,24,.55)}
:root[data-theme="day"]{--ink:#EEF3FB;--navy-900:#EEF3FB;--navy-800:#F4F7FC;--navy-700:#E6EDF9;--card:rgba(255,255,255,.82);--card-solid:#FFFFFF;
  --line:rgba(20,40,90,.13);--line-strong:rgba(20,40,90,.26);--text:#0B1633;--text-soft:#24345A;--text-dim:#5B6B8E;--cyan:#1469D6;--blue:#2B5BE0;--ok:#0E8A58;--warn:#9A6400;--bad:#C8324A;
  --glow-a:rgba(91,45,184,.13);--glow-b:rgba(79,227,255,.18);--glow-c:rgba(240,78,138,.1);--bar:rgba(255,255,255,.88);--well:rgba(255,255,255,.9);--shadow:0 18px 44px -22px rgba(20,40,90,.35)}
:root[data-theme="day"] body::after{opacity:.9}
:root[data-theme="day"] .sidebar a.active{background:linear-gradient(100deg,rgba(91,45,184,.16),rgba(240,78,138,.1))}
:root[data-theme="day"] .icon-btn{color:var(--text)}
:root[data-theme="day"] .btn.light{background:#0B1633;color:#fff}
:root[data-theme="day"] .bot{filter:drop-shadow(0 16px 24px rgba(20,40,90,.3))}

/* Theme list: lives inside the profile dropdown (signed in) and the footer (everyone) */
.theme-list{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px 0 2px}
.theme-list button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:8px;background:none;border:0;color:var(--text-soft);font:inherit;font-size:.84rem;cursor:pointer;text-align:left}
.theme-list button:hover{background:rgba(127,127,127,.14);color:var(--text)}
.theme-list button[aria-checked="true"]{color:var(--text);font-weight:600;background:rgba(127,127,127,.12)}
.theme-list button span{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid var(--line-strong)}
.acct-menu{min-width:270px}
.acct-menu h6{margin:8px 12px 4px;font:600 .72rem var(--font-display);color:var(--text-dim);letter-spacing:.04em}
.acct-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.footer-theme{display:flex;align-items:center;gap:8px}
.footer-theme select{width:auto;padding:6px 10px;font-size:.85rem;border-radius:8px}


/* Credit dropdown in the top bar */
.credit-wrap{position:relative}
button.credit-pill{cursor:pointer;font-family:var(--font-display)}
.credit-menu{position:absolute;right:0;top:calc(100% + 10px);width:290px;padding:14px;background:var(--card-solid);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);display:none;z-index:60}
.credit-menu.open{display:block}
.cm-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--well);border:1px solid var(--line);margin-bottom:8px}
.cm-row b{display:block;font:700 1.25rem/1.1 var(--font-display);color:var(--text)}
.cm-row span{font-size:.82rem;color:var(--text-dim)}
.cm-row em{font-style:normal;font:600 .8rem var(--font-display);color:var(--text-soft);white-space:nowrap}
.cm-row em.soon{color:var(--warn)}
.cm-note{font-size:.8rem;color:var(--text-dim);margin:6px 2px}
.cm-actions{display:flex;gap:8px;margin-top:10px}.cm-actions .btn{flex:1}
@media (max-width:520px){.credit-menu{position:fixed;left:12px;right:12px;top:calc(var(--nav-h) + 8px);width:auto}}

/* Profile page */
.prof-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px;align-items:start}
@media (max-width:1000px){.prof-grid{grid-template-columns:1fr}}
.meter-bar{height:12px;border-radius:999px;background:var(--well);overflow:hidden;display:flex;margin:14px 0 10px}
.meter-bar i{display:block;height:100%}.meter-bar .m{background:var(--grad-warm)}.meter-bar .t{background:var(--cyan)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.86rem;color:var(--text-soft)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.legend .m::before{background:var(--rose)}.legend .t::before{background:var(--cyan)}
.countdown{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--line-strong);background:var(--well);margin-top:14px}
.countdown b{font:800 2.2rem/1 var(--font-display);letter-spacing:-.03em;color:var(--text)}
.countdown.soon{border-color:rgba(255,200,87,.55)}.countdown.soon b{color:var(--warn)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:560px){.two{grid-template-columns:1fr}}
.av-lg{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--grad-warm);display:grid;place-items:center;font:700 1.6rem var(--font-display);color:#fff;flex:none}

/* Music chat */
.chat{display:flex;flex-direction:column;gap:10px;height:330px;overflow-y:auto;padding:12px;border-radius:14px;background:var(--well);border:1px solid var(--line)}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:.95rem;line-height:1.5;white-space:pre-wrap}
.msg.ai{align-self:flex-start;background:var(--card-solid);border:1px solid var(--line)}
.msg.ai.intro{border:none;background:none;padding-left:0;color:var(--text-soft);max-width:100%}
.msg.me{align-self:flex-end;background:linear-gradient(100deg,color-mix(in srgb,var(--violet) 70%,transparent),color-mix(in srgb,var(--rose) 55%,transparent));color:#fff}
.msg.lyr{font-family:ui-monospace,Menlo,monospace;font-size:.84rem;max-height:180px;overflow:auto}
.chat-in{display:flex;gap:8px;margin-top:10px}.chat-in input{flex:1}
.starters{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.starters button{font-size:.82rem;padding:6px 11px;border-radius:999px;border:1px solid var(--line-strong);background:none;color:var(--text-soft);cursor:pointer}
.starters button:hover{border-color:var(--cyan);color:var(--text)}


/* ===== Layout polish (Sept 20) ===== */
/* Top bar: logo hugs the left edge, account hugs the right edge, smaller credit number */
.topnav-bar{max-width:none;padding:0 18px}
.credit-pill{padding:6px 12px;font-size:.78rem;gap:6px}
.credit-pill b{font-size:.84rem}
.credit-pill i{width:7px;height:7px}
.acct-btn{font-size:.84rem}

/* Sidebar: tighter and smaller, no grey scrollbar */
@media (min-width:961px){.shell{grid-template-columns:196px minmax(0,1fr)}.sidebar-inner{padding:14px 10px;scrollbar-width:none}.sidebar-inner::-webkit-scrollbar{display:none}}
@media (min-width:961px){.sidebar h5{margin:12px 10px 5px;font-size:.68rem}.sidebar a{padding:7px 10px;gap:10px;font-size:.86rem;border-radius:10px;margin-bottom:1px}.sidebar a svg{width:17px;height:17px}}

/* Previews match the shape they were actually generated in -- see .tile.wide / .tile.tall above */

/* Tool pages: the form starts at the top of the left column; the title sits on the right, above the previews */
.shell > main{padding-top:22px}
.tool .page-title{margin-bottom:18px}
.tool .page-title h1{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.tool .page-title p{font-size:.95rem}
.tool .page-title.with-bot .bot{width:clamp(64px,7vw,92px)}
.tool .login-nudge{margin-bottom:18px}
.leftcol{position:sticky;top:calc(var(--nav-h) + 20px);min-width:0}
.leftcol .panel{position:static}
@media (max-width:1100px){.leftcol{position:static}.tool{display:flex;flex-direction:column;gap:18px}.tool > section{display:contents}.tool .page-title{order:-3;margin-bottom:0}.tool .login-nudge{order:-2;margin-bottom:0}.tool > .panel,.tool > .leftcol,.tool > form{order:-1}}

/* View page: fits the screen first, click to see it large */
.fit{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;margin:0 auto;border-radius:14px;cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(3,6,14,.94);display:none;place-items:center;padding:18px;cursor:zoom-out}
.lightbox.open{display:grid}
.lightbox img,.lightbox video{max-width:100%;max-height:100%;border-radius:10px}

/* Share sheet */
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:420px){.share-grid{grid-template-columns:repeat(2,1fr)}}


/* ===== Top bar: Studio dropdown, smaller credit pill ===== */
.nav-dd{position:relative}
.nav-dd > a::after{content:"";display:inline-block;margin-left:7px;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.7}
.nav-dd > a.active::after{position:static;height:6px;background:none;left:auto;right:auto;bottom:auto;border-radius:0}
.nav-dd-menu{position:absolute;left:50%;top:100%;transform:translateX(-50%);min-width:210px;padding:8px;padding-top:8px;background:var(--card-solid);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);display:none;z-index:60}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{display:block}
.nav-dd-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:.92rem;color:var(--text-soft)}
.nav-dd-menu a svg{width:17px;height:17px;color:var(--cyan);flex:none}
.nav-dd-menu a:hover{background:rgba(127,127,127,.14);color:var(--text)}
.nav-dd-menu a.active::after{display:none}
@media (max-width:960px){.nav-dd > a::after{display:none}.nav-dd-menu{position:static;transform:none;display:block;box-shadow:none;border:0;background:none;padding:0 0 4px 14px;min-width:0}.nav-dd-menu::before{display:none}.nav-dd-menu a{padding:10px 12px}}

.credit-pill{padding:5px 10px;font-size:.72rem;gap:5px}
.credit-pill b{font-size:.78rem}
.credit-pill i{width:6px;height:6px}
@media (max-width:960px){.nav-links{justify-self:stretch}.nav-dd > a{display:block}}

/* Sidebar links: more breathing room now that the list is shorter */
@media (min-width:961px){.sidebar-inner{padding:18px 12px}.sidebar h5{margin:20px 10px 8px}.sidebar h5:first-child{margin-top:2px}.sidebar a{padding:10px 12px;margin-bottom:4px;font-size:.9rem;gap:11px}.sidebar a svg{width:18px;height:18px}}


/* ===== Studio shell: full-height columns, compact forms, collapsible sidebar ===== */
body[data-layout="studio"] .site-footer{margin-top:0}                 /* sidebar now runs right down to the footer */
@media (min-width:1101px){
  .tool{align-items:stretch}
  .tool > .panel,.tool > .leftcol > .panel{min-height:calc(100vh - var(--nav-h) - 44px)}   /* the form card reaches the bottom of the window */
  .tool > .leftcol{display:flex;flex-direction:column}.tool > .leftcol > .panel{flex:1}
  .tool > .panel{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start}
}
/* Compact form controls on the tool pages */
.tool .panel{padding:16px 16px 18px}
.tool .panel label{font-size:.8rem;margin:11px 0 5px}
.tool .panel textarea{min-height:88px;padding:9px 11px;font-size:.9rem}
.tool .panel input,.tool .panel select{padding:8px 11px;font-size:.9rem}
.tool .chips{gap:6px}
.tool .chips button{padding:5px 11px;font-size:.8rem}
.tool .chips button small{margin-left:5px;font-size:.72rem}
.tool .hint{font-size:.76rem;margin-top:5px;line-height:1.45}
.tool .drop{padding:8px 10px;font-size:.84rem}
.tool .drop img,.tool .drop video{width:40px;height:40px}
.tool .run-row{margin-top:14px;gap:10px}
.tool .run-row .btn{padding:10px 16px;font-size:.88rem}
.tool .cost-tag{font-size:.78rem}.tool .cost-tag b{font-size:.95rem}
.tool{gap:18px}
@media (min-width:1101px){.tool{grid-template-columns:minmax(280px,350px) minmax(0,1fr)}}

/* Collapse arrow: top-right corner of the sidebar. Collapsed = icons only. The choice is remembered. */
.side-toggle{position:absolute;top:10px;right:-13px;z-index:30;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);background:var(--card-solid);color:var(--text-soft);cursor:pointer;display:grid;place-items:center;padding:0}
.side-toggle:hover{color:var(--text);border-color:var(--cyan)}
.side-toggle svg{width:14px;height:14px;transition:transform .2s ease}
@media (min-width:961px){
  .sidebar{position:relative}
  .sidebar-inner{overflow-x:hidden}
  html[data-side="min"] .shell{grid-template-columns:58px minmax(0,1fr)}
  html[data-side="min"] .sidebar-inner{padding:18px 8px}
  html[data-side="min"] .sidebar h5{height:1px;margin:12px 6px;padding:0;overflow:hidden;background:var(--line);color:transparent}
  html[data-side="min"] .sidebar h5:first-child{display:none}
  html[data-side="min"] .sidebar a{justify-content:center;padding:10px 0;gap:0}
  html[data-side="min"] .sidebar a span{display:none}
  html[data-side="min"] .side-toggle svg{transform:rotate(180deg)}
}
@media (max-width:960px){.side-toggle{display:none}}

/* ===== Fix: sidebar sat too low and too far right =====
   1. The collapse arrow needed the sidebar to be "position:relative", but an older rule still carried top:68px,
      which pushed the whole sidebar down by the height of the top bar (and over the footer at the bottom).
   2. The studio area was capped at 1480px and centered, so on a wide window the sidebar floated in from the left edge. */
@media (min-width:961px){
  .sidebar{position:relative;top:auto;left:auto;height:auto}
  .shell{max-width:none;margin:0;width:100%}
  .shell > main{max-width:1500px}
}


/* ===== Studio mega menu ===== */
@media (min-width:961px){
  .nav-dd-menu{min-width:0;width:600px;padding:14px;display:none;grid-template-columns:1fr 1fr;gap:6px}
  .nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{display:grid}
  .nav-dd-menu a{align-items:flex-start;gap:12px;padding:12px;border-radius:12px;border:1px solid transparent}
  .nav-dd-menu a:hover{border-color:var(--line-strong)}
  .nav-dd-menu a.here{background:rgba(127,127,127,.12)}
  .nav-dd-menu a i{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;background:rgba(79,227,255,.1);border:1px solid rgba(79,227,255,.28);font-style:normal}
  .nav-dd-menu a i svg{width:19px;height:19px}
  .nav-dd-menu a b{display:block;font:600 .95rem var(--font-display);color:var(--text);margin-bottom:2px}
  .nav-dd-menu a small{display:block;font-size:.8rem;line-height:1.4;color:var(--text-dim)}
}
@media (max-width:960px){
  .nav-dd-menu a i{display:contents;font-style:normal}
  .nav-dd-menu a b{font-weight:500}
  .nav-dd-menu a small{display:none}
}

/* ===== Results: 4 across on the tool pages ===== */
@media (min-width:1101px){.tool .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
@media (min-width:700px) and (max-width:1100px){.tool .tiles,.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{border-radius:12px}}

/* ===== Phone polish ===== */
@media (max-width:700px){
  /* iPhones zoom the page when a field's text is under 16px. Keep every field at 16px on phones. */
  input,select,textarea,.tool .panel input,.tool .panel select,.tool .panel textarea{font-size:16px}
  /* Finger-sized controls */
  .tool .chips button,.chips button{padding:8px 13px;font-size:.86rem}
  .tool .run-row .btn{padding:13px 18px;font-size:.95rem}
  .tabs-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.tabs-row::-webkit-scrollbar{display:none}.tabs-row button{white-space:nowrap;flex:none}
  .wrap{padding:0 16px}
  .section{padding:44px 0}
  .section-head{margin-bottom:26px}
  h1{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  h2{font-size:clamp(1.35rem,6vw,1.75rem)}
  .lead{font-size:1rem}
  .card{padding:20px}
  .panel{padding:16px}
  .btn{padding:12px 20px}
  .cta-row .btn{flex:1 1 100%}
  .page-title{margin-bottom:16px}
  .page-title h1{font-size:1.5rem}
  .shell > main{padding:16px 14px 40px}
  /* Footer: two tidy columns, smaller type, theme picker on its own line */
  .footer-grid{padding:30px 16px 14px;gap:22px 18px}
  .footer-grid h4{margin-bottom:8px}.footer-grid li{margin-bottom:6px}.footer-grid a{font-size:.9rem}
  .footer-base{padding:14px 16px 26px;flex-direction:column;gap:8px}
  /* Toasts and modals sit above the thumb, full width */
  .toast-wrap{left:12px;right:12px;bottom:12px;max-width:none}
  .modal{padding:12px;align-items:end}.modal-box{width:100%;border-radius:18px 18px 12px 12px}
  .acct-menu{position:fixed;left:12px;right:12px;top:calc(var(--nav-h) + 8px);min-width:0}
  .data th,.data td{padding:8px 9px;font-size:.84rem}
  .track{padding:10px}
  .plan-card{padding:20px 18px}
  .coupon{padding:18px}
  .fit{max-height:52vh}
}
/* Phones in landscape and small tablets: two tool cards across */
@media (min-width:560px) and (max-width:960px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){#stats{grid-template-columns:1fr 1fr;gap:10px}#stats .stat{padding:14px}#stats .stat b{font-size:1.3rem}}

/* ===== Fix: full-size viewer always fits the screen =====
   The enlarged image used a percentage height, which does not work inside this kind of container, so a tall image
   ran off the bottom with no way to scroll. It is now sized against the window itself, and the overlay can scroll as a fallback. */
.lightbox{overflow:auto;overscroll-behavior:contain;padding:14px}
.lightbox img,.lightbox video{max-width:calc(100vw - 28px);max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);width:auto;height:auto;object-fit:contain;margin:auto}


/* ===== Reference library, source switch, free tools ===== */
.lib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:280px;overflow-y:auto;padding:2px}
.lib.video{grid-template-columns:repeat(3,minmax(0,1fr))}
.lib-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-strong);background:var(--well);color:var(--text-soft);font:inherit;font-size:.82rem;cursor:pointer;text-align:left;min-width:0}
.lib.video .lib-item{flex-direction:column;align-items:stretch;padding:6px;gap:5px}
.lib-item video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;background:#000}
.lib-item .lib-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-item small{color:var(--text-dim);flex:none}
.lib-item[aria-pressed="true"]{border-color:var(--cyan);background:rgba(79,227,255,.12);color:var(--text)}
.lib-play{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--grad-warm);color:#fff;font-size:.7rem}
.src-box{margin-top:8px}
.range-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:.84rem;color:var(--text-soft)}
.range-row input[type=range]{padding:0;border:0;background:none}
.free-tag{display:inline-block;padding:2px 9px;border-radius:999px;font:600 .7rem var(--font-display);background:rgba(91,230,168,.12);border:1px solid rgba(91,230,168,.45);color:var(--ok);vertical-align:middle;margin-left:8px}


/* ===== Sidebar links with a small description underneath ===== */
.sidebar a span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.sidebar a b{font-weight:600;font-size:.9rem;color:inherit}
.sidebar a small{font-size:.72rem;font-weight:400;color:var(--text-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar a.active small{color:var(--text-soft)}
@media (min-width:961px){.sidebar a{align-items:center;padding:8px 12px;margin-bottom:3px}.sidebar a svg{width:19px;height:19px;flex:none}}
@media (max-width:960px){.sidebar a small{display:none}.sidebar a span{flex-direction:row}}

/* ===== Tools page ===== */
.tooltabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px;padding-bottom:2px}
.tooltabs::-webkit-scrollbar{display:none}
.tooltabs button{flex:none;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--well);color:var(--text-soft);font:600 .86rem var(--font-display);cursor:pointer;white-space:nowrap}
.tooltabs button svg{width:16px;height:16px}
.tooltabs button[aria-selected="true"]{color:#fff;border-color:transparent;background:var(--grad-brand)}
.tool-pane[hidden]{display:none}
.stage{display:grid;place-items:center;min-height:260px;padding:14px;border-radius:var(--radius);border:1px dashed var(--line-strong);background:var(--well);text-align:center;color:var(--text-dim)}
.stage img,.stage video,.stage canvas{max-width:100%;max-height:52vh;border-radius:10px}
.kv{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.84rem;color:var(--text-soft);margin-top:8px}
.kv b{color:var(--text)}
.crop-wrap{position:relative;display:inline-block;max-width:100%;touch-action:none;user-select:none}
.crop-wrap canvas{display:block;max-width:100%;max-height:56vh;cursor:grab}
.crop-wrap canvas:active{cursor:grabbing}


/* ===== Light video tiles ===== */
.tile-media .hover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.tile .meta,.tile-media .badge{z-index:2}
.play-badge{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(3,6,14,.55);border:1.5px solid rgba(255,255,255,.75);z-index:1;pointer-events:none;transition:opacity .15s ease}
.play-badge::after{content:"";position:absolute;left:17px;top:12px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff}
.tile[data-playing] .play-badge{opacity:0}
.poster-wait{background:linear-gradient(135deg,rgba(91,45,184,.35),rgba(79,227,255,.12))}


/* ===== Library picker pop-up ===== */
.picker{padding:18px}
.picker-box{width:min(860px,100%);max-height:min(86vh,760px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.picker-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.picker-head h2{font-size:1.15rem;margin:0}
.picker-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:var(--well);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer;flex:none}
.picker-x:hover{border-color:var(--cyan)}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:16px 20px 20px;overflow-y:auto}
.pick{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--well);transition:border-color .15s ease,transform .15s ease}
.pick:hover,.pick:focus-within{border-color:var(--cyan);transform:translateY(-2px)}
.pick-media{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,rgba(91,45,184,.55),rgba(240,78,138,.3));display:grid;place-items:center}
.pick-media img,.pick-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick-play{position:relative;z-index:2;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);background:rgba(3,6,14,.55);color:#fff;font-size:.85rem;cursor:pointer;display:grid;place-items:center;padding:0 0 0 2px}
.pick.playing .pick-play{padding:0;background:var(--grad-warm);border-color:transparent}
.pick-len{position:absolute;right:6px;bottom:6px;z-index:2;padding:2px 7px;border-radius:999px;font:600 .7rem var(--font-display);background:rgba(3,6,14,.7);color:#fff}
.pick-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;opacity:.55}
.pick-wave i{width:5px;border-radius:3px;background:#fff;height:22%}
.pick-wave i:nth-child(2){height:46%}.pick-wave i:nth-child(3){height:64%}.pick-wave i:nth-child(4){height:38%}.pick-wave i:nth-child(5){height:26%}
.pick.playing .pick-wave i{animation:wave 0.9s ease-in-out infinite alternate}
.pick.playing .pick-wave i:nth-child(2){animation-delay:.15s}.pick.playing .pick-wave i:nth-child(3){animation-delay:.3s}.pick.playing .pick-wave i:nth-child(4){animation-delay:.45s}.pick.playing .pick-wave i:nth-child(5){animation-delay:.6s}
@keyframes wave{from{transform:scaleY(.5)}to{transform:scaleY(1.5)}}
.pick-info{display:flex;flex-direction:column;gap:1px;min-width:0;padding:0 2px}
.pick-info b{font:600 .84rem var(--font-display);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-info span{font-size:.76rem;color:var(--cyan);font-weight:600}
.pick .btn{padding:7px 10px;font-size:.78rem}
.chosen{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--line-strong);background:var(--well);margin-top:8px}
.chosen img,.chosen .chosen-ic{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:linear-gradient(135deg,rgba(91,45,184,.55),rgba(240,78,138,.3));display:grid;place-items:center;color:#fff}
.chosen div{flex:1;min-width:0}.chosen b{display:block;font-size:.86rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chosen span{font-size:.76rem;color:var(--text-dim)}
@media (max-width:700px){.picker{padding:0;align-items:end}.picker-box{max-height:88vh;border-radius:18px 18px 0 0}.picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 14px 18px}}

/* ===== Sidebar: a touch tighter, smaller descriptions ===== */
@media (min-width:961px){
  .sidebar-inner{padding:12px 10px}
  .sidebar a{padding:6px 10px;margin-bottom:1px;gap:10px}
  .sidebar h5{margin:14px 10px 5px}
  .sidebar h5:first-child{margin-top:0}
}
.sidebar a small{font-size:.66rem;margin-top:1px;letter-spacing:.01em}


/* ===== Form cards match the sidebar; the fields inside them take the lighter card colour =====
   Before: light card, dark fields, and the card melted into the page. Now the card is the same dark glass as the sidebar
   (so it reads as a solid column), and everything you type or click inside it is the lighter slate, so fields stand out.
   Uses the theme tokens, so all ten themes follow automatically. */
:root{--field:var(--card-solid)}
.panel,.chat-main,.chat-side{background:var(--well);border-color:var(--line-strong);box-shadow:0 18px 40px -26px rgba(0,0,0,.7)}
.panel :is(input,select,textarea),.composer textarea,
.panel .chips button:not([aria-pressed="true"]),
.panel .drop,.panel .chosen,.panel .lib-item,.panel .icon-btn,.panel .cm-row,.panel .countdown,.panel .chat,.panel .stage,.panel .tooltabs button:not([aria-selected="true"]),
.chat-main .icon-btn,.chat-side .icon-btn,.chat-main .mind,.starters button,.panel .btn.ghost{background:var(--field)}
.panel :is(input,select,textarea)::placeholder,.composer textarea::placeholder{color:var(--text-dim)}
.panel select option{background:var(--card-solid);color:var(--text)}
select option{background:var(--card-solid);color:var(--text)}
/* chat bubbles: Spark's replies sit on the dark column, so give them the field colour too */
.chat-main .bub.ai{background:var(--field)}
.chat-main .bub code,.chat-main .bub pre,.chat-main .bub a.cite{background:var(--well)}
.chat-head,.composer{border-color:var(--line-strong)}
/* the day theme is white on white: separate the two with a soft tint instead */
:root[data-theme="day"] .panel,:root[data-theme="day"] .chat-main,:root[data-theme="day"] .chat-side{background:#E6EDF9}
:root[data-theme="day"]{--field:#FFFFFF}