/* Dashboard styles.
 *
 * The palette, the type and the surface treatment are lifted from
 * daidocs.com's theme.css and core.css on purpose. Somebody who signs up on the
 * marketing site and lands here should not feel handed off to a different
 * company: the ground is the same near-black, the accent is the same green, and
 * the type is the same pair of faces.
 *
 * Not a copy of those files. The site is a marketing bundle with aurora
 * gradients, hover lifts and a grid backdrop; a dashboard is a place people
 * work, so the ornament is dialled down and the density is up. What is shared
 * is the vocabulary, not the decoration.
 *
 * Every rule lives here rather than in the markup, because the CSP on this
 * origin forbids inline styles as well as inline scripts — the same rule that
 * makes an injected <script> inert.
 */

/* ---------------- type ---------------- */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(/assets/fonts/space-grotesk-latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/assets/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-display: swap; font-weight: 400;
  src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-display: swap; font-weight: 500;
  src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-display: swap; font-weight: 600;
  src: url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');
}

/* ---------------- tokens ---------------- */

:root {
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, Menlo, monospace;

  --bg: #070908;
  --surface-solid: #0a0d0b;
  /* The card face: a top-lit gradient over the near-black ground. Used as a
     background wherever a surface lifts off the page (.card, .stat, .enq). */
  --glass: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006));
  --glass-hi: rgba(255,255,255,0.04);
  --code-panel: #0a0d0b;
  --header-bg: rgba(7, 9, 8, 0.85);

  --text: #e8ecea;
  --text-hi: #f2f7f3;
  --text-2: #c9d2cd;
  --muted: #8b938f;
  --dim: #6b7570;

  --accent: #34d399;
  --accent-soft: #7fe3bd;
  --accent2: #7fe3bd;
  --accent2-b: rgba(127, 227, 189, 0.4);
  --accent-ink: #04140d;
  --accent-b: rgba(52, 211, 153, 0.3);
  --accent-bg: rgba(52, 211, 153, 0.09);
  --link: #7fe3bd;

  --warn: #d3a24a;
  --warn-b: rgba(211, 162, 74, 0.4);
  --warn-bg: rgba(211, 162, 74, 0.09);
  --bad: #f2777a;
  --bad-b: rgba(242, 119, 122, 0.4);
  --bad-bg: rgba(242, 119, 122, 0.09);

  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-2: rgba(255, 255, 255, 0.14);
  --grid-line: rgba(255, 255, 255, 0.02);
  --radius: 14px;
  --glow-sm: 0 0 10px rgba(52, 211, 153, 0.4);
  --glow-md: 0 0 16px rgba(52, 211, 153, 0.32);
}

* { box-sizing: border-box; }

/* The hidden attribute must win. The UA rule [hidden]{display:none} has the same
 * weight as any class selector, so a component that sets its own `display`
 * (`.banner`, the sidebar, a toggled field) would otherwise override it and stay
 * visible when the JS has set `hidden`. Everything here toggles visibility with
 * the hidden attribute, so it is made authoritative once, here. */
[hidden] { display: none !important; }

/* The layout: a fixed sidebar and the rest. When signed out (auth-mode) the
   split-screen auth page takes the whole viewport instead. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}
body.auth-mode { display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); }

.wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 22px; }

.skip { position: absolute; left: -9999px; background: var(--surface-solid); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; }

/* ---------------- chrome ---------------- */

/* The sidebar. Sticky, full height, its own darker gradient and a hairline edge. */
.sidebar {
  position: sticky; top: 0; height: 100vh; align-self: start;
  display: flex; flex-direction: column; gap: 3px; padding: 22px 14px;
  border-right: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, #0a0d0b, #080a09);
  overflow-y: auto; scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.side-brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 20px; }
.side-brand:hover .brand-name { color: var(--text-hi); }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  display: block; object-fit: contain; flex: 0 0 auto;
}
.brand-name { font: 700 17px var(--display); letter-spacing: -0.01em; color: var(--text-hi); }
.brand-dim { color: var(--dim); font-weight: 500; }

.side-label {
  font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: #565f5a; padding: 2px 10px 8px;
}

.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px;
  color: var(--text-2); font: 500 14px var(--sans);
}
.side-nav a svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }
.side-nav a:hover { background: rgba(255,255,255,0.03); color: var(--text-hi); }
.side-nav a:hover svg { color: var(--text-2); }
.side-nav a.on { background: var(--accent-bg); color: var(--accent); }
.side-nav a.on svg { color: var(--accent); }

