/*
 * Kiln — AI Studio for WordPress
 * Stylesheet — enqueued only on the template-kiln-studio.php page template
 * (see functions-snippet.php for the conditional wp_enqueue_style call)
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink-950:#0A0D11;
  --ink-900:#12161B;
  --ink-850:#171C22;
  --ink-800:#1D232A;
  --ink-700:#2A313A;
  --ink-600:#3A424D;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.15);
  --paper:#EDEAE2;
  --paper-dim:#9BA3AE;
  --paper-faint:#6B727C;
  --brass:#4F8FE0;
  --brass-strong:#8FC1FF;
  --brass-dim: rgba(79,143,224,0.14);
  --brass-line: rgba(79,143,224,0.4);
  --teal:#5BB0A4;
  --teal-dim: rgba(91,176,164,0.14);
  --rose:#D6604F;
  --rose-dim: rgba(214,96,79,0.14);
  --sage:#7CB88F;

  --font-display:'Fraunces', serif;
  --font-ui:'Plus Jakarta Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:22px;
  --r-pill:999px;

  --shadow-hero: 0 30px 70px -25px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-pop: 0 18px 40px -12px rgba(0,0,0,0.55);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(79,143,224,0.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(91,176,164,0.06), transparent 60%),
    var(--ink-950);
  color:var(--paper);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.5;
}
::selection{ background:var(--brass-dim); color:var(--brass-strong); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--ink-700); border-radius:99px; border:2px solid transparent; background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{ background:var(--ink-600); background-clip:padding-box;}

a{ color:inherit; }
button{ font-family:inherit; }
input,textarea,select{ font-family:inherit; color:inherit; }

.hide{ display:none !important; }
.mono{ font-family:var(--font-mono); }

/* focus ring, accessible */
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--brass-strong);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell{
  display:grid;
  grid-template-columns:72px 1fr;
  height:100vh;
}

/* ---------- left icon rail ---------- */
.rail{
  background:var(--ink-900);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 0 14px;
}
.rail-mark{
  width:34px; height:34px;
  border-radius:9px;
  background:linear-gradient(155deg, var(--brass-strong), var(--brass) 55%, #1f3f66);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:18px;
  color:var(--ink-950);
  margin-bottom:26px;
  flex-shrink:0;
}
.rail-nav{
  display:flex; flex-direction:column; gap:4px;
  flex:1;
}
.rail-btn{
  width:44px; height:44px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--paper-faint);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.rail-btn svg{ width:20px; height:20px; }
.rail-btn:hover{ background:var(--ink-850); color:var(--paper); }
.rail-btn.active{ background:var(--brass-dim); color:var(--brass-strong); border-color:var(--brass-line); }
.rail-btn .tip{
  position:absolute; left:56px; top:50%; transform:translateY(-50%);
  background:var(--ink-800); border:1px solid var(--line-strong);
  padding:6px 10px; border-radius:var(--r-xs);
  font-size:12.5px; white-space:nowrap; color:var(--paper);
  opacity:0; pointer-events:none; transition:opacity .12s ease;
  box-shadow:var(--shadow-pop);
  z-index:40;
}
.rail-btn:hover .tip{ opacity:1; }

.rail-foot{ display:flex; flex-direction:column; gap:4px; align-items:center; }

/* ---------- main column ---------- */
.main{ display:flex; flex-direction:column; min-width:0; height:100vh; }

/* ---------- topbar ---------- */
.topbar{
  /* position:relative + z-index:0 give this its own stacking context for
     the ::before blur layer below, WITHOUT putting backdrop-filter on
     .topbar itself. backdrop-filter (like transform/filter/perspective)
     makes an element a new containing block for any position:fixed
     descendant — so a third-party modal (e.g. a login/auth plugin's
     "Sign In" dialog) that gets inserted anywhere under this header,
     which is exactly where the account/avatar trigger for one lives (see
     the .avatar element below), would have its "fixed, centered over the
     whole page" positioning recalculated relative to this ~60px header
     bar instead of the viewport — landing squashed at the top of the
     page instead of centered, with no full-page dim backdrop behind it.
     Moving the blur to a generated ::before layer keeps the exact same
     frosted-glass look but never becomes part of the real DOM tree, so
     nothing can ever be inserted "inside" it the way it could be inserted
     inside .topbar itself.

     z-index is a real positive number (not 0) on purpose: .topbar and
     section.view are both direct flex items of .main. Inside a flex
     container, a flex item's stacking is decided by z-index first and
     DOM order only as a tie-breaker — and z-index:0 here ties with a
     sibling that has no z-index at all (auto counts as 0 too), so the
     later .view section (which is where the assistant/"Coach" rail
     lives) was winning that tie and painting over .topbar, dragging
     the notif/workspace dropdowns underneath it. A positive value wins
     outright instead of depending on source order. */
  position:relative; z-index:5;
  height:60px; flex-shrink:0;
  display:flex; align-items:center; gap:16px;
  padding:0 22px;
  border-bottom:1px solid var(--line);
}
.topbar::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(18,22,27,0.6);
  backdrop-filter:blur(10px);
  pointer-events:none;
}
.workspace-menu{ position:relative; }
.workspace-switch{
  display:flex; align-items:center; gap:9px;
  padding:7px 10px 7px 8px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--ink-900);
  cursor:pointer;
  font-family:inherit; color:inherit;
}
.workspace-switch:hover{ border-color:var(--line-strong); }
.workspace-switch .dot{
  width:22px; height:22px; border-radius:6px;
  background:linear-gradient(160deg,#3a4552,#1c2129);
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:11px; font-weight:600; color:var(--paper-dim);
}
.workspace-switch .label{ font-size:13px; font-weight:600; }
.workspace-switch .sub{ font-size:11.5px; color:var(--paper-faint); }
.workspace-switch svg{ width:14px;height:14px; color:var(--paper-faint); margin-left:2px; flex-shrink:0; transition:transform .15s ease; }
.workspace-menu.open .workspace-switch svg{ transform:rotate(180deg); }
.workspace-menu.open .workspace-switch{ border-color:var(--line-strong); }

.workspace-dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px; z-index:30;
  background:var(--ink-800); border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  padding:6px; display:none;
}
.workspace-menu.open .workspace-dropdown{ display:block; }
.wd-item{
  display:flex; flex-direction:column; gap:1px;
  padding:8px 10px; border-radius:var(--r-sm);
  font-size:12.5px; font-weight:600; color:var(--paper);
  text-decoration:none;
}
.wd-item:hover{ background:var(--ink-850); }
.wd-item .wd-sub{ font-size:11px; font-weight:400; color:var(--paper-faint); }

.top-spacer{ flex:1; }

.top-search{
  display:flex; align-items:center; gap:8px;
  width:260px; padding:8px 12px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--ink-900);
  color:var(--paper-faint);
}
.top-search svg{ width:15px;height:15px; flex-shrink:0; }
.top-search input{
  background:none;border:none;outline:none;width:100%;
  color:var(--paper); font-size:13px;
}
.top-search input::placeholder{ color:var(--paper-faint); }

