/* =====================================================================
   SkillVault — "vault & ledger" dark theme.
   Palette: ink / parchment / steel / brass / rust / moss.
   Type:    Newsreader (display) + Inter (utility) + JetBrains Mono (data).
   No toggle. Single theme.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Surfaces */
  --ink:           #0a0a0b;
  --ink-2:         #111214;
  --parchment:     #e8e4d8;
  --steel:         #3a3d44;
  --steel-soft:    #25272c;
  --rule:          #1f2024;
  --rule-strong:   #2a2c32;

  /* Accents — semantic only */
  --brass:         #c9a86a;
  --brass-dim:     #8a7548;
  --brass-soft:    rgba(201,168,106,0.10);
  --rust:          #a85432;
  --rust-soft:     rgba(168,84,50,0.10);
  --rust-edge:     rgba(168,84,50,0.40);
  --moss:          #5a7a5e;
  --moss-soft:     rgba(90,122,94,0.12);

  /* Text */
  --text:          var(--parchment);
  --text-muted:    #8b8a83;
  --text-dim:      #5e5d57;

  --radius:        2px;       /* intentionally small; register is square */
  --radius-card:   4px;
  --sidebar-w:     232px;
  --topbar-h:      56px;
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  font-feature-settings: 'cv11', 'ss01';
}
a { color: var(--brass); text-decoration: none; }
a:hover { color: #ddc188; text-decoration: none; }
code, pre, .mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
}
pre {
  background: var(--ink-2);
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  border-radius: var(--radius-card);
  white-space: pre-wrap;
  word-break: break-all;
  border: 1px solid var(--rule-strong);
}

/* Display face for headings + stat numbers.
   Newsreader's optical-size axis means the display cuts feel right. */
.display {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.display em, em.display {
  font-style: italic;
  font-weight: 500;
}

h1, h2, h3, h4 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
h1 { font-size: 1.65rem; font-weight: 500; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; }
h3.copyable-h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
}
small, .muted { color: var(--text-muted); font-size: 12px; }

/* Eye-icon toggle button next to a copyable-h3. Hides/shows
 * any .secret span inside the parent .vault-card. Click is handled
 * in dashboard.ts; this is just the chrome. */
.eye-btn {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  margin-left: auto;
}
.eye-btn:hover { color: var(--text); border-color: var(--rule-strong); }

/* The token-bearing segment inside an MCP/cURL block. Default
 * state is "visible" (unmasked). When the BLOCK itself (the
 * <div class="vault-url"> or <pre class="vault-url"> wrapping the
 * token) has the .secrets-masked class, every .secret span inside
 * it collapses to a solid block of bullets so the token is visually
 * hidden. The underlying text is still in the DOM so the Copy
 * button reads the real token.
 *
 * The previous selector was `.vault-card.secrets-masked .secret`,
 * which assumed the masked class lived on the parent .vault-card.
 * After the per-block redesign (commit 99bde0b), each block carries
 * its own .secrets-masked class — that old selector matched
 * nothing. This commit makes the selector match where the class
 * actually lives.
 */
.vault-card .secret {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.05em;
}
.secrets-masked .secret {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: transparent;
  background: var(--ink-3, #555);
  border-radius: 2px;
  user-select: none;
  -webkit-user-select: none;
}
/* When masked, prevent text selection on the whole pre block so
 * the user can't accidentally highlight "Bearer <bullets>" and
 * paste it. (The Copy button still works because it reads
 * textContent from the DOM, which has the real token.) */
.secrets-masked pre.vault-url {
  user-select: none;
  -webkit-user-select: none;
}

/* Small caps + tabular numerics for the stamp / meter values */
.stamp {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.stamp .v {
  color: var(--parchment);
  font-weight: 500;
}

/* ---------- App layout: sidebar + topbar + main ---------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}

.sidebar {
  grid-area: sidebar;
  background: var(--ink);
  border-right: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Brand: hairline-bordered brass monogram, like a printed seal */
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--rule-strong);
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--parchment);
}
.brand-seal {
  width: 30px; height: 30px;
  border: 1px solid var(--brass);
  border-radius: 1px;
  display: grid; place-items: center;
  position: relative;
  background: transparent;
}
/* The seal has a small inner hairline, like a stamped wax seal */
.brand-seal::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--brass-dim);
  border-radius: 1px;
  pointer-events: none;
}
.brand-seal span {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  color: var(--brass);
  letter-spacing: 0;
}

