/* Production admin shell: one design system, not a collection of page styles.
   Everything on every screen is built from the primitives below — ui-card,
   ui-settings-row, ui-modal, ui-btn, ui-input, ui-badge, ui-switch — so the
   screens read as one product. Deep-sea slate, amber only where a decision is. */

/* ---- Design tokens ---- */
:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #e8eef4;
  background: #080e14;

  /* Ground → surface → raised: a step in tone separates planes, never a drawn box. */
  --bg: #080e14;
  --canvas: #0c141d;
  --surface: #111a24;
  --surface-deep: #0e1821;
  --raised: #1b2731;
  --field: rgba(8, 14, 21, 0.68);

  /* One hairline family: panel edges, row dividers, field slots. */
  --line: rgba(230, 236, 242, 0.085);
  --line-strong: rgba(230, 236, 242, 0.14);
  --line-hover: rgba(230, 236, 242, 0.24);
  --gloss: rgba(255, 255, 255, 0.045);

  --accent: #e4b27b;
  --accent-hover: #f0c796;
  --accent-deep: #dfaa73;
  --accent-ink: #1b1207;
  --accent-ink-deep: #140e08;
  --accent-ring: rgba(223, 170, 115, 0.14);

  --text: #e8eef4;
  --muted: #a6b4c0;
  --faint: #8695a2;
  --negative: #e8a9a9;
  --positive: #a9d3b8;

  /* Geometry: one radius for panels, one for controls, one for pills. */
  --radius-card: 12px;
  --radius-ui: 8px;
  --radius-chip: 999px;

  /* Controls: 38px standard, 32px compact row action. */
  --control-h: 38px;
  --control-h-compact: 32px;

  --sidebar-width: 236px;
  /* The single page axis: every screen shares it; the writer widens it. */
  --shell-max: 1040px;
  --shell-gutter: clamp(20px, 3.2vw, 48px);

  /* Physical curves: expoOut lands everything; overshoot only for toggles, markers. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --serif: "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
/* Auth gate: the logged-out document renders only #login-panel; logged in, only the workspace. */
html[data-auth="false"] .sidebar,
html[data-auth="false"] .main,
html[data-auth="true"] .login-stage { display: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border-radius: var(--radius-ui); border: 1px solid transparent; background: transparent; min-height: var(--control-h); transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 140ms var(--ease-out); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; color: var(--muted); border-color: var(--line); background: var(--raised); }
a { color: var(--accent); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
small { font-size: 12px; color: var(--muted); letter-spacing: 0; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { font-family: inherit; font-weight: 600; line-height: 1.45; }
h1 { font-size: 22px; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 17px; margin: 0; }
h3 { font-size: 14px; margin: 0 0 12px; color: var(--text); font-weight: 600; }
svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.app-shell { display: flex; min-height: 100dvh; }

/* ---- Sidebar: brand, six flat items, one compact footer row ---- */
.sidebar {
  width: var(--sidebar-width); flex: none; padding: 22px 14px 14px; position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(130% 42% at 46% 100%, rgba(228, 178, 123, 0.07), transparent 70%),
    radial-gradient(100% 26% at 0% 0%, rgba(196, 156, 116, 0.05), transparent 72%),
    #070c11;
  /* A single tuned edge separates the rail from the canvas; no separate border rule. */
  box-shadow: inset -1px 0 0 rgba(230, 236, 242, 0.035);
}
/* The brand is the public site's own lockup, pixel for pixel: a 32×34 hairline
   seal around 千, then the 17px sans title over the 12px subtitle. No plate,
   no fill, no glow — the same quiet mark on login and on the rail. */
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; min-height: 40px; }
.mark {
  display: grid; place-items: center; width: 32px; height: 34px; flex: none;
  border: 1px solid rgba(223, 170, 115, 0.32); border-radius: 4px; background: transparent; box-shadow: none;
  font: 21px/1 Georgia, "Noto Serif SC", serif; color: #dfaa73;
}
.brand-copy { display: grid; gap: 1px; min-width: 0; }
.brand-copy strong, .brand strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; color: #e8eef4; }
.brand-copy small, .brand small { display: block; margin-top: 0; font-size: 12px; letter-spacing: .02em; line-height: 1.5; color: #9aaab8; }
.nav-toggle { display: none; }
.sidebar-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Writing is one entry in the navigation, not a plate above it: the rail keeps
   a single visual weight, and the amber only marks where the reader IS. */
.sidebar nav { overflow-y: auto; margin-top: 22px; display: grid; gap: 2px; }
.nav { position: relative; width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; color: var(--muted); border: 0; background: transparent; padding: 0 11px; min-height: 38px; border-radius: var(--radius-ui); font-size: 14px; font-weight: 400; transition: color 200ms var(--ease), background 260ms var(--ease), transform 260ms var(--ease-expo); }
.nav::before { content: ""; position: absolute; left: 2px; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 2px; background: var(--accent); opacity: 0; transform: scaleY(0); transform-origin: center; transition: transform 260ms var(--ease-overshoot), opacity 200ms var(--ease); }
.nav svg { width: 17px; height: 17px; color: var(--faint); transition: color 200ms var(--ease), transform 260ms var(--ease-expo); }
.nav:hover { color: var(--text); background: rgba(230, 236, 242, 0.045); }
.nav:hover svg { color: var(--text); transform: translate(1px, -1px); }
.nav.active { background: rgba(228, 178, 123, 0.07); color: var(--text); font-weight: 500; }
.nav.active::before { opacity: 1; transform: scaleY(1); }
.nav.active svg { color: var(--accent); }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--radius-chip); background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; animation: badge-pop 280ms var(--ease-overshoot) both; }
@keyframes badge-pop { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: none; } }
.sidebar-bottom { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.sidebar-bottom a, .sidebar-bottom button { display: flex; align-items: center; gap: 9px; text-decoration: none; min-height: var(--control-h-compact); padding: 0 11px; color: var(--muted); background: none; border: 0; border-radius: var(--radius-ui); text-align: left; font-size: 13px; transition: background 200ms var(--ease), color 200ms var(--ease); }
.sidebar-bottom a:hover, .sidebar-bottom button:hover { color: var(--text); background: rgba(230, 236, 242, 0.045); }
.sidebar-bottom svg { width: 14px; height: 14px; color: var(--faint); }
.account-line { display: flex; align-items: center; gap: 7px; min-height: 26px; padding: 4px 11px 0; color: var(--faint); font-size: 12px; }
.account-line #current-admin-name { color: var(--faint); overflow-wrap: anywhere; }
.account-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); flex: none; box-shadow: 0 0 0 3px rgba(169, 211, 184, 0.1); }

