:root {
  color-scheme: dark;
  --ink-950: #0a0d12;
  --ink-900: #10151d;
  --ink-800: #161d28;
  --ink-700: #202b3a;
  --ink-600: #2b3a4d;
  --line: #2f4258;
  --parchment: #dce6f0;
  --parchment-dim: #8ea3b8;
  --gold: #c79a4a;
  --gold-bright: #e0b45c;
  --silver: #9fb2c7;
  --steel: #4d7ea8;
  --red: #c1615c;
  --focus: #e0b45c;
}

/* Six named color themes, one per Skyrim item/resource whose real
   color the palette actually matches — switched with the picker in
   the sidebar and persisted to localStorage — see
   THEME_LIST/applyTheme() in app.js. Each theme's accent hue is
   distinct on purpose (blue-silver, green, orange-red, icy blue,
   purple — not just the same warm gold recolored six times), so
   they actually read as different palettes side by side. Text-
   contrast ratios against each theme's main background were checked
   against WCAG AA (4.5:1 for body text, 4.0:1+ for accents/UI, since
   those never carry body text) with a script before these were
   written in, not eyeballed. Five are dark, one (Frost Salts) is a
   genuine light theme rather than a sixth shade of dark, for real
   variety rather than the illusion of choice. */
:root[data-theme="wheat"] {
  color-scheme: dark;
  --ink-950: #191310; --ink-900: #221a15; --ink-800: #2b2119; --ink-700: #372a1f; --ink-600: #463627;
  --line: #4f3d2c; --parchment: #ecdfc4; --parchment-dim: #ab9c81; --gold: #b8862b; --gold-bright: #d1a542;
  --silver: #a6acb1; --steel: #8a5a35; --red: #9c4444; --focus: #d1a542;
}
:root[data-theme="moonstone"] {
  color-scheme: dark;
  --ink-950: #0a0d12; --ink-900: #10151d; --ink-800: #161d28; --ink-700: #202b3a; --ink-600: #2b3a4d;
  --line: #2f4258; --parchment: #dce6f0; --parchment-dim: #8ea3b8; --gold: #6f9bc4; --gold-bright: #93bddd;
  --silver: #9fb2c7; --steel: #547a99; --red: #c1615c; --focus: #93bddd;
}
:root[data-theme="malachite"] {
  color-scheme: dark;
  --ink-950: #0d1410; --ink-900: #141f18; --ink-800: #1c2b21; --ink-700: #28392c; --ink-600: #354738;
  --line: #3d5240; --parchment: #e2ecd8; --parchment-dim: #9ab08e; --gold: #3f9d6c; --gold-bright: #56c288;
  --silver: #8fa898; --steel: #4a7a5c; --red: #a15046; --focus: #56c288;
}
:root[data-theme="fire-salts"] {
  color-scheme: dark;
  --ink-950: #160c0c; --ink-900: #211313; --ink-800: #2c1a1a; --ink-700: #3a2222; --ink-600: #4a2c2c;
  --line: #5c3535; --parchment: #ecdcd8; --parchment-dim: #b08e8a; --gold: #d16b3f; --gold-bright: #e8895c;
  --silver: #a89a94; --steel: #a3583a; --red: #a83f3f; --focus: #e8895c;
}
:root[data-theme="frost-salts"] {
  color-scheme: light;
  --ink-950: #f4f9fc; --ink-900: #e8f1f7; --ink-800: #dae8f0; --ink-700: #c7dce8; --ink-600: #b2cddd;
  --line: #9ec0d4; --parchment: #1c3244; --parchment-dim: #4a6478; --gold: #3a7690; --gold-bright: #2c5c72;
  --silver: #5c7486; --steel: #6b8494; --red: #b0524a; --focus: #2c5c72;
}
:root[data-theme="nightshade"] {
  color-scheme: dark;
  --ink-950: #140f1a; --ink-900: #1e1626; --ink-800: #281d32; --ink-700: #362840; --ink-600: #46354f;
  --line: #523f5c; --parchment: #e9dff0; --parchment-dim: #a996b3; --gold: #a96dcc; --gold-bright: #c48fe0;
  --silver: #b3a6c2; --steel: #7a5a8f; --red: #a34f6e; --focus: #c48fe0;
}