.credit-chip{
  display:flex; align-items:center; gap:8px;
  padding:7px 8px 7px 12px;
  border-radius:var(--r-pill);
  border:1px solid var(--brass-line);
  background:var(--brass-dim);
}
.credit-chip svg{ width:14px;height:14px; color:var(--brass-strong); }
.credit-chip-icon{
  width:14px;height:14px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; color:var(--brass-strong);
}
img.credit-chip-icon{ object-fit:contain; border-radius:3px; }
.credit-chip .num{ font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--brass-strong); }
.credit-chip button{
  background:var(--ink-950); border:1px solid var(--line-strong);
  color:var(--paper); font-size:11.5px; font-weight:600;
  padding:5px 10px; border-radius:var(--r-pill); cursor:pointer;
}
.credit-chip button:hover{ border-color:var(--brass-line); color:var(--brass-strong); }

.token-symbol-inline{ width:12px;height:12px; object-fit:contain; border-radius:2px; vertical-align:-1px; }
.charge-note{ font-family:var(--font-mono); font-size:11px; color:var(--brass-strong); font-weight:500; }
/* OpenRouter's real USD cost, shown beside a converted charge as a reference. */
.usd-ref{ font-family:var(--font-mono); font-size:10.5px; font-weight:400; color:var(--paper-faint); white-space:nowrap; margin-left:2px; }
/* Pre-generate hint: the balance can't cover this (the server enforces it; this just saves a click). */
#costEstimate.cost-short{ color:var(--rose); }

.mobile-menu-btn{ display:none; } /* shown only ≤860px, see MOBILE section at end of file */
.mobile-scrim{
  display:none;
  position:fixed; inset:0; z-index:60;
  background:rgba(6,8,10,0.6);
}
.mobile-scrim.show{ display:block; }

.notif-menu{ position:relative; }
.icon-btn{
  width:36px;height:36px; border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--ink-900);
  display:flex; align-items:center; justify-content:center;
  color:var(--paper-dim); cursor:pointer; position:relative;
}
.icon-btn svg{ width:16px;height:16px; }
.icon-btn:hover{ color:var(--paper); border-color:var(--line-strong); }
.notif-menu.open .icon-btn{ color:var(--paper); border-color:var(--line-strong); }
.icon-btn .ping{
  position:absolute; top:6px; right:6px; width:6px;height:6px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 0 2px var(--ink-900);
}

.notif-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; width:320px; z-index:30;
  background:var(--ink-800); border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  padding:8px; max-height:360px; overflow-y:auto; display:none;
}
.notif-menu.open .notif-dropdown{ display:block; }
.notif-dropdown-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 6px 8px; font-size:12.5px; font-weight:700; color:var(--paper);
}
.notif-clear{
  background:none; border:none; padding:0; font-size:11.5px; font-weight:600;
  color:var(--paper-faint); cursor:pointer;
}
.notif-clear:hover{ color:var(--paper); }
.notif-item{
  display:block; width:100%; text-align:left;
  padding:9px 10px; border-radius:var(--r-sm);
  border:none; background:none; cursor:pointer;
  border-top:1px solid var(--line);
}
.notif-item:first-child{ border-top:none; }
.notif-item:hover{ background:var(--ink-850); }
.notif-item.unread .ni-title::before{
  content:''; display:inline-block; width:6px;height:6px; border-radius:50%;
  background:var(--teal); margin-right:6px; vertical-align:1px;
}
.notif-item .ni-title{ font-size:12.5px; font-weight:600; color:var(--paper); }
.notif-item .ni-msg{ font-size:11.5px; color:var(--paper-faint); margin-top:2px; }
.notif-item .ni-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.notif-item .ni-time{ font-size:10.5px; color:var(--paper-faint); }
/* Only notifications carrying an action (n.action) jump anywhere when
   clicked — this pill is what tells the person that's true before they
   click, instead of a plain dot-separated word buried next to the
   timestamp. */
.notif-item .ni-action{
  display:inline-flex; align-items:center; gap:2px;
  font-size:10.5px; font-weight:700; color:var(--teal);
  flex-shrink:0;
}
.notif-item .ni-action svg{ width:11px; height:11px; transition:transform .12s ease; }
.notif-item.has-action:hover .ni-action{ color:var(--paper); }
.notif-item.has-action:hover .ni-action svg{ transform:translateX(2px); }
.notif-empty{
  padding:24px 12px; text-align:center; font-size:12px; color:var(--paper-faint);
}

