/* wd-tools.css v1.0 — Unified stylesheet for WD Wireless Tools
   Shared across: Home, Cloud Manager, Quick Walls, Folder Organizer
   ────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════════════════════════════════════
   CUSTOM PROPERTIES — Dark (default)
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* WD brand palette — same in both themes */
  --blue: #1e77ac;  --blue-dark: #17607f;
  --green: #5fab4f; --green-dark: #4e9040;
  --amber: #d97706; --amber-dark: #b45309;
  --red: #dc2626;   --red-dark: #b91c1c;
  --purple: #8b5cf6; --purple-dark: #7c3aed;
  --slate: #5d5b60; --navy: #0e1b26;
  /* Nav-blue is the accent-blue used on outlines / accents throughout the
     suite — the theme-toggle border, button borders, filename button, etc.
     Same value in both themes. */
  --nav-blue: #0668D9;

  /* Semantic surface / text (dark default) */
  color-scheme: dark;
  --bg: #0f1620;
  --surface: #18212c;
  --surface-raised: #252830;
  --surface-hover: #2d3039;
  --text: #e7ebf0;
  --text-2: #9aa5b1;
  --text-3: #6b7684;
  --border: #273240;
  --border-focus: #2f8fc6;

  /* Table / row tokens */
  --stripe: #1a2532;
  --row-hover: #213141;
  --head-bg: var(--navy);

  /* Status backgrounds */
  --slate-bg: #1d2833;
  --blue-bg: #15293a;
  --green-bg: #17281d;
  --amber-bg: #2a2211;
  --red-bg: #2b1515;

  /* Dim / tint variants */
  --accent-dim: rgba(30,119,172,0.18);
  --danger-dim: rgba(224,82,82,0.12);
  --success-dim: rgba(98,181,82,0.14);
  --warn-dim: rgba(230,168,23,0.12);

  /* Buttons */
  --btn-sec: #273240;
  --btn-sec-h: #31404f;

  /* Radii */
  --radius: 6px;

  /* Fonts */
  --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════
   CUSTOM PROPERTIES — Light
   ══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f1f3;
  --surface: #ffffff;
  --surface-raised: #f6f8fa;
  --surface-hover: #eaeef2;
  --text: #111827;
  --text-2: #4b5563;   /* darker medium grey — the old #6b7280 was borderline */
  --text-3: #6b7280;   /* was #9ca3af — failed WCAG AA on white */
  --border: #dfe2e6;

  --stripe: #eef1f5;
  --row-hover: #e2e9f2;
  --head-bg: #e9eff5;

  --slate-bg: #eff0f1;
  --blue-bg: #e8f2f8;
  --green-bg: #eef6ec;
  --amber-bg: #fffbeb;
  --red-bg: #fef2f2;

  --btn-sec: #dfe2e6;
  --btn-sec-h: #c9cdd2;
}

/* ══════════════════════════════════════════════════════════════════
   CUSTOM PROPERTIES — Tool-specific overrides
   ══════════════════════════════════════════════════════════════════ */

/* Quick Walls uses a darker base */
body.tool-walls {
  --bg: #0c0e11;
  --surface: #1c1f25;
  --surface-raised: #252830;
  --surface-hover: #2d3039;
  --border: #33363f;
  --text: #E8E9ED;
  --text-2: #8B8D94;
  --text-3: #5d5f66;
}
[data-theme="light"] body.tool-walls {
  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-raised: #f6f8fa;
  --surface-hover: #eaeef2;
  --border: #dfe2e6;
  --text: #1b2330;
  --text-2: #4b5563;   /* was #6b7684 */
  --text-3: #6b7684;   /* was #9aa5b1 — failed WCAG AA on white */
}

/* Home uses a radial gradient background — variables mapped from its original tokens */
body.tool-home {
  --bg: #0d131a;       /* was --bg1 */
  --surface: #122431;  /* was --bg2 */
  --card-bg: #18242f;
  --card-hover: #1e2e3b;
  --border: #2a2f38;   /* was --line */
  --text-2: #9aa5b1;   /* was --muted */
  --text-3: #6b7684;   /* was --soft */
}
[data-theme="light"] body.tool-home,
body.tool-home[data-theme="light"] {
  --bg: #ffffff;
  --surface: #eef1f4;
  --card-bg: #ffffff;
  --card-hover: #f6f8fa;
  --border: #e2e6ea;
  --text: #2b3440;
  --text-2: #4b5563;   /* was #6b7684 */
  --text-3: #6b7684;   /* was #9aa5b1 — failed WCAG AA on white */
}
/* Squirrel, Scale, Quick Walls: match the home page's pure-white workspace
   in light mode so the card hover reads the same. Base light-mode --bg is
   #f0f1f3 (a light grey) which makes cards feel like they sit on a tinted
   backdrop; home uses pure white and the cards blend seamlessly. */
[data-theme="light"] body.tool-organizer,
[data-theme="light"] body.tool-scale,
[data-theme="light"] body.tool-walls {
  --bg: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════ */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
}
mark {
  background: #fde68a; color: #78350f;
  padding: 0 1px; border-radius: 1px; font-weight: 600;
}
.grow { flex: 1; }
.spacer { flex: 1; }

/* ══════════════════════════════════════════════════════════════════
   TOPBAR (navy bar — shared by Cloud Manager, Folder Organizer)
   ══════════════════════════════════════════════════════════════════ */
/* Every tool's top header — .topbar / .header / .dz-topbar / .report-toolbar
   — shares this baseline so they render at the exact same height regardless
   of what's placed inside. Individual header classes override colors/borders. */
.topbar, .header, .dz-topbar, .report-toolbar, .report-wiz-topbar {
  min-height: 56px;
  padding: 0 16px;
  box-sizing: border-box;
}
.topbar {
  background: var(--navy); color: white;
  display: flex; align-items: center;
  flex-shrink: 0;
}
[data-theme="light"] .topbar {
  /* 20% #0668D9 blue wash over surface — visibly blue, not grey. */
  background:
    linear-gradient(rgba(6,104,217,0.20), rgba(6,104,217,0.20)),
    var(--surface);
  color: var(--text);
}
[data-theme="light"] .topbar h1 .ver { color: var(--text-2); }
[data-theme="light"] .topbar-right { color: var(--text-2); }
[data-theme="light"] .topbar-right a.homelink { color: var(--text-2); }
[data-theme="light"] .topbar-right a.homelink:hover { color: var(--text); }
/* Equal-width flanks so the .topbar-center title is TRUE center regardless
   of how wide the hamburger / user-email / folder buttons grow. */
.topbar-left { flex: 1; display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
.topbar-center { flex: 0 0 auto; text-align: center; }
.topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: 0.2px; }
.topbar h1 span { color: #6bb3e0; }
.topbar h1 .ver { color: #9aa0a6; font-weight: 500; font-size: 14px; margin-left: 6px; }
.topbar-right {
  flex: 1; display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: #9aa0a6;
  justify-content: flex-end;
}
.topbar-right .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399; display: inline-block;
}
.topbar-right a.homelink { color: #9aa0a6; text-decoration: none; }
.topbar-right a.homelink:hover { color: #cbd5e1; }

/* Settings / theme buttons in topbar */
/* Cloud Manager header "📁 Folder" (Local Folder picker) + legacy .theme-btn.
   Sized to match .theme-toggle exactly so both sit as visually-identical
   pills in the topbar. */
.settings-btn,
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--nav-blue); border-radius: 999px;
  padding: 6px 12px 6px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.settings-btn:hover,
.theme-btn:hover {
  background: var(--surface-hover); color: var(--nav-blue);
  border-color: var(--nav-blue);
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.settings-btn:active,
.theme-btn:active {
  transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Quick Walls nav pills (top-right of dropzone) */
.wd-nav {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; text-decoration: none;
  color: #9aa0a6; background: none;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 3px;
  padding: 2px 8px; cursor: pointer; line-height: 1;
}
.wd-nav:hover { color: #cbd5e1; background: rgba(255,255,255,0.08); }
.dz-nav {
  position: fixed; top: 18px; right: 22px; z-index: 50;
  display: flex; gap: 8px;
}

/* Quick Walls header bar */
.header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #0e1b26; color: white;
  position: sticky; top: 0; z-index: 50; flex-shrink: 0;
}
[data-theme="light"] .header {
  background: var(--head-bg);   /* toned-down navy for light mode */
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .header h1, [data-theme="light"] .header h1 .ver { color: var(--text); }
[data-theme="light"] .header h1 .ver { color: var(--text-2); }
.header-left { display: flex; align-items: center; gap: 12px; }
.header h1, .dz-topbar h1 {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: 0.2px; color: white;
}
.header h1 span, .dz-topbar h1 span { color: #6bb3e0; }
.header h1 .ver, .dz-topbar h1 .ver { color: #9aa0a6; font-weight: 500; font-size: 14px; margin-left: 6px; }
/* Filename button — the loaded .esx / project filename in the Walls and
   Report headers. Styled to read as a clickable pill (title + navy border
   + 3D lift on hover) so it's obviously interactive, not just a label. */
.header .file-badge,
.report-toolbar .file-badge,
.report-wiz-topbar .file-badge {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  background: var(--surface-raised);
  padding: 6px 14px;
  border: 1px solid var(--nav-blue); border-radius: 999px;
  display: none; cursor: pointer; font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.header .file-badge:hover,
.report-toolbar .file-badge:hover,
.report-wiz-topbar .file-badge:hover {
  background: var(--surface-hover); color: var(--nav-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.header .file-badge:active,
.report-toolbar .file-badge:active,
.report-wiz-topbar .file-badge:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.header-actions { display: flex; gap: 8px; align-items: center; }
/* Header sizing — applies to every .btn variant in the header actions so
   spacing is consistent, but does NOT set background/color, so color
   variants (.btn-blue, .btn-green, .btn-red) keep their identity. */
.header-actions .btn {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13px; font-weight: 600; padding: 8px 18px;
  border-radius: 999px;
}
/* .btn-secondary in the header uses the translucent-white style.
   Color variants (.btn-blue etc.) inherit from the base .btn rules and
   render solid, so they read as primary/action buttons. */
.header-actions .btn-secondary {
  background: rgba(255,255,255,0.08); color: #cbd5e1;
  border: 1px solid var(--nav-blue);
}
.header-actions .btn-secondary:hover {
  background: rgba(255,255,255,0.15); color: #fff;
  border-color: var(--nav-blue);
}
[data-theme="light"] .header-actions .btn-secondary {
  background: var(--surface-raised); color: var(--text);
  border-color: var(--nav-blue);
}
[data-theme="light"] .header-actions .btn-secondary:hover {
  background: var(--surface-hover); border-color: var(--nav-blue);
}
.header-actions .btn-primary {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.header-actions .btn-primary:hover { background: #1e77ac; }

/* Logo slot (Quick Walls header) */
.logo-slot {
  width: 28px; height: 28px; flex-shrink: 0;
  display: none; /* shown when logo is loaded */
}
.logo-slot img { width: 100%; height: 100%; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════
   HAMBURGER MENU (shared across Cloud, Walls, Organizer)
   ══════════════════════════════════════════════════════════════════ */
.menu-wrap { position: relative; }
.hamburger-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 34px; height: 28px; background: none;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 5px;
  cursor: pointer; padding: 0 7px;
}
.hamburger-btn span {
  display: block; height: 2px; background: #cbd5e1; border-radius: 1px;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.10); }
[data-theme="light"] .hamburger-btn { border-color: var(--border); }
[data-theme="light"] .hamburger-btn span { background: var(--text); }
[data-theme="light"] .hamburger-btn:hover { background: var(--surface-hover); }

/* Base .hamburger-btn now uses this larger sizing across every tool — the
   old per-tool override was redundant. */

/* Main dropdown menu */
.main-menu {
  position: absolute; top: 100%; left: 0; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  min-width: 230px; padding: 8px 0; z-index: 300; display: none;
}
.main-menu.open { display: block; }
.main-menu .menu-section {
  padding: 10px 16px 4px; font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3);
}
.main-menu .menu-section:first-child { padding-top: 6px; }
.main-menu .menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text-2); font-size: 13px; padding: 7px 16px 7px 20px;
  cursor: pointer; text-decoration: none; box-sizing: border-box;
  transition: color 0.1s;
}
.main-menu .menu-item:hover { color: var(--text); background: var(--blue-bg); }
.main-menu .menu-item.active { color: var(--blue); font-weight: 600; }
.main-menu .menu-sep { height: 1px; background: var(--border); margin: 6px 12px; }

/* Quick Walls help menu (same pattern, slightly different class names) */
.help-menu-wrap { position: relative; }
.help-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  min-width: 230px; padding: 8px 0; z-index: 60;
}
.help-menu.open { display: block; }
.menu-section {
  padding: 10px 16px 4px; font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3);
}
.menu-section:first-child { padding-top: 6px; }
.help-menu-item {
  display: block; width: 100%; padding: 7px 16px 7px 20px;
  font-size: 13px; color: var(--text-2); cursor: pointer;
  border: none; background: none; text-align: left;
  text-decoration: none; box-sizing: border-box; transition: color 0.1s;
}
.help-menu-item:hover { color: var(--text); background: var(--accent-dim); }
.help-menu-item.active { color: var(--blue); font-weight: 600; }
.help-menu-sep { height: 1px; background: var(--border); margin: 6px 12px; }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS (shared)
   ══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 20px; border-radius: 999px;
  border: 1px solid var(--nav-blue);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background 0.12s ease, border-color .12s ease;
  white-space: nowrap;
}
/* Same "3D" hover the cards use — small lift + subtle shadow. Color darkening
   from each variant (.btn-blue:hover, .btn-primary:hover, etc.) stacks on top. */
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Filled color variants: border-color follows the fill so a mismatched rim
   doesn't fight the fill. Outlined variants (secondary/sec/ghost) keep the
   navy accent from base .btn — that's how they read as "outlined." */
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-blue { background: var(--blue); color: white; border-color: var(--blue); }
.btn-blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-green { background: var(--green); color: white; border-color: var(--green); }
.btn-green:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-red { background: var(--red); color: white; border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-amber { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn-amber:hover { background: var(--amber-dark); border-color: var(--amber-dark); }
.btn-secondary { background: var(--btn-sec); color: var(--text); }
.btn-secondary:hover { background: var(--btn-sec-h); }
.btn-sec { background: var(--btn-sec); color: var(--text); }
.btn-sec:hover { background: var(--btn-sec-h); }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--danger-dim); border-color: var(--red); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-2); }
.btn-ghost:hover { background: var(--bg); }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-icon {
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
/* On Walls, body.tool-walls .btn's padding (0,2,1) would otherwise stretch
   .btn-icon into a pill. Explicitly hold the square shape so it stays a
   circle — same 26×26 as Cloud's .icon-btn. */
body.tool-walls .btn.btn-icon {
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
}
.btn-reset-defaults { color: #d97706; border-color: rgba(217,119,6,0.4); }
.btn-reset-defaults:hover { background: rgba(217,119,6,0.1); border-color: #d97706; }

/* Cloud Manager uses compact toolbar buttons — keep pill shape suite-wide. */
body.tool-cloud .btn {
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
}
/* Give .btn-secondary a visible outline on Cloud so it doesn't look like a
   flat label. Contrasts with the solid blue/green primary buttons. */
body.tool-cloud .btn-secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--nav-blue);
}
body.tool-cloud .btn-secondary:hover {
  background: var(--surface-hover); border-color: var(--nav-blue);
}

/* Live toggle — reads as a pill switch, not another action button.
   Off: outlined with a dim grey dot. On: green fill with a solid white dot. */
body.tool-cloud #liveBtn {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--nav-blue);
  padding-left: 8px;
}
body.tool-cloud #liveBtn::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3);
  margin-right: 6px; vertical-align: middle;
  transition: background 0.15s, box-shadow 0.15s;
}
body.tool-cloud #liveBtn:hover { color: var(--text); border-color: var(--text-3); }
body.tool-cloud #liveBtn.live-on {
  background: var(--green); color: #fff; border-color: var(--green);
}
body.tool-cloud #liveBtn.live-on::before {
  background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.6);
}

/* Icon-only button — for utility actions (settings gear, close, etc.).
   Small square with an inverted fill so it's clearly visible in both
   themes: dark button on light backgrounds, light button on dark
   backgrounds. Distinct from color-variant buttons because it has no
   hue — it reads as "utility," not "action." */
.btn-icon-only {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: var(--text); color: var(--surface);
  border: 1px solid var(--text); border-radius: 50%;
  font-size: 15px; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-icon-only:hover {
  background: var(--text-2); border-color: var(--text-2);
}

/* Quick Walls buttons — slightly different base */
body.tool-walls .btn {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 8px 18px;
  border: 1px solid var(--nav-blue); border-radius: 999px;
  background: var(--surface-raised); color: var(--text-2);
}
body.tool-walls .btn:hover {
  background: var(--surface-hover); color: var(--nav-blue);
  border-color: var(--nav-blue);
}
/* Quick Walls "Apply" and "Save .esx" — outlined blue rather than solid
   blue fill. Dave felt the solid fill was too shouty next to the theme-
   toggle pill; outlined blue reads as "primary action" without dominating. */
body.tool-walls .btn-primary {
  background: transparent; color: var(--nav-blue);
  border-color: var(--nav-blue);
}
body.tool-walls .btn-primary:hover {
  background: rgba(6, 104, 217, 0.10);
  color: var(--nav-blue); border-color: var(--nav-blue);
}
body.tool-walls .btn-primary:disabled {
  color: var(--text-3); border-color: var(--border);
}
body.tool-walls .btn-sm { padding: 6px 12px; font-size: 12px; }

/* Icon buttons (Cloud Manager row actions) */
/* Small circular row-action buttons — matches Walls .btn-icon at 50% radius
   so a Cloud row action and a Walls modal × read as the same control type. */
.icon-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--nav-blue); background: var(--surface);
  cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); padding: 0;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.icon-btn:hover {
  background: var(--blue-bg); border-color: var(--nav-blue); color: var(--nav-blue);
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.icon-btn.del:hover {
  background: var(--red-bg); border-color: var(--red); color: var(--red);
}
.icon-btn.flagged { color: var(--amber); }

/* Row-level action containers */
.row-tools {
  display: inline-flex; gap: 2px; flex-shrink: 0;
  opacity: 0.5; transition: opacity 0.1s;
}
.pair-cell:hover .row-tools,
.unmatched-row:hover .row-tools { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   MODALS (unified — all tools use .active)
   ══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  z-index: 100; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px;
  width: 440px; max-width: 90vw; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-sm { max-width: 400px; }
/* Wide variant for the Add/Edit Wall Type modal — the extra width lets us
   lay Name/Color/Thickness/Keyboard out in one row instead of stacking. */
.modal.modal-wall-edit {
  width: 900px;
  max-width: min(90vw, 1366px);
}
.modal h2 { font-size: 16px; margin-bottom: 16px; }
.modal h3 { margin-bottom: 8px; font-size: 15px; }
.modal p.sub { font-size: 12px; color: var(--text-2); margin-bottom: 12px; line-height: 1.4; }
.modal label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-2);
  margin-bottom: 4px; margin-top: 14px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.modal input[type="text"] {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; margin-bottom: 12px; outline: none;
  background: var(--bg); color: var(--text);
}
.modal input:focus { border-color: var(--blue); }
.modal select {
  width: 100%; padding: 7px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; background: var(--surface); color: var(--text);
  cursor: pointer;
}
.modal select option { background: var(--bg); color: var(--text); }
.modal textarea {
  width: 100%; min-height: 60px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; font-family: var(--mono); font-size: 12px;
  resize: vertical;
}
.modal .hint { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.modal-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Quick Walls modal sub-components */
.modal-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.modal-body { padding: 20px; }
.modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* About body (shared between Cloud Manager, Organizer) */
.about-body { font-size: 13px; line-height: 1.6; color: var(--text-2); }
.about-body b { color: var(--text); }

/* Create-site modal checkbox layout */
.create-options {
  display: flex; gap: 16px; margin: 10px 0 4px;
}
.create-options label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-2); cursor: pointer;
  margin: 0; text-transform: none; letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════════
   TOASTS (shared)
   ══════════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 9999;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; pointer-events: none;
}
.toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  font-size: 14px; font-weight: 600;
  padding: 16px 32px;
  background: var(--surface); border: 2px solid var(--blue);
  border-radius: 10px; color: var(--text);
  z-index: 9999; opacity: 0;
  transition: all 0.25s; pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  max-width: 500px; text-align: center;
}
/* Cloud Manager uses .toast inside .toast-container — no fixed pos needed */
.toast-container .toast {
  position: static; transform: none;
  animation: toastPop 0.25s ease; opacity: 1;
}
.toast.visible,
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast.success { border-color: var(--blue); }
.toast.error { border-color: var(--red); }
.toast.info { border-color: var(--blue); }