/* A second, more saturated set of six — near-black metallics and
   vivid glowing tones rather than the first batch's muted earth
   colors, for genuinely different moods rather than just more of the
   same. Same WCAG-AA verification approach as the first six: every
   value checked with a script (4.5:1 body text, 4.0:1+ accents)
   before being written in. This sixth slot has been through two
   replacements: a dark maroon "Daedra Heart" (whose first accent
   attempt measured 3.09:1, well under the bar, caught and re-picked
   before shipping) gave way to "Stalhrim", an icy grey-blue light
   theme that ended up too close to Frost Salts' own icy blue to
   really read as distinct — now "Snowberries", a warm cream base
   with a vivid berry-red accent, a genuinely different light-theme
   concept rather than a third shade of the same cold-blue idea. */
:root[data-theme="ebony"] {
  color-scheme: dark;
  --ink-950: #0a080b; --ink-900: #100d12; --ink-800: #181419; --ink-700: #221c26; --ink-600: #2c2530;
  --line: #362e3c; --parchment: #e4dfe8; --parchment-dim: #a89fb0; --gold: #9891a8; --gold-bright: #b8b0c9;
  --silver: #b0a8bd; --steel: #6b5f78; --red: #a3494f; --focus: #b8b0c9;
}
:root[data-theme="nirnroot"] {
  color-scheme: dark;
  --ink-950: #06120e; --ink-900: #0a1815; --ink-800: #0f221c; --ink-700: #163027; --ink-600: #1e3f33;
  --line: #254d3f; --parchment: #d9f0ea; --parchment-dim: #7fb5a6; --gold: #2dd4bf; --gold-bright: #5eead4;
  --silver: #8fc9bb; --steel: #3a8a7a; --red: #c14f4f; --focus: #5eead4;
}
/* Dwarven Metal and (further below) Bleeding Crown are genuine
   3-color themes, not just background + one accent like the other
   ten. --silver, normally a muted, minor variable used sparingly (role
   chips, small tags), gets repurposed here as a second, boldly
   distinct accent hue in its own right — Dwarven Metal's arcane blue
   Dwemer-artifice glow alongside its brass-bronze accent, Bleeding
   Crown's green cave-phosphorescence alongside its magenta mushroom
   cap. THEME_LIST in app.js marks these with an accent2 field, which
   the swatch picker renders as a three-way conic-gradient pie split
   instead of the usual two-way diagonal, so the extra color is
   visible in the picker itself, not just discovered later in some
   rarely-seen corner of the UI. Dwarven Metal's background was
   originally warm brown, matching its brass accent — close enough to
   Wheat's own warm brown-and-gold that the two read as near-twins at
   a glance despite the different accent2. Rebuilt around a neutral
   cool grey background instead (genuine metal, not wood), keeping
   only the brass and blue accents warm. These replace two
   originally-shipped themes — Crimson Nirnroot and Void
   Salts — that ended up sitting too close to Fire Salts and
   Nightshade respectively once all twelve existed side by side. They
   were briefly named "Elder Scroll"
   and "Blackreach" before that — an artifact and a place, not a
   resource like the other ten in this set — and got renamed to
   actually match the naming convention the rest of the app follows. */