.avatar{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:linear-gradient(160deg,#54463033,#171c2200), linear-gradient(155deg,#7d6a49,#3c3325);
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:var(--brass-strong);
  cursor:pointer; text-decoration:none;
}

/* ---------- view container ---------- */
.view{ flex:1; min-height:0; display:none; }
.view.active{ display:flex; }

/* ============================================================
   STUDIO VIEW
   ============================================================ */
#view-studio{ display:none; }
#view-studio.active{ display:grid; }
.studio-grid{
  grid-template-columns: 392px 1fr 336px;
  width:100%;
  min-height:0;
  transition:grid-template-columns .22s ease;
}
.studio-grid.assist-collapsed{ grid-template-columns: 392px 1fr 0px; }
@media (max-width:1180px){
  .studio-grid{ grid-template-columns: 336px 1fr 336px; }
  .studio-grid.assist-collapsed{ grid-template-columns: 336px 1fr 0px; }
}

/* ---- shared panel scaffolding ---- */
.panel{
  min-height:0;
  overflow-y:auto;
  padding:20px;
}
.panel-title{
  display:flex; align-items:center; justify-content:between; gap:8px;
  margin:0 0 16px;
}
.panel-title h2{
  font-family:var(--font-display); font-weight:500; font-size:16px;
  margin:0; letter-spacing:.01em;
}

/* ---- composer ---- */
.composer{
  border-right:1px solid var(--line);
  background:var(--ink-900);
  display:flex; flex-direction:column;
}
.composer-scroll{ flex:1; overflow-y:auto; padding:20px; }

.mode-toggle{
  display:flex; padding:4px; gap:4px;
  background:var(--ink-950); border:1px solid var(--line);
  border-radius:var(--r-pill);
  margin-bottom:18px;
}
.mode-toggle button{
  flex:1; border:none; background:none; cursor:pointer;
  padding:9px 0; border-radius:var(--r-pill);
  color:var(--paper-faint); font-weight:600; font-size:13px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition:background .15s ease, color .15s ease;
}
.mode-toggle button svg{ width:15px; height:15px; }
.mode-toggle button.active{ background:var(--ink-800); color:var(--paper); box-shadow:0 1px 0 var(--line-strong) inset; }
.mode-toggle button[data-mode="image"].active{ color:var(--brass-strong); }
.mode-toggle button[data-mode="video"].active{ color:var(--teal); }

/* live "cheapest model" ticker — sits under the mode toggle, always
   reflects whichever mode (image/video) is currently selected, and
   prices in whatever token symbol the admin has configured. */
.cheapest-ticker{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; margin-bottom:18px;
  border:1px solid var(--brass-line); background:var(--brass-dim);
  border-radius:var(--r-pill);
  font-size:11.5px; color:var(--paper-dim);
}
.cheapest-ticker .ct-dot{
  width:7px; height:7px; border-radius:50%; background:var(--sage); flex-shrink:0;
  animation:ct-pulse 1.8s infinite;
}
@keyframes ct-pulse{
  0%{ box-shadow:0 0 0 0 rgba(124,184,143,0.55); }
  70%{ box-shadow:0 0 0 6px rgba(124,184,143,0); }
  100%{ box-shadow:0 0 0 0 rgba(124,184,143,0); }
}
.cheapest-ticker .ct-label{ color:var(--paper-faint); flex-shrink:0; white-space:nowrap; }
.cheapest-ticker .ct-model{
  font-weight:700; color:var(--paper);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cheapest-ticker .ct-price{
  margin-left:auto; flex-shrink:0; white-space:nowrap;
  font-family:var(--font-mono); font-weight:600; color:var(--brass-strong);
  display:flex; align-items:center; gap:3px;
}
.cheapest-ticker .ct-price img.token-symbol-inline{ width:11px; height:11px; }

.field-label{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12.5px; color:var(--paper-dim); margin-bottom:8px; font-weight:600;
}
.field-label .hint{ color:var(--paper-faint); font-weight:500; font-size:12px; }
.field-label .hint.charge-note{ color:var(--brass-strong); }

.block{ margin-bottom:20px; }

.prompt-box{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--ink-850);
  transition:border-color .15s ease;
}
.prompt-box:focus-within{ border-color:var(--brass-line); }
.prompt-box textarea{
  width:100%; resize:none; border:none; background:none; outline:none;
  color:var(--paper); font-size:13.5px; line-height:1.55;
  padding:14px 14px 44px;
  min-height:104px;
}
.prompt-box textarea::placeholder{ color:var(--paper-faint); }
.prompt-box-foot{
  position:absolute; left:10px; right:10px; bottom:9px;
  display:flex; align-items:center; justify-content:space-between;
}
.enhance-btn{
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(160deg, var(--brass-dim), transparent);
  border:1px solid var(--brass-line);
  color:var(--brass-strong);
  font-size:12px; font-weight:600;
  padding:6px 11px; border-radius:var(--r-pill);
  cursor:pointer;
}
.enhance-btn svg{ width:13px;height:13px; }
.enhance-btn:hover{ background:var(--brass-dim); }
.enhance-btn.thinking svg{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.char-count{ font-size:11px; color:var(--paper-faint); font-family:var(--font-mono); }

.clarity-row{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.clarity-track{ flex:1; height:4px; border-radius:99px; background:var(--ink-700); overflow:hidden; }
.clarity-fill{ height:100%; width:18%; border-radius:99px; background:linear-gradient(90deg,var(--rose),var(--brass) 60%, var(--sage)); transition:width .3s ease; }
.clarity-label{ font-size:11px; color:var(--paper-faint); white-space:nowrap; }

.tagrow{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.tagchip{
  font-size:11.5px; padding:5px 10px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--ink-800);
  color:var(--paper-dim); cursor:pointer; font-weight:500;
}
.tagchip:hover{ border-color:var(--line-strong); color:var(--paper); }
.tagchip.on{ background:var(--brass-dim); border-color:var(--brass-line); color:var(--brass-strong); }

/* reference upload */
.dropzone{
  border:1.5px dashed var(--line-strong);
  border-radius:var(--r-md);
  padding:16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  color:var(--paper-faint);
}
.dropzone:hover, .dropzone.drag{ border-color:var(--brass-line); background:var(--brass-dim); color:var(--brass-strong); }
.dropzone svg{ width:20px; height:20px; margin-bottom:6px; }
.dropzone .dz-title{ font-size:12.5px; font-weight:600; color:var(--paper); }
.dropzone .dz-sub{ font-size:11.5px; margin-top:2px; }
.ref-strip{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.ref-thumb{
  position:relative; width:58px; height:58px; border-radius:var(--r-sm);
  overflow:hidden; border:1px solid var(--line-strong); flex-shrink:0;
}
.ref-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ref-thumb button{
  position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%;
  background:rgba(10,13,17,0.85); border:none; color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.ref-thumb button svg{ width:9px;height:9px; }

/* model picker */
.model-picker{
  position:relative;
}
.model-picker-btn{
  width:100%; display:flex; align-items:center; gap:10px;
  border:1px solid var(--line-strong); background:var(--ink-850);
  border-radius:var(--r-md); padding:11px 12px; cursor:pointer;
  text-align:left;
}
.model-swatch{ width:30px; height:30px; border-radius:8px; flex-shrink:0; }
.model-picker-btn .mp-name{ font-size:13px; font-weight:600; color:var(--paper); }
.model-picker-btn .mp-sub{ font-size:11.5px; color:var(--paper-faint); font-family:var(--font-mono); }
.model-picker-btn .mp-meta{ margin-left:auto; text-align:right; }
.model-picker-btn .mp-price{ font-size:12px; color:var(--brass-strong); font-family:var(--font-mono); font-weight:500; }
.model-picker-btn .mp-speed{ font-size:11px; color:var(--paper-faint); }
.model-picker-btn svg.chev{ width:14px;height:14px; color:var(--paper-faint); flex-shrink:0; }

.model-dropdown{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  background:var(--ink-800); border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  padding:8px; max-height:340px; overflow-y:auto; display:none;
}
.model-dropdown.open{ display:block; }
.model-dropdown-search{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--ink-950); margin-bottom:8px;
}
.model-dropdown-search svg{ width:13px;height:13px; color:var(--paper-faint); }
.model-dropdown-search input{ background:none; border:none; outline:none; color:var(--paper); font-size:12.5px; width:100%; }
.model-option{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:var(--r-sm);
  cursor:pointer;
}
.model-option:hover{ background:var(--ink-850); }
.model-option.sel{ background:var(--brass-dim); }
.model-option .model-swatch{ width:26px;height:26px; border-radius:7px; }
.model-option .mo-name{ font-size:12.5px; font-weight:600; }
.model-option .mo-tags{ font-size:10.5px; color:var(--paper-faint); }
.model-option .mo-price{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--paper-dim); }
.model-option .status-dot{ width:6px;height:6px;border-radius:50%; background:var(--sage); flex-shrink:0; }

/* params */
.chip-row{ display:flex; gap:7px; flex-wrap:wrap; }
.ratio-chip{
  border:1px solid var(--line-strong); background:var(--ink-850);
  padding:7px 12px; border-radius:var(--r-sm); font-size:12px; font-weight:600;
  color:var(--paper-dim); cursor:pointer; display:flex; align-items:center; gap:6px;
}
.ratio-chip .rswatch{ display:block; border:1.4px solid currentColor; border-radius:2px; }
.ratio-chip:hover{ color:var(--paper); }
.ratio-chip.sel{ border-color:var(--brass-line); background:var(--brass-dim); color:var(--brass-strong); }

.select-field{
  width:100%; padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--ink-850); color:var(--paper);
  font-size:13px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239BA3AE' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}

.slider-row{ display:flex; align-items:center; gap:10px; }
.slider-row input[type="range"]{
  flex:1; -webkit-appearance:none; height:4px; border-radius:99px;
  background:var(--ink-700); outline:none;
}
.slider-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--brass-strong); cursor:pointer; border:2px solid var(--ink-950);
  box-shadow:0 0 0 1px var(--brass-line);
}
.slider-val{ font-family:var(--font-mono); font-size:12px; color:var(--paper-dim); width:34px; text-align:right; flex-shrink:0; }

.seed-row{ display:flex; gap:8px; }
.seed-row input{
  flex:1; padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--ink-850); color:var(--paper);
  font-family:var(--font-mono); font-size:12.5px; outline:none;
}
.seed-row button{
  width:38px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--ink-850); color:var(--paper-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.seed-row button:hover{ color:var(--paper); }
.seed-row button svg{ width:15px;height:15px; }

.stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; width:fit-content; }
.stepper button{ width:32px;height:34px; background:var(--ink-850); border:none; color:var(--paper-dim); cursor:pointer; font-size:15px; }
.stepper button:hover{ color:var(--paper); }
.stepper .sval{ width:38px; text-align:center; font-family:var(--font-mono); font-size:13px; background:var(--ink-800); height:34px; display:flex; align-items:center; justify-content:center; }

