@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root {
  --bg: #f6faf9;
  --ink: #10201d;
  --teal: #0f766e;
  --teal-dark: #08423c;
  --muted: #64748b;
  --body: #334155;
  --border: #d7e3e0;
  --border-soft: #dbeae7;
  --card-bg: #f6faf9;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', Helvetica, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); text-decoration: underline; }
table { border-collapse: collapse; width: 100%; }

/* ---------- app shell: left sidebar + top bar (see views/partials/sidebar.ejs, topbar.ejs) ---------- */
.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 208px; overflow-y: auto;
  background: #fff; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 22px 0; z-index: 30;
}
.app-sidebar-brand { padding: 0 20px 22px; }
.app-sidebar-brand-name { font-size: 14px; font-weight: 900; letter-spacing: -.02em; }
.app-sidebar-brand-sub { font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; }
.app-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.app-nav-link {
  display: block; padding: 9px 12px; border-radius: 3px; font-size: 12.5px; font-weight: 700;
  color: var(--body); text-decoration: none;
}
.app-nav-link:hover { background: #f0faf8; text-decoration: none; }
.app-nav-link.active { background: var(--teal); color: #fff; }
.app-nav-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--critical, #d03b3b); color: #fff; font-size: 10.5px; font-weight: 900; vertical-align: middle;
}
.app-nav-link.active .app-nav-badge { background: rgba(255,255,255,.35); }
.app-nav-group { margin-top: 20px; }
.app-nav-group-label {
  display: flex; align-items: center; gap: 5px; padding: 4px 12px; margin-bottom: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted);
  text-transform: uppercase; cursor: pointer; user-select: none; list-style: none;
  border-radius: 3px;
}
.app-nav-group-label:hover { background: #f0faf8; }
.app-nav-group-label::-webkit-details-marker { display: none; }
.app-nav-group-label::before {
  content: ''; width: 0; height: 0; flex-shrink: 0;
  border-left: 4px solid var(--muted); border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  transition: transform .15s ease;
}
.app-nav-group[open] > .app-nav-group-label::before { transform: rotate(90deg); }
.app-nav-group-items { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }

.app-main { margin-left: 208px; min-height: 100vh; }
.app-topbar {
  position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); padding: 10px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
}
.app-topbar-right { display: flex; align-items: center; gap: 10px; }

@media (max-width: 860px) {
  .app-sidebar {
    position: static; width: 100%; flex-direction: row; align-items: center;
    padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto;
  }
  .app-sidebar-brand { padding: 0 16px 0 0; }
  .app-sidebar-nav { flex-direction: row; padding: 0; white-space: nowrap; align-items: center; }
  .app-nav-group { position: relative; margin-top: 0; margin-left: 14px; }
  .app-nav-group-items { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 6px; min-width: 140px; box-shadow: 0 4px 12px rgba(0,0,0,.08); z-index: 40; }
  .app-main { margin-left: 0; }
}