/* Quick Walls toast uses --mono */
body.tool-walls .toast { font-family: var(--mono); }

/* ══════════════════════════════════════════════════════════════════
   FORMS (Quick Walls field system)
   ══════════════════════════════════════════════════════════════════ */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-family: var(--mono);
  font-size: 11px; font-weight: 500; color: var(--text-2);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em;
}
.field input[type="text"],
.field input[type="number"],
.field select {
  width: 100%; padding: 7px 10px;
  font-family: var(--mono); font-size: 13px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  outline: none; transition: border-color 0.15s;
}
.field select { cursor: pointer; }
.field select option { background: var(--bg); color: var(--text); }
.field input:focus, .field select:focus { border-color: var(--blue); }
.field input[type="color"] {
  width: 40px; height: 30px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); cursor: pointer;
}
.field-row-3 {
  display: grid; grid-template-columns: 1fr 80px;
  gap: 10px; align-items: end;
}

/* Wide 4-column top row for the Add/Edit Wall Type modal: Name gets more
   space, Color is compact, Thickness + Keyboard sit in between. Descriptions
   sit UNDER each cell (not to the right) via nested .field flex-column. */
.field-row-4 {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 90px minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 12px;
}
.field-row-4 .field {
  display: flex; flex-direction: column;
  min-width: 0;   /* let inputs shrink correctly inside grid */
  margin-bottom: 0;
}
.field-row-4 .field input,
.field-row-4 .field select {
  width: 100%;
}
.field-row-4 .field-color input[type="color"] {
  width: 100%; height: 34px;
}

/* Short helper text under a field label — explains what the input does
   without cluttering the label itself. Non-uppercase, muted grey. */
.field-desc {
  margin-top: 5px; font-size: 12px; line-height: 1.4;
  color: var(--text-3); font-weight: 400;
  text-transform: none; letter-spacing: normal;
}
.field-desc code {
  font-family: var(--mono); font-size: 11px;
  background: var(--surface-raised); padding: 1px 5px; border-radius: 3px;
}
.field-desc a { color: var(--nav-blue); text-decoration: none; font-weight: 600; }
.field-desc a:hover { text-decoration: underline; }
.section-desc {
  margin: -4px 0 10px 0; font-size: 12px; line-height: 1.4;
  color: var(--text-3);
}
.section-desc a { color: var(--nav-blue); text-decoration: none; }
.section-desc a:hover { text-decoration: underline; }

/* Inline unit-toggle pill (thickness in/m switch in the wall-type modal). */
.field label .unit-toggle {
  display: inline-flex; margin-left: 10px; gap: 0;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px; background: var(--surface-raised);
  vertical-align: baseline;
}
.field label .unit-toggle .unit-btn {
  padding: 2px 10px; font-size: 11px; font-weight: 600;
  background: transparent; color: var(--text-2);
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); text-transform: none; letter-spacing: 0;
  transition: background .12s ease, color .12s ease;
}
.field label .unit-toggle .unit-btn:hover { color: var(--text); }
.field label .unit-toggle .unit-btn.active {
  background: var(--nav-blue); color: #fff;
}

/* Band section (attenuation fields in wall edit modal) */
.band-section {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.band-section h4 {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--text-2); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.band-row {
  display: grid; grid-template-columns: 60px 1fr 1fr 1fr;
  gap: 8px; align-items: center; margin-bottom: 6px;
}
.band-label { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.band-row input {
  width: 100%; padding: 5px 8px;
  font-family: var(--mono); font-size: 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); outline: none; text-align: right;
}
.band-row input:focus { border-color: var(--blue); }
.band-header {
  display: grid; grid-template-columns: 60px 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 4px;
}
.band-header span {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  text-transform: uppercase; text-align: right;
}
.band-header span:first-child { text-align: left; }

/* ══════════════════════════════════════════════════════════════════
   SPINNERS
   ══════════════════════════════════════════════════════════════════ */
.spin {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--border); border-top-color: var(--green);
  border-radius: 50%; animation: spin 0.8s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
.big-spin {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.15); border-top-color: #6bb3e0;
  border-radius: 50%; animation: spin 1s linear infinite;
  margin: 0 auto 14px;
}
/* Organizer uses green spinner */
body.tool-organizer .big-spin {
  border-color: var(--border); border-top-color: var(--green);
}

/* ══════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastPop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════
   TOOLTIPS
   ══════════════════════════════════════════════════════════════════ */
