/* =========================================================
   Workstation Web — Design System
   Tokens (OKLCH + HEX fallback) → Components → Responsive
   ========================================================= */

/* ── Tokens (Light) ─────────────────────────────────────── */
:root {
  /* Colors */
  --c-bg:             oklch(98%  0.005 250);  /* #f6f7fb */
  --c-bg-page:        oklch(96%  0.006 250);  /* page header strip */
  --c-surface:        oklch(100% 0     0);    /* #ffffff */
  --c-surface-hover:  oklch(97%  0.005 250);
  --c-border:         oklch(92%  0.008 250);  /* #e5e7eb */
  --c-border-strong:  oklch(82%  0.015 250);  /* #cbd5e1 */
  --c-text:           oklch(22%  0.025 255);  /* near #172033 */
  --c-text-secondary: oklch(46%  0.025 250);  /* AA on bg/surface */
  --c-text-tertiary:  oklch(58%  0.020 250);
  --c-primary:        oklch(54%  0.20  263);  /* near #2563eb */
  --c-primary-hover:  oklch(48%  0.22  263);
  --c-primary-active: oklch(42%  0.22  263);
  --c-primary-soft:   oklch(95%  0.04  263);
  --c-success:        oklch(56%  0.16  150);
  --c-success-soft:   oklch(95%  0.05  150);
  --c-success-text:   oklch(35%  0.13  150);
  --c-warning:        oklch(70%  0.16  75);
  --c-warning-soft:   oklch(96%  0.06  75);
  --c-danger:         oklch(56%  0.20  25);   /* near #dc2626 */
  --c-danger-hover:   oklch(48%  0.22  25);
  --c-danger-soft:    oklch(96%  0.04  25);
  --c-danger-text:    oklch(38%  0.18  25);
  --c-code-bg:        oklch(20%  0.025 255);
  --c-code-text:      oklch(92%  0.010 250);
  --c-code-comment:   oklch(70%  0.030 250);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
               "DejaVu Sans Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Spacing — 4pt base */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px oklch(20% 0.02 255 / 0.05);
  --shadow-md: 0 1px 3px oklch(20% 0.02 255 / 0.06),
               0 4px 12px oklch(20% 0.02 255 / 0.05);
  --shadow-lg: 0 4px 16px oklch(20% 0.02 255 / 0.10);

  /* Motion */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
  --easing-out:      cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Tokens (Dark via prefers-color-scheme) ─────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:             oklch(16% 0.015 255);
    --c-bg-page:        oklch(20% 0.015 255);
    --c-surface:        oklch(22% 0.015 255);
    --c-surface-hover:  oklch(26% 0.015 255);
    --c-border:         oklch(30% 0.018 255);
    --c-border-strong:  oklch(42% 0.022 255);
    --c-text:           oklch(96% 0.005 250);
    --c-text-secondary: oklch(74% 0.018 250);
    --c-text-tertiary:  oklch(60% 0.020 250);
    --c-primary:        oklch(72% 0.18 263);
    --c-primary-hover:  oklch(80% 0.18 263);
    --c-primary-active: oklch(86% 0.16 263);
    --c-primary-soft:   oklch(28% 0.10 263);
    --c-success:        oklch(72% 0.16 150);
    --c-success-soft:   oklch(28% 0.08 150);
    --c-success-text:   oklch(85% 0.12 150);
    --c-warning:        oklch(80% 0.14 75);
    --c-warning-soft:   oklch(30% 0.08 75);
    --c-danger:         oklch(72% 0.20 25);
    --c-danger-hover:   oklch(80% 0.20 25);
    --c-danger-soft:    oklch(28% 0.10 25);
    --c-danger-text:    oklch(85% 0.16 25);
    --c-code-bg:        oklch(13% 0.020 255);
    --c-code-text:      oklch(92% 0.010 250);
    --c-code-comment:   oklch(60% 0.025 250);

    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.40);
    --shadow-md: 0 1px 3px oklch(0% 0 0 / 0.40),
                 0 4px 12px oklch(0% 0 0 / 0.30);
    --shadow-lg: 0 4px 16px oklch(0% 0 0 / 0.50);
  }
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--text-base)/var(--leading-normal) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-out);
}
a:hover {
  color: var(--c-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
h1, h2, h3, h4 {
  color: var(--c-text);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }
p { margin: 0 0 var(--space-3); line-height: var(--leading-normal); }
p:last-child { margin-bottom: 0; }
ul, ol { line-height: var(--leading-normal); }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--space-5) 0; }