.accordion{ border-top:1px solid var(--line); }
.accordion-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 2px; cursor:pointer; user-select:none;
}
.accordion-head .at{ font-size:12.5px; font-weight:600; color:var(--paper-dim); }
.accordion-head svg{ width:14px;height:14px; color:var(--paper-faint); transition:transform .18s ease; }
.accordion.open .accordion-head svg{ transform:rotate(180deg); }
.accordion-body{ display:none; padding:2px 2px 16px; }
.accordion.open .accordion-body{ display:block; }

.generate-bar{
  border-top:1px solid var(--line); padding:16px 20px;
  background:var(--ink-900);
}
.generate-btn{
  width:100%; padding:14px 16px; border-radius:var(--r-md); border:none; cursor:pointer;
  background:linear-gradient(160deg, var(--brass-strong), var(--brass) 70%);
  color:#0d1b2a; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:filter .15s ease, transform .05s ease;
}
.generate-btn svg{ width:17px;height:17px; }
.generate-btn:hover{ filter:brightness(1.06); }
.generate-btn:active{ transform:scale(0.99); }
.generate-btn[data-mode-color="video"]{ background:linear-gradient(160deg,#7bcabf,var(--teal) 70%); color:#0c211e; }
.generate-cost{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:9px; font-size:11.5px; color:var(--paper-faint);
}
.generate-cost b{ color:var(--paper-dim); font-family:var(--font-mono); font-weight:500; }

/* ---- canvas ---- */
.canvas-col{
  background:
    radial-gradient(700px 500px at 50% -10%, rgba(255,255,255,0.025), transparent 60%),
    var(--ink-950);
  display:flex; flex-direction:column; min-width:0;
}
.canvas-scroll{ flex:1; overflow-y:auto; padding:26px 28px; display:flex; flex-direction:column; align-items:center; }
.canvas-card{
  width:100%; max-width:640px;
  border-radius:var(--r-lg);
  border:1px solid var(--line-strong);
  background:var(--ink-900);
  box-shadow:var(--shadow-hero);
  overflow:hidden;
}
.canvas-frame{
  position:relative; width:100%; aspect-ratio:1/1; background:var(--ink-850);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:aspect-ratio .25s ease;
}
.canvas-frame svg.art{ width:100%; height:100%; display:block; }
.canvas-empty{ text-align:center; color:var(--paper-faint); padding:30px; }
.canvas-empty svg{ width:34px; height:34px; margin-bottom:12px; opacity:.7; }
.canvas-empty .ce-title{ font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--paper-dim); margin-bottom:6px; }
.canvas-empty .ce-sub{ font-size:12.5px; max-width:280px; margin:0 auto; }

.canvas-error{ text-align:center; color:var(--paper-faint); padding:30px; }
.canvas-error svg{ width:34px; height:34px; margin-bottom:12px; color:var(--rose); }
.canvas-error .ce-title{ font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--rose); margin-bottom:6px; }
.canvas-error .ce-sub{ font-size:12.5px; max-width:320px; margin:0 auto; }
.canvas-error .ce-err-link{ display:inline-block; margin-top:12px; font-size:12.5px; color:var(--brass-strong); text-decoration:none; border-bottom:1px solid var(--brass-line); }
.canvas-error .ce-err-link:hover{ color:var(--brass); }

.canvas-loading{ display:none; flex-direction:column; align-items:center; gap:14px; color:var(--paper-dim); }
.canvas-loading.on{ display:flex; }
.spin-ring{ width:34px;height:34px; border-radius:50%; border:2.5px solid var(--ink-700); border-top-color:var(--brass-strong); animation:spin 0.9s linear infinite; }
.canvas-loading .cl-label{ font-size:12.5px; }
.canvas-loading .cl-bar{ width:160px; height:3px; background:var(--ink-700); border-radius:99px; overflow:hidden; }
.canvas-loading .cl-fill{ height:100%; width:0%; background:var(--brass-strong); transition:width .25s linear; }

.canvas-toolbar{
  position:absolute; top:12px; right:12px; display:flex; gap:6px; opacity:0; transition:opacity .15s ease;
}
.canvas-frame:hover .canvas-toolbar{ opacity:1; }
.canvas-toolbar button{
  width:32px;height:32px; border-radius:8px; border:1px solid var(--line-strong);
  background:rgba(10,13,17,0.65); backdrop-filter:blur(6px); color:var(--paper);
  display:flex;align-items:center;justify-content:center; cursor:pointer;
}
.canvas-toolbar button svg{ width:15px;height:15px; }
.canvas-toolbar button:hover{ border-color:var(--brass-line); color:var(--brass-strong); }