.side-spacer { flex: 1 1 auto; min-height: 16px; }

.side-user {
  border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 12px;
  background: rgba(255,255,255,0.02);
}
.su-row { display: flex; align-items: center; gap: 9px; }
.su-avatar {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #1f9e73);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink); font: 600 12px var(--display); text-transform: uppercase;
}
.su-meta { min-width: 0; }
.su-name { font: 600 13px var(--sans); color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-plan { font: 500 11px var(--mono); color: var(--dim); }
.side-upgrade {
  display: block; text-align: center; margin-top: 11px; padding: 8px; border-radius: 9px;
  border: 1px solid var(--accent-b); background: var(--accent-bg);
  color: var(--accent-soft); font: 600 12px var(--sans);
}
.side-upgrade:hover { background: rgba(52,211,153,0.14); color: var(--accent-soft); }

/* The content column: a sticky header, then the page, then the footer. */
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 13px 34px; border-bottom: 1px solid rgba(255,255,255,0.06);
  background: var(--header-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.email-pill {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--hairline); border-radius: 999px; min-width: 0;
}
.email-pill .dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.who {
  font: 500 12px var(--mono); color: #9aa39e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw;
}

.content { flex: 1; padding: 34px; max-width: 1080px; width: 100%; }

.banner {
  background: var(--warn-bg); color: var(--warn);
  border-bottom: 1px solid var(--warn-b); padding: 11px 34px; font-size: 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.foot { border-top: 1px solid var(--hairline); padding: 22px 34px; color: var(--muted); font-size: 13px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text-hi); }
.sep { margin: 0 9px; opacity: 0.45; }

/* On a narrow screen the sidebar becomes a top strip and the nav scrolls. */
@media (max-width: 820px) {
  body { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 8px 14px; padding: 12px 16px;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .side-brand { padding: 0; }
  .side-label, .side-spacer, .side-user { display: none; }
  .side-nav {
    flex-direction: row; flex-basis: 100%; gap: 4px; order: 3;
    overflow-x: auto; scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav a { flex: 0 0 auto; padding: 7px 10px; }
  .side-nav a span { white-space: nowrap; }
  .app-header, .banner, .foot, .content { padding-left: 20px; padding-right: 20px; }
}

/* ---------------- type ---------------- */

h1 { font-family: var(--display); font-size: 30px; margin: 0 0 6px; letter-spacing: -0.02em; color: var(--text-hi); font-weight: 600; }
h2 { font-family: var(--display); font-size: 16px; margin: 0 0 4px; color: var(--text-hi); font-weight: 600; letter-spacing: -0.01em; }
.lede { color: var(--muted); margin: 0 0 26px; font-size: 15px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
code, .mono { font-family: var(--mono); font-size: 13px; }

/* The site's uppercase mono section label, in --accent2. */
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent2); margin-bottom: 10px;
}

/* ---------------- surfaces ---------------- */

.card {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}
/* No hover lift. The site uses one to make cards feel clickable; here they are
   containers you read, and things that move when the pointer passes are a
   distraction in a place people work. */
.card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.card-head .muted { margin: 0; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 18px; }

/* Billing sub-tabs (Billing / Upgrades / Invoices). A quiet segmented control:
   the active tab is underlined in the accent, the rest are muted. */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin: 4px 0 20px; }
.subtab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font: 600 14px var(--sans); padding: 10px 14px; cursor: pointer;
  margin-bottom: -1px;
}
.subtab:hover { color: var(--text-hi); }
.subtab.on { color: var(--text-hi); border-bottom-color: var(--accent); }

