:root {
  --topbar-h:  48px;
  --sidebar-w: 220px;
  --sidebar-rail-w: 48px;

  --domain-core: #ca8a04;
  --domain-core-soft: rgba(202, 138, 4, 0.1);
  --domain-requests: #eab308;
  --domain-requests-soft: rgba(234, 179, 8, 0.12);
  --domain-config: #64748b;
  --domain-config-soft: rgba(100, 116, 139, 0.1);
  --domain-directory: #7c3aed;
  --domain-directory-soft: rgba(124, 58, 237, 0.1);
  --domain-treasury: #16a34a;
  --domain-treasury-soft: rgba(22, 163, 74, 0.1);
  --domain-faucet: #15803d;
  --domain-faucet-soft: rgba(21, 128, 61, 0.1);
  --domain-mail: #0284c7;
  --domain-mail-soft: rgba(2, 132, 199, 0.1);
  --domain-support: #2563eb;
  --domain-support-soft: rgba(37, 99, 235, 0.1);
  --domain-server: #dc2626;
  --domain-server-soft: rgba(220, 38, 38, 0.08);
  --domain-coming-soon: #db2777;
  --domain-coming-soon-soft: rgba(219, 39, 119, 0.1);

  --hub-main: #4f46e5;
  --hub-main-soft: rgba(79, 70, 229, 0.1);
  --hub-finance: #16a34a;
  --hub-finance-soft: rgba(22, 163, 74, 0.1);
  --hub-communication: #0284c7;
  --hub-communication-soft: rgba(2, 132, 199, 0.1);
  --hub-entities: #0d9488;
  --hub-entities-soft: rgba(13, 148, 136, 0.1);

  /* Dashboard / Discover - muted sidebar accent when not selected */
  --sidebar-top-accent: #71717a;
  --sidebar-top-accent-soft: rgba(113, 113, 122, 0.12);

  --bg:           #f4f4f5;
  --surface:      #ffffff;
  --border:       #e4e4e7;
  --border-input: #d4d4d8;
  --text:         #18181b;
  --text-muted:   #71717a;
  --text-dim:     #a1a1aa;
  --hover:        #f4f4f5;
  --accent:       #18181b;
  --accent-hover: #3f3f46;
  --accent-text:  #ffffff;
  --topbar-bg:    #18181b;
  --topbar-text:  #ffffff;
}

/* Shell chrome (topbar, sidebar, tabbar, footer) reads --shell-* injected from the active theme. */
.shell-chrome {
  color: var(--text);
  --surface: var(--shell-surface, var(--surface));
  --border: var(--shell-border, var(--border));
  --border-input: var(--shell-border-input, var(--border-input));
  --text: var(--shell-text, var(--text));
  --text-muted: var(--shell-text-muted, var(--text-muted));
  --text-dim: var(--shell-text-dim, var(--text-dim));
  --hover: var(--shell-hover, var(--hover));
  --accent: var(--shell-accent, var(--accent));
  --accent-hover: var(--shell-accent-hover, var(--accent-hover));
  --accent-text: var(--shell-accent-text, var(--accent-text));
}

/* Content accent surface - main scroll area and guest banner; vars from data-accent slug. */
.accent-surface {
  background: var(--bg);
  color: var(--text);
  min-height: 0;
}
.accent-surface.accent-custom {
  /* custom accent vars applied via inline <style> from layout */
}

/* ─── Themes ──────────────────────────────────────────────────────────────── */

[data-theme="dark"], [data-style="dark"], [data-accent="dark"] {
  --domain-core: #eab308;
  --domain-core-soft: rgba(234, 179, 8, 0.12);
  --domain-server: #f87171;
  --domain-server-soft: rgba(248, 113, 113, 0.1);
  --bg: #09090b; --surface: #18181b; --border: #27272a; --border-input: #3f3f46;
  --text: #fafafa; --text-muted: #a1a1aa; --text-dim: #71717a; --hover: #27272a;
  --accent: #e4e4e7; --accent-hover: #d4d4d8; --accent-text: #09090b;
  --topbar-bg: #09090b; --topbar-text: #fafafa;
}
[data-theme="dim"], [data-style="dim"], [data-accent="dim"] {
  --bg: #1c2128; --surface: #22272e; --border: #373e47; --border-input: #444c56;
  --text: #adbac7; --text-muted: #768390; --text-dim: #545d68; --hover: #2d333b;
  --accent: #539bf5; --accent-hover: #316dca; --accent-text: #ffffff;
  --topbar-bg: #1c2128; --topbar-text: #adbac7;
}
[data-theme="sepia"], [data-style="sepia"], [data-accent="sepia"] {
  --bg: #f5f0e8; --surface: #fdf8f0; --border: #e0d5c0; --border-input: #c9b99a;
  --text: #3d2b1f; --text-muted: #7c6350; --text-dim: #a89070; --hover: #ede5d8;
  --accent: #8b4513; --accent-hover: #6b3410; --accent-text: #fdf8f0;
  --topbar-bg: #3d2b1f; --topbar-text: #f5f0e8;
}
[data-theme="slate"], [data-style="slate"], [data-accent="slate"] {
  --bg: #f1f5f9; --surface: #ffffff; --border: #cbd5e1; --border-input: #94a3b8;
  --text: #0f172a; --text-muted: #64748b; --text-dim: #94a3b8; --hover: #e2e8f0;
  --accent: #3b82f6; --accent-hover: #2563eb; --accent-text: #ffffff;
  --topbar-bg: #1e293b; --topbar-text: #f8fafc;
}
[data-theme="terminal"], [data-style="terminal"], [data-accent="terminal"] {
  --bg: #0a0a0a; --surface: #111111; --border: #1f1f1f; --border-input: #2d2d2d;
  --text: #00ff41; --text-muted: #00cc33; --text-dim: #007722; --hover: #0d1a0d;
  --accent: #00ff41; --accent-hover: #00cc33; --accent-text: #000000;
  --topbar-bg: #000000; --topbar-text: #00ff41;
}
[data-theme="retro"], [data-style="retro"], [data-accent="retro"] {
  --bg: #0d0221; --surface: #1a0535; --border: #4c1d7a; --border-input: #7c3aed;
  --text: #f0abfc; --text-muted: #c084fc; --text-dim: #a855f7; --hover: #200840;
  --accent: #ec4899; --accent-hover: #db2777; --accent-text: #ffffff;
  --topbar-bg: #0a0118; --topbar-text: #f0abfc;
}
[data-theme="classic"], [data-style="classic"], [data-accent="classic"] {
  --bg: #c0c0c0; --surface: #ffffff; --border: #808080; --border-input: #808080;
  --text: #000000; --text-muted: #444444; --text-dim: #808080; --hover: #d4d0c8;
  --accent: #000080; --accent-hover: #0000aa; --accent-text: #ffffff;
  --topbar-bg: #000080; --topbar-text: #ffffff;
}
[data-theme="classic-simple"], [data-style="classic-simple"], [data-accent="classic-simple"] {
  --bg: #f5f5f5; --surface: #ffffff; --border: #d9d9d9; --border-input: #bfbfbf;
  --text: #1a1a1a; --text-muted: #595959; --text-dim: #8c8c8c; --hover: #ececec;
  --accent: #404040; --accent-hover: #262626; --accent-text: #ffffff;
  --topbar-bg: #2b2b2b; --topbar-text: #f5f5f5;
}
[data-theme="classic-dark"], [data-style="classic-dark"], [data-accent="classic-dark"] {
  --bg: #2b2b2b; --surface: #383838; --border: #4d4d4d; --border-input: #5c5c5c;
  --text: #e6e6e6; --text-muted: #b3b3b3; --text-dim: #808080; --hover: #444444;
  --accent: #4169e1; --accent-hover: #3151b0; --accent-text: #ffffff;
  --topbar-bg: #1a1a2e; --topbar-text: #e6e6e6;
}
[data-theme="birdhouse"], [data-style="birdhouse"], [data-accent="birdhouse"] {
  --bg: #faf6f0; --surface: #ffffff; --border: #e8ddd0; --border-input: #d4c3a8;
  --text: #3e2f24; --text-muted: #7a6a58; --text-dim: #a89882; --hover: #f0e8da;
  --accent: #6b8e4e; --accent-hover: #557239; --accent-text: #ffffff;
  --topbar-bg: #5c4632; --topbar-text: #faf6f0;
}
[data-theme="ocean"], [data-style="ocean"], [data-accent="ocean"] {
  --bg: #f0f9fb; --surface: #ffffff; --border: #c3e4ea; --border-input: #8fcdd9;
  --text: #0c4a5c; --text-muted: #347d8f; --text-dim: #6fa8b8; --hover: #e0f2f6;
  --accent: #0891b2; --accent-hover: #0e7490; --accent-text: #ffffff;
  --topbar-bg: #083344; --topbar-text: #e0f2f6;
}
[data-theme="ocean-deep"], [data-style="ocean-deep"], [data-accent="ocean-deep"] {
  --bg: #06141b; --surface: #0f2a35; --border: #1a3a47; --border-input: #2a4f5e;
  --text: #d6f0f5; --text-muted: #8fb8c4; --text-dim: #5d8a96; --hover: #14323d;
  --accent: #22d3ee; --accent-hover: #06b6d4; --accent-text: #06141b;
  --topbar-bg: #03090d; --topbar-text: #d6f0f5;
}
[data-theme="forest"], [data-style="forest"], [data-accent="forest"] {
  --bg: #f3f6f0; --surface: #ffffff; --border: #d4e0c8; --border-input: #b3c89e;
  --text: #1e3a1f; --text-muted: #4d6b4f; --text-dim: #7d9a7e; --hover: #e8efe0;
  --accent: #2f7d32; --accent-hover: #245f27; --accent-text: #ffffff;
  --topbar-bg: #1b3a1d; --topbar-text: #f3f6f0;
}
[data-theme="sunset"], [data-style="sunset"], [data-accent="sunset"] {
  --bg: #fff7ed; --surface: #ffffff; --border: #fed7aa; --border-input: #fdba74;
  --text: #7c2d12; --text-muted: #c2410c; --text-dim: #ea9a5e; --hover: #ffedd5;
  --accent: #ea580c; --accent-hover: #c2410c; --accent-text: #ffffff;
  --topbar-bg: #7c2d12; --topbar-text: #fff7ed;
}
[data-theme="dim-light"], [data-style="dim-light"], [data-accent="dim-light"] {
  --bg: #ffffff; --surface: #f6f8fa; --border: #d0d7de; --border-input: #afb8c1;
  --text: #1f2328; --text-muted: #656d76; --text-dim: #8c959f; --hover: #f3f4f6;
  --accent: #0969da; --accent-hover: #0550ae; --accent-text: #ffffff;
  --topbar-bg: #24292f; --topbar-text: #f6f8fa;
}
[data-theme="sepia-dark"], [data-style="sepia-dark"], [data-accent="sepia-dark"] {
  --bg: #2a1f14; --surface: #3d2e1f; --border: #5c4a38; --border-input: #6e5a45;
  --text: #f0e4d4; --text-muted: #b8a088; --text-dim: #8a7860; --hover: #352818;
  --accent: #c9a227; --accent-hover: #a8841f; --accent-text: #2a1f14;
  --topbar-bg: #1a1208; --topbar-text: #f0e4d4;
}
[data-theme="slate-dark"], [data-style="slate-dark"], [data-accent="slate-dark"] {
  --bg: #0f172a; --surface: #1e293b; --border: #334155; --border-input: #475569;
  --text: #f1f5f9; --text-muted: #94a3b8; --text-dim: #64748b; --hover: #1e293b;
  --accent: #60a5fa; --accent-hover: #3b82f6; --accent-text: #0f172a;
  --topbar-bg: #020617; --topbar-text: #f1f5f9;
}
[data-theme="terminal-light"], [data-style="terminal-light"], [data-accent="terminal-light"] {
  --bg: #f5f0e0; --surface: #fffef5; --border: #d4c9a8; --border-input: #b8a878;
  --text: #2d5016; --text-muted: #4a7a28; --text-dim: #6e9450; --hover: #ebe4d0;
  --accent: #228b22; --accent-hover: #1a6b1a; --accent-text: #fffef5;
  --topbar-bg: #2d5016; --topbar-text: #f5f0e0;
}
[data-theme="retro-light"], [data-style="retro-light"], [data-accent="retro-light"] {
  --bg: #fdf4ff; --surface: #ffffff; --border: #e9d5ff; --border-input: #d8b4fe;
  --text: #581c87; --text-muted: #9333ea; --text-dim: #a855f7; --hover: #fae8ff;
  --accent: #db2777; --accent-hover: #be185d; --accent-text: #ffffff;
  --topbar-bg: #581c87; --topbar-text: #fdf4ff;
}
[data-theme="classic-win95-dark"], [data-style="classic-win95-dark"], [data-accent="classic-win95-dark"] {
  --bg: #2d2d2d; --surface: #3a3a3a; --border: #606060; --border-input: #707070;
  --text: #e0e0e0; --text-muted: #a0a0a0; --text-dim: #808080; --hover: #404040;
  --accent: #000080; --accent-hover: #0000aa; --accent-text: #ffffff;
  --topbar-bg: #000080; --topbar-text: #ffffff;
}
[data-theme="birdhouse-dark"], [data-style="birdhouse-dark"], [data-accent="birdhouse-dark"] {
  --bg: #2a2218; --surface: #3a3028; --border: #524838; --border-input: #645848;
  --text: #f0e8da; --text-muted: #b8a898; --text-dim: #8a7a68; --hover: #342c20;
  --accent: #6b8e4e; --accent-hover: #557239; --accent-text: #ffffff;
  --topbar-bg: #1a140e; --topbar-text: #f0e8da;
}
[data-theme="forest-dark"], [data-style="forest-dark"], [data-accent="forest-dark"] {
  --bg: #0f1a10; --surface: #1b2e1c; --border: #2d4a30; --border-input: #3d5c40;
  --text: #e8efe0; --text-muted: #8aaa8c; --text-dim: #5c7a5e; --hover: #152418;
  --accent: #4caf50; --accent-hover: #388e3c; --accent-text: #0f1a10;
  --topbar-bg: #0a120a; --topbar-text: #e8efe0;
}
[data-theme="sunset-dark"], [data-style="sunset-dark"], [data-accent="sunset-dark"] {
  --bg: #2a1208; --surface: #3d1a0c; --border: #5c2a14; --border-input: #7a3818;
  --text: #ffedd5; --text-muted: #fb923c; --text-dim: #c2410c; --hover: #321408;
  --accent: #fb923c; --accent-hover: #ea580c; --accent-text: #2a1208;
  --topbar-bg: #1a0a04; --topbar-text: #ffedd5;
}

/* Owner public style inside app shell - vars inherit to children only */
.profile-public-surface {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.style-page-controls {
  padding: 0 0.25rem;
}

.style-live-preview {
  border-radius: 0;
  margin-bottom: 1.25rem;
}

.style-live-preview .panel {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.style-live-preview .text-dim {
  color: var(--text-dim);
}

.style-live-preview .btn-xs:not(.ghost) {
  background: var(--profile-accent, var(--accent));
  color: var(--profile-accent-text, var(--accent-text));
  border-color: var(--profile-accent, var(--accent));
}

.style-live-preview .btn-xs.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

/* Public profile: plain link text in page body; accent only on primary buttons */
.profile-public-surface .info-row a,
.profile-public-surface .panel a:not(.btn-xs) {
  color: var(--text);
}
.profile-public-surface .info-row a:hover,
.profile-public-surface .panel a:not(.btn-xs):hover {
  color: var(--text-muted);
}
.profile-public-surface a.btn-xs.ghost,
.profile-public-surface a.btn-xs.ghost:hover {
  color: var(--text) !important;
  background: transparent !important;
  border-color: var(--border-input);
}

.profile-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}
.profile-member-row--redacted .profile-member-name,
.profile-member-row--redacted .profile-member-link {
  font-style: italic;
  color: var(--text-dim);
}
.profile-list-row {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}
.profile-list-row--stacked .profile-member-row {
  flex-wrap: wrap;
}
.profile-list-subline {
  font-size: 0.8rem;
  margin-top: 0.15rem;
  margin-left: calc(1.75rem + 0.5rem);
}
.profile-list-inline-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.profile-member-accent-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--row-accent);
  flex-shrink: 0;
}
.profile-member-link {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--row-accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}
.profile-member-link:hover {
  color: var(--text);
  text-decoration-color: color-mix(in srgb, var(--row-accent) 65%, var(--text) 35%);
}
.profile-member-name {
  font-weight: 500;
  border-bottom: 2px solid var(--row-accent);
  padding-bottom: 0.05em;
}
.profile-public-surface a.profile-member-link,
.profile-public-surface a.profile-member-link:hover {
  color: var(--text);
}

.profile-public-surface--accent .profile-comms-actions button.btn-xs:not(.ghost):not(.danger-btn),
.profile-public-surface--accent .profile-header-actions button.btn-xs:not(.ghost):not(.danger-btn) {
  background: var(--profile-accent);
  color: var(--profile-accent-text);
  border-color: var(--profile-accent);
}

.profile-public-surface--accent .profile-comms-actions button.btn-xs:not(.ghost):not(.danger-btn):hover,
.profile-public-surface--accent .profile-header-actions button.btn-xs:not(.ghost):not(.danger-btn):hover {
  background: var(--profile-accent-hover);
}

/* In-app / browser profile - fill the scroll area so shell theme doesn't bleed around edges */
main:has(> .profile-public-surface),
.browser-main:has(> .profile-public-surface) {
  padding: 0;
}
main > .profile-public-surface,
.browser-main > .profile-public-surface {
  min-height: 100%;
  margin-bottom: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 1.5rem;
}
main > .profile-public-surface .profile-column,
.browser-main > .profile-public-surface .profile-column {
  max-width: none;
  width: 100%;
}

/* ─── Profile / public page layout ─────────────────────────────────────────── */
.public-page-shell {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
}
.profile-column {
  width: 100%;
  max-width: 32rem;
}
.profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.profile-header-text { flex: 1; min-width: 0; }
.profile-header-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.profile-avatar-field { margin-top: 0.5rem; }
.profile-avatar-preview-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.profile-avatar-circle img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.profile-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--text-dim, #6b7280);
  flex-shrink: 0;
}
.profile-avatar-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.profile-visibility-preview {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--surface);
}
.profile-visibility-preview .preview-locked {
  opacity: 0.45;
  font-style: italic;
}
.profile-visibility-preview .preview-lock {
  font-size: 0.75rem;
  margin-left: 0.25rem;
}
.profile-comms-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.profile-wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.profile-wallet-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.profile-wallet-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.profile-wallet-code {
  font-size: 0.85rem;
  color: var(--text-dim, var(--text));
  opacity: 0.75;
  cursor: pointer;
}
.profile-wallet-code:hover {
  opacity: 1;
  text-decoration: underline;
}
.profile-visibility-preview .profile-wallet-row {
  justify-content: flex-start;
  gap: 0.5rem;
}
.profile-visibility-preview .profile-wallet-label {
  font-weight: 600;
}
.profile-header-title { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 600; }
.profile-header-sub { font-size: 0.85rem; opacity: 0.5; }
.profile-header-badges {
  margin-top: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.profile-header-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}
.panel-section-title { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; }
.profile-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.3;
}
.asset-header-title { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 600; }
.asset-header-sub { font-size: 0.85rem; opacity: 0.5; }
.asset-header-badges {
  margin-top: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.page-title { margin-bottom: 1.25rem; }
.page-title-compact { margin-bottom: 0.5rem; }

/* ─── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--text); }
h1 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.25rem; }
p  { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.875rem; }

input {
  border: 1px solid var(--border-input);
  border-radius: 0.125rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  width: 100%;
  outline: none;
  background: var(--surface);
  color: var(--text);
}
input:focus { border-color: var(--accent); }

select {
  border: 1px solid var(--border-input);
  border-radius: 0.125rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
  width: 100%;
  max-width: 100%;
  outline: none;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}
select:focus { border-color: var(--accent); }

button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 0.125rem;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  width: 100%;
}
button:hover { background: var(--accent-hover); }
button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-input);
}
button.ghost:hover { background: var(--hover); }
a.btn-xs.ghost {
  display: inline-block;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-input);
  text-decoration: none;
}
a.btn-xs.ghost:hover { background: var(--hover); text-decoration: none; }

form { display: flex; flex-direction: column; gap: 0.625rem; }
.error   { color: #dc2626; font-size: 0.825rem; margin-bottom: 0.75rem; padding: 0.6rem 0.875rem; border: 1px solid color-mix(in srgb, #dc2626 40%, var(--border)); background: color-mix(in srgb, #dc2626 8%, var(--surface)); border-radius: var(--radius, 0.125rem); overflow-wrap: anywhere; }
.success { color: #16a34a; font-size: 0.825rem; margin-bottom: 0.75rem; padding: 0.6rem 0.875rem; border: 1px solid color-mix(in srgb, #16a34a 35%, var(--border)); background: color-mix(in srgb, #16a34a 8%, var(--surface)); border-radius: var(--radius, 0.125rem); overflow-wrap: anywhere; }

label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-muted); }
label input { color: var(--text); }
input[readonly] { background: var(--hover); color: var(--text-muted); cursor: default; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }

/* ─── Bare layout ─────────────────────────────────────────────────────────── */

body.bare {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-input);
  padding: 2rem;
  width: 100%;
  max-width: 380px;
}