:root[data-theme="dwarven-metal"] {
  color-scheme: dark;
  --ink-950: #0e0e10; --ink-900: #16161a; --ink-800: #202024; --ink-700: #2c2c32; --ink-600: #3a3a42;
  --line: #48484f; --parchment: #e4e2e8; --parchment-dim: #9c9aa8; --gold: #b08a3f; --gold-bright: #c9a154;
  --silver: #4a90c9; --steel: #6b6a72; --red: #a3524a; --focus: #4a90c9;
}
:root[data-theme="snowberries"] {
  color-scheme: light;
  --ink-950: #faf7f2; --ink-900: #f7f3ee; --ink-800: #efe8de; --ink-700: #e4dbcb; --ink-600: #d4c7b0;
  --line: #c2b195; --parchment: #2e2418; --parchment-dim: #5c4d38; --gold: #c23d5c; --gold-bright: #9c2d47;
  --silver: #a89684; --steel: #8a5a35; --red: #b04545; --focus: #9c2d47;
}
:root[data-theme="falmer"] {
  color-scheme: dark;
  --ink-950: #0e100a; --ink-900: #14170d; --ink-800: #1c2012; --ink-700: #282e19; --ink-600: #343c20;
  --line: #404a28; --parchment: #e8ecd9; --parchment-dim: #a8b58a; --gold: #9aad3f; --gold-bright: #b8cc55;
  --silver: #a3ad8f; --steel: #6b7a3a; --red: #a3524a; --focus: #b8cc55;
}
:root[data-theme="bleeding-crown"] {
  color-scheme: dark;
  --ink-950: #08090a; --ink-900: #0c0e0f; --ink-800: #121516; --ink-700: #1a1e20; --ink-600: #242a2c;
  --line: #2e3638; --parchment: #dce8e0; --parchment-dim: #87a396; --gold: #b855d1; --gold-bright: #d17ae8;
  --silver: #52c766; --steel: #3d7a6e; --red: #c14f4f; --focus: #52c766;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink-950);
  color: var(--parchment);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3, .display {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--parchment);
  margin: 0;
}
a { color: var(--gold-bright); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.boot-loading {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; color: var(--parchment-dim); font-family: 'Cinzel', serif;
}

/* ---------- entry screen ---------- */
.entry-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(199,154,74,0.08), transparent 60%),
    var(--ink-950);
}
.entry-card {
  width: 100%; max-width: 380px;
  border: 1px solid var(--line);
  background: var(--ink-900);
  padding: 36px 32px;
}
.entry-mark {
  text-align: center; margin-bottom: 28px;
}
.entry-mark .glyph {
  font-size: 28px; color: var(--gold); display: block; margin-bottom: 8px;
}
.entry-mark h1 { font-size: 19px; line-height: 1.25; }
.entry-mark p { color: var(--parchment-dim); font-size: 13px; margin-top: 6px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12.5px; color: var(--parchment-dim); margin-bottom: 6px;
}
.field input, .field select {
  width: 100%; background: var(--ink-800); border: 1px solid var(--line);
  color: var(--parchment); padding: 10px 12px;
}
select, option { background-color: var(--ink-800); color: var(--parchment); }
optgroup { background-color: var(--ink-800); color: var(--parchment-dim); font-style: normal; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--gold); background: transparent; color: var(--gold-bright);
  padding: 10px 18px; font-weight: 600; font-size: 14px; width: 100%;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--gold); color: var(--ink-950); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.small { width: auto; padding: 6px 12px; font-size: 13px; }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.danger:hover { background: var(--red); color: var(--ink-950); }
.btn.ghost { border-color: var(--line); color: var(--parchment-dim); }
.btn.ghost:hover { background: var(--ink-700); color: var(--parchment); }