.play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.15);
}
.play-badge .pb-circle{
  width:52px;height:52px; border-radius:50%; background:rgba(10,13,17,0.55);
  border:1.5px solid rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(3px);
}
.play-badge svg{ width:20px;height:20px; color:#fff; margin-left:2px; }
.dur-badge{
  position:absolute; bottom:10px; right:10px; background:rgba(10,13,17,0.7);
  padding:3px 8px; border-radius:6px; font-size:11px; font-family:var(--font-mono); color:#fff;
}
.part-badge{
  position:absolute; bottom:10px; left:10px; background:rgba(10,13,17,0.7);
  padding:3px 8px; border-radius:6px; font-size:11px; font-family:var(--font-mono); color:#fff;
}

/* Extend (Duration section) */
.extend-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 12px; }
.extend-toggle-row .et-title{ font-size:12.5px; font-weight:600; color:var(--paper-dim); }
.extend-toggle-row .et-sub{ font-size:11.5px; color:var(--paper-faint); margin-top:2px; }
.extend-disabled-note{ font-size:11.5px; color:var(--paper-faint); margin-bottom:16px; }
.extend-manual{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--paper-faint); margin:10px 0 8px; cursor:pointer; }
.extend-manual input{ accent-color:var(--brass-strong); }
.extend-scenes{
  width:100%; min-height:92px; resize:vertical; padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--ink-850); color:var(--paper);
  font-size:12.5px; line-height:1.5; margin-bottom:16px;
}
.extend-scenes::placeholder{ color:var(--paper-faint); }

.canvas-meta{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-top:1px solid var(--line);
}
.canvas-meta .cm-left{ font-size:12px; color:var(--paper-faint); }
.canvas-meta .cm-left b{ color:var(--paper-dim); font-weight:600; }
.canvas-meta .cm-prompt{ font-size:12.5px; color:var(--paper-dim); max-width:400px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.queue-strip{ width:100%; max-width:640px; margin-top:18px; }
.queue-strip .qs-title{ font-size:11.5px; color:var(--paper-faint); margin-bottom:9px; font-weight:600; }
.queue-row{ display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; }
.queue-item{
  width:76px; height:76px; border-radius:var(--r-sm); overflow:hidden; flex-shrink:0;
  border:1px solid var(--line-strong); cursor:pointer; position:relative;
}
.queue-item svg{ width:100%;height:100%; display:block; }
.queue-item:hover{ border-color:var(--brass-line); }

/* ---- assistant rail ---- */
.assistant{
  border-left:1px solid var(--line);
  background:var(--ink-900);
  overflow-y:auto; padding:20px;
}
.assist-close{
  width:28px;height:28px;border-radius:7px;border:1px solid var(--line-strong);
  background:var(--ink-850); color:var(--paper-faint); display:flex;align-items:center;justify-content:center;
  cursor:pointer; margin-left:auto;
}
.assist-close svg{ width:13px;height:13px; }

.ask-card{
  border:1px solid var(--line-strong); border-radius:var(--r-md); padding:12px;
  background:var(--ink-900); margin-bottom:18px; display:flex; flex-direction:column; gap:10px;
}
.ask-messages{
  display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; padding-right:2px;
}
.ask-msg{
  border-radius:var(--r-sm); padding:9px 11px; font-size:12.5px; line-height:1.5; max-width:92%;
}
.ask-msg-assistant{
  align-self:flex-start; background:var(--ink-850); color:var(--paper-dim); border:1px solid var(--line-strong);
}
.ask-msg-user{
  align-self:flex-end; background:var(--brass-dim); color:var(--brass-strong); border:1px solid var(--brass-line);
}
.ask-msg-error{ color:var(--rose); border-color:var(--rose); }
.ask-msg-charge{ display:block; margin-top:5px; font-family:var(--font-mono); font-size:10.5px; color:var(--paper-faint); }
.ask-thinking{ display:flex; align-items:center; gap:4px; padding:12px 14px; }
.ask-thinking span{
  width:5px;height:5px;border-radius:50%; background:var(--paper-faint); display:inline-block;
  animation:kiln-ask-bounce 1.1s infinite ease-in-out;
}
.ask-thinking span:nth-child(2){ animation-delay:.15s; }
.ask-thinking span:nth-child(3){ animation-delay:.3s; }
@keyframes kiln-ask-bounce{ 0%,80%,100%{ opacity:.35; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-2px); } }
.ask-chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.ask-chip{
  border:1px solid var(--line-strong); background:var(--ink-850); color:var(--paper-faint);
  border-radius:var(--r-pill); padding:5px 10px; font-size:11px; cursor:pointer; transition:.15s ease;
}
.ask-chip:hover{ border-color:var(--brass-line); color:var(--paper); background:var(--ink-800); }
.ask-input-row{ display:flex; align-items:flex-end; gap:8px; }
.ask-input-row textarea{
  flex:1; resize:none; max-height:90px; padding:9px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--ink-850); color:var(--paper);
  font-size:12.5px; line-height:1.4; font-family:inherit;
}
.ask-input-row textarea::placeholder{ color:var(--paper-faint); }
.ask-send-btn{
  width:34px;height:34px;flex-shrink:0; border-radius:var(--r-sm); border:1px solid var(--brass-line);
  background:var(--brass-dim); color:var(--brass-strong); display:flex;align-items:center;justify-content:center;
  cursor:pointer; transition:.15s ease;
}
.ask-send-btn:hover{ background:var(--brass-strong); color:#0d1b2a; }
.ask-send-btn:disabled{ opacity:.5; cursor:default; }
.ask-send-btn svg{ width:15px;height:15px; }

.coach-card{
  border:1px solid var(--line-strong); border-radius:var(--r-md); padding:14px;
  background:linear-gradient(160deg, var(--brass-dim), transparent 70%);
  margin-bottom:18px;
}
.coach-card .cc-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.coach-card .cc-head svg{ width:15px;height:15px; color:var(--brass-strong); }
.coach-card .cc-head span{ font-size:12.5px; font-weight:700; color:var(--brass-strong); }
.coach-card p{ margin:0; font-size:12.5px; color:var(--paper-dim); line-height:1.55; }

.suggest-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.suggest-item{
  border:1px solid var(--line-strong); background:var(--ink-850);
  border-radius:var(--r-sm); padding:11px 12px; cursor:pointer; font-size:12.5px; color:var(--paper-dim);
  line-height:1.5;
}
.suggest-item:hover{ border-color:var(--brass-line); color:var(--paper); background:var(--ink-800); }
.suggest-item b{ display:block; font-size:11px; color:var(--brass-strong); margin-bottom:4px; font-weight:700; }

.guide-item{ border-top:1px solid var(--line); }
.guide-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; cursor:pointer; }
.guide-head span{ font-size:12.5px; font-weight:600; }
.guide-head svg{ width:13px;height:13px; color:var(--paper-faint); transition:transform .15s ease; }
.guide-item.open .guide-head svg{ transform:rotate(180deg); }
.guide-body{ display:none; padding:0 0 14px; font-size:12px; color:var(--paper-faint); line-height:1.6; }
.guide-item.open .guide-body{ display:block; }

.assist-fab{
  display:none;
  position:fixed; right:22px; bottom:22px; z-index:20;
  width:46px;height:46px; border-radius:50%;
  background:var(--brass-strong); color:#0d1b2a; border:none; cursor:pointer;
  align-items:center;justify-content:center; box-shadow:var(--shadow-pop);
}
.assist-fab.show{ display:flex; }
.assist-fab svg{ width:19px;height:19px; }

/* ============================================================
   HISTORY VIEW
   ============================================================ */