/* ─── App layout ──────────────────────────────────────────────────────────── */

body.app {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--shell-surface, var(--bg));
}
body.app:has(.guest-banner) {
  grid-template-rows: var(--topbar-h) auto 1fr;
}

.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
}
.impersonation-banner--demo {
  background: #78350f;
  color: #fef3c7;
  border-bottom-color: #92400e;
}
.impersonation-banner--sensitive {
  background: #991b1b;
  color: #ffffff;
  border-bottom-color: #7f1d1d;
}
.impersonation-banner-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.impersonation-banner-label {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.95;
}
.impersonation-banner-text { opacity: 0.95; }
.impersonation-banner-body code {
  font-size: 0.92em;
  font-weight: 600;
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
}
.impersonation-banner--sensitive .impersonation-banner-body code {
  background: rgba(0, 0, 0, 0.25);
}
.impersonation-banner-exit-form { margin: 0; flex-shrink: 0; }
.impersonation-banner-exit {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 0.35rem;
  cursor: pointer;
  white-space: nowrap;
}
.impersonation-banner-exit:hover {
  background: rgba(255, 255, 255, 0.22);
}
.impersonation-banner--sensitive .impersonation-banner-exit {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
}
.profile-header-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.profile-view-as {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.profile-view-as-label {
  font-size: 0.72rem;
  opacity: 0.65;
  white-space: nowrap;
}
.view-as-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius);
}
.view-as-banner-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.view-as-banner-label {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.85;
}
.view-as-banner-exit { flex-shrink: 0; }

tr.row-sensitive td { background: color-mix(in srgb, #dc2626 6%, transparent); }

/* Topbar */
/* Guest banner: shell chrome only; never inherit content accent (contrast breaks on custom themes). */
.guest-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--topbar-text) 14%, var(--topbar-bg));
  color: var(--topbar-text);
  border-bottom: 1px solid color-mix(in srgb, var(--topbar-text) 22%, transparent);
  font-size: 0.82rem;
  line-height: 1.45;
}
.guest-banner-text { flex: 1; min-width: 0; }
.guest-banner-cta {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
  color: var(--topbar-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.guest-banner-cta:hover { opacity: 0.88; }
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 0.75rem;
}
.topbar-brand { font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; }
.topbar-icon-img { width: 18px; height: 18px; }
.topbar-tagline { font-size: 0.8rem; color: var(--topbar-text); opacity: 0.6; }
.topbar-left   { display: flex; align-items: center; gap: 0.625rem; }
.topbar-center { display: flex; align-items: center; gap: 0.5rem; }
.topbar-user   { display: flex; align-items: center; gap: 0.75rem; font-size: 0.825rem; }
a.topbar-username { color: var(--topbar-text); text-decoration: none; font-weight: 600; }
a.topbar-username:hover { text-decoration: underline; opacity: 0.9; }
.topbar-role  {
  background: rgba(255,255,255,0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}
/* Site role badge - colored only for admin/specialist roles; member/guest stay muted. */
.role-badge--topbar.role-badge--standard {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--topbar-text) 58%, transparent);
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.role-badge--topbar.role-badge--colored {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.125rem;
  line-height: 1.3;
}
.role-badge--sidebar.role-badge--standard {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.role-badge--sidebar.role-badge--colored {
  font-size: 0.62rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  line-height: 1.3;
}
.topbar-user form { display: contents; }
.topbar-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  width: auto;
  border-radius: 0.125rem;
}
.topbar-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); color: var(--topbar-text); }
.topbar-btn--back { font-size: 1.1rem; padding: 0.1rem 0.5rem; }
.topbar-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.25rem;
  line-height: 1;
  touch-action: manipulation;
}
.topbar-ps-scheme {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-right: 0.1rem;
}
.topbar-ps-scheme-toggle,
.topbar-ps-scheme-lock {
  min-width: 1.7rem !important;
  min-height: 1.7rem !important;
  padding: 0.12rem !important;
  font-size: 0.72rem;
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.62) !important;
  opacity: 0.85;
}
.topbar-ps-icon {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}
.topbar-ps-scheme-toggle[data-state="light"] .topbar-ps-bulb-off,
.topbar-ps-scheme-toggle[data-state="dark"] .topbar-ps-bulb-on {
  display: none;
}
.topbar-ps-scheme-lock:not(.is-locked) .topbar-ps-lock-closed,
.topbar-ps-scheme-lock.is-locked .topbar-ps-lock-open {
  display: none;
}
.topbar-ps-scheme-toggle:hover:not(:disabled),
.topbar-ps-scheme-lock:hover {
  opacity: 1;
  color: var(--topbar-text) !important;
}
.topbar-ps-scheme-lock.is-locked {
  opacity: 1;
  border-color: rgba(255,255,255,0.42) !important;
  color: var(--topbar-text) !important;
}
.topbar-nav-mode {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 0.3rem;
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1;
}
.topbar-nav-mode-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  padding: 0.2rem 0.5rem;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: var(--topbar-text);
  opacity: 0.72;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.topbar-nav-mode-opt:last-child { border-right: none; }
.topbar-nav-mode-opt:hover {
  opacity: 1;
  background: rgba(255,255,255,0.08);
}
.topbar-nav-mode-opt.is-active {
  opacity: 1;
  font-weight: 600;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
@media (max-width: 720px) {
  .topbar-nav-mode-opt { padding: 0.2rem 0.35rem; font-size: 0.62rem; }
}
.topbar-btn-short { display: none; }

/* Hamburger - hidden on desktop */
.topbar-hamburger {
  display: none;
  background: transparent;
  border: none;
  color: var(--topbar-text);
  padding: 0.25rem;
  width: auto;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.topbar-hamburger:hover { opacity: 1; background: transparent; }

/* Shell */
.shell { display: flex; overflow: hidden; height: 100%; position: relative; }

/* Sidebar */
.sidebar { width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; flex-shrink: 0; transition: width 0.15s ease; display: flex; flex-direction: column; }

.sidebar-controls-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-controls-primary,
.sidebar-controls-util {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.sc-btn { background: none; border: 1px solid transparent; color: var(--text-dim); font-size: 0.7rem; padding: 0.125rem 0.3rem; cursor: pointer; width: auto; line-height: 1.4; border-radius: 0.125rem; }
.sc-btn:hover { background: var(--hover); color: var(--text); border-color: var(--border); }
.sc-btn.active { color: var(--accent); border-color: var(--border); }
.sc-chevron {
  font-size: 0;
  color: var(--text-muted);
  padding: 0.2rem 0.3rem;
}
.sc-chevron::before {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: inherit;
}
.sc-chevron--down::before  { content: '▾'; }
.sc-chevron--right::before { content: '›'; }
.sc-chevron--left::before  { content: '‹'; }

.sidebar-restore { display: none; width: 18px; min-width: 18px; background: var(--surface); border: none; border-right: 1px solid var(--border); color: var(--text-dim); font-size: 0.875rem; cursor: pointer; flex-shrink: 0; padding: 0; align-items: center; justify-content: center; }
.sidebar-restore:hover { background: var(--hover); color: var(--text); }

/* Shared rail hover-label - see app.ejs JS for positioning */
.rail-tooltip {
  display: none;
  position: fixed;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.8rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.125rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
}

/* Rail state (desktop only - mobile uses the full-label drawer) */
@media (min-width: 641px) {
[data-sidebar="rail"] .sidebar { width: var(--sidebar-rail-w); }
[data-sidebar="rail"][data-qa-edit="true"] .sidebar { width: calc(var(--sidebar-rail-w) + 24px); }
[data-sidebar="rail"] .sidebar-controls-bar {
  display: contents;
}
[data-sidebar="rail"] .sidebar-controls-primary {
  order: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 0 0.25rem;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
[data-sidebar="rail"] .sidebar-scroll {
  order: 2;
  flex: 1 1 auto;
  min-height: 0;
}
[data-sidebar="rail"] .sidebar-nav {
  overflow: visible;
}
[data-sidebar="rail"] .sidebar-controls-util {
  order: 3;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0.35rem 0;
  gap: 0.25rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
[data-sidebar="rail"] .sidebar-footer {
  order: 4;
}
[data-sidebar="rail"] .sc-btn {
  width: 34px;
  min-height: 28px;
  padding: 0.2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
[data-sidebar="rail"] .sidebar-nav a {
  font-size: 0;
  padding: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-wrap: nowrap;
  gap: 0;
  border-left-width: 3px;
}
[data-sidebar="rail"] .sidebar-nav a::before {
  content: attr(data-rail-display);
  line-height: 1;
  display: block;
  pointer-events: none;
}
[data-sidebar="rail"] .sidebar-nav a.rail-glyph--icon::before {
  font-size: 1.1rem;
}
[data-sidebar="rail"] .sidebar-nav a.rail-glyph--short::before {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
[data-sidebar="rail"] .sidebar-group-items a {
  min-height: 36px;
  padding: 0;
  border-left-width: 3px;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
[data-sidebar="rail"] .sidebar-group-items a::before {
  content: attr(data-rail-display);
  line-height: 1;
  display: block;
  pointer-events: none;
}
[data-sidebar="rail"] .sidebar-group-items a.rail-glyph--icon::before { font-size: 0.95rem; }
[data-sidebar="rail"] .sidebar-group-items a.rail-glyph--short::before {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
[data-sidebar="rail"] .sidebar-zone-label {
  height: 0;
  padding: 0;
  margin: 0.4rem 0.65rem;
  border-top: 1px solid var(--border);
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
[data-sidebar="rail"] .sidebar-zone-label-item {
  list-style: none;
  margin: 0.4rem 0.65rem 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
[data-sidebar="rail"] .sidebar-zone-label-item .sidebar-zone-label {
  display: none;
}
[data-sidebar="rail"] .sidebar-nav--top {
  border-bottom: none;
  padding-bottom: 0;
}
[data-sidebar="rail"] .sidebar-nav--bottom {
  border-top: none;
  padding-top: 0;
}
[data-sidebar="rail"] .sidebar-nav-item--sep-after,
[data-sidebar="rail"] .sidebar-group--sep-after {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
[data-sidebar="rail"] .sidebar-nav-item--sep-after > a::after {
  content: '';
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0;
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}
[data-sidebar="rail"] .sidebar-group--quickaccess {
  border-bottom: none;
  margin-bottom: 0.25rem;
  padding-bottom: 0;
}
[data-sidebar="rail"] .sidebar-nav--top,
[data-sidebar="rail"] .sidebar-nav--bottom { overflow: visible; }
[data-sidebar="rail"] .qa-star { padding: 0 0.35rem; font-size: 0.7rem; }
[data-sidebar="rail"] .sidebar-quickaccess-label { display: none; }
[data-sidebar="rail"] .sidebar-group-header { display: none; }
[data-sidebar="rail"] .sidebar-group-toggle { display: none; }
[data-sidebar="rail"] .sidebar-group-items.collapsed { display: block; }
[data-sidebar="rail"] .sidebar-group { border-top: none; margin-top: 0; padding-top: 0; }
[data-sidebar="rail"] .sidebar-footer-actions > :not(:first-child)::before { display: none; }
[data-sidebar="rail"] .sidebar-footer {
  padding: 0.5rem 0 0.75rem;
  align-items: center;
  gap: 0.35rem;
}
[data-sidebar="rail"] .sidebar-footer-user { display: none; }
[data-sidebar="rail"] .sidebar-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}
[data-sidebar="rail"] .sidebar-collapse-all-btn { display: none; }
[data-sidebar="rail"] .sidebar-footer-link--support,
[data-sidebar="rail"] .sidebar-footer-signout .sidebar-footer-link {
  width: 28px;
  height: 24px;
  padding: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-dim);
}
[data-sidebar="rail"] .sidebar-footer-link--support::before { content: '?'; font-size: 0.7rem; }
[data-sidebar="rail"] .sidebar-footer-link--support:hover,
[data-sidebar="rail"] .sidebar-footer-signout .sidebar-footer-link:hover { background: var(--hover); text-decoration: none; }
[data-sidebar="rail"] .sidebar-footer-signout .sidebar-footer-link::before { content: '→'; font-size: 0.7rem; color: var(--text-muted); }
[data-sidebar="rail"] .sidebar-footer-signout .sidebar-footer-link:hover::before { color: var(--text); }
[data-sidebar="rail"] .nav-badge { display: none; }
[data-sidebar="rail"] .nav-badge-dot {
  display: block;
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 1px var(--surface);
  pointer-events: none;
}
[data-sidebar="rail"] .sidebar-footer-link--support[data-badge-dot],
[data-sidebar="rail"] .sidebar-footer-link--support .nav-badge-dot { display: none; }
}
/* The hover label used to be a CSS ::after popping out past the rail's edge, which required
   overflow:visible on .sidebar-nav - but that forces vertical overflow to behave like "visible"
   too (browsers couple the two axes when only one is "visible"), breaking scroll on a long nav.
   Scroll wins: the label is now a single shared element (#rail-tooltip in app.ejs), positioned
   with JS on hover via getBoundingClientRect so it isn't clipped by the now-scrollable nav. */

/* Closed state */
[data-sidebar="closed"] .sidebar { width: 0; border-right: none; overflow: hidden; }
[data-sidebar="closed"] .sidebar-restore { display: flex; }

.sidebar-nav { list-style: none; padding: 0.5rem 0; flex: 0 0 auto; overflow: visible; min-height: 0; }
.sidebar-nav--top  { flex: none; overflow: visible; min-height: unset; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); }
.sidebar-nav--bottom { flex: none; overflow: visible; min-height: unset; padding-top: 0.25rem; border-top: 1px solid var(--border); }
.sidebar-nav > li:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.sidebar-group--sep-after,
.sidebar-nav-item--sep-after { border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; padding-bottom: 0.5rem; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.625rem 1rem 0.625rem calc(1rem - 3px);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  line-height: 1.3;
}
.sidebar-nav a:hover  { background: var(--hover); color: var(--text); }
.sidebar-nav a.active {
  background: var(--hover);
  color: var(--text);
  font-weight: 700;
  border-left-color: var(--accent);
}
.sidebar-nav--top a,
.sidebar-nav--bottom a {
  font-size: 1rem;
  font-weight: 600;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.sidebar-nav--top .sidebar-nav-item > a:not(.active) {
  border-left-color: var(--sidebar-top-accent, var(--text-dim));
  color: var(--text-muted);
}
.sidebar-nav--top .sidebar-nav-item > a:not(.active):hover {
  background: var(--sidebar-top-accent-soft, color-mix(in srgb, var(--text-dim) 12%, transparent));
  color: var(--text);
  border-left-color: var(--sidebar-top-accent, var(--text-dim));
}
.sidebar-nav--bottom .sidebar-nav-item > a:not(.active) {
  border-left-color: var(--sidebar-top-accent, var(--text-dim));
  color: var(--text-muted);
}
.sidebar-nav--bottom .sidebar-nav-item > a:not(.active):hover {
  background: var(--sidebar-top-accent-soft, color-mix(in srgb, var(--text-dim) 12%, transparent));
  color: var(--text);
  border-left-color: var(--sidebar-top-accent, var(--text-dim));
}
.sidebar-nav--top a.active,
.sidebar-nav--bottom a.active { font-weight: 700; }

.sidebar-nav-item { display: flex; align-items: stretch; }
.sidebar-nav-item > a { flex: 1 1 auto; min-width: 0; }
/* Extend the row's hover/active background across the star button too, so the highlighted
   row reads as one continuous bar instead of stopping short at the link's own edge. */
.sidebar-nav a:hover ~ .qa-toggle-form,
.sidebar-nav a.active ~ .qa-toggle-form { background: var(--hover); }

/* Star toggles are clutter on every row by default - only shown while the user has explicitly
   turned on "edit quick access" mode via the sc-btn in sidebar-controls (see app.ejs JS). */
.qa-toggle-form { display: none; flex-shrink: 0; }
[data-qa-edit="true"] .qa-toggle-form { display: flex; }
/* Buttons don't reliably stretch to a flex row's height the way a div would (a long-standing
   cross-browser quirk for form controls) - set height:100% explicitly rather than relying on
   align-items:stretch, or the star sits pinned to the top of the (taller) row instead of centered. */
.qa-star {
  display: flex; align-items: center; justify-content: center; height: 100%;
  background: none; border: none; cursor: pointer; padding: 0 0.75rem;
  font-size: 0.8rem; line-height: 1; color: var(--text-dim); opacity: 0.45;
}
.qa-star:hover  { opacity: 1; color: var(--text); }
.qa-star.active { opacity: 1; color: var(--accent); }
/* Rail is icon-only by default, so the star only needs to fit when edit mode is actually on
   (the rail widens above to make room for it); closed hides the whole sidebar regardless. */
[data-sidebar="closed"] .qa-toggle-form { display: none !important; }

/* Quick Access sits first in the list (unlike Pinned/Watchlist/groups, which trail the regular
   sections) - its own border-top has nothing above it to separate from, so it needs a border
   below instead, separating it from the regular nav items that immediately follow it. */
.sidebar-group--quickaccess { border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.sidebar-group--quickaccess + .sidebar-group { border-top: none; margin-top: 0; }

/* Inline Quick Access - labeled block under Dashboard / Directory */
.sidebar-quickaccess-inline {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
}
.sidebar-quickaccess-label {
  padding: 0.5rem 1rem 0.25rem;
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sidebar-quickaccess-inline .sidebar-nav { padding-top: 0; }

/* Zone labels (Home, Modules, …) */
.sidebar-zone-label {
  padding: 0.625rem 1rem 0.2rem;
  margin: 0;
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sidebar-zone-label-item { list-style: none; }

/* Sidebar groups */
.sidebar-group { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.sidebar-group-header {
  display: flex; align-items: stretch; width: 100%;
}
.sidebar-group-label {
  flex: 1; min-width: 0; display: flex; align-items: center;
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  color: var(--text-dim); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  text-decoration: none;
}
.sidebar-group-label:hover { color: var(--text); }
.sidebar-group-label.active { color: var(--text); }
.sidebar-group-chevron {
  flex-shrink: 0;
  width: 2.25rem; min-width: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  padding: 0.25rem 0;
  color: var(--text-dim);
}
.sidebar-group-chevron:hover { color: var(--text); }
.sidebar-group-toggle {
  display: flex; align-items: center; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem 0 0.5rem 1rem;
  color: var(--text-muted); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
.sidebar-group-toggle .sidebar-group-label {
  flex: 1; min-width: 0;
  padding: 0;
}
.sidebar-group-count {
  flex-shrink: 0;
  margin-left: 0.35rem;
  margin-right: 0.15rem;
  min-width: 1.2rem;
  padding: 0.12rem 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.15;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--hover) 75%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-align: center;
}
.sidebar-group-toggle:hover .sidebar-group-count {
  color: var(--text);
  border-color: color-mix(in srgb, var(--border) 65%, var(--text-muted));
}
.sidebar-group-toggle .sidebar-group-arrow {
  flex-shrink: 0;
  width: 2.5rem; min-width: 2.5rem;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-group-toggle:hover { color: var(--text); }
.sidebar-group-toggle:hover .sidebar-group-label { color: var(--text); }
.sidebar-group-arrow {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}
.sidebar-group-toggle:hover .sidebar-group-arrow { color: var(--text); }
.sidebar-group-chevron[aria-expanded="true"] .sidebar-group-arrow,
.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-arrow { transform: rotate(90deg); }
.sidebar-group-items.collapsed { display: none; }
.sidebar-group-items a {
  display: block;
  padding: 0.55rem 1rem 0.55rem calc(1.25rem - 3px);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar-group-items a:hover { background: var(--hover); color: var(--text); }
.sidebar-group-items a.nav-entity-accent:not(.active) {
  border-left-color: var(--entity-accent-marker, var(--entity-accent));
  color: var(--text-muted);
}
.sidebar-group-items a.nav-entity-accent:not(.active):hover {
  background: var(--entity-accent-soft, var(--hover));
  color: var(--text);
  border-left-color: var(--entity-accent-marker, var(--entity-accent));
}
/* Active context / pinned row - accent via stripe + soft fill; label stays shell text */
.sidebar-group-items a.nav-entity-accent.active,
.sidebar-group--entity-context .sidebar-group-items a.nav-entity-accent.active,
.sidebar-group--profile-context .sidebar-group-items a.nav-entity-accent.active,
.sidebar-group--token-context .sidebar-group-items a.nav-entity-accent.active,
.sidebar-group--self-profile .sidebar-group-items a.nav-entity-accent.active {
  color: var(--text);
  font-weight: 700;
  border-left-color: var(--entity-accent-marker, var(--entity-accent));
  background: var(--entity-accent-soft);
}
.sidebar-group-items a.nav-entity-accent.active:hover,
.sidebar-group--entity-context .sidebar-group-items a.nav-entity-accent.active:hover,
.sidebar-group--profile-context .sidebar-group-items a.nav-entity-accent.active:hover,
.sidebar-group--token-context .sidebar-group-items a.nav-entity-accent.active:hover,
.sidebar-group--self-profile .sidebar-group-items a.nav-entity-accent.active:hover {
  color: var(--text);
  background: var(--entity-accent-soft);
}

.sidebar-context-flags {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.sidebar-context-flag {
  font-size: 0.62rem;
  line-height: 1;
  color: var(--text-dim);
  opacity: 0.9;
}
.sidebar-context-flag--favorite { color: #d4a72c; }
.sidebar-context-flag--pinned,
.sidebar-context-flag--watching {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.08rem 0.28rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
}
.sidebar-context-flag--watched { font-size: 0.68rem; }
.sidebar-group-items a:hover .sidebar-context-flag,
.sidebar-group-items a.active .sidebar-context-flag { opacity: 1; }
[data-sidebar="rail"] .sidebar-context-flags { display: none; }

/* Sidebar footer */
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 0.625rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex-shrink: 0;
}
.sidebar-footer-user {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  min-width: 0;
}
.sidebar-footer-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  max-width: 100%;
  border-radius: 0.25rem;
  padding: 0.15rem 0.35rem;
  margin: -0.15rem -0.35rem;
}
.sidebar-footer-name:hover {
  color: var(--text);
  background: var(--hover);
  text-decoration: none;
}
.sidebar-footer-role {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.sidebar-footer-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-decoration: none;
}
.sidebar-footer-meta:hover { color: var(--text); text-decoration: underline; }
.sidebar-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
}
.sidebar-footer-actions > :not(:first-child)::before {
  content: '·';
  margin-right: 0.65rem;
  color: var(--text-dim);
  opacity: 0.65;
  pointer-events: none;
}
.sidebar-collapse-all-btn {
  width: 100%;
  margin-top: 0.125rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--hover) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
}
.sidebar-collapse-all-btn:hover {
  color: var(--text);
  background: var(--hover);
  border-color: color-mix(in srgb, var(--border) 60%, var(--text-muted));
}
.sidebar-footer-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
  width: auto;
}
.sidebar-footer-link:hover {
  color: var(--text);
  text-decoration: none;
  background: var(--hover);
  border-radius: 0.2rem;
  padding: 0.1rem 0.25rem;
  margin: -0.1rem -0.25rem;
}
.sidebar-footer-link--util { margin-left: auto; color: var(--text-muted); font-size: 0.68rem; }
.sidebar-footer-signout { display: contents; }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 0.25rem;
}
.status-dot.status-green    { background: #16a34a; }
.status-dot.status-yellow   { background: #d97706; }
.status-dot.status-red      { background: #dc2626; }
.status-dot.status-inactive { background: #6b7280; }

/* Hidden topbar — keep chrome (menu, layout controls); hide branding and account in topbar only */
body.topbar-hidden .topbar .topbar-brand,
body.topbar-hidden .topbar .topbar-tagline,
body.topbar-hidden .topbar .topbar-icon-img,
body.topbar-hidden .topbar-user .topbar-username,
body.topbar-hidden .topbar-user .role-badge--topbar,
body.topbar-hidden .topbar-user .topbar-btn--signout,
body.topbar-hidden .topbar-user form[action="/auth/logout"] {
  display: none !important;
}
body.browser.topbar-hidden .topbar {
  display: flex !important;
}

/* Backdrop - hidden by default, shown on mobile nav open */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}

/* Main area */
.main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; }
.main-area > .accent-surface { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; }

/* Tabbar */
.tabbar { border-bottom: 1px solid var(--border); background: var(--surface); padding: 0 1rem; flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Multi-row hub + section tabs: one shared domain chrome */
.tabbar-block {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabbar-block .tabbar {
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.tabbar-block .tabbar:last-child { border-bottom: none; }

.account-profile-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  text-align: center;
}
.account-profile-bar-empty {
  margin: 0;
  font-size: 0.85rem;
}
.account-profile-bar-link {
  text-decoration: none;
  color: var(--text);
}
.account-profile-bar-link code {
  font-size: 0.95rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius);
  background: var(--hover);
  border: 1px solid var(--border);
}
.account-profile-bar-link:hover code {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--hover));
}

.tabbar-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: min-content;
}
.tabbar-nav a {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tabbar-nav a:hover  { color: var(--text); background: color-mix(in srgb, var(--hover) 80%, transparent); }
.tabbar-nav a.active { color: var(--text); border-bottom-color: var(--accent); }
.tabbar-block.tabbar--hub-main .tabbar-nav a:not(.active):hover {
  background: color-mix(in srgb, var(--hub-main-soft, var(--hover)) 85%, var(--hover));
}
.tabbar-block.tabbar--hub-finance .tabbar-nav a:not(.active):hover {
  background: color-mix(in srgb, var(--hub-finance-soft, var(--hover)) 85%, var(--hover));
}
.tabbar-block.tabbar--hub-communication .tabbar-nav a:not(.active):hover {
  background: color-mix(in srgb, var(--hub-communication-soft, var(--hover)) 85%, var(--hover));
}
.tabbar-block.tabbar--hub-entities .tabbar-nav a:not(.active):hover {
  background: color-mix(in srgb, var(--hub-entities-soft, var(--hover)) 85%, var(--hover));
}
.tabbar-block[class*="tabbar--domain-"] .tabbar-nav a:not(.active):hover {
  background: color-mix(in srgb, var(--hover) 65%, transparent);
}
.tabbar-nav-item {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.tabbar-nav-item .qa-toggle-form {
  display: none;
  align-items: stretch;
}
[data-qa-edit="true"] .tabbar-nav-item .qa-toggle-form {
  display: flex;
}
.tabbar-nav-item .qa-star { padding: 0 0.5rem; font-size: 0.75rem; }

/* Admin hub domains - per-area color accents */
body[data-admin-domain="core"] .main-area { box-shadow: inset 4px 0 0 var(--domain-core); }
body[data-admin-domain="requests"] .main-area { box-shadow: inset 4px 0 0 var(--domain-requests); }
body[data-admin-domain="config"] .main-area { box-shadow: inset 4px 0 0 var(--domain-config); }
body[data-admin-domain="directory"] .main-area { box-shadow: inset 4px 0 0 var(--domain-directory); }
body[data-admin-domain="treasury"] .main-area { box-shadow: inset 4px 0 0 var(--domain-treasury); }
body[data-admin-domain="faucet"] .main-area { box-shadow: inset 4px 0 0 var(--domain-faucet); }
body[data-admin-domain="mail"] .main-area { box-shadow: inset 4px 0 0 var(--domain-mail); }
body[data-admin-domain="support"] .main-area { box-shadow: inset 4px 0 0 var(--domain-support); }
body[data-admin-domain="server"] .main-area { box-shadow: inset 4px 0 0 var(--domain-server); }
body[data-admin-domain="coming-soon"] .main-area { box-shadow: inset 4px 0 0 var(--domain-coming-soon); }
body[data-admin-domain="core"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-core) 7%); }
body[data-admin-domain="requests"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-requests) 7%); }
body[data-admin-domain="config"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-config) 7%); }
body[data-admin-domain="directory"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-directory) 7%); }
body[data-admin-domain="treasury"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-treasury) 7%); }
body[data-admin-domain="faucet"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-faucet) 7%); }
body[data-admin-domain="mail"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-mail) 7%); }
body[data-admin-domain="support"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-support) 7%); }
body[data-admin-domain="server"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-server) 7%); }
body[data-admin-domain="coming-soon"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--domain-coming-soon) 7%); }