/* Focus ring — visible only on keyboard focus */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.brand {
  display: block;
  color: var(--c-text);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.topbar > div p {
  margin: 2px 0 0;
  color: var(--c-text-secondary);
  font-size: var(--text-xs);
}
nav {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  align-items: center;
  flex-wrap: wrap;
}
nav a { color: var(--c-text-secondary); }
nav a:hover { color: var(--c-text); text-decoration: none; }
.nav-form { display: inline; margin: 0; }
.nav-form button {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  nav {
    width: 100%;
    border-top: 1px solid var(--c-border);
    padding-top: var(--space-3);
    gap: var(--space-3) var(--space-4);
  }
}

/* ── Container ──────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: var(--space-6) auto;
  padding: 0 var(--space-6);
}
@media (max-width: 640px) {
  .container { padding: 0 var(--space-4); margin: var(--space-4) auto; }
}

/* ── Page header / titles ───────────────────────────────── */
.page-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.page-title.compact { margin-bottom: var(--space-3); }
.page-title h1 { margin: 0; font-size: var(--text-2xl); }
.page-title h2 { margin: 0; font-size: var(--text-lg); }
.page-title p {
  margin: var(--space-1) 0 0;
  color: var(--c-text-secondary);
  font-size: var(--text-sm);
}
.page-title .actions { flex: 0 0 auto; }

/* Hero used as page header on dashboard — flat, not a card */
.hero {
  margin-bottom: var(--space-6);
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.hero h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-1);
}
.hero p {
  color: var(--c-text-secondary);
  font-size: var(--text-base);
}

/* ── Cards / surfaces ───────────────────────────────────── */
.card,
.empty,
.notice,
.group-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.card {
  display: block;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  color: inherit;
}
a.card { transition: border-color var(--duration-fast) var(--easing-out),
                     box-shadow      var(--duration-fast) var(--easing-out),
                     transform       var(--duration-fast) var(--easing-out); }
a.card:hover { text-decoration: none; }

.empty {
  padding: var(--space-6);
  color: var(--c-text-secondary);
  text-align: center;
  font-size: var(--text-sm);
}

/* Notices */
.notice {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  border-left: 3px solid var(--c-border-strong);
  border-radius: var(--radius-md);
}
.notice.success {
  background: var(--c-success-soft);
  border-color: var(--c-success);
  color: var(--c-success-text);
}
.notice.error {
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
  color: var(--c-danger-text);
}
.notice ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }

/* ── Stat grid (dashboard 2-col) ────────────────────────── */
.grid.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.grid.two > a.card {
  margin: 0;
  padding: var(--space-5) var(--space-6);
}
.grid.two > a.card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.grid.two > a.card h2 {
  font-size: var(--text-xs);
  color: var(--c-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.grid.two > a.card p {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--c-text);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

/* ── Buttons ────────────────────────────────────────────── */
.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--c-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  font: 600 var(--text-sm)/1.2 var(--font-sans);
  cursor: pointer;
  transition: background  var(--duration-fast) var(--easing-out),
              border-color var(--duration-fast) var(--easing-out),
              color        var(--duration-fast) var(--easing-out),
              box-shadow   var(--duration-fast) var(--easing-out),
              opacity      var(--duration-fast) var(--easing-out);
  white-space: nowrap;
  text-decoration: none;
}
.button:hover, button:hover { background: var(--c-primary-hover); color: #fff; text-decoration: none; }
.button:active, button:active { background: var(--c-primary-active); }

.button.secondary,
button.secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.button.secondary:hover,
button.secondary:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-text-secondary);
  color: var(--c-text);
}

button.danger {
  background: var(--c-surface);
  color: var(--c-danger);
  border-color: var(--c-border-strong);
}
button.danger:hover {
  background: var(--c-danger);
  color: #fff;
  border-color: var(--c-danger);
}

button:disabled,
.button:disabled {
  background: var(--c-surface);
  color: var(--c-text-tertiary);
  border-color: var(--c-border);
  cursor: not-allowed;
  opacity: 0.65;
}
button:disabled:hover { background: var(--c-surface); border-color: var(--c-border); }

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  margin-bottom: var(--space-5);
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  background: var(--c-surface);
}
.table-wrap > table { border-radius: 0; }
/* Standalone tables (legacy, not wrapped) keep visible border */
.container > table,
section > table:not(.table-wrap > table) {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
th, td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
  line-height: var(--leading-snug);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--duration-fast) var(--easing-out); }
tbody tr:hover td { background: var(--c-surface-hover); }
th {
  background: var(--c-bg-page);
  color: var(--c-text-secondary);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Action column: keep buttons inline */
td.actions, .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  white-space: nowrap;
}
td.actions form { display: inline-flex; margin: 0; }
td.actions a {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
td.actions a:hover {
  color: var(--c-primary);
  text-decoration: none;
  background: var(--c-primary-soft);
}

/* Inline forms */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.inline-form input,
.inline-form select { flex: 1 1 auto; min-width: 0; }

/* ── Forms ──────────────────────────────────────────────── */
.form {
  display: grid;
  gap: var(--space-3);
  max-width: 720px;
}
.auth-card {
  max-width: 420px;
  margin: var(--space-12) auto 0;
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.auth-card h1 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}
.auth-card .form { gap: var(--space-3); }
.auth-card .button { width: 100%; }
.auth-card .muted { text-align: center; margin-top: var(--space-4); }

label {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text);
}
input, textarea, select {
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: 400 var(--text-sm)/var(--leading-normal) var(--font-sans);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--duration-fast) var(--easing-out),
              box-shadow   var(--duration-fast) var(--easing-out);
  width: 100%;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
input::placeholder, textarea::placeholder { color: var(--c-text-tertiary); }
textarea {
  min-height: 120px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
}
.checkbox input { width: auto; }

