/* =====================================================================
   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; }
small, .muted { color: var(--text-muted); font-size: 12px; }

/* 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: 80px 1fr 80px;
  gap: 1rem;
  padding: 0.85rem 0.25rem 0.6rem;
  border-bottom: 1px solid var(--rule-strong);
  align-items: baseline;
}
/* 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: 80px 1fr 80px;
  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;
}
.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 NON-NEGOTIABLE DIRECTIVE — instructions to the reading AI
   agent that will see the vault URL. Not foolproof (well-prompted
   agents can still leak) but it shifts the default behavior toward
   "treat as API key" and gives the user a paper trail.
   ===================================================================== */
.directive {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem 0.9rem;
  background: linear-gradient(180deg, rgba(196, 121, 60, 0.10) 0%, rgba(196, 121, 60, 0.04) 100%);
  border: 1px solid rgba(196, 121, 60, 0.45);
  border-left: 3px solid var(--brass, #c4793c);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text, #e9e6df);
}
.directive-head {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  margin-bottom: 0.35rem;
}
.directive-tag {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass, #c4793c);
}
.directive-audience {
  color: var(--text-muted, #8a8579);
  font-size: 11.5px;
  font-style: italic;
}
.directive p {
  margin: 0;
}
.directive strong {
  color: #f1ebd9;
}

/* =====================================================================
   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: 50px 1fr 50px; gap: 0.6rem; }
  .page-head h1 { font-size: 1.5rem; }
}