/* ---- Main canvas: one page axis for the header AND every view below it ---- */
.main {
  flex: 1; min-width: 0; padding: 0 var(--shell-gutter) 56px;
  background: radial-gradient(1100px 520px at 16% -6%, rgba(223, 170, 115, 0.065), transparent 68%), radial-gradient(900px 420px at 100% 0%, rgba(120, 160, 196, 0.035), transparent 70%), var(--canvas);
  box-shadow: inset 1px 1px 0 rgba(230, 236, 242, 0.06);
  transition: padding-top 240ms var(--ease-expo);
}
/* The ONLY width constraint in the shell. .topbar and #dashboard are both its
   children with no width of their own, so the title's left edge and the list's
   left edge are the same x by construction, never by matching numbers. */
.studio-shell-inner { width: 100%; max-width: var(--shell-max); margin: 0 auto; }
.app-shell[data-chrome="focus"] .studio-shell-inner { max-width: 1360px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 0 20px; }
.topbar-heading { display: grid; gap: 4px; min-width: 0; }
.topbar h1 { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--text); }
.topbar .page-meta { margin: 0; max-width: 58ch; color: var(--faint); font-size: 13px; font-weight: 400; line-height: 1.6; }
.topbar .page-meta:empty { display: none; }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* Refresh lives in the top-right as one quiet capsule: icon + word, never wraps, never loses its icon. */
.ghost-refresh {
  display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  min-height: var(--control-h); padding: 0 14px 0 12px; border-radius: var(--radius-chip); font-size: 13px; color: var(--muted);
  border: 1px solid var(--line-strong); background: rgba(230, 236, 242, 0.02);
  transition: color 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease-expo);
}
.ghost-refresh svg { width: 15px; height: 15px; color: var(--faint); transition: color 200ms var(--ease), transform 300ms var(--ease-expo); }
.ghost-refresh:hover:not(:disabled) { color: var(--text); border-color: var(--line-hover); background: rgba(230, 236, 242, 0.055); transform: translateY(-1px); }
.ghost-refresh:hover:not(:disabled) svg { color: var(--accent); }
.ghost-refresh:active:not(:disabled) { transform: scale(0.97); }
.ghost-refresh.compact { min-height: var(--control-h-compact); padding: 0 11px 0 9px; font-size: 12px; }
.ghost-refresh.compact svg { width: 14px; height: 14px; }
.ghost-refresh:disabled { color: var(--muted); opacity: 1; transform: none; }
/* Writing mode: the editor owns the screen; the shell header steps aside, the rail stays on duty. */
.app-shell[data-chrome="focus"] .topbar { display: none; }
@media (min-width: 1025px) {
  .app-shell[data-chrome="focus"] .main { padding-top: 14px; }
  .app-shell[data-chrome="focus"] .sidebar .brand-copy small { opacity: .6; }
}
.panel { min-width: 0; background: var(--surface); border-radius: var(--radius-card); padding: 22px; margin-bottom: 16px; }
.panel-heading { display: grid; gap: 4px; }
.panel-heading p { margin: 0; font-size: 13px; }

/* ================================================================
   UI PRIMITIVES — the only building blocks any screen may use.
   ================================================================ */

/* ui-btn: 38px standard, one fill for the primary action, quiet borders for the rest. */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--control-h); padding: 0 15px; border-radius: var(--radius-ui);
  font-size: 13px; font-weight: 500; white-space: nowrap; line-height: 1;
  border: 1px solid transparent; color: var(--text); background: transparent;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease-expo);
}
.ui-btn:active:not(:disabled) { transform: scale(0.97); }
.ui-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ui-btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.ui-btn-secondary { border-color: var(--line-strong); background: rgba(230, 236, 242, 0.025); color: var(--text); }
.ui-btn-secondary:hover:not(:disabled) { border-color: var(--line-hover); background: rgba(230, 236, 242, 0.06); }
.ui-btn-ghost { color: var(--muted); }
.ui-btn-ghost:hover:not(:disabled) { color: var(--text); background: rgba(230, 236, 242, 0.055); }
.ui-btn.danger { color: rgba(232, 169, 169, 0.78); }
.ui-btn.danger:hover:not(:disabled) { color: var(--negative); background: rgba(232, 169, 169, 0.08); border-color: rgba(232, 169, 169, 0.28); }
.ui-btn-compact { min-height: var(--control-h-compact); padding: 0 11px; font-size: 12.5px; }
.ui-btn:disabled { transform: none; }