/* User hub groups - Account, Finance, Communication */
body[data-hub-group="main"] .main-area { box-shadow: inset 4px 0 0 var(--hub-main); }
body[data-hub-group="finance"] .main-area { box-shadow: inset 4px 0 0 var(--hub-finance); }
body[data-hub-group="communication"] .main-area { box-shadow: inset 4px 0 0 var(--hub-communication); }
body[data-hub-group="entities"] .main-area { box-shadow: inset 4px 0 0 var(--hub-entities); }
body[data-hub-group="main"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--hub-main) 7%); }
body[data-hub-group="finance"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--hub-finance) 7%); }
body[data-hub-group="communication"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--hub-communication) 7%); }
body[data-hub-group="entities"] .main-area > .accent-surface { background: color-mix(in srgb, var(--bg) 93%, var(--hub-entities) 7%); }

/* Entity context - breadcrumb between member + manage tab rows */
.tabbar--entity-member .tabbar-nav a.active {
  border-bottom-color: var(--entity-accent-marker, var(--entity-accent));
  color: var(--text);
  font-weight: 700;
}
.tabbar--entity-accent {
  box-shadow: inset 0 -3px 0 var(--entity-accent-marker, var(--entity-accent));
  background: var(--entity-accent-soft);
}
.tabbar--entity-accent .tabbar-nav a.active {
  border-bottom-color: var(--entity-accent-marker, var(--entity-accent));
  color: var(--text);
  font-weight: 700;
}
.entity-context-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 1rem;
  min-height: 2.125rem;
  background: var(--surface);
  color: var(--text);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid color-mix(in srgb, var(--entity-accent) 22%, var(--border));
  font-size: 0.8rem;
  line-height: 1.4;
}
.entity-context-header-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}
.identity-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.identity-mark-img {
  display: block;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--identity-dot, var(--border)) 35%, var(--border));
  background: color-mix(in srgb, var(--text) 10%, var(--surface));
  object-fit: contain;
  padding: 0.2rem;
  box-sizing: border-box;
}
.identity-mark--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--identity-initial-bg) 55%, var(--border));
  background: var(--identity-initial-bg, var(--accent));
  color: var(--identity-initial-fg, #fff);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  box-sizing: border-box;
}
.identity-mark--md.identity-mark--initial {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}
.identity-mark--lg.identity-mark--initial {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.35rem;
}
.profile-public-surface .identity-mark--lg .identity-mark-img,
.profile-public-surface .identity-mark--md .identity-mark-img {
  background: color-mix(in srgb, var(--text) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--text) 24%, var(--border));
  padding: 0.35rem;
}
.identity-mark--dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--identity-dot, var(--entity-accent-marker, var(--entity-accent, var(--accent))));
}
.identity-mark--xs .identity-mark--dot,
.identity-mark--xs.identity-mark--dot { width: 0.4375rem; height: 0.4375rem; }
.identity-mark--sm .identity-mark--dot,
.identity-mark--sm.identity-mark--dot { width: 0.5rem; height: 0.5rem; }
.identity-mark--md .identity-mark--dot,
.identity-mark--md.identity-mark--dot { width: 0.5625rem; height: 0.5625rem; }
.identity-mark--lg .identity-mark--dot,
.identity-mark--lg.identity-mark--dot { width: 3.5rem; height: 3.5rem; border-radius: var(--radius); }
.identity-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}
.identity-name-row-label {
  min-width: 0;
}
.sidebar-nav a .identity-mark,
.sidebar-group-items a .identity-mark {
  margin-right: 0.25rem;
}
.entity-context-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--entity-accent-marker, var(--entity-accent));
  flex-shrink: 0;
}
.entity-context-icon {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--entity-accent-marker, var(--entity-accent)) 35%, var(--border));
  background: var(--surface);
  flex-shrink: 0;
}
.entity-context-back {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.entity-context-back:hover { color: var(--entity-accent-marker, var(--entity-accent)); text-decoration: none; }
.entity-context-sep { opacity: 0.45; }
.entity-context-name {
  min-width: 0;
  color: var(--text);
}
.entity-context-meta {
  font-size: 0.82rem;
  color: var(--text-dim, var(--muted));
}
.entity-context-switcher { flex-shrink: 0; }
.entity-context-switcher-select {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  max-width: 14rem;
}
.sidebar-group--entity-context,
.sidebar-group--token-context,
.sidebar-group--profile-context,
.sidebar-group--self-profile {
  margin-top: 0.5rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}
.sidebar-group--entity-context .sidebar-group-label,
.sidebar-group--token-context .sidebar-group-label,
.sidebar-group--profile-context .sidebar-group-label,
.sidebar-group--self-profile .sidebar-group-label {
  display: block;
  padding: 0.2rem 1rem 0.15rem calc(1rem - 3px);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
[data-sidebar="rail"] .sidebar-group--entity-context .sidebar-group-label,
[data-sidebar="rail"] .sidebar-group--token-context .sidebar-group-label,
[data-sidebar="rail"] .sidebar-group--profile-context .sidebar-group-label,
[data-sidebar="rail"] .sidebar-group--self-profile .sidebar-group-label { display: none; }
[data-sidebar="rail"] .sidebar-group--entity-context .sidebar-group-items a.nav-entity-accent,
[data-sidebar="rail"] .sidebar-group--token-context .sidebar-group-items a.nav-entity-accent,
[data-sidebar="rail"] .sidebar-group--profile-context .sidebar-group-items a.nav-entity-accent,
[data-sidebar="rail"] .sidebar-group--self-profile .sidebar-group-items a.nav-entity-accent,
[data-sidebar="rail"] .sidebar-group-items a.nav-entity-accent {
  border-left-color: var(--entity-accent-marker, var(--entity-accent));
}
.sidebar-nav-item--domain > a.nav-domain.active {
  color: var(--text);
  border-left-color: var(--hub-accent-marker, var(--hub-accent));
  background: var(--hub-accent-soft);
  font-weight: 700;
}
.sidebar-nav-item--domain > a.nav-domain:not(.active) {
  border-left-color: var(--hub-accent-marker, var(--hub-accent));
  color: var(--text-muted);
}
.sidebar-nav-item--domain > a.nav-domain:not(.active):hover {
  background: var(--hub-accent-soft);
  color: var(--text);
  border-left-color: var(--hub-accent-marker, var(--hub-accent));
}

.tabbar--domain-core,
.tabbar-block.tabbar--domain-core { box-shadow: inset 0 -3px 0 var(--domain-core); background: var(--domain-core-soft); }
.tabbar--domain-requests,
.tabbar-block.tabbar--domain-requests { box-shadow: inset 0 -3px 0 var(--domain-requests); background: var(--domain-requests-soft); }
.tabbar--domain-config,
.tabbar-block.tabbar--domain-config { box-shadow: inset 0 -3px 0 var(--domain-config); background: var(--domain-config-soft); }
.tabbar--domain-directory,
.tabbar-block.tabbar--domain-directory { box-shadow: inset 0 -3px 0 var(--domain-directory); background: var(--domain-directory-soft); }
.tabbar--domain-treasury,
.tabbar-block.tabbar--domain-treasury { box-shadow: inset 0 -3px 0 var(--domain-treasury); background: var(--domain-treasury-soft); }
.tabbar--domain-faucet,
.tabbar-block.tabbar--domain-faucet { box-shadow: inset 0 -3px 0 var(--domain-faucet); background: var(--domain-faucet-soft); }
.tabbar--domain-mail,
.tabbar-block.tabbar--domain-mail { box-shadow: inset 0 -3px 0 var(--domain-mail); background: var(--domain-mail-soft); }
.tabbar--domain-support,
.tabbar-block.tabbar--domain-support { box-shadow: inset 0 -3px 0 var(--domain-support); background: var(--domain-support-soft); }
.tabbar--domain-server,
.tabbar-block.tabbar--domain-server { box-shadow: inset 0 -3px 0 var(--domain-server); background: var(--domain-server-soft); }
.tabbar--domain-coming-soon,
.tabbar-block.tabbar--domain-coming-soon { box-shadow: inset 0 -3px 0 var(--domain-coming-soon); background: var(--domain-coming-soon-soft); }
.tabbar--hub-main,
.tabbar-block.tabbar--hub-main { box-shadow: inset 0 -3px 0 var(--hub-main-marker, var(--hub-main)); background: var(--hub-main-soft); }
.tabbar--hub-finance,
.tabbar-block.tabbar--hub-finance { box-shadow: inset 0 -3px 0 var(--hub-finance-marker, var(--hub-finance)); background: var(--hub-finance-soft); }
.tabbar--hub-communication,
.tabbar-block.tabbar--hub-communication { box-shadow: inset 0 -3px 0 var(--hub-communication-marker, var(--hub-communication)); background: var(--hub-communication-soft); }
.tabbar--hub-entities,
.tabbar-block.tabbar--hub-entities { box-shadow: inset 0 -3px 0 var(--hub-entities-marker, var(--hub-entities)); background: var(--hub-entities-soft); }
.tabbar--entity-accent,
.tabbar-block.tabbar--entity-accent { box-shadow: inset 0 -3px 0 var(--entity-accent-marker, var(--entity-accent)); background: var(--entity-accent-soft); }
.tabbar-nav a.nav-domain--core.active { border-bottom-color: var(--domain-core); color: var(--domain-core); }
.tabbar-nav a.nav-domain--requests.active { border-bottom-color: var(--domain-requests); color: var(--domain-requests); }
.tabbar-nav a.nav-domain--config.active { border-bottom-color: var(--domain-config); color: var(--domain-config); }
.tabbar-nav a.nav-domain--directory.active { border-bottom-color: var(--domain-directory); color: var(--domain-directory); }
.tabbar-nav a.nav-domain--treasury.active { border-bottom-color: var(--domain-treasury); color: var(--domain-treasury); }
.tabbar-nav a.nav-domain--faucet.active { border-bottom-color: var(--domain-faucet); color: var(--domain-faucet); }
.tabbar-nav a.nav-domain--mail.active { border-bottom-color: var(--domain-mail); color: var(--domain-mail); }
.tabbar-nav a.nav-domain--support.active { border-bottom-color: var(--domain-support); color: var(--domain-support); }
.tabbar-nav a.nav-domain--server.active { border-bottom-color: var(--domain-server); color: var(--domain-server); }
.tabbar-nav a.nav-domain--coming-soon.active { border-bottom-color: var(--domain-coming-soon); color: var(--domain-coming-soon); }
.tabbar-nav a.nav-domain--hub-main.active { border-bottom-color: var(--hub-main-marker, var(--hub-main)); color: var(--text); font-weight: 700; }
.tabbar-nav a.nav-domain--hub-finance.active { border-bottom-color: var(--hub-finance-marker, var(--hub-finance)); color: var(--text); font-weight: 700; }
.tabbar-nav a.nav-domain--hub-communication.active { border-bottom-color: var(--hub-communication-marker, var(--hub-communication)); color: var(--text); font-weight: 700; }
.tabbar-nav a.nav-domain--hub-entities.active { border-bottom-color: var(--hub-entities-marker, var(--hub-entities)); color: var(--text); font-weight: 700; }
.hub-card--domain-core { outline: 2px solid var(--domain-core); outline-offset: -2px; }
.hub-card--domain-requests { outline: 2px solid var(--domain-requests); outline-offset: -2px; }
.hub-card--domain-config { outline: 2px solid var(--domain-config); outline-offset: -2px; }
.hub-card--domain-directory { outline: 2px solid var(--domain-directory); outline-offset: -2px; }
.hub-card--domain-treasury { outline: 2px solid var(--domain-treasury); outline-offset: -2px; }
.hub-card--domain-faucet { outline: 2px solid var(--domain-faucet); outline-offset: -2px; }
.hub-card--domain-mail { outline: 2px solid var(--domain-mail); outline-offset: -2px; }
.hub-card--domain-support { outline: 2px solid var(--domain-support); outline-offset: -2px; }
.hub-card--domain-server { outline: 2px solid var(--domain-server); outline-offset: -2px; }
.hub-card--domain-coming-soon { outline: 2px solid var(--domain-coming-soon); outline-offset: -2px; }
.hub-card--hub-main { outline: 2px solid var(--hub-main); outline-offset: -2px; }
.hub-card--hub-finance { outline: 2px solid var(--hub-finance); outline-offset: -2px; }
.hub-card--hub-communication { outline: 2px solid var(--hub-communication); outline-offset: -2px; }
.hub-card--hub-entities { outline: 2px solid var(--hub-entities); outline-offset: -2px; }

/* Main content */
.main-area > .accent-surface > main { flex: 1; overflow-y: auto; padding: 1.5rem; min-height: 0; }
main { flex: 1; overflow-y: auto; padding: 1.5rem; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 0.5rem 1rem; font-size: 0.75rem; color: var(--text-dim); background: var(--surface); flex-shrink: 0; }

/* ─── Panels ──────────────────────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--border); padding: 1.5rem; margin-bottom: 1.25rem; }
.panel h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
/* Inline notice/callout - was previously hand-rolled per call site with var(--warning, #fallback)
   that no theme actually defined, so it always rendered the light fallback colors with inherited
   (theme) text, breaking in dark-leaning themes. Built from vars every theme already pairs
   correctly instead. */
.notice { border: 1px solid var(--border-input); background: var(--hover); color: var(--text); padding: 0.6rem 0.875rem; font-size: 0.8rem; margin-bottom: 1rem; border-radius: var(--radius, 0.125rem); }

/* ─── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: var(--surface); border: 1px solid var(--border); }
th { text-align: left; padding: 0.625rem 1rem; font-weight: 600; font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
td { padding: 0.625rem 1rem; border-bottom: 1px solid var(--bg); }
tr:last-child td { border-bottom: none; }

/* ─── Stat grid ───────────────────────────────────────────────────────────── */
.stat-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.25rem 1.75rem;
  min-width: 170px;
  container-type: inline-size;
}
a.stat--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
a.stat--link:hover {
  border-color: var(--accent);
  background: var(--hover);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip-btn { min-width: 3rem; }
.vault-lock-chip { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; padding: 0.35rem 0.5rem; }
.vault-lock-chip-meta { display: block; font-size: 0.65rem; font-weight: 400; opacity: 0.85; margin-top: 0.15rem; }
.vault-lock-card--focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.vault-lock-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.vault-lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}
.stat-value {
  display: block;
  font-size: clamp(1rem, 10cqi, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.stat-value--tier {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-width: 100%;
}
.stat-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Token stat cards — rail accent + lock state */
.stat--token {
  position: relative;
  border-left: 3px solid var(--stat-rail-accent, var(--border));
  background: color-mix(in srgb, var(--stat-rail-accent, var(--border)) 6%, var(--surface));
}
.stat--token.stat--lock-locked {
  border-left-style: dashed;
  background: color-mix(in srgb, var(--stat-rail-accent, var(--border)) 10%, var(--surface));
  opacity: 0.92;
}
.stat--token.stat--lock-mixed {
  border-left-width: 4px;
}
.stat-lock-badge {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.12rem 0.28rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  opacity: 0.9;
  pointer-events: none;
}
.stat--lock-locked .stat-lock-badge {
  border-color: color-mix(in srgb, var(--stat-rail-accent) 50%, var(--border));
  color: var(--stat-rail-accent, var(--text-muted));
}
a.stat--token.stat--link:hover {
  border-left-color: var(--stat-rail-accent, var(--accent));
  background: color-mix(in srgb, var(--stat-rail-accent, var(--accent)) 14%, var(--hover));
}

/* Stacked tables — card rows on narrow screens (add class table--stack + data-label on td) */
.table--stack { width: 100%; }
@media (max-width: 640px) {
  .table-wrap:has(.table--stack) { overflow-x: visible; }
  .table--stack { min-width: 0 !important; border: none; background: transparent; }
  .table--stack thead { display: none; }
  .table--stack tbody { display: flex; flex-direction: column; gap: 0.65rem; }
  .table--stack tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.75rem 0.85rem;
  }
  .table--stack tr[data-rail-accent] {
    border-left: 3px solid var(--row-rail-accent, var(--border));
  }
  .table--stack td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    border: none;
    padding: 0.3rem 0;
    font-size: 0.85rem;
  }
  .table--stack td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    flex: 0 0 38%;
    max-width: 38%;
  }
  .table--stack td.actions-cell {
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
  }
  .table--stack td.actions-cell::before { display: none; }
  .table--stack td[data-label=""]::before,
  .table--stack td:not([data-label])::before { display: none; }
}