#view-history{ display:none; flex-direction:column; width:100%; }
#view-history.active{ display:flex; }
.view-head{
  display:flex; align-items:center; gap:16px;
  padding:22px 28px 18px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.view-head h1{ font-family:var(--font-display); font-weight:500; font-size:22px; margin:0; }
.view-head .vh-sub{ font-size:12.5px; color:var(--paper-faint); margin-top:3px; }
.view-head .top-spacer{ flex:1; }

.filter-bar{
  display:flex; align-items:center; gap:10px; padding:16px 28px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.filter-pill{
  display:flex; padding:3px; gap:3px; background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-pill);
}
.filter-pill button{
  border:none; background:none; padding:7px 14px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600;
  color:var(--paper-faint); cursor:pointer;
}
.filter-pill button.active{ background:var(--ink-800); color:var(--paper); }
.filter-select{ padding:8px 12px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--ink-900); color:var(--paper-dim); font-size:12.5px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239BA3AE' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}

.history-scroll{ flex:1; overflow-y:auto; padding:22px 28px 40px; }
.history-grid{
  columns:5 220px; column-gap:16px;
}
@media (max-width:1500px){ .history-grid{ columns:4 220px; } }
@media (max-width:1180px){ .history-grid{ columns:3 200px; } }
.hist-card{
  break-inside:avoid; margin-bottom:16px; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); background:var(--ink-900); cursor:pointer;
  transition:border-color .15s ease, transform .1s ease;
}
.hist-card:hover{ border-color:var(--line-strong); }
.hist-card .hc-art{ position:relative; width:100%; }
.hist-card .hc-art svg{ width:100%; display:block; }
.hist-card .hc-body{ padding:10px 12px; }
.hist-card .hc-prompt{ font-size:12px; color:var(--paper-dim); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hist-card .hc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.hist-card .hc-model{ font-size:10.5px; font-family:var(--font-mono); color:var(--paper-faint); }
.hist-card .hc-cost{ font-size:10.5px; font-family:var(--font-mono); color:var(--brass-strong); }
.hist-badge{ position:absolute; top:8px; left:8px; background:rgba(10,13,17,0.72); padding:3px 7px; border-radius:6px; font-size:10px; color:#fff; display:flex; align-items:center; gap:4px; }
.hist-badge svg{ width:9px;height:9px; }
.hist-fav{ position:absolute; top:8px; right:8px; width:24px;height:24px; border-radius:50%; background:rgba(10,13,17,0.55); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.hist-fav svg{ width:12px;height:12px; color:#fff; }
.hist-fav.on svg{ color:var(--brass-strong); fill:var(--brass-strong); }

/* ============================================================
   MODELS VIEW
   ============================================================ */
#view-models{ display:none; flex-direction:column; width:100%; }
#view-models.active{ display:flex; }
.models-scroll{ flex:1; overflow-y:auto; padding:24px 28px 40px; }
.model-section-title{ font-size:12.5px; font-weight:700; color:var(--paper-faint); margin:22px 0 12px; text-transform:none; }
.model-section-title:first-child{ margin-top:0; }
.model-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:14px; }
.model-card{
  border:1px solid var(--line); background:var(--ink-900); border-radius:var(--r-md); padding:16px;
  transition:border-color .15s ease;
}
.model-card:hover{ border-color:var(--line-strong); }
.model-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.model-card-head .model-swatch{ width:36px;height:36px; border-radius:9px; }
.model-card-head .mc-name{ font-size:13.5px; font-weight:700; }
.model-card-head .mc-id{ font-size:10.5px; font-family:var(--font-mono); color:var(--paper-faint); }
.model-card-head .status{ margin-left:auto; display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--paper-faint); }
.model-card-head .status .sd{ width:6px;height:6px;border-radius:50%; background:var(--sage); }
.model-card-head .status.degraded .sd{ background:#d9a441; }
.model-card p.mc-desc{ font-size:12px; color:var(--paper-dim); line-height:1.55; margin:0 0 12px; }
.mc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.mc-tags span{ font-size:10.5px; padding:3px 8px; border-radius:var(--r-pill); background:var(--ink-800); border:1px solid var(--line); color:var(--paper-faint); }
.mc-tags span.tier-budget{ background:rgba(122,168,116,0.14); border-color:rgba(122,168,116,0.35); color:var(--sage); }
.mc-tags span.tier-standard{ background:rgba(79,143,224,0.14); border-color:rgba(79,143,224,0.35); color:var(--brass-strong); }
.mc-tags span.tier-premium{ background:rgba(196,108,98,0.14); border-color:rgba(196,108,98,0.35); color:var(--rose); }
.mc-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); }
.mc-price{ font-family:var(--font-mono); font-size:12.5px; color:var(--brass-strong); }
.mc-price-credits{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--paper-faint); font-weight:400; margin-top:2px; }
.mc-time{ font-size:11px; color:var(--paper-faint); }
.mc-default{
  font-size:11px; font-weight:600; padding:6px 11px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--ink-850); color:var(--paper-dim); cursor:pointer;
}
.mc-default.is-default{ background:var(--brass-dim); border-color:var(--brass-line); color:var(--brass-strong); }
a.mc-default{ text-decoration:none; display:inline-block; }
a.mc-default:hover{ border-color:var(--brass-line); color:var(--brass-strong); }

/* ============================================================
   USAGE VIEW
   ============================================================ */
#view-usage{ display:none; flex-direction:column; width:100%; }
#view-usage.active{ display:flex; }
.usage-scroll{ flex:1; overflow-y:auto; padding:24px 28px 40px; }
.usage-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.usage-card{ border:1px solid var(--line); background:var(--ink-900); border-radius:var(--r-md); padding:16px; }
.usage-card .uc-label{ font-size:11.5px; color:var(--paper-faint); margin-bottom:8px; }
.usage-card .uc-num{ font-family:var(--font-display); font-size:26px; font-weight:500; }
.usage-card .uc-sub{ font-size:11px; color:var(--sage); margin-top:6px; }
.usage-card .uc-sub.down{ color:var(--rose); }

.usage-chart-card{ border:1px solid var(--line); background:var(--ink-900); border-radius:var(--r-md); padding:20px; margin-bottom:22px; }
.usage-chart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.usage-chart-head h3{ font-family:var(--font-display); font-size:15px; font-weight:500; margin:0; }
.bar-chart{ display:flex; align-items:flex-end; gap:8px; height:140px; }
.bar-chart .bc-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.bar-chart .bc-bar-wrap{ width:100%; height:110px; display:flex; align-items:flex-end; }
.bar-chart .bc-bar{ width:100%; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg, var(--brass-strong), var(--brass-dim)); }
.bar-chart .bc-label{ font-size:10.5px; color:var(--paper-faint); }