/* ui-input: a carved well, one focus ring of the accent. */
/* An icon inside a field is a decoration, not a glyph: the shell's 18px svg
   rule must not decide its size (it would sit over the placeholder). */
.search-field > svg { position: absolute; left: 11px; top: 50%; margin-top: -7.5px; width: 15px; height: 15px; pointer-events: none; }

.ui-input,
input:not(:is([type="checkbox"], [type="radio"], [type="file"], [type="hidden"])),
select, textarea {
  width: 100%; min-width: 0; padding: 8px 12px; border: 1px solid var(--line-strong);
  background: var(--field); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32);
  color: var(--text); border-radius: var(--radius-ui); margin-top: 7px; outline: 0;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 260ms var(--ease-expo);
}
input:not(:is([type="checkbox"], [type="radio"], [type="file"], [type="hidden"])), select { min-height: var(--control-h); }
textarea { resize: vertical; line-height: 1.7; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--line-hover); }
input:focus, select:focus, textarea:focus { border-color: rgba(228, 178, 123, 0.72); box-shadow: 0 0 0 3px var(--accent-ring), inset 0 1px 2px rgba(0, 0, 0, 0.2); }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background: var(--raised); opacity: 1; box-shadow: none; }
/* The placeholder clears the icon: a field that carries a decoration inside it
   owns its own left inset, and this rule outranks the shared input well. */
.tools-right .search-field > input[type="search"] { padding-left: 34px; }
/* A labelled field: label on its own line, help text in the quiet tone. */
.ui-field { display: block; min-width: 0; color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.5; }
.ui-field > input, .ui-field > select, .ui-field > textarea { margin-top: 7px; }
.ui-field-lite { display: none; }
.ui-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ui-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* ui-sub-group: a quiet named band inside one card — no disclosure, no box.
   A hairline above and a small caps label is the whole chrome. */
.ui-sub-group { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.ui-sub-heading { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.5; }
.ui-sub-group .media-field { margin: 0; }

/* ui-badge: a small state word, never a filled candy pill. */
.ui-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  min-height: 22px; padding: 0 9px; border-radius: var(--radius-chip);
  border: 1px solid var(--line-strong); background: rgba(230, 236, 242, 0.03);
  color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.ui-badge-tone-accent { border-color: rgba(223, 170, 115, 0.28); background: rgba(223, 170, 115, 0.08); color: var(--accent); }
.ui-badge-tone-ok { border-color: rgba(169, 211, 184, 0.26); background: rgba(169, 211, 184, 0.07); color: var(--positive); }

/* ui-card: one slate plate every panel shares — 12px, hairline, top gloss. */
.ui-card {
  min-width: 0; border-radius: var(--radius-card); border: 1px solid var(--line);
  background: var(--surface); box-shadow: inset 0 1px 0 var(--gloss);
  overflow: hidden;
}
.ui-card-body { display: grid; gap: 18px; padding: 20px 22px 22px; }
.ui-card-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 13px 22px; border-top: 1px solid var(--line); background: rgba(8, 14, 21, 0.34);
}
.ui-card-foot .field-help { margin: 0 auto 0 0; }

/* ui-settings-row: label column 260px, one ui-card on the right. Every setting
   screen uses this and only this. */
/* The first row starts level with its card, not 4px below it: the label and
   the first field share one top line, the way a real settings sheet reads. */
.ui-settings-row {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start;
  padding: 24px 0;
}
.ui-settings-row + .ui-settings-row { border-top: 1px solid var(--line); }
.ui-settings-row:first-child { padding-top: 0; }
.ui-settings-label { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ui-settings-label h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--text); }
.ui-settings-label p { margin: 0; color: var(--faint); font-size: 13px; font-weight: 400; line-height: 1.7; }
.ui-settings-label .ui-btn { justify-self: start; margin-top: 4px; }
.ui-settings-note { color: rgba(134, 149, 162, 0.82) !important; font-size: 12px !important; }