.error-msg {
  background: rgba(193,97,92,0.12); border: 1px solid var(--red);
  color: var(--red); padding: 10px 12px; font-size: 13px; margin-bottom: 16px;
}
.hint { color: var(--parchment-dim); font-size: 12.5px; margin-top: 14px; text-align: center; }
.link-btn { background: none; border: none; color: var(--gold-bright); text-decoration: underline; padding: 0; }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: 100vh; }
.rail {
  width: 216px; flex-shrink: 0; background: var(--ink-900); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 20px 0;
}
.rail-brand { padding: 0 20px 20px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.rail-brand .glyph { color: var(--gold); font-size: 20px; }
.rail-brand h1 { font-size: 14px; line-height: 1.3; margin-top: 6px; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; flex: 1; }
.rail-nav button {
  text-align: left; background: none; border: none; color: var(--parchment-dim);
  padding: 10px 12px; font-size: 13.5px; border-left: 2px solid transparent;
}
.rail-nav button:hover { color: var(--parchment); background: var(--ink-800); }
.rail-nav button.active {
  color: var(--parchment); background: var(--ink-800); border-left-color: var(--gold);
}
/* The two 3-color themes get their third color on two more everyday
   touchpoints — the active tab's left border and the unread-count
   badge — on top of --focus (already reassigned above) and the two
   spots (role chip, status tag) every theme already had. Scoped to
   just these two themes; every other theme keeps --gold on both. */
:root[data-theme="dwarven-metal"] .rail-nav button.active,
:root[data-theme="bleeding-crown"] .rail-nav button.active { border-left-color: var(--silver); }
:root[data-theme="dwarven-metal"] .notif-bell-btn .count,
:root[data-theme="bleeding-crown"] .notif-bell-btn .count { background: var(--silver); }
.rail-nav .badge {
  float: right; background: var(--ink-700); color: var(--parchment-dim);
  font-size: 11px; padding: 1px 7px; border: 1px solid var(--line);
}
.badge {
  display: inline-block; background: var(--ink-700); color: var(--gold);
  font-size: 10.5px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 3px; vertical-align: middle;
}
.stock-check-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--parchment-dim); cursor: pointer;
  margin-left: auto;
}
.permission-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.permission-row:last-of-type { border-bottom: none; }
.permission-checkbox-label {
  display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;
}
/* A fixed green doesn't exist anywhere in the theme system (12 themes,
   several of them light rather than dark), and adding one with
   guaranteed contrast on every single theme isn't something that can
   be verified without actually rendering each one. Kept safe by never
   touching text color — only a colored border plus a faint tint are
   added on top of the theme's own already-contrast-checked select
   styling, so legibility never depends on the new color at all. */
.permission-status-select {
  font-size: 12.5px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--line); cursor: pointer;
}
.permission-status-select.permission-select-allow {
  border-color: #4caf50; background-color: rgba(76, 175, 80, 0.18);
}
.permission-status-select.permission-select-deny {
  border-color: #c0392b; background-color: rgba(192, 57, 43, 0.18);
}
/* Every checkbox in the app was relying on the browser's native,
   unstyled widget — fine on some platforms, but it doesn't pick up
   the theme at all, so it can look like a plain white square dropped
   onto a dark UI. Restyled once, globally, rather than just for the
   Stock check toggle that prompted noticing it. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--ink-900); border-radius: 3px;
  cursor: pointer; position: relative; vertical-align: middle;
  transition: background-color 0.15s, border-color 0.15s;
}
input[type="checkbox"]:hover { border-color: var(--gold); }
input[type="checkbox"]:checked {
  background: var(--gold); border-color: var(--gold);
}
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--ink-900); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
/* Indeterminate needs its own look — without appearance:none this would
   be the browser's native dash, but that's stripped along with the
   checkmark above, so an indeterminate box would otherwise be visually
   identical to a plain unchecked one. Used for the Permissions modal's
   three-way "role default / always allow / always deny" checkboxes,
   where default and deny need to read as clearly different states. */