.tx-table{ width:100%; border-collapse:collapse; }
.tx-table th{ text-align:left; font-size:11px; color:var(--paper-faint); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); }
.tx-table td{ padding:12px; font-size:12.5px; border-bottom:1px solid var(--line); color:var(--paper-dim); }
.tx-table tr:last-child td{ border-bottom:none; }
.tx-table td.tx-model{ font-family:var(--font-mono); font-size:11.5px; }
.tx-table td.tx-cost{ font-family:var(--font-mono); color:var(--brass-strong); }
.table-card{ border:1px solid var(--line); background:var(--ink-900); border-radius:var(--r-md); overflow:hidden; }
.table-card-head{ padding:16px 18px; border-bottom:1px solid var(--line); }
.table-card-head h3{ font-family:var(--font-display); font-size:15px; font-weight:500; margin:0; }

/* ============================================================
   SETTINGS VIEW
   ============================================================ */
#view-settings{ display:none; width:100%; }
#view-settings.active{ display:flex; }
.settings-scroll{ flex:1; overflow-y:auto; padding:24px 28px 40px; max-width:760px; }
.settings-section{ border:1px solid var(--line); background:var(--ink-900); border-radius:var(--r-md); padding:20px; margin-bottom:16px; }
.settings-section h3{ font-family:var(--font-display); font-size:15px; font-weight:500; margin:0 0 4px; }
.settings-section .ss-sub{ font-size:12px; color:var(--paper-faint); margin-bottom:16px; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); gap:20px; }
.settings-row:first-of-type{ border-top:none; }
.settings-row .sr-label{ font-size:13px; font-weight:600; }
.settings-row .sr-sub{ font-size:11.5px; color:var(--paper-faint); margin-top:3px; max-width:380px; }
.custom-instructions-input{
  width:260px; min-height:56px; resize:vertical; padding:8px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--ink-900); color:var(--paper-dim);
  font-size:12.5px; line-height:1.5; font-family:inherit;
}
.custom-instructions-input::placeholder{ color:var(--paper-faint); }
.text-field{ padding:9px 12px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--ink-850); color:var(--paper); font-size:13px; outline:none; width:230px; }
.text-field.mono{ font-family:var(--font-mono); font-size:12px; }