/* ui-switch / fold: compact disclosures inside a card. */
.ui-fold { border-top: 1px solid var(--line); padding-top: 14px; }
.ui-fold > summary { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; color: var(--muted); font-size: 13px; font-weight: 500; transition: color 200ms var(--ease); }
.ui-fold > summary::-webkit-details-marker { display: none; }
.ui-fold > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 280ms var(--ease-overshoot); }
.ui-fold[open] > summary::before { transform: rotate(45deg); }
.ui-fold > summary:hover, .ui-fold[open] > summary { color: var(--text); }
.ui-fold-body { display: grid; gap: 16px; margin-top: 14px; animation: fold-open 260ms var(--ease-expo) both; }
@keyframes fold-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ui-modal: a native <dialog>; it holds no layout until showModal(). */
.ui-modal {
  width: min(560px, calc(100vw - 32px)); max-height: min(88dvh, 900px); padding: 0; border: 0;
  background: transparent; color: var(--text); overflow: visible;
}
.ui-modal.ui-modal-lg { width: min(880px, calc(100vw - 32px)); }
.ui-modal::backdrop { background: rgba(4, 8, 12, 0.66); backdrop-filter: blur(6px); }
.ui-modal[open] { animation: modal-land 280ms var(--ease-expo) both; }
.ui-modal[open]::backdrop { animation: veil-in 220ms var(--ease-expo) both; }
@keyframes modal-land { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
/* Everything visual belongs to the inner sheet: the dialog box itself must stay
   transparent for ::backdrop to paint the veil at the right stacking level. */
.ui-modal-inner {
  display: flex; flex-direction: column; width: 100%; max-height: min(88dvh, 900px);
  border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface-deep);
  box-shadow: 0 30px 80px rgba(3, 8, 14, 0.62), inset 0 1px 0 var(--gloss);
  overflow: hidden;
}
.ui-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 16px 22px; border-bottom: 1px solid var(--line); background: rgba(17, 26, 36, 0.6); }
.ui-modal-head h2 { font-size: 17px; font-weight: 600; line-height: 1.4; }
.ui-modal-head p { margin: 3px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.6; max-width: 46ch; }
.ui-modal-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ui-modal-close { display: inline-grid; place-items: center; width: var(--control-h); min-height: var(--control-h); padding: 0; border-radius: var(--radius-ui); color: var(--faint); flex: none; }
.ui-modal-close:hover { color: var(--text); background: rgba(230, 236, 242, 0.07); }
.ui-modal-close svg { width: 17px; height: 17px; }
.ui-modal-body { display: grid; gap: 16px; padding: 20px 22px; overflow-y: auto; min-height: 0; }
.ui-modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px 14px 22px; border-top: 1px solid var(--line); background: rgba(8, 14, 21, 0.4); }