/* Top-up amount picker. */
.topup-presets { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.topup-presets .btn { min-width: 76px; justify-content: center; }
.topup-custom { display: flex; flex-direction: column; gap: 12px; }

/* Invoices / payment history rows. */
.invoice-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 12px 2px; border-bottom: 1px solid var(--hairline);
}
.invoice-row:last-child { border-bottom: none; }
.invoice-amt { font-weight: 600; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.link { color: var(--accent); }

.stat {
  background: var(--glass); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.stat .k {
  color: var(--dim); font-size: 10px; order: -1;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em;
}
.stat .v { font: 600 26px var(--display); letter-spacing: -0.02em; color: var(--text-hi); }
/* The one number worth drawing the eye to. */
.stat.good .v { color: var(--accent); }

/* ---------------- forms ---------------- */

.auth { max-width: 410px; margin: 8vh auto; }

.fld { display: block; margin-bottom: 15px; }
.fld span { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text-2); }

input[type=text], input[type=email], input[type=password], input[type=search], input[type=number] {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 14px;
  background: var(--code-panel); color: var(--text-hi);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
}
input::placeholder { color: var(--muted); }
/* No spinner arrows on number fields: they clash with the dark theme and the
   amount is validated anyway. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:focus {
  outline: none; border-color: var(--accent-b);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }

.btn {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; border-radius: 10px; padding: 11px 20px;
  transition: filter .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; }

.btn.ghost {
  background: rgba(255,255,255,0.03); color: var(--text-hi);
  border-color: var(--hairline-2);
}
.btn.ghost:hover { background: rgba(255,255,255,0.07); color: var(--text-hi); filter: none; }

.btn.small { padding: 8px 14px; font-size: 13px; }

.btn.danger {
  background: rgba(242,119,122,0.06); color: #f0a3a3;
  border-color: var(--bad-b);
}
.btn.danger:hover { background: rgba(242,119,122,0.12); color: #f0a3a3; filter: none; }

.row { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; }
.row-end { margin-left: auto; }

.note { padding: 11px 14px; border-radius: 9px; font-size: 14px; margin: 0 0 15px; border: 1px solid transparent; }
.note.err { background: var(--bad-bg); border-color: var(--bad-b); color: var(--bad); }
.note.ok { background: var(--accent-bg); border-color: var(--accent-b); color: var(--accent); }

/* ---------------- lists ---------------- */

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--hairline); flex-wrap: wrap;
}
.list li:first-child { border-top: none; padding-top: 0; }
.list .t { font-weight: 600; color: var(--text-hi); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.list .s { color: var(--muted); font-size: 12.5px; font-family: var(--mono); margin-top: 3px; }

.tag {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--hairline); color: var(--muted);
}
.tag.now { color: var(--accent); border-color: var(--accent-b); background: var(--accent-bg); }

/* An API key, shown once. Monospace and selectable, in the site's code panel
   treatment so it reads as something to copy rather than something to read. */
.reveal {
  background: var(--code-panel); border: 1px solid var(--accent-b);
  border-radius: 9px; padding: 14px; margin: 12px 0 0;
  font-family: var(--mono); font-size: 13px;
  word-break: break-all; color: var(--accent); user-select: all;
}

.danger-zone { border-color: var(--bad-b); }

@media (max-width: 620px) {
  .who { max-width: 52vw; }
  h1 { font-size: 25px; }
  .content { padding: 24px 16px 60px; }
}

/* The site writes the wordmark as "daidocs.com" with the suffix dimmed. */
.brand-dim { color: var(--muted); font-weight: 500; }

/* ---------------- studio ---------------- */

.drop {
  border: 1.5px dashed var(--hairline-2); border-radius: 12px;
  padding: 30px 20px; text-align: center; cursor: pointer;
  background: var(--code-panel); transition: border-color .18s ease, background .18s ease;
}
.drop:hover, .drop:focus { border-color: var(--accent-b); outline: none; }
.drop.over { border-color: var(--accent); background: var(--accent-bg); }
.drop-inner strong { color: var(--text-hi); display: block; margin-bottom: 5px; }

.or { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0; text-transform: uppercase; letter-spacing: .12em; }

.paste {
  width: 100%; min-height: 120px; resize: vertical; font: inherit;
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
  background: var(--code-panel); color: var(--text-hi);
  border: 1px solid var(--hairline); border-radius: 9px; padding: 12px 13px;
}
.paste:focus { outline: none; border-color: var(--accent-b); box-shadow: 0 0 0 3px var(--accent-bg); }