input[type="checkbox"]:indeterminate {
  background: var(--ink-800); border-color: var(--parchment-dim);
}
input[type="checkbox"]:indeterminate::after {
  content: ''; position: absolute; left: 3px; top: 6.5px;
  width: 8px; height: 2px; background: var(--parchment-dim);
}
.notif-bell-btn {
  display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: none;
  color: var(--parchment-dim); padding: 10px 12px; font-size: 13.5px; border-bottom: 1px solid var(--line);
  margin-bottom: 4px; cursor: pointer; position: relative;
}
.notif-bell-btn:hover { color: var(--parchment); background: var(--ink-800); }
.notif-bell-btn .count {
  background: var(--gold); color: var(--ink-950); font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; margin-left: auto;
}
.notif-panel {
  position: fixed; top: 16px; right: 16px; width: 340px; max-width: calc(100vw - 32px);
  max-height: 70vh; overflow-y: auto; background: var(--ink-900); border: 1px solid var(--line);
  z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  border-bottom: 1px solid var(--line); font-family: 'Cinzel', serif; font-size: 14px;
}
.notif-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); color: var(--parchment); padding: 10px 14px; font-size: 13px;
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--ink-800); }
.notif-item.unread { border-left: 2px solid var(--gold); }
.notif-item.unread::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 6px; }
.notif-item .when { color: var(--parchment-dim); font-size: 11px; margin-top: 2px; }
.notif-empty { padding: 20px 14px; color: var(--parchment-dim); font-size: 13px; text-align: center; }
@keyframes highlight-fade {
  0% { background: rgba(199, 154, 74, 0.35); }
  100% { background: transparent; }
}
.highlight-flash { animation: highlight-fade 2.5s ease-out; }
.rail-foot { padding: 14px 20px 0; border-top: 1px solid var(--line); margin-top: 12px; }
.theme-picker { margin-bottom: 12px; }
.theme-picker-label { display: block; font-size: 11px; color: var(--parchment-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.theme-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.theme-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line);
  padding: 0; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch.active { border-color: var(--parchment); box-shadow: 0 0 0 1px var(--ink-950), 0 0 0 3px var(--gold-bright); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid var(--line); background: var(--ink-900);
}
.topbar h2 { font-size: 18px; }
.topbar .sub { color: var(--parchment-dim); font-size: 12.5px; margin-top: 3px; }
.who { display: flex; align-items: center; gap: 12px; }
.role-chip {
  display: inline-block; white-space: nowrap;
  font-size: 11px; padding: 3px 9px; border: 1px solid; font-family: 'Inter', sans-serif; font-weight: 600;
}
.role-chip.emperor { color: var(--gold-bright); border-color: var(--gold); }
.role-chip.plenipotentiary { color: var(--silver); border-color: var(--silver); }
.role-chip.master_plenipotentiary { color: var(--ink-950); background: var(--silver); border-color: var(--silver); }
.role-chip.hold_moi { color: var(--steel); border-color: var(--steel); }
/* The three newer hold-level roles never got a chip color when they
   were added, so they fell through to the unstyled base rule above
   (currentColor border, plain text) and looked visually different
   from every other role for no reason. They're the same tier as Hold
   MOI, so they share its treatment. */
.role-chip.steward, .role-chip.foreman, .role-chip.jarl { color: var(--steel); border-color: var(--steel); }

/* Sits next to the role chip on the Accounts list when an account's
   permissions differ from its role defaults. Deliberately quiet — it's
   a "this one's been customized, take a look" marker, not an alert. */
.override-badge {
  display: inline-block; white-space: nowrap; margin-left: 6px;
  font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: var(--ink-700); color: var(--parchment-dim); border: 1px solid var(--line);
  font-family: 'Inter', sans-serif; font-weight: 600; vertical-align: middle;
}

.content { padding: 28px; flex: 1; overflow-y: auto; }
.panel { border: 1px solid var(--line); background: var(--ink-900); margin-bottom: 24px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.panel-head h3 { font-size: 15px; }
.panel-body { padding: 18px; }
.empty-state { color: var(--parchment-dim); font-size: 13.5px; padding: 20px; text-align: center; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-weight: 600; color: var(--parchment-dim); font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--ink-700); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cat-row td { color: var(--parchment-dim); font-size: 11.5px; padding-top: 16px; padding-bottom: 4px; border-bottom: none; }
.manifest-row-flag td { background: rgba(193,97,92,0.08); }
.manifest-row-flag select { background: var(--ink-800); border: 1px solid var(--red); color: var(--parchment); padding: 5px 7px; }
.price-trend-svg { display: block; }
.price-trend-point { cursor: pointer; transition: fill 0.1s; }
.price-trend-point:hover { fill: var(--gold); }

.search-input {
  width: 100%; max-width: 320px; background: var(--ink-800); border: 1px solid var(--line);
  color: var(--parchment); padding: 8px 12px;
}

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: var(--ink-900); border: 1px solid var(--line);
  width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; padding: 20px;
}
.modal-wide { max-width: 700px; }

.toggle-switch { position: relative; display: inline-block; width: 42px; height: 23px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer; background: var(--ink-800);
  border: 1px solid var(--line); transition: background 0.15s, border-color 0.15s;
}
.toggle-slider::before {
  content: ""; position: absolute; height: 15px; width: 15px; left: 3px; top: 3px;
  background: var(--parchment-dim); transition: transform 0.15s, background 0.15s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--gold); border-color: var(--gold); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(19px); background: var(--ink-900); }