/* ---------- toolbar ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.toolbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 11px 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
}
.toolbar-title { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.toolbar-title .name { font-size: 13px; font-weight: 900; letter-spacing: -.02em; }
.toolbar-title .state { font-size: 11px; font-weight: 700; color: var(--muted); }
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-nav { display: flex; align-items: center; gap: 6px; }
.btn {
  border: 1px solid var(--border); border-radius: 3px; padding: 8px 15px;
  background: var(--white); color: #164e48; font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: #f0faf8; }
.btn-primary { border-color: var(--teal); background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-icon { padding: 6px 9px; }
select.month-select {
  border: 1px solid var(--border); border-radius: 3px; padding: 7px 10px; font-family: inherit;
  font-size: 12px; font-weight: 700; color: #164e48; background: #fff;
}

/* ---------- doc / sheet ---------- */
.doc { max-width: 1280px; margin: 0 auto; padding: 24px 28px 84px; }
.sheet {
  background: #fff; border: 1px solid var(--border); border-radius: 3px;
  box-shadow: rgba(15,118,110,.06) 0 1px 2px; margin-top: 12px; position: relative; overflow: hidden;
}
.sheet::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0f766e, #5eead4);
}
.brief { padding: 46px 50px 40px; }
.doc-title { margin: 20px 0 34px; font-size: 42px; font-weight: 900; letter-spacing: -.05em; line-height: 1.14; }
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .26em; color: var(--teal); text-transform: uppercase; }
.hr-strong { height: 1.2px; background: var(--ink); }
.meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); padding-top: 22px; }
.meta-col { padding: 0 30px; }
.meta-col:first-child { padding-left: 0; }
.meta-col + .meta-col { border-left: 1px solid var(--border-soft); }
.meta-label { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.meta-value { margin-top: 9px; font-size: 17px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

/* ---------- KPI cards ---------- */
.kpi-row { padding: 30px 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.kpi-cell { padding: 0 30px; }
.kpi-cell + .kpi-cell { border-left: 1px solid var(--border-soft); }
.kpi-head { display: flex; align-items: center; gap: 8px; }
.kpi-head svg { width: 14px; height: 14px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi-head span { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.kpi-num { margin-top: 16px; font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.kpi-num .unit { font-size: 15px; font-weight: 700; margin-left: 3px; color: var(--teal); }
.kpi-sub { margin-top: 11px; font-size: 11.5px; color: var(--muted); }

/* ---------- generic section ---------- */
.section { padding: 34px 34px 36px; }
.sec-head { display: flex; align-items: flex-end; gap: 15px; padding-bottom: 14px; border-bottom: 1.2px solid var(--ink); margin-bottom: 24px; }
.sec-num { font-size: 40px; font-weight: 900; line-height: .8; letter-spacing: -.06em; color: #a7dcd6; font-variant-numeric: tabular-nums; }
.sec-title { font-size: 19px; font-weight: 900; letter-spacing: -.035em; }
.sub-h { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; }
.sub-h:first-of-type { margin-top: 0; }
.sub-h .dash { width: 14px; height: 2px; background: var(--teal); }
.sub-t { font-size: 12px; font-weight: 900; letter-spacing: .04em; }

/* ---------- overview boxes (section 01 style) ---------- */
.note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.note-blk { border: 1px solid #cfe4e0; border-radius: 8px; background: var(--card-bg); padding: 24px 26px; min-height: 120px; }
.note-blk .head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.note-blk svg { width: 20px; height: 20px; fill: none; stroke: var(--teal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.note-blk b { font-size: 13.5px; font-weight: 900; letter-spacing: -.01em; }
.note-blk ul { margin: 15px 0 0; padding-left: 16px; font-size: 13.5px; line-height: 1.8; color: var(--body); }

.scope-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 26px; }
.scope-item { padding: 0 26px; min-height: 96px; }
.scope-item:first-child { padding-left: 0; }
.scope-item + .scope-item { border-left: 1px solid var(--border-soft); }
.scope-item svg { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scope-item strong { display: block; margin: 15px 0 8px; font-size: 13.5px; font-weight: 900; letter-spacing: -.02em; }
.scope-item span { display: block; font-size: 12.5px; line-height: 1.65; color: #475569; }

/* ---------- tables ---------- */
table.report-table { table-layout: fixed; font-size: 12.5px; }
table.report-table th {
  padding: 0 10px 9px; text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1.2px solid var(--ink);
}
table.report-table th.center { text-align: center; }
table.report-table td {
  padding: 10px; border-bottom: 1px solid #e3edea; vertical-align: top; color: var(--body);
}
table.report-table td.muted { color: var(--muted); }
table.report-table td.strong { font-weight: 700; color: var(--ink); }
table.report-table td.num { font-variant-numeric: tabular-nums; }
table.report-table td.center { text-align: center; }
table.report-table tbody tr:hover { background: #fafdfc; }
.empty-row td { padding: 20px 10px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #94a3b8; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.badge-critical { background: #e5e7eb; color: #6b7280; }
.badge-fatal { background: #fee2e2; color: #991b1b; }
.badge-major { background: #fee2e2; color: #991b1b; }
.badge-minor { background: #e5e7eb; color: #6b7280; }
.badge-warning { background: #fef3c7; color: #92400e; }

/* ---------- analysis / insight cards ---------- */
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an-item { border: 1px solid #cfe4e0; border-radius: 8px; background: var(--card-bg); padding: 22px 24px; min-height: 118px; position: relative; }
.an-item b { display: block; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; font-weight: 900; letter-spacing: -.02em; }
.an-item ul { margin: 13px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.7; color: var(--body); }

/* ---------- generic boxed card for a chart/table/metric block (see also .sub-h above it) ---------- */
.chart-box {
  border: 1px solid var(--border); border-radius: 8px; background: var(--white);
  padding: 22px 24px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(15,118,110,.06);
}
.chart-box:last-child { margin-bottom: 0; }
.chart-box-head { margin-bottom: 18px; }
.chart-box-title { font-size: 13px; font-weight: 900; color: var(--ink); letter-spacing: -.01em; }
.chart-box-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.chart-box > table.report-table { margin: 0; }

/* ---------- inline trend / usage viz ---------- */
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbars .row { display: flex; align-items: center; gap: 10px; }
.hbars .track { flex: 1; background: #eef5f3; border-radius: 2px; height: 18px; position: relative; }
.hbars .fill { position: absolute; left: 0; top: 0; bottom: 0; background: #0f766e; border-radius: 2px; }
.hbars .label { width: 130px; font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.hbars .value { width: 60px; text-align: right; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ---------- SVG line chart (public/js/charts.js) ---------- */
.chart-line { width: 100%; max-width: 640px; min-height: 90px; }
.chart-line svg { display: block; }

/* ---------- radial usage gauges ---------- */
.gauge-row { display: flex; flex-wrap: wrap; gap: 36px; padding: 6px 0 20px; }
.gauge-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gauge-label { font-size: 11.5px; color: var(--muted); font-weight: 700; text-align: center; }

/* ---------- monitoring summary catalog table (grouped/merged cells) ---------- */
table.monitor-summary td.group-cell {
  background: #f5fbfa; font-weight: 700; color: #164e48; vertical-align: middle;
}

/* ---------- donut chart + shared chart legend ---------- */
.donut { flex-shrink: 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.chart-legend .legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--body); }
.chart-legend .legend-item b { font-variant-numeric: tabular-nums; color: var(--ink); }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ---------- severity summary card (donut + legend, boxed like the other report cards) ---------- */
.severity-card {
  display: inline-block; border: 1px solid var(--border); border-radius: 8px; background: var(--white);
  padding: 18px 26px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(15,118,110,.06);
}
.severity-card-head {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 14px;
}
.severity-card-body { display: flex; align-items: center; gap: 26px; }

/* ---------- grouped bar chart (VM CPU/Memory comparison) ---------- */
.grouped-bars { width: 100%; max-width: 640px; }
.grouped-bars svg { display: block; }

/* ---------- per-subscription asset donuts, all in one row ---------- */
.donut-row { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 6px; }
.donut-card { display: flex; flex-direction: column; align-items: center; width: 168px; text-align: center; }
.donut-card-title { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.donut-legend-list { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; align-items: flex-start; }
.donut-legend-list .legend-item { font-size: 11.5px; }

/* ---------- per-subscription usage cards, all in one row (mirrors .donut-row) ---------- */
.usage-card-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 6px; }
.usage-card {
  flex: 1 1 220px; min-width: 200px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--white); padding: 18px 20px; box-shadow: 0 1px 3px rgba(15,118,110,.06);
}
.usage-card-title { font-size: 12.5px; font-weight: 900; color: var(--ink); }
.usage-card-sub { font-size: 11px; color: var(--muted); margin: 3px 0 10px; }
.usage-card .gauge-row { gap: 20px; padding: 0; justify-content: center; }

/* ---------- edit mode ---------- */
.edit-add-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.edit-col { width: 34px; text-align: center; }
.row-del-btn {
  border: 1px solid var(--border); border-radius: 3px; width: 20px; height: 20px; line-height: 1;
  background: #fff; color: #991b1b; font-size: 13px; font-weight: 700; cursor: pointer;
}
.entry-form { display: none; margin: 10px 0 16px; padding: 14px; border: 1px dashed var(--teal); border-radius: 4px; background: #f0faf8; }
.entry-form.open { display: block; }
.entry-form .fields { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-form label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); gap: 4px; flex: 1 1 160px; }
.entry-form input, .entry-form select, .entry-form textarea {
  font-family: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 3px;
}
.entry-form textarea { min-height: 50px; resize: vertical; }
.entry-form .actions { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; }

.no-print { }
.hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
.warn-banner {
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; border-radius: 3px;
  padding: 10px 14px; font-size: 12px; margin-top: 12px;
}

/* ---------- print cover + print rules ---------- */
.print-cover { display: none; }
@media print {
  @page { size: A4 landscape; margin: 9mm; }
  /* White, not the on-screen mint tint - a short section (or the gap before a forced
     page-break) leaves blank space below its box, and a colored page background made that
     blank space read as an obvious tinted block instead of plain paper. */
  html, body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-cover { display: block !important; height: 186mm; padding: 17mm 15mm; box-sizing: border-box; position: relative; break-after: page; }
  .no-print { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .doc { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .sheet { box-shadow: none !important; border: .25mm solid #d7e3e0 !important; border-radius: 3px !important; padding: 6.5mm 7mm !important; margin: 0 0 5mm !important; background: #fff !important; }
  .brief { padding: 9mm 10mm !important; }
  .page-break { break-before: page !important; }
  .avoid, tr { break-inside: avoid !important; }
  /* Self-contained widgets (chart/gauge/summary boxes) must never be sliced mid-box across a
     page boundary - if one doesn't fit the remaining space on the current page, push the whole
     thing onto the next page instead. Long entry tables in section 02 are NOT in this list on
     purpose: those are allowed (and expected) to flow across pages when there are many rows -
     only their individual <tr>s (above) stay intact. */
  .chart-box, .severity-card, .usage-card, .donut-card, .gauge-cell,
  .donut-row, .usage-card-row, .gauge-row,
  .note-blk, .an-item, .kpi-cell, .scope-item {
    break-inside: avoid !important;
  }
  /* A sub-section title must never be left dangling at the bottom of a page with its content
     (chart-box, table, etc.) pushed to the next - keep the two together. */
  .sub-h { break-after: avoid !important; break-inside: avoid !important; }

  /* Sections 03 onward (모니터링 현황 / 자산현황 / 사용현황 / 운영 분석) are mostly short
     chart/gauge/summary boxes - at screen padding, two of them rarely fit one printed page
     together even though there's clearly room, so each ends up alone on its own page with a
     lot of blank space below it. Scoped to `.dense-print` only (added to those sections'
     wrapper in report.ejs) so sections 01/02 - plain text/table content that already reads
     fine - are completely untouched. */
  .dense-print .section { padding: 10px 12px 12px !important; }
  .dense-print .sec-head { margin-bottom: 12px !important; padding-bottom: 8px !important; }
  .dense-print .sub-h { margin: 10px 0 6px !important; }
  .dense-print .sub-h:first-of-type { margin-top: 0 !important; }
  .dense-print .chart-box { padding: 8px 10px !important; margin-bottom: 8px !important; }
  .dense-print .severity-card { padding: 8px 12px !important; margin-bottom: 8px !important; }
  .dense-print .usage-card { padding: 8px 10px !important; }
  .dense-print .usage-card-row, .dense-print .donut-row { gap: 8px !important; margin-bottom: 4px !important; }
  .dense-print .gauge-row { gap: 14px !important; padding: 3px 0 5px !important; }
  .dense-print .gauge-cell { gap: 3px !important; }
  .dense-print .an-grid { gap: 8px !important; }
  .dense-print .an-item { padding: 10px 12px !important; min-height: 0 !important; }
  .dense-print .donut svg { width: 100px !important; height: 100px !important; }
  .dense-print .gauge svg { width: 84px !important; height: 84px !important; }
  /* grouped-bars/chart-line stretch non-uniformly (preserveAspectRatio: none) so this does
     compress bar/line thickness and text a bit - accepted as a plain CSS fallback that's
     guaranteed to apply (unlike the JS-side compact re-render in app.js, which depends on a
     real print-lifecycle event that some PDF-generation paths don't fire), so 5-2's chart
     reliably shrinks instead of only doing so when the JS path happens to run. */
  .dense-print .grouped-bars svg { height: 235px !important; }
  .dense-print .chart-line svg { height: 130px !important; }
  .dense-print table.report-table td, .dense-print table.report-table th { padding-top: 1mm !important; padding-bottom: 1mm !important; }

  /* A long, unbounded table (미사용/저활성 리소스 목록 - can be dozens of rows) must never
     start wherever the previous short boxes happened to end - always give it a fresh page, so
     the boxes before it (which DO now fit two-per-page above) get to use their page fully
     instead of leaving room "just in case" the table needs to start there too. */
  .print-fresh-page { break-before: page !important; }

  thead { display: table-header-group !important; }
  th { padding: 0 1.6mm 1.3mm !important; font-size: 8.4px !important; }
  td { padding: 1.5mm 1.6mm !important; font-size: 9.4px !important; line-height: 1.34 !important; word-break: keep-all; overflow-wrap: anywhere; }
  .doc-title { font-size: 30px !important; }
  .kpi-num { font-size: 27px !important; }
  .sec-num { font-size: 30px !important; }
  .sec-title { font-size: 16px !important; }
}

.section-toggle-list { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.section-toggle-group { display: flex; flex-direction: column; gap: 6px; }
.section-toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; background: #fff; cursor: grab;
}
.section-toggle-row:active { cursor: grabbing; }
.section-toggle-parent { font-weight: 700; background: #fafcfb; }
.toggle-label-wrap { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; min-width: 0; }
.section-toggle-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); flex: none; }
.section-toggle-sublist { display: flex; flex-direction: column; gap: 6px; margin-left: 28px; }
.section-toggle-sub { font-size: 12.5px; padding: 9px 14px; }
.section-toggle-sub:has(input:disabled) { opacity: .45; }
.section-toggle-sub:has(input:disabled) .toggle-label-wrap { cursor: default; }
.live-num { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 34px; flex: none; }
.drag-handle {
  flex: none; cursor: grab; color: var(--muted); font-size: 15px; line-height: 1;
  padding: 2px 4px; user-select: none; touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
.section-toggle-group.dragging, .section-toggle-row.dragging { opacity: .4; }
.section-toggle-row.is-hidden-item { opacity: .55; }