.nav { padding: 0.85rem 0.5rem; flex: 1; }
.nav-group { margin-bottom: 0.5rem; }
.nav-group-label {
  padding: 0.5rem 0.9rem 0.35rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  font-weight: 500;
}
.nav a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.9rem;
  margin: 0.05rem 0;
  border-radius: var(--radius-card);
  color: var(--text-muted);
  font-weight: 400;
  font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.nav a:hover {
  background: transparent;
  color: var(--parchment);
  text-decoration: none;
}
/* Active: just a brass left border, no fill. Restrained. */
.nav a.active {
  background: transparent;
  color: var(--parchment);
  border-left-color: var(--brass);
}
.nav svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; }

.sidebar-foot {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--rule-strong);
  display: flex; align-items: center; gap: 0.6rem;
}
/* User avatar: hairline circle, italic initial in brass */
.avatar {
  width: 30px; height: 30px;
  border: 1px solid var(--steel);
  border-radius: 50%;
  background: transparent;
  color: var(--brass);
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.who { font-size: 11.5px; line-height: 1.35; min-width: 0; }
.who .email {
  color: var(--parchment); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who .uname { color: var(--text-dim); font-size: 11px; }

/* Topbar — minimal: brand mark + signout. No search (was decorative). */
.topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  position: sticky; top: 0; z-index: 10;
}
.topbar .page-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--parchment);
  letter-spacing: -0.005em;
}
.topbar .spacer { flex: 1; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-card);
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.icon-btn:hover { color: var(--parchment); border-color: var(--steel); }
.icon-btn svg { width: 16px; height: 16px; }

/* Main */
.main {
  grid-area: main;
  padding: 2rem 2rem 3rem;
  overflow-x: hidden;
  max-width: 1080px;
}
.main-narrow { max-width: 720px; margin: 0 auto; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.page-head h1 {
  margin: 0 0 0.15rem;
  font-size: 1.85rem;
  font-weight: 500;
}
.page-head .lede {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 60ch;
  line-height: 1.5;
}
.page-head .eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.4rem;
  font-weight: 500;
}

/* =====================================================================
   THE REGISTER — skills as ledger entries, not table rows
   ===================================================================== */

.register {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.register-head {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 1rem;
  padding: 0.85rem 0.25rem 0.6rem;
  border-bottom: 1px solid var(--rule-strong);
  align-items: baseline;
}
.register-head.no-idx,
.entry.no-idx {
  grid-template-columns: 1fr auto;
}
/* Without min-width: 0 on grid items, a long inline content
   (e.g. a 20-char secret name like 'openrouter_api_key' or
   'rapidapi_amazon_key') forces the column to grow past its
   declared width, shoving the next column off the row and
   visually overlapping the fingerprint text. Force every
   grid child to be at most its track width. */
.register-head > * { min-width: 0; }
.register-head .col {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  font-weight: 500;
}
.register-head .col:last-child { text-align: right; }

.register-empty {
  padding: 2rem 0.25rem;
  color: var(--text-muted);
  font-style: italic;
  font-family: 'Newsreader', Georgia, serif;
}

.entry {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  position: relative;
  transition: padding 0.15s;
}
/* Same fix as the .register-head. The 80px column for the key
   name has to actually be 80px regardless of how long the
   secret name is. overflow-wrap: anywhere lets the name break
   onto a new line if it really is too long. */
.entry > * { min-width: 0; }
.entry code {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.entry:last-child { border-bottom: 0; }
.entry:hover {
  padding-left: 0.6rem;        /* subtle brass tick indent on hover */
}
.entry:hover::before {
  content: '';
  position: absolute;
  left: 0; top: 1.1rem; bottom: 1.1rem;
  width: 2px;
  background: var(--brass);
}
.entry .idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--brass);
  padding-top: 0.15rem;
  font-weight: 500;
}
.entry .name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  color: var(--parchment);
  line-height: 1.2;
}
.entry .name code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  background: transparent;
  padding: 0;
  color: var(--parchment);
  letter-spacing: 0;
  font-variant-caps: normal;
}
.entry .desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.entry .ver {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 0.2rem;
}
.entry .ver .v-num { color: var(--parchment); }

/* =====================================================================
   THE VAULT CARD — sealed, masked, distinct from a form
   ===================================================================== */