.tip-pop {
  position: fixed; transform: translate(-50%, -100%);
  background: #0b1620; color: #fff;
  border: 1px solid var(--border); padding: 4px 9px;
  border-radius: 5px; font-size: 11px;
  white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity 0.1s; z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.tip-pop.show { opacity: 1; }

/* Scrollbar (Cloud Manager) */
.rows-container::-webkit-scrollbar { width: 6px; }
.rows-container::-webkit-scrollbar-thumb { background: rgba(128,140,160,0.35); border-radius: 3px; }


/* ══════════════════════════════════════════════════════════════════
              HOME PAGE
   ══════════════════════════════════════════════════════════════════ */

body.tool-home {
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(1100px 560px at 50% -12%, var(--surface) 0%, var(--bg) 62%);
  transition: background .25s ease, color .25s ease;
}

/* Home topbar (just the theme toggle) */
body.tool-home .topbar {
  width: 100%; display: flex; justify-content: flex-end;
  padding: 16px 20px 0; background: transparent;
}
.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--nav-blue);
  color: var(--text-2); border-radius: 999px;
  padding: 6px 12px 6px 10px; font-size: 12px; font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.theme-toggle:hover {
  background: var(--card-hover, var(--surface-hover));
  color: var(--nav-blue); border-color: var(--nav-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.theme-toggle:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.theme-toggle .ico,
.settings-btn .ico,
.theme-btn .ico { font-size: 14px; line-height: 1; }

/* Home layout */
.wrap {
  width: 100%; max-width: 1100px;
  padding: 22px 24px 44px; text-align: center;
}
.suite-badge { display: inline-block; padding: 8px; margin-bottom: 8px; }
.suite-badge img { width: 340px; max-width: 76vw; height: auto; display: block; }
.tagline { color: var(--text-2); font-size: 15px; letter-spacing: 0.3px; margin-bottom: 40px; }

/* Home cards grid */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.card {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border); border-radius: 16px;
  padding: 26px 24px 24px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .15s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  border-color: var(--blue);
  background: var(--surface-raised);   /* unified with every other card type */
}
.logo-well {
  height: 150px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; padding: 6px;
}
.logo-well img { max-height: 126px; max-width: 82%; display: block; }
.logo-well img.logo-constrained { max-height: 140px; }
.card h2 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.card h2 span { color: var(--blue); }
.card p {
  font-size: 13.5px; line-height: 1.5; color: var(--text-2);
  margin-bottom: 18px; min-height: 60px;
}
.card .open-btn {
  background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 9px 24px; border-radius: 999px; letter-spacing: .3px;
}
.card:hover .open-btn { background: var(--blue-dark); }

/* Card color variants */
.card.green h2 span { color: var(--green); }
.card.green .open-btn { background: var(--green); }
.card.green:hover { border-color: var(--green); }
.card.green:hover .open-btn { background: var(--green-dark); }
.card.amber h2 span { color: var(--amber); }
.card.amber .open-btn { background: var(--amber); }
.card.amber:hover { border-color: var(--amber); }
.card.amber:hover .open-btn { background: var(--amber-dark); }
.card.purple h2 span { color: var(--purple); }
.card.purple .open-btn { background: var(--purple); }
.card.purple:hover { border-color: var(--purple); }
.card.purple:hover .open-btn { background: var(--purple-dark); }
.card.teal h2 span { color: #0d9488; }
.card.teal .open-btn { background: #0d9488; }
.card.teal:hover { border-color: #0d9488; }
.card.teal:hover .open-btn { background: #0f766e; }
.card .logo-well.logo-emoji {
  font-size: 96px; line-height: 1; display: flex;
  align-items: center; justify-content: center;
}

.foot { margin-top: 34px; color: var(--text-3); font-size: 12px; }
.foot b { color: var(--text-2); font-weight: 600; }


/* ══════════════════════════════════════════════════════════════════
              CLOUD MANAGER
   ══════════════════════════════════════════════════════════════════ */

/* ── Login / Setup screens ── */
#loginScreen,
#setupScreen > div {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #101b25 0%, #143b56 55%, #1e6f9e 100%);
  color: white; text-align: center;
}
.login-logo { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.login-logo span { color: #6bb3e0; }
.brand-card {
  width: 420px; max-width: 90vw; padding: 12px; margin-bottom: 18px;
  display: flex; justify-content: center; align-items: center;
}
.brand-logo-img { width: 240px; max-width: 72%; display: block; }
.login-sub { color: #9aa0a6; font-size: 13px; margin-bottom: 28px; }
.login-card {
  background: rgba(255,255,255,0.07); border-radius: 12px;
  padding: 28px; width: 420px; max-width: 90vw;
  border: 1px solid rgba(255,255,255,0.1);
}
.login-status { font-size: 14px; font-weight: 500; }
.login-detail { font-size: 12px; color: #9aa0a6; margin-top: 5px; }
.login-btn {
  width: 100%; padding: 10px; border-radius: 999px; border: none;
  background: var(--blue); color: white;
  font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 10px;
}
.login-btn:hover { background: var(--blue-dark); }
.login-btn.secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2); margin-top: 6px;
}
.login-btn.secondary:hover { background: rgba(255,255,255,0.05); }

/* Login icon */
.login-icon { font-size: 36px; margin-bottom: 12px; }
.login-status-gap { margin-bottom: 5px; }
.login-detail-gap { margin-bottom: 16px; }
.setup-connected { color: #34d399; font-size: 13px; margin-bottom: 24px; }
.setup-icon { font-size: 36px; margin-bottom: 10px; }

/* ── App chrome ── */
#appScreen { display: none; flex-direction: column; height: 100vh; }

/* ── Tabs ── */
.tabs {
  display: flex; align-items: flex-end;
  background: var(--navy); padding: 6px 12px 0;
  flex-shrink: 0; gap: 5px;
}
[data-theme="light"] .tabs { background: var(--head-bg); }
.tab {
  padding: 6px 20px 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  color: #cbd5e1; cursor: pointer;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16); border-bottom: none;
  border-top: 3px solid var(--slate);
  border-radius: 9px 9px 0 0; margin-bottom: -1px;
  transition: background 0.12s, color 0.12s;
}
.tab:hover { background: rgba(255,255,255,0.13); color: #fff; }
#tabSites { border-top-color: rgba(30,119,172,0.55); }
#tabProjects { border-top-color: rgba(95,171,79,0.55); }
#tabDuplicates { border-top-color: rgba(217,119,6,0.55); }
.tab.active {
  color: #fff; font-weight: 800; border-color: transparent;
  border-bottom: none; padding-bottom: 8px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}
/* Light-mode tab styling — dark text on light surface, visible borders */
[data-theme="light"] .tab {
  color: var(--text-2);
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .tab:hover {
  background: var(--surface-hover);
  color: var(--text);
}
[data-theme="light"] .tab.active {
  color: #fff;   /* stays white — active tabs use solid blue/green/amber fills */
}
#tabSites.active { background: var(--blue); border-top-color: #bfe3f5; }
#tabProjects.active { background: var(--green); border-top-color: #d3efc6; }
#tabDuplicates.active { background: var(--amber); border-top-color: #fde3b4; }

/* ── Dashboard cards ── */
.dashboard {
  padding: 8px 12px 14px; display: flex; gap: 8px; align-items: stretch;
  flex-shrink: 0; background: var(--surface);
}
/* Duplicates "Delete all N extras" — absolute-positioned to the true
   center of the toolbar so it's dead-center regardless of how wide the
   left/right flanks of the toolbar grow. Larger padding + bumped font
   so it reads as the primary action on this page. */
body.tool-cloud .toolbar { position: relative; }
body.tool-cloud .dup-toolbar-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 5px 18px;                    /* fit inside the compact toolbar height */
  font-size: 13px; font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(217,119,6,0.35);
  z-index: 1;
}
.dup-toolbar-btn #dupDeleteAllToolbarCount { font-weight: 800; }
.dash-card {
  flex: 1; min-width: 110px; padding: 6px 10px;
  border-radius: 4px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .15s ease;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.dash-card.allcard { flex: 0 0 auto; min-width: 70px; }
/* Same hover language as home cards — lift + big shadow + variant-color
   border. The color-per-variant is applied below via .allcard, .matched,
   .mismatches, etc. */
.dash-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  background: var(--surface-raised);   /* same lighter tint the home cards use */
}
.dash-card.allcard:hover     { border-color: var(--text-3); }
.dash-card.matched:hover     { border-color: var(--green); }
.dash-card.mismatches:hover  { border-color: var(--amber); }
.dash-card.orphans:hover     { border-color: var(--red); }
.dash-card.unassigned:hover  { border-color: var(--slate); }
.dash-card.cloud-only:hover  { border-color: #6bb3e0; }
.dash-card.local-only:hover  { border-color: #b48ce8; }
.dash-card.dup-all:hover     { border-color: var(--amber); }
.dash-card.dup-mixed:hover   { border-color: #6bb3e0; }
.dash-card.dup-local:hover   { border-color: #b48ce8; }
.dash-card.dup-cloud:hover   { border-color: #7dd6c6; }
.dash-card.active { box-shadow: 0 0 0 1.5px var(--text); }
.dash-card .number {
  font-size: 22px; font-weight: 700; line-height: 1; color: var(--text);
}
.dash-card .label {
  font-size: 10px; margin-top: 1px; color: var(--text-2);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
}
.dash-card.allcard { border-left-color: var(--text-3); }
.dash-card.matched { border-left-color: var(--green); }
.dash-card.mismatches { border-left-color: var(--amber); }
.dash-card.orphans { border-left-color: var(--red); }
.dash-card.unassigned { border-left-color: var(--slate); }
.dash-card.cloud-only { border-left-color: #6bb3e0; }
.dash-card.local-only { border-left-color: #b48ce8; }
.dash-card.cloud-only.active { background: rgba(107, 179, 224, 0.10); }
.dash-card.local-only.active { background: rgba(180, 140, 232, 0.10); }
.dash-card.dup-all { border-left-color: #f0b85f; }
.dash-card.dup-mixed { border-left-color: #6bb3e0; }
.dash-card.dup-local { border-left-color: #b48ce8; }
.dash-card.dup-cloud { border-left-color: #7dd6c6; }
.dash-card.dup-all.active { background: rgba(240,184,95,0.10); }
.dash-card.dup-mixed.active { background: rgba(107,179,224,0.10); }
.dash-card.dup-local.active { background: rgba(180,140,232,0.10); }
.dash-card.dup-cloud.active { background: rgba(125,214,198,0.10); }

/* ══════════════════════════════════════════════════════════════════
   Duplicates tab — cluster cards
   ══════════════════════════════════════════════════════════════════ */
/* The clusters area sits on --surface so the gap BETWEEN clusters looks
   like the "white workspace" other tabs (Sites/Projects) show, not the
   app's outer --bg grey. */
.dup-container {
  padding: 12px 16px; overflow-y: auto;
  background: var(--surface);
}
.dup-empty { text-align: center; padding: 60px 20px; color: var(--text-2); }
.dup-empty-icon { font-size: 56px; margin-bottom: 12px; opacity: 0.5; }
.dup-empty-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.dup-empty-sub { font-size: 13px; max-width: 500px; margin: 0 auto; line-height: 1.55; }

.dup-cluster {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 14px; overflow: hidden;
  transition: border-color 0.15s;
}
.dup-cluster:hover { border-color: var(--border-strong, #444); }
.dup-cluster.dup-highlight {
  animation: dupPulse 1.4s ease-out;
}
@keyframes dupPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,184,95,0.55); }
  100% { box-shadow: 0 0 0 12px rgba(240,184,95,0); }
}

/* Cluster header — #0668D9 blue wash at 10% over --surface. Same layering
   trick as .dup-explain (which stays amber) so the header sits on a
   consistent underlying color regardless of DOM position. */
.dup-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  cursor: pointer; user-select: none;
  background:
    linear-gradient(rgba(6,104,217,0.10), rgba(6,104,217,0.10)),
    var(--surface);
  border-bottom: 1px solid var(--border);
}
.dup-head:hover { filter: brightness(1.15); }
.dup-head .dup-title { color: var(--text); font-weight: 700; }
.dup-chevron { color: var(--text-3); font-size: 12px; transition: transform 0.15s; }
.dup-cluster.expanded .dup-chevron { transform: rotate(90deg); }
.dup-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dup-shape {
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.dup-shape.mixed { background: rgba(107,179,224,0.18); color: #6bb3e0; }
.dup-shape.local-only { background: rgba(180,140,232,0.18); color: #b48ce8; }
.dup-shape.cloud-only { background: rgba(125,214,198,0.18); color: #7dd6c6; }

.dup-counts { display: flex; gap: 6px; font-size: 11px; color: var(--text-2); }
.dup-count-pill {
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-alt, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
}
.dup-count-pill b { color: var(--text); font-weight: 700; }

.dup-body { display: none; }
.dup-cluster.expanded .dup-body { display: block; }

.dup-actions-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--surface-alt, rgba(255,255,255,0.02));
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.dup-actions-bar .btn-sm {
  padding: 5px 14px; font-size: 12px; border-radius: 999px;
}
.dup-actions-bar .spacer { flex: 1; }
.dup-actions-bar .manual-count { color: var(--text-2); font-size: 11px; }

.dup-items { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.dup-item {
  display: grid;
  /* Fixed widths for size (90 px) and date (105 px) so they right-align
     uniformly across every row and always have room for "Nov 22, 2026". */
  grid-template-columns: 30px 24px 1fr 90px 105px auto;
  border-radius: 6px;
  gap: 12px; align-items: center;
  padding: 8px 16px;
  transition: background 0.1s;
  background: var(--surface);
  /* 1px grey outline on top and bottom — sides are the colored bookends
     from .side-cloud / .side-local so the card looks fully framed. */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dup-item:hover { filter: brightness(1.08); }
.dup-item-check { justify-self: center; }
.dup-item-side {
  font-size: 16px; text-align: center;
  color: var(--text-2);
}
.dup-item-side.cloud { color: #7dd6c6; }
.dup-item-side.local { color: #b48ce8; }
.dup-item-name {
  font-size: 13px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.dup-item-loc {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  font-family: var(--mono, ui-monospace, monospace);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dup-item-size, .dup-item-date {
  font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap;
}

/* Fade items already paired via Sites/Projects — the "normal" copies.
   Only the NAME + LOCATION fade. Size / date / owner stay at full opacity
   because those are the fields you need to READ to judge whether the
   extra is safe to delete. */
.dup-item.is-matched .dup-item-name,
.dup-item.is-matched .dup-item-loc {
  opacity: 0.55;
}
/* Color each row by SIDE — wide colored TIPS on the left and right
   edges. Cloud=blue tips, Local=green tips. 8 px so they read as
   proper bookends. */
.dup-item.side-cloud {
  border-left: 8px solid var(--blue);
  border-right: 8px solid var(--blue);
}
.dup-item.side-local {
  border-left: 8px solid var(--green);
  border-right: 8px solid var(--green);
}
/* Compensate the base padding so the row content still lines up now
   that the borders take 8 px on each side. */
.dup-item.side-cloud, .dup-item.side-local { padding-left: 8px; padding-right: 8px; }

/* Extras stand out purely via the amber outline — no background wash.
   Same --surface bg as matched rows; only the outline + bold name +
   amber side icon distinguish them. */
.dup-item.is-extra {
  box-shadow: inset 0 0 0 2px var(--amber);
}
.dup-item.is-extra .dup-item-name {
  font-weight: 700; color: var(--text);
}
.dup-item.is-extra .dup-item-side {
  color: var(--amber);
}

/* Cross-cluster bulk action bar — appears at the top of the Duplicates
   view whenever any dup-item checkbox is checked. Lets users select and
   delete across clusters without walking each cluster's own button. */
.dup-bulk-bar {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 16px; padding: 8px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border); border-left: 4px solid var(--amber);
  border-radius: 6px;
  position: sticky; top: 4px; z-index: 4;
}
.dup-bulk-bar .spacer { flex: 1; }
.dup-bulk-selall {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text); cursor: pointer;
  font-weight: 600;
}
.dup-bulk-selall input { cursor: pointer; }
.dup-bulk-count {
  font-size: 12px; color: var(--text-2); font-weight: 600;
}

.dup-pill {
  padding: 2px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  margin-left: 6px; vertical-align: middle;
}
.dup-pill.newest { background: rgba(95,169,112,0.15); color: #5fa970; }
.dup-pill.largest { background: rgba(107,179,224,0.15); color: #6bb3e0; }
.dup-pill.matched { background: rgba(95,169,112,0.15); color: #5fa970; }

.dup-item-actions { display: flex; gap: 4px; }
.dup-item-actions .icon-btn {
  padding: 4px 8px; font-size: 13px;
}

/* ≈ inline badge on Sites/Projects rows */
.dup-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 6px;
  border-radius: 4px; cursor: pointer;
  background: rgba(217,119,6,0.20); color: var(--amber);
  font-size: 13px; font-weight: 700; line-height: 1;
  transition: background 0.1s;
  vertical-align: middle;
}
.dup-hint:hover { background: rgba(217,119,6,0.35); }
[data-theme="light"] .dup-hint {
  background: rgba(217,119,6,0.15); color: var(--amber-dark);
}
[data-theme="light"] .dup-hint:hover { background: rgba(217,119,6,0.28); }

/* Duplicates view — explanation banner at the top */
.dup-explain {
  margin: 12px 16px 8px; padding: 14px 20px;
  /* Same layered background as .dup-head — amber wash over --surface base,
     so both elements composite to the exact same final color. */
  background:
    linear-gradient(rgba(217,119,6,0.10), rgba(217,119,6,0.10)),
    var(--surface);
  border: 1px solid rgba(217,119,6,0.35);
  border-radius: 6px; color: var(--text);
  text-align: center;
}
.dup-explain-title {
  font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--amber);
  margin-bottom: 8px;
}
.dup-explain-body {
  font-size: 13px; line-height: 1.6; color: var(--text);
  margin-bottom: 10px;
  max-width: 900px; margin-left: auto; margin-right: auto;
}
.dup-explain-hint {
  color: var(--text-2); font-weight: 400; font-style: italic;
}
.dup-explain-body code {
  font-family: var(--mono); font-size: 12px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--surface-hover); color: var(--text);
}
.dup-explain-actions {
  margin: 8px 0 6px; display: flex; gap: 8px;
}
.dup-explain-actions:empty { display: none; }
.dup-explain-legend {
  font-size: 12px; color: var(--text-2); line-height: 1.6;
}
.dup-item-owner {
  color: var(--text-3); font-size: 11px; margin-left: 4px;
}
.dup-explain-tag {
  display: inline-block; padding: 1px 7px;
  border-radius: 3px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.dup-explain-tag.mixed      { background: rgba(139,92,246,0.18); color: var(--purple); }
.dup-explain-tag.local-only { background: rgba(95,171,79,0.18);  color: var(--green); }
.dup-explain-tag.cloud-only { background: rgba(30,119,172,0.18); color: var(--blue); }
[data-theme="light"] .dup-explain-tag.mixed      { color: var(--purple-dark); }
[data-theme="light"] .dup-explain-tag.local-only { color: var(--green-dark); }
[data-theme="light"] .dup-explain-tag.cloud-only { color: var(--blue-dark); }

/* ── Cloud Manager toolbar ── */
body.tool-cloud .toolbar {
  padding: 8px 12px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
body.tool-cloud .toolbar input.search {
  padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 3px; font-size: 12px; width: 200px;
  outline: none; background: var(--bg); color: var(--text);
}
body.tool-cloud .toolbar input.search:focus {
  border-color: var(--blue); background: var(--surface);
}
.selall {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.selall input { cursor: pointer; width: 18px; height: 18px; }
.selcount { font-size: 12px; color: var(--text); font-weight: 600; white-space: nowrap; }

/* ── Rows & column legend ── */
.col-legend {
  display: grid; grid-template-columns: 34px 1fr 92px 1fr;
  padding: 5px 12px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-2); flex-shrink: 0;
}
.col-legend span:nth-child(2) { color: var(--blue); }
.col-legend span:nth-child(3) { text-align: center; }
.col-legend span:nth-child(4) { color: var(--slate); padding-left: 8px; }
.rows-container { padding: 0 12px 12px; flex: 1; overflow-y: auto; }
.section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-3);
  padding: 9px 0 2px; display: flex; align-items: center; gap: 6px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.tbl-header {
  display: grid; grid-template-columns: 34px 1fr 92px 1fr;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-3); padding: 1px 0; margin-bottom: 1px;
}
.tbl-header span:nth-child(3) { text-align: center; }
.tbl-header span:nth-child(4) { padding-left: 8px; }

/* Unmatched rows */
.unmatched-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 4px 8px; min-height: 31px;
}
.unmatched-row:first-of-type { border-top: 1px solid var(--border); }
.unmatched-row.stripe { background: var(--stripe); }
.unmatched-row:hover, .unmatched-row.stripe:hover { background: var(--row-hover); }
.unmatched-row.cloud { border-left: 3px solid var(--blue); }
.unmatched-row.local { border-left: 3px solid var(--slate); }
.unmatched-info { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.unmatched-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ── Split (side-by-side unmatched) ── */
.split-hint { font-size: 11px; color: var(--text-2); margin: 0 0 5px; }
.split-hint .amber { color: var(--amber); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.split.one { grid-template-columns: 1fr; }
.split-col {
  border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden; background: var(--surface);
}
.split-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 5px 8px;
  background: var(--bg); border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
}
.split-head.cloud { color: var(--blue); }
.split-head.local { color: var(--slate); }
.split-head.focus { background: var(--row-hover); box-shadow: inset 0 -2px 0 currentColor; }
.split-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-bottom: 1px solid var(--border); min-height: 31px;
}
.split-row:last-child { border-bottom: none; }
.split-row:hover { background: var(--row-hover); }
.split-row.stripe { background: var(--stripe); }
.split-row.stripe:hover { background: var(--row-hover); }
.split-row.dup { border-left: 3px solid var(--amber); }
.split-info { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.split-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.split-empty { padding: 12px; text-align: center; color: var(--text-3); font-size: 11px; }

/* ── Project Files tree ── */
.tree-folder { border-bottom: 1px solid var(--border); }
.tree-fhead {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; background: var(--surface);
  font-size: 12px; font-weight: 700; position: sticky; top: 0; z-index: 3;
}
.tree-fhead:hover { background: var(--row-hover); }
.tree-fhead .chev { width: 12px; text-align: center; color: var(--text-3); font-size: 10px; }
.tree-fname { color: var(--text); }
.tree-fcount { margin-left: auto; color: var(--text-3); font-size: 10px; font-weight: 600; }
.tree-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 32px; border-top: 1px solid var(--border); min-height: 30px;
}
.tree-row:hover { background: var(--row-hover); }
.tree-row.stripe { background: var(--stripe); }
.tree-esx { font-size: 13px; color: var(--text); word-break: break-word; }
.tree-cloud { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.tree-cloud.ok { color: var(--green); }

/* Status tags */
.st {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; padding: 1px 6px; border-radius: 3px; white-space: nowrap;
}
.st.ok { color: var(--green); background: var(--green-bg); }
.st.warn { color: var(--amber); background: var(--amber-bg); }
.st.loc { color: var(--slate); background: var(--slate-bg); }
.st.cl { color: var(--blue); background: var(--blue-bg); }
.st.orph { color: var(--red); background: var(--red-bg); }

/* ── WinDiff-style aligned ledger (Sites tab) ── */
.ledger { display: flex; flex-direction: column; }
.ledger-head {
  display: flex; position: sticky; top: 0; z-index: 5;
  background: var(--head-bg);
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-2);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.ledger-head .lh-cell { flex: 1; padding: 8px 10px; border-bottom: 3px solid; }
.ledger-head .lh-cell.cloud { color: var(--blue); border-bottom-color: var(--blue); }
.ledger-head .lh-cell.local { color: var(--green); border-bottom-color: var(--green); }
.ledger-head .lh-gut { border-bottom: 3px solid transparent; flex: 0 0 140px; }
.ledger-row {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--border); min-height: 32px;
  background: var(--surface);
}
.ledger-row.stripe { background: var(--stripe); }
.ledger-row:hover { background: var(--row-hover); }

/* A-Z section header — a solid divider band with the letter on BOTH the
   cloud (left) and local (right) columns. Fully opaque so the sticky
   header doesn't look translucent as rows scroll under it. Letters carry
   the same blue/green coding as the column heads for visual consistency. */
.ledger-group-head {
  position: sticky; top: 36px; z-index: 3;
  display: flex; align-items: center;
  background: var(--surface);
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.ledger-group-head .glh-letter {
  flex: 1; padding: 6px 14px;
  font-size: 18px; font-weight: 900; letter-spacing: 3px;
  text-transform: uppercase;
}
.ledger-group-head .glh-letter.cloud {
  color: var(--blue); background: rgba(30,119,172,0.12);
}
.ledger-group-head .glh-letter.local {
  color: var(--green); background: rgba(95,171,79,0.14);
}
.ledger-group-head .glh-gap {
  flex: 0 0 140px;  /* matches .lr-gut width so letters line up with columns */
}
[data-theme="light"] .ledger-group-head .glh-letter.cloud {
  background: rgba(30,119,172,0.10);
}
[data-theme="light"] .ledger-group-head .glh-letter.local {
  background: rgba(95,171,79,0.12);
}
.lr-cell {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  padding: 3px 10px; position: relative;
}
.lr-cell .cell-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.owner-tag {
  font-size: 11px; color: var(--text-3); font-weight: 400;
  margin-left: 4px; white-space: nowrap;
}
.owner-tag.other { color: var(--orange, #d97706); }
[data-theme="dark"] .owner-tag.other { color: #f59e0b; }

/* Toolbar three-way owner filter — deliberately uses --purple so the active
   state can't be confused with tabs (blue), Live/Sync (teal/green), Delete
   (red), or the "other owner" tag (amber). Purple isn't used anywhere else
   in the palette. */
.owner-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; margin-right: 4px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-raised);
}
.owner-toggle-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-2);
  padding: 0 6px 0 4px;
}
.owner-btn {
  padding: 4px 10px; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--text-2);
  border: none; border-radius: 4px; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.owner-btn:hover:not(.active) { background: var(--surface-hover); color: var(--text); }
.owner-btn.active {
  background: var(--purple); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.lr-cell .cell-meta {
  flex: 0 0 auto; color: var(--text-2); font-size: 10px;
  white-space: nowrap; transition: opacity 0.12s;
}
.lr-cell .cell-actions {
  position: absolute; right: 8px; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 2px;
  opacity: 0; transition: opacity 0.12s;
}
.lr-cell:hover .cell-actions { opacity: 1; }
.lr-cell:hover .cell-meta { opacity: 0; }
.lr-gut {
  flex: 0 0 140px; display: flex; align-items: center;
  justify-content: center; gap: 6px;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
.gut-glyph { font-size: 26px; font-weight: 900; line-height: 1; }
.lr-gut.ok .gut-glyph { color: var(--green); }
.lr-gut.orph .gut-glyph { color: var(--red); }
.gut-arrow {
  background: transparent; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; padding: 0 4px;
  color: var(--amber); transition: transform 0.1s ease;
}
.gut-arrow.orphan { color: var(--red); }
.gut-arrow.nomatch { color: var(--text-2); font-size: 20px; }
.gut-arrow.nomatch:hover { color: var(--red); }
.gut-arrow:hover { transform: scale(1.3); }
.lr-cell.empty {
  justify-content: center;
  background: repeating-linear-gradient(45deg, transparent 0 6px, var(--stripe) 6px 12px);
}
.ledger-row.stripe .lr-cell.empty {
  background: repeating-linear-gradient(45deg, transparent 0 6px, var(--row-hover) 6px 12px);
}
.ghost-add {
  background: transparent; border: 1px dashed var(--border);
  color: var(--text-2); border-radius: 4px; padding: 1px 9px;
  font-size: 10px; cursor: pointer; opacity: 0.6; transition: all 0.12s;
}
.lr-cell.empty:hover .ghost-add,
.ghost-add:hover { opacity: 1; border-color: var(--blue); color: var(--blue); }

/* Ledger row status bars */
.ledger-row.synced .lr-cell:not(.empty) { box-shadow: inset 3px 0 0 var(--green); }
.ledger-row.mismatch .lr-cell:not(.empty) { box-shadow: inset 3px 0 0 var(--amber); }
.ledger-row.orphan .lr-cell:not(.empty) { box-shadow: inset 3px 0 0 var(--red); }
.ledger-row.orphan .lr-cell.dup:not(.empty) {
  box-shadow: inset 3px 0 0 var(--red), inset -3px 0 0 var(--amber);
}

/* Source badge, review flag */
/* Peek/eye button on Sites & Projects rows — matches the 26×26 navy circle
   pattern used elsewhere (Cloud .icon-btn, Walls .btn.btn-icon). The
   .hasrc variant swaps to amber to signal "has source files not on cloud". */
.src-badge {
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--nav-blue);
  border-radius: 50%;
  cursor: pointer; font-size: 13px; line-height: 1;
  color: var(--text-2);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.src-badge:hover {
  color: var(--nav-blue); background: var(--blue-bg);
  border-color: var(--nav-blue);
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.src-badge.hasrc { color: var(--amber); border-color: var(--amber); }
.src-badge.hasrc:hover {
  color: var(--amber); border-color: var(--amber);
  background: var(--amber-bg); filter: brightness(1.15);
}

/* Not-a-Match manager modal */
.modal.notmatch { width: 780px; max-width: 94vw; max-height: 82vh; display: flex; flex-direction: column; }
.modal.notmatch .nm-body { flex: 1 1 auto; overflow: auto; min-height: 120px; margin: 8px 0 12px; }
.nm-list { display: flex; flex-direction: column; gap: 6px; }
.nm-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.nm-row:hover { border-color: var(--border-strong, var(--border)); }
.nm-cells { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-width: 0; }
.nm-cell { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-cell.cloud { color: var(--text); }
.nm-cell.local { color: var(--text); }
.nm-tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  padding: 2px 6px; border-radius: 4px; background: var(--row-hover); color: var(--text-2);
  text-transform: uppercase;
}
.nm-sep { color: var(--red); font-weight: 900; font-size: 18px; }
.nm-meta { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.nm-undo { padding: 4px 10px; font-size: 12px; }
.nm-foot { margin-top: 10px; font-size: 11px; color: var(--text-2); }
.nm-foot code { font-size: 11px; padding: 1px 5px; background: var(--row-hover); border-radius: 3px; }

/* Peek modal — redesigned */
.modal.peek { width: 960px; height: 640px; max-width: 94vw; max-height: 88vh; min-width: 480px; min-height: 400px; resize: both; overflow: hidden; display: flex; flex-direction: column; }
.modal.peek > h3, .modal.peek > .sub, .modal.peek > input[type="text"] { flex: 0 0 auto; overflow-wrap: anywhere; }
.modal.peek > .modal-actions { flex: 0 0 auto; padding-top: 14px; }
.modal.peek .modal-actions .btn { padding: 8px 22px; font-size: 13px; }
.modal.peek #mergeConflictWrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal.peek #mergeConflictWrap .peek-list { flex: 1 1 auto; max-height: none; min-height: 0; }
.modal.peek .peek-body { flex: 1 1 auto; overflow: auto; min-height: 0; padding-right: 4px; }

/* Title bar */
#peekTitle {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 700; letter-spacing: 0.2px;
}
.peek-title-icon { font-size: 22px; }
.peek-title-sub {
  margin-left: auto; padding: 3px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); font-size: 11px; font-weight: 500;
  letter-spacing: 0.3px; text-transform: uppercase;
  white-space: nowrap; flex: 0 0 auto;
}

/* Hero (stats + note) */
.peek-hero {
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.peek-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.peek-stat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-2);
}
.peek-stat b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.peek-stat .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.peek-stat.esx   .dot { background: #6bb3e0; }
.peek-stat.plan  .dot { background: #b48ce8; }
.peek-stat.image .dot { background: #f0b85f; }
.peek-stat.other .dot { background: #8892a0; }
.peek-note { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.peek-note b { color: var(--text); }

/* Sections */
.peek-section { margin-bottom: 18px; }
.peek-sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.peek-sec-name {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.peek-sec-count {
  margin-left: auto;
  padding: 2px 10px; border-radius: 999px;
  background: var(--surface); color: var(--text-2);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
}
.peek-section.esx   .peek-sec-name { color: #6bb3e0; }
.peek-section.plan  .peek-sec-name { color: #b48ce8; }
.peek-section.image .peek-sec-name { color: #f0b85f; }
.peek-section.other .peek-sec-name { color: #8892a0; }

/* File rows */
.peek-list { display: flex; flex-direction: column; gap: 2px; }
.peek-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 6px;
  transition: background 0.1s;
}
.peek-row:hover { background: var(--row-hover); }
.peek-type {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 32px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; font-family: var(--mono, ui-monospace, monospace);
}
.peek-type.esx   { background: rgba(107,179,224,0.15); color: #6bb3e0; }
.peek-type.plan  { background: rgba(180,140,232,0.15); color: #b48ce8; }
.peek-type.image { background: rgba(240,184,95,0.15); color: #f0b85f; }
.peek-type.other { background: rgba(136,146,160,0.15); color: #8892a0; }
.peek-info { flex: 1 1 auto; min-width: 0; }
.peek-file {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.peek-sub {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono, ui-monospace, monospace);
}
.peek-meta {
  flex: 0 0 auto; text-align: right;
  font-variant-numeric: tabular-nums;
}
.peek-date { font-size: 11px; color: var(--text-3); }
.peek-size { font-size: 12px; color: var(--text-2); font-weight: 500; margin-top: 1px; }
.peek-more { padding: 8px 10px; color: var(--text-2); font-size: 12px; text-align: center; }
.peek-empty { padding: 32px 20px; text-align: center; color: var(--text-2); }
.peek-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.7; }
.peek-empty-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.peek-empty-sub { font-size: 12px; line-height: 1.5; max-width: 360px; margin: 0 auto; }
.peek-empty code { padding: 1px 6px; border-radius: 4px; background: var(--surface); font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--text); }

/* Merge/pick variant (used by chooseMergeDest) — keep legacy compact rows */
.peek-row.pick { cursor: pointer; padding: 6px 10px; border-bottom: 1px solid var(--border); border-radius: 0; }
.peek-row.pick .pk-name { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.peek-row.pick .pk-date { flex: 0 0 auto; color: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.peek-row.pick .pk-size { flex: 0 0 auto; color: var(--text-2); min-width: 56px; text-align: right; font-size: 12px; }
.peek-row.pick .pk-cmp { flex: 0 0 auto; color: var(--text-2); font-size: 11px; margin-left: 12px; }

/* Backward compat for other callers that still use old classes */
.peek-group {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-2); margin: 12px 0 4px;
}
.peek .peek-sum { font-size: 13px; color: var(--text-2); margin-bottom: 10px; line-height: 1.5; }

/* Merge */
.merge-rule { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; margin: 12px 0 8px; }
.merge-rule label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.merge-remember { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); margin-top: 10px; cursor: pointer; }
.modal.peek.merge-modal { width: 780px; height: 660px; max-width: 94vw; max-height: 90vh; }
.mfile { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-bottom: 1px solid var(--border); font-size: 12px; cursor: pointer; }
.mfile:last-child { border-bottom: none; }
.mfile:hover { background: var(--row-hover); }
.mfile .mfile-chk { flex: 0 0 auto; }
.mfile .mfile-name { flex: 1 1 auto; overflow-wrap: anywhere; }
.mfile .mfile-badge { flex: 0 0 auto; font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.4px; }
.mfile .mfile-badge.new { color: var(--green); background: var(--green-bg); }
.mfile .mfile-badge.conflict { color: var(--amber); background: var(--amber-bg); }
.mfile .mfile-cmp { flex: 0 0 auto; color: var(--text-2); font-size: 10px; font-variant-numeric: tabular-nums; }
.mfile input:not(:checked) ~ .mfile-name { text-decoration: line-through; opacity: 0.5; }

/* Delete warning */
.del-warn {
  margin-top: 10px; padding: 8px 10px; border-radius: 6px;
  background: var(--amber-bg); color: var(--amber);
  font-size: 12px; line-height: 1.45;
}

/* Settings modal */
/* Legacy .set-group / .set-label — kept for any callers; new modals should
   use the .set-section pattern below for a cleaner grouped-card layout. */
.set-group { display: flex; flex-direction: column; gap: 9px; margin: 10px 0 4px; }
.set-group label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); margin-top: 0; margin-bottom: 0; }
.set-label { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }

/* Settings modal — grouped-card layout matching the Report Configure
   stage. Cards for each concern, sentence-case option labels, tighter
   rhythm. */
.set-section {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 14px;
}
.set-section:first-of-type { margin-top: 10px; }
.set-section-head {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 4px;
}
.set-section-desc {
  font-size: 12px; color: var(--text-2); line-height: 1.4;
  margin: 0 0 10px 0;
}
/* Radio option row — bumped specificity (.modal label.set-radio) so the
   existing .modal label uppercase rule doesn't win here. */
.modal label.set-radio {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 4px; cursor: pointer;
  font-size: 13px; color: var(--text); font-weight: 500;
  line-height: 1.4;
  text-transform: none; letter-spacing: 0;
  margin: 0;
}
.modal label.set-radio input[type="radio"] {
  margin-top: 2px; accent-color: var(--nav-blue);
  flex: 0 0 auto;
}
.modal label.set-radio span { flex: 1 1 auto; }
.modal label.set-radio:hover { color: var(--nav-blue); }
.modal select.set-select {
  width: auto; min-width: 200px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--nav-blue);
  font-size: 13px; cursor: pointer; outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.modal select.set-select:focus { box-shadow: 0 0 0 3px rgba(6,104,217,0.15); }

/* Compare modal */
.modal.compare {
  width: 96vw; max-width: 96vw; height: 86vh; max-height: 88vh;
  display: flex; flex-direction: column; resize: both; overflow: hidden;
}
.modal.compare > .sub { flex: 0 0 auto; }
.cmp-wrap { flex: 1 1 auto; display: flex; gap: 10px; overflow: auto; min-height: 0; }
.cmp-col {
  flex: 1 0 260px; min-width: 240px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; background: var(--surface);
}
.cmp-head { padding: 8px 10px; background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.cmp-title { font-weight: 700; font-size: 12px; overflow-wrap: anywhere; }
.cmp-sub { font-size: 10px; color: var(--text-2); margin-top: 2px; }
.cmp-list { flex: 1 1 auto; overflow: auto; }
.cmp-file { padding: 4px 10px; border-bottom: 1px solid var(--border); font-size: 12px; }
.cmp-file.common { background: var(--amber-bg); }
.cmp-n { display: block; overflow-wrap: anywhere; }
.cmp-meta { display: block; font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cmp-empty { padding: 10px; color: var(--text-2); font-size: 11px; }
.modal.compare .modal-actions { flex: 0 0 auto; padding-top: 12px; }
.modal.compare .modal-actions .btn { padding: 8px 22px; font-size: 13px; }

/* Pair code badge */
.pair-code {
  background: var(--slate-bg); padding: 0 4px; border-radius: 2px;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 10px; font-weight: 700; color: var(--slate);
  letter-spacing: 0.2px; white-space: nowrap;
}
.pair-name { font-size: 13px; word-break: break-word; line-height: 1.3; flex: 1; }
.pair-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }

.empty-msg { text-align: center; padding: 30px; color: var(--text-2); font-size: 13px; }


/* ══════════════════════════════════════════════════════════════════
              QUICK WALLS
   ══════════════════════════════════════════════════════════════════ */

/* ── Drop Zone / Landing ── */
.dropzone {
  margin: 0 auto; max-width: 700px;
  padding: 60px 40px 48px; text-align: center;
  cursor: pointer; transition: all 0.2s;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.dropzone-logo {
  width: 300px; height: 300px; margin-bottom: 28px;
  background-size: contain; background-repeat: no-repeat;
  background-position: center;
  background-image: url(quick-walls-v8.0-560x560.png);
}
.dropzone-title {
  font-family: var(--mono); font-size: 22px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--text); margin-bottom: 4px;
}
.dropzone-ver {
  font-size: 16px; font-weight: 600; color: var(--text-2); letter-spacing: 0.03em;
  margin-top: -14px; margin-bottom: 14px; opacity: 0.9;
}
.dropzone-sub {
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  letter-spacing: 0.03em; margin-bottom: 0;
}
.dropzone-divider { width: 60px; height: 1px; background: var(--border); margin: 24px auto; }
.dropzone-cta {
  font-size: 14px; color: var(--text-2); margin-bottom: 4px;
  padding: 28px 60px; border: 2px dashed var(--border);
  border-radius: 12px; width: 100%; transition: all 0.2s;
}
.dropzone:hover .dropzone-cta,
.dropzone.dragover .dropzone-cta {
  border-color: var(--blue); background: var(--accent-dim);
}
.dropzone .ext { color: var(--blue); }
.dropzone-steps {
  margin-top: 20px; text-align: left; display: inline-block;
}
.dropzone-steps li {
  font-size: 12px; color: var(--text-3); margin-bottom: 6px;
  list-style: none; padding-left: 20px; position: relative;
}
.dropzone-steps li::before {
  content: attr(data-step); position: absolute; left: 0;
  color: #F0C050; font-family: var(--mono); font-weight: 700; font-size: 11px;
}
.dropzone-steps li strong { color: var(--text-2); font-weight: 500; }

/* ── Editor ── */
.editor { display: none; }
.editor.active { display: flex; flex-direction: column; height: 100vh; }
.editor-body { padding: 28px 28px; flex: 1; overflow: auto; }

/* ── Two-column layout ── */
.columns {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 28px; align-items: start;
}

/* ── Hotkey Panel (left) ── */
.hotkey-panel {
  background: none; border: none; border-radius: 8px;
  overflow: visible; margin-top: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.hotkey-panel-header {
  padding: 9px 14px; background: var(--green);
  font-size: 12px; font-weight: 700; color: #fff;
  letter-spacing: 0.3px; border-radius: 6px;
}
#hotkeySlots { display: flex; flex-direction: column; gap: 6px; }
.hotkey-slot {
  display: grid; grid-template-columns: 28px 1fr 24px;
  align-items: center; gap: 6px; padding: 8px 14px 8px 20px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); min-height: 42px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .15s ease;
  position: relative;
}
.hotkey-swatch {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 8px; border-radius: 6px 0 0 6px;
}
.hotkey-slot:last-child { border-bottom: 1px solid var(--border); }
/* Same home-card hover: lift + shadow + border color match. --slot-color is
   set inline from each assigned wall type's swatch color. */
.hotkey-slot:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  border-color: var(--slot-color, var(--text-3));
  background: var(--surface-raised);
}
.hotkey-slot.dragover { background: var(--accent-dim); }
.hotkey-num {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: #F0C050; text-align: center;
}
.hotkey-name {
  font-size: 12px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.hotkey-name .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hotkey-empty {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-3); font-style: italic;
}
.hotkey-clear {
  width: 20px; height: 20px; background: none; border: none;
  color: var(--text-3); cursor: pointer; font-size: 13px;
  border-radius: 3px; display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: all 0.1s;
}
.hotkey-slot:hover .hotkey-clear { opacity: 1; }
.hotkey-clear:hover { color: var(--red); background: var(--danger-dim); }

/* ── Walls toolbar ── */
body.tool-walls .toolbar {
  display: flex; align-items: center; justify-content: flex-start;
  margin-top: 4px; margin-bottom: 18px; padding: 10px 0; gap: 14px;
}
.toolbar-left { display: flex; align-items: center; gap: 14px; }
.wall-count { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* ── Wall Type Cards ── */
.wall-list { display: flex; flex-direction: column; gap: 6px; }
.wall-card {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px;
  padding: 9px 12px 9px 26px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: grab;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .15s ease;
  position: relative;
}
/* Same hover language as home cards. --wall-color is set inline on each
   card from its swatch color, so the hover border extends the swatch. */
.wall-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  border-color: var(--wall-color, var(--text-3));
  background: var(--surface-raised);   /* same lighter tint the home cards use */
}
.wall-card.dragging { opacity: 0.3; }
.wall-swatch {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 14px; border-radius: var(--radius) 0 0 var(--radius); margin: 0;
}
.wall-info { min-width: 0; }
.wall-name-row { display: flex; align-items: center; gap: 8px; }
.wall-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.wall-keybind-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: #F0C050; background: rgba(240,192,80,0.12);
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}
/* Yellow #F0C050 fails contrast on white — swap to --amber-dark in light mode
   across every keybind/number use on Quick Walls. Kept in dark mode where
   it reads fine on dark surfaces. */
[data-theme="light"] .wall-keybind-badge {
  color: var(--amber-dark); background: rgba(217,119,6,0.14);
}
[data-theme="light"] .dropzone-steps li::before { color: var(--amber-dark); }
[data-theme="light"] .hotkey-num { color: var(--amber-dark); }
[data-theme="light"] .keybind-option .num { color: var(--amber-dark); }
.wall-meta {
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  margin-top: 2px; display: flex; gap: 12px; flex-wrap: wrap;
}
.wall-meta span { white-space: nowrap; }
.wall-meta .label { color: var(--text-3); }
.wall-actions {
  display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s;
}
.wall-card:hover .wall-actions { opacity: 1; }

/* ── Keybind Assign Dropdown ── */
.keybind-dropdown { position: relative; display: inline-block; }
.keybind-menu {
  display: none; position: absolute; right: 0; top: 100%; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 60; min-width: 140px; padding: 4px;
}
.keybind-menu.open { display: block; }
.keybind-option {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  font-family: var(--mono); font-size: 12px; color: var(--text);
  cursor: pointer; border-radius: 4px; border: none;
  background: none; width: 100%; text-align: left;
}
.keybind-option:hover { background: var(--surface-hover); }
.keybind-option .num { color: #F0C050; font-weight: 700; width: 16px; }
.keybind-option .taken { color: var(--text-3); font-size: 10px; }
.keybind-option.clear-opt { color: var(--red); }
.keybind-option.clear-opt:hover { background: var(--danger-dim); }

/* ── Template Bar ── */
.template-bar {
  padding: 14px 24px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; flex-shrink: 0; flex-wrap: wrap;
}
.template-bar-label {
  font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.template-select {
  flex: 0 1 280px; min-width: 120px; padding: 8px 12px;
  font-size: 13px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.template-select:focus { border-color: var(--blue); outline: none; }
.template-bar-auto {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.template-bar-auto input { cursor: pointer; accent-color: var(--green); }
.template-bar-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }

/* Save template row */
.save-tpl-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 14px; }

/* Save button full-width */
.walls-save-btn { width: 100%; margin-top: 12px; padding: 12px 16px; font-size: 14px; font-weight: 700; }

/* Sticky hotkey sidebar wrapper */
.hotkey-sidebar { position: sticky; top: 68px; }

/* Landing topbar (dropzone state) */
.dz-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #0e1b26; color: white;
}
[data-theme="light"] .dz-topbar {
  background: var(--head-bg);   /* toned-down navy for light mode */
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .dz-topbar h1, [data-theme="light"] .dz-topbar h1 .ver { color: var(--text); }
[data-theme="light"] .dz-topbar h1 .ver { color: var(--text-2); }
.header-center { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.header-center h1 { pointer-events: auto; }

/* ── Quick Tips ── */
.quick-tips {
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; font-size: 11px; color: var(--text-3); line-height: 1.6;
}
.quick-tips strong { color: var(--text-2); font-weight: 600; }
.quick-tips p { margin-bottom: 4px; }
.quick-tips p:last-child { margin-bottom: 0; }

/* ── About modal (Walls variant) ── */
.about-section { margin-bottom: 16px; }
.about-section:last-child { margin-bottom: 0; }
.about-title { font-family: var(--mono); font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.about-version { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-bottom: 12px; }
.about-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; }
.about-links { display: flex; flex-direction: column; gap: 6px; }
.about-links a { font-family: var(--mono); font-size: 12px; color: var(--blue); text-decoration: none; }
.about-links a:hover { text-decoration: underline; }
.about-credit {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  padding-top: 12px; border-top: 1px solid var(--border);
}
.about-credit a { color: var(--blue); text-decoration: none; }

/* ── Template Share Modal ── */
.tpl-share-header {
  background: #0e1b26; color: #fff;
  border-radius: 8px 8px 0 0; padding: 14px 20px;
}
.tpl-share-header h3 { color: #fff; margin: 0; font-size: 15px; letter-spacing: 0.3px; }
.tpl-share-header .btn { color: #fff; opacity: 0.7; }
.tpl-share-body { display: flex; flex-direction: column; gap: 0; padding: 0; }
.tpl-share-row {
  padding: 20px 24px; display: flex; align-items: center; gap: 16px;
}
.tpl-share-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tpl-share-icon.import { background: linear-gradient(135deg, #1e77ac, #155a85); }
.tpl-share-icon.export { background: linear-gradient(135deg, #5fab4f, #468a3b); }
.tpl-share-content { flex: 1; }
.tpl-share-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.tpl-share-desc { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.tpl-share-desc code {
  background: var(--surface-raised); padding: 1px 5px;
  border-radius: 3px; font-size: 11px;
}
.tpl-share-divider { height: 1px; background: var(--border); margin: 0 24px; }
.tpl-share-footer {
  background: var(--surface-raised); padding: 12px 24px;
  border-radius: 0 0 8px 8px; border-top: 1px solid var(--border);
}
.tpl-folder-info { font-size: 11px; color: var(--text-2); font-family: var(--mono); }


/* ══════════════════════════════════════════════════════════════════
              FOLDER ORGANIZER
   ══════════════════════════════════════════════════════════════════ */

/* Layout */
.app { display: flex; flex-direction: column; height: 100vh; }
.content {
  flex: 1; overflow: auto; padding: 16px 24px;
  max-width: 1366px; margin: 0 auto; width: 100%;
  min-height: 0;
}

/* ── Pick Folder screen ── */
.pick-screen {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; text-align: center;
}
.pick-icon { margin-bottom: 24px; }
.pick-icon img { max-height: 240px; }
.pick-title { font-size: 32px; font-weight: 700; margin-bottom: 10px; letter-spacing: 0.2px; }
.pick-sub {
  color: var(--text-2); font-size: 16px; margin-bottom: 32px;
  max-width: 620px; line-height: 1.55;
}

/* ── Scan / Preview ── */
.sticky-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); padding-bottom: 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
body.tool-organizer .toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; flex-wrap: wrap;
}
body.tool-organizer .toolbar .root-path {
  font-size: 12px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 10px; flex: 1;
  overflow-wrap: anywhere;
}
.summary-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.summary-chip {
  padding: 5px 0; font-size: 12px; font-weight: 600;
  margin-right: 8px; padding-right: 12px;
  border-right: 1px solid var(--border);
}
.summary-chip:last-child { border-right: none; padding-right: 0; }
.summary-chip .num { font-size: 16px; font-weight: 700; margin-right: 4px; }
.chip-sites .num { color: var(--blue); }
.chip-images .num { color: #a78bfa; }
.chip-plans .num { color: var(--blue); }
.chip-reports .num { color: var(--amber); }
.chip-staying .num { color: var(--text-3); }

/* ── Site Groups ── */
.site-group {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 12px; overflow: hidden;
}
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--head-bg);
  cursor: pointer; user-select: none;
}
.site-header:hover { background: var(--row-hover); }
.site-name { font-weight: 700; font-size: 14px; }
.site-badge {
  font-size: 11px; color: var(--text-2);
  background: var(--btn-sec); border-radius: 4px;
  padding: 2px 8px; margin-left: 8px;
}
.site-chevron { color: var(--text-3); font-size: 16px; transition: transform 0.15s; }
.site-group.collapsed .site-chevron { transform: rotate(-90deg); }
.site-group.collapsed .site-body { display: none; }
.site-body { padding: 0; }

/* ── File Table ── */
.file-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.file-table th {
  text-align: left; padding: 6px 10px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-3); font-weight: 700;
  border-bottom: 1px solid var(--border);
  background: var(--surface); white-space: nowrap;
}
.file-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.file-table tr:nth-child(even) td { background: var(--stripe); }
.file-table tr:hover td { background: var(--row-hover); }
.file-table .chk { width: 28px; text-align: center; }
.file-table .col-dest { width: 110px; white-space: nowrap; }
.file-table .col-size { width: 65px; white-space: nowrap; }
.file-table tr.selected td { background: rgba(95,171,79,0.12); }
.file-table input[type="checkbox"] { accent-color: var(--green); cursor: pointer; width: 14px; height: 14px; }
.file-ext {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  background: var(--btn-sec); color: var(--text-2);
  margin-right: 6px; text-transform: uppercase;
}
.dest-images { color: #a78bfa; }
.dest-floorplans { color: var(--blue); }
.dest-reports { color: var(--amber); }
.dest-select {
  font-size: 12px; font-weight: 600; padding: 2px 4px;
  border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer;
}
.dest-select.dest-images { color: #a78bfa; border-color: rgba(167,139,250,0.4); }
.dest-select.dest-floorplans { color: var(--blue); border-color: rgba(30,119,172,0.4); }
.dest-select.dest-reports { color: var(--amber); border-color: rgba(217,119,6,0.4); }
.dest-select.overridden { font-style: italic; background: rgba(217,119,6,0.08); }
.arrow { color: var(--text-3); margin: 0 6px; }
.renamed { font-size: 11px; color: var(--amber); margin-left: 4px; }
.size { color: var(--text-3); font-size: 11px; }
.staying-row td { color: var(--text-3); }
.staying-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; padding: 2px 6px; border-radius: 3px;
}
.staying-esx { background: rgba(95,171,79,0.15); color: var(--green); }
.staying-unknown { background: var(--btn-sec); color: var(--text-3); }

/* ── New Subfolder Badges ── */
.new-subs { padding: 6px 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.new-sub-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  background: rgba(95,171,79,0.12); color: var(--green); font-weight: 600;
}
.new-sub-badge.exists { background: var(--btn-sec); color: var(--text-3); }

/* ── Results Screen ── */
.result-status {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; padding: 2px 8px; border-radius: 3px;
}
.result-moved { background: rgba(95,171,79,0.15); color: var(--green); }
.result-skipped { background: var(--btn-sec); color: var(--text-3); }
.result-error { background: rgba(220,38,38,0.15); color: var(--red); }

/* Action bar bulk buttons */
.action-bar { justify-content: flex-end; flex-wrap: wrap; }
.action-bar-label { font-size: 11px; color: var(--text-3); margin-right: 4px; }
.action-bar .btn-images { color: #a78bfa; }
.action-bar .btn-floorplans { color: var(--blue); }
.action-bar .btn-reports { color: var(--amber); }

/* Organizer topbar overrides */
body.tool-organizer .topbar { padding: 8px 16px; }
body.tool-organizer .topbar-left { flex: 1; }
body.tool-organizer .topbar-center { display: flex; justify-content: center; }
body.tool-organizer .topbar-right { justify-content: flex-end; flex: 1; }
body.tool-organizer .theme-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: #cbd5e1; padding: 5px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 500;
}
body.tool-organizer .theme-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Pick cards (organizer landing page) */
.pick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 640px; width: 100%; }
@media (max-width: 640px) { .pick-cards { grid-template-columns: 1fr; } }
.pick-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  /* Same hover language as home cards: lift + big shadow + variant-color border. */
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .15s ease;
}
.pick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  background: var(--surface-raised);   /* same lighter tint the home cards use */
}
/* Persistent top-flare removed — matches home cards' "clean until hover"
   pattern (Dave: hover on pick-card / scale-panel didn't look like the
   home cards because uneven border widths broke the effect). Accent color
   still shows on hover via border-color, plus the icon + button color. */
.pick-card.organize:hover { border-color: var(--green); }
.pick-card.create:hover { border-color: var(--blue); }
.pick-card-icon { font-size: 36px; margin-bottom: 12px; }
.pick-card-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.pick-card-desc { font-size: 12px; color: var(--text-2); line-height: 1.5; margin-bottom: 18px; flex: 1; }


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

/* Home */
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

/* Cloud Manager */
@media (max-width: 720px) {
  .dashboard { flex-wrap: wrap; }
  .dash-card { min-width: 80px; }
  body.tool-cloud .topbar { padding: 5px 8px; }
  .topbar-right { gap: 6px; }
  .tabs { padding: 4px 8px 0; }
  .ledger-head .lh-gut { flex: 0 0 40px; }
  .lr-gut { flex: 0 0 40px; font-size: 14px; }
}

/* Quick Walls */
@media (min-width: 1200px) {
  .columns { grid-template-columns: 300px 1fr; }
  .wall-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
}
@media (min-width: 1600px) {
  .wall-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .editor-body { padding: 12px 12px; }
  .columns { gap: 12px; }
}
@media (max-width: 720px) {
  .columns { grid-template-columns: 1fr; }
  .hotkey-panel { position: static; }
  .editor-body { padding: 10px 8px; }
  .template-bar { flex-wrap: wrap; }
  .header-actions { flex-wrap: wrap; }
}

/* Folder Organizer */
@media (max-width: 720px) {
  .content { padding: 10px 8px; }
  body.tool-organizer .toolbar { flex-direction: column; align-items: stretch; }
  .summary-bar { flex-wrap: wrap; }
  .file-table { font-size: 11px; }
  .file-table th, .file-table td { padding: 4px 6px; }
}

/* ══════════════════════════════════════════════════════════════════
              WD SCALE — unit converter
   ══════════════════════════════════════════════════════════════════ */

body.tool-scale {
  background: var(--bg); color: var(--text);
  min-height: 100vh;
}

.scale-topbar { padding: 10px 20px; border-bottom: 1px solid var(--border); }
.tool-brand-icon {
  width: 26px; height: 26px; margin-right: 5px;
  object-fit: contain; vertical-align: middle;
}

.scale-wrap {
  max-width: 1100px; margin: 0 auto;
  padding: 32px 24px 60px;
}

.scale-hero { text-align: center; margin-bottom: 32px; }
.scale-hero-title {
  font-size: 26px; font-weight: 700; letter-spacing: 0.2px;
  margin-bottom: 8px;
}
.scale-hero-sub {
  color: var(--text-2); font-size: 14px; max-width: 780px;
  margin: 0 auto; line-height: 1.55;
}
.scale-hero-sub code {
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px; color: var(--text);
}

.scale-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px;
  align-items: stretch;
}

.scale-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px;
  display: flex; flex-direction: column;
  /* Same hover treatment as the home cards — lift, big shadow, tinted border,
     background wash. Purple for Imperial, blue for Metric (matches the badge
     accent already on each panel). */
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .15s ease;
}
.scale-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  background: var(--surface-raised);   /* same lighter tint the home cards use */
}
/* Persistent top-flare removed — same reason as .pick-card above. */
.scale-panel.imperial:hover { border-color: var(--purple); }
.scale-panel.metric:hover { border-color: var(--blue); }

.scale-panel-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.scale-panel-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--row-hover); color: var(--text-2);
  text-transform: uppercase;
}
.scale-panel.imperial .scale-panel-badge { color: var(--purple); border: 1px solid var(--purple); background: transparent; }
.scale-panel.metric   .scale-panel-badge { color: var(--blue);   border: 1px solid var(--blue);   background: transparent; }
.scale-panel-title { font-size: 14px; font-weight: 600; color: var(--text-2); }

.scale-input-label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--text-3); letter-spacing: 0.4px;
  text-transform: uppercase; margin-bottom: 6px;
}
.scale-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font-size: 18px;
  font-family: var(--mono);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.scale-input:focus {
  outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.scale-panel.imperial .scale-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139,92,246,0.22); }
.scale-panel.metric   .scale-input:focus { border-color: var(--blue);   box-shadow: 0 0 0 3px var(--accent-dim); }

.scale-error {
  min-height: 18px; margin-top: 6px; font-size: 12px; color: var(--red);
}

.scale-outputs {
  margin-top: 16px; display: flex; flex-direction: column; gap: 10px;
}
.scale-out {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.scale-out-label {
  font-size: 10px; font-weight: 600; color: var(--text-3);
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px;
}
.scale-out-row {
  display: flex; align-items: center; gap: 10px;
}
.scale-out-val {
  flex: 1; font-family: var(--mono); font-size: 18px; font-weight: 600;
  color: var(--text); overflow-wrap: anywhere; user-select: all;
}
.scale-copy {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-2); font-size: 16px; line-height: 1;
  padding: 4px 8px; border-radius: 6px; cursor: pointer;
  transition: all 0.12s ease;
}
.scale-copy:hover { color: var(--text); border-color: var(--border-focus); background: var(--surface); }
.scale-copy.copied { color: var(--green); border-color: var(--green); }

.scale-swap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 0 6px;
}
.scale-swap-line {
  width: 1px; flex: 1; background: linear-gradient(to bottom, transparent, var(--border), transparent);
}
.scale-swap-icon {
  color: var(--text-3); font-size: 22px; padding: 8px 0;
}

.scale-tips {
  margin-top: 32px; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
}
.scale-tips-head {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-2); margin-bottom: 10px;
}
.scale-tips-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.scale-tips-grid ul { list-style: none; padding: 0; margin: 6px 0 0; }
.scale-tips-grid li {
  font-size: 13px; color: var(--text-2); line-height: 1.6;
}
.scale-tips-grid code {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  padding: 1px 6px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--border);
}
.scale-tips-grid b { color: var(--text); }

@media (max-width: 820px) {
  .scale-grid { grid-template-columns: 1fr; }
  .scale-swap { padding: 12px 0; flex-direction: row; }
  .scale-swap-line { height: 1px; width: 40px; background: linear-gradient(to right, transparent, var(--border), transparent); flex: none; }
  .scale-swap-icon { padding: 0 12px; transform: rotate(90deg); }
  .scale-tips-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
              WD REPORT — installer-facing PDF reports
   ══════════════════════════════════════════════════════════════════ */

body.tool-report {
  background: var(--bg); color: var(--text);
  min-height: 100vh;
}

/* Teal color tokens (only used by Report) */
:root { --teal: #0d9488; --teal-dark: #0f766e; }

/* Landing dropzone reuses .dropzone from Quick Walls. */
.report-dropzone { border-color: var(--teal); }
.report-dropzone:hover { border-color: var(--teal); }
.dropzone-brand-logo {
  width: 180px; height: 180px; object-fit: contain;
  display: block; margin: 0 auto 8px;
}

/* Workspace layout */
.report-workspace { display: none; }
.report-workspace.active { display: flex; flex-direction: column; min-height: 100vh; }

.report-toolbar {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
[data-theme="light"] .report-toolbar {
  background: var(--head-bg);   /* match other headers in light mode */
}
.report-toolbar .header-left { display: flex; align-items: center; gap: 10px; }
.report-toolbar-center { flex: 1; text-align: center; }
.report-toolbar-center h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.2px; }
.report-toolbar-center h1 span:first-of-type { color: var(--teal); }
.report-toolbar .ver,
.report-wiz-topbar .ver { font-weight: 500; color: var(--text-2); font-size: 14px; margin-left: 6px; }
.report-toolbar .header-actions { display: flex; align-items: center; gap: 8px; }

.report-body {
  flex: 1 1 auto; display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
}

/* Sidebar */
.report-sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 18px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px;
}
.rep-section-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;
}
.rep-radio, .rep-check {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; font-size: 13px; color: var(--text);
  cursor: pointer;
}
.rep-radio input, .rep-check input { accent-color: var(--teal); }
.rep-radio.disabled, .rep-check.disabled { color: var(--text-3); cursor: not-allowed; }
.rep-radio em { color: var(--text-3); font-style: normal; margin-left: 4px; font-size: 11px; }
.rep-picker-list { display: flex; flex-direction: column; gap: 6px; }
.rep-radio-desc {
  margin: -2px 0 6px 26px; font-size: 11px; color: var(--text-3); line-height: 1.4;
}
.rep-select {
  width: 100%; padding: 8px 10px; font-size: 13px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.rep-select:focus { border-color: var(--blue); outline: none; }
.rep-select option { background: var(--bg); color: var(--text); }
.rep-picker-desc {
  font-size: 11px; color: var(--text-3); line-height: 1.4; margin-top: 2px;
}
.rep-section-note {
  font-size: 11px; color: var(--text-3); line-height: 1.4;
  margin: -4px 0 10px 0; font-style: italic;
}
.rep-bom-total td { border-top: 2px solid #d5d5d7 !important; padding-top: 8px !important; }
[data-theme="dark"] .rep-bom-total td { border-top-color: var(--border) !important; }
.rep-check.small { font-size: 12px; padding: 3px 4px; }
.rep-ap-list { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.rep-sidebar-actions {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.rep-open-btn {
  width: 100%; padding: 9px 12px;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.rep-foot {
  padding-top: 10px;
  font-size: 11px; color: var(--text-3); line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   REPORT · Staged wizard (drop → template → configure → review)
   ══════════════════════════════════════════════════════════════════ */

/* Slim wizard topbar — same 56px shared sizing (added to .topbar rule
   family) plus its own colors and true-center flex layout so the title
   sits on the actual page center regardless of file-badge width. */
.report-wiz-topbar {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
[data-theme="light"] .report-wiz-topbar { background: var(--head-bg); }
.report-wiz-topbar .header-left {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-start;
}
.report-wiz-topbar .report-toolbar-center {
  flex: 0 0 auto; text-align: center;
}
.report-wiz-topbar .header-actions {
  flex: 1 1 0;
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
}

/* Stepper — 3 clickable pills with connecting lines. */
.rep-stepper {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 18px 20px 22px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
[data-theme="light"] .rep-stepper { background: var(--head-bg); }
.rep-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px;
  background: transparent; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.rep-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-raised); color: var(--text-2);
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--border);
}
.rep-step:hover:not(:disabled) {
  color: var(--nav-blue); border-color: var(--nav-blue);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.rep-step[disabled] {
  cursor: not-allowed; opacity: 0.55;
  transform: none !important; box-shadow: none !important;
}
.rep-step.active {
  color: var(--nav-blue); border-color: var(--nav-blue);
  background: var(--surface);
}
.rep-step.active .rep-step-num {
  background: var(--nav-blue); color: #fff; border-color: var(--nav-blue);
}
.rep-step.done .rep-step-num {
  background: var(--teal); color: #fff; border-color: var(--teal);
}
.rep-step-line {
  flex: 0 0 44px; height: 1px; background: var(--border);
  align-self: center;
}

/* Stage containers — each stage is one full-width section that slides
   in when active. Only the active one is visible (JS toggles [hidden]). */
.rep-stage {
  max-width: 1100px; margin: 0 auto; padding: 28px 24px 40px;
  width: 100%;
}
.rep-stage[hidden] { display: none; }
.rep-stage-head { text-align: center; margin-bottom: 28px; }
.rep-stage-title {
  margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--text);
}
.rep-stage-sub {
  margin: 0; font-size: 14px; color: var(--text-2); font-weight: 500;
}
.rep-stage-nav {
  display: flex; align-items: center; gap: 10px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
}
.rep-stage-nav-spacer { flex: 1 1 auto; }

/* ── STAGE 2 · Template gallery ── */
.rep-template-gallery {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  align-items: stretch;
}
.rep-template-card {
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 18px 16px; text-align: left;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .15s ease;
}
.rep-template-card:hover:not(.is-coming-soon) {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  border-color: var(--nav-blue);
  background: var(--surface-raised);
}
.rep-template-card.is-selected {
  border-color: var(--nav-blue); background: var(--surface-raised);
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
}
.rep-template-card.is-coming-soon {
  cursor: not-allowed; opacity: 0.65;
  background: var(--surface); border-style: dashed;
}
.rep-template-card-top {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px;
}
.rep-template-preview {
  flex: 0 0 auto;
  width: 92px; height: 116px; border-radius: 6px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
[data-theme="dark"] .rep-template-preview {
  background: linear-gradient(180deg, #1a222c 0%, #0f1620 100%);
}
.rep-template-preview svg { width: 100%; height: 100%; display: block; }
.rep-template-titles { flex: 1 1 auto; min-width: 0; }
.rep-template-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 6px;
}
.rep-template-pill.selected { background: var(--nav-blue); color: #fff; }
.rep-template-pill.available { background: rgba(6,104,217,0.12); color: var(--nav-blue); }
.rep-template-pill.soon { background: var(--amber-bg); color: var(--amber-dark); }
[data-theme="dark"] .rep-template-pill.soon { color: var(--amber); }
.rep-template-title {
  margin: 0 0 3px; font-size: 17px; font-weight: 700; color: var(--text);
  line-height: 1.2;
}
.rep-template-subtitle {
  margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.35;
}
.rep-template-sections-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-3); margin: 6px 0 10px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.rep-template-sections {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.rep-template-section {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text);
}
.rep-template-section-icon {
  flex: 0 0 auto; width: 20px; text-align: center;
  font-size: 14px; line-height: 1.4;
}
.rep-template-section-body b {
  display: block; font-weight: 700; color: var(--text);
}
.rep-template-section-body span {
  display: block; font-size: 12px; color: var(--text-2); line-height: 1.35;
}
.rep-template-best-for {
  margin: 2px 0 14px; padding: 8px 12px;
  background: rgba(6,104,217,0.06); border-left: 3px solid var(--nav-blue);
  border-radius: 4px;
  font-size: 12px; color: var(--text-2); line-height: 1.4;
}
.rep-template-best-for b { color: var(--text); font-weight: 700; }
.rep-template-cta { margin-top: auto; }
.rep-template-cta .btn { width: 100%; }
.rep-template-soon-note {
  margin-top: auto; padding-top: 12px;
  font-size: 12px; color: var(--text-3); text-align: center; font-style: italic;
}

/* ── STAGE 3 · Configure ── */
.rep-config-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 16px;
}
.rep-config-card {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.rep-config-wide { grid-column: 1 / -1; }
.rep-config-card-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text);
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.rep-config-icon { font-size: 16px; line-height: 1; }
.rep-config-head-actions {
  margin-left: auto; display: inline-flex; gap: 6px; align-items: center;
}
.rep-ap-count {
  font-size: 12px; font-weight: 500; color: var(--text-2);
  padding: 2px 10px; background: var(--surface-raised); border-radius: 999px;
}
.rep-logo-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.rep-logo-btn { padding: 6px 12px; font-size: 12px; }
.rep-logo-preview {
  margin-top: 8px; min-height: 24px;
}
.rep-logo-preview img {
  max-width: 100%; max-height: 80px; display: block;
  border: 1px solid var(--border); border-radius: 4px; padding: 4px;
  background: #fff;
}

/* AP filter — group-by pills + search + collapsible groups. Built to scale
   from 5 APs to 500+ APs on a single project. */
.rep-ap-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0 12px;
}
.rep-groupby-pills {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: 999px;
}
.rep-groupby-pills > .rep-groupby-label {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  padding: 4px 8px 4px 10px; text-transform: uppercase; letter-spacing: 0.4px;
}
.rep-groupby-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 999px;
  background: transparent; border: none;
  color: var(--text-2); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.rep-groupby-pill:hover { color: var(--text); background: var(--surface-hover); }
.rep-groupby-pill.active {
  background: var(--nav-blue); color: #fff;
}
.rep-ap-search {
  flex: 1 1 220px; min-width: 180px;
  padding: 8px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.rep-ap-search:focus {
  border-color: var(--nav-blue);
  box-shadow: 0 0 0 3px rgba(6,104,217,0.15);
}

/* Group container (rendered when a group-by is active) */
.rep-ap-groups {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 420px; overflow-y: auto; padding: 2px 4px;
}
.rep-ap-group {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-raised); overflow: hidden;
}
.rep-ap-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer;
  font-size: 13px; color: var(--text); font-weight: 600;
  background: var(--surface-raised);
  border-bottom: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.rep-ap-group:not(.is-collapsed) .rep-ap-group-head {
  border-bottom-color: var(--border);
}
.rep-ap-group-head:hover { background: var(--surface-hover); }
.rep-ap-group-chevron {
  display: inline-block; width: 12px; text-align: center; font-size: 11px;
  color: var(--text-3);
  transition: transform .15s ease;
}
.rep-ap-group.is-collapsed .rep-ap-group-chevron { transform: rotate(-90deg); }
.rep-ap-group-swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--border);
}
.rep-ap-group-label { flex: 0 0 auto; }
.rep-ap-group-count {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 500; color: var(--text-2);
  padding: 2px 8px; background: var(--bg); border-radius: 999px;
}
.rep-ap-group-toggle {
  margin-left: auto;
  padding: 3px 10px; font-size: 11px;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.rep-ap-group-toggle:hover {
  color: var(--nav-blue); border-color: var(--nav-blue);
  background: rgba(6,104,217,0.06);
}
.rep-ap-group-body {
  display: grid; gap: 4px 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  padding: 8px 12px;
}
.rep-ap-group.is-collapsed .rep-ap-group-body { display: none; }

/* Individual AP checkbox row — name + model subtitle */
.rep-ap-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; font-size: 13px; color: var(--text);
  cursor: pointer; border-radius: 4px;
}
.rep-ap-row:hover { background: var(--surface-hover); }
.rep-ap-row input { accent-color: var(--teal); flex: 0 0 auto; }
.rep-ap-row-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rep-ap-row-name {
  font-size: 13px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-ap-row-model {
  font-size: 11px; color: var(--text-3); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Flat AP grid (used when group-by is "None") — same rows, no groups */
.rep-ap-grid {
  display: grid; gap: 4px 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  max-height: 420px; overflow-y: auto; padding: 6px 4px;
}
.rep-ap-empty {
  padding: 30px 20px; text-align: center;
  font-size: 13px; color: var(--text-3); font-style: italic;
}

/* Option checkbox with description subtitle — used in the report options
   card to make each option's effect self-explanatory. */
.rep-check.with-desc {
  align-items: flex-start;
  padding: 8px 4px;
}
.rep-check.with-desc input { margin-top: 3px; }
.rep-check-body { display: flex; flex-direction: column; gap: 2px; }
.rep-check-label { font-size: 13px; font-weight: 600; color: var(--text); }
.rep-check-desc { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.rep-check.is-disabled {
  cursor: not-allowed; opacity: 0.55;
}
.rep-check.is-disabled input { pointer-events: none; }
.rep-check.is-disabled .rep-check-desc { font-style: italic; }

/* ── STAGE 4 · Review ── */
.rep-stage-review {
  max-width: none; padding: 0;   /* full-width canvas */
}
.rep-review-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
[data-theme="light"] .rep-review-bar { background: var(--head-bg); }

/* Report canvas — the printable document */
.report-canvas {
  background: #f5f5f7; overflow-y: auto; padding: 24px;
}
[data-theme="dark"] .report-canvas { background: #0a0f16; }
.rep-empty, .rep-empty-small {
  padding: 40px 20px; text-align: center; color: var(--text-3);
}
.rep-empty-small { padding: 12px; font-size: 12px; }

/* Document layout — a paper-ish card that prints edge-to-edge */
.rep-doc-head, .rep-floor-section, .rep-legend, .rep-doc-foot {
  max-width: 960px; margin: 0 auto 18px;
  background: #fff; color: #111;
  padding: 22px 28px; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
[data-theme="dark"] .rep-doc-head,
[data-theme="dark"] .rep-floor-section,
[data-theme="dark"] .rep-legend,
[data-theme="dark"] .rep-doc-foot {
  background: #1a222c; color: var(--text);
}

.rep-doc-head { padding-top: 26px; }
.rep-doc-brand {
  color: var(--teal); font-size: 12px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 6px;
}
.rep-brand-icon {
  width: 22px; height: 22px; object-fit: contain;
  vertical-align: middle; margin-right: 5px;
}
.rep-doc-title {
  font-size: 22px; font-weight: 700; margin: 0 0 10px; line-height: 1.3;
}
.rep-doc-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12px; color: #555;
}
[data-theme="dark"] .rep-doc-meta { color: var(--text-2); }
.rep-doc-meta b { color: #111; font-weight: 600; }
[data-theme="dark"] .rep-doc-meta b { color: var(--text); }

.rep-floor-title {
  font-size: 16px; font-weight: 700; margin: 0 0 14px;
  padding-bottom: 6px; border-bottom: 2px solid var(--teal);
}

/* Overview: floor plan image with SVG overlay */
.rep-overview { margin-bottom: 16px; }
.rep-overview-plan {
  position: relative; width: 100%;
  border: 1px solid #ddd; background: #fafafa; overflow: hidden;
}
[data-theme="dark"] .rep-overview-plan { border-color: var(--border); background: #0f1620; }
.rep-overview-plan img,
.rep-overview-plan svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.rep-overview-plan svg { pointer-events: none; }
.rep-overview-key { margin-top: 8px; font-size: 11px; color: #555; }
[data-theme="dark"] .rep-overview-key { color: var(--text-2); }
.rep-key-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-right: 4px;
}
.rep-key-swatch.dir { background: #0d9488; }
.rep-key-swatch.omni { background: #8b5cf6; }

/* AP table */
.rep-ap-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rep-ap-table th, .rep-ap-table td {
  padding: 7px 8px; text-align: left;
  border-bottom: 1px solid #e5e5e7;
}
[data-theme="dark"] .rep-ap-table th,
[data-theme="dark"] .rep-ap-table td {
  border-bottom-color: var(--border);
}
.rep-ap-table th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #555;
  border-bottom: 2px solid #d5d5d7;
}
[data-theme="dark"] .rep-ap-table th {
  color: var(--text-2); border-bottom-color: var(--border);
}
.rep-ap-table td.rep-num, .rep-ap-table th.rep-num { width: 32px; color: #999; }
.rep-ap-table td.rep-name { font-weight: 600; }
.rep-ap-table td.rep-az { white-space: nowrap; font-family: var(--mono); }
.rep-ap-table .rep-alt { color: #888; font-weight: normal; font-size: 11px; }
[data-theme="dark"] .rep-ap-table .rep-alt { color: var(--text-3); }

.rep-doc-foot { text-align: center; font-size: 11px; color: #888; padding: 12px; }
[data-theme="dark"] .rep-doc-foot { color: var(--text-3); }

/* ── Print styles: sidebar/toolbar hidden, canvas prints edge-to-edge,
      each floor section on its own page. ── */
@media print {
  @page { margin: 0.5in; }
  html, body { background: #fff !important; color: #111 !important; }
  .noprint,
  #dzTopbar,
  .report-sidebar,
  .report-toolbar,
  .report-wiz-topbar,
  .rep-stepper,
  .rep-stage:not(.rep-stage-review),
  .rep-review-bar,
  .toasts { display: none !important; }
  .report-workspace { display: block !important; }
  .report-body { grid-template-columns: 1fr !important; display: block !important; }
  .rep-stage-review { padding: 0 !important; }
  .report-canvas {
    background: #fff !important;
    padding: 0 !important; overflow: visible !important;
  }
  .rep-doc-head, .rep-floor-section, .rep-legend, .rep-doc-foot {
    background: #fff !important; color: #111 !important;
    box-shadow: none !important; border-radius: 0 !important;
    max-width: none !important; margin: 0 0 12px !important;
    padding: 12px 0 !important; page-break-inside: avoid;
  }
  .rep-floor-section { page-break-before: always; padding-top: 0 !important; }
  .rep-doc-head + .rep-floor-section { page-break-before: auto; }
  .rep-doc-meta { color: #555 !important; }
  .rep-doc-meta b { color: #111 !important; }
  .rep-ap-table th { color: #555 !important; border-bottom-color: #d5d5d7 !important; }
  .rep-ap-table td { border-bottom-color: #e5e5e7 !important; color: #111 !important; }
  .rep-ap-table .rep-alt { color: #888 !important; }
  .rep-overview-plan { border-color: #ddd !important; background: #fafafa !important; }
  .rep-overview-key { color: #555 !important; }
  .rep-doc-foot { color: #888 !important; }
}

@media (max-width: 900px) {
  .report-body { grid-template-columns: 1fr; }
  .report-sidebar { border-right: none; border-bottom: 1px solid var(--border); }
}

/* WD Report v1.2 — cover page, logo controls, tighter print spacing */

/* Sidebar logo controls */
.rep-logo-row { display: flex; gap: 6px; margin: 8px 0 6px; }
.rep-logo-btn { font-size: 12px; padding: 5px 10px; }
.rep-logo-preview {
  margin-top: 4px;
  padding: 10px; min-height: 8px;
  background: var(--bg); border: 1px dashed var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.rep-logo-preview:empty { display: none; }
.rep-logo-preview img {
  max-width: 100%; max-height: 90px; display: block;
  background: #fff; padding: 4px; border-radius: 4px;
}

/* Cover page — full-page block on print, big card on screen */
.rep-cover {
  max-width: 960px; margin: 0 auto 18px;
  background: #fff; color: #111;
  padding: 60px 48px; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  min-height: 720px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
[data-theme="dark"] .rep-cover { background: #1a222c; color: var(--text); }
.rep-cover-logo-wrap { margin-bottom: 40px; }
.rep-cover-logo {
  max-width: 380px; max-height: 220px; display: block;
  background: #fff; padding: 8px; border-radius: 6px;
}
.rep-cover-brand {
  color: var(--teal); font-size: 14px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 14px;
}
.rep-cover-title {
  font-size: 30px; font-weight: 700; margin: 0 0 34px;
  line-height: 1.3; max-width: 640px;
}
.rep-cover-stats {
  display: flex; gap: 60px; margin-bottom: 28px;
}
.rep-cover-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.rep-cover-stat b {
  font-size: 40px; font-weight: 700; color: #111; line-height: 1;
}
[data-theme="dark"] .rep-cover-stat b { color: var(--text); }
.rep-cover-stat span {
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: #666;
}
[data-theme="dark"] .rep-cover-stat span { color: var(--text-2); }
.rep-cover-date {
  font-size: 12px; color: #666;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #eee; min-width: 200px;
}
[data-theme="dark"] .rep-cover-date { color: var(--text-2); border-top-color: var(--border); }

/* ── Print overrides: tighter margins, cover full page, kill whitespace ── */
@media print {
  @page { margin: 0.35in; }

  /* Tighten every top-level section — the old 12px padding stacked into
     visible gaps between the header, floor section, and legend. */
  .rep-doc-head, .rep-floor-section, .rep-legend, .rep-doc-foot {
    padding: 4px 0 !important;
    margin: 0 0 6px !important;
  }
  .rep-doc-head { padding-bottom: 8px !important; }

  /* Cover page: fills a whole sheet, then hard-breaks to the next. */
  .rep-cover {
    background: #fff !important; color: #111 !important;
    box-shadow: none !important; border-radius: 0 !important;
    max-width: none !important; margin: 0 !important;
    padding: 40px 20px !important;
    min-height: 90vh !important;
    page-break-after: always;
  }
  .rep-cover-stat b { color: #111 !important; }
  .rep-cover-stat span { color: #666 !important; }
  .rep-cover-date { color: #666 !important; border-top-color: #eee !important; }

  /* If cover is present, the first floor section should NOT force a page
     break — the cover already broke. Otherwise (inline header), keep the
     page-break-before override so the first floor stays with the header. */
  .rep-cover + .rep-floor-section { page-break-before: auto; }

  /* Trim the AP-table row padding and floor-title spacing that were adding
     gaps in the middle of the printed page. */
  .rep-floor-title { margin: 0 0 8px !important; padding-bottom: 4px !important; }
  .rep-ap-table th, .rep-ap-table td { padding: 4px 6px !important; }

  /* The doc footer at the bottom often gets orphaned onto its own page.
     Zero its outer margin so it stays with the legend/table above. */
  .rep-doc-foot { margin-top: 0 !important; padding: 6px 0 !important; }
}