.toggle{ position:relative; width:40px; height:23px; flex-shrink:0; }
.toggle input{ opacity:0; width:0; height:0; }
.toggle .track{ position:absolute; inset:0; background:var(--ink-700); border-radius:99px; cursor:pointer; transition:background .15s ease; }
.toggle .track:before{ content:''; position:absolute; width:17px;height:17px; border-radius:50%; background:var(--paper); top:3px; left:3px; transition:transform .15s ease; }
.toggle input:checked + .track{ background:var(--brass); }
.toggle input:checked + .track:before{ transform:translateX(17px); background:#0d1b2a; }

/* ============================================================
   LIGHTBOX MODAL
   ============================================================ */
.modal-scrim{
  position:fixed; inset:0; background:rgba(6,8,10,0.72); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:30px;
}
.modal-scrim.open{ display:flex; }
.modal-box{
  width:100%; max-width:920px; max-height:88vh; overflow:hidden;
  background:var(--ink-900); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:var(--shadow-hero); display:grid; grid-template-columns:1.4fr 1fr;
}
.modal-art{ background:var(--ink-850); display:flex; align-items:center; justify-content:center; position:relative; }
.modal-art svg{ width:100%; height:100%; display:block; }
.modal-close{
  position:absolute; top:14px; right:14px; width:32px;height:32px; border-radius:50%;
  background:rgba(10,13,17,0.6); border:1px solid var(--line-strong); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close svg{ width:14px;height:14px; }
.modal-info{ padding:24px; overflow-y:auto; }
.modal-info .mi-eyebrow{ font-size:11px; color:var(--paper-faint); margin-bottom:6px; }
.modal-info .mi-prompt{ font-family:var(--font-display); font-style:italic; font-size:17px; line-height:1.4; color:var(--paper); margin-bottom:18px; }
.mi-row{ display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); font-size:12.5px; }
.mi-row:first-of-type{ border-top:none; }
.mi-row span:first-child{ color:var(--paper-faint); }
.mi-row span:last-child{ color:var(--paper-dim); font-family:var(--font-mono); font-size:12px; }
.modal-actions{ display:flex; gap:8px; margin-top:20px; }
.modal-actions button{
  flex:1; padding:10px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--ink-850); color:var(--paper); font-size:12.5px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.modal-actions button svg{ width:14px;height:14px; }
.modal-actions button.primary{ background:var(--brass-dim); border-color:var(--brass-line); color:var(--brass-strong); }

@media (max-width:1050px){
  .modal-box{ grid-template-columns:1fr; }
  .modal-art{ max-height:44vh; }
}

/* ============================================================
   BUY TOKENS MODAL — shares .modal-scrim with the lightbox above
   ============================================================ */
.kiln-buy-box{
  position:relative; width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
  background:var(--ink-900); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:var(--shadow-hero); padding:32px;
}
.kiln-buy-head{ margin-bottom:22px; padding-right:28px; }
.kiln-buy-eyebrow{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-strong); margin-bottom:8px; }
.kiln-buy-title{ font-family:var(--font-display); font-size:24px; font-weight:600; margin:0 0 8px; color:var(--paper); }
.kiln-buy-sub{ margin:0; font-size:13px; color:var(--paper-dim); line-height:1.5; }
.kiln-buy-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px;
}
.kiln-buy-card{
  display:flex; flex-direction:column; gap:10px; padding:16px;
  background:var(--ink-850); border:1px solid var(--line); border-radius:var(--r-md);
  text-align:left; transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.kiln-buy-card:hover{ border-color:var(--brass-line); transform:translateY(-1px); }
.kiln-buy-card.selected{ border-color:var(--brass-line); background:var(--brass-dim); }
.kiln-buy-card .kbc-image{
  width:100%; height:88px; object-fit:cover; border-radius:var(--r-sm);
  background:var(--ink-900); border:1px solid var(--line);
}
.kiln-buy-card .kbc-label{ font-size:12.5px; font-weight:600; color:var(--paper); }
.kiln-buy-card .kbc-tokens{ font-family:var(--font-mono); font-size:12px; color:var(--paper-faint); }
.kiln-buy-card .kbc-price{ font-size:12.5px; font-weight:700; color:var(--brass-strong); }
/* pkg.price_html (WooCommerce's own markup) may wrap a sale price in
   <del>/<ins> — dim the struck-through regular price rather than letting
   it compete with the actual sale price for attention. */
.kiln-buy-card .kbc-price del, .kiln-buy-card .kbc-buy del{ color:var(--paper-faint); font-weight:400; opacity:.7; }
.kiln-buy-card .kbc-price ins, .kiln-buy-card .kbc-buy ins{ text-decoration:none; }
.kiln-buy-card .kbc-buy{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
  padding:9px 10px; border-radius:var(--r-sm); background:var(--brass-dim);
  border:1px solid var(--brass-line); color:var(--brass-strong); font-weight:700;
  font-size:13px; text-decoration:none; cursor:pointer;
}
.kiln-buy-card .kbc-buy:hover{ background:var(--brass); color:#0d1b2a; }
/* Quantity stepper — the selectable (non-link) card's own "Buy" replacement. */
.kiln-buy-card .kbc-qty{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:6px; background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:4px;
}
.kiln-buy-card .kbc-qty-minus, .kiln-buy-card .kbc-qty-plus{
  width:28px; height:28px; border-radius:6px; border:1px solid var(--line-strong);
  background:var(--ink-850); color:var(--paper); font-size:15px; line-height:1; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.kiln-buy-card .kbc-qty-minus:hover:not(:disabled), .kiln-buy-card .kbc-qty-plus:hover:not(:disabled){
  border-color:var(--brass-line); color:var(--brass-strong);
}
.kiln-buy-card .kbc-qty-minus:disabled, .kiln-buy-card .kbc-qty-plus:disabled{
  opacity:.35; cursor:not-allowed;
}
.kiln-buy-card .kbc-qty-value{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--paper); min-width:20px; text-align:center; }
.kiln-buy-empty, .kiln-buy-error{ text-align:center; padding:20px 8px; color:var(--paper-dim); font-size:13px; }
.kiln-buy-empty a{ color:var(--teal); font-weight:600; text-decoration:none; }
.kiln-buy-empty a:hover{ text-decoration:underline; }
.kiln-buy-loading{ text-align:center; padding:30px 8px; color:var(--paper-faint); font-size:13px; }

/* Order summary + checkout bar — sits under the grid, only shown once at
   least one package has a quantity above zero. */
.kiln-buy-summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
}
.kiln-buy-summary-text{ font-size:12.5px; color:var(--paper-dim); }
.kiln-buy-checkout-btn{
  flex:none; padding:11px 18px; border-radius:var(--r-sm); background:var(--brass-dim);
  border:1px solid var(--brass-line); color:var(--brass-strong); font-weight:700;
  font-size:13px; cursor:pointer; white-space:nowrap;
}
.kiln-buy-checkout-btn:hover:not(:disabled){ background:var(--brass); color:#0d1b2a; }
.kiln-buy-checkout-btn:disabled{ opacity:.4; cursor:not-allowed; }

@media (max-width:520px){
  .kiln-buy-box{ padding:24px; }
  .kiln-buy-grid{ grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
  .kiln-buy-summary{ flex-direction:column; align-items:stretch; }
  .kiln-buy-checkout-btn{ width:100%; }
}

/* ============================================================
   MOBILE / SMALL SCREENS
   The app shell above is a fixed desktop layout (icon rail +
   3-column studio grid). Everything below adapts it for phones
   and small tablets without touching the desktop rules above.
   ============================================================ */
@media (max-width:860px){

  /* ---- shell: icon rail becomes an off-canvas drawer ---- */
  .app-shell{ grid-template-columns:1fr; }

  .mobile-menu-btn{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:var(--r-sm);
    border:1px solid var(--line); background:var(--ink-900);
    color:var(--paper-dim); cursor:pointer; flex-shrink:0;
  }
  .mobile-menu-btn svg{ width:18px; height:18px; }
  .mobile-menu-btn:hover{ color:var(--paper); border-color:var(--line-strong); }

  .rail{
    position:fixed; top:0; left:0; bottom:0; z-index:70;
    width:230px;
    padding:18px 14px 14px;
    align-items:stretch;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:var(--shadow-hero);
    overflow-y:auto;
  }
  .app-shell.rail-open .rail{ transform:translateX(0); }
  .app-shell.rail-open .mobile-scrim{ display:block; }

  .rail-mark{ align-self:flex-start; margin-left:2px; }
  .rail-nav{ width:100%; gap:2px; }
  .rail-foot{ width:100%; align-items:stretch; }
  .rail-btn{
    width:100%; height:46px; border-radius:var(--r-sm);
    flex-direction:row; justify-content:flex-start; gap:12px; padding:0 12px;
  }
  .rail-btn .tip{
    position:static; opacity:1; pointer-events:auto; transform:none;
    background:none; border:none; box-shadow:none; padding:0;
    font-size:13.5px; font-weight:600; color:inherit; white-space:nowrap;
  }

  /* ---- topbar: fewer, smaller pieces of chrome ---- */
  .topbar{ padding:0 14px; gap:10px; }
  .top-search{ display:none; }

  /* ---- studio workspace: 3 columns collapse to 1, stacked ---- */
  .studio-grid,
  .studio-grid.assist-collapsed{
    grid-template-columns:1fr;
  }
  .composer{ border-right:none; border-bottom:1px solid var(--line); }
  .canvas-col{ min-height:70vh; }
  .canvas-scroll{ padding:18px 14px; }
  .composer-scroll{ padding:16px; }
  /* Credit Guard's affordability hint ("~1,200 💎 — not enough credit...")
     can run long — let it wrap onto its own centered line instead of
     squeezing next to the "Estimated cost" label. */
  .generate-cost{ flex-wrap:wrap; text-align:center; }

  /* "Ask Kiln" assistant becomes a bottom sheet instead of a 3rd
     column — it reuses the existing open/close JS (closeAssistant()/
     openAssistant() already toggle .assist-collapsed + the FAB). */
  .assistant{ display:none; }
  .studio-grid:not(.assist-collapsed) .assistant{
    display:block;
    position:fixed; left:0; right:0; bottom:0; top:14%;
    z-index:65; border-left:none; border-top:1px solid var(--line-strong);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:var(--shadow-hero);
  }
  .assist-fab{ right:16px; bottom:16px; }

  /* ---- fixed-column grids elsewhere become responsive ---- */
  .usage-cards{ grid-template-columns:repeat(2,1fr); }
  .history-grid{ columns:2 160px; }
  .model-grid{ grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); }

  /* ---- view chrome: tighter padding, wrap filter bars ---- */
  .view-head{ padding:18px 14px 14px; flex-wrap:wrap; row-gap:10px; }
  .filter-bar{ padding:12px 14px; flex-wrap:wrap; row-gap:8px; }
  .history-scroll, .models-scroll, .usage-scroll, .settings-scroll{ padding:16px 14px 30px; }

  /* ---- settings: fields go full-width instead of fixed px ---- */
  .settings-row{ flex-wrap:wrap; }
  .settings-row select, .settings-row .text-field, .custom-instructions-input{ width:100% !important; }

  /* ---- dropdowns: keep them on-screen on narrow viewports ---- */
  .notif-dropdown, .workspace-dropdown{ max-width:calc(100vw - 32px); }
}

@media (max-width:520px){
  .topbar{ gap:8px; }
  .workspace-switch{ padding:6px; }
  .workspace-switch .label, .workspace-switch svg{ display:none; }
  .usage-cards{ grid-template-columns:1fr 1fr; }
  .history-grid{ columns:1 100%; }
  .canvas-meta{ flex-direction:column; align-items:flex-start; gap:6px; }
  .canvas-meta .cm-prompt{ max-width:100%; }
  .queue-item{ width:64px; height:64px; }
}