.vault-card {
  background: var(--ink-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.5rem;
  position: relative;
}
.vault-card .seal-mark {
  position: absolute;
  top: -10px; right: 1.4rem;
  background: var(--ink);
  padding: 0 0.5rem;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--brass);
  letter-spacing: 0.04em;
}
.vault-card h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.vault-card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.vault-card .vault-url {
  background: #000;
  border: 1px solid var(--rule-strong);
  padding: 0.85rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--parchment);
  border-radius: var(--radius-card);
  margin: 0.6rem 0 0.85rem;
  word-break: break-all;
  line-height: 1.5;
}
.vault-card .vault-url .masked {
  color: var(--brass-dim);
  letter-spacing: 0.15em;
}
.vault-card .vault-url .reveal {
  background: transparent;
  border: 0;
  color: var(--brass);
  font: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: 0.4rem;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* =====================================================================
   THE ACTION CARD — forms, change-tier, etc.
   ===================================================================== */

.action-card {
  background: var(--ink-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.5rem;
}
.action-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.action-card .lede {
  color: var(--text-muted);
  font-size: 13.5px;
  margin: 0 0 1rem;
}

/* =====================================================================
   BUTTONS — restrained, no gradients
   ===================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--steel);
  background: transparent;
  color: var(--parchment);
  cursor: pointer;
  font: inherit; font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
}
.btn:hover { background: var(--steel-soft); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn.primary {
  background: var(--brass);
  border-color: var(--brass);
  color: #1a1408;
  font-weight: 600;
}
.btn.primary:hover { background: #d6b577; border-color: #d6b577; color: #1a1408; }

.btn.danger {
  background: transparent;
  border-color: var(--rust-edge);
  color: #d68a6b;
}
.btn.danger:hover {
  background: var(--rust-soft);
  border-color: var(--rust);
  color: #e5a07f;
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn.ghost:hover { color: var(--parchment); }

.btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* Smaller button variant for inline actions (e.g. per-row Delete).
   Matches the .btn base, with reduced padding so it doesn't break
   the grid alignment of the skill entry's right column. */
.btn.small {
  padding: 0.32rem 0.7rem;
  font-size: 12px;
  border-radius: var(--radius-pill, 999px);
}

/* =====================================================================
   FLASH MESSAGES (one-shot banners above content)
   ===================================================================== */

.flash {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--moss);
  background: var(--moss-soft);
  color: var(--moss);
  font-size: 14px;
}
.flash code {
  background: rgba(0,0,0,0.25);
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 12px;
}
.flash-err { border-color: var(--rust); color: #e5a07f; background: var(--rust-soft); }

/* =====================================================================
   SKILL ENTRY — inline Delete form (overview page)
   ===================================================================== */

/* Stacks the version number + Delete button vertically inside the
   right grid column. The form is a normal HTML <form method="post">
   so it works without JS; we add a confirm prompt via inline JS
   (data-confirm attribute) to prevent accidental deletes. */
.entry-delete {
  display: block;
  margin-top: 0.45rem;
}
.entry-delete .btn {
  width: 100%;
  box-sizing: border-box;
}

/* =====================================================================
   FORMS
   ===================================================================== */

label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0.85rem 0 0.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-card);
  color: var(--parchment);
  font: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brass-dim);
  box-shadow: 0 0 0 3px rgba(201,168,106,0.10);
}
textarea { font-family: 'JetBrains Mono', monospace; min-height: 12rem; resize: vertical; }

/* =====================================================================
   METERS — single horizontal bar, value to the right
   (No more 4-up KPI grid.)
   ===================================================================== */

.meter-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.meter-row:last-child { border-bottom: 0; }
.meter-row .label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 500;
}
.meter-row .value {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--parchment);
  text-align: right;
  white-space: nowrap;
}
.meter-row .value .unit {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  margin-left: 0.15rem;
}
.meter-bar {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--rule-strong);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 0.35rem;
}
.meter-bar > div {
  height: 100%;
  background: var(--brass);
  transition: width 0.3s ease;
}
.meter-bar.muted > div { background: var(--steel); }
.meter-bar.danger > div { background: var(--rust); }
.meter-row .sub {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 0.25rem;
  font-style: italic;
  font-family: 'Newsreader', Georgia, serif;
}

/* =====================================================================
   TIER BADGE — display serif, no icon, no colored square
   ===================================================================== */

.tier-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
}
.tier-badge .tier {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1;
}
.tier-badge.tier-free  .tier { color: var(--text-muted); }
.tier-badge.tier-pro   .tier { color: var(--moss); }
.tier-badge.tier-power .tier { color: var(--brass); }
.tier-badge .tier-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}
.tier-badge .status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.tier-badge.tier-power .status-dot { background: var(--brass); }
.tier-badge.tier-pro   .status-dot { background: var(--moss); }
.tier-badge.tier-free  .status-dot { background: var(--text-dim); }

/* =====================================================================
   STAMP — small caps date/value, like a printed docket entry
   ===================================================================== */

.stamp-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stamp-block .stamp-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.stamp-block .stamp-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--parchment);
  letter-spacing: 0.04em;
}

/* =====================================================================
   WARNING / SEALED — for the rotate-token page, destructive flows
   ===================================================================== */