.byok { margin-top: 16px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.byok summary { cursor: pointer; color: var(--text-2); font-size: 14px; }
.byok summary:hover { color: var(--text-hi); }

.sel {
  font: inherit; font-size: 14px; padding: 9px 11px;
  background: var(--code-panel); color: var(--text-hi);
  border: 1px solid var(--hairline); border-radius: 9px;
}
.sel:focus { outline: none; border-color: var(--accent-b); }
.sel.budget { max-width: 140px; }

/* The studio's live readout: tokens, pages, characters and size against the
 * plan's caps, plus the same layout reused for a finished conversion's numbers.
 * Scoped under .stats so it does not touch the admin overview's .stat blocks. */
.stats {
  display: grid; gap: 10px; margin: 14px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.stats .stat {
  background: var(--glass); border: 1px solid var(--hairline);
  border-radius: 11px; padding: 11px 13px; display: flex;
  flex-direction: column; gap: 3px;
}
.stats .stat-l {
  color: var(--muted); font-size: 10px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .1em;
}
.stats .stat-n { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.stats .stat-v { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-hi); }
.stats .stat-c { font-size: 11px; color: var(--muted); font-family: var(--mono); }
/* Over the plan's cap: the reason a conversion is blocked, made visible. */
.stats .stat.over { background: var(--bad-bg); border-color: var(--bad-b); }
.stats .stat.over .stat-v, .stats .stat.over .stat-c { color: var(--bad); }
/* The headline numbers of a finished conversion. */
.stats .stat.hi .stat-v { color: var(--accent); }

.byok-budget { margin-top: 12px; }
.byok-budget .fld span { font-size: 13px; color: var(--text-2); }
.est { margin-top: 10px; color: var(--text-2); }
.note.warn { background: var(--warn-bg); border-color: var(--warn-b); color: var(--warn); }

/* ---------------- support & notifications ---------------- */

.bell { position: relative; color: var(--text-2); font-size: 17px; line-height: 1; text-decoration: none; }
.bell:hover { color: var(--text-hi); }
.bell-dot {
  position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  background: var(--accent); border-radius: 50%; box-shadow: var(--glow-sm);
}

.thread { display: flex; flex-direction: column; gap: 14px; }
.msg { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hairline); }
.msg-user { background: var(--code-panel); }
.msg-admin { background: var(--accent-bg); border-color: var(--accent-b); }
.msg .s { margin-bottom: 6px; }
.msg-body { white-space: pre-wrap; color: var(--text); }

textarea.paste { min-height: 90px; }

/* ---------------- split-screen auth ---------------- */

body.auth-mode .sidebar,
body.auth-mode .app-header,
body.auth-mode .banner,
body.auth-mode .foot { display: none; }
body.auth-mode .app-main { display: block; }
body.auth-mode .content { padding: 0; max-width: none; }

.auth-split {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
}

.auth-left { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.auth-form { width: 100%; max-width: 380px; }
.auth-brand {
  display: inline-block; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-hi); font-size: 17px; margin-bottom: 34px;
}
.auth-brand:hover { color: var(--text-hi); }
.auth-form h1 { font-size: 27px; margin: 0 0 6px; }

/* The right panel: the website, in miniature. */
.auth-right {
  position: relative; overflow: hidden;
  border-left: 1px solid var(--hairline);
  background:
    radial-gradient(60% 50% at 80% 10%, var(--accent-glow, rgba(74,222,135,0.14)), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(56,189,248,0.12), transparent 70%),
    var(--surface-solid);
  display: flex; align-items: center; padding: 56px;
}
/* The site's faint grid, over the panel. */
.auth-right::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 80%);
          mask-image: radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 80%);
}
.auth-right-inner { position: relative; max-width: 460px; }

.eyebrow-badge {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; color: var(--text-2);
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 7px 12px; margin-bottom: 26px; background: var(--code-panel);
}
.brand-head {
  font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800;
  margin: 0 0 20px; color: var(--text-hi); white-space: pre-line;
}
.brand-head .grad {
  background: linear-gradient(100deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-copy { color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.model-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.model-chip {
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 13px;
  background: var(--code-panel);
}
.model-chip::before { content: "● "; color: var(--accent); font-size: 9px; }
.brand-foot { color: var(--muted); font-size: 13.5px; margin: 0; }
.brand-foot a { color: var(--accent); }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-right { display: none; }
}

/* ---------------- enquiries ---------------- */
/* A pipeline, not a table. Each row opens in place, because the job is to read
   one message and decide what happens to it, and a modal would put the list
   behind the thing you are trying to act on. */
.enq-list { display: grid; gap: 8px; margin-top: 14px; }
.enq { border: 1px solid var(--hairline); border-radius: 11px; background: var(--glass); overflow: hidden; }
.enq-head {
  display: grid; grid-template-columns: 130px 1fr auto auto; gap: 12px; align-items: center;
  width: 100%; padding: 12px 14px; cursor: pointer; text-align: left;
  background: none; border: 0; color: inherit; font: inherit;
}
.enq-head:hover { background: var(--glass-hi); }
.enq-when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.enq-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enq-detail { padding: 0 14px 14px; border-top: 1px solid var(--hairline); display: grid; gap: 12px; }
/* pre-wrap: the message arrives as the sender typed it, and their paragraphs
   are part of what they said. */
.enq-msg { white-space: pre-wrap; padding-top: 12px; line-height: 1.6; }
.enq-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; font-size: 13px; }
.enq-meta .kv { display: flex; gap: 8px; }
.enq-meta .k { color: var(--muted); min-width: 92px; }
.enq-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pill {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hairline-2); color: var(--text-2);
}
/* New is the only one that should catch the eye: it is the only one that is
   somebody waiting for a reply. */