/* Rail section panels (server assets browse) */
.rail-panel {
  border-left: 3px solid var(--rail-accent, var(--border));
}
.rail-panel__head .badge-sm {
  border-color: color-mix(in srgb, var(--rail-accent, var(--border)) 40%, var(--border));
  color: var(--rail-accent, inherit);
}

/* ─── Monetary ladder (finance hub) ───────────────────────────────────────── */
.monetary-ladder-panel {
  padding: 0;
  overflow: hidden;
}
.monetary-ladder-disclosure { border-bottom: 1px solid var(--border); }
.monetary-ladder-panel > .monetary-ladder-disclosure:last-child { border-bottom: none; }
.monetary-ladder-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--hover);
  border-left: 3px solid var(--accent);
}
.monetary-ladder-disclosure__summary::-webkit-details-marker { display: none; }
.monetary-ladder-disclosure__summary:hover { filter: brightness(1.04); }
.monetary-ladder-disclosure__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.monetary-ladder-disclosure__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}
.monetary-ladder-disclosure__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.monetary-ladder-disclosure__badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
}
.monetary-ladder-disclosure__hint {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.monetary-ladder-disclosure__arrow {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}
.monetary-ladder-disclosure__controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.finance-pin-form { display: flex; }
.finance-pin-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.monetary-ladder-disclosure--gold > .monetary-ladder-disclosure__summary .finance-pin-btn.active {
  color: var(--domain-core);
  border-color: var(--domain-core);
}
.monetary-ladder-disclosure--blue > .monetary-ladder-disclosure__summary .finance-pin-btn.active {
  color: var(--hub-communication);
  border-color: var(--hub-communication);
}
.monetary-ladder-disclosure--gold > .monetary-ladder-disclosure__summary {
  border-left-color: var(--domain-core);
  background: var(--domain-core-soft);
}
.monetary-ladder-disclosure--gold > .monetary-ladder-disclosure__summary .monetary-ladder-disclosure__badge {
  border-color: var(--domain-core);
  color: var(--domain-core);
}
.monetary-ladder-disclosure--blue > .monetary-ladder-disclosure__summary {
  border-left-color: var(--hub-communication);
  background: var(--hub-communication-soft);
}
.monetary-ladder-disclosure--blue > .monetary-ladder-disclosure__summary .monetary-ladder-disclosure__badge {
  border-color: var(--hub-communication);
  color: var(--hub-communication);
}
.monetary-ladder-disclosure--gold > .monetary-ladder-disclosure__body {
  background: color-mix(in srgb, var(--surface) 93%, var(--domain-core) 7%);
}
.monetary-ladder-disclosure--gold .monetary-ladder-step,
.monetary-ladder-disclosure--gold .monetary-ladder-step--combo {
  border-color: color-mix(in srgb, var(--border) 60%, var(--domain-core) 40%);
  background: color-mix(in srgb, var(--surface) 90%, var(--domain-core) 10%);
}
.monetary-ladder-disclosure--gold .monetary-ladder-step:hover,
.monetary-ladder-disclosure--gold .monetary-ladder-step--combo:hover,
.monetary-ladder-disclosure--gold .monetary-ladder-step--combo:has(.monetary-ladder-step-combo-row--sub:hover),
.monetary-ladder-disclosure--gold .monetary-ladder-step--combo:has(.monetary-ladder-step-combo-hit:hover) {
  border-color: var(--domain-core);
  background: color-mix(in srgb, var(--surface) 82%, var(--domain-core) 18%);
}
.monetary-ladder-disclosure--gold .monetary-ladder-step-num {
  border-color: var(--domain-core);
  color: var(--domain-core);
  background: color-mix(in srgb, var(--surface) 80%, var(--domain-core) 20%);
}
.monetary-ladder-disclosure--gold .monetary-ladder-step-combo-row:hover,
.monetary-ladder-disclosure--gold .monetary-ladder-step-combo-row:focus-visible {
  background: color-mix(in srgb, var(--surface) 82%, var(--domain-core) 18%);
}
.monetary-ladder-disclosure--gold .monetary-ladder-connector-icon,
.monetary-ladder-disclosure--gold .monetary-ladder-connector-label {
  color: var(--domain-core);
}
.monetary-ladder-disclosure--gold .monetary-ladder-step-combo-row--sub::before {
  background: color-mix(in srgb, var(--surface) 80%, var(--domain-core) 20%);
  border-color: var(--domain-core);
  color: var(--domain-core);
}
.monetary-ladder-disclosure[open] > .monetary-ladder-disclosure__summary {
  border-bottom: 1px solid var(--border);
}
.monetary-ladder-disclosure[open] > .monetary-ladder-disclosure__summary .monetary-ladder-disclosure__arrow {
  transform: rotate(90deg);
}
.monetary-ladder-disclosure__body {
  padding: 1rem 1.25rem 1.25rem;
}
.monetary-ladder-intro { margin: 0 0 0.85rem; font-size: 0.82rem; }
.monetary-ladder-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.monetary-ladder-connector-slot {
  list-style: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: center;
  padding: 0 0.1rem;
}
.monetary-ladder-node {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
}
.monetary-ladder-node--combo {
  flex: 1 1 0;
}
.monetary-ladder-step--combo {
  cursor: default;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 100%;
}
.monetary-ladder-step--combo:hover {
  border-color: var(--border);
  background: var(--surface);
}
.monetary-ladder-step-combo {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 100%;
  height: 100%;
}
.monetary-ladder-step-combo-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.monetary-ladder-step-combo-hit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.monetary-ladder-step-combo-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  margin: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 0.125rem;
  transition: background 0.15s;
  min-height: 0;
}
.monetary-ladder-step-combo-row:hover,
.monetary-ladder-step-combo-row:focus-visible {
  background: var(--hover);
  outline: none;
}
.monetary-ladder-step-combo-row--primary {
  flex: 1 1 auto;
  justify-content: center;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.monetary-ladder-step-combo-row--sub {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border-top: 1px dashed var(--border);
}
.monetary-ladder-step-combo-row--sub::before {
  content: '↓';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.1rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  line-height: 1;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  pointer-events: none;
  z-index: 2;
}
.monetary-ladder-step-combo-row--sub .monetary-ladder-step-label {
  font-size: 0.82rem;
}
.monetary-ladder-step--combo:hover {
  border-color: var(--accent);
}
.monetary-ladder-step--combo:has(.monetary-ladder-step-combo-row--sub:hover) {
  border-color: var(--accent);
}
.monetary-ladder-step--combo:has(.monetary-ladder-step-combo-hit:hover) {
  border-color: var(--accent);
  background: var(--hover);
}
.monetary-ladder-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  flex-shrink: 0;
  padding: 0;
  color: var(--text-dim);
}
.monetary-ladder-connector-icon { font-size: 1.1rem; line-height: 1; }
.monetary-ladder-connector-label {
  font-size: 0.62rem;
  line-height: 1.1;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: 2.75rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.monetary-ladder-step {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}
.monetary-ladder-step:hover {
  border-color: var(--accent);
  background: var(--hover);
}
.monetary-ladder-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  background: var(--hover);
}
.monetary-ladder-step-num--branch {
  font-size: 0.85rem;
  font-weight: 600;
}
.monetary-ladder-step-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 100%;
}
.monetary-ladder-step-label {
  display: block;
  font-size: 0.88rem;
  line-height: 1.2;
}
.monetary-ladder-step-hint {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.monetary-ladder-step-detail {
  display: block;
  margin-top: 0.3rem;
  padding-top: 0.4rem;
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.monetary-ladder-faq-item summary {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.45rem 0.75rem;
}
.monetary-ladder-faq-item .disclosure-body {
  padding: 0.65rem 0.75rem;
}
.monetary-ladder-faq-answer {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.monetary-ladder-faq-answer a { color: var(--accent); }
.monetary-ladder-faq-answer a:hover { text-decoration: underline; }

/* ─── Info row ────────────────────────────────────────────────────────────── */
.info-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }

code { font-family: ui-monospace, monospace; font-size: 0.8rem; background: var(--hover); color: var(--text); padding: 0.1rem 0.35rem; border-radius: 0.125rem; }

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Single-line truncation (overflow:hidden + ellipsis + nowrap) - was hand-duplicated across a
   dozen unrelated selectors below; kept as one shared rule so the truncation behavior can't
   drift between call sites the way stat-box/tier-stat-box's overflow-wrap handling did. Each
   selector below keeps only the properties unique to it. */
.sidebar-footer-name,
.ig-pack-trigger-label,
.ig-pack-option-label,
.icon-card .icon-card-label,
.mail-from,
.mail-ti-from,
.mail-ti-snip,
.dashboard-user-chip-name,
.widget-row-memo, .tx-memo,
.browser-crumb-current,
.browser-tab-label,
.hub-room-row-preview,
.admin-faucet-name > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Misc ────────────────────────────────────────────────────────────────── */
.count { font-size: 0.875rem; font-weight: 400; color: var(--text-muted); margin-left: 0.5rem; }
.badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 0.125rem; font-size: 0.8rem; color: #fff; }
.badge-green  { background: #16a34a; }
.badge-red    { background: #dc2626; }
.badge-yellow { background: #ca8a04; }
.badge-gray   { background: #6b7280; }
.badge-blue   { background: #2563eb; }
.badge-purple { background: #7c3aed; }
.badge-orange { background: #b45309; }
.badge-dark   { background: #374151; }
.status-active   { color: #16a34a; }
.status-inactive { color: var(--text-dim); }

/* ─── Pagination ───────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }

/* ─── Theme picker ────────────────────────────────────────────────────────── */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; max-width: 700px; }
.theme-grid-families { max-width: 900px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.theme-family-card { border: 2px solid var(--border); cursor: pointer; overflow: hidden; border-radius: 0.125rem; user-select: none; }
.theme-family-card:hover { border-color: var(--text-muted); }
.theme-family-card.selected { border-color: var(--accent); }
.theme-family-previews { display: flex; }
.theme-preview-half { flex: 1; border: none; border-radius: 0; }
.theme-preview-half + .theme-preview-half { border-left: 1px solid var(--border); }
.scheme-toggle { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.scheme-option {
  display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem;
  border: 1px solid var(--border); border-radius: 0.125rem; cursor: pointer;
  font-size: 0.85rem; user-select: none; background: transparent; color: inherit;
  width: auto; font-family: inherit;
}
.scheme-option.selected { border-color: var(--accent); color: var(--accent); font-weight: 600; }
a.scheme-option,
a.exchange-rail-tab { text-decoration: none; }
.scheme-option input { width: auto; margin: 0; }
.theme-card { border: 2px solid var(--border); cursor: pointer; overflow: hidden; border-radius: 0.125rem; user-select: none; }
.theme-card:hover { border-color: var(--text-muted); }
.theme-card.selected { border-color: var(--accent); }
.theme-preview { height: 60px; display: flex; flex-direction: column; }
.tp-body { flex: 1; display: flex; }
.tp-sidebar { width: 28%; border-right-width: 1px; border-right-style: solid; }
.theme-label { display: block; padding: 0.3rem 0.5rem; font-size: 0.7rem; color: var(--text-muted); }
.theme-card.selected .theme-label { color: var(--accent); font-weight: 600; }
label.color-row { flex-direction: row; align-items: center; justify-content: space-between; font-size: 0.875rem; color: var(--text); gap: 0; }
label.color-row input[type=color] { width: 40px; height: 26px; border: 1px solid var(--border-input); cursor: pointer; padding: 2px; border-radius: 0.125rem; background: var(--surface); }

/* ─── Icon grid (picker + management page, src/public/icon-grid.js) ─────────── */
.icon-grid-controls { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.icon-grid-controls-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.icon-grid-controls-row-primary { align-items: center; }
.icon-grid-controls-row-primary .ig-q { flex: 1 1 200px; min-width: 10rem; max-width: 420px; }
.icon-grid-results { font-size: 0.78rem; margin: 0; flex: 1 1 auto; min-width: 8rem; }
.icon-grid-controls-row-filters {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}
.icon-grid-controls-row-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  min-height: 1.75rem;
}
.icon-grid-pack-nav {
  display: inline-flex;
  align-items: stretch;
  gap: 0.25rem;
  flex: 1 1 100%;
  max-width: none;
  min-width: 0;
}
.icon-grid-pack-nav .ig-pack-prev,
.icon-grid-pack-nav .ig-pack-next {
  flex-shrink: 0;
  min-width: 2rem;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  font-size: 1rem;
  line-height: 1;
  align-self: center;
}
.ig-pack-picker { position: relative; flex: 1; min-width: 0; }
.ig-pack-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
  text-align: left;
  border: 1px solid var(--border-input, var(--border));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.ig-pack-trigger:hover { border-color: var(--text-muted, var(--border)); }
.ig-pack-trigger-label {
  flex: 1;
  min-width: 0;
}
.ig-pack-trigger-caret { opacity: 0.55; font-size: 0.7rem; flex-shrink: 0; }
.ig-pack-dropdown {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: auto;
  min-width: 100%;
  max-width: none;
  max-height: min(380px, 52vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.ig-pack-dropdown--floating {
  position: fixed;
  z-index: 260;
  right: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
}
.ig-pack-backdrop {
  position: fixed;
  z-index: 255;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius, 6px);
}
.ig-pack-backdrop[hidden] { display: none !important; }
.icon-grid-widget.ig-pack-menu-open .icon-grid-scroll {
  pointer-events: none;
  opacity: 0.92;
}
.icon-grid-widget.ig-pack-menu-open .ig-pack-trigger {
  border-color: var(--text-muted, var(--border));
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}
.ig-pack-dropdown[hidden] { display: none !important; }
.ig-pack-search {
  flex-shrink: 0;
  margin: 0.5rem 0.65rem 0.4rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.84rem;
  width: calc(100% - 1.3rem);
}
.ig-pack-group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.65rem 0.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ig-pack-group-tab {
  flex-shrink: 0;
  padding: 0.28rem 0.55rem;
  font-size: 0.76rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
.ig-pack-group-tab:hover { border-color: var(--text-muted, var(--border)); color: var(--text); }
.ig-pack-group-tab.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ig-pack-list-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ig-pack-list-group-count {
  font-weight: 500;
  font-size: 0.68rem;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0;
}
.ig-pack-list-group + .ig-pack-list-group .ig-pack-list-group-label {
  padding-top: 0.65rem;
  margin-top: 0.15rem;
  border-top: 1px solid var(--border);
}
.ig-pack-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0.25rem 0;
}
.ig-pack-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.42rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 0.84rem;
}
.ig-pack-option:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.ig-pack-option.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}
.ig-pack-option-label { flex: 1; min-width: 0; }
.ig-pack-option-meta { font-size: 0.7rem; color: var(--text-dim); flex-shrink: 0; font-family: monospace; opacity: 0.85; }
.ig-pack-list-hint { font-size: 0.78rem; padding: 0.5rem 0.7rem; margin: 0; }
.icon-grid-controls input[type=search].ig-q { max-width: none; }
.icon-grid-avatar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.icon-grid-avatar-toggle input { width: auto; margin: 0; cursor: pointer; }
.icon-picker-summary { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.icon-picker-summary-img { width: 28px; height: 28px; }
.icon-picker-summary-name { font-size: 0.85rem; }
.icon-picker-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.icon-grid-recents {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}
.icon-grid-recents-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 0.15rem;
}
.icon-grid-recents-clear {
  font-size: 0.72rem;
  margin-right: 0.25rem;
}
.icon-grid-recent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.icon-grid-recent:hover { border-color: var(--accent); }
.icon-grid-recent img { width: 100%; height: 100%; object-fit: contain; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.5rem; }
.icon-grid-widget--picker .icon-grid-modal-body .icon-grid {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  max-width: none;
  gap: 0.45rem;
}
.icon-card {
  position: relative; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.5rem 0.25rem; gap: 0.25rem; user-select: none; background: var(--surface);
  min-height: 3.25rem;
}
.icon-grid-widget--picker .icon-grid-modal-body .icon-card {
  min-height: 4.25rem;
  padding: 0.65rem 0.35rem;
}
.icon-card:hover    { border-color: var(--text-muted); }
.icon-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.icon-card.is-focused { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-card img   { width: 22px; height: 22px; object-fit: contain; }
.icon-grid-widget--picker .icon-grid-modal-body .icon-card img { width: 36px; height: 36px; }
.icon-card .icon-card-label { font-size: 0.6rem; color: var(--text-dim); text-align: center; max-width: 100%; }
.icon-card .icon-card-delete {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: #dc2626; color: #fff; border: none; font-size: 0.7rem; line-height: 1;
  cursor: pointer; display: none;
}
.icon-card.deletable:hover .icon-card-delete { display: block; }
.icon-card.selectable { cursor: default; padding-top: 1.1rem; }
.icon-card .icon-card-check {
  position: absolute; top: 0.2rem; left: 0.2rem; margin: 0; cursor: pointer;
  width: auto; padding: 0;
}
.icon-grid-empty { color: var(--text-dim); font-size: 0.85rem; }
.icon-grid-more { margin-top: 0.75rem; }
body.icon-grid-modal-open { overflow: hidden; }
.icon-grid-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
  box-sizing: border-box;
}
.icon-grid-modal[hidden] { display: none !important; }
.icon-grid-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.icon-grid-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1020px, 100%);
  max-height: min(90vh, 920px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.icon-grid-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.icon-grid-modal-body {
  padding: 1rem;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.icon-grid-widget--picker .icon-grid-modal-body .icon-grid-controls {
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  margin-bottom: 0;
}
.icon-grid-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.15rem;
}
.icon-grid-widget:not(.icon-grid-widget--picker) .icon-grid-scroll {
  overflow: visible;
}

.icon-pack-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; }
.icon-pack-toolbar-spacer { flex: 1; min-width: 0.5rem; }
.icon-pack-filter-meta { font-size: 0.78rem; margin-left: 0.25rem; }
.icon-pack-stats {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-bottom: 1rem;
  padding: 0.75rem 1rem; border-radius: var(--radius, 6px);
  background: var(--surface-2, rgba(255,255,255,0.03)); border: 1px solid var(--border);
}
.icon-pack-stat { display: flex; flex-direction: column; gap: 0.1rem; min-width: 4.5rem; }
.icon-pack-stat-value { font-size: 1.15rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.icon-pack-stat-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.icon-pack-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; align-items: center;
}
.icon-pack-search {
  flex: 1; min-width: 10rem; max-width: 18rem;
  padding: 0.35rem 0.6rem; font-size: 0.85rem;
}
.icon-pack-filter-select {
  padding: 0.35rem 0.5rem; font-size: 0.82rem; max-width: 14rem;
}
.icon-pack-table-head {
  display: grid; grid-template-columns: 1.5rem 1fr auto auto;
  gap: 0.75rem; padding: 0.25rem 0 0.35rem; font-size: 0.7rem;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.icon-pack-list { display: flex; flex-direction: column; gap: 0; max-height: min(70vh, 42rem); overflow-y: auto; }
.icon-pack-empty { padding: 1.5rem 0; text-align: center; margin: 0; }
.icon-pack-row {
  display: flex; flex-direction: row; align-items: flex-start; gap: 0.75rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.icon-pack-row-compact {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
}
.icon-pack-row-compact input[type=checkbox] { align-self: center; }
.icon-pack-row-compact .btn-xs { align-self: center; }
.icon-pack-row:last-child { border-bottom: none; }
.icon-pack-row input[type=checkbox] {
  width: auto; flex-shrink: 0; margin: 0; padding: 0; align-self: center;
}
.icon-pack-info { flex: 1; min-width: 0; }
.icon-pack-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.icon-pack-info strong { font-size: 0.85rem; }
.icon-pack-id { font-size: 0.72rem; opacity: 0.65; }
.icon-pack-meta { font-size: 0.78rem; color: var(--text-dim); margin-left: 0.5rem; }
.icon-pack-repo { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.15rem; }
.icon-pack-note { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.15rem; }
.icon-pack-details { margin-top: 0.2rem; font-size: 0.75rem; }
.icon-pack-details summary { cursor: pointer; list-style: none; }
.icon-pack-details summary::-webkit-details-marker { display: none; }
.icon-pack-counts {
  font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--text-dim);
  white-space: nowrap; text-align: right; min-width: 4.5rem;
}
.icon-pack-count-sep { opacity: 0.45; margin: 0 0.15rem; }
.icon-pack-row .btn-xs { flex-shrink: 0; min-width: 3.5rem; }
.icon-pack-pager {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--border);
}
.icon-pack-pager-label { font-size: 0.8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.icon-pack-hidden-inputs {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.icon-pack-group-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  margin: 1rem 0 0.35rem; padding-top: 0.5rem; border-top: 1px solid var(--border);
}
.icon-pack-group-header:first-of-type { border-top: none; padding-top: 0; margin-top: 0.5rem; }
.icon-pack-group-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; }
.icon-grid-bulk-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; }

.admin-job-banner { margin-bottom: 1rem; }
.admin-job-banner-running { border-color: #2563eb; }
.admin-job-banner-title { margin: 0 0 0.35rem; font-weight: 600; font-size: 0.9rem; }
.admin-job-banner-meta { margin: 0; font-size: 0.85rem; }
.admin-job-banner-hint { margin: 0.5rem 0 0; font-size: 0.78rem; }
.admin-job-log { margin-top: 1.5rem; }
.admin-job-log-compact .admin-job-log-entries { max-height: min(60vh, 28rem); overflow-y: auto; }
.admin-job-log-compact-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.admin-job-log-entry-fail { border-left: 2px solid #dc2626; padding-left: 0.5rem; margin-left: -0.5rem; }
.admin-job-log-summary {
  font-weight: 600; font-size: 0.9rem; cursor: pointer; padding: 0.5rem 0;
  display: flex; align-items: center; gap: 0.5rem;
}
.admin-job-log-entry { margin-top: 0.875rem; }
.admin-job-log-entry-title { font-size: 0.8rem; font-weight: 600; margin: 0 0 0.375rem; }
.badge-xs { font-size: 0.65rem; padding: 0.1rem 0.35rem; }

.color-swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.color-swatch:hover    { border-color: var(--text-muted); }
.color-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
#icon_color_custom { width: 32px; height: 24px; padding: 2px; cursor: pointer; }

/* ─── Disclosure (collapsible section) ───────────────────────────────────── */
.disclosure { border: 1px solid var(--border); }
.disclosure + .disclosure { margin-top: -1px; }
.disclosure summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.875rem; cursor: pointer; list-style: none; user-select: none;
  background: var(--surface); font-size: 0.8rem; font-weight: 600; color: var(--text);
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary:hover { background: var(--hover); }
.disclosure-arrow {
  font-size: 0.9rem; color: var(--text-dim); flex-shrink: 0;
  display: inline-block; transition: transform 0.15s ease;
}
.disclosure[open] > summary .disclosure-arrow { transform: rotate(90deg); }
.disclosure-body { padding: 0.875rem; border-top: 1px solid var(--border); }

/* ─── Danger panels ───────────────────────────────────────────────────────── */
.panel-danger { background: var(--surface); border: 1px solid #dc2626; padding: 1.5rem; margin-bottom: 1.25rem; }
.panel-danger h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; color: #dc2626; }
.panel-danger p { margin-top: 0.375rem; margin-bottom: 1rem; }
button.danger     { background: #dc2626; color: #fff; }
button.danger:hover { background: #b91c1c; }
.danger-btn { color: #dc2626 !important; }

/* ─── Textarea ────────────────────────────────────────────────────────────── */
textarea { border: 1px solid var(--border-input); border-radius: 0.125rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; width: 100%; outline: none; background: var(--surface); color: var(--text); resize: vertical; font-family: inherit; }
textarea:focus { border-color: var(--accent); }

/* ─── Admin inline controls ───────────────────────────────────────────────── */
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.72rem; width: auto; border-radius: 0.125rem; }
.select-xs { font-size: 0.72rem; padding: 0.15rem 0.25rem; border: 1px solid var(--border-input); background: var(--surface); color: var(--text); border-radius: 0.125rem; cursor: pointer; }
.actions-cell { white-space: nowrap; }
.actions-cell form { margin: 0 1px; }
.badge-sm { font-size: 0.68rem; padding: 0.15rem 0.4rem; border-radius: 0.125rem; color: #fff; }
/* --text-muted is tuned to read as TEXT against --bg, not as a background white text sits on -
   in dark-leaning themes (dark, terminal, retro, classic-dark, ocean-deep) it's light enough
   that white-on-it is close to unreadable. var(--bg) as the text color preserves the exact
   same contrast ratio the theme already validated, just inverted (contrast is symmetric). */
.badge-muted { background: var(--text-muted); color: var(--bg); }

.membership-visibility-status {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.4;
}
.membership-visibility-status-glyph {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
.membership-visibility-status-body { flex: 1; min-width: 0; }
.membership-visibility-status-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  margin-bottom: 0.2rem;
}
.membership-visibility-status-copy {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.membership-visibility-status--visible {
  border-left: 3px solid #16a34a;
  background: color-mix(in srgb, #16a34a 10%, var(--hover));
}
.membership-visibility-status--visible .membership-visibility-status-glyph {
  color: #16a34a;
  border-color: color-mix(in srgb, #16a34a 35%, var(--border));
  background: color-mix(in srgb, #16a34a 12%, var(--surface));
}
.membership-visibility-status--hidden {
  border-left: 3px solid var(--text-muted);
  background: var(--hover);
}
.membership-visibility-status--hidden .membership-visibility-status-glyph {
  color: var(--text-dim);
}
.membership-visibility-status--pending {
  border-left: 3px solid var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--hover));
}
.membership-visibility-status--pending .membership-visibility-status-glyph {
  color: var(--accent, #2563eb);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 35%, var(--border));
}
.membership-visibility-badge--visible {
  background: #16a34a;
  color: #fff;
}
.membership-visibility-badge--hidden {
  background: var(--text-muted);
  color: var(--bg);
}
.membership-visibility-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.membership-visibility-toggle--show {
  border-color: color-mix(in srgb, #16a34a 45%, var(--border));
  color: #16a34a;
}
.membership-visibility-toggle--show:hover {
  background: color-mix(in srgb, #16a34a 10%, var(--hover));
  color: #16a34a;
}
.row-inactive td { opacity: 0.6; }
.text-dim { color: var(--text-dim); font-size: 0.825rem; }
.accent-surface .text-dim,
.shell-chrome .text-dim {
  color: color-mix(in srgb, var(--text-muted) 55%, var(--text) 45%);
}
.widget-row > .text-dim:first-child {
  color: var(--text-muted);
  font-weight: 500;
}
.widget-body .text-dim,
.widget-body p.text-dim {
  color: var(--text-muted);
}
.tabbar-nav a:not(.active) {
  color: color-mix(in srgb, var(--text-muted) 70%, var(--text) 30%);
}
.section-heading { font-size: 0.875rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.75rem; }

/* ─── Request cards ───────────────────────────────────────────────────────── */
.request-card { background: var(--surface); border: 1px solid var(--border); padding: 1rem 1.25rem; margin-bottom: 0.75rem; display: flex; gap: 1.5rem; align-items: flex-start; }
.request-meta { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.request-meta strong { font-size: 0.875rem; }
.request-message { font-size: 0.825rem; color: var(--text-muted); margin-top: 0.25rem; }
.request-form { display: flex; flex-direction: column; gap: 0.5rem; min-width: 280px; }
.request-form input { font-size: 0.825rem; padding: 0.375rem 0.625rem; }
.request-actions { display: flex; gap: 0.375rem; }
.request-actions button { width: auto; font-size: 0.8rem; padding: 0.3rem 0.75rem; }

/* ── Nav badge ────────────────────────────────────────────────────────────── */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; background: #dc2626; color: #fff; font-size: 0.65rem; font-weight: 700; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; border-radius: 999px; margin-left: 0.375rem; vertical-align: middle; line-height: 1; }
.sidebar-nav .nav-badge {
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  margin-left: auto;
}
.nav-badge-dot { display: none; }

.tabbar--hub-row .tabbar-nav-item > a { position: relative; }
.tabbar--hub-row .nav-badge { display: none; }
.tabbar--hub-row .nav-badge-dot {
  display: inline-block;
  position: absolute;
  top: 4px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dc2626;
  border: 1.5px solid var(--shell-chrome-bg, #fff);
  pointer-events: none;
}
.tabbar--section-sub .nav-badge-dot { display: none; }

/* ── Mail ──────────────────────────────────────────────────────────────────── */
.mail-list { width: 100%; }
.mail-list td { vertical-align: middle; padding: 0.4rem 0.375rem; }
.mail-list-row { cursor: pointer; }
.mail-list-row:hover { background: var(--hover); }
.mail-list-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mail-star-cell { width: 2rem; padding-right: 0 !important; text-align: center; }
.mail-star { background: none; border: none; color: var(--text-dim); font-size: 0.9rem; cursor: pointer; padding: 0; width: auto; line-height: 1; }
.mail-star:hover { color: #f59e0b; }
.mail-star.starred { color: #f59e0b; }
.mail-from { width: 11rem; max-width: 11rem; color: var(--text-muted); font-size: 0.825rem; }
.mail-subject { overflow: hidden; }
.mail-subject-text { color: var(--text); font-size: 0.875rem; }
.mail-thread-count { color: var(--text-muted); font-size: 0.8rem; margin-left: 0.25rem; }
.mail-preview { color: var(--text-dim); font-size: 0.8rem; }
.mail-date { width: 6rem; text-align: right; font-size: 0.8rem; white-space: nowrap; color: var(--text-muted); }
.mail-unread .mail-subject-text { font-weight: 700; }
.mail-unread .mail-from { color: var(--text); font-weight: 600; }
.mail-unread .mail-date { color: var(--text); font-weight: 600; }
.mail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.mail-header h1 { margin: 0; }
.mail-pagination { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.mail-thread-controls { margin-bottom: 0.5rem; }

/* Structured activity rows (finance mail + ledger) */
.activity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.35;
}
.activity-row--compact { font-size: 0.85rem; }
.activity-row__cat { flex-shrink: 0; font-size: 0.65rem; letter-spacing: 0.03em; text-transform: uppercase; }
.activity-row__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.35rem; min-width: 0; }
.activity-row__verb { font-weight: 600; }
.activity-row__pay, .activity-row__get { white-space: nowrap; }
.activity-row__arrow { color: var(--text-dim); font-size: 0.8rem; }
.activity-row__fee { font-size: 0.78rem; width: 100%; }
.mail-unread .activity-row__verb,
.mail-unread .activity-row__pay,
.mail-unread .activity-row__get { font-weight: 700; }
.mail-list.table--stack .mail-subject { min-width: 0; }

/* Message view */
.mail-message { max-width: 760px; }
.mail-msg-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.mail-msg-actions { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.mail-message-subject { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.mail-message-header { max-width: none; }
.mail-message-meta { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.825rem; color: var(--text-muted); margin-bottom: 0; }
.mail-message-body { max-width: none; }
.mail-message-body pre { white-space: pre-wrap; font-family: inherit; font-size: 0.875rem; margin: 0; }

/* Thread list (collapsible) */
.mail-thread-list { margin-bottom: 0.75rem; }
.mail-thread-item { border: 1px solid var(--border); background: var(--surface); margin-bottom: 0.25rem; }
.mail-thread-item summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; cursor: pointer; list-style: none; user-select: none; font-size: 0.875rem; }
.mail-thread-item summary::-webkit-details-marker { display: none; }
.mail-thread-item summary:hover { background: var(--hover); }
.mail-thread-item[open] summary { border-bottom: 1px solid var(--border); }
.mail-ti-from { font-weight: 600; min-width: 8rem; }
.mail-ti-snip { flex: 1; color: var(--text-muted); font-size: 0.8rem; }
.mail-ti-date { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; }
.mail-ti-body { padding: 0.75rem; }
.mail-ti-body pre { white-space: pre-wrap; font-family: inherit; font-size: 0.875rem; margin: 0; }
.mail-ti-meta { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }

/* Inline reply */
.mail-reply { border: 1px solid var(--border-input); background: var(--surface); padding: 0.75rem; margin-top: 0.75rem; }
.mail-reply form { gap: 0.5rem; }
.mail-reply-to { font-size: 0.8rem; color: var(--text-muted); padding-bottom: 0.375rem; border-bottom: 1px solid var(--border); margin-bottom: 0.375rem; }
.mail-reply-actions { display: flex; justify-content: flex-end; }
.mail-reply-actions button { width: auto; }

/* Compose */
.compose-panel { max-width: none; }
.compose-panel form > button[type="submit"] { width: auto; align-self: flex-start; }
.compose-to-row { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; }
.compose-to-label { padding-top: 0.5rem; font-size: 0.825rem; color: var(--text-muted); white-space: nowrap; min-width: 2rem; }
.compose-to-body { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.compose-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--hover); border: 1px solid var(--border); padding: 0.125rem 0.375rem; font-size: 0.8rem; border-radius: 0.125rem; }
.chip-type { color: var(--text-dim); font-size: 0.7rem; }
.chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0 0.125rem; font-size: 0.875rem; line-height: 1; width: auto; min-width: 0; }
.chip button:hover { color: var(--text); }
.compose-picker { border: 1px solid var(--border); padding: 0.75rem; margin-bottom: 0.75rem; background: var(--surface); }
.picker-results { margin-top: 0.5rem; max-height: 200px; overflow-y: auto; }
.picker-result { display: flex; justify-content: space-between; padding: 0.375rem 0.5rem; cursor: pointer; font-size: 0.875rem; }
.picker-result:hover { background: var(--hover); }
.toggle-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem 0;
  gap: 1rem;
}
.toggle-row > div:first-child { flex: 1; min-width: 0; }
.toggle-row input[type=checkbox] { width: auto; cursor: pointer; flex-shrink: 0; margin-top: 0.15rem; }

/* ─── Dashboard ──────────────────────────────────────────────────────────── */
.dashboard-header { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.25rem; }
.dashboard-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
}
.dashboard-header h1 { margin: 0; }
.dashboard-toolbar-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}
.dashboard-toolbar-toggle[aria-expanded="true"],
.dashboard-toolbar-pin.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-input));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.dashboard-header-actions.is-collapsed { display: none; }
.dashboard-header-actions:not(.is-collapsed):not([hidden]) { display: flex; }

.dashboard-hub-tabs {
  margin: -0.35rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dashboard-hub-tabs .tabbar-nav a.active.dashboard-hub-tab--core {
  border-bottom-color: var(--dash-cat-core, var(--accent));
  color: var(--text);
  font-weight: 700;
}
.dashboard-hub-tabs .tabbar-nav a.active.dashboard-hub-tab--actions {
  border-bottom-color: var(--dash-cat-actions, var(--accent));
  color: var(--text);
  font-weight: 700;
}
.dashboard-hub-tabs .tabbar-nav a.active.dashboard-hub-tab--communication {
  border-bottom-color: var(--dash-cat-communication, var(--accent));
  color: var(--text);
  font-weight: 700;
}
.dashboard-hub-tabs .tabbar-nav a.active.dashboard-hub-tab--finance {
  border-bottom-color: var(--dash-cat-finance, var(--accent));
  color: var(--text);
  font-weight: 700;
}
.dashboard-hub-tabs .tabbar-nav a.active.dashboard-hub-tab--server {
  border-bottom-color: var(--dash-cat-server, var(--accent));
  color: var(--text);
  font-weight: 700;
}
.dashboard-hub-tabs .tabbar-nav a.active:not([class*="dashboard-hub-tab--"]) {
  border-bottom-color: var(--accent);
}
.dashboard-custom-tabs-preview { opacity: 0.45; pointer-events: none; margin-top: 0.5rem; }
.dashboard-custom-tab-placeholder {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.dashboard-custom-tab-placeholder--add { font-style: italic; }
.dashboard-custom-inner-tabs {
  margin: -0.75rem 0 1rem;
  padding-left: 0.25rem;
}
.dashboard-custom-inner-tabs .tabbar-nav {
  gap: 0.15rem;
  align-items: center;
}
.dashboard-custom-inner-tabs .tabbar-nav-item {
  align-items: center;
}
.dashboard-custom-tab-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.dashboard-custom-tab-wrap > a {
  display: flex;
  align-items: center;
}
.dashboard-custom-tab-close {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.dashboard-custom-inner-tabs button.dashboard-custom-tab-close-btn {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 3px;
}
.dashboard-custom-tab-close-btn:hover {
  color: var(--danger, #dc2626);
  background: var(--hover);
}
.dashboard-custom-inner-tab--add {
  align-self: center;
}
.dashboard-custom-add-form {
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0;
  padding: 0;
  height: auto;
}
.dashboard-custom-inner-tabs button.dashboard-custom-tab-add {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
}
.dashboard-custom-inner-tabs button.dashboard-custom-tab-add:hover {
  border-color: var(--accent);
  background: var(--hover);
  color: var(--accent);
}
.dashboard-hub-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem 1rem;
}
.dashboard-hub-settings-toggle { margin: 0; }
.dashboard-custom-profile-list { list-style: none; margin: 0; padding: 0; }
.dashboard-custom-profile-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.dashboard-custom-profile-list-item:last-child { border-bottom: none; }
.dashboard-custom-profile-list-actions { display: flex; align-items: center; gap: 0.35rem; }
.dashboard-custom-profile-delete { display: inline; margin: 0; }
.dashboard-custom-profile-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dashboard-custom-profile-pick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface, var(--bg));
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
}
.dashboard-custom-profile-pick-btn:hover {
  border-color: var(--accent);
  background: var(--hover);
  color: var(--text);
}
.dashboard-custom-profile-pick-meta { color: var(--text-dim); }
.dashboard-settings-hub .hub-card-desc { font-size: 0.82rem; }
.dashboard-grid--readonly .widget { cursor: default; }

.dashboard-header-title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-width: 0; }
.dashboard-user-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0;
  padding: 0.3rem 0.65rem 0.3rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--chip-accent-marker, var(--accent)) 45%, var(--border));
  background: var(--chip-accent-soft, var(--hover));
  color: inherit; text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.dashboard-user-chip:hover {
  border-color: var(--chip-accent-marker, var(--accent));
  background: color-mix(in srgb, var(--chip-accent-soft, var(--hover)) 70%, var(--chip-accent, var(--accent)) 30%);
}
.dashboard-user-chip-name {
  font-size: 0.88rem; font-weight: 600;
  max-width: 14rem;
}
.dashboard-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; max-width: 100%; width: 100%; }
.widget-hint a { font-weight: 500; }

/* Dashboard header toolbar — grouped controls with distinct pill buttons */
.dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.5rem 0.65rem;
  width: 100%;
  max-width: 100%;
}
.dashboard-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
}
.dashboard-toolbar-group-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  padding-right: 0.15rem;
}
.dashboard-toolbar-group--config {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.dashboard-toolbar-group-inner {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.35rem;
}
.dashboard-toolbar-btn,
.dashboard-toolbar .dashboard-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: auto;
  min-height: 1.85rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 0.3rem;
  border: 1px solid var(--border-input);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 70%, transparent);
  transition: background 0.12s, border-color 0.12s;
}
.dashboard-toolbar-btn:hover {
  background: var(--hover);
  border-color: var(--border);
  color: var(--text);
  text-decoration: none;
}
.dashboard-toolbar-btn--accent {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-input));
  color: var(--text);
}
.dashboard-toolbar-btn--accent:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}
.dashboard-toolbar-btn--icon {
  min-width: 1.85rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
  line-height: 1;
}
.dashboard-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.15rem 0.15rem 0.45rem;
  border: 1px solid var(--border-input);
  border-radius: 0.3rem;
  background: var(--surface);
}
.dashboard-cat-chip__label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.dashboard-cat-chip__segment {
  display: inline-flex;
  align-items: stretch;
  border-radius: 0.22rem;
  overflow: hidden;
  border: 1px solid var(--border-input);
}
.dashboard-cat-chip__segment .dashboard-toolbar-btn {
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 1.55rem;
  min-width: 1.55rem;
  padding: 0.15rem 0.3rem;
}
.dashboard-cat-chip__segment .dashboard-toolbar-btn + .dashboard-toolbar-btn {
  border-left: 1px solid var(--border-input);
}
.dashboard-appearance-compact {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
}
.dashboard-appearance-compact > summary {
  list-style: none;
  cursor: pointer;
}
.dashboard-appearance-compact > summary::-webkit-details-marker { display: none; }

/* Legacy aliases — roll toolbar id kept for JS */
.dashboard-roll-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; justify-content: flex-end;
}
.dashboard-roll-cat {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding-left: 0.5rem; border-left: 1px solid var(--border);
}
.dashboard-roll-cat-label {
  font-size: 0.75rem; color: var(--text-muted); white-space: nowrap;
}
.dashboard-roll-cat-btn { min-width: 1.65rem; padding: 0.15rem 0.35rem !important; }

/* Dashboard surface highlights (category tints, palette-linked chrome) */
.dashboard-surface { --dash-palette-bg: var(--bg); --dash-palette-surface: var(--surface); --dash-palette-border: var(--border); --dash-palette-accent: var(--accent); }
.dashboard-surface[data-hl-grid="1"] .dashboard-grid {
  padding: 0.85rem;
  border-radius: 0.65rem;
  border: 1px dashed color-mix(in srgb, var(--dash-palette-accent) 35%, var(--dash-palette-border));
  background: color-mix(in srgb, var(--dash-palette-bg) 72%, var(--dash-palette-accent) 8%);
}
.dashboard-surface[data-hl-card-border="1"] .widget {
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--dash-palette-accent) 28%, var(--dash-palette-border));
}
.dashboard-surface[data-hl-card-header="1"] .widget-header {
  background: color-mix(in srgb, var(--dash-palette-accent) 10%, var(--dash-palette-bg) 55%, var(--dash-palette-surface));
}
.dashboard-surface[data-hl-card-body="1"] .widget-body {
  background: color-mix(in srgb, var(--dash-palette-surface) 88%, var(--dash-palette-accent) 6%);
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="core"] .widget-header {
  background: var(--dash-cat-core-soft);
  border-bottom-color: color-mix(in srgb, var(--dash-cat-core-marker) 35%, var(--border));
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="core"] {
  border-color: color-mix(in srgb, var(--dash-cat-core-marker) 30%, var(--border));
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="actions"] .widget-header {
  background: var(--dash-cat-actions-soft);
  border-bottom-color: color-mix(in srgb, var(--dash-cat-actions-marker) 35%, var(--border));
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="actions"] {
  border-color: color-mix(in srgb, var(--dash-cat-actions-marker) 30%, var(--border));
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="communication"] .widget-header {
  background: var(--dash-cat-communication-soft);
  border-bottom-color: color-mix(in srgb, var(--dash-cat-communication-marker) 35%, var(--border));
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="communication"] {
  border-color: color-mix(in srgb, var(--dash-cat-communication-marker) 30%, var(--border));
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="finance"] .widget-header {
  background: var(--dash-cat-finance-soft);
  border-bottom-color: color-mix(in srgb, var(--dash-cat-finance-marker) 35%, var(--border));
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="finance"] {
  border-color: color-mix(in srgb, var(--dash-cat-finance-marker) 30%, var(--border));
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="server"] .widget-header {
  background: var(--dash-cat-server-soft);
  border-bottom-color: color-mix(in srgb, var(--dash-cat-server-marker) 35%, var(--border));
}
.dashboard-surface[data-hl-category="1"] .widget[data-category="server"] {
  border-color: color-mix(in srgb, var(--dash-cat-server-marker) 30%, var(--border));
}
.dashboard-surface[data-hl-profile-accent="1"] .dashboard-user-chip {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dash-profile-accent, var(--chip-accent)) 45%, transparent);
  border-radius: 999px;
  --chip-accent: var(--dash-profile-accent, var(--chip-accent));
  --chip-accent-soft: var(--dash-profile-accent-soft, var(--chip-accent-soft));
  --chip-accent-marker: var(--dash-profile-accent-marker, var(--chip-accent-marker));
}

.dashboard-appearance-custom[hidden] { display: none; }
.dashboard-appearance-form { display: flex; flex-direction: column; gap: 0.85rem; }
.dashboard-appearance-form--compact { gap: 0.5rem; font-size: 0.82rem; }
.dashboard-appearance-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin: 0; }
.dashboard-appearance-select { max-width: 18rem; }
.dashboard-appearance-targets { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.dashboard-appearance-targets legend { padding: 0; margin-bottom: 0.25rem; }
.dashboard-appearance-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; cursor: pointer; }
.dashboard-appearance-cat-lead { font-size: 0.8rem; margin: 0.15rem 0 0.5rem; }
.dashboard-appearance-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.35rem 1rem; }
.dashboard-appearance-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dashboard-surface--config-preview { margin-top: 0.25rem; }
.dashboard-appearance-compact-body {
  position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 20;
  min-width: 16rem; max-width: min(22rem, 92vw);
  padding: 0.75rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.appearance-hub-grid .hub-card-meta,
.appearance-hub-meta { font-size: 0.8rem; margin: 0.65rem 0 0; line-height: 1.45; }
.appearance-hub-grid .hub-card-desc code { font-size: 0.85em; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; align-items: start; }
.widget { background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; align-self: start; }
.widget.dragging { opacity: 0.4; cursor: grabbing; }
.widget-small  { grid-column: span 1; }
.widget-medium { grid-column: span 1; }
.widget-large  { grid-column: span 2; }
.widget-header { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; padding: 0.6rem 0.875rem; border-bottom: 1px solid var(--border); background: var(--bg); cursor: default; }
.widget-drag-handle { color: var(--text-dim); font-size: 1.1rem; cursor: grab; user-select: none; flex-shrink: 0; touch-action: none; line-height: 1; padding: 0.1rem 0.15rem; -webkit-user-drag: element; }
.widget-drag-handle:active { cursor: grabbing; }
.widget-drag-handle.dragging,
.widget.dragging { opacity: 0.4; }
.widget-header-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; margin-left: auto; }
.widget-title  { font-size: 0.8rem; font-weight: 600; color: color-mix(in srgb, var(--text-muted) 55%, var(--text) 45%); text-transform: uppercase; letter-spacing: 0.04em; min-width: 0; flex: 1; }
.widget-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #dc2626; color: #fff; font-size: 0.65rem; font-weight: 700;
  min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; border-radius: 999px; line-height: 1;
}
.widget-roll,
.widget-refresh,
.widget-reorder-btn {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 1.05rem; width: auto; min-width: 1.65rem; min-height: 1.65rem;
  padding: 0.15rem; line-height: 1; touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center;
}
.widget-reorder-controls {
  display: none;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .widget-drag-handle { display: none; }
  .widget-reorder-controls { display: inline-flex; }
}
.widget-reorder-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.widget-roll:hover,
.widget-refresh:hover,
.widget-reorder-btn:not(:disabled):hover { color: var(--text); background: transparent; }
.widget.is-rolled-up .widget-body { display: none; }
.widget.is-rolled-up .widget-header { border-bottom: none; }
.widget.is-rolled-up { cursor: default; }
.widget-body { padding: 1rem 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.widget-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; padding: 0.2rem 0; border-bottom: 1px solid var(--border); }
.widget-row:last-child { border-bottom: none; }
.widget-row-memo, .tx-memo { flex: 1; min-width: 0; }
.widget-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.widget-stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.widget-stat-label { font-size: 0.75rem; color: var(--text-muted); }