.sealed {
  background: var(--rust-soft);
  border: 1px solid var(--rust-edge);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.4rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.sealed .seal-glyph {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--rust);
  line-height: 1;
  padding-top: 0.1rem;
}
.sealed .seal-body { color: var(--parchment); }
.sealed .seal-body strong {
  font-weight: 600;
  color: #e5a07f;
  display: block;
  margin-bottom: 0.3rem;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 1rem;
}
.sealed .seal-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.notice {
  display: flex; gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--brass);
  background: var(--ink-2);
  border-radius: var(--radius-card);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.notice strong { color: var(--parchment); font-weight: 500; }

/* Status box (billing change-tier inline JS) */
.status-box {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-card);
  font-size: 13.5px;
  line-height: 1.55;
  border: 1px solid var(--rule-strong);
}
.status-box.pending { background: var(--ink-2); border-left: 2px solid var(--brass); color: var(--text); }
.status-box.success { background: var(--moss-soft); border-left: 2px solid var(--moss); color: var(--parchment); }
.status-box.error   { background: var(--rust-soft); border-left: 2px solid var(--rust); color: #e5a07f; }
.status-box .spinner {
  display: inline-block; width: 11px; height: 11px;
  border: 1.5px solid var(--brass); border-right-color: transparent;
  border-radius: 50%; animation: sv-spin 0.7s linear infinite;
  vertical-align: -1px; margin-right: 0.5rem;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   AUTH PAGES — split layout: dark form, ink hero
   ===================================================================== */

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
}
.auth-hero {
  background: var(--ink);
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2.5rem 3rem;
  color: var(--parchment);
  border-right: 1px solid var(--rule-strong);
}
.auth-hero .brand { border: 0; padding: 0; }
.auth-hero .quote {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.35;
  color: var(--parchment);
  max-width: 380px;
  letter-spacing: -0.005em;
}
.auth-hero .quote::before {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--brass);
  margin-bottom: 1.25rem;
}
.auth-hero .quote .accent { color: var(--brass); font-style: italic; }
.auth-hero .hero-foot {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.auth-form-wrap {
  display: grid; place-items: center;
  padding: 2.5rem;
}
.auth-form { width: 100%; max-width: 360px; }
.auth-form .eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.6rem;
  font-weight: 500;
}
.auth-form h1 {
  font-size: 1.85rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
}
.auth-form .lede {
  color: var(--text-muted);
  margin-bottom: 1.75rem;
  font-size: 14px;
}
.auth-form label {
  margin-top: 1.1rem;
  margin-bottom: 0.35rem;
}
.auth-form .form-row { margin-bottom: 0.4rem; }
.auth-form .btn {
  width: 100%;
  padding: 0.7rem 1rem;
  margin-top: 1.4rem;
}
.auth-form .alt {
  text-align: center; margin-top: 1.5rem;
  color: var(--text-muted); font-size: 13px;
}
.auth-form .alt a { color: var(--parchment); border-bottom: 1px solid var(--steel); }
.auth-form .alt a:hover { border-color: var(--brass); }
.auth-form .forgot {
  display: block; text-align: right; margin-top: 0.6rem;
  font-size: 12px;
}
.auth-error {
  background: var(--rust-soft);
  border: 1px solid var(--rust-edge);
  border-left: 2px solid var(--rust);
  color: #e5a07f;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-card);
  margin-bottom: 1.25rem;
  font-size: 13px;
}
.auth-form small.hint {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
  margin: 0.3rem 0 0;
  font-style: italic;
}

@media (max-width: 800px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
}

/* ---------- Mobile: collapse sidebar ---------- */
@media (max-width: 720px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) auto 1fr;
    grid-template-areas: "topbar" "sidebar" "main";
  }
  .sidebar {
    position: static; height: auto;
    flex-direction: row; align-items: center;
    overflow-x: auto;
    padding: 0.4rem;
  }
  .brand { border: 0; padding: 0 0.6rem; flex-shrink: 0; }
  .nav { display: flex; flex-direction: row; padding: 0; }
  .nav-group { display: flex; margin: 0; }
  .nav-group-label { display: none; }
  .nav a { padding: 0.45rem 0.65rem; }
  .sidebar-foot { display: none; }
  .topbar { padding: 0 0.85rem; }
  .topbar .page-title { display: none; }
  .main { padding: 1.25rem 1rem 2rem; }
  .register-head, .entry { grid-template-columns: 40px 1fr auto; gap: 0.6rem; }
  .register-head.no-idx, .entry.no-idx { grid-template-columns: 1fr auto; }
  .page-head h1 { font-size: 1.5rem; }
}