.pill.s-new { color: var(--accent); border-color: var(--accent-b); background: var(--accent-bg); }
.pill.s-replied { color: var(--accent2); border-color: var(--accent2-b); }
.pill.s-spam, .pill.s-archived { opacity: .55; }
.pill.k-investor { color: var(--accent2); }
.sel, .ta {
  background: var(--code-panel); color: var(--text); border: 1px solid var(--hairline);
  border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 14px;
}
.ta { width: 100%; resize: vertical; line-height: 1.5; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.row-end { display: flex; align-items: flex-end; gap: 9px; margin-top: 12px; }
.row-end .fld { flex: 1; margin: 0; }
@media (max-width: 700px) {
  .enq-head { grid-template-columns: 1fr auto; }
  .enq-when { display: none; }
}

/* The single converted file (the .dai store as a zip) shown after a conversion —
   its name and a download button, not the folder inside it. */
.file-out {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--glass); border: 1px solid var(--hairline); border-radius: 11px;
}
.file-out .t { color: var(--text-hi); font-size: 14px; }

/* ---------------- conversion activity log ---------------- */
/* A live, scrolling log of what the engine is doing during a conversion. Full
   detail (per model call, token counts) on a bring-your-own-key run; the basic
   lifecycle steps on a free one. */
.convert-log { margin-top: 12px; }
.log-list {
  list-style: none; margin: 0; padding: 10px 12px;
  background: var(--code-panel); border: 1px solid var(--hairline);
  border-radius: 11px; max-height: 220px; overflow-y: auto;
  font-family: var(--mono); font-size: 12px;
}
.log-line {
  display: flex; gap: 8px; align-items: baseline;
  padding: 3px 0; color: var(--text-2); line-height: 1.5;
}
.log-line + .log-line { border-top: 1px solid rgba(255,255,255,0.03); }
.log-line::before { content: '›'; color: var(--accent); flex: none; }
.log-line.detail { color: var(--muted); }
.log-line.detail::before { content: '·'; color: var(--dim); }
.log-msg { flex: 1; }
.log-meta { color: var(--dim); font-size: 11px; white-space: nowrap; }

/* ---------------- studio: choose how a conversion runs ---------------- */
.method { margin: 4px 0 6px; }
.method-head { margin-bottom: 10px; }
.method-head strong { font-size: 14px; color: var(--text-hi); }
.seg-group {
  display: inline-flex; padding: 3px; gap: 3px; margin-bottom: 12px;
  background: var(--code-panel); border: 1px solid var(--hairline); border-radius: 11px;
}
.seg {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  color: var(--text-2); font: 500 13px var(--sans);
  padding: 7px 16px; border-radius: 8px; transition: background .12s, color .12s;
}
.seg:hover { color: var(--text-hi); }
.seg.active { background: var(--accent); color: #04120b; }
.method-panel { margin-top: 2px; }
.method-panel[hidden] { display: none; }
.convert-hint { margin: 8px 0 0; color: var(--accent-soft); }

/* ---------------- studio: conversion status + log ---------------- */
.convert-status { margin-top: 14px; }
.log-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  font: 500 13px var(--sans); color: var(--text-2);
}
.log-head .spin {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.log-head .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.log-head .dot.ok { background: var(--accent); }
.log-head .dot.err { background: #ef6f6f; }

/* ---------------- billing: plan cards, even and pinned ---------------- */
.plan-card { display: flex; flex-direction: column; margin-bottom: 0; }
.plan-card > p { margin: 12px 0 0; }
.plan-card .stat { padding: 16px; }
.plan-card .plan-soon { color: var(--dim); font-size: 12px; }
.plan-card .btn { margin-top: auto; align-self: flex-start; }
/* the space above a pinned button never collapses to nothing */
.plan-card > p:last-of-type { margin-bottom: 16px; }