/* Widget config list (profile/dashboard) */
.dashboard-grid--preview { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.dashboard-grid--preview .widget { font-size: 0.9rem; }
.dashboard-grid--preview .widget-header { padding: 0.5rem 0.65rem; }
.dashboard-grid--preview .widget-body { padding: 0.65rem; max-height: 12rem; overflow: auto; }

/* Account → Dashboard config */
.dashboard-config-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dashboard-config-head h2 { margin: 0; }
.dashboard-config-lead { font-size: 0.85rem; margin: 0.35rem 0 0; color: var(--text-muted); max-width: 36rem; }
.dashboard-config-toolbar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dashboard-config-toolbar-actions button[type="submit"]:not(.btn-xs) { min-width: 5rem; }
.dashboard-config-bulk { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--border); }
.dashboard-config-section-title { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 600; }
.dashboard-config-section-lead { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.75rem; }
.dashboard-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.dashboard-preset-option {
  display: block; position: relative; padding: 0.65rem 0.75rem; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.dashboard-preset-option:hover { border-color: var(--text-dim); }
.dashboard-preset-option:has(input:checked) {
  border-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--bg));
}
.dashboard-preset-option input[type=radio] {
  position: absolute; top: 0.55rem; right: 0.55rem; width: auto; margin: 0; cursor: pointer;
}
.dashboard-preset-label { display: block; font-size: 0.875rem; font-weight: 600; padding-right: 1.25rem; }
.dashboard-preset-desc { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.35; }
.dashboard-preset-count { display: block; font-size: 0.7rem; color: var(--text-dim); margin-top: 0.35rem; font-weight: 500; }
.dashboard-preset-preview {
  margin-bottom: 0.75rem; padding: 0.75rem 0.85rem; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--border) 25%, var(--bg));
}
.dashboard-preset-preview[hidden] { display: none; }
.dashboard-preset-preview-title { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 600; }
.dashboard-preset-preview-lead { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--text-muted); }
.dashboard-preset-preview-list {
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.dashboard-preset-preview-list li {
  font-size: 0.75rem; padding: 0.15rem 0.45rem; border: 1px solid var(--border); background: var(--bg);
}
.dashboard-preset-preview-diff { margin-top: 0.65rem; font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.dashboard-preset-preview-diff strong { color: var(--text); font-weight: 600; }
.dashboard-preset-preview-empty { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.75rem; }
.dashboard-preset-preview-empty[hidden] { display: none; }
.dashboard-preset-preview--match { border-color: color-mix(in srgb, #16a34a 45%, var(--border)); }
.dashboard-preset-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dashboard-available-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.5rem 0.5rem;
}
.dashboard-available-head .dashboard-config-section-lead { margin-bottom: 0; }
.dashboard-available-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dashboard-category-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.dashboard-config-hint {
  font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1rem; padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--border); background: color-mix(in srgb, var(--border) 35%, transparent);
}
.dashboard-config-footer {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between;
  padding-top: 0.5rem;
}
.dashboard-config-footer-note { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

.dashboard-order-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem;
  max-height: 16rem; overflow-y: auto;
}
.dashboard-order-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.65rem;
  border: 1px solid var(--border); background: var(--bg);
}
.dashboard-order-num {
  font-variant-numeric: tabular-nums; font-weight: 600; min-width: 1.5rem;
  color: var(--text-muted); font-size: 0.85rem; text-align: right;
}
.dashboard-order-name { flex: 1; font-size: 0.875rem; min-width: 0; }
.dashboard-order-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.dashboard-order-actions .btn-xs { min-width: 2rem; padding: 0.2rem 0.35rem; touch-action: manipulation; }
.dashboard-order-actions .btn-xs:disabled { opacity: 0.35; cursor: default; }

.widget-config-list  { list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
.widget-config-label--pick { cursor: pointer; flex: 1; }
.widget-config-item  { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border); background: var(--bg); }
.widget-config-label { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; cursor: pointer; font-size: inherit; color: inherit; }
.widget-config-name  { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.widget-config-desc  { font-size: 0.775rem; overflow-wrap: anywhere; }
.widget-config-item input[type=checkbox] { width: auto; flex-shrink: 0; cursor: pointer; touch-action: manipulation; }

/* ─── Nav layout preference (auto / docked / drawer) ─────────────────────── */

/* Overlay drawer at any viewport when user picks drawer mode.
   Shell chrome (topbar + tabbars) stays fixed; only main content scrolls. */
body.app.nav-drawer-layout .topbar-hamburger { display: flex !important; }
body.app.nav-drawer-layout .sidebar-restore { display: none !important; }
body.app.nav-drawer-layout .sidebar {
  position: fixed;
  top: var(--mobile-chrome-top, var(--topbar-h));
  left: 0;
  bottom: auto;
  z-index: 105;
  width: min(300px, 88vw) !important;
  max-height: calc(100svh - var(--mobile-chrome-top, var(--topbar-h)));
  height: auto;
  padding-top: 0;
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.2s ease, visibility 0.2s ease;
  box-shadow: 4px 0 16px rgba(0,0,0,0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  background-color: var(--shell-surface, var(--surface, #ffffff));
  isolation: isolate;
}
body.app.nav-drawer-layout.mobile-nav-open .sidebar {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
body.app.nav-drawer-layout.mobile-nav-open .sidebar-backdrop {
  display: block;
  inset: 0;
  z-index: 104;
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  html, body.app {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Docked preference is desktop-only — phones always use the overlay drawer. */
  body.app.nav-docked-layout {
    display: grid;
    grid-template-rows: var(--topbar-h) 1fr;
    height: 100vh;
    min-height: unset;
    overflow: hidden;
    flex-direction: unset;
  }
  body.app.nav-docked-layout .shell {
    display: flex;
    height: 100%;
    flex: unset;
    overflow: hidden;
  }
  body.app.nav-docked-layout .sidebar {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    width: min(300px, 88vw) !important;
    max-height: calc(100svh - var(--mobile-chrome-top, var(--topbar-h)));
    height: auto;
    box-shadow: 4px 0 16px rgba(0,0,0,0.15);
    top: var(--mobile-chrome-top, var(--topbar-h));
    left: 0;
    z-index: 105;
  }
  body.app.nav-docked-layout .topbar-hamburger { display: flex !important; }
  body.app.nav-docked-layout .sidebar-controls-bar { display: none !important; }
  body.app.nav-docked-layout .main-area { overflow: hidden; width: auto; }

  /* Drawer / auto on narrow screens — same fixed chrome as desktop; sidebar overlays */
  body.app:not(.nav-docked-layout) {
    display: grid;
    grid-template-rows: var(--topbar-h) 1fr;
    height: 100vh;
    min-height: unset;
    overflow: hidden;
    flex-direction: unset;
  }
  body.app:not(.nav-docked-layout):has(.guest-banner) {
    grid-template-rows: var(--topbar-h) auto 1fr;
  }
  body.app:not(.nav-docked-layout) .shell {
    display: flex;
    height: 100%;
    flex: unset;
    overflow: hidden;
  }
  body.app:not(.nav-docked-layout) .main-area {
    overflow: hidden;
    width: auto;
  }

  /* Topbar */
  .topbar {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    box-sizing: border-box;
    overflow: hidden;
    align-items: center;
    gap: 0.35rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .topbar-left { min-width: 0; flex: 1 1 auto; }
  .topbar-user { min-width: 0; flex: 0 1 auto; gap: 0.35rem; }
  .topbar-brand { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-nav-mode { display: none; }
  .topbar-hamburger { display: flex !important; flex-shrink: 0; }
  .topbar-btn--signout .topbar-btn-text,
  .topbar-btn--register .topbar-btn-text { display: none; }
  .topbar-btn--signout .topbar-btn-short,
  .topbar-btn--register .topbar-btn-short { display: inline; }
  .topbar-username  { display: none; }
  .topbar-role,
  .role-badge--topbar      { display: none; }
  .topbar-tagline   { display: none; }
  /* Shell — height/overflow set per layout mode above */

  /* Sidebar drawer: top synced to measured topbar via --mobile-chrome-top (app.ejs) */
  .sidebar {
    position: fixed;
    top: var(--mobile-chrome-top, var(--topbar-h));
    left: 0;
    bottom: auto;
    z-index: 105;
    width: min(300px, 88vw) !important;
    max-height: calc(100svh - var(--mobile-chrome-top, var(--topbar-h)));
    height: auto;
    padding-top: 0;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: transform 0.2s ease, visibility 0.2s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--shell-surface, var(--surface, #ffffff));
    isolation: isolate;
  }
  body.mobile-nav-open .sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--shell-surface, var(--surface, #ffffff));
    z-index: 0;
    pointer-events: none;
  }
  body.mobile-nav-open .sidebar > * {
    position: relative;
    z-index: 1;
  }
  body.mobile-nav-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .mobile-nav-open .sidebar-backdrop {
    display: block;
    inset: 0;
    top: 0;
    z-index: 104;
  }
  /* Lock page scroll while drawer is open */
  html.mobile-nav-open,
  body.mobile-nav-open {
    overflow: hidden;
    height: 100%;
  }
  body.mobile-nav-open .main-area > .accent-surface > main {
    overflow: hidden;
    touch-action: none;
  }
  /* One stable scroll region inside the drawer */
  body.mobile-nav-open .sidebar {
    touch-action: pan-y;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.mobile-nav-open .sidebar-scroll,
  body.mobile-nav-open .sidebar-footer {
    background-color: transparent;
  }
  body.mobile-nav-open .main-area,
  body.mobile-nav-open .tabbar,
  body.mobile-nav-open .accent-surface {
    position: relative;
    z-index: 1;
  }
  body.mobile-nav-open .sidebar-nav,
  body.mobile-nav-open .sidebar-nav--top,
  body.mobile-nav-open .sidebar-nav--bottom {
    flex: none;
    overflow: visible;
    min-height: unset;
  }
  body.mobile-nav-open .sidebar-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
  }

  /* Drawer: nav + footer flow together; whole panel scrolls if needed */
  .sidebar-scroll {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }
  .sidebar-scroll > .sidebar-zone-label:first-child,
  .sidebar-scroll > .sidebar-nav--top:first-child,
  .sidebar-scroll > .sidebar-nav:first-child {
    margin-top: 0;
  }
  .sidebar-scroll > .sidebar-nav--top,
  .sidebar-scroll > .sidebar-nav:first-child {
    padding-top: 0.25rem;
  }
  .sidebar-footer {
    margin-top: 0;
    flex-shrink: 0;
  }

  /* Toolbar icons are redundant in the full-label drawer */
  .sidebar-controls-bar { display: none !important; }
  .sidebar-restore  { display: none !important; }
  #sc-min { display: none !important; }
  #sc-col { display: none !important; }

  /* Mobile drawer always uses full labels - never desktop rail layout */
  [data-sidebar] .sidebar-controls-primary,
  [data-sidebar] .sidebar-controls-util {
    flex-direction: row;
    order: unset;
    border: none;
    padding: 0;
    gap: 0.25rem;
  }
  [data-sidebar] .sidebar-scroll,
  [data-sidebar] .sidebar-footer {
    order: unset;
  }
  [data-sidebar] .sidebar-nav a,
  [data-sidebar] .sidebar-group-items a {
    font-size: 1.0625rem;
    font-weight: 600;
    padding: 0.8rem 1.125rem 0.8rem calc(1.125rem - 3px);
    min-height: 2.75rem;
    flex-wrap: wrap;
    gap: 0.35rem;
    line-height: 1.25;
  }
  [data-sidebar] .sidebar-nav--top a,
  [data-sidebar] .sidebar-nav--bottom a {
    font-size: 1.1875rem;
    font-weight: 700;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }
  [data-sidebar] .sidebar-zone-label,
  [data-sidebar] .sidebar-quickaccess-label,
  [data-sidebar] .sidebar-group-toggle {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.125rem 0.35rem;
  }
  [data-sidebar] .sidebar-group-toggle {
    padding-bottom: 0.35rem;
  }
  [data-sidebar] .sidebar-nav .nav-badge {
    font-size: 0.8rem;
    min-width: 1.45rem;
    height: 1.45rem;
  }
  [data-sidebar] .sidebar-nav a::before,
  [data-sidebar] .sidebar-group-items a::before,
  [data-sidebar] .sidebar-nav-item--sep-after > a::after {
    content: none;
    display: none;
  }
  [data-sidebar] .sidebar-zone-label {
    height: auto;
    padding: 0.75rem 1.125rem 0.35rem;
    margin: 0;
    border-top: none;
    overflow: visible;
    font-size: 0.75rem;
    line-height: normal;
  }
  [data-sidebar] .sidebar-zone-label-item {
    margin: 0;
    padding: 0;
    border-top: none;
  }
  [data-sidebar] .sidebar-zone-label-item .sidebar-zone-label {
    display: block;
  }
  [data-sidebar] .sidebar-group-toggle {
    display: flex;
  }
  [data-sidebar] .sidebar-group-items.collapsed {
    display: none;
  }
  [data-sidebar] .sidebar-quickaccess-label {
    display: block;
  }
  [data-sidebar] .nav-badge {
    display: inline-flex;
  }
  [data-sidebar] .nav-badge-dot {
    display: none;
  }
  [data-sidebar] .sidebar-footer-user {
    display: block;
  }
  [data-sidebar] .sidebar-footer-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    align-items: center;
    gap: 0.5rem;
  }
  [data-sidebar] .sidebar-footer-actions > :not(:first-child)::before {
    display: none;
  }
  [data-sidebar] .sidebar-collapse-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-sidebar] .sidebar-footer {
    padding: 0.875rem 1.125rem calc(0.875rem + env(safe-area-inset-bottom, 0));
    gap: 0.5rem;
  }
  [data-sidebar] .sidebar-footer-name {
    font-size: 0.9375rem;
  }
  [data-sidebar] .sidebar-footer-role,
  [data-sidebar] .role-badge--sidebar {
    font-size: 0.72rem;
  }
  [data-sidebar] .sidebar-footer-link--support,
  [data-sidebar] .sidebar-footer-signout .sidebar-footer-link {
    font-size: 0.875rem;
    min-height: 2.25rem;
    align-items: center;
  }
  [data-sidebar] .sidebar-collapse-all-btn {
    font-size: 0.9375rem;
    min-height: 2.5rem;
    padding: 0.625rem 0.875rem;
  }
  [data-sidebar] .sidebar-footer-link--support::before,
  [data-sidebar] .sidebar-footer-signout .sidebar-footer-link::before {
    content: none;
  }
  [data-sidebar] .sc-btn {
    width: auto;
    min-height: unset;
  }
  [data-sidebar="closed"] .sidebar {
    width: min(300px, 88vw) !important;
    border-right: 1px solid var(--border);
  }

  /* Main area — tabbars stay put; only main scrolls */
  main { overflow-y: auto; overflow-x: hidden; padding: 1rem; flex: 1; min-height: 0; min-width: 0; max-width: 100%; box-sizing: border-box; }
  main:has(> .profile-public-surface),
  .browser-main:has(> .profile-public-surface) { padding: 0; }
  main > .profile-public-surface,
  .browser-main > .profile-public-surface { padding: 1rem; }

  /* Tabbar */
  .tabbar,
  .tabbar-block,
  .dashboard-hub-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tabbar-nav a {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Dashboard - single column */
  .dashboard-surface { min-width: 0; max-width: 100%; }
  .dashboard-header { flex-direction: column; align-items: stretch; }
  .dashboard-header-actions { align-items: stretch; }
  .dashboard-hub-tabs {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
    max-width: none;
  }
  .dashboard-hub-tabs .tabbar-nav {
    padding: 0 0.35rem 0 1rem;
  }
  .dashboard-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }
  .dashboard-toolbar-group {
    width: 100%;
    box-sizing: border-box;
  }
  .dashboard-toolbar-group--config {
    margin-left: 0;
    order: -1;
  }
  .dashboard-toolbar-group--cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .dashboard-cat-chip {
    flex-shrink: 0;
  }
  .dashboard-toolbar-group-inner {
    width: 100%;
    justify-content: flex-start;
  }
  .dashboard-grid { grid-template-columns: 1fr; }
  .widget { min-width: 0; max-width: 100%; }
  .widget-large { grid-column: span 1; }
  .widget-drag-handle { display: none; }
  .widget-reorder-controls { display: inline-flex; }

  /* Grid stacks */
  .grid-2 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .vault-form-row { grid-template-columns: 1fr; }

  /* Stat grid - 2 per row; tighter than wrap inside narrow half-width cards */
  .stat { flex: 1 1 calc(50% - 0.5rem); min-width: 0; padding: 1rem 0.875rem; }

  /* Monetary ladder - vertical timeline on narrow screens */
  .monetary-ladder-disclosure__summary {
    padding: 0.875rem 1rem;
  }
  .monetary-ladder-disclosure__body,
  .monetary-ladder-faq {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .monetary-ladder-track {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
  }
  .monetary-ladder-connector-slot {
    flex: none;
    width: 100%;
    padding: 0.15rem 0 0.15rem 0.35rem;
    align-self: stretch;
  }
  .monetary-ladder-node,
  .monetary-ladder-node--combo {
    flex: none;
    width: 100%;
  }
  .monetary-ladder-connector {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
  }
  .monetary-ladder-connector-label {
    max-width: none;
    white-space: normal;
  }
  .monetary-ladder-step,
  .monetary-ladder-step--combo {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: none;
  }

  /* Tables scroll - stacked tables (.table--stack) become cards instead */
  .panel, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table:not(.table--stack) { min-width: 480px; }

  /* Request cards stack */
  .request-card { flex-direction: column; gap: 0.75rem; }
  .request-form { min-width: 0; width: 100%; }

  /* Mail list - hide preview and from on mobile */
  .mail-preview { display: none; }
  .mail-from    { width: 7rem; max-width: 7rem; }

  /* Widget config - stack on narrow screens; touch devices use arrow buttons not drag */
  .widget-config-item {
    display: grid;
    grid-template-columns: 1.35rem 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.35rem 0.65rem;
    align-items: start;
    padding: 0.75rem;
  }
  .widget-config-item input[type=checkbox] {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 0.1rem;
    width: 1.1rem;
    height: 1.1rem;
  }
  .widget-config-label { grid-column: 2; grid-row: 1 / 3; }
  .widget-config-item .badge {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    font-size: 0.68rem;
  }
  #dashboard-form > button[type="submit"] { max-width: none; width: 100%; }

  /* Browser topbar - compact toolbar on small screens */
  body.browser .topbar {
    padding: 0 0.5rem;
    gap: 0.35rem;
    min-height: 44px;
    height: auto;
  }
  body.browser .topbar-left {
    flex-shrink: 0;
    gap: 0.35rem;
    min-width: 0;
  }
  body.browser .topbar-brand,
  body.browser .topbar-icon-img {
    display: none;
  }
  body.browser .topbar-center {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  body.browser .browser-breadcrumbs {
    font-size: 0.8rem;
    max-width: 100%;
  }
  body.browser .browser-breadcrumbs > a,
  body.browser .browser-breadcrumbs > .browser-sep {
    display: none;
  }
  body.browser .browser-crumb-current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.browser .topbar-user {
    gap: 0.2rem;
    flex-shrink: 0;
    font-size: 0.8rem;
  }
  body.browser .topbar-user form {
    display: inline-flex;
  }
  body.browser .topbar-user .topbar-btn {
    padding: 0.3rem 0.4rem;
    font-size: 0.9rem;
    line-height: 1;
  }
  body.browser .topbar-user .topbar-btn--icon {
    min-width: 2.1rem;
    min-height: 2.1rem;
    padding: 0.2rem;
  }
  body.browser .topbar-btn--back {
    min-width: 2.1rem;
    min-height: 2.1rem;
    padding: 0.2rem;
  }
  body.browser .topbar-btn--signout .topbar-btn-text,
  body.browser .topbar-btn--register .topbar-btn-text {
    display: none;
  }
  body.browser .topbar-btn--signout .topbar-btn-short,
  body.browser .topbar-btn--register .topbar-btn-short {
    display: inline;
  }
  body.browser .topbar-btn--signout,
  body.browser .topbar-btn--register {
    min-width: 2.1rem;
    min-height: 2.1rem;
    padding: 0.25rem 0.45rem;
  }
  .widget-large   { grid-column: span 1; }
}

/* ── Browser layout ──────────────────────────────────────────────────────────── */

body.browser {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
body.browser .topbar {
  flex-shrink: 0;
  height: 40px;
  font-size: 0.825rem;
}
body.browser .topbar-center { flex: 1; }

.browser-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 40px;
  flex-shrink: 0;
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 0.75rem;
  font-size: 0.825rem;
}
.browser-topbar-left  { display: flex; align-items: center; gap: 0.5rem; overflow: hidden; }
.browser-topbar-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.browser-home-link { color: var(--topbar-text); opacity: 0.7; text-decoration: none; white-space: nowrap; }
.browser-home-link:hover { opacity: 1; }
.browser-sep { opacity: 0.35; }
.browser-breadcrumbs { display: flex; align-items: center; gap: 0.375rem; overflow: hidden; }
.browser-breadcrumbs a { color: var(--topbar-text); opacity: 0.75; text-decoration: none; white-space: nowrap; }
.browser-breadcrumbs a:hover { opacity: 1; }
.browser-crumb-current { opacity: 0.95; }
.browser-topbar-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--topbar-text);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: none;
}
.browser-topbar-btn:hover { background: rgba(255,255,255,0.1); }

/* Tab bar */
.browser-tabbar {
  background: var(--topbar-bg);
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  overflow-x: auto;
  order: 10; /* bottom by default */
}
body.browser-tabs-top .browser-tabbar { order: -1; border-top: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
.browser-tabbar-inner { display: flex; align-items: stretch; min-height: 32px; }
.browser-tab {
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,0.1);
  max-width: 180px;
  min-width: 80px;
}
.browser-tab--active { background: rgba(255,255,255,0.12); }
.browser-tab-label {
  flex: 1;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  color: var(--topbar-text);
  opacity: 0.7;
  text-decoration: none;
}
.browser-tab--active .browser-tab-label { opacity: 1; }
.browser-tab-label:hover { opacity: 1; }
.browser-tab-close {
  background: none;
  border: none;
  color: var(--topbar-text);
  opacity: 0.4;
  padding: 0 0.375rem;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
}
.browser-tab-close:hover { opacity: 0.9; background: none; }
.browser-tab-new {
  background: none;
  border: none;
  color: var(--topbar-text);
  opacity: 0.5;
  padding: 0 0.625rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 32px;
  flex-shrink: 0;
}
.browser-tab-new:hover { opacity: 1; background: none; }

/* Shell: nav + content */
.browser-shell {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.browser-nav {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.browser-nav-primary {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.5rem 0 0.25rem;
}
.browser-nav-bottom {
  flex: none;
  padding: 0.25rem 0;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.browser-zone-label {
  padding: 0.625rem 1rem 0.2rem;
  margin: 0;
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.browser-nav-item {
  display: block;
  padding: 0.625rem 1rem 0.625rem calc(1rem - 3px);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border-left: 3px solid transparent;
  line-height: 1.3;
}
.browser-nav-item:hover  { color: var(--text); background: var(--hover); }
.browser-nav-item.active {
  color: var(--text);
  font-weight: 700;
  background: var(--hover);
  border-left-color: var(--accent);
}
.browser-nav-item--secondary {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}
.browser-nav-item--secondary:hover,
.browser-nav-item--secondary.active { color: var(--text); }
.browser-nav-sep { border: none; border-top: 1px solid var(--border); margin: 0.375rem 0; }
.browser-nav-collapse-btn {
  display: block;
  width: 100%;
  text-align: right;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
}
.browser-nav-collapse-btn:hover { color: var(--text); background: var(--hover); }
.browser-nav-reopen {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
}
.browser-nav-reopen:hover { color: var(--text); background: var(--hover); }
.browser-shell { position: relative; }
.browser-nav-collapsed .browser-nav { display: none; }
.browser-nav-collapsed .browser-nav-reopen { display: flex; }
.browser-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-input) transparent;
}
.browser-main::-webkit-scrollbar { width: 8px; }
.browser-main::-webkit-scrollbar-track { background: transparent; }
.browser-main::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: 4px; }
.browser-main::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Category cards on landing */
/* Hub landing cards (shared by admin, account, finance, directory, browser) */
.hub-landing-grid { gap: 1.25rem; }
.hub-landing-grid .hub-card { margin-bottom: 0; }
.hub-lucky-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0 0; }
.hub-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  padding: 1.75rem 1.5rem;
  min-height: 7.5rem;
}
.hub-card:hover { background: var(--hover); }
.hub-card--center {
  text-align: center;
  align-items: center;
  padding: 2rem 1.25rem;
  min-height: 9.5rem;
}
.hub-card--label-only .hub-card-label { font-size: 1.05rem; margin-top: 0.5rem; }
.hub-card-count { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hub-card--center .hub-card-count {
  font-size: 3.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  width: 100%;
  text-align: center;
}
.hub-card-label { font-size: 1.125rem; font-weight: 700; margin-top: 0; line-height: 1.25; }
.hub-card:not(.hub-card--rooms):not(.hub-card--center) .hub-card-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.hub-card:not(.hub-card--rooms):not(.hub-card--center) .hub-card-label .nav-badge {
  margin-left: 0;
  font-size: 0.7rem;
  min-width: 1.25rem;
  height: 1.25rem;
}
.hub-card--rooms .hub-card-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.hub-card--rooms .hub-card-label .nav-badge {
  margin-left: 0;
  font-size: 0.7rem;
  min-width: 1.25rem;
  height: 1.25rem;
}
.hub-card--center .hub-card-label {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 0.75rem;
  max-width: none;
}
.hub-card-desc { font-size: 0.9375rem; color: var(--text-muted); margin: 0.5rem 0 0; line-height: 1.45; max-width: 28ch; }
.hub-card--center .hub-card-desc { display: none; }
.hub-card--center.hub-card--label-only .hub-card-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 0;
}

.hub-room-cards-grid { margin-top: 1.25rem; }
.hub-card--rooms {
  position: relative;
  justify-content: flex-start;
  min-height: 7.5rem;
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.hub-card--rooms-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem 1.5rem;
}
.hub-card--rooms-empty:hover { background: var(--hover); }
.hub-card--rooms-empty .hub-card-desc { max-width: none; }
.hub-card--rooms-empty .hub-room-empty { margin: 0.5rem 0 0; }
.hub-card--rooms:not(.hub-card--rooms-empty):hover { background: var(--surface); }
.hub-card--rooms:has(.hub-card-rooms-head:hover) { background: var(--hover); }
.hub-card-rooms-head {
  display: block;
  padding: 1.75rem 1.5rem 0.75rem;
  text-decoration: none;
  color: inherit;
}
.hub-card-rooms-head:hover { background: transparent; }
.hub-card--rooms .hub-card-desc { max-width: none; margin-bottom: 0; }
.hub-card--rooms:has(.hub-room-list) .hub-card-rooms-head { padding-bottom: 0.5rem; }
.hub-card--rooms .hub-room-list { padding: 0 1.5rem 1.5rem; }
.hub-room-empty { font-size: 0.85rem; margin: 0.5rem 0 0; }
.hub-room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.hub-room-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  font-size: 0.85rem;
  background: var(--surface);
}
.hub-room-row:hover { background: var(--hover); }
.hub-room-row--unread { border-color: var(--text-muted); }
.hub-room-row-main { grid-column: 1; }
.hub-room-row-preview {
  grid-column: 1;
  font-size: 0.78rem;
}
.hub-room-row-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Admin dashboard */
.admin-alerts { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text); font-size: 0.88rem;
}
.admin-alert:hover { background: var(--hover); }
.admin-alert--danger { border-color: #dc2626; }
.admin-alert--warn { border-color: #d97706; }
.admin-alert-action { color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; }
.no-features-notice { margin-bottom: 1rem; display: flex; }
.panel-heading-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.75rem;
}
.panel-heading-row h2 { margin: 0; font-size: 1rem; }
.admin-panel-divider { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.admin-inline-note { font-size: 0.75rem; margin: 0.15rem 0 0; }
.admin-inline-note--danger { color: #dc2626; }
.admin-inline-note--warn { color: #d97706; }
.admin-faucet-row { margin-bottom: 0.625rem; }
.admin-faucet-row-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.82rem; gap: 0.5rem;
}
.admin-faucet-name { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.admin-faucet-meta { white-space: nowrap; flex-shrink: 0; }
.admin-faucet-bar { margin-top: 0.25rem; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.admin-faucet-bar > div { height: 100%; transition: width 0.3s; }
.admin-faucet-attention-panel { border-color: #d97706; }
.admin-faucet-attention-row { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.admin-faucet-attention-row:last-child { border-bottom: none; padding-bottom: 0; }
.admin-faucet-attention-row:first-child { padding-top: 0; }
.admin-faucet-warnings {
  margin: 0.35rem 0 0; padding: 0; list-style: none;
  font-size: 0.78rem; color: #d97706;
}
.admin-faucet-warnings li::before { content: '· '; }
.admin-faucet-warnings--danger { color: #dc2626; }
.admin-faucet-panel--red { border-left: 3px solid #dc2626; }
.admin-faucet-panel--yellow { border-left: 3px solid #d97706; }
.admin-faucet-panel--green { border-left: 3px solid transparent; }
.admin-faucet-panel--inactive { border-left: 3px solid #6b7280; opacity: 0.85; }

/* Admin overview - compact collapsible panels */
.admin-overview-panels { align-items: start; }
.admin-overview-disclosure { padding: 0; margin-bottom: 0; }
.admin-overview-disclosure__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem; cursor: pointer; list-style: none; user-select: none;
}
.admin-overview-disclosure__summary::-webkit-details-marker { display: none; }
.admin-overview-disclosure__summary:hover { background: var(--hover); }
.admin-overview-disclosure__title {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.92rem; font-weight: 600; min-width: 0;
}
.admin-overview-disclosure__hint {
  font-weight: 400; font-size: 0.78rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.admin-overview-disclosure__link {
  font-size: 0.78rem; font-weight: 500; color: var(--text-muted); text-decoration: none; flex-shrink: 0;
}
.admin-overview-disclosure__link:hover { color: var(--text); text-decoration: underline; }
.admin-overview-disclosure__body { padding: 0 1rem 0.75rem; }
.admin-overview-disclosure[open] > .admin-overview-disclosure__summary { padding-bottom: 0.45rem; }
.admin-overview-disclosure[open] > .admin-overview-disclosure__summary .disclosure-arrow { transform: rotate(90deg); }
.admin-module-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.admin-type-list { display: flex; flex-direction: column; gap: 0.2rem; }
.admin-type-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.82rem; padding: 0.15rem 0;
}
.admin-type-count { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.admin-overview-treasury {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.82rem;
}
.admin-overview-faucet-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  flex-wrap: wrap; margin-bottom: 0.35rem; font-size: 0.78rem;
}
.admin-panel-divider--tight { margin-top: 0.5rem; padding-top: 0.5rem; }
.admin-faucet-row--compact { margin-bottom: 0.4rem; }
.admin-faucet-row--compact:last-child { margin-bottom: 0; }
.admin-faucet-row--attention { padding-left: 0.35rem; border-left: 2px solid #d97706; }
.admin-faucet-row--attention.admin-faucet-row--danger { border-left-color: #dc2626; }
.admin-faucet-warning-line {
  margin: 0.1rem 0 0; font-size: 0.72rem; color: #d97706; line-height: 1.3;
}

/* ── Utility classes ─────────────────────────────────────────────────────────── */

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }

.gap-sm  { gap: 0.5rem; }
.gap-md  { gap: 0.75rem; }
.gap-lg  { gap: 1rem; }

.text-sm   { font-size: 0.875rem; }
.text-xs   { font-size: 0.75rem; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-dim);
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.back-link:hover { color: var(--text); }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.page-header h1 { margin: 0; }
.page-header-left  { display: flex; align-items: center; gap: 0.75rem; }
.page-header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* ── Rewards cards ─────────────────────────────────────────────────────────── */

.rewards-list { display: flex; flex-direction: column; gap: 0.75rem; }
.reward-card { margin: 0; }
.reward-card--muted .reward-card-action { opacity: 0.9; }
.reward-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.reward-card-head-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.reward-card-title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.reward-card-title a { color: inherit; text-decoration: none; }
.reward-card-title a:hover { text-decoration: underline; }
.reward-card-amount { font-size: 1.25rem; white-space: nowrap; }
.reward-card-desc { font-size: 0.85rem; margin: 0.375rem 0 0; }
.reward-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.reward-card-meta-item { display: flex; align-items: center; gap: 0.3rem; }
.reward-card-type-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.reward-card-inline-link { color: inherit; }
.reward-card-progress-labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}
.reward-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.reward-progress-fill {
  height: 100%;
  background: #16a34a;
  transition: width 0.3s;
}
.reward-progress-fill--full { background: #6b7280; }
.usage-progress-list { display: flex; flex-direction: column; gap: 0.75rem; }
.usage-progress-block { margin: 0; }
.usage-progress-labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}
.usage-progress {
  height: 6px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.usage-progress-fill {
  height: 100%;
  background: #16a34a;
  transition: width 0.3s;
}
.usage-progress-fill--full { background: #6b7280; }
.finance-usage-grid { margin-bottom: 1.25rem; }
.finance-usage-panel h2 { margin: 0 0 0.75rem; font-size: 0.95rem; }
.finance-usage-panel .usage-progress-list { margin-top: 0.5rem; }
.finance-balances-grid { align-items: start; }

.vault-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.vault-panel-head { display: flex; flex-direction: column; gap: 0.35rem; }
.vault-lead { margin: 0; font-size: 0.85rem; }
.vault-mode-toggle { margin: 0; }
.exchange-direction-toggle { margin: 0; }
/* CREDS gateway: anchor picker + direction options (stacked labels) */
.creds-anchor-picker { margin-bottom: 0.75rem; }
.creds-anchor-option { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.creds-anchor-token { font-weight: 600; }
.creds-anchor-rail { font-size: 0.72rem; color: var(--text-muted); }
.exchange-direction-toggle .exchange-direction-option {
  flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.5rem 0.85rem;
}
.exchange-direction-verb { font-weight: 600; font-size: 0.9rem; }
.exchange-direction-flow { font-size: 0.72rem; color: var(--text-muted); }
.exchange-direction-option.selected .exchange-direction-flow { color: var(--accent); }
.exchange-direction-arrow { opacity: 0.7; }

/* Token picker cards (bridge anchors) */
.token-card-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.token-card {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem;
  min-width: 8.5rem; cursor: pointer;
}
.token-card__body { display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.15; }
.token-card__label { font-weight: 600; font-size: 0.9rem; }
.token-card__rate { font-size: 0.72rem; color: var(--text-muted); }
.token-card.selected .token-card__rate { color: var(--accent); }

/* Amount shortcut chips */
.amount-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }

/* Big live preview row (pay -> get) */
.exchange-preview {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  border: 1px solid var(--border); background: var(--hover);
  padding: 0.7rem 0.9rem; border-radius: var(--radius, 0.125rem); margin-top: 0.75rem;
}
.exchange-preview.is-error { border-color: var(--error); }
.exchange-preview__leg { display: flex; flex-direction: column; gap: 0.05rem; }
.exchange-preview__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.exchange-preview__value { font-weight: 700; font-size: 1.05rem; }
.exchange-preview__arrow { opacity: 0.6; font-size: 1.1rem; }
.exchange-preview__meta { flex-basis: 100%; font-size: 0.78rem; color: var(--text-muted); }
.exchange-preview.is-error .exchange-preview__value { color: var(--error); font-size: 0.9rem; font-weight: 500; }

/* Convert card (reflexive From/To) */
.convert-card { display: flex; flex-direction: column; gap: 0; }
.convert-card__header { margin-bottom: 0.75rem; }
.convert-card__title { margin: 0 0 0.25rem; font-size: 1.05rem; }
.convert-card__rails { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.convert-card__rails .rail-filter-btn { cursor: pointer; }
.convert-card__legs { display: flex; flex-direction: column; gap: 0; }
.convert-card__leg { padding: 0.65rem 0; border-top: 1px solid var(--border); }
.convert-card__leg:first-child { border-top: none; padding-top: 0; }
.convert-card__leg-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.35rem; }
.convert-card__swap { display: flex; justify-content: center; padding: 0.25rem 0; color: var(--text-muted); font-size: 1.1rem; }
.convert-card__to-select option { font-size: 0.85rem; }
.convert-card__empty { font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0 0; }
.convert-card__fee-note { font-size: 0.78rem; color: var(--text-muted); margin: 0.5rem 0 0; }
.convert-card__submit { margin-top: 0.75rem; width: auto; min-width: 8rem; }
.convert-card__limits { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }

/* Lock boost disclosure (limits + vault) */
.lock-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.lock-benefit-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.75rem; }
.lock-benefit-section__title { margin: 0 0 0.35rem; font-size: 0.85rem; }
.lock-benefit-line { margin: 0 0 0.25rem; font-size: 0.8rem; color: var(--text-muted); }
.lock-benefit-line:last-child { margin-bottom: 0; }
.limit-boost-note { font-size: 0.82rem; }
.limit-boost-list { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--text-muted); }
.limit-boost-list li { margin: 0.15rem 0; }

/* What-next strip */
.exchange-next {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--text-muted); margin-top: 1rem;
}

/* Payment confirmation review card */
.payment-confirm { border-color: var(--accent); }
.payment-confirm__title { margin: 0 0 0.75rem; font-size: 1rem; }
.payment-confirm__flow {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.payment-confirm__leg { display: flex; flex-direction: column; gap: 0.1rem; }
.payment-confirm__leg-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.payment-confirm__leg-value { font-weight: 700; font-size: 1.15rem; }
.payment-confirm__arrow { opacity: 0.6; font-size: 1.25rem; }
.payment-confirm__meta { margin: 0.75rem 0 0; font-size: 0.8rem; }
.payment-confirm__rows {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem;
  margin: 0.75rem 0 0; padding: 0.75rem 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.payment-confirm__rows dt {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); align-self: center;
}
.payment-confirm__rows dd { margin: 0; font-weight: 700; font-size: 0.95rem; }
.payment-confirm__rows dd.is-warn { color: var(--danger, #e11d48); }
.payment-confirm__warnings {
  list-style: none; margin: 0.75rem 0 0; padding: 0.6rem 0.75rem;
  border: 1px solid var(--danger, #e11d48); border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger, #e11d48) 10%, transparent);
}
.payment-confirm__warnings li { font-size: 0.82rem; color: var(--danger, #e11d48); }
.payment-confirm__warnings li + li { margin-top: 0.35rem; }
.payment-confirm__actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.payment-confirm__actions button { width: auto; min-width: 7rem; }

/* Exchange tab bar: horizontal scroll on small screens */
@media (max-width: 640px) {
  .exchange-rail-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .exchange-rail-tabs .exchange-rail-tab { flex: 0 0 auto; }
  .exchange-section-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .exchange-section-tabs .exchange-rail-tab { flex: 0 0 auto; }
}

.exchange-section-tabs { margin-bottom: 0.5rem; }

.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.activity-row:first-child { border-top: none; }
.activity-kind {
  flex: 0 0 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
}
.activity-kind--trade { color: var(--accent); border-color: var(--accent); }
.activity-flow {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex-wrap: wrap;
}
.activity-leg { font-weight: 600; }
.activity-arrow { color: var(--text-dim); }
.activity-time { flex: 0 0 auto; font-size: 0.8rem; }

.vault-section { margin: 0; }
.vault-section-title {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.vault-limit-stats { margin-top: 0.75rem; margin-bottom: 0; }
.vault-balances { margin-bottom: 0.75rem; }
.vault-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(5rem, 7rem) auto;
  gap: 0.625rem;
  align-items: end;
  margin-top: 0;
}
.vault-form-row label { min-width: 0; }
.vault-form-row button { align-self: end; }
.vault-details {
  display: grid;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.vault-details > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; align-items: start; }
.vault-details dt { margin: 0; color: var(--text-muted); }
.vault-details dd { margin: 0; line-height: 1.45; }
.vault-details dd.vault-detail-warn { color: var(--error); }

.reward-card-position { font-size: 0.82rem; margin: 0.375rem 0 0; }
.reward-card-action { margin-top: 0.875rem; }
.reward-card-claim-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.reward-card-cooldown { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.reward-card-claim-disabled { cursor: not-allowed; opacity: 0.5; }
.reward-card-cooldown-text { font-size: 0.85rem; }
.reward-card-status-msg { font-size: 0.85rem; margin: 0; }
.reward-card-details-toggle { display: inline-block; cursor: pointer; list-style: none; }
.reward-claim-history { font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.reward-claim-history-row { font-size: 0.8rem; padding: 0.1rem 0; }
.reward-claim-history-more { margin: 0.25rem 0 0; font-size: 0.75rem; }

.rewards-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.rewards-filter-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pill-filter {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 0.125rem;
  cursor: pointer;
  user-select: none;
}
.pill-filter:hover { background: var(--hover); color: var(--text); }
.pill-filter input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pill-filter:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.rewards-filter-count { font-size: 0.8rem; white-space: nowrap; }

/* Account setup wizard */
body.setup-body {
  background: var(--bg);
  min-height: 100vh;
}
.setup-shell {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}
.setup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.setup-brand { font-weight: 700; font-size: 1rem; display: block; }
.setup-subtitle { font-size: 0.8rem; color: var(--text-dim); }
.setup-lead { font-size: 0.9rem; margin: 0 0 1.25rem; }
.setup-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.setup-progress-summary {
  width: 100%;
  font-size: 0.72rem;
  margin-bottom: 0.15rem;
}
.setup-progress-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.setup-progress-item--active { color: var(--text); font-weight: 600; }
.setup-progress-item--done .setup-progress-dot {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.setup-progress-dot {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.65rem;
  line-height: 1;
}
.setup-progress-item--active .setup-progress-dot {
  border-color: var(--text);
  color: var(--text);
}
.setup-progress-label { white-space: nowrap; }
.setup-main h1 { font-size: 1.35rem; margin: 0 0 0.5rem; }
.setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}
.setup-back {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* Setup — bulk checkbox controls (Select all / None / Invert) */
.setup-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.bulk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.bulk-toggle-label { font-size: 0.8rem; color: var(--text-dim); }
.bulk-toggle-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.bulk-toggle-count {
  font-size: 0.75rem;
  min-width: 2.5rem;
  text-align: right;
}
.disclosure-summary-row {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: calc(100% - 1.25rem);
}
.disclosure-summary-row .bulk-toggle { flex-shrink: 0; }
.setup-done-links {
  display: grid;
  gap: 0.75rem;
}

/* Setup — menu layout preview */
.setup-nav-preview {
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  overflow: hidden;
  background: var(--bg);
  min-height: 14rem;
}
.setup-nav-preview-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--topbar-bg, var(--surface));
  color: var(--topbar-text, var(--text));
  border-bottom: 1px solid var(--border);
}
.setup-nav-preview-hamburger {
  display: none;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  line-height: 1;
}
.setup-nav-preview-brand { font-weight: 600; font-size: 0.9rem; }
.setup-nav-preview-body {
  display: flex;
  min-height: 11rem;
  position: relative;
}
.setup-nav-preview-sidebar {
  width: 38%;
  min-width: 7.5rem;
  max-width: 10rem;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 0.35rem 0;
  flex-shrink: 0;
}
.setup-nav-preview-nav { display: flex; flex-direction: column; }
.setup-nav-preview-nav a,
.setup-nav-demo-link {
  display: block;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.setup-nav-demo-link.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.setup-nav-demo-link:hover { background: var(--hover); }
.setup-nav-preview-zone {
  display: block;
  padding: 0.55rem 0.75rem 0.2rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.setup-nav-preview-main {
  flex: 1;
  padding: 1rem;
  background: var(--bg);
}
.setup-nav-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 2;
}
.setup-nav-preview[data-mode="auto"] .setup-nav-preview-hamburger,
.setup-nav-preview[data-mode="drawer"] .setup-nav-preview-hamburger { display: inline-flex; }
.setup-nav-preview[data-mode="auto"] .setup-nav-preview-body,
.setup-nav-preview[data-mode="drawer"] .setup-nav-preview-body { display: block; }
.setup-nav-preview[data-mode="auto"] .setup-nav-preview-sidebar,
.setup-nav-preview[data-mode="drawer"] .setup-nav-preview-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 3;
  max-width: min(72%, 11rem);
  transform: translateX(-105%);
  transition: transform 0.2s ease;
  box-shadow: 4px 0 12px rgba(0,0,0,0.12);
}
.setup-nav-preview[data-mode="auto"] .setup-nav-preview-main,
.setup-nav-preview[data-mode="drawer"] .setup-nav-preview-main { min-height: 11rem; }
.setup-nav-preview[data-mode="auto"].setup-nav-preview--open .setup-nav-preview-sidebar,
.setup-nav-preview[data-mode="drawer"].setup-nav-preview--open .setup-nav-preview-sidebar {
  transform: translateX(0);
}
.setup-nav-preview[data-mode="docked"] .setup-nav-preview-sidebar {
  position: static;
  transform: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .setup-progress-label { display: none; }
  .setup-shell { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ─── Entity create (tier ladder + type cards) ───────────────────────────── */
.entity-create-lead { max-width: 42rem; }
.entity-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: 1rem;
  align-items: start;
}

/* Override global button { width: 100% } inside this form */
.entity-create-form button.entity-tier-chip,
.entity-create-form button.entity-type-card {
  width: auto;
  background: transparent;
  color: inherit;
  border: 1px solid var(--border);
  font-family: inherit;
  line-height: 1.2;
}
.entity-create-form button.entity-type-card.selected {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.entity-create-form button.entity-type-card:hover:not(.selected) {
  border-color: var(--text-muted);
  background: var(--hover);
}
.entity-create-form button.entity-create-submit {
  width: 100%;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
}
.entity-create-form button.entity-create-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.entity-create-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.entity-create-tier-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.entity-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius, 0.125rem);
  cursor: pointer;
  user-select: none;
}
.entity-tier-chip:hover { border-color: var(--text-muted); }
.entity-tier-chip.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.entity-tier-chip__n {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  line-height: 1.1;
}
.entity-tier-chip.selected .entity-tier-chip__n {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent);
}
.entity-create-search-input {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 14rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
  border: 1px solid var(--border-input, var(--border));
  border-radius: var(--radius, 0.125rem);
  background: var(--surface);
  color: inherit;
  font-family: inherit;
}

.entity-create-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.45rem;
  max-height: 26rem;
  overflow-y: auto;
  padding-right: 0.1rem;
}
.entity-type-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  min-height: 4.75rem;
  text-align: left;
  cursor: pointer;
}
.entity-type-card.is-filtered-out { display: none !important; }
.entity-type-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
}
.entity-type-card__tier {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.entity-type-card.selected .entity-type-card__tier { color: var(--accent); }
.entity-type-card__fee {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.entity-type-card.selected .entity-type-card__fee { color: var(--accent); }
.entity-type-card__name { font-weight: 600; font-size: 0.88rem; line-height: 1.2; }
.entity-type-card__meta {
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.25;
  margin-top: auto;
}

.entity-create-detail {
  position: sticky;
  top: 0.75rem;
}
.entity-create-detail__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.entity-create-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.125rem);
  background: var(--hover);
  min-width: 0;
}
.entity-create-stat__val {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entity-create-stat__lbl {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.entity-create-stat--low {
  border-color: var(--error, #dc2626);
}
.entity-create-stat--low .entity-create-stat__val {
  color: var(--error, #dc2626);
}
.entity-create-detail__desc {
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0 0 0.55rem;
  color: var(--text-muted);
}
.entity-create-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}
.badge-sm.join-open { background: var(--success, #16a34a); color: #fff; }
.badge-sm.join-invite { background: var(--text-muted, #6b7280); color: #fff; }
.badge-sm.join-approval { background: #d97706; color: #fff; }
.badge-sm.join-closed { background: var(--danger, #dc2626); color: #fff; }
.entity-create-detail__roles { font-size: 0.78rem; margin: 0 0 0.3rem; }
.entity-create-detail__presets { margin: 0 0 0.65rem; font-size: 0.75rem; }
.entity-create-licenses__title {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.entity-license-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-height: 5.5rem;
  overflow-y: auto;
}
.entity-license-chip {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.68rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.125rem);
  background: var(--hover);
  line-height: 1.2;
}
.entity-license-empty {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}
.entity-create-fee-line { font-size: 0.82rem; }
.entity-create-name input { width: 100%; }
.entity-create-empty { font-size: 0.85rem; margin: 0.75rem 0 0; }

@media (max-width: 900px) {
  .entity-create-layout { grid-template-columns: 1fr; }
  .entity-create-detail { position: static; }
  .entity-create-types { max-height: none; }
  .entity-create-search-input { max-width: none; flex-basis: 100%; }
  .entity-create-detail__stats { grid-template-columns: 1fr 1fr 1fr; }
}