.toggle-row { display: flex; align-items: center; gap: 12px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-head h3 { font-size: 16px; }

.qp-scroll { max-height: 48vh; overflow-y: auto; border: 1px solid var(--line); padding: 8px; margin-top: 10px; }
.qp-cat { color: var(--gold); font-size: 11px; margin: 10px 0 5px; }
.qp-cat:first-child { margin-top: 0; }
.qp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-900); }
.qp-cell { background: var(--ink-800); padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.qp-name { color: var(--parchment); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qp-cell .price-input { width: 58px; font-size: 11.5px; padding: 4px 5px; flex-shrink: 0; }
.qp-cell .qty-input { width: 42px; font-size: 11.5px; padding: 4px 5px; flex-shrink: 0; }

.price-input {
  width: 74px; background: var(--ink-800); border: 1px solid var(--line); color: var(--parchment);
  padding: 5px 7px; text-align: right; font-variant-numeric: tabular-nums;
}
.qty-input {
  width: 64px; background: var(--ink-800); border: 1px solid var(--line); color: var(--parchment);
  padding: 5px 7px; text-align: right;
}

.status-tag { font-size: 11px; padding: 2px 8px; border: 1px solid; display: inline-block; }
.status-tag.pending { color: var(--gold-bright); border-color: var(--gold); }
.status-tag.approved { color: var(--silver); border-color: var(--silver); }
.status-tag.completed { color: var(--steel); border-color: var(--steel); }
.status-tag.rejected { color: var(--red); border-color: var(--red); }
.status-tag.review { color: var(--gold-bright); border-color: var(--gold); border-style: dashed; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 24px; }
.stat-cell { background: var(--ink-900); padding: 16px 18px; }
.stat-cell .num { font-family: 'Cinzel', serif; font-size: 24px; color: var(--gold-bright); }
.stat-cell .label { color: var(--parchment-dim); font-size: 12px; margin-top: 4px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row .field { margin-bottom: 0; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
textarea { width: 100%; background: var(--ink-800); border: 1px solid var(--line); color: var(--parchment); padding: 10px; resize: vertical; min-height: 60px; }

.order-cart { border: 1px dashed var(--line); padding: 14px; margin-top: 16px; }
.order-cart-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13.5px; border-bottom: 1px solid var(--ink-700); }
.order-cart-line:last-of-type { border-bottom: none; }
.order-total {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px;
  font-family: 'Cinzel', serif; font-size: 16px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.order-total > span:first-child { flex: 1 1 180px; min-width: 0; }
.order-total > span:last-child { margin-left: auto; white-space: nowrap; text-align: right; }

.pill-select { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-select button {
  background: var(--ink-800); border: 1px solid var(--line); color: var(--parchment-dim);
  padding: 6px 12px; font-size: 12.5px;
}
.pill-select button.active { color: var(--ink-950); background: var(--gold); border-color: var(--gold); }

.toast {
  position: fixed; bottom: 22px; right: 22px; background: var(--ink-800);
  border: 1px solid var(--gold); color: var(--parchment); padding: 12px 18px;
  font-size: 13.5px; max-width: 320px; z-index: 50;
}
.toast.error { border-color: var(--red); }

.muted { color: var(--parchment-dim); }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mb-0 { margin-bottom: 0; }

.receipt-modal { max-width: 480px; }
.receipt-paper { background: var(--ink-900); border: 2px solid var(--gold); padding: 28px 24px; position: relative; }
.receipt-paper::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; }
.receipt-seal { text-align: center; font-size: 32px; color: var(--gold); margin-bottom: 2px; }
.receipt-brand { text-align: center; font-family: 'Cinzel', serif; font-size: 12px; color: var(--parchment-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.receipt-title { text-align: center; font-family: 'Cinzel', serif; font-size: 19px; color: var(--gold-bright); margin: 8px 0 4px; }
.receipt-hold { text-align: center; font-size: 16px; color: var(--parchment); margin-bottom: 4px; }
.receipt-hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.receipt-treasury { font-size: 12.5px; color: var(--parchment-dim); text-align: center; margin-bottom: 4px; }
.receipt-treasury strong { color: var(--parchment); font-weight: normal; }
.receipt-items { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.receipt-items th { text-align: left; color: var(--parchment-dim); font-weight: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 0; border-bottom: 1px solid var(--line); }
.receipt-items td { padding: 6px 0; border-bottom: 1px solid var(--ink-700); color: var(--parchment); }
.receipt-items .num { text-align: right; }
.receipt-total { text-align: right; font-family: 'Cinzel', serif; font-size: 22px; color: var(--gold-bright); margin: 14px 0 20px; }
.receipt-total .label { display: block; font-size: 11px; color: var(--parchment-dim); font-family: inherit; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.receipt-meta { font-size: 12.5px; color: var(--parchment-dim); line-height: 1.9; }
.receipt-meta strong { color: var(--parchment); font-weight: normal; }
.receipt-footer { text-align: center; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--parchment-dim); font-style: italic; }

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  /* display: contents removes .rail's own box from layout entirely,
     promoting its children (.rail-brand, .rail-nav, .rail-foot) to be
     direct flex items of .shell alongside .main — which is what lets
     .rail-foot be reordered to sit after .main below, as a normal
     part of the page you reach by scrolling down, rather than needing
     it nested inside .rail (and stuck wherever .rail sits) or pinned
     with position: fixed (which was the wrong call — the first fix
     for this used fixed positioning; this replaces that with actually
     just moving it in the document instead). */
  .rail { display: contents; }
  .rail-brand { display: none; }
  /* flex: 1 here overrides the base (desktop) rule's flex: 1, which
     made sense when .rail-nav was inside a vertical sidebar growing
     to fill it — but now that display: contents on .rail (above)
     makes .rail-nav a direct flex item of .shell's column layout,
     that same flex: 1 made it grow to fill vertical space meant for
     .main instead, alongside .main's own flex: 1. Both stretching to
     fill the same space is exactly the kind of thing display:
     contents can quietly break without a full audit of what a
     promoted child's own rules assumed about its old parent — align-
     items: center added too, since row-direction flex defaults to
     stretch, which was inflating every button to match whatever
     height the (bugged, oversized) container ended up with; only
     showing up visibly on the active tab, since it's the only one
     with a background to reveal the extra height. */
  .rail-nav { flex-direction: row; flex: 0 0 auto; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px; order: 1; }
  /* Without flex-shrink: 0, these squished to fit the row instead of
     actually scrolling — with 8+ nav items on some roles plus the
     notification bell, that meant unreadable, crushed button labels
     rather than a normal horizontal-scroll bar. */
  .rail-nav button, .notif-bell-btn { flex-shrink: 0; white-space: nowrap; border-bottom: none; margin-bottom: 0; }
  .main { order: 2; }
  /* This used to be display: none on mobile, taking sign out, change
     password, and the theme picker with it — there was no way to
     reach any of the three on a phone at all. */
  .rail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); margin-top: 0; order: 3; }
  .theme-picker { flex: 1 1 100%; margin-bottom: 0; }
  .content { padding: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .qp-grid { grid-template-columns: 1fr; }
  .modal { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Hold members tab — your own row is called out, and disabled
   counterparts are dimmed rather than hidden (a colleague who's been
   suspended is still worth knowing about). */
.member-you td { background: var(--ink-800); }
.member-inactive td { opacity: 0.55; }

/* Setup hint on the Discord DM panel, shown until the bot-token secret
   exists. */
.dm-setup-note {
  margin: 0 0 14px 0; padding: 12px 14px; border: 1px solid var(--line); background: var(--ink-800);
  font-size: 13px; line-height: 1.55; color: var(--parchment-dim);
}
.dm-setup-note strong { color: var(--parchment); }
.dm-setup-note code { display: block; margin: 8px 0; padding: 6px 10px; background: var(--ink-950); color: var(--gold-bright); font-size: 12.5px; }