/* ---- Views: title settles, body lands; lists cascade in reading order ---- */
.view { animation: view-in 360ms var(--ease-expo) both; }
.view-articles, .view-columns, .view-settings, .view-comments { min-width: 0; }
.view-settings .fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view.is-entering { animation: view-in 360ms var(--ease-expo) both; }
.view.is-entering .topbar-heading { animation: heading-rise 420ms var(--ease-expo) both; }
@keyframes heading-rise { from { opacity: 0.4; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.view.is-entering .article-entry,
.view.is-entering .comment-item { animation: row-in 380ms var(--ease-expo) both; }
.view.is-entering .column-card { animation: row-in 380ms var(--ease-expo) both; }
.view.is-entering .ui-settings-row,
.view.is-entering .ui-card { animation: row-in 380ms var(--ease-expo) both; }
.view.is-entering :is(.article-entry, .comment-item, .column-card, .ui-settings-row):nth-child(1) { animation-delay: 0ms; }
.view.is-entering :is(.article-entry, .comment-item, .column-card, .ui-settings-row):nth-child(2) { animation-delay: 35ms; }
.view.is-entering :is(.article-entry, .comment-item, .column-card, .ui-settings-row):nth-child(3) { animation-delay: 70ms; }
.view.is-entering :is(.article-entry, .comment-item, .column-card, .ui-settings-row):nth-child(4) { animation-delay: 105ms; }
.view.is-entering :is(.article-entry, .comment-item, .column-card, .ui-settings-row):nth-child(5) { animation-delay: 140ms; }
.view.is-entering :is(.article-entry, .comment-item, .column-card, .ui-settings-row):nth-child(6) { animation-delay: 175ms; }
.view.is-entering :is(.article-entry, .comment-item, .column-card, .ui-settings-row):nth-child(7) { animation-delay: 210ms; }
.view.is-entering :is(.article-entry, .comment-item, .column-card, .ui-settings-row):nth-child(8) { animation-delay: 245ms; }
.view.is-entering :is(.article-entry, .comment-item, .column-card, .ui-settings-row):nth-child(n+9) { animation-delay: 280ms; }
.view.is-entering .metrics-row,
.view.is-entering .inbox-bar,
.view.is-entering .list-head,
.view.is-entering .editor-toolbar { animation: row-in 340ms var(--ease-expo) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* A fresh login settles the workspace instead of snapping it into place. */
html[data-auth="true"] .sidebar { animation: rail-settle 520ms var(--ease-expo) both; }
/* The settle belongs to the LOGIN, not to every load: `.is-booting` is dropped
   the moment the boot auth check answers, so a returning session renders immediately. */
html[data-auth="true"]:not(.is-booting) .main { animation: canvas-settle 420ms var(--ease-expo) both; }
@keyframes rail-settle { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes canvas-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Auth gate: the gate owns the whole viewport; the workspace is not rendered behind it ---- */
html[data-auth="false"] .app-shell { display: block; }
.login-stage { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: clamp(20px, 4vh, 44px) clamp(16px, 4vw, 40px); background: radial-gradient(120% 90% at 18% 8%, #16232e 0%, #0c131a 58%, #080e14 100%); }
/* A single two-column card: illustration · form. Nothing is nested inside it. */
.login-gate { position: relative; width: min(880px, 100%); min-width: 0; min-height: 510px; display: grid; grid-template-columns: 1.08fr 1fr; overflow: hidden; border-radius: 18px; border: 1px solid rgba(230, 236, 242, 0.13); background: #0e1720; box-shadow: 0 28px 72px rgba(3, 8, 14, 0.62); animation: gate-rise 460ms var(--ease-expo) both; }
@keyframes gate-rise { from { opacity: 0; transform: translateY(10px) scale(0.995); } to { opacity: 1; transform: none; } }
.login-visual { position: relative; overflow: hidden; min-height: 100%; background: #101a23; border-radius: 17px 0 0 17px; }
.login-cover-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 36% center; transform-origin: 46% 48%; animation: loginCoverZoom 20s ease-in-out infinite alternate; will-change: transform; }
@keyframes loginCoverZoom {
  from { transform: scale(1.01) translate3d(0, 0, 0); }
  to { transform: scale(1.095) translate3d(-1.4%, -0.8%, 0); }
}
.login-visual::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(9, 15, 21, 0) 82%, rgba(14, 23, 32, 0.62) 100%),
  linear-gradient(0deg, rgba(8, 13, 18, 0.82) 0%, rgba(8, 13, 18, 0.26) 24%, rgba(8, 13, 18, 0) 50%); pointer-events: none; }
.login-visual-brand { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; display: flex; align-items: center; gap: 11px; color: #eef3f7; }
/* Same seal as the top bar of the public site; on the photograph it keeps only
   a whisper of shading so the hairline and 千 stay legible over highlights. */
.login-seal {
  display: grid; place-items: center; width: 32px; height: 34px; flex: none;
  border: 1px solid rgba(223, 170, 115, 0.32); border-radius: 4px;
  font: 21px/1 Georgia, "Noto Serif SC", serif; color: #dfaa73;
  background: transparent; box-shadow: none;
}
.login-brand-text { display: grid; gap: 1px; min-width: 0; text-shadow: 0 1px 10px rgba(5, 9, 13, 0.7); }
.login-brand-text strong { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; color: #e8eef4; }
.login-brand-text small { font-size: 12px; letter-spacing: .02em; line-height: 1.5; color: #9aaab8; }
.login-pane { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, #111b24 0%, #0e1720 100%); padding: clamp(28px, 4vw, 44px) clamp(26px, 3.8vw, 42px); }
.gate-heading { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: 0; }
.gate-sub { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.gate-form { display: grid; gap: 14px; margin-top: 26px; }
.gate-form label { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0; }
.gate-form label + input, .gate-form label + .secret-field { margin-top: -6px; }
.gate-form input, .gate-submit { border-radius: 10px; }
.gate-form input { min-height: 42px; margin-top: 0; }
.setup-fields { display: grid; gap: 14px; }
.setup-fields label { font-size: 13px; font-weight: 500; color: var(--muted); }
.secret-field { position: relative; }
.secret-field input { padding-right: 46px; }
.secret-toggle { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); display: grid; place-items: center; width: 38px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--faint); }
.secret-toggle:hover { color: var(--text); }
.secret-toggle[aria-pressed="true"] { color: var(--accent); }
.secret-toggle svg { width: 18px; height: 18px; }
.gate-status { margin: 2px 0 0; min-height: 0; color: var(--negative); font-size: 13px; line-height: 1.65; font-weight: 400; }
.gate-status:empty { display: none; }
.gate-submit { width: 100%; min-height: 42px; margin-top: 2px; padding: 9px 16px; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.gate-submit:hover:not(:disabled) { background: var(--accent-hover); }
.gate-submit:active:not(:disabled) { transform: scale(0.985); }
.gate-submit:disabled { background: var(--raised); color: var(--muted); border-color: var(--line); }
.gate-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; }
.gate-foot:not(:has(.login-help:not([hidden]))) { justify-content: flex-end; }
.login-help { min-width: 0; color: var(--muted); }
.login-help summary { list-style: none; cursor: pointer; color: var(--faint); font-size: 12px; }
.login-help summary::-webkit-details-marker { display: none; }
.login-help summary::after { content: " ＋"; color: var(--faint); }
.login-help[open] summary::after { content: " －"; }
.login-help summary:hover { color: var(--text); }
.login-help p { margin: 8px 0 0; max-width: 30em; }
.gate-back { flex: none; color: var(--faint); font-size: 12px; text-decoration: none; white-space: nowrap; }
.gate-back:hover { color: var(--text); }
@media (max-width: 760px) {
  .login-gate { grid-template-columns: minmax(0, 1fr); grid-template-rows: 188px auto; min-height: 0; }
  .login-visual { min-height: 188px; height: 188px; border-radius: 17px 17px 0 0; }
  .login-cover-img { object-position: 12% center; transform-origin: 38% 42%; }
  .login-visual::after { background:
    linear-gradient(180deg, rgba(8, 13, 18, 0.62) 0%, rgba(8, 13, 18, 0.18) 38%, rgba(8, 13, 18, 0) 56%),
    linear-gradient(0deg, rgba(17, 27, 36, 0.55) 0%, rgba(8, 13, 18, 0) 26%); }
  .login-visual-brand { left: 18px; right: 18px; top: 14px; bottom: auto; gap: 9px; }
  .login-pane { padding: 28px 22px 24px; }
  .gate-heading { font-size: 21px; }
  .gate-form { margin-top: 18px; }
  .gate-foot { margin-top: 18px; }
}

/* ---- Column gallery: two up, each card a plate with its own cover ---- */
.column-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.column-card {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: inset 0 1px 0 var(--gloss);
  overflow: hidden;
  transition: border-color 240ms var(--ease), background 240ms var(--ease), transform 260ms var(--ease-expo);
}
.column-card:hover { border-color: var(--line-hover); background: rgba(19, 29, 39, 0.92); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--gloss), 0 14px 30px rgba(3, 8, 14, 0.28); }
.column-card-media { position: relative; aspect-ratio: 16 / 5; overflow: hidden; background: var(--surface-deep); border-bottom: 1px solid var(--line); }
.column-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No cover: the deep-sea geometric wash, drawn in CSS from the subject's palette. */
.column-card-media[data-cover="none"] { background:
  radial-gradient(120% 130% at 12% 0%, rgba(223, 170, 115, 0.16), transparent 58%),
  repeating-linear-gradient(135deg, rgba(230, 236, 242, 0.045) 0 1px, transparent 1px 13px),
  linear-gradient(160deg, #16222e 0%, #0e1721 100%); }
/* A quiet paired line and ring: the wash needs a little architecture, not a
   large glyph leaking past the band next to the title. */
.column-card-media[data-cover="none"]::after { content: ""; position: absolute; right: 18px; top: 18px; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(223, 170, 115, 0.2); box-shadow: inset 0 0 0 12px rgba(223, 170, 115, 0.035); }
.column-card-count { position: absolute; left: 12px; top: 12px; }
/* The cover's own action rides on the picture: a frosted capsule in the top
   right, exactly where the eye already goes for "this is an image". It stays
   quiet until the card is hovered or focused, so four cards do not shout. */
.column-cover-btn {
  position: absolute; right: 10px; top: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 12px; border-radius: var(--radius-chip);
  border: 1px solid rgba(230, 236, 242, 0.2);
  background: rgba(10, 17, 24, 0.52);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #eef4f9; font-size: 12.5px; font-weight: 500; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 16px rgba(3, 8, 14, 0.24);
  opacity: 0; transform: translateY(-2px);
  transition: opacity 200ms var(--ease), transform 240ms var(--ease-expo), background 200ms var(--ease), border-color 200ms var(--ease);
}
.column-card:hover .column-cover-btn,
.column-card:focus-within .column-cover-btn,
.column-cover-btn:focus-visible { opacity: 1; transform: none; }
.column-cover-btn:hover { background: rgba(16, 26, 36, 0.78); border-color: rgba(230, 236, 242, 0.34); }
.column-cover-btn:disabled { opacity: 0.6; transform: none; }
@media (hover: none) {
  .column-cover-btn { opacity: 1; transform: none; }
}
/* A narrow card still fits 编辑 · 前台查看 · 换封面 · 移除封面 · 删除 on one
   line without spilling past the card's own right edge. */
@media (max-width: 1180px) {
  .column-card-foot { flex-wrap: wrap; row-gap: 2px; }
  .column-card-foot .toolbar-spacer { flex: 1 1 0; }
}
.column-card-body { display: grid; gap: 6px; padding: 14px 16px 12px; flex: 1; min-width: 0; }
.column-card-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.column-card-title { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.column-card-meta { margin: 0; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.column-card-desc { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.column-card-desc.is-empty { color: rgba(134, 149, 162, 0.72); }
.column-card-foot { display: flex; align-items: center; gap: 4px; margin-top: auto; padding: 9px 12px 9px 16px; border-top: 1px solid var(--line); background: rgba(8, 14, 21, 0.28); }
.column-card-foot .ui-btn { white-space: nowrap; }
.column-card-foot .ui-btn-compact { padding: 0 10px; }
.column-card-foot a { text-decoration: none; }
.column-card-foot .toolbar-spacer { flex: 1; }

/* ---- Cover preview cards on 外观: two real 16:9 plates ---- */
.cover-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cover-card { display: grid; gap: 10px; min-width: 0; }
.cover-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-ui); overflow: hidden; background: var(--surface-deep); border: 1px solid var(--line); }
.cover-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-frame[data-source="custom"] { border-color: rgba(223, 170, 115, 0.28); }
.cover-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cover-title { font-size: 13px; font-weight: 500; color: var(--text); }
.cover-meta .ui-badge { margin-left: auto; }
.cover-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cover-actions .ui-btn { min-height: var(--control-h-compact); padding: 0 11px; font-size: 12.5px; }
/* The media previews stay in the DOM as the single source of truth for the id;
   the visible 16:9 frame is what the reader sees. */
.cover-card .media-preview, .avatar-line .media-preview { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- Avatar line on 账号 ---- */
.avatar-line { display: flex; align-items: center; gap: 16px; min-width: 0; position: relative; }
.avatar-frame { width: 64px; height: 64px; flex: none; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-deep); }
.avatar-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-actions { display: grid; gap: 6px; min-width: 0; }
.avatar-actions .field-help { margin: 0; }

/* ---- Forms: shared helpers ---- */
.account-identity { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--field); border-radius: var(--radius-ui); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28); color: var(--muted); font-size: 13px; border: 1px solid var(--line); }
.account-identity strong { margin-left: auto; color: var(--text); font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.account-status { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.account-status:empty { display: none; }
.account-status.is-error { color: var(--negative); }
.account-status.is-ok { color: var(--positive); }
.muted, .hint { color: var(--muted); font-size: 14px; line-height: 1.7; }
.field-help { display: block; margin-top: 6px; color: var(--faint); font-size: 12px; font-weight: 400; line-height: 1.6; }
.stack, .fields { display: grid; gap: 18px; }
.fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
label { display: block; min-width: 0; color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.5; }
button.primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); padding: 8px 16px; font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
button.primary:active:not(:disabled) { transform: scale(0.97); }
.outline { border: 1px solid var(--line-strong); background: transparent; color: var(--text); padding: 7px 13px; }
.outline:hover:not(:disabled) { background: var(--raised); border-color: var(--line-hover); }
.subtle { color: var(--muted); border: 1px solid transparent; background: transparent; font-size: 13px; padding: 6px 10px; }
.subtle:hover:not(:disabled) { color: var(--text); background: rgba(230, 236, 242, 0.055); }
.icon-button { display: inline-grid; place-items: center; width: 32px; min-height: 32px; padding: 0; border: 1px solid transparent; background: transparent; color: var(--faint); border-radius: var(--radius-ui); }
.icon-button:hover:not(:disabled) { color: var(--text); background: rgba(230, 236, 242, 0.055); }
.icon-button svg { width: 16px; height: 16px; }
.danger { color: var(--negative); }
.outline.danger { border-color: rgba(232, 169, 169, 0.28); }
.danger:hover:not(:disabled) { color: #ffd0cf; background: rgba(232, 169, 169, 0.08); border-color: rgba(232, 169, 169, 0.42); }
.inline { display: flex; min-width: 0; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline input, .inline select { min-width: 150px; flex: 1; margin: 0; }
.inline button { flex: none; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }
.form-save { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding-top: 2px; }
.form-save .field-help { margin: 0 auto 0 0; }
.media-field .media-preview { margin-top: 10px; }
.media-preview { margin: 8px 0 0; max-width: 100%; overflow: hidden; }
.media-preview:empty { display: none !important; margin: 0 !important; padding: 0 !important; }
.media-preview img, .media-preview video { max-width: 100%; max-height: 200px; border-radius: var(--radius-ui); display: block; }

/* ---- Media library inside its dialog: thumb, type + #id, three actions ---- */
.media-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.media-library-card {
  min-width: 0; display: grid; gap: 9px; padding: 9px;
  border: 1px solid var(--line); border-radius: var(--radius-ui);
  background: rgba(8, 14, 21, 0.5);
  transition: border-color 240ms var(--ease), background 240ms var(--ease), transform 240ms var(--ease-expo);
}
.media-library-card:hover { border-color: var(--line-hover); background: rgba(14, 24, 33, 0.9); transform: translateY(-1px); }
.media-library-card img, .media-library-card video { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: 6px; display: block; background: var(--surface-deep); }
.media-library-card small { overflow-wrap: anywhere; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.media-library-card .inline { gap: 4px; }
.media-library-card button { font-size: 12px; min-height: var(--control-h-compact); padding: 0 9px; }
.media-library-card .ui-btn.danger { border-color: rgba(232, 169, 169, 0.24); color: rgba(232, 169, 169, 0.86); }
.media-library-card .ui-btn.danger:hover:not(:disabled) { color: var(--negative); background: rgba(232, 169, 169, 0.1); border-color: rgba(232, 169, 169, 0.42); }
.media-library > .muted, .media-library > .empty-state { grid-column: 1 / -1; margin: 0; padding: 18px 2px; }

/* ---- Rows: a warm marker instead of a bare rule ---- */
.table-list { display: grid; }
.table-row, .comment-item { border-top: 1px solid var(--line); padding: 14px 0; overflow-wrap: anywhere; min-width: 0; }
.table-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.table-row p, .comment-item p { margin: 4px 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; }
.table-row:last-child, .comment-item:last-child { padding-bottom: 0; }
.comment-item p { color: var(--text); line-height: 1.75; }
.comment-item small { color: var(--faint); line-height: 1.8; }
.comment-item .actions { margin: 8px 0; }
.comment-item textarea { margin: 4px 0 8px; min-height: 64px; }
.comment-item button { font-size: 13px; }

/* ---- Approval switch: a pill track with a bead, never a stretched square ---- */
.checkline { display: inline-flex; align-items: center; gap: 8px; line-height: 1; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 400; cursor: pointer; margin: 0; min-height: 30px; transition: color 200ms var(--ease), background 220ms var(--ease-expo); border-radius: var(--radius-chip); padding: 0 2px 0 0; }
.checkline:hover { color: var(--text); }
.checkline:hover input[type="checkbox"]:not(:checked) { border-color: rgba(228, 178, 123, 0.4); background: rgba(228, 178, 123, 0.08); }
.checkline:hover input[type="checkbox"]:not(:checked)::after { background: #b9c7d2; }
.checkline input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  flex: none;
  width: 36px;
  min-width: 36px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line-hover);
  border-radius: var(--radius-chip);
  background: rgba(8, 14, 21, 0.9);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background 240ms var(--ease-expo), border-color 240ms var(--ease-expo), box-shadow 240ms var(--ease-expo);
}
.checkline input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  background: #9fb0be;
  opacity: 1;
  transform: translateX(0);
  transition: transform 240ms var(--ease-overshoot), background 240ms var(--ease-expo);
}
.checkline input[type="checkbox"]:hover { border-color: rgba(230, 236, 242, 0.34); }
.checkline input[type="checkbox"]:checked { background: var(--accent-deep); border-color: rgba(240, 199, 150, 0.6); box-shadow: inset 0 1px 1px rgba(84, 54, 22, 0.25); }
.checkline input[type="checkbox"]:checked::after { background: var(--accent-ink-deep); transform: translateX(16px); }
.checkline input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.checkline input[type="checkbox"]:active::after { width: 17px; }
.checkline input[type="checkbox"]:checked:active::after { transform: translateX(13px); }
.checkline input[type="checkbox"]:disabled { cursor: progress; opacity: 0.7; }
.checkline-label { display: inline-block; }
.list-count { color: var(--faint); font-size: 12px; margin: 0; font-variant-numeric: tabular-nums; }
.list-count:empty { display: none; }
.audit-row { display: grid; grid-template-columns: minmax(120px, 150px) minmax(80px, 120px) minmax(0, 1fr); gap: 16px; align-items: baseline; font-size: 13px; font-weight: 400; }
.audit-row strong { font-weight: 500; }
.audit-row time, .audit-target { color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 400; }
.audit-target { overflow-wrap: anywhere; }

/* ---- Quiet drawer: low-frequency tools folded into one calm row ---- */
.quiet-drawer { margin-top: 28px; border-top: 1px solid var(--line); }
.quiet-drawer > summary { display: flex; align-items: center; gap: 10px; padding: 14px 2px; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; transition: color 200ms var(--ease); }
.quiet-drawer > summary::-webkit-details-marker { display: none; }
.quiet-drawer > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-left: 2px; transition: transform 280ms var(--ease-overshoot); }
.quiet-drawer[open] > summary::before { transform: rotate(45deg); }
.quiet-drawer > summary:hover { color: var(--text); }
.quiet-drawer > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.quiet-drawer[open] > summary { color: var(--text); }
.quiet-drawer > *:not(summary) { margin-bottom: 10px; }
.quiet-drawer[open] > *:not(summary) { animation: drawer-open 280ms var(--ease-expo) both; }
@keyframes drawer-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.drawer-section + .drawer-section { margin-top: 22px; }
.drawer-section h3 { font-size: 12px; font-weight: 500; color: var(--faint); letter-spacing: 0; margin: 0 0 10px; }

/* ---- Toast: a small object that lands, not a fade ---- */
#toast { position: fixed; inset: auto 24px 24px auto; z-index: 40; max-width: min(440px, calc(100vw - 32px)); font-size: 14px; line-height: 1.7; pointer-events: none; border-radius: 12px; overflow-wrap: anywhere; }
#toast:not(:empty) { background: #1d2f28; color: #dcf0e2; border: 1px solid #3f5c4c; padding: 11px 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32); animation: notice-in 300ms var(--ease-overshoot) both; }
#toast.error { background: #33242a; color: #f5d0d0; border-color: #6a474e; }
@keyframes notice-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---- Busy: the word changes and the refresh icon turns; nothing is ever wiped ---- */
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"] .btn-label { opacity: 0.78; }
button[aria-busy="true"].ghost-refresh svg,
button[aria-busy="true"] .ghost-refresh svg { animation: icon-turn 900ms cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.gate-submit[aria-busy="true"]::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 50%; border: 1.6px solid currentColor; border-top-color: transparent; vertical-align: -1px; animation: icon-turn 700ms linear infinite; }
@keyframes icon-turn { to { transform: rotate(360deg); } }
button[aria-busy="true"]:not(:has(svg))::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; background: currentColor; border-radius: 50%; vertical-align: middle; }
.empty-state { padding: 28px 4px; color: var(--faint); font-size: 13px; line-height: 1.8; }
.empty-state strong { display: block; color: var(--text); font-size: 15px; font-weight: 500; margin-bottom: 4px; }
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#page-title:focus { outline: 0; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 50; padding: 10px 16px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-ui); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

@media (max-width: 1024px) {
  .app-shell { display: block; }
  .sidebar { position: relative; width: auto; height: auto; padding: 12px 20px; background: #070c11; }
  .brand { padding: 0; min-height: 44px; }
  .nav-toggle { margin-left: auto; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; padding: 0 12px; }
  .sidebar-content { display: none; }
  .sidebar.is-open .sidebar-content { display: flex; }
  .sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; margin-top: 14px; overflow: visible; }
  .nav { min-height: 44px; }
  .nav::before { left: 0; }
  .sidebar-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
  .sidebar-bottom a, .sidebar-bottom button { min-height: 36px; padding: 0 6px; }
  .account-line { padding: 0 6px; }
  .main { padding: 0 24px 40px; box-shadow: inset 0 1px 0 rgba(230, 236, 242, 0.06); }
  .topbar { padding: 20px 0 16px; }
  .ui-settings-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 900px) {
  .column-grid, .cover-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sidebar { padding: 12px 16px; }
  .main { padding: 0 16px 32px; }
  h1 { font-size: 20px; }
  .topbar { gap: 12px; padding: 18px 0 14px; }
  .topbar h1 { font-size: 20px; }
  .top-actions { gap: 6px; }
  .fields.two, .fields.three, .fields.four, .ui-grid-2, .ui-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .span2, .span3 { grid-column: auto; }
  .table-row { gap: 12px; }
  .table-row > button { flex: none; }
  .checkline { min-height: 36px; }
  .form-save, .ui-card-foot { align-items: stretch; flex-direction: column; gap: 12px; }
  .form-save .field-help, .ui-card-foot .field-help { margin: 0; }
  .audit-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .audit-target { grid-column: 1 / -1; }
  #toast { right: 16px; bottom: 16px; }
  .ui-modal-inner { border-radius: 14px; }
  .ui-modal-head { flex-wrap: wrap; }
}

/* ---- Accessibility: the finished state is the only state ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}