/* ── Misc ───────────────────────────────────────────────── */
.muted { color: var(--c-text-secondary); font-size: var(--text-sm); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }
:not(pre) > code {
  background: var(--c-bg-page);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
}

pre {
  background: var(--c-code-bg);
  color: var(--c-code-text);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font: 400 var(--text-xs)/var(--leading-relaxed) var(--font-mono);
}
pre code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  border: 0;
}

/* ── Pagination ─────────────────────────────────────────── */
.pagination { margin-top: var(--space-5); }
.pagination nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 0;
  padding: 0;
  margin: 0;
}
.pagination svg { width: 18px; height: 18px; }

/* ── Misc grids and toolbars ────────────────────────────── */
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.group-card { padding: var(--space-4); }
.group-card ul { margin: 0; padding-left: var(--space-5); line-height: var(--leading-relaxed); }

.bulk-toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.diff-list { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); }
.diff-box,
.diff-group {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-primary-soft);
  border-radius: var(--radius-md);
  background: var(--c-primary-soft);
  font-size: var(--text-sm);
  color: var(--c-text);
}
.diff-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.diff-group.compact { padding: var(--space-2) var(--space-3); }
.diff-group summary { cursor: pointer; font-weight: 700; }
.import-failures {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Install page (装一台新 VPS) + nav redesign
   "藏的藏, 露的露" — 必备折叠, 可选卡片化, 大复制按钮
   ========================================================= */

/* ── Top nav: primary + more dropdown ───────────────────── */
.nav-primary {
  font-size: var(--text-base);
  color: var(--c-primary);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.nav-primary:hover {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  text-decoration: none;
}
.nav-more {
  position: relative;
}
.nav-more > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--c-text-secondary);
  font-weight: 600;
  font-size: var(--text-sm);
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after {
  content: " ▾";
  font-size: 0.85em;
  color: var(--c-text-tertiary);
}
.nav-more > summary:hover {
  color: var(--c-text);
}
.nav-more-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 30;
}
.nav-more-panel a {
  padding: var(--space-2) var(--space-3);
  color: var(--c-text);
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
}
.nav-more-panel a:hover {
  background: var(--c-surface-hover);
  text-decoration: none;
  color: var(--c-text);
}
.nav-more-panel hr {
  margin: var(--space-1) 0;
  border: 0;
  border-top: 1px solid var(--c-border);
}
@media (max-width: 768px) {
  .nav-more-panel {
    position: static;
    box-shadow: none;
    margin-top: var(--space-2);
  }
}

/* ── Preset bar ─────────────────────────────────────────── */
.preset-bar h2 {
  font-size: var(--text-base);
}
.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.preset-buttons .button.secondary .muted {
  margin-left: var(--space-1);
  font-size: var(--text-xs);
}

/* ── Core fold (system base, default collapsed) ─────────── */
.core-fold {
  padding: var(--space-4) var(--space-5);
}
.core-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.core-fold > summary::-webkit-details-marker { display: none; }
.core-fold-title {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-base);
}
.core-fold .fold-hint {
  margin-left: auto;
  color: var(--c-text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.core-fold:not([open]) .fold-hint::before { content: "展开"; }
.core-fold[open] .fold-hint::before { content: "收起"; }
.core-fold[open] > summary {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-border);
}
.core-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 0;
}
.core-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--c-text);
}
.module-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--c-text-tertiary);
}
.context-ssh { background: var(--c-primary); }
.context-rdp { background: var(--c-warning); }
.context-any { background: var(--c-text-tertiary); }

/* ── Section title ──────────────────────────────────────── */
.section-title {
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--text-xl);
}

/* ── Optional groups grid ───────────────────────────────── */
.optional-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.optional-group {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
}
.optional-group h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--c-border);
}
.group-icon {
  font-size: var(--text-lg);
  line-height: 1;
}
.group-count {
  margin-left: auto;
  font-size: var(--text-xs);
}
.optional-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.optional-item {
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--easing-out);
  cursor: pointer;
}
.optional-item:hover { background: var(--c-surface-hover); }
.optional-item input { margin-right: var(--space-1); }
.optional-name { flex: 1 1 auto; }

.badge {
  font-size: var(--text-xs);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-full);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-rec {
  background: var(--c-warning-soft);
  color: var(--c-warning);
  border-color: var(--c-warning);
}
.badge-risk {
  background: var(--c-danger-soft);
  color: var(--c-danger-text);
  border-color: var(--c-danger);
}
.badge-medium {
  background: var(--c-bg-page);
  color: var(--c-text-secondary);
  border-color: var(--c-border-strong);
}

/* ── Generate bar (sticky bottom) ───────────────────────── */
.generate-bar {
  position: sticky;
  bottom: 0;
  background: var(--c-bg);
  padding: var(--space-4) 0;
  margin: 0 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 5;
  border-top: 1px solid var(--c-border);
}
.button-large {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: 700;
}

/* ── Command area ───────────────────────────────────────── */
.command-area pre { font-size: var(--text-sm); }
.command-area .empty { padding: var(--space-8) var(--space-6); }