/* © 2026 Vort. All rights reserved. */
/* Layout: console-style app shell — dark-first, dense tables, a toolbar strip, then content. */
:root {
  --bg: #14161a;
  --panel: #1b1e23;
  --raise: #23272e;
  --line: #2d323a;
  --fg: #e7e9ec;
  --muted: #98a0aa;
  --accent: #3b86f7;
  --accent-fg: #ffffff;
  --accent-soft: rgba(59, 134, 247, 0.16);
  --t-planner: #e0605a;
  --t-page5: #e8c13a;
  --t-mixer: #a57be4;
  --t-patch: #4a94f8;
  --t-audio: #5fc46d;
  --ok: #5fc46d;
  --warn: #e6b04a;
  --bad: #ec6a5e;
  --chip: #3a4049;
  --font-ui: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-label: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f3f5; --panel: #ffffff; --raise: #e9ecf0; --line: #d5d9df;
    --fg: #191c21; --muted: #5a626d; --accent: #1f6be0; --accent-fg: #ffffff;
    --accent-soft: rgba(31, 107, 224, 0.12);
    --t-planner: #c2423c; --t-page5: #b08a00; --t-mixer: #7d4fc4; --t-patch: #1f6be0; --t-audio: #2f9a3f;
    --ok: #2f9a3f; --warn: #a8720f; --bad: #c8382d; --chip: #6b7380;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f2f3f5; --panel: #ffffff; --raise: #e9ecf0; --line: #d5d9df;
  --fg: #191c21; --muted: #5a626d; --accent: #1f6be0; --accent-fg: #ffffff;
  --accent-soft: rgba(31, 107, 224, 0.12);
  --t-planner: #c2423c; --t-page5: #b08a00; --t-mixer: #7d4fc4; --t-patch: #1f6be0; --t-audio: #2f9a3f;
  --ok: #2f9a3f; --warn: #a8720f; --bad: #c8382d; --chip: #6b7380;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-family: var(--font-label); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; }
.brand-name span { color: var(--accent); }
.topbar { position: relative; }
.topbar .greet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; font-weight: 600; font-size: 20px; pointer-events: none;
}
.topbar .right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--raise); border: 1px solid var(--line);
  font-family: var(--font-label); font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
}
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); min-width: 0; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--fg); }
.crumbs strong { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }

/* Toolbar */
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-block: 8px;
}
.btn-group { display: flex; align-items: stretch; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; }
.btn-group > * + * { border-left: 1px solid var(--line); }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 0; background: transparent; cursor: pointer;
  font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none; border-radius: 0;
}
.btn:hover { background: var(--accent-soft); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn.primary { background: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { filter: brightness(1.08); }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.btn.solo { border: 1px solid var(--line); border-radius: 4px; background: var(--raise); }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-group .btn:first-child { border-radius: 3px 0 0 3px; }
.btn-group .btn:last-child { border-radius: 0 3px 3px 0; }

.search {
  flex: 1 1 280px; max-width: 520px; margin-inline: auto;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel);
  padding: 0 10px;
}
.search:focus-within { border-color: var(--accent); }
.search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 7px 0; outline: none; }
.kbd { font-family: var(--font-mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
select.filter {
  border: 1px solid var(--line); border-radius: 4px; background: var(--raise);
  padding: 6px 10px; font-size: 14px; font-weight: 500;
}

/* Table */
.table-box { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
table.grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.grid th {
  text-align: left; padding: 6px 10px; background: var(--raise);
  font-family: var(--font-label); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--fg);
}
.grid th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.grid th button:focus-visible { outline: 2px solid var(--accent); }
.grid th .arrow { width: 10px; height: 10px; opacity: 0.8; }
.grid td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: var(--accent-soft); }
.grid td.name { white-space: normal; min-width: 180px; width: 40%; }
.grid td.name a { text-decoration: none; font-weight: 500; }
.grid td.name a:hover { text-decoration: underline; }
.grid .check { width: 32px; }
.grid input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); }
.grid .dim { color: var(--muted); }
.grid td.notes-cell { min-width: 160px; width: 25%; padding: 2px 4px; }
.notes-input {
  width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 3px; background: transparent;
  padding: 4px 6px; text-overflow: ellipsis; color: var(--fg);
}
.notes-input::placeholder { color: var(--muted); opacity: 0.7; }
.notes-input:hover { border-color: var(--line); }
.notes-input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.notes-input.bad { border-color: var(--bad); }

.openin { display: flex; gap: 4px; flex-wrap: nowrap; }
.tool-ico {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 3px;
  border: 1px solid var(--line); background: var(--raise); text-decoration: none;
}
.tool-ico svg { width: 18px; height: 18px; }
.tool-ico:hover { border-color: currentColor; }
.tool-ico { color: var(--muted); }
.tool-ico.mixer { color: var(--t-mixer); }
.tool-ico.patch { color: var(--t-patch); }
.tool-ico.audio { color: var(--t-audio); }

.role {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  background: var(--chip); color: #fff;
  font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: 0.1em;
}
.status {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); vertical-align: 1px;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.current { color: var(--ok); }
.status.upcoming { color: var(--accent); }
.status.past { color: var(--muted); }
.status.archived { color: var(--warn); }

.kebab { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; }
.kebab:hover { background: var(--raise); }
.kebab:focus-visible { outline: 2px solid var(--accent); }
.kebab svg { width: 16px; height: 16px; }

.menu {
  position: fixed; z-index: 50; min-width: 190px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35); padding: 4px; display: flex; flex-direction: column;
}
.menu button { all: unset; cursor: pointer; padding: 7px 10px; border-radius: 4px; font-size: 14px; }
.menu button:hover, .menu button:focus-visible { background: var(--accent-soft); }
.menu button.danger { color: var(--bad); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

.footer { padding-block: 10px; color: var(--muted); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; }
.empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--fg); font-size: 17px; margin-bottom: 4px; }

.banner {
  margin-block: 8px; padding: 8px 12px; border-radius: 4px; font-size: 13px;
  border: 1px solid var(--warn); color: var(--fg); background: var(--accent-soft);
}
.bulk { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* Modal */
.overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.5);
  display: grid; place-items: center; padding: 16px;
}
.modal {
  width: min(520px, 100%); max-height: 100%; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.modal header { padding: 16px 20px 0; }
.modal h2 { margin: 0; font-size: 19px; font-weight: 600; text-wrap: balance; }
.modal p.sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.modal form, .modal .body { padding: 16px 20px 20px; display: grid; gap: 14px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field label { font-family: var(--font-label); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
  padding: 8px 10px; min-width: 0;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 70px; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.err { color: var(--bad); font-size: 13px; min-height: 1em; }
.actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Project dashboard */
.page { padding-block: 20px 40px; display: grid; gap: 20px; }
.proj-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.proj-head .titles { flex: 1; min-width: 0; }
.proj-head h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; }
.proj-head .meta { margin-top: 6px; color: var(--muted); font-size: 14px; display: flex; gap: 6px 16px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.proj-head .meta .status { margin-left: 0; }

.timeline { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; display: grid; gap: 10px; }
.timeline .ends { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.timeline .ends small { display: block; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.timeline .ends .to { text-align: right; }
.timeline .bar { height: 8px; border-radius: 4px; background: var(--raise); overflow: hidden; }
.timeline .bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.timeline .say { font-size: 14px; }

.section-label { font-family: var(--font-label); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 -8px; }
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tool-card {
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px;
  text-decoration: none; min-width: 0;
  border-top: 3px solid var(--tc);
}
.tool-card:hover { border-color: var(--tc); }
.tool-card .top { display: flex; align-items: center; gap: 10px; }
.tool-card .top svg { width: 26px; height: 26px; color: var(--muted); flex: none; }
.tool-card h3 { margin: 0; font-size: 18px; font-weight: 600; }
.tool-card p { margin: 0; color: var(--muted); font-size: 14px; }
.tool-card .stats { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tool-card .stats b { color: var(--fg); font-weight: 600; }
.tool-card { --tc: var(--accent); }
.tool-card.mixer { --tc: var(--t-mixer); }
.tool-card.patch { --tc: var(--t-patch); }
.tool-card.audio { --tc: var(--t-audio); }

.notes { display: grid; gap: 6px; }
.notes textarea {
  width: 100%; min-height: 140px; resize: vertical; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); padding: 12px 14px; line-height: 1.5;
}
.notes textarea:focus { outline: none; border-color: var(--accent); }
.saved { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Tool pages */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 4px;
  text-decoration: none; font-weight: 500; font-size: 14px; border: 1px solid var(--line); background: var(--raise);
}
.tab svg { width: 16px; height: 16px; }
.tab svg { color: var(--muted); }
.tab.mixer svg { color: var(--t-mixer); }
.tab.patch svg { color: var(--t-patch); }
.tab.audio svg { color: var(--t-audio); }
.tab[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); }
.tool-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-title svg { width: 34px; height: 34px; }
.tool-title h1 { margin: 0; font-size: 28px; font-weight: 600; }
.tool-title p { margin: 0; color: var(--muted); }
.edit-table td { padding: 0; }
.edit-table td.idx { padding: 0 10px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; width: 1%; }
.edit-table td input {
  width: 100%; min-width: 90px; border: 0; background: transparent; padding: 8px 10px; outline: none;
}
.edit-table td input:focus { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.edit-table td.act { width: 1%; padding: 0 4px; white-space: nowrap; }
.icon-btn { all: unset; cursor: pointer; width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 4px; color: var(--muted); }
.icon-btn:hover { background: var(--raise); color: var(--fg); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); }
.icon-btn svg { width: 14px; height: 14px; }
.tool-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.loading { padding: 48px 16px; color: var(--muted); text-align: center; }

@media (max-width: 640px) {
  .topbar .greet { position: static; transform: none; max-width: none; order: 3; flex-basis: 100%; text-align: center; font-size: 17px; white-space: normal; }
  .proj-head h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Per-page icon colors */
.tool-ico.planner, .tab.planner svg, .tool-card.planner .top svg { color: var(--t-planner); }
.tool-ico.page5, .tab.page5 svg, .tool-card.page5 .top svg { color: var(--t-page5); }

/* Project page: its ten pages as a launcher grid of app icons */
.page-links {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 28px 16px; padding: 28px 20px; max-width: 900px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.page-link {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
  text-decoration: none; text-align: center; border-radius: 10px; padding: 6px 4px;
}
.pl-ico {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px;
  background: var(--raise); border: 1px solid var(--line); color: var(--muted);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.18);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.pl-ico svg { width: 40px; height: 40px; }
.page-link:hover .pl-ico, .page-link:focus-visible .pl-ico { transform: translateY(-2px); border-color: var(--accent); }
.page-link:focus-visible { outline: none; }
.page-link:focus-visible .pl-ico { outline: 2px solid var(--accent); outline-offset: 3px; }
.page-link.planner .pl-ico { color: var(--t-planner); border-color: color-mix(in srgb, var(--t-planner) 45%, var(--line)); }
.page-link.page5 .pl-ico { color: var(--t-page5); border-color: color-mix(in srgb, var(--t-page5) 45%, var(--line)); }
.pl-name { font-weight: 600; font-size: 15px; }
.pl-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -6px; }
@media (max-width: 480px) {
  .page-links { grid-template-columns: repeat(3, 1fr); gap: 20px 8px; padding: 20px 10px; }
  .pl-ico { width: 64px; height: 64px; border-radius: 15px; }
  .pl-ico svg { width: 34px; height: 34px; }
}

/* List page icons: small versions of the project page's app icons */
.tool-ico {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--raise); border: 1px solid var(--line); color: var(--muted);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 6px rgba(0,0,0,0.18);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.tool-ico svg { width: 16px; height: 16px; }
.tool-ico:hover, .tool-ico:focus-visible { transform: translateY(-1px); border-color: var(--accent); }
.tool-ico.planner { color: var(--t-planner); border-color: color-mix(in srgb, var(--t-planner) 45%, var(--line)); }
.tool-ico.page5 { color: var(--t-page5); border-color: color-mix(in srgb, var(--t-page5) 45%, var(--line)); }
.tool-ico.planner:hover, .tool-ico.page5:hover { border-color: var(--accent); }

/* Ten page colors, one per page */
:root { --t-planner: #e5534b; --t-mixer: #f0883e; --t-patch: #57c05f; --t-audio: #39c5cf; --t-page5: #e8c13a; --t-page6: #4a94f8; --t-page7: #8a7cf0; --t-page8: #c06ad8; --t-page9: #e86aa6; --t-page10: #c49a6c; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t-planner: #c93a33; --t-mixer: #c2621a; --t-patch: #2f8f38; --t-audio: #14919b; --t-page5: #a88200; --t-page6: #1f6be0; --t-page7: #5b4bd1; --t-page8: #9a3fb4; --t-page9: #c23a7d; --t-page10: #8c6239; } }
:root[data-theme="light"] { --t-planner: #c93a33; --t-mixer: #c2621a; --t-patch: #2f8f38; --t-audio: #14919b; --t-page5: #a88200; --t-page6: #1f6be0; --t-page7: #5b4bd1; --t-page8: #9a3fb4; --t-page9: #c23a7d; --t-page10: #8c6239; }
.tool-ico.planner, .page-link.planner .pl-ico, .tab.planner svg, .tool-card.planner .top svg { color: var(--t-planner); }
.tool-ico.planner, .page-link.planner .pl-ico { border-color: color-mix(in srgb, var(--t-planner) 45%, var(--line)); }
.tool-ico.mixer, .page-link.mixer .pl-ico, .tab.mixer svg, .tool-card.mixer .top svg, .soon-page.mixer { color: var(--t-mixer); }
.tool-ico.mixer, .page-link.mixer .pl-ico { border-color: color-mix(in srgb, var(--t-mixer) 45%, var(--line)); }
.tool-ico.patch, .page-link.patch .pl-ico, .tab.patch svg, .tool-card.patch .top svg { color: var(--t-patch); }
.tool-ico.patch, .page-link.patch .pl-ico { border-color: color-mix(in srgb, var(--t-patch) 45%, var(--line)); }
.tool-ico.audio, .page-link.audio .pl-ico, .tab.audio svg, .tool-card.audio .top svg { color: var(--t-audio); }
.tool-ico.audio, .page-link.audio .pl-ico { border-color: color-mix(in srgb, var(--t-audio) 45%, var(--line)); }
.tool-ico.page5, .page-link.page5 .pl-ico, .tab.page5 svg, .tool-card.page5 .top svg { color: var(--t-page5); }
.tool-ico.page5, .page-link.page5 .pl-ico { border-color: color-mix(in srgb, var(--t-page5) 45%, var(--line)); }
.tool-ico.page6, .page-link.page6 .pl-ico, .tab.page6 svg, .tool-card.page6 .top svg { color: var(--t-page6); }
.tool-ico.page6, .page-link.page6 .pl-ico { border-color: color-mix(in srgb, var(--t-page6) 45%, var(--line)); }
.tool-ico.page7, .page-link.page7 .pl-ico, .tab.page7 svg, .tool-card.page7 .top svg { color: var(--t-page7); }
.tool-ico.page7, .page-link.page7 .pl-ico { border-color: color-mix(in srgb, var(--t-page7) 45%, var(--line)); }
.tool-ico.page8, .page-link.page8 .pl-ico, .tab.page8 svg, .tool-card.page8 .top svg { color: var(--t-page8); }
.tool-ico.page8, .page-link.page8 .pl-ico { border-color: color-mix(in srgb, var(--t-page8) 45%, var(--line)); }
.tool-ico.page9, .page-link.page9 .pl-ico, .tab.page9 svg, .tool-card.page9 .top svg { color: var(--t-page9); }
.tool-ico.page9, .page-link.page9 .pl-ico { border-color: color-mix(in srgb, var(--t-page9) 45%, var(--line)); }
.tool-ico.page10, .page-link.page10 .pl-ico, .tab.page10 svg, .tool-card.page10 .top svg { color: var(--t-page10); }
.tool-ico.page10, .page-link.page10 .pl-ico { border-color: color-mix(in srgb, var(--t-page10) 45%, var(--line)); }
.tool-ico:hover, .tool-ico:focus-visible, .page-link:hover .pl-ico, .page-link:focus-visible .pl-ico { border-color: var(--accent); }

/* Project page: centered name and an even 5 × 2 icon grid */
.proj-head.centered { justify-content: center; text-align: center; }
.proj-head.centered .titles { flex: 0 1 auto; }
.proj-head.centered .meta { justify-content: center; }
.page-links {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center; margin-inline: auto; width: 100%; max-width: 760px;
}
.page-link { width: 100%; max-width: 130px; }
@media (max-width: 560px) {
  .page-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding: 22px 12px; }
}

/* One row of ten icons; scrolls sideways when the window is too narrow */
.page-links {
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  max-width: 520px; gap: 12px; padding: 24px 16px; overflow-x: auto;
}
.page-link { max-width: none; }
.pl-ico { width: clamp(56px, 5.6vw, 76px); height: clamp(56px, 5.6vw, 76px); border-radius: 16px; }
.pl-ico svg { width: 55%; height: 55%; }
.pl-name { font-size: 14px; line-height: 1.25; }
@media (max-width: 560px) {
  .page-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px 12px; }
  .pl-ico { width: 56px; height: 56px; border-radius: 14px; }
}

/* Page colors, in order: brown, red, orange, yellow, green, blue, purple */
:root { --t-planner: #b07a4f; --t-mixer: #e5534b; --t-patch: #f0883e; --t-audio: #e8c13a; --t-page5: #57c05f; --t-page9: #4a94f8; --t-page10: #a77be8; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t-planner: #8a5a33; --t-mixer: #c93a33; --t-patch: #c2621a; --t-audio: #a88200; --t-page5: #2f8f38; --t-page9: #1f6be0; --t-page10: #7a45c9; } }
:root[data-theme="light"] { --t-planner: #8a5a33; --t-mixer: #c93a33; --t-patch: #c2621a; --t-audio: #a88200; --t-page5: #2f8f38; --t-page9: #1f6be0; --t-page10: #7a45c9; }

/* A page that runs its own app (Truck Packer) inside the project */
.page.embed-page { gap: 12px; padding-bottom: 16px; }
.embed-frame {
  display: block; width: 100%; height: calc(100vh - 150px); min-height: 640px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
}
.embed-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }

/* Sortable column headers: clearly clickable */
.grid th button { border-radius: 3px; padding: 2px 4px; margin: -2px -4px; }
.grid th button:hover { background: var(--accent-soft); color: var(--accent); }
.grid th button .arrow.both { opacity: .45; }
.grid th button:hover .arrow.both { opacity: .9; }
.grid th button.sort-on { color: var(--accent); }

/* ---------- Projects list: a lighter, airier look (rounded, soft, translucent) ---------- */
#view-list {
  --soft-bg: #f5f5f7; --card: #ffffff; --sep: rgba(0,0,0,.08); --hover: rgba(0,0,0,.035); --field: rgba(118,118,128,.12);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.06);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--soft-bg); min-height: 100vh;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view-list {
  --soft-bg: #000000; --card: #1c1c1e; --sep: rgba(255,255,255,.09); --hover: rgba(255,255,255,.05); --field: rgba(118,118,128,.24);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35); } }
:root[data-theme="dark"] #view-list {
  --soft-bg: #000000; --card: #1c1c1e; --sep: rgba(255,255,255,.09); --hover: rgba(255,255,255,.05); --field: rgba(118,118,128,.24);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35); }

#view-list .topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--soft-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--sep); padding-block: 14px;
}
#view-list .topbar .greet { font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
#view-list > .wrap { max-width: 1280px; margin: 0 auto; padding-block: 20px 40px; }

#view-list .toolbar { gap: 12px; padding-block: 4px 18px; }
#view-list .btn-group { background: none; border: 0; gap: 8px; }
#view-list .btn-group > * + * { border-left: 0; }
#view-list .btn-group .btn, #view-list .btn.solo {
  border-radius: 980px; padding: 8px 16px; font-weight: 500; font-size: 14px;
  background: var(--card); border: 0; box-shadow: 0 0 0 1px var(--sep);
}
#view-list .btn-group .btn:hover, #view-list .btn.solo:hover { background: var(--hover); }
#view-list .btn.primary, #view-list .btn-group .btn.primary { background: var(--accent); color: var(--accent-fg); box-shadow: none; }
#view-list .btn.primary:hover { filter: brightness(1.08); background: var(--accent); }

#view-list .search { border: 0; border-radius: 10px; background: var(--field); padding: 0 12px; max-width: 460px; }
#view-list .search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
#view-list .search input { padding: 9px 0; }
#view-list .kbd { border: 0; background: var(--card); border-radius: 6px; padding: 2px 6px; }
#view-list select.filter { border: 0; border-radius: 980px; padding: 8px 14px; background: var(--card); box-shadow: 0 0 0 1px var(--sep); font-weight: 500; }

#view-list .table-box { border: 0; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; overflow-x: auto; }
#view-list .grid th {
  background: transparent; text-transform: none; letter-spacing: 0;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--muted);
  padding: 12px 14px 10px; border-bottom: 1px solid var(--sep);
}
#view-list .grid td { padding: 10px 14px; border-bottom: 1px solid var(--sep); }
#view-list .grid tbody tr:last-child td { border-bottom: 0; }
#view-list .grid tbody tr { transition: background-color .15s ease; }
#view-list .grid tbody tr:hover { background: var(--hover); }
#view-list .grid td.name a { font-weight: 600; font-size: 15px; }
#view-list .status { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500;
  padding: 2px 8px; border-radius: 980px; background: color-mix(in srgb, currentColor 12%, transparent); margin-left: 10px; }
#view-list .status::before { width: 6px; height: 6px; }
#view-list .tool-ico { border-radius: 8px; box-shadow: none; }
#view-list .notes-input { border-radius: 8px; }
#view-list .notes-input:hover { border-color: transparent; background: var(--hover); }
#view-list .kebab { border-radius: 980px; }
#view-list .kebab:hover { background: var(--hover); }
#view-list .footer { padding-block: 14px; justify-content: center; font-size: 12px; }
#view-list .grid input[type="checkbox"] { border-radius: 4px; }
#view-list .banner { border-radius: 10px; }
#view-list .empty strong { font-size: 19px; font-weight: 600; }
.menu { border-radius: 12px; padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.menu button { border-radius: 7px; }
.modal { border-radius: 16px; }

/* ---------- Same look for the project pages (project icons page and each page) ---------- */
#view-other {
  --soft-bg: #f5f5f7; --card: #ffffff; --sep: rgba(0,0,0,.08); --hover: rgba(0,0,0,.035); --field: rgba(118,118,128,.12);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.06);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--soft-bg); min-height: 100vh;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view-other {
  --soft-bg: #000000; --card: #1c1c1e; --sep: rgba(255,255,255,.09); --hover: rgba(255,255,255,.05); --field: rgba(118,118,128,.24);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35); } }
:root[data-theme="dark"] #view-other {
  --soft-bg: #000000; --card: #1c1c1e; --sep: rgba(255,255,255,.09); --hover: rgba(255,255,255,.05); --field: rgba(118,118,128,.24);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35); }

#view-other .topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--soft-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--sep); padding-block: 14px;
}
#view-other .crumbs { font-size: 14px; }
#view-other .crumbs a:hover { color: var(--accent); }
#view-other .page { max-width: 1280px; margin: 0 auto; }
#view-other .page.embed-page { max-width: none; }

/* Project page: name and the row of page icons */
#view-other .proj-head h1 { font-weight: 700; font-size: 34px; letter-spacing: -.02em; }
#view-other .status { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500;
  padding: 2px 8px; border-radius: 980px; background: color-mix(in srgb, currentColor 12%, transparent); }
#view-other .status::before { width: 6px; height: 6px; }
#view-other .page-links { border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
#view-other .pl-ico { border-radius: 18px; background: var(--soft-bg); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#view-other .page-link:hover .pl-ico { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
#view-other .pl-name { font-weight: 500; }

/* Page tabs: a segmented row of pills */
#view-other .tabs { gap: 6px; }
#view-other .tab { border: 0; border-radius: 980px; padding: 7px 14px; background: var(--card); box-shadow: 0 0 0 1px var(--sep); }
#view-other .tab:hover { background: var(--hover); }
#view-other .tab[aria-current="page"] { background: var(--accent); color: var(--accent-fg); box-shadow: none; }
#view-other .tab[aria-current="page"] svg { color: currentColor; }

/* Table pages */
#view-other .tool-title h1 { font-weight: 700; letter-spacing: -.02em; }
#view-other .table-box { border: 0; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; overflow-x: auto; }
#view-other .grid th { background: transparent; text-transform: none; letter-spacing: 0; font-family: inherit;
  font-size: 12px; font-weight: 500; color: var(--muted); padding: 12px 14px 10px; border-bottom: 1px solid var(--sep); }
#view-other .grid td { border-bottom: 1px solid var(--sep); }
#view-other .grid tbody tr:hover { background: var(--hover); }
#view-other .edit-table td input { border-radius: 6px; }
#view-other .btn.primary { border-radius: 980px !important; padding: 8px 16px; }
#view-other .btn.solo { border-radius: 980px; border: 0; background: var(--card); box-shadow: 0 0 0 1px var(--sep); }

/* Truck Packer's frame */
#view-other .embed-frame { border: 0; border-radius: 14px; box-shadow: var(--shadow); }
#view-other .empty strong { font-size: 19px; font-weight: 600; }

/* ---------- Dark theme, a little lighter (charcoal instead of near-black) ---------- */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #1f2125; --panel: #282b30; --raise: #31353b; --line: #3d424a; } }
:root[data-theme="dark"] { --bg: #1f2125; --panel: #282b30; --raise: #31353b; --line: #3d424a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view-list, :root:not([data-theme="light"]) #view-other {
  --soft-bg: #1f2125; --card: #2b2e33; --sep: rgba(255,255,255,.10); --hover: rgba(255,255,255,.06); --field: rgba(255,255,255,.08); } }
:root[data-theme="dark"] #view-list, :root[data-theme="dark"] #view-other {
  --soft-bg: #1f2125; --card: #2b2e33; --sep: rgba(255,255,255,.10); --hover: rgba(255,255,255,.06); --field: rgba(255,255,255,.08); }

/* ---------- Projects list: use the full width so each project fits on one line ---------- */
#view-list > .wrap { max-width: none; }
#view-list .grid td, #view-list .grid td.name { white-space: nowrap; }
#view-list .grid td.name { width: auto; min-width: 0; }
#view-list .grid td.notes-cell { width: 28%; min-width: 220px; }

/* Truck Packer icon: gold, matching Truck Packer's truck tabs */
:root { --t-page10: #D8C04B; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t-page10: #D8C04B; } }
:root[data-theme="light"], :root[data-theme="dark"] { --t-page10: #D8C04B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-page10: #D8C04B; } }

/* Selected-projects row (Archive / Delete): same space below it as between the toolbar and this row */
#view-list .bulk:not([hidden]) { padding-bottom: 18px; }

/* Patch icon: green (lighter green on dark, deeper green on light) */
:root, :root[data-theme="dark"] { --t-planner: #57c05f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-planner: #57c05f; } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t-planner: #2f8f38; } }
:root[data-theme="light"] { --t-planner: #2f8f38; }

/* Light / dark theme switch at the right of the Vort bar */
.topbar .right { margin-left: auto; }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; border: 0; background: none; color: var(--muted, var(--fg)); cursor: pointer; border-radius: 980px; font: inherit; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .tt-ico { display: inline-flex; width: 17px; height: 17px; opacity: .45; transition: opacity .15s, color .15s; }
.theme-toggle .tt-ico svg { width: 100%; height: 100%; }
.theme-toggle .tt-track { position: relative; width: 38px; height: 22px; border-radius: 980px; background: color-mix(in srgb, var(--fg) 18%, transparent); transition: background .15s; }
.theme-toggle .tt-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .18s ease; }
.theme-toggle[aria-checked="true"] .tt-knob { transform: translateX(16px); }
.theme-toggle[aria-checked="true"] .tt-track { background: var(--accent); }
.theme-toggle[aria-checked="true"] .tt-moon, .theme-toggle[aria-checked="false"] .tt-sun { opacity: 1; color: var(--fg); }
.theme-toggle:hover .tt-track { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .theme-toggle .tt-knob, .theme-toggle .tt-track { transition: none; } }

/* Rack Builder icon: blue */
:root, :root[data-theme="dark"] { --t-mixer: #4a94f8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-mixer: #4a94f8; } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t-mixer: #1f6be0; } }
:root[data-theme="light"] { --t-mixer: #1f6be0; }

/* Sharing */
.share-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 980px; font-size: 11px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.share-badge.synced { color: #2f8f38; background: color-mix(in srgb, #2f8f38 16%, transparent); }
.share-badge.outofsync { color: #b8860b; background: color-mix(in srgb, #e8c13a 22%, transparent); }
.share-badge.pending { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
:root[data-theme="dark"] .share-badge.synced { color: #57c05f; }
:root[data-theme="dark"] .share-badge.outofsync { color: #e8c13a; }
.share-body { display: flex; flex-direction: column; gap: 14px; }
.share-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.share-status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.share-status.synced .dot { background: #3fae49; }
.share-status.outofsync .dot { background: #e0b520; }
.share-status.pending .dot { background: var(--accent); animation: sharepulse 1.2s ease-in-out infinite; }
@keyframes sharepulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .share-status.pending .dot { animation: none; } }
.share-status .muted { color: var(--muted); }
.share-link { display: flex; gap: 8px; }
.share-link .share-url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; }
.share-note { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.share-err { margin: 0; font-size: 13px; color: #d9534f; }
.share-auto { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.share-auto input { margin-top: 3px; width: auto; }

/* Files page: folder icon, text and border in #AB3D2B */
:root { --t-files: #AB3D2B; }
.tool-ico.files, .page-link.files .pl-ico, .tab.files svg, .tool-card.files .top svg { color: var(--t-files); }
.tool-ico.files, .page-link.files .pl-ico { border-color: var(--t-files); }
.tab.files:not([aria-current]) { border-color: var(--t-files); box-shadow: inset 0 0 0 1px var(--t-files); }
.tab.files[aria-current] { background: var(--t-files); border-color: var(--t-files); }
.tab.files[aria-current] svg { color: #fff; }
.files-page .f-search { border: 1px solid var(--line); background: var(--card, var(--panel)); color: var(--fg); }

.files-page { display: flex; flex-direction: column; gap: 12px; }
.f-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.f-left { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.f-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-link:hover { color: var(--t-files); }
.f-linkbox { display: flex; gap: 8px; align-items: center; }
.f-linkin { width: 260px; max-width: 100%; border: 1px solid var(--line); background: var(--card, var(--panel)); color: var(--fg); border-radius: 980px; padding: 8px 14px; }
.f-linkin:focus { outline: none; border-color: var(--t-files); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-files) 30%, transparent); }
@media (max-width: 700px) { .f-linkbox { width: 100%; } .f-linkin { flex: 1; width: auto; } }
.f-left .btn { border-radius: 980px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 6px; }
.f-left .btn svg { width: 17px; height: 17px; }
.f-right { margin-left: auto; }
.f-search { width: 240px; max-width: 100%; border-radius: 980px; padding: 8px 14px; }
.f-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; font-size: 15px; }
.f-crumb { border: 0; background: none; color: var(--muted); font: inherit; padding: 4px 8px; border-radius: 6px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-crumb:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.f-crumb.cur { color: var(--fg); font-weight: 600; cursor: default; background: none; }
.f-crumb.over { outline: 2px dashed var(--t-files); }
.f-sep { color: var(--muted); }
.files-page .f-sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; min-height: 34px; margin: 0; padding: 0; }
.files-page .f-sel.empty { height: 34px; overflow: hidden; flex-wrap: nowrap; }
.files-page .f-hint { display: block; color: var(--muted); font-size: 13px; line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; padding: 0; }
.f-sel .btn { border-radius: 980px; padding: 6px 14px; }
.f-box { position: relative; background: var(--card, var(--panel)); border-radius: 14px; box-shadow: var(--shadow, none); border: 1px solid var(--sep, var(--line)); min-height: 320px; overflow: auto; }
.f-list { outline: none; min-width: 640px; }
.f-row { display: grid; grid-template-columns: 40px minmax(220px, 1fr) 160px 100px 160px 44px; align-items: center; border-bottom: 1px solid var(--sep, var(--line)); font-size: 14px; user-select: none; }
.f-list:has(.c-where) .f-row { grid-template-columns: 40px minmax(200px, 1fr) minmax(120px, 220px) 140px 90px 150px 44px; }
.f-row:last-child { border-bottom: 0; }
.f-row:not(.f-head):hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.f-row.sel { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; }
.f-row.over { outline: 2px dashed var(--t-files); outline-offset: -3px; }
.f-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.f-head { position: sticky; top: 0; background: var(--card, var(--panel)); z-index: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.f-cell { padding: 9px 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-cell.c-check { display: flex; justify-content: center; }
.f-cell.c-check input { width: auto; margin: 0; }
.f-cell.c-kind, .f-cell.c-size, .f-cell.c-date, .f-cell.c-where { color: var(--muted); }
.f-cell.c-size { text-align: right; font-variant-numeric: tabular-nums; }
.f-th { border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
.f-th.on { color: var(--fg); }
.f-cell.c-name { display: flex; align-items: center; gap: 10px; }
.f-name { overflow: hidden; text-overflow: ellipsis; }
.f-row.folder .f-name { font-weight: 500; }
.f-ico { display: inline-flex; width: 22px; height: 22px; flex: none; color: var(--muted); }
.f-ico svg { width: 100%; height: 100%; }
.f-ico.is-folder { color: var(--t-files); }
.f-ico.big { width: 56px; height: 56px; }
.f-act .kebab, .c-act .kebab { opacity: .6; }
.f-row:hover .kebab, .f-row.sel .kebab { opacity: 1; }
.f-empty { padding: 60px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.f-empty strong { color: var(--fg); font-size: 16px; }
.f-drop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--t-files) 12%, var(--card, var(--panel))); border: 2px dashed var(--t-files); border-radius: 14px; pointer-events: none; text-align: center; }
.f-drop[hidden] { display: none; }
.f-drop > div { display: flex; flex-direction: column; gap: 4px; }
.f-drop strong { font-size: 18px; color: var(--t-files); }
.f-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); min-height: 18px; }
.f-status.bad { color: #d9534f; }
.f-tree { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.f-node { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; color: var(--fg); text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.f-node svg { width: 18px; height: 18px; color: var(--t-files); flex: none; }
.f-node:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.f-node.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.f-node:disabled { opacity: .4; cursor: not-allowed; }
.modal.f-preview { width: min(960px, calc(100vw - 32px)); max-width: none; }
.f-pv-body { padding: 0 20px; display: flex; justify-content: center; align-items: center; min-height: 200px; max-height: 70vh; overflow: auto; }
.f-pv-body img, .f-pv-body video { max-width: 100%; max-height: 68vh; border-radius: 8px; }
.f-pv-body iframe { width: 100%; height: 68vh; border: 0; border-radius: 8px; background: #fff; }
.f-pv-body audio { width: 100%; }
.f-pv-body pre { width: 100%; margin: 0; white-space: pre-wrap; font-family: var(--font-mono); font-size: 12px; background: color-mix(in srgb, var(--fg) 5%, transparent); padding: 12px; border-radius: 8px; }
.f-pv-none { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); text-align: center; padding: 30px 0; }
.modal.f-preview .actions { padding: 16px 20px 20px; display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 700px) { .f-right { margin-left: 0; width: 100%; } .f-search { width: 100%; } }

button.share-badge { border: 0; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; line-height: 1.5; }
button.share-badge:hover { filter: brightness(1.15); text-decoration: underline; }
button.share-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Version history */
.hist-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 980px; padding: 4px 12px; font-size: 13px; }
.hist-btn svg, .f-left .btn svg { width: 15px; height: 15px; }
.modal.vh-modal { width: min(760px, calc(100vw - 32px)); max-width: none; }
.vh-body { display: flex; flex-direction: column; gap: 12px; }
.vh-save { display: flex; gap: 8px; }
.vh-save input { flex: 1; min-width: 0; }
.vh-list { display: flex; flex-direction: column; max-height: 56vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.vh-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.vh-row:last-child { border-bottom: 0; }
.vh-row.named { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.vh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vh-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.vh-top .f-ico { width: 18px; height: 18px; }
.vh-sum { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-tag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 980px; background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--muted); }
.vh-tag.named { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.vh-tag.cur { background: color-mix(in srgb, #3fae49 18%, transparent); color: #3fae49; }
.vh-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.vh-acts .btn { border-radius: 980px; padding: 5px 12px; font-size: 13px; }
.vh-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.vh-pv { max-height: 64vh; overflow: auto; font-size: 14px; }
.vh-pv h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 6px; }
.vh-pv ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.vh-meta { margin: 0; color: var(--muted); }

/* Menus opened from inside a window sit above it */
.menu { z-index: 70; }

/* Project page icons: up to 6 across before wrapping, 20% larger */
.page-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; width: fit-content; max-width: min(100%, calc(6 * 132px + 5 * 14px + 40px)); padding: 26px 20px; overflow: visible; }
.page-link { width: 132px; max-width: 132px; flex: none; }
.pl-ico { width: clamp(67px, 6.7vw, 91px); height: clamp(67px, 6.7vw, 91px); border-radius: 20px; }
.pl-name { font-size: 15px; }
@media (max-width: 560px) {
  .page-links { gap: 12px 8px; padding: 18px 10px; }
  .page-link { width: 96px; }
  .pl-ico { width: 67px; height: 67px; border-radius: 16px; }
}

/* Dark theme: the projects list and project pages sit on a drawn gradient, black at the top easing into a dark warm gray */
:root[data-theme="dark"] #view-list, :root[data-theme="dark"] #view-other {
  background: linear-gradient(180deg, #000 0%, #050505 22%, #0f0f0f 45%, #1b1a19 70%, #2a2927 100%) fixed;
}
:root[data-theme="dark"] #view-list .topbar, :root[data-theme="dark"] #view-other .topbar {
  background: rgba(0, 0, 0, .45); border-bottom-color: rgba(255, 255, 255, .08);
}

/* Projects list: 10px more room at the window edges (the top bar matches so the theme switch stays lined up with the menu) */
#view-list > .wrap, #view-list > .topbar { padding-left: max(26px, env(safe-area-inset-left, 0px)); padding-right: max(26px, env(safe-area-inset-right, 0px)); }

/* Project page icons: border the same color as the label text */
.page-links .page-link .pl-ico, .page-links .page-link.files .pl-ico, .page-links .page-link.page10 .pl-ico, .page-links .page-link.planner .pl-ico, .page-links .page-link.mixer .pl-ico { border-color: var(--fg); }
.page-links .page-link:hover .pl-ico, .page-links .page-link:focus-visible .pl-ico { border-color: var(--accent); }

/* Projects list "Open in" icons too: border matches the text; on hover (both pages) the border takes the icon's own color */
#view-list .openin .tool-ico, #view-list .openin .tool-ico.files, #view-list .openin .tool-ico.planner, #view-list .openin .tool-ico.mixer, #view-list .openin .tool-ico.page10 { border-color: var(--fg); }
#view-list .openin .tool-ico:hover, #view-list .openin .tool-ico:focus-visible, .page-links .page-link:hover .pl-ico, .page-links .page-link:focus-visible .pl-ico { border-color: currentColor; }

/* Thinner icon borders (hairline on high-resolution screens) */
.page-links .pl-ico, #view-list .openin .tool-ico { border-width: 0.5px; }

/* Icon borders: same color as the line under the top bar (hover still turns them the icon color) */
#view-list, #view-other { --hline: var(--sep); }
:root[data-theme="dark"] #view-list, :root[data-theme="dark"] #view-other { --hline: rgba(255, 255, 255, .08); }
.page-links .page-link .pl-ico, .page-links .page-link.files .pl-ico, .page-links .page-link.page10 .pl-ico, .page-links .page-link.planner .pl-ico, .page-links .page-link.mixer .pl-ico,
#view-list .openin .tool-ico, #view-list .openin .tool-ico.files, #view-list .openin .tool-ico.planner, #view-list .openin .tool-ico.mixer, #view-list .openin .tool-ico.page10 { border-color: var(--hline); }
#view-list .openin .tool-ico:hover, #view-list .openin .tool-ico:focus-visible, .page-links .page-link:hover .pl-ico, .page-links .page-link:focus-visible .pl-ico { border-color: currentColor; }

/* Comms page (spreadsheet): headset icon #911C84 */
:root { --t-comms: #911C84; }
.tool-ico.comms, .page-link.comms .pl-ico, .tab.comms svg, .tool-card.comms .top svg { color: var(--t-comms); }
.page-links .page-link.comms .pl-ico, #view-list .openin .tool-ico.comms { border-color: var(--hline); }
.page-links .page-link.comms:hover .pl-ico, #view-list .openin .tool-ico.comms:hover { border-color: currentColor; }

.ss-page { display: flex; flex-direction: column; gap: 10px; }
.ss-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-addr { min-width: 64px; padding: 6px 10px; border-radius: 8px; background: var(--card, var(--panel)); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; text-align: center; }
.ss-fxlabel { color: var(--muted); font-style: italic; font-family: Georgia, serif; }
.ss-fx { flex: 1; min-width: 200px; font-family: var(--font-mono); font-size: 13px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card, var(--panel)); color: var(--fg); }
.ss-tools { display: flex; gap: 6px; }
.ss-tools .btn { border-radius: 980px; padding: 6px 13px; font-size: 13px; }
.ss-scroll { position: relative; overflow: auto; height: calc(100vh - 290px); min-height: 360px; border-radius: 12px; border: 1px solid var(--line); background: var(--card, var(--panel)); outline: none; box-shadow: var(--shadow, none); }
.ss-scroll:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.ss-grid { display: grid; width: max-content; font-size: 13px; user-select: none; }
.ss-grid > div { height: 28px; box-sizing: border-box; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 7px; line-height: 27px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.ss-corner, .ss-ch, .ss-rh { background: color-mix(in srgb, var(--fg) 6%, var(--card, var(--panel))); color: var(--muted) !important; font-size: 12px; text-align: center; position: sticky; z-index: 2; }
.ss-corner { left: 0; top: 0; z-index: 3; cursor: pointer; }
.ss-ch { top: 0; position: sticky; cursor: pointer; }
.ss-rh { left: 0; cursor: pointer; }
.ss-ch.on, .ss-rh.on { background: color-mix(in srgb, var(--accent) 22%, var(--card, var(--panel))); color: var(--fg) !important; }
.ss-rz { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 4; }
.ss-rz:hover { background: var(--accent); opacity: .5; }
.ss-c { cursor: cell; }
.ss-c.n { text-align: right; font-variant-numeric: tabular-nums; }
.ss-c.b { font-weight: 700; }
.ss-c.e { color: #d9534f !important; }
.ss-c.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ss-c.cur { box-shadow: inset 0 0 0 2px var(--accent); }
.ss-editor { position: absolute; display: none; z-index: 5; margin: 0; padding: 0 7px; line-height: 26px; font: inherit; font-size: 13px; border: 2px solid var(--accent); border-radius: 0; background: var(--card, var(--panel)); color: var(--fg); resize: none; outline: none; box-shadow: 0 4px 14px rgba(0,0,0,.25); overflow: hidden; white-space: pre; }
.ss-editor.on { display: block; }
.ss-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ss-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ss-tab { border: 1px solid var(--line); background: var(--card, var(--panel)); color: var(--muted); font: inherit; font-size: 13px; padding: 5px 14px; border-radius: 0 0 8px 8px; border-top-width: 2px; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tab:hover { color: var(--fg); }
.ss-tab[aria-selected="true"] { color: var(--fg); font-weight: 600; border-top-color: var(--t-comms); }
.ss-tab.add { padding: 5px 11px; font-weight: 600; }
.ss-tab.over { outline: 2px dashed var(--accent); }
.ss-tabname { font-size: 13px; padding: 5px 10px; width: 160px; border-radius: 0 0 8px 8px; }
.ss-saved { font-size: 13px; color: var(--muted); white-space: nowrap; }

.ss-page { min-width: 0; width: 100%; max-width: 100%; }
.ss-scroll { min-width: 0; max-width: 100%; width: 100%; }
.page { grid-template-columns: minmax(0, 1fr); }

/* Comms: the spreadsheet uses the full window width, about 25px from each edge */
#view-other .page.sheet-page { max-width: none; padding-left: max(25px, env(safe-area-inset-left, 0px)); padding-right: max(25px, env(safe-area-inset-right, 0px)); }
.ss-scroll.drop { box-shadow: 0 0 0 2px var(--t-comms); }
.ss-saved.bad { color: #d9534f; white-space: normal; text-align: right; }

/* Comms toolbar (Google Sheets layout) */
.ss-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 4px 6px; border-radius: 980px; background: color-mix(in srgb, var(--fg) 7%, var(--card, var(--panel))); border: 1px solid var(--line); }
.ss-tb { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.ss-tb:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.ss-tb.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--fg); }
.ss-tb:disabled { opacity: .35; cursor: default; background: transparent; }
.ss-tb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ss-tb svg { flex: none; }
.ss-sep { width: 1px; height: 20px; background: var(--line); margin: 0 5px; }
.ss-grow { flex: 1; }
.ss-tsel { height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--fg); font: inherit; font-size: 13px; padding: 0 6px; cursor: pointer; }
.ss-tsel:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.ss-tsel option { background: var(--panel); color: var(--fg); }
.ss-size { width: 36px; height: 26px; text-align: center; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--card, var(--panel)); color: var(--fg); font-size: 13px; }
.ss-a { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 600; }
.ss-bar-col { display: block; width: 16px; height: 3px; border-radius: 1px; margin-top: 2px; background: currentColor; font-style: normal; }
.ss-tb .fillbar { position: absolute; }
.ss-tb[aria-label="Fill color"] { position: relative; flex-direction: column; }
.ss-tb[aria-label="Fill color"] .ss-bar-col { position: static; margin-top: -2px; box-shadow: 0 0 0 .5px var(--line); }
.ss-act { border-radius: 980px; padding: 5px 12px; font-size: 13px; margin-left: 4px; }
.ss-pop { position: fixed; z-index: 75; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.3); padding: 6px; min-width: 160px; display: flex; flex-direction: column; }
.ss-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.ss-pop-h { font-size: 12px; color: var(--muted); padding: 4px 6px; }
.ss-mi { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 14px; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.ss-mi small { margin-left: auto; padding-left: 18px; color: var(--muted); font-size: 12px; }
.ss-mi:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ss-mi.on::before { content: "\2713"; margin-right: -4px; }
.ss-iconrow { display: flex; gap: 2px; }
.ss-swatches { display: grid; grid-template-columns: repeat(10, 18px); gap: 3px; padding: 6px; }
.ss-sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent); padding: 0; cursor: pointer; }
.ss-sw:hover { transform: scale(1.15); }
.ss-reset { margin: 0 6px 2px; border: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 13px; padding: 5px; border-radius: 6px; cursor: pointer; }
.ss-custom { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.ss-custom input { width: 26px; height: 22px; padding: 0; border: 0; background: none; }
.ss-scroll.painting .ss-c { cursor: copy; }

/* Cells: formatting-aware layout */
.ss-grid > div { height: auto; min-height: calc(28px * var(--z, 1)); line-height: 1.3; font-size: calc(13px * var(--z, 1)); }
.ss-c { display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 calc(7px * var(--z, 1)) calc(5px * var(--z, 1)) !important; }
.ss-c > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-c.n { justify-content: flex-end; }
.ss-c.wrap > span { white-space: pre-wrap; word-break: break-word; text-overflow: clip; }
.ss-c.clip > span { text-overflow: clip; }
.ss-c.wrap { padding-top: calc(4px * var(--z, 1)) !important; }
.ss-ch, .ss-rh, .ss-corner { display: flex; align-items: center; justify-content: center; }
.ss-ch { position: sticky; }

/* Comms: links */
.ss-link { color: #6ea8ff; text-decoration: underline; cursor: pointer; }
:root[data-theme="light"] .ss-link { color: #1155cc; }
.ss-linkcard { position: absolute; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 13px; max-width: 420px; }
.ss-linkcard[hidden] { display: none; }
.ss-linkcard a { color: #6ea8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="light"] .ss-linkcard a { color: #1155cc; }
.ss-linkcard .ss-tb { height: 26px; font-size: 12px; }
.ss-lc-ico { display: inline-flex; color: var(--muted); }

/* Comms: colored dropdown chips */
.ss-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 6px 1px 10px; border-radius: 999px; font-size: .92em; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ss-chip.empty { padding: 1px 4px; background: transparent; color: var(--muted); }
.ss-chip.bad { box-shadow: inset 0 0 0 1.5px #d9534f; }
.ss-chev { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; flex: none; }
.ss-c:has(.ss-chip) { align-items: center; }
.ss-c > .ss-chip { margin-bottom: 0; }
.ss-ddpop { min-width: 200px; max-width: 320px; padding: 6px; gap: 4px; }
.ss-ddq { width: 100%; font-size: 13px; padding: 6px 8px; }
.ss-ddlist { display: flex; flex-direction: column; max-height: 260px; overflow: auto; }
.ss-ddopt { display: flex; align-items: center; border: 0; background: none; padding: 4px 6px; border-radius: 6px; cursor: pointer; text-align: left; }
.ss-ddopt.act, .ss-ddopt:hover { background: color-mix(in srgb, var(--fg) 9%, transparent); }
.ss-ddopt.on::after { content: "\2713"; margin-left: auto; padding-left: 10px; color: var(--fg); }
.ss-ddopt .ss-chip { cursor: pointer; }
.ss-ddnone { padding: 8px; color: var(--muted); font-size: 13px; }
.ss-ddfoot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 4px; }
.ss-ddfoot .ss-tb { font-size: 12px; height: 26px; }
.modal.ss-ddmodal { width: min(460px, calc(100vw - 32px)); }
.ss-ddrows { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.ss-ddrow { display: flex; align-items: center; gap: 8px; }
.ss-ddrow input { flex: 1; min-width: 0; }
.ss-ddsw { width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); cursor: pointer; flex: none; padding: 0; }
.ss-grip { color: var(--muted); width: 12px; text-align: center; }

/* Comms: print (only the sheet prints) and the off-screen layout used for PDFs */
.ss-print { display: none; }
.ss-ptitle { font: 600 16px/1.3 Barlow, Arial, sans-serif; margin: 0 0 10px; color: #222; }
.ss-ptable, .ss-pdfwrap table { border-collapse: collapse; font: 13px/1.3 Barlow, Arial, sans-serif; color: #222; background: #fff; table-layout: fixed; }
.ss-ptable td { border: 1px solid #c9ccd1; padding: 4px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: #222; }
.ss-ptable td.n { text-align: right; } .ss-ptable td.b { font-weight: 700; } .ss-ptable td.w { white-space: pre-wrap; }
.ss-ptable .ss-chev { display: none; } .ss-ptable .ss-link { color: #1155cc; }
.ss-pdfwrap { position: fixed; left: -100000px; top: 0; background: #fff; }
@media print {
  body.ss-printing > *:not(.ss-print) { display: none !important; }
  body.ss-printing .ss-print { display: block; padding: 0; background: #fff; }
  body.ss-printing { background: #fff !important; }
  @page { size: landscape; margin: 12mm; }
}
/* Sheet tabs: one row that scrolls sideways, with + and the all-sheets list always at the left */
.ss-tabs { flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: thin; padding-bottom: 2px; }
.ss-tab { flex: none; }
.ss-foot { min-width: 0; }
.ss-scroll { height: auto; }
.ss-pop { overflow: auto; }
.ss-toolbar { border-radius: 8px; }
.ss-tabbtns { display: flex; gap: 4px; flex: none; }
.ss-tabs { position: relative; }
/* Row height handles on the row numbers */
.ss-rh { position: sticky; }
.ss-rzr { position: absolute; left: 0; right: 0; bottom: -3px; height: 7px; cursor: row-resize; z-index: 4; }
.ss-rzr:hover { background: var(--accent); opacity: .5; }
.ss-grid > div { min-height: 0; }
.ss-c { overflow: hidden; }
.ss-tab.multi { color: var(--fg); background: color-mix(in srgb, var(--t-comms) 22%, var(--card, var(--panel))); border-top-color: color-mix(in srgb, var(--t-comms) 60%, transparent); }
/* Borders menu (Google Sheets layout) */
.ss-bpop { padding: 10px; }
.ss-brow { display: flex; align-items: stretch; gap: 10px; }
.ss-bgrid { display: grid; grid-template-columns: repeat(5, 36px); gap: 6px; }
.ss-bbtn { width: 36px; height: 36px; min-width: 0; padding: 0; }
.ss-bdiv { width: 1px; background: var(--line); }
.ss-bcol { display: flex; flex-direction: column; justify-content: space-around; gap: 6px; }
.ss-bside { height: 36px; gap: 3px; }
.ss-pen { display: inline-flex; flex-direction: column; align-items: center; }
.ss-pen .ss-bar-col { width: 20px; height: 4px; margin-top: 1px; }
.ss-bsub { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.ss-bstyles { display: flex; flex-direction: column; }
.ss-sw.on { box-shadow: 0 0 0 2px var(--accent); }
/* Sheet tab color stripe */
.ss-tab.striped { box-shadow: inset 0 -4px 0 var(--stripe); padding-bottom: 7px; }
.ss-tab.striped[aria-selected="true"] { box-shadow: inset 0 -4px 0 var(--stripe); background: color-mix(in srgb, var(--stripe) 14%, var(--card, var(--panel))); }
/* Text overflowing into empty neighbor cells */
.ss-c.ovf { overflow: visible; position: relative; z-index: 1; }
.ss-c.ovf > span { max-width: none; width: var(--ovw); flex: none; }
.ss-c.ovf.sel, .ss-c.ovf.cur { z-index: 2; }
.ss-run { white-space: inherit; }
/* Imported-sheet fidelity: hidden gridlines, frozen panes, notes, shapes and pictures */
.ss-grid { position: relative; }
.ss-ch, .ss-rh { z-index: 6; }
.ss-corner { z-index: 9; }
.ss-grid.nogrid > .ss-c { border-right-color: transparent; border-bottom-color: transparent; }
.ss-grid.xl > .ss-c { padding-bottom: calc(3px * var(--z, 1)) !important; }
.ss-grid.xl > .ss-c.wrap { padding-top: calc(2px * var(--z, 1)) !important; }
.ss-c.fz { background-color: var(--card, var(--panel)); }
.ss-c.fz.sel { background-color: color-mix(in srgb, var(--accent) 14%, var(--card, var(--panel))); }
.ss-c.fzb { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--fg) 30%, transparent); }
.ss-c.fzr { box-shadow: inset -2px 0 0 color-mix(in srgb, var(--fg) 30%, transparent); }
.ss-c.fzb.fzr { box-shadow: inset -2px -2px 0 color-mix(in srgb, var(--fg) 30%, transparent); }
.ss-c.fz.cur { box-shadow: inset 0 0 0 2px var(--accent); }
.ss-ch.hid-after::after, .ss-rh.hid-after::after { content: ""; position: absolute; background: var(--accent); opacity: .6; }
.ss-ch.hid-after::after { right: 0; top: 4px; bottom: 4px; width: 3px; }
.ss-rh.hid-after::after { bottom: 0; left: 4px; right: 4px; height: 3px; }
.ss-c.note { position: relative; }
.ss-c.note::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #f6b026 transparent transparent; }
.ss-shape { position: absolute; z-index: 2; box-sizing: border-box; cursor: move; transform-origin: center center; color: var(--fg); padding: 0 !important; border: 0 !important; height: auto; min-height: 0 !important; line-height: 1.25; overflow: visible !important; white-space: normal !important; }
.ss-shape-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ss-shape-img { position: absolute; inset: 0; overflow: hidden; }
.ss-shape-img img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.ss-shape-t { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; pointer-events: none; color: var(--fg); font-size: calc(13px * var(--z, 1)); }
.ss-shape.on { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Waiting imports and the formatting-check dialog */
.ss-reqs { display: flex; flex-direction: column; gap: 6px; }
.ss-req { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, var(--panel)); font-size: 13px; }
.ss-req > span:nth-child(2) { flex: 1; min-width: 0; }
.ss-req-acts { display: flex; gap: 6px; flex: none; }
.ss-req-acts .btn { padding: 4px 10px; font-size: 12px; }
.ss-req-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a526; flex: none; animation: ssPulse 1.4s ease-in-out infinite; }
.ss-req-dot.ok { background: #3ba55c; animation: none; }
.ss-req-dot.bad { background: #d9534f; animation: none; }
@keyframes ssPulse { 50% { opacity: .35; } }
.ss-gaps { margin: 6px 0 14px 18px; padding: 0; font-size: 14px; line-height: 1.5; }
.ss-gaps .muted { color: var(--muted); }
.ss-gap-file { margin: 0 0 4px; font-weight: 600; }
/* Every project page uses the full width with the same 25px side padding, so the page buttons stay put when switching pages */
#view-other .page, #view-other .page.embed-page, #view-other .page.sheet-page { max-width: none; margin: 0; padding-left: max(25px, env(safe-area-inset-left, 0px)); padding-right: max(25px, env(safe-area-inset-right, 0px)); }
/* Selection actions row: always takes its space so the list stays put */
#view-list .bulk { height: 37px; padding-bottom: 18px; box-sizing: content-box; }
#view-list .bulk.none { visibility: hidden; }
/* Page names are read by screen readers but not shown (the selected page button already shows it) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Comms menu bar (File, Edit, View …) above the toolbar, like Google Sheets */
.ss-menubar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: -4px; }
.ss-mbi { appearance: none; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 15px; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.ss-mbi:hover, .ss-mbi.open, .ss-mbi:focus-visible { background: color-mix(in srgb, var(--fg) 10%, transparent); outline: none; }
.ss-mpop { position: fixed; z-index: 1000; min-width: 240px; max-width: 460px; overflow: auto; padding: 6px 0; border-radius: 8px; background: var(--card, var(--panel)); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.ss-mrow { appearance: none; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; padding: 6px 16px 6px 10px; cursor: pointer; }
.ss-mrow.hot, .ss-mrow:hover, .ss-mrow:focus-visible { background: color-mix(in srgb, var(--fg) 9%, transparent); outline: none; }
.ss-mrow.off { opacity: .45; cursor: default; }
.ss-mrow.off:hover { background: transparent; }
.ss-mck { text-align: center; font-weight: 700; color: var(--accent); }
.ss-mlb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-mkb { color: var(--muted); font-size: 12px; padding-left: 18px; white-space: nowrap; }
.ss-msep { height: 1px; margin: 6px 0; background: var(--line); }
.ss-msearch-w { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 32px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 7%, transparent); margin-right: 6px; cursor: text; flex: none; }
.ss-msearch-i { display: inline-flex; color: var(--muted); }
.ss-msearch { width: 92px; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; outline: none; padding: 0; }
.ss-msearch:focus { width: 180px; }
.ss-msearch::-webkit-search-cancel-button { display: none; }
.ss-shape-rz { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px; background: var(--accent); border: 2px solid var(--card, #fff); cursor: nwse-resize; z-index: 3; }
.ss-chk { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; cursor: pointer; }
.ss-cf-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; max-height: 220px; overflow: auto; }
.ss-cf-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.ss-cf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.ss-cf-txt .muted { color: var(--muted); }
.ss-cf-sw { width: 44px; height: 26px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 1px solid var(--line); flex: none; }
.ss-cf-h { font-size: 15px; margin: 14px 0 6px; }
.ss-cf-style { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 8px 0; font-size: 14px; }
.ss-cf-style label { display: inline-flex; align-items: center; gap: 6px; }
.ss-cf-style input[type=color], .ss-cf-style + * input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; }
.ss-alt-pre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ss-alt-sw { display: inline-flex; flex-direction: column; width: 44px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; padding: 0; cursor: pointer; background: none; }
.ss-alt-sw i { display: block; height: 9px; }
.ss-keys { width: 100%; border-collapse: collapse; font-size: 14px; }
.ss-keys td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.ss-keys td:last-child { text-align: right; color: var(--muted); }
.ss-keys kbd, .ss-keys code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.ss-chip.ss-cbx { background: transparent !important; padding: 0; color: var(--muted); cursor: pointer; }
.ss-chip.ss-cbx.on { color: var(--accent); }
.ss-c:has(.ss-cbx) { justify-content: center; align-items: center; }
/* The menu bar sits on the toolbar's background, as one block */
.ss-menubar { background: color-mix(in srgb, var(--fg) 7%, var(--card, var(--panel))); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; padding: 4px 6px 0; margin-bottom: -10px; gap: 0; }
.ss-menubar + .ss-toolbar { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.ss-mbi { font-size: 14px; padding: 4px 9px; }
.f-nav { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.f-up { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; }
.f-up:disabled { opacity: .4; cursor: default; }
/* Import / Export on the menu row: always show their button background */
.ss-menubar { align-items: center; }
.ss-menubar .ss-grow { flex: 1; }
.ss-menubar .ss-act { background: color-mix(in srgb, var(--fg) 12%, var(--card, var(--panel))); border: 1px solid var(--line); color: var(--fg); padding: 4px 14px; margin: 0 0 0 6px; }
.ss-menubar .ss-act:hover { background: color-mix(in srgb, var(--fg) 20%, var(--card, var(--panel))); }
/* Page buttons in the top bar (Patch, Rack Builder, Truck Packer, Files, Comms): icons only */
#view-other .topbar .top-tabs { flex-wrap: nowrap; gap: 6px; margin-left: 18px; align-items: center; }
#view-other .topbar .tab { padding: 6px 14px; }
#view-other .topbar .tab.ico { padding: 6px 10px; }
#view-other .topbar .tab.ico svg { width: 24px; height: 24px; }
/* Centered in the top bar so the buttons stay in the same place on every page */
@media (min-width: 900px) { #view-other .topbar .top-tabs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; } }
/* Pictures placed in a cell fit inside it */
.ss-c:has(> .ss-cimg) { justify-content: center; align-items: center; padding: 2px !important; }
.ss-cimg { display: block; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; pointer-events: none; user-select: none; }
.ss-c:has(> .ss-cimg) { position: relative; }
.ss-cimg { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); max-width: none; max-height: none; }
/* Files: sections and folder colors */
.f-secbox { border-bottom: 1px solid var(--sep, var(--line)); }
.f-secbox.over { outline: 2px dashed var(--t-files); outline-offset: -3px; }
.f-secbox.tinted { background: color-mix(in srgb, var(--sec) 12%, transparent); }
.f-secbox.tinted .f-sec { background: color-mix(in srgb, var(--sec) 26%, var(--card, var(--panel))); }
.f-secbox .f-row:last-child { border-bottom: 0; }
.f-sec { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; font-size: 14px; background: color-mix(in srgb, var(--fg) 5%, var(--card, var(--panel))); border-bottom: 1px solid var(--sep, var(--line)); user-select: none; }
.f-sec-name { font-weight: 600; }
.f-sec-n { color: var(--muted); font-size: 12.5px; }
.f-sec-grow { flex: 1; }
.f-sec-tog { appearance: none; border: 0; background: transparent; color: var(--muted); display: inline-flex; padding: 2px; border-radius: 4px; cursor: pointer; transition: transform .15s; }
.f-sec-tog.shut { transform: rotate(-90deg); }
.f-secbox.shut .f-sec { border-bottom: 0; }
.f-secph { display: none; padding: 12px 16px; color: var(--muted); font-size: 13px; text-align: center; }
.f-secph.show, .f-list.dragging .f-secph { display: block; }
.f-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.f-color { appearance: none; width: 42px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; padding: 6px; }
.f-color svg { width: 26px; height: 26px; }
.f-color.on, .f-swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-swatch { appearance: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.f-custom { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.f-custom input[type=color] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
.f-warn { color: #d9534f; font-size: 13px; margin: 6px 0 0; }
/* Sections as separate panes, 10px apart */
.f-list.sectioned { display: flex; flex-direction: column; gap: 20px; padding: 0 10px 10px; }
.f-list.sectioned > .f-head { margin: 0 -10px; }
.f-list.sectioned .f-secbox { border: 1px solid var(--sep, var(--line)); border-radius: 10px; overflow: hidden; background: var(--card, var(--panel)); }
.f-list.sectioned .f-secbox.tinted { background: color-mix(in srgb, var(--sec) 12%, var(--card, var(--panel))); }
.f-list.sectioned .f-secbox.loose.none { border-style: dashed; background: transparent; }
.f-list.sectioned .f-secbox.loose.none:not(.over) { display: none; }
.f-list.dragging .f-secbox.loose.none { display: block !important; }
.f-sec-name { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 0; cursor: default; }
.f-pane-nav { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
.f-pane-up { appearance: none; border: 1px solid var(--line); background: var(--card, var(--panel)); color: var(--fg); width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-left: 4px; }
.f-pane-crumb { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; padding: 0; cursor: pointer; }
.f-pane-crumb:hover { color: var(--accent); }
.f-pane-crumb.cur { color: var(--fg); font-weight: 500; cursor: default; }
.f-secdrop { display: none; margin: 6px 10px 10px; padding: 10px; border: 2px dashed color-mix(in srgb, var(--t-files) 60%, transparent); border-radius: 8px; text-align: center; font-size: 13px; color: var(--muted); }
.f-list.dragging .f-secdrop { display: block; }
.f-secbox.over > .f-secdrop { border-color: var(--t-files); color: var(--fg); background: color-mix(in srgb, var(--t-files) 12%, transparent); }
.f-list.dragging .f-sec { outline: 1px dashed color-mix(in srgb, var(--t-files) 50%, transparent); outline-offset: -3px; }
/* Folder tree */
.f-cell.c-name { gap: 6px; }
.f-tw, .f-tw-sp { flex: none; width: 20px; height: 20px; }
.f-tw { appearance: none; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 4px; cursor: pointer; transition: transform .12s; }
.f-tw:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.f-tw.open { transform: rotate(90deg); }
.f-secdrop { display: none !important; }
.f-list.dragging .f-sec { outline: 2px dashed color-mix(in srgb, var(--t-files) 55%, transparent); outline-offset: -3px; position: relative; }
.f-list.dragging .f-sec::after { content: attr(data-drop-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--fg); background: color-mix(in srgb, var(--t-files) 18%, var(--card, var(--panel))); pointer-events: none; border-radius: inherit; }
.f-secbox.over > .f-sec::after { background: color-mix(in srgb, var(--t-files) 40%, var(--card, var(--panel))); }
.f-sec.plain { background: transparent; font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.f-sec.plain .f-sec-name { font-weight: 500; color: var(--muted); }
.f-hex { width: 96px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card, var(--panel)); color: var(--fg); font: inherit; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.f-hex.bad { border-color: #d9534f; }
/* Line breaks typed with Alt/Option + Enter show as separate lines */
.ss-c > span { white-space: pre; }
.ss-editor { white-space: pre-wrap; }
/* Text that runs into empty neighbouring cells (and rotated text) must not block clicks on those cells */
.ss-c.ovf > span, .ss-c > span[style*="rotate"], .ss-c > span[style*="writing-mode"] { pointer-events: none; }
.ss-c.ovf > span a { pointer-events: none; }
/* All Projects menu: room for the text and its arrow */
#view-list select.filter { -webkit-appearance: none; appearance: none; min-width: 160px; padding: 8px 40px 8px 16px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a0aa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; }
/* Page scale slider (menu row) */
.ss-scale-w { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-right: 6px; }
.ss-scale { width: 130px; accent-color: var(--accent); cursor: pointer; }
.ss-scale-v { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }

/* Rich-text cell editor (mixed sizes, colors and styles within one cell) */
.ss-editor { line-height: 1.35; padding: 3px 7px; min-height: 0; white-space: pre-wrap; word-break: break-word; cursor: text; box-sizing: border-box; }
.ss-editor:focus { outline: none; }

/* Comms: half the space above the File / Edit menu bar */
main.page.sheet-page { padding-top: 10px; }
/* Comms: 10px below the sheet tabs, */
main.page.sheet-page { padding-bottom: 10px; }

/* Autofill: the fill handle at the selection's corner and the dashed preview while dragging */
.ss-fillh { position: absolute; z-index: 6; width: 8px; height: 8px; box-sizing: border-box; background: var(--accent); border: 1.5px solid var(--card, var(--panel)); border-radius: 1px; cursor: crosshair; }
.ss-fillh::before { content: ""; position: absolute; inset: -5px; }
.ss-fillbox { position: absolute; z-index: 5; pointer-events: none; border: 1.5px dashed var(--accent); box-sizing: border-box; }

/* Move cells: the selection's edge shows a hand; dragging shows where the cells will land */
.ss-scroll.ss-movable, .ss-scroll.ss-movable .ss-c { cursor: grab; }
.ss-scroll.ss-moving, .ss-scroll.ss-moving * { cursor: grabbing !important; }

/* Insert link: pick a tab in this workbook */
.ss-lk-tabs { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; padding: 2px; }
.ss-lk-tab { border: 1px solid var(--line); background: var(--raise); color: var(--fg); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.ss-lk-tab:hover { border-color: var(--accent); }
.ss-lk-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ss-lk-cell { margin-top: 6px; max-width: 200px; }
.ss-lk-cell:disabled { opacity: .5; }

/* Page colors: Files is yellow, Truck Packer is red */
:root, :root[data-theme="light"], :root[data-theme="dark"] { --t-files: #D8C04B; --t-page10: #AB3D2B; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t-files: #D8C04B; --t-page10: #AB3D2B; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-files: #D8C04B; --t-page10: #AB3D2B; } }

/* Links on part of a cell's text */
.ss-lk-label { padding: 8px 10px; border-radius: 6px; background: var(--raise); font-size: 14px; white-space: pre-wrap; word-break: break-word; max-height: 90px; overflow: auto; }
.ss-lc-hint { font-size: 12px; color: var(--muted); margin-left: 4px; }
.ss-editor [data-run*='"link"'] { cursor: text; }

/* The current page's button in the top bar is filled with that page's own color, with an icon that stays readable on it */
#view-other .top-tabs .tab.ico.planner { --pc: var(--t-planner); --pfg: #0e2a12; }
#view-other .top-tabs .tab.ico.mixer { --pc: var(--t-mixer); --pfg: #ffffff; }
#view-other .top-tabs .tab.ico.page10 { --pc: var(--t-page10); --pfg: #ffffff; }
#view-other .top-tabs .tab.ico.files { --pc: var(--t-files); --pfg: #2b2306; }
#view-other .top-tabs .tab.ico.comms { --pc: var(--t-comms); --pfg: #ffffff; }
#view-other .top-tabs .tab.ico[aria-current="page"] { background: var(--pc, var(--accent)); border-color: var(--pc, var(--accent)); box-shadow: none; }
#view-other .top-tabs .tab.ico[aria-current="page"] svg { color: var(--pfg, #fff) !important; }
:root[data-theme="light"] #view-other .top-tabs .tab.ico.planner { --pfg: #ffffff; }

/* Cut cells: a moving dashed outline until they are pasted */
.ss-cutbox { position: absolute; z-index: 5; pointer-events: none; box-sizing: border-box;
  background: linear-gradient(90deg, var(--accent) 50%, transparent 0) repeat-x top / 10px 2px, linear-gradient(90deg, var(--accent) 50%, transparent 0) repeat-x bottom / 10px 2px,
    linear-gradient(0deg, var(--accent) 50%, transparent 0) repeat-y left / 2px 10px, linear-gradient(0deg, var(--accent) 50%, transparent 0) repeat-y right / 2px 10px;
  animation: ss-ants .6s linear infinite; }
@keyframes ss-ants { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } }
@media (prefers-reduced-motion: reduce) { .ss-cutbox { animation: none; } }

/* Selection highlight: a tinted box with an outline over the selected cells */
.ss-sellayer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; }
.ss-selbox { position: absolute; box-sizing: border-box; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid var(--accent); }
.ss-grid > .ss-c.sel:not(.fz) { background-color: transparent; }

/* Sheet tab bar: scroll arrows at the right end */
.ss-tabarrows { display: flex; align-items: center; gap: 2px; flex: none; padding-left: 6px; border-left: 1px solid var(--line); }
.ss-tabarrow { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--fg); cursor: pointer; }
.ss-tabarrow:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.ss-tabarrow:disabled { color: var(--muted); opacity: .45; cursor: default; }
.ss-tabarrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Protection: notice when a change is blocked, the manage window, and the lock on protected tabs */
.ss-page { position: relative; }
.ss-protip { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 10px;
  background: var(--fg); color: var(--bg); font-size: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.35); max-width: min(560px, calc(100% - 32px)); }
.ss-protip-ico { display: inline-flex; }
.ss-protip-btn { border: 0; border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: color-mix(in srgb, var(--bg) 18%, transparent); color: inherit; }
.ss-protip-btn:hover { background: color-mix(in srgb, var(--bg) 30%, transparent); }
.ss-prot { display: grid; gap: 14px; min-width: min(520px, 86vw); }
.ss-prot-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; }
.ss-prot-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ss-prot-row { display: flex; align-items: center; gap: 12px; }
.ss-prot-ico { display: inline-flex; color: var(--accent); }
.ss-prot-txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ss-prot-txt span { font-size: 13px; color: var(--muted); }
.ss-prot-sub { display: grid; gap: 8px; } .ss-prot-sub > label { font-size: 13px; color: var(--muted); }
.ss-prot-list { display: grid; gap: 6px; }
.ss-prot-item { display: flex; align-items: center; gap: 8px; }
.ss-prot-rg { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 84px; }
.ss-prot-rg.link { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 4px 0; text-align: left; font: inherit; font-weight: 600; }
.ss-prot-d { flex: 1; font-size: 13px; color: var(--muted); }
.ss-prot-desc { flex: 1; }
.ss-prot-empty { font-size: 13px; color: var(--muted); padding: 4px 0; }
.ss-prot-add { display: flex; gap: 8px; }
.ss-prot-in { flex: 1; min-width: 0; }
.ss-tab-lock { display: inline-flex; vertical-align: -2px; margin-right: 5px; opacity: .8; }
.ss-tab-lock svg { width: 13px; height: 13px; }

/* Dropdown chips fill the cell (small padding all round), text on the left, arrow on the right — like Google Sheets */
.ss-c:has(> .ss-chip:not(.ss-cbx)) { padding: calc(2px * var(--z, 1)) calc(4px * var(--z, 1)) !important; align-items: center; justify-content: stretch; }
.ss-c > .ss-chip:not(.ss-cbx) { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; justify-content: space-between; gap: 6px; padding: 1px 8px 1px 10px; }
.ss-c > .ss-chip.empty { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); justify-content: flex-end; }
.ss-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-c > .ss-chip .ss-chev { border-left-width: 5px; border-right-width: 5px; border-top-width: 6px; opacity: .85; margin-left: auto; }
/* Dropdown option colors: custom color + hex value */
.ss-sw.on { box-shadow: 0 0 0 2px var(--card, var(--panel)), 0 0 0 4px var(--accent); }
.ss-ddcustom { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ss-ddlbl { font-size: 13px; color: var(--muted); }
.ss-ddprev { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); flex: none; }
.ss-ddhex { width: 92px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--raise); color: var(--fg); text-transform: uppercase; }
.ss-ddpickw { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; }
.ss-ddpickw:hover { border-color: var(--accent); }
.ss-ddpick { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.ss-ddherr { font-size: 12px; color: #d9534f; min-height: 0; }
.ss-ddherr:empty { display: none; }

/* Edit dropdown: an option whose name matches another one */
.ss-ddrow input[type=text].dup { border-color: #d9534f !important; box-shadow: 0 0 0 1px #d9534f; }
.ss-ddmodal .err:not(:empty) { position: sticky; bottom: 0; z-index: 2; background: #c9302c; color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }

/* Edit dropdown: drag the ≡ handle to reorder */
.ss-ddrows { position: relative; }
.ss-ddrow .ss-grip { cursor: grab; touch-action: none; user-select: none; padding: 4px 2px; }
.ss-ddrows.reordering, .ss-ddrows.reordering * { cursor: grabbing !important; user-select: none; }
.ss-ddrow.dragging { opacity: .45; }
.ss-ddline { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); border-radius: 2px; pointer-events: none; z-index: 3; }
.ss-ddtsw { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); font-weight: 700; font-size: 14px; cursor: pointer; flex: none; display: grid; place-items: center; padding: 0; }
.ss-ddtsw:hover { border-color: var(--accent); }
.ss-reset.on { color: var(--accent); font-weight: 600; }

/* ---- Format Cells window (Excel-style tabs) ---- */
.modal.ss-fc { width: min(760px, calc(100vw - 32px)); max-width: none; }
.ss-fc-body { display: grid; gap: 14px; }
.ss-fc-tabs { display: flex; justify-content: center; gap: 2px; padding: 3px; margin: 0 auto; border-radius: 9px; background: var(--raise); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.ss-fc-tab { border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 7px; cursor: pointer; }
.ss-fc-tab:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ss-fc-tab[aria-selected="true"] { background: var(--accent); color: #fff; }
.ss-fc-panel { border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-height: 360px; max-height: min(60vh, 520px); overflow: auto; }
.ss-fc-cols { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.ss-fc-cols.wide { grid-template-columns: 1fr 220px; }
.ss-fc-cols.three { grid-template-columns: 1fr 160px 110px; margin-bottom: 14px; }
.ss-fc-cols.border { grid-template-columns: 200px 1fr; }
.ss-fc-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ss-fc-right { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ss-fc-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.ss-fc-lab { display: grid; gap: 5px; font-size: 13px; color: var(--muted); min-width: 0; }
.ss-fc-lab > span { color: var(--muted); }
.ss-fc-group { display: grid; gap: 8px; }
.ss-fc-gl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.ss-fc-sel, .ss-fc-num, .ss-fc-code { font: inherit; font-size: 14px; color: var(--fg); background: var(--raise); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.ss-fc-num { width: 80px; }
.ss-fc-code { width: 100%; box-sizing: border-box; font-family: var(--font-mono, ui-monospace, monospace); }
.ss-fc-chk { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg); cursor: pointer; }
.ss-fc-list { display: grid; border: 1px solid var(--line); border-radius: 8px; background: var(--raise); max-height: 230px; overflow: auto; padding: 3px; }
.ss-fc-list.cats { max-height: 330px; }
.ss-fc-list.sizes { max-height: 160px; }
.ss-fc-list.neg, .ss-fc-list.styles { max-height: none; }
.ss-fc-li { text-align: left; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; padding: 5px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-fc-li:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ss-fc-li.on { background: var(--accent); color: #fff; }
.ss-fc-li.on span[style*="d93025"] { color: #ffd2cf !important; }
.ss-fc-sample { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card, var(--panel)); font-variant-numeric: tabular-nums; min-height: 20px; }
.ss-fc-help { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.ss-fc-preview { height: 70px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card, var(--panel)); overflow: hidden; }
.ss-fc-color { display: inline-flex; }
.ss-fc-cbtn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; color: var(--fg); background: var(--raise); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; cursor: pointer; min-width: 140px; }
.ss-fc-cdot { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(127,127,127,.5); flex: none; }
.ss-fc-dial { position: relative; width: 120px; height: 120px; border-radius: 0 60px 60px 0; border: 1px solid var(--line); border-left: 0; margin-left: 0; cursor: crosshair; background: var(--raise); }
.ss-fc-dial.off { opacity: .4; }
.ss-fc-needle { position: absolute; left: 0; top: 50%; width: 100%; height: 0; transform-origin: 0 50%; }
.ss-fc-needle::after { content: ""; position: absolute; left: 34px; right: 6px; top: -1px; height: 2px; background: var(--accent); }
.ss-fc-needle span { position: absolute; left: 2px; top: -10px; font-size: 12px; color: var(--fg); }
.ss-fc-ln { display: block; width: 100%; color: var(--fg); } .ss-fc-ln svg { display: block; width: 100%; height: 10px; }
.ss-fc-li.on .ss-fc-ln { color: #fff; }
.ss-fc-list.lines .ss-fc-li { padding: 9px 10px; }
.ss-fc-presets { display: flex; gap: 14px; }
.ss-fc-pre { display: grid; justify-items: center; gap: 4px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
.ss-fc-pre svg { width: 46px; height: 46px; padding: 4px; border-radius: 8px; background: var(--raise); border: 1px solid var(--line); }
.ss-fc-pre:hover svg { border-color: var(--accent); } .ss-fc-pre:disabled { opacity: .4; cursor: default; }
.ss-fc-bwrap { display: flex; gap: 12px; align-items: stretch; }
.ss-fc-bside { display: grid; gap: 8px; align-content: space-between; }
.ss-fc-bbot { display: flex; justify-content: space-between; gap: 8px; margin-left: 52px; max-width: 220px; }
.ss-fc-sbtn { width: 40px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--raise); color: var(--fg); cursor: pointer; }
.ss-fc-sbtn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--raise)); }
.ss-fc-sbtn:disabled { opacity: .35; cursor: default; }
.ss-fc-bprev { position: relative; width: 220px; height: 150px; background: #fff; color: #111; border-radius: 4px; }
.ss-fc-bprev .z { position: absolute; border: 0; background: transparent; padding: 0; cursor: pointer; }
.ss-fc-bprev .z.t { left: 14px; right: 14px; top: 12px; height: 10px; } .ss-fc-bprev .z.b { left: 14px; right: 14px; bottom: 12px; height: 10px; }
.ss-fc-bprev .z.l { top: 14px; bottom: 14px; left: 12px; width: 10px; } .ss-fc-bprev .z.r { top: 14px; bottom: 14px; right: 12px; width: 10px; }
.ss-fc-bprev .z.h { left: 14px; right: 14px; top: calc(50% - 5px); height: 10px; } .ss-fc-bprev .z.v { top: 14px; bottom: 14px; left: calc(50% - 5px); width: 10px; }
.ss-fc-bprev .z.t, .ss-fc-bprev .z.h { border-top: 0 solid #111; } .ss-fc-bprev .z.b { border-top: 0 solid #111; top: auto; }
.ss-fc-bprev .z:disabled { display: none; }
.ss-fc-bprev .z:hover { background: rgba(26,115,232,.12); }
.ss-fc-bprev .z.b { transform: translateY(0); }
.ss-fc-btxt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; pointer-events: none; color: #555; }
.ss-fc-bprev::before, .ss-fc-bprev::after { content: ""; position: absolute; width: 8px; height: 8px; border: 1px solid #999; }
.ss-fc-bprev::before { left: 14px; top: 14px; border-width: 0 1px 1px 0; } .ss-fc-bprev::after { right: 14px; bottom: 14px; border-width: 1px 0 0 1px; }
.ss-swatches.big { grid-template-columns: repeat(10, 1fr); }
.ss-fc-nocolor { justify-self: start; }
.ss-fc-fsample { height: 60px; border: 1px solid var(--line); border-radius: 6px; }
.ss-bmore { display: block; width: 100%; margin-top: 8px; padding: 7px 10px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer; border-radius: 0 0 6px 6px; }
.ss-bmore:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
@media (max-width: 640px) { .ss-fc-cols, .ss-fc-cols.wide, .ss-fc-cols.three, .ss-fc-cols.border { grid-template-columns: 1fr; } }
.ss-fc-list { grid-auto-rows: max-content; align-content: start; }

/* Edit dropdown: which cells use it */
.ss-ddrg-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ss-ddrg-lab { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ss-ddrg { flex: 1; min-width: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--raise); color: var(--fg); }
.ss-ddrg.bad { border-color: #d9534f; box-shadow: 0 0 0 1px #d9534f; }
.ss-ddrg-sel { white-space: nowrap; padding: 6px 10px; font-size: 13px; }
.ss-ddrg-err { font-size: 12px; color: #e06a66; margin-top: 4px; }
.ss-ddrg-err:empty { display: none; }
.ss-ddrg { resize: none; line-height: 1.45; overflow: auto; }
.ss-ddrg-row { align-items: flex-start; } .ss-ddrg-lab { padding-top: 8px; }

/* Edit dropdown: "Apply to range" field + "Select a data range" box (Google Sheets style) */
.ss-ddrg-lab { display: block; font-size: 14px; font-weight: 600; color: var(--fg); margin: 12px 0 6px; padding: 0; }
.ss-ddrg-field { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 10px 9px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--raise); color: var(--fg); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ss-ddrg-field:hover { border-color: var(--accent); }
.ss-ddrg-field.bad { border-color: #d9534f; box-shadow: 0 0 0 1px #d9534f; }
.ss-ddrg-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-ddrg-ico { display: inline-flex; color: var(--muted); flex: none; }
.ss-ddrg-field:hover .ss-ddrg-ico { color: var(--fg); }
.modal.ss-rgpick { width: min(440px, calc(100vw - 32px)); }
.ss-rgpick .body { display: grid; gap: 10px; }
.ss-rgp-rows { display: grid; gap: 8px; }
.ss-rgp-row { display: flex; gap: 6px; align-items: center; }
.ss-rgp-in { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--raise); color: var(--fg); }
.ss-rgp-in:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.ss-rgp-in.bad { border-color: #d9534f; box-shadow: 0 0 0 1px #d9534f; }
.ss-rgp-del { border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; }
.ss-rgp-del:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ss-rgp-add { justify-self: start; color: var(--accent); font-weight: 600; }

/* Color picker shown inside the color menu, below the choices */
.ss-ipick { display: grid; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ss-ipick[hidden] { display: none; }
.ss-ip-sv { position: relative; height: 140px; border-radius: 8px; cursor: crosshair; touch-action: none;
  background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.ss-ip-knob { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
.ss-ip-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 6px; margin: 0; cursor: pointer;
  background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); }
.ss-ip-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.4); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ss-ip-hue::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.4); }
.ss-ip-bar { display: flex; align-items: center; gap: 8px; }
.ss-ip-sw { width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(127,127,127,.5); }
.ss-ip-hex { flex: 1; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
.ss-ip-done { padding: 5px 14px; font-size: 13px; }
button.ss-ddpickw { background: transparent; color: var(--fg); font: inherit; font-size: 13px; }
.ss-ip-drop { width: 32px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); color: var(--fg); cursor: pointer; }
.ss-ip-drop:hover:not(:disabled) { border-color: var(--accent); }
.ss-ip-drop:disabled { opacity: .4; cursor: not-allowed; }
/* Page eyedropper (Safari / Firefox) */
.ss-pickshield { position: fixed; inset: 0; z-index: 9998; cursor: crosshair; background: transparent; pointer-events: none; }
body:has(.ss-pickshield) * { cursor: crosshair !important; }
.ss-loupe { position: fixed; z-index: 9999; min-width: 64px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: 13px; font: 600 12px/1 var(--font-mono, ui-monospace, monospace); border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.45); pointer-events: none; }
.ss-loupe-cap { position: fixed; z-index: 9999; left: 50%; top: 14px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.8); color: #fff; font-size: 13px; pointer-events: none; }

/* Eyedropper just above Pick… in color menus */
.ss-ddroprow { display: flex; justify-content: flex-end; margin-top: 8px; }
.ss-ddroprow + .ss-ddcustom { margin-top: 6px; }

.ss-grid { --gl: var(--line); } .ss-grid.nogrid { --gl: transparent; } .ss-grid > :where(.ss-c) { box-shadow: var(--gsh, none); } /* low specificity so the current-cell outline and freeze lines still win */

.ss-cf-row[role=button] { cursor: pointer; } .ss-cf-row[role=button]:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.ss-cf-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Conditional-format borders: drawn on an overlay so they don't disturb the cell's own borders */
[style*="--cfb:1"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-top: var(--cfbt, 0 none); border-bottom: var(--cfbb, 0 none); border-left: var(--cfbl, 0 none); border-right: var(--cfbr, 0 none); }
.ss-cf-bd select { min-width: 0; }

/* Excel export: one row per tab */
.ss-xo-list { display: grid; gap: 8px; max-height: 50vh; overflow: auto; margin: 4px 0 8px; }
.ss-xo-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto minmax(190px, auto); align-items: center; gap: 8px; }
.ss-xo-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-xo-k { font-size: 12px; }
@media (max-width: 560px) { .ss-xo-row { grid-template-columns: 1fr 1fr; } .ss-xo-n { grid-column: 1 / -1; } .ss-xo-k { display: none; } }

/* Conditional formatting: one "Format" panel (label column + controls), with a live preview */
.ss-cf-fmt { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 4px 0 8px; }
.ss-cf-frow { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 12px; padding: 8px 12px; min-height: 30px; }
.ss-cf-frow + .ss-cf-frow { border-top: 1px solid var(--line); }
.ss-cf-flab { font-size: 13px; color: var(--muted); }
.ss-cf-fctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14px; }
.ss-cf-fctl .ss-chk { margin: 0; }
.ss-cf-fctl select { min-width: 0; }
.ss-cf-fctl input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; cursor: pointer; }
.ss-cf-fctl input[type=color]:disabled { opacity: .35; cursor: default; }
.ss-cf-inl { display: inline-flex; align-items: center; gap: 6px; }
.ss-cf-tgs { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ss-cf-tg { position: relative; display: inline-grid; place-items: center; width: 30px; height: 28px; cursor: pointer; font-size: 14px; user-select: none; }
.ss-cf-tg + .ss-cf-tg { border-left: 1px solid var(--line); }
.ss-cf-tg input { position: absolute; opacity: 0; pointer-events: none; }
.ss-cf-tg:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.ss-cf-tg:has(input:checked) { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.ss-cf-tg:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.ss-cf-prevcell { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; height: 30px; padding: 0 8px; box-sizing: border-box; border: 1px dashed var(--line); font-size: 13px; }
.ss-cf-prevcell .ss-chip { cursor: default; width: 100%; justify-content: space-between; }
@media (max-width: 560px) { .ss-cf-frow { grid-template-columns: 1fr; gap: 6px; } }
/* A color rule's dropdown border, drawn inside the chip so it doesn't change the chip's size */
.ss-chip.cdb { position: relative; }
.ss-chip.cdb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border-top: var(--cdbt, 0 none); border-bottom: var(--cdbb, 0 none); border-left: var(--cdbl, 0 none); border-right: var(--cdbr, 0 none); }

/* Photos page: gray camera icon */
:root { --t-photos: #8E8E93; }
.tool-ico.photos, .page-link.photos .pl-ico, .tab.photos svg, .tool-card.photos .top svg { color: var(--t-photos); }
.page-links .page-link.photos .pl-ico, #view-list .openin .tool-ico.photos { border-color: var(--hline); }
.page-links .page-link.photos:hover .pl-ico, #view-list .openin .tool-ico.photos:hover { border-color: currentColor; }
#view-other .top-tabs .tab.ico.photos { --pc: var(--t-photos); --pfg: #ffffff; }

.photos-page { display: flex; flex-direction: column; gap: 12px; }
.ph-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 38px; }
.ph-bar .btn svg { width: 15px; height: 15px; }
.ph-grow { flex: 1; }
.ph-selinfo { font-size: 14px; color: var(--muted); margin-left: 4px; }
.ph-size { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.ph-size input { width: 110px; accent-color: var(--t-photos); }
.ph-bar select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card, var(--panel)); color: var(--fg); font: inherit; font-size: 14px; }
.ph-box { position: relative; min-height: 320px; }
.ph-grid { --ph: 180px; display: flex; flex-direction: column; gap: 6px; }
.ph-day { display: flex; align-items: baseline; gap: 10px; padding: 14px 2px 4px; font-weight: 600; font-size: 15px; }
.ph-day:first-child { padding-top: 2px; }
.ph-day .muted { font-weight: 400; font-size: 13px; }
.ph-daysel { margin-left: auto; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 6px; opacity: 0; }
.ph-day:hover .ph-daysel, .ph-daysel:focus-visible, .ph-grid.selecting .ph-daysel { opacity: 1; }
.ph-daysel:hover { color: var(--fg); background: var(--raise); }
.ph-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ph), 1fr)); gap: 6px; }
.ph-tile { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--raise); cursor: zoom-in; outline: none; }
.ph-grid.selecting .ph-tile { cursor: pointer; }
.ph-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s ease; }
.ph-tile:hover img { transform: scale(1.03); }
.ph-tile:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.ph-tile.sel { box-shadow: 0 0 0 3px var(--accent); }
.ph-tile.sel img { transform: scale(.9); border-radius: 6px; }
.ph-tile.broken img { visibility: hidden; }
.ph-noprev { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.ph-ck { position: absolute; top: 7px; left: 7px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); color: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.ph-ck svg { width: 14px; height: 14px; }
.ph-tile:hover .ph-ck, .ph-tile:focus-visible .ph-ck, .ph-grid.selecting .ph-ck { opacity: 1; }
.ph-tile.sel .ph-ck { background: var(--accent); border-color: #fff; color: #fff; }
.ph-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 300px; padding: 30px 16px; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: 14px; }
.ph-empty strong { color: var(--fg); font-size: 17px; }
.ph-empty-ico svg { width: 46px; height: 46px; color: var(--t-photos); }
.ph-drop { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--t-photos) 16%, var(--card, var(--panel))); border: 2px dashed var(--t-photos); border-radius: 14px; pointer-events: none; }
.ph-drop[hidden] { display: none; }
.ph-drop strong { font-size: 18px; }
.ph-status { font-size: 13px; color: var(--muted); min-height: 18px; }
.ph-status.bad { color: var(--bad); }

/* Photo viewer: full screen, always dark */
html.pv-open, html.pv-open body { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: #0b0b0c; color: #f2f2f2; outline: none; }
.pv-top { display: flex; align-items: center; gap: 4px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); background: rgba(255,255,255,.04); }
.pv-titles { min-width: 0; margin-left: 6px; }
.pv-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.pv-count { font-size: 12px; color: #a1a1a6; }
.pv-grow { flex: 1; }
.pv-btn { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: none; color: #f2f2f2; cursor: pointer; padding: 0; }
.pv-btn svg { width: 20px; height: 20px; }
.pv-btn:hover { background: rgba(255,255,255,.12); }
.pv-btn.on { background: rgba(255,255,255,.2); }
.pv-btn:focus-visible, .pv-nav:focus-visible, .pv-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.pv-zoom { min-width: 46px; text-align: center; font-size: 12px; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.pv-mid { position: relative; flex: 1; display: flex; min-height: 0; }
.pv-stage { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: default; user-select: none; }
.pv-stage.zoomed { cursor: grab; }
.pv-stage.zoomed:active { cursor: grabbing; }
.pv-img { max-width: calc(100% - 24px); max-height: calc(100% - 24px); object-fit: contain; transition: transform .16s ease; will-change: transform; }
.pv-stage.zoomed .pv-img { transition: none; }
.pv-stage.broken .pv-img { display: none; }
.pv-noprev { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; color: #a1a1a6; padding: 20px; }
.pv-noprev strong { color: #f2f2f2; }
.pv-nav { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(40,40,42,.72); color: #fff; cursor: pointer; opacity: .85; padding: 0; }
.pv-nav svg { width: 24px; height: 24px; }
.pv-nav:hover { opacity: 1; background: rgba(70,70,72,.9); }
.pv-nav:disabled { opacity: 0; pointer-events: none; }
.pv-nav.prev { left: 12px; }
.pv-nav.next { right: 12px; }
.pv-info:not([hidden]) ~ .pv-nav.next, .pv-mid:has(.pv-info:not([hidden])) .pv-nav.next { right: 292px; }
.pv-info { width: 280px; flex: none; padding: 16px; overflow: auto; background: #1a1a1c; border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; }
.pv-info[hidden] { display: none; }
.pv-info h3 { margin: 0 0 4px; font-size: 15px; }
.pv-row { display: flex; flex-direction: column; gap: 2px; font-size: 14px; word-break: break-word; }
.pv-row .muted { color: #a1a1a6; font-size: 12px; }
.pv-info .btn { align-self: flex-start; margin-top: 6px; }
.pv-strip { display: flex; gap: 4px; padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); overflow-x: auto; background: rgba(255,255,255,.04); scrollbar-width: thin; }
.pv-thumb { flex: none; width: 52px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #222; cursor: pointer; opacity: .55; }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-thumb:hover { opacity: .9; }
.pv-thumb.on { opacity: 1; border-color: #fff; }
.pv.playing .pv-top, .pv.playing .pv-strip { opacity: .25; transition: opacity .3s; }
.pv.playing .pv-top:hover, .pv.playing .pv-strip:hover { opacity: 1; }
@media (max-width: 640px) {
  .pv-info { position: absolute; right: 0; top: 0; bottom: 0; width: min(280px, 85vw); z-index: 3; }
  .pv-mid:has(.pv-info:not([hidden])) .pv-nav.next { right: 12px; }
  .pv-nav { width: 38px; height: 38px; margin-top: -19px; }
  .pv-zoom, .pv-top .pv-btn[aria-label="Zoom out"], .pv-top .pv-btn[aria-label="Zoom in"] { display: none; }
  .ph-size { display: none; }
}
html.pv-open .overlay { z-index: 950; }

/* Files search: icon, clear button, type filter, highlighted matches */
.f-right { display: flex; align-items: center; gap: 8px; }
.f-sbox { position: relative; display: flex; align-items: center; }
.f-sico { position: absolute; left: 13px; display: flex; color: var(--muted); pointer-events: none; }
.files-page .f-search { padding-left: 36px; padding-right: 34px; }
.f-search::-webkit-search-cancel-button { display: none; }
.f-search:focus { outline: none; border-color: var(--t-files); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-files) 30%, transparent); }
.f-sclear { position: absolute; right: 8px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); cursor: pointer; }
.f-sclear[hidden] { display: none; }
.f-sclear:hover { background: color-mix(in srgb, var(--fg) 22%, transparent); }
.f-type { padding: 8px 12px; border-radius: 980px; border: 1px solid var(--line); background: var(--card, var(--panel)); color: var(--fg); font: inherit; font-size: 14px; }
.files-page .f-hint.f-rescount { color: var(--fg); }
.f-name mark { background: color-mix(in srgb, var(--t-files) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
@media (max-width: 700px) { .f-sbox { flex: 1; } .f-right { flex-wrap: wrap; } }

/* Upload window: a list of folders and files to upload together */
.modal.f-upbox { width: min(560px, 100%); }
.f-upzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; margin-top: 12px; border: 2px dashed var(--line); border-radius: 12px; text-align: center; color: var(--muted); font-size: 13px; transition: background .12s, border-color .12s; }
.f-upzone strong { color: var(--fg); font-size: 15px; }
.f-upzone.has { padding: 12px 16px; }
.f-upzone.has span { display: none; }
.f-upzone.over { border-color: var(--t-files); background: color-mix(in srgb, var(--t-files) 12%, transparent); }
.f-upq { list-style: none; margin: 10px 0 0; padding: 4px; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.f-upq[hidden] { display: none; }
.f-upq li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; font-size: 14px; }
.f-upq li:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.f-upq .f-ico { display: flex; flex: none; }
.f-upq .f-ico svg { width: 18px; height: 18px; }
.f-upq-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-upq-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.f-upq-x { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: none; color: var(--muted); cursor: pointer; }
.f-upq-x:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 12%, transparent); }
.f-upadd { display: flex; gap: 8px; margin-top: 10px; }

/* Photos albums: a row of album cards above the grid */
.ph-albums { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.ph-acard { flex: none; display: flex; align-items: center; gap: 10px; min-width: 150px; max-width: 220px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, var(--panel)); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.ph-acard:hover { border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.ph-acard.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ph-acard.over, .ph-albums.dropping .ph-acard:not(.on):not(.ph-anew):not(:first-child) { border-style: dashed; border-color: var(--accent); }
.ph-acard.over { background: color-mix(in srgb, var(--accent) 16%, var(--card, var(--panel))); border-style: solid; }
.ph-acov { flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--raise); display: flex; align-items: center; justify-content: center; color: var(--t-photos); }
.ph-acov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-acov svg { width: 24px; height: 24px; }
.ph-atxt { display: flex; flex-direction: column; min-width: 0; }
.ph-aname { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-acount { font-size: 12px; color: var(--muted); }
.ph-anew { min-width: 0; border-style: dashed; color: var(--muted); }
.ph-anew .ph-acov { background: none; border: 1px dashed var(--line); color: var(--muted); }
.ph-anew:hover { color: var(--fg); }
.ph-ahead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-ahead[hidden] { display: none; }
.ph-ahead h2 { margin: 0; font-size: 22px; font-weight: 600; }
.ph-ahead .btn svg { width: 15px; height: 15px; }
.ph-aback { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ph-aback svg { width: 20px; height: 20px; }
.ph-aback:hover { background: var(--raise); }
.ph-amore { padding: 6px 10px; }
.ph-amore svg { width: 18px !important; height: 18px !important; }
.ph-bar .btn svg { flex: none; }
.ph-tile[draggable="true"] { -webkit-user-drag: element; }
/* Pick photos for an album */
.modal.ph-pickbox { width: min(760px, 100%); }
.ph-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: 56vh; overflow: auto; padding: 2px; }
.ph-pick-t { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--raise); cursor: pointer; }
.ph-pick-t img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.ph-pick-t .ph-ck { opacity: 1; pointer-events: none; }
.ph-pick-t.sel { box-shadow: 0 0 0 3px var(--accent); }
.ph-pick-t.sel img { transform: scale(.9); border-radius: 6px; }
.ph-pick-t.sel .ph-ck { background: var(--accent); color: #fff; }
.ph-pick-t.in { opacity: .35; cursor: default; }
.ph-pick-t.in .ph-ck { display: none; }
.pv-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pv-info .pv-acts .btn { margin-top: 0; }
html.pv-open .menu { z-index: 960; }
.ph-heicnote { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--card, var(--panel))); font-size: 14px; }
.ph-heicnote[hidden] { display: none; }
.ph-heicnote span { flex: 1; min-width: 200px; }
/* The "HEIC" placeholder must not cover the selection circle */
.ph-noprev { pointer-events: none; }
.ph-ck { z-index: 2; }
.ph-bar .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Confirmation dialogs: the list of what will be affected */
.confirm-list { list-style: none; margin: 0 0 12px; padding: 4px; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.confirm-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 6px; font-size: 14px; }
.confirm-list li + li { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.confirm-list .cl-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm-list .cl-sub { color: var(--muted); font-size: 12px; white-space: nowrap; flex: none; }

.copyright { margin: 4px 0 24px; text-align: center; color: var(--muted); font-size: 11px; opacity: .8; }

/* Paths (teal) and Site (orange) page colors */
:root { --t-paths: #2fb5a6; --t-site: #f08a3c; }
.tool-ico.paths, .page-link.paths .pl-ico, .tab.paths svg, .tool-card.paths .top svg { color: var(--t-paths); }
.tool-ico.site, .page-link.site .pl-ico, .tab.site svg, .tool-card.site .top svg { color: var(--t-site); }
.page-links .page-link.paths .pl-ico, #view-list .openin .tool-ico.paths, .page-links .page-link.site .pl-ico, #view-list .openin .tool-ico.site { border-color: var(--hline); }
.page-links .page-link.paths:hover .pl-ico, #view-list .openin .tool-ico.paths:hover, .page-links .page-link.site:hover .pl-ico, #view-list .openin .tool-ico.site:hover { border-color: currentColor; }
#view-other .top-tabs .tab.ico.paths { --pc: var(--t-paths); --pfg: #062b27; }
#view-other .top-tabs .tab.ico.site { --pc: var(--t-site); --pfg: #2e1500; }

/* Paths page: diagram editor */
.paths-page { --pa-bg: var(--panel); --pa-ink: var(--fg); --pa-fill: var(--raise); display: flex; flex-direction: column; gap: 10px; }
.pa-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 38px; }
.pa-bar .btn { height: 34px; padding: 0 9px; }
.pa-bar .btn svg { width: 18px; height: 18px; }
.pa-bar .btn:disabled { opacity: .4; cursor: default; background: none; }
.pa-bar .pa-zoom { min-width: 54px; justify-content: center; font-variant-numeric: tabular-nums; font-size: 13px; }
.pa-grow { flex: 1; }
.pa-ro { color: var(--muted); font-size: 14px; }
.pa-saved { font-size: 13px; color: var(--muted); }
.pa-body { display: flex; gap: 12px; height: calc(100dvh - 150px); min-height: 460px; }
.pa-canvas { position: relative; flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--pa-bg); overflow: hidden; outline: none; }
.pa-canvas:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.pa-canvas.pa-drop { box-shadow: inset 0 0 0 2px var(--t-paths); }
.pa-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.pa-svg.pa-panning { cursor: grabbing; }
.pa-dot { fill: color-mix(in srgb, var(--fg) 16%, transparent); }
.pa-shape { cursor: move; }
.pa-ro .pa-shape, .pa-ro .pa-hit { cursor: default; }
.pa-text { width: 100%; height: 100%; box-sizing: border-box; padding: 4px 6px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--fg); line-height: 1.2; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; font-family: inherit; }
.pa-text.below { align-items: flex-start; height: auto; padding-top: 0; }
.pa-hit { fill: none; stroke: transparent; cursor: pointer; }
.pa-line { fill: none; stroke-linejoin: round; pointer-events: none; }
.pa-glow { fill: none; stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pa-head, .pa-flowdot { pointer-events: none; }
.pa-elabel { font-size: 13px; fill: var(--fg); pointer-events: none; }
.pa-elabel-bg { fill: var(--pa-bg); pointer-events: none; }
.pa-port { fill: var(--panel); stroke: var(--t-paths); opacity: 0; cursor: crosshair; transition: opacity .12s; }
.pa-node:hover .pa-port, .pa-node.sel .pa-port, .pa-linking .pa-port, .pa-editpts .pa-port { opacity: 1; }
.pa-port:hover, .pa-port.on { fill: var(--t-paths); }
.pa-editpts .pa-port { cursor: grab; }
.pa-editpts .pa-shape { cursor: copy; }
.pa-selbox { fill: none; stroke: var(--accent); pointer-events: none; }
.pa-handle { fill: var(--panel); stroke: var(--accent); }
.pa-handle.h-nw, .pa-handle.h-se { cursor: nwse-resize; } .pa-handle.h-ne, .pa-handle.h-sw { cursor: nesw-resize; }
.pa-handle.h-n, .pa-handle.h-s { cursor: ns-resize; } .pa-handle.h-e, .pa-handle.h-w { cursor: ew-resize; }
.pa-endh { fill: var(--accent); stroke: var(--panel); cursor: grab; }
.pa-wp { fill: var(--panel); stroke: var(--accent); cursor: move; }
.pa-mid { fill: var(--accent); stroke: var(--panel); opacity: .45; cursor: copy; }
.pa-mid:hover { opacity: 1; }
.pa-temp { fill: none; opacity: .75; pointer-events: none; stroke-dasharray: 6 4; }
.pa-target { fill: none; stroke: var(--t-paths); pointer-events: none; }
.pa-marquee { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); pointer-events: none; }
.pa-edit { position: absolute; z-index: 3; box-sizing: border-box; margin: 0; padding: 4px 6px; border: 2px solid var(--accent); border-radius: 4px; background: var(--panel); color: var(--fg); font: inherit; text-align: center; resize: none; outline: none; line-height: 1.2; }
.pa-edit.label { font-size: 13px; }
.pa-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--muted); pointer-events: none; }
.pa-empty strong { color: var(--fg); font-size: 16px; font-weight: 600; }
.pa-empty span { max-width: 380px; font-size: 14px; line-height: 1.45; }
.pa-hint { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--t-paths) 18%, var(--panel)); border: 1px solid color-mix(in srgb, var(--t-paths) 50%, var(--line)); font-size: 13px; color: var(--fg); pointer-events: none; }
.pa-panel { width: 300px; flex: none; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 4px 14px 14px; box-sizing: border-box; }
.pa-sec { padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.pa-sec:last-child { border-bottom: 0; }
.pa-sec h3 { margin: 4px 0 10px; font-size: 14px; font-weight: 600; }
.pa-sec h4 { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pa-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; margin: 7px 0; }
.pa-lbl { font-size: 13px; color: var(--muted); }
.pa-in { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--raise); color: var(--fg); font: inherit; font-size: 14px; }
textarea.pa-in { resize: vertical; min-height: 34px; }
.pa-num { width: 64px; }
.pa-seg { display: flex; flex-wrap: wrap; gap: 3px; }
.pa-sb { min-width: 30px; height: 28px; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--raise); color: var(--fg); font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pa-sb svg { width: 20px; height: 18px; }
.pa-seg.arrows .pa-sb svg { width: 28px; height: 14px; }
.pa-sb[aria-pressed="true"] { border-color: var(--t-paths); background: color-mix(in srgb, var(--t-paths) 20%, var(--raise)); color: var(--fg); }
.pa-sb:disabled { opacity: .4; cursor: default; }
.pa-sb:focus-visible, .pa-swb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pa-sw { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pa-swb { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); cursor: pointer; }
.pa-swb.auto { background: conic-gradient(var(--fg) 0 50%, var(--panel) 0 100%); }
.pa-swb.none { background: linear-gradient(135deg, transparent 45%, var(--bad) 45% 55%, transparent 55%), var(--panel); }
.pa-swb[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--t-paths); }
.pa-swc { width: 26px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.pa-range { display: flex; align-items: center; gap: 8px; }
.pa-range input { flex: 1; min-width: 0; accent-color: var(--t-paths); }
.pa-rv { font-size: 12.5px; color: var(--muted); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.pa-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pa-acts .btn { height: 30px; font-size: 13px; padding: 0 10px; }
.pa-acts .btn.on { border-color: var(--t-paths); background: color-mix(in srgb, var(--t-paths) 20%, var(--raise)); }
.pa-even { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pa-even .btn { height: 30px; font-size: 13px; padding: 0 10px; }
.pa-tip { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pa-count { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.pa-help { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pa-help li + li { margin-top: 4px; }
.pa-thumbs { display: flex; gap: 8px; margin-bottom: 6px; }
.pa-thumbs figure { margin: 0; flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 4px; text-align: center; background: var(--raise); }
.pa-thumbs figure.on { border-color: var(--t-paths); }
.pa-thumbs img { display: block; width: 100%; height: 72px; object-fit: contain; }
.pa-thumbs figcaption { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.pa-redraw { margin-top: 8px; padding: 10px; border-radius: 8px; background: color-mix(in srgb, var(--t-paths) 9%, var(--raise)); }
.pa-redraw .pa-row { margin-top: 0; }
.pa-rdgo { width: 100%; justify-content: center; height: 34px; }
.pa-rdrow { display: flex; align-items: center; gap: 8px; }
.pa-rdrow .pa-rdstatus { flex: 1; font-size: 13px; }
.pa-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--t-paths) 30%, transparent); border-top-color: var(--t-paths); animation: pa-spin .8s linear infinite; }
@keyframes pa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pa-spin { animation-duration: 2.4s; } }
@media (max-width: 900px) {
  .pa-body { flex-direction: column; height: auto; }
  .pa-canvas { height: 62dvh; min-height: 360px; flex: none; }
  .pa-panel { width: auto; }
}
/* Paths: checks and tracing */
.pa-issue { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; opacity: .38; }
.pa-issue.bad { stroke: var(--bad); }
.pa-issue.warn { stroke: #e8c13a; }
.pa-dim { opacity: .18; }
.pa-troot .pa-shape { filter: drop-shadow(0 0 6px var(--t-paths)); }
.pa-checkbtn { gap: 6px; }
.pa-cb-dot { width: 9px; height: 9px; border-radius: 50%; background: #57c05f; flex: none; }
.pa-checkbtn.warn .pa-cb-dot { background: #e8c13a; }
.pa-checkbtn.bad .pa-cb-dot { background: var(--bad); }
.pa-cb-n:empty { display: none; }
.pa-cb-n { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--raise); font-size: 12px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.pa-checkbtn.bad .pa-cb-n { background: var(--bad); color: #fff; }
.pa-checkbtn.warn .pa-cb-n { background: #e8c13a; color: #2b2306; }
.pa-checks:focus { outline: none; }
.pa-cklist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pa-ck { width: 100%; display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); color: var(--fg); font: inherit; font-size: 13px; line-height: 1.35; cursor: pointer; }
.pa-ck:hover { border-color: var(--muted); }
.pa-ck-ico { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--line); color: var(--fg); }
.pa-ck.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.pa-ck.bad .pa-ck-ico { background: var(--bad); color: #fff; }
.pa-ck.warn { border-color: color-mix(in srgb, #e8c13a 55%, var(--line)); }
.pa-ck.warn .pa-ck-ico { background: #e8c13a; color: #2b2306; }
.pa-ck.ok .pa-ck-ico { background: #57c05f; color: #0e2a12; }
.pa-lennote { font-size: 12px; color: var(--muted); }
.pa-lennote.ok { color: #57c05f; } .pa-lennote.warn { color: #c9a227; } .pa-lennote.bad { color: var(--bad); font-weight: 600; }
.pa-chk { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 13px; color: var(--muted); cursor: pointer; }
.pa-chk input { accent-color: var(--t-paths); }

/* Site page: floor plans with pins */
.site-page { display: flex; flex-direction: column; gap: 12px; }
.si-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 38px; }
.si-bar .btn svg { width: 16px; height: 16px; }
.si-grow { flex: 1; }
.si-msg { font-size: 13px; color: var(--muted); }
.si-searchbox { display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 34px; border: 1px solid var(--line); border-radius: 4px; background: var(--raise); color: var(--muted); }
.si-searchbox svg { width: 15px; height: 15px; }
.si-search { border: 0; background: none; color: var(--fg); font: inherit; font-size: 14px; outline: none; width: 180px; }
.si-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.si-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.si-card:hover { border-color: var(--t-site); }
.si-open { display: flex; flex-direction: column; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.si-thumb { position: relative; height: 140px; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.si-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.si-badge { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--t-site); color: #2e1500; font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; }
.si-cardtext { display: flex; flex-direction: column; gap: 2px; padding: 10px 40px 12px 12px; }
.si-cardtext strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-cardtext span { font-size: 12.5px; color: var(--muted); }
.si-more { position: absolute; right: 6px; bottom: 10px; }
.si-new { align-items: center; justify-content: center; gap: 6px; min-height: 196px; border-style: dashed; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.si-new svg { width: 22px; height: 22px; }
.si-intro { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 8px; background: color-mix(in srgb, var(--t-site) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--t-site) 35%, var(--line)); }
.si-intro strong { font-size: 15px; } .si-intro span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.si-plannav { align-items: center; }
.si-plannav .btn { height: 34px; padding: 0 8px; }
.si-plansel { height: 34px; max-width: 320px; border: 0; background: var(--raise); color: var(--fg); font: inherit; font-size: 14px; padding: 0 8px; }
.si-sidebtn[aria-pressed="true"] { border-color: var(--t-site); }
.si-body { display: flex; gap: 12px; height: calc(100dvh - 150px); min-height: 460px; }
.si-noside .si-side { display: none; }
.si-canvas { position: relative; flex: 1; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--fg) 6%, var(--panel)); outline: none; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.si-canvas:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.si-canvas.si-panning { cursor: grabbing; }
.si-canvas.si-placing { cursor: crosshair; }
.si-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.si-img { display: block; max-width: none; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.25); pointer-events: none; }
.si-layer { position: absolute; inset: 0; pointer-events: none; }
.si-pin { position: absolute; pointer-events: auto; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%); color: #fff; }
.si-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.si-pin.k-task { width: 26px; height: 34px; transform: translate(-50%, -100%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.si-pin.k-task svg { width: 100%; height: 100%; display: block; }
.si-pin.k-item, .si-pin.k-photo, .si-pin.k-link, .si-pin.k-note { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.si-pin.k-item { background: var(--pc); border: 2px solid #fff; }
.si-pin.k-item svg { width: 17px; height: 17px; }
.si-pin.k-photo { width: 24px; height: 24px; background: #fff; color: #e5534b; border: 2px solid #e5534b; }
.si-pin.k-photo svg { width: 14px; height: 14px; }
.si-pin.k-note { border-radius: 5px; background: var(--pc); color: #2b2306; border: 1px solid rgba(0,0,0,.25); }
.si-pin.k-note svg { width: 16px; height: 16px; }
.si-pin.k-link { background: #4a94f8; border: 2px solid #fff; }
.si-pin.k-link svg { width: 15px; height: 15px; }
.si-linklbl { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 2px 6px; border-radius: 4px; background: rgba(20,22,26,.85); color: #fff; font-size: 11.5px; }
.si-pcount { position: absolute; right: -7px; top: -7px; min-width: 15px; height: 15px; border-radius: 8px; background: #e5534b; color: #fff; font-size: 10px; line-height: 15px; text-align: center; }
.si-pin.sel { z-index: 2; }
.si-pin.sel:not(.k-task) { box-shadow: 0 0 0 3px var(--accent), 0 1px 3px rgba(0,0,0,.45); }
.si-pin.k-task.sel { filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 2px var(--accent)); }
.si-pin.dragging { opacity: .75; cursor: grabbing; }
.si-tools { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.si-tool { width: 34px; height: 34px; border: 0; border-radius: 6px; background: none; color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.si-tool svg { width: 19px; height: 19px; }
.si-tool:hover { background: var(--raise); }
.si-tool[aria-pressed="true"] { background: var(--t-site); color: #2e1500; }
.si-tsep { height: 1px; margin: 3px 4px; background: var(--line); }
.si-zoom { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; color: var(--muted); pointer-events: none; }
.si-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; padding: 6px 12px; border-radius: 6px; background: var(--t-site); color: #2e1500; font-size: 13px; font-weight: 500; pointer-events: none; white-space: nowrap; }
.si-side { width: 290px; flex: none; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px; box-sizing: border-box; }
.si-sidehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.si-sidehead strong { font-size: 14px; }
.si-filter { height: 28px; border: 1px solid var(--line); border-radius: 4px; background: var(--raise); color: var(--fg); font: inherit; font-size: 12.5px; }
.si-none { font-size: 13px; color: var(--muted); line-height: 1.45; }
.si-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.si-li { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 6px; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.si-li:hover { background: var(--raise); }
.si-li.sel { background: color-mix(in srgb, var(--t-site) 16%, var(--raise)); }
.si-lt { display: flex; flex-direction: column; min-width: 0; }
.si-lt strong { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-lt span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-lico { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; }
.si-lico svg { width: 15px; height: 15px; }
.si-lico.k-task { border-radius: 0; } .si-lico.k-task svg { width: 20px; height: 26px; }
.si-lico.k-item { background: var(--pc); }
.si-lico.k-photo { background: #fff; color: #e5534b; border: 1.5px solid #e5534b; box-sizing: border-box; }
.si-lico.k-note { background: var(--pc); color: #2b2306; border-radius: 4px; }
.si-lico.k-link { background: #4a94f8; }
.si-a { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.si-a:hover { text-decoration: underline; }
.si-a.danger { color: var(--bad); }
.si-newtask { margin: 10px 0 0 8px; }
.si-pop { position: absolute; z-index: 4; width: 280px; padding: 12px; box-sizing: border-box; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 10px; cursor: default; }
.si-pophead { display: flex; align-items: center; justify-content: space-between; }
.si-pophead strong { font-size: 15px; }
.si-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.si-in { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--raise); color: var(--fg); font: inherit; font-size: 14px; }
textarea.si-in { resize: vertical; }
.si-muted { color: var(--muted); font-size: 13px; }
.si-small { font-size: 12px; }
.si-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.si-thw { position: relative; }
.si-th { width: 72px; height: 72px; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--raise); cursor: zoom-in; }
.si-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-th.small { width: 120px; height: 90px; margin-top: 6px; }
.si-thx { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--fg); display: none; align-items: center; justify-content: center; cursor: pointer; }
.si-thx svg { width: 11px; height: 11px; }
.si-thw:hover .si-thx, .si-thx:focus-visible { display: flex; }
.si-sw { display: flex; flex-wrap: wrap; gap: 5px; }
.si-swb { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); cursor: pointer; }
.si-swb[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--t-site); }
.si-swauto { color: #fff; font: 700 10px/20px system-ui, sans-serif; text-align: center; }
.si-swauto::after { content: "A"; }
.modal.si-win { width: min(940px, calc(100vw - 24px)); max-width: none; padding: 0; overflow: hidden; }
.si-winbody { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.si-wbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.si-wkind { font-size: 14px; font-weight: 600; }
.si-wcols { display: grid; grid-template-columns: 1fr 300px; min-height: 0; flex: 1; }
.si-wleft { padding: 14px 18px 20px; overflow: auto; border-right: 1px solid var(--line); }
.si-wright { padding: 14px 16px 20px; overflow: auto; background: color-mix(in srgb, var(--fg) 3%, var(--panel)); display: flex; flex-direction: column; gap: 4px; }
.si-whead { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.si-wpin { flex: none; width: 30px; height: 38px; }
.si-wpin svg { width: 100%; height: 100%; }
.si-wpin.item { width: 34px; height: 34px; border-radius: 50%; background: var(--pc); color: #fff; display: flex; align-items: center; justify-content: center; }
.si-wpin.item svg { width: 20px; height: 20px; }
.si-wht { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.si-wtitle { width: 100%; box-sizing: border-box; padding: 4px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--fg); font: inherit; font-size: 18px; font-weight: 600; }
.si-wtitle:hover:not(:disabled), .si-wtitle:focus { border-color: var(--line); background: var(--raise); outline: none; }
.si-wsec { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.si-wsec:last-child { border-bottom: 0; }
.si-wsec > .si-in { align-self: stretch; }
.si-wsec h3 { margin: 0; font-size: 14px; font-weight: 600; }
.si-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.si-check li { display: flex; align-items: center; gap: 8px; }
.si-check input[type=checkbox] { width: 16px; height: 16px; accent-color: #57c05f; flex: none; }
.si-cltext { padding: 4px 8px; }
.si-cltext.done { text-decoration: line-through; color: var(--muted); }
.si-fields { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; align-items: center; align-self: stretch; }
.si-fields:empty { display: none; }
.si-act { gap: 10px; }
.si-arow { align-self: stretch; padding-left: 10px; border-left: 2px solid var(--line); }
.si-arow.k-comment { border-left-color: var(--accent); }
.si-ameta { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.si-ameta span { color: var(--muted); }
.si-atext { margin: 2px 0 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.si-wrh { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.si-attr { display: flex; flex-direction: column; gap: 4px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.si-alabel { font-size: 12.5px; color: var(--muted); }
.si-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.si-icb { height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.si-icb svg { width: 18px; height: 18px; }
.si-icb[aria-pressed="true"] { border-color: var(--t-site); background: color-mix(in srgb, var(--t-site) 22%, var(--raise)); }
.si-mini { margin-top: 10px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.si-mini:hover { border-color: var(--t-site); }
.si-miniimg { position: relative; display: block; background: #fff; line-height: 0; }
.si-miniimg img { width: 100%; height: auto; display: block; }
.si-minidot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.si-mininame { font-size: 12.5px; color: var(--muted); }
.si-wdel { margin-top: 12px; align-self: flex-start; height: 32px; font-size: 13px; }
.si-wdel svg { width: 15px; height: 15px; }
.modal.si-viewer { width: min(1100px, calc(100vw - 24px)); max-width: none; padding: 0; overflow: hidden; background: #111; }
.si-vbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; color: #ddd; }
.si-vbar .icon-btn { color: #ddd; }
.si-vcap { font-size: 13px; }
.si-vimg { position: relative; display: flex; align-items: center; justify-content: center; height: min(75dvh, 760px); }
.si-vimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.si-vnav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.si-vnav svg { width: 22px; height: 22px; }
.si-vnav.l { left: 12px; } .si-vnav.r { right: 12px; }
@media (max-width: 900px) {
  .si-body { flex-direction: column; height: auto; }
  .si-canvas { height: 62dvh; min-height: 360px; flex: none; }
  .si-side { width: auto; }
  .si-wcols { grid-template-columns: 1fr; overflow: auto; }
  .si-wleft { border-right: 0; overflow: visible; }
  .si-wright { overflow: visible; }
  .si-plansel { max-width: 160px; }
}
.si-lico .si-linklbl, .si-lico .si-pcount { display: none; }
/* ---------- Load Out page (loadout.js); reuses the Site page layout (si-*) tinted with its own color ---------- */
:root, :root[data-theme="dark"] { --t-loadout: #8cc63f; --lo-ink: #172405; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-loadout: #8cc63f; } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t-loadout: #4f8a1c; --lo-ink: #ffffff; } }
:root[data-theme="light"] { --t-loadout: #4f8a1c; --lo-ink: #ffffff; }
.tool-ico.loadout, .page-link.loadout .pl-ico, .tab.loadout svg, .tool-card.loadout .top svg { color: var(--t-loadout); }
.page-links .page-link.loadout .pl-ico, #view-list .openin .tool-ico.loadout { border-color: var(--hline); }
.page-links .page-link.loadout:hover .pl-ico, #view-list .openin .tool-ico.loadout:hover { border-color: currentColor; }
#view-other .top-tabs .tab.ico.loadout { --pc: var(--t-loadout); --pfg: var(--lo-ink); }
.lo-page { --t-site: var(--t-loadout); }
.lo-page .si-tool[aria-pressed="true"], .lo-page .si-hint, .lo-page .si-badge { color: var(--lo-ink); }
.lo-layer { overflow: hidden; }
.lo-truck { position: absolute; pointer-events: auto; box-sizing: border-box; border: 2px solid var(--pc); border-radius: 3px; background: color-mix(in srgb, var(--pc) 28%, transparent); cursor: move; }
.lo-truck.shared { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--pc) 30%, transparent) 0 6px, color-mix(in srgb, var(--pc) 16%, transparent) 6px 12px); }
.lo-truck.sel { box-shadow: 0 0 0 2px var(--accent); z-index: 1; }
.lo-hdl { position: absolute; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--accent); background: #fff; }
.lo-rs { right: -7px; bottom: -7px; cursor: nwse-resize; }
.lo-rot { left: 50%; top: -26px; margin-left: -6px; border-radius: 50%; cursor: grab; }
.lo-rot::after { content: ""; position: absolute; left: 3px; top: 10px; width: 2px; height: 12px; background: var(--accent); }
.lo-tag { position: absolute; z-index: 2; pointer-events: auto; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px; padding: 2px 7px 2px 3px; border-radius: 12px; background: rgba(20,22,26,.82); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: move; max-width: 180px; }
.lo-tag:not(:has(.lo-num)) { padding-left: 7px; }
.lo-tag.sel { box-shadow: 0 0 0 2px var(--accent); }
.lo-tname { overflow: hidden; text-overflow: ellipsis; }
.lo-num { flex: none; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1.5px solid rgba(255,255,255,.85); }
.lo-note { position: absolute; z-index: 3; pointer-events: auto; transform: translate(-50%, -50%); max-width: 170px; min-width: 60px; padding: 6px 8px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.4); font-size: 12px; line-height: 1.35; cursor: move; }
.lo-note span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.lo-note.sel { box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0,0,0,.4); }
.lo-ghost { position: absolute; z-index: 3; pointer-events: none; border: 2px dashed var(--t-loadout); background: color-mix(in srgb, var(--t-loadout) 18%, transparent); border-radius: 3px; }
.lo-side { display: flex; flex-direction: column; gap: 6px; width: 320px; }
.lo-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--raise); margin-bottom: 4px; }
.lo-tab { flex: 1; height: 30px; border: 0; border-radius: 5px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.lo-tab[aria-selected="true"] { background: var(--panel); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.lo-gh { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.lo-gh strong { font-size: 13.5px; }
.lo-gh .si-muted { font-size: 12px; }
.lo-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lo-row { display: flex; align-items: center; gap: 2px; border-radius: 6px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.lo-row:hover { background: var(--raise); }
.lo-row.sel { background: color-mix(in srgb, var(--t-loadout) 16%, var(--raise)); }
.lo-row.dragging { opacity: .45; }
.lo-row.over-a { border-top-color: var(--t-loadout); } .lo-row.over-b { border-bottom-color: var(--t-loadout); }
.lo-grip { flex: none; width: 16px; color: var(--muted); cursor: grab; display: flex; } .lo-grip svg { width: 16px; height: 16px; }
.lo-rowmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 6px; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.lo-mv { width: 26px; height: 26px; } .lo-mv svg { width: 15px; height: 15px; }
.lo-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin: 0 3px; } .lo-dot.sq { border-radius: 3px; border: 1px solid rgba(0,0,0,.25); }
.lo-adds { margin: 10px 0 0 6px; }
.lo-pop { width: 300px; }
.lo-pname { font-size: 15px; font-weight: 600; }
.lo-ordline { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lo-ordline .icon-btn { width: 28px; height: 28px; } .lo-ordline .icon-btn svg { width: 15px; height: 15px; }
.lo-fl { display: flex; flex-direction: column; gap: 3px; }
.lo-tasks { display: flex; flex-direction: column; gap: 8px; }
.lo-tasks-wide { margin-top: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); max-width: 760px; }
.lo-tlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lo-task { display: flex; align-items: flex-start; gap: 8px; padding: 6px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 3%, var(--panel)); border: 1px solid var(--line); }
.lo-task input[type=checkbox] { width: 16px; height: 16px; margin-top: 8px; accent-color: var(--t-loadout); flex: none; }
.lo-tbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lo-ttext { padding: 5px 8px; }
.lo-ttext.done { text-decoration: line-through; color: var(--muted); }
.lo-tmeta { display: flex; gap: 4px; flex-wrap: wrap; }
.lo-tmeta .si-in { width: auto; flex: 1 1 90px; min-width: 0; padding: 4px 6px; font-size: 12.5px; }
.lo-task .icon-btn { flex: none; }
.lo-task.done { opacity: .7; }
.modal.lo-sitepick { width: min(720px, calc(100vw - 24px)); max-width: none; }
.lo-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 10px 0 14px; max-height: 60dvh; overflow: auto; }
.lo-pick { display: flex; flex-direction: column; gap: 3px; padding: 0 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.lo-pick:hover { border-color: var(--t-loadout); }
.lo-pick .si-thumb { height: 110px; } .lo-pick strong, .lo-pick .si-muted { padding: 0 10px; font-size: 13.5px; }
@media (max-width: 900px) { .lo-side { width: auto; } }

/* ---------- Stage Plot (rose) and Labels (violet): placeholder pages, added 2026-10-19 ---------- */
:root, :root[data-theme="dark"] { --t-stageplot: #f0607e; --t-labels: #9a86f5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-stageplot: #f0607e; --t-labels: #9a86f5; } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t-stageplot: #cc3557; --t-labels: #6a50d8; } }
:root[data-theme="light"] { --t-stageplot: #cc3557; --t-labels: #6a50d8; }
.tool-ico.stageplot, .page-link.stageplot .pl-ico, .tab.stageplot svg, .tool-card.stageplot .top svg, .soon-page.stageplot { color: var(--t-stageplot); }
.tool-ico.labels, .page-link.labels .pl-ico, .tab.labels svg, .tool-card.labels .top svg, .soon-page.labels { color: var(--t-labels); }
.page-links .page-link.stageplot .pl-ico, #view-list .openin .tool-ico.stageplot, .page-links .page-link.labels .pl-ico, #view-list .openin .tool-ico.labels { border-color: var(--hline); }
.page-links .page-link.stageplot:hover .pl-ico, #view-list .openin .tool-ico.stageplot:hover, .page-links .page-link.labels:hover .pl-ico, #view-list .openin .tool-ico.labels:hover { border-color: currentColor; }
#view-other .top-tabs .tab.ico.stageplot { --pc: var(--t-stageplot); --pfg: #ffffff; }
#view-other .top-tabs .tab.ico.labels { --pc: var(--t-labels); --pfg: #ffffff; }
.soon-page { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 72px 16px; text-align: center; }
.soon-page .soon-ico { display: block; width: 56px; height: 56px; margin-bottom: 8px; }
.soon-page .soon-ico svg { width: 100%; height: 100%; }
.soon-page strong { color: var(--fg); font-size: 19px; font-weight: 600; }
.soon-page span:last-child { color: var(--muted); font-size: 14px; }

/* ---------- Paths: network ---------- */
.pa-mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; }
.pa-nissue { fill: none; pointer-events: none; opacity: .45; stroke-linejoin: round; }
.pa-nissue.bad { stroke: var(--bad); }
.pa-nissue.warn { stroke: #e8c13a; }
.pa-ndot { stroke: var(--pa-bg); }
.pa-ndot.online { fill: #57c05f; }
.pa-ndot.offline { fill: var(--bad); }
.pa-ndot.untested { fill: var(--muted); }
.pa-iplbl { font: 500 11px "JetBrains Mono", ui-monospace, Menlo, monospace; fill: var(--muted); pointer-events: none; }
.pa-ipnote { display: block; margin: -2px 0 6px 92px; line-height: 1.4; }
.pa-testbtn { gap: 6px; }
.pa-ntverdict { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); font-size: 13px; line-height: 1.4; }
.pa-ntverdict.ok { border-color: color-mix(in srgb, #57c05f 55%, var(--line)); }
.pa-ntverdict.ok .pa-ck-ico { background: #57c05f; color: #0e2a12; }
.pa-ntverdict.warn { border-color: color-mix(in srgb, #e8c13a 55%, var(--line)); }
.pa-ntverdict.warn .pa-ck-ico { background: #e8c13a; color: #2b2306; }
.pa-ntverdict.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.pa-ntverdict.bad .pa-ck-ico { background: var(--bad); color: #fff; }
.pa-ntrows { margin: 0; display: grid; }
.pa-ntrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.pa-ntrow:last-child { border-bottom: 0; }
.pa-ntrow dt { color: var(--muted); }
.pa-ntrow dd { margin: 0; }
.pa-ntpill { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--raise); font: 12px "JetBrains Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.pa-ntpill.ok { background: color-mix(in srgb, #57c05f 24%, transparent); }
.pa-ntpill.warn { background: color-mix(in srgb, #e8c13a 30%, transparent); }
.pa-ntpill.bad { background: color-mix(in srgb, var(--bad) 28%, transparent); font-weight: 600; }

/* ---------- P-touch labels ---------- */

/* ---------- Labels page ---------- */
.labels-page { display: grid; gap: 12px; padding-bottom: 24px; }
.lb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-grow { flex: 1; }
.lb-bar .btn { height: 34px; padding: 0 14px; font-size: 14px; }
.lb-bar .btn.primary, .labels-page .lb-empty .btn.primary { background: var(--t-labels); color: #fff; }
.lb-bar .btn:disabled { opacity: .45; cursor: default; }
.lb-danger { color: var(--bad); }
.lb-ro { font-size: 13px; color: var(--muted); }
.lb-in { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); color: var(--fg); font: inherit; font-size: 14px; box-sizing: border-box; min-width: 0; }
.lb-in:focus { outline: none; border-color: var(--t-labels); box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-labels) 25%, transparent); }
.lb-num { width: 64px; font-variant-numeric: tabular-nums; }
.lb-gap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.lb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--raise); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
.lb-chip[aria-pressed="true"] { border-color: var(--t-labels); background: color-mix(in srgb, var(--t-labels) 18%, var(--raise)); font-weight: 600; }
.lb-chip-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-status:empty { display: none; }
.lb-status { font-size: 13px; color: var(--muted); }
.lb-list { display: grid; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.lb-head, .lb-row { display: grid; grid-template-columns: 28px minmax(220px, 340px) minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 10px 14px; }
.lb-head { align-items: center; padding-block: 8px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.lb-total { text-transform: none; letter-spacing: 0; font-family: inherit; font-weight: 400; font-variant-numeric: tabular-nums; }
.lb-ghead { padding: 8px 14px 6px 56px; font-size: 13px; font-weight: 600; color: var(--t-labels); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--t-labels) 6%, var(--panel)); }
.lb-row { border-bottom: 1px solid var(--line); }
.lb-row:last-child { border-bottom: 0; }
.lb-row.sel { background: color-mix(in srgb, var(--t-labels) 9%, var(--panel)); }
.lb-ck { display: grid; place-items: center; height: 34px; }
.lb-ck input { width: 16px; height: 16px; accent-color: var(--t-labels); }
.lb-edit { display: grid; gap: 6px; min-width: 0; }
.lb-text { width: 100%; resize: vertical; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13.5px; line-height: 1.45; }
.lb-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lb-cp { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 13px; }
.lb-cp .lb-num { width: 52px; padding: 4px 6px; font-size: 13px; }
.lb-grp { width: 110px; padding: 4px 8px; font-size: 13px; }
.lb-pcol { min-width: 0; display: grid; gap: 4px; }
.lb-prev { padding: 0; }
.lb-pinfo { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-printed { padding: 1px 7px; border-radius: 9px; background: color-mix(in srgb, #57c05f 22%, transparent); color: var(--fg); }
.lb-acts { display: flex; gap: 2px; }
.lb-empty { display: grid; justify-items: center; gap: 10px; padding: 44px 16px 48px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
.lb-empty strong { color: var(--fg); font-size: 17px; }
.lb-empty > span { max-width: 52ch; }
.lb-empty-tape { padding: 9px 26px; background: #fff; color: #111; border-radius: 3px; box-shadow: 0 0 0 1px var(--line), 0 6px 18px -10px rgba(0,0,0,.35); font: 600 22px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .02em; transform: rotate(-2deg); margin-bottom: 6px; }
.modal.lb-modal { width: min(620px, calc(100vw - 32px)); max-width: none; }
.lb-mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 12px; align-items: end; }
.lb-mgrid .wide { grid-column: 1 / -1; }
.lb-mgrid .lb-in, .lb-modal textarea.lb-in { width: 100%; }
.lb-flagchk { margin: 0 0 8px; }
.lb-mprevbox { display: grid; gap: 4px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.lb-mlbl { font-size: 12px; color: var(--muted); }
.lb-mprev { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; }
.lb-mprev .more { color: var(--muted); }
.lb-fpopt { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.lb-fpopt input { margin-top: 3px; accent-color: var(--t-labels); }
.lb-fpopt > span:nth-child(2) { display: grid; gap: 2px; }
.lb-fpsub { font-size: 12.5px; color: var(--muted); }
.lb-fpex { grid-column: 2; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .lb-head .lb-h-prev { display: none; }
  .lb-head { grid-template-columns: 28px 1fr auto; }
  .lb-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .lb-row .lb-pcol { grid-column: 2 / -1; grid-row: 2; }
  .lb-row .lb-acts { grid-column: 3; grid-row: 1; flex-direction: column; }
  .lb-bar .lb-grow { display: none; }
}

/* ---------- Load Out: blank canvas, shapes and text labels ---------- */
:root { --lo-paper: #fbfbf9; --lo-rule: #e3e5e8; --lo-rule2: #cfd3d8; --lo-draw: #1b1e23; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lo-paper: #1c1f24; --lo-rule: #2a2e35; --lo-rule2: #363b44; } }
:root[data-theme="dark"] { --lo-paper: #1c1f24; --lo-rule: #2a2e35; --lo-rule2: #363b44; }
.lo-page.lo-isblank { --lo-draw: #1b1e23; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lo-page.lo-isblank { --lo-draw: #e8eaed; } }
:root[data-theme="dark"] .lo-page.lo-isblank { --lo-draw: #e8eaed; }
.si-img.lo-blank { background-color: var(--lo-paper); }
.si-img.lo-blank.bg-grid { background-image: linear-gradient(var(--lo-rule2) 3px, transparent 3px), linear-gradient(90deg, var(--lo-rule2) 3px, transparent 3px), linear-gradient(var(--lo-rule) 2px, transparent 2px), linear-gradient(90deg, var(--lo-rule) 2px, transparent 2px); background-size: var(--g25, 250px) var(--g25, 250px), var(--g25, 250px) var(--g25, 250px), var(--g5, 50px) var(--g5, 50px), var(--g5, 50px) var(--g5, 50px); background-position: -1px -1px; }
.si-img.lo-blank.bg-dots { background-image: radial-gradient(circle, var(--lo-rule2) 4px, transparent 4.5px); background-size: var(--g5, 50px) var(--g5, 50px); background-position: calc(var(--g5, 50px) / -2) calc(var(--g5, 50px) / -2); }
.lo-bthumbbox { background: var(--lo-paper); padding: 8px; box-sizing: border-box; }
.lo-bthumb { width: 100%; height: 100%; }
.lo-bt-bg { fill: var(--lo-paper); stroke: var(--lo-rule2); stroke-width: 6; }
.lo-introacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lo-shape { position: absolute; pointer-events: auto; box-sizing: border-box; border: 2px solid var(--pc); background: color-mix(in srgb, var(--pc) 22%, transparent); cursor: move; display: grid; place-items: center; }
.lo-shape.sh-round { border-radius: 14px; }
.lo-shape.sh-ellipse { border-radius: 50%; }
.lo-shape.fill-solid { background: var(--pc); }
.lo-shape.fill-outline { background: transparent; }
.lo-shape.sel { box-shadow: 0 0 0 2px var(--accent); z-index: 1; }
.lo-shlabel { padding: 0 4%; max-width: 100%; box-sizing: border-box; text-align: center; color: var(--ink); font-weight: 600; line-height: 1.1; overflow: hidden; overflow-wrap: anywhere; pointer-events: none; }
.lo-text { position: absolute; z-index: 2; pointer-events: auto; white-space: pre; font-weight: 600; line-height: 1.15; text-align: center; cursor: move; padding: 1px 3px; border-radius: 3px; }
.lo-text.empty { opacity: .45; font-style: italic; }
.lo-text.sel { outline: 2px solid var(--accent); outline-offset: 2px; }
.lo-ghost.round { border-radius: 50%; }
.lo-poprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lo-seg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lo-seg .si-alabel { min-width: 64px; }
.lo-sb { padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); color: var(--fg); font: inherit; font-size: 12.5px; cursor: pointer; }
.lo-sb[aria-pressed="true"] { border-color: var(--t-loadout); background: color-mix(in srgb, var(--t-loadout) 20%, var(--raise)); font-weight: 600; }
.si-swb.auto { background: linear-gradient(135deg, #1b1e23 0 50%, #fff 50% 100%); }
.lo-dot.txt { display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.lo-bgpick .btn { height: 32px; padding: 0 10px; font-size: 13px; }
.lo-bgpick .btn[aria-pressed="true"] { background: color-mix(in srgb, var(--t-loadout) 20%, var(--raise)); font-weight: 600; }

/* ---------- Page dock (top bar): icons magnified under the pointer, name shown on hover ---------- */
#view-other .topbar .top-tabs.dock { gap: 0; align-items: flex-start; height: 46px; padding: 0 6px; flex-wrap: nowrap; }
#view-other .topbar .top-tabs.dock .tab.ico { --s: 1; position: relative; flex: none; display: block; width: calc(46px + 38px * (var(--s) - 1)); height: 46px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--fg); text-decoration: none; transition: width .14s ease-out; }
#view-other .topbar .top-tabs.dock .tab.ico:hover { background: none; z-index: 3; }
#view-other .top-tabs.dock .dk-ico { position: absolute; left: 50%; top: 6px; width: 34px; height: 34px; margin-left: -17px; display: grid; place-items: center; box-sizing: border-box; border-radius: 10px; background: color-mix(in srgb, var(--pc, var(--accent)) 14%, var(--card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc, var(--accent)) 30%, var(--sep)); transform: scale(var(--s)); transform-origin: 50% 0; transition: transform .14s ease-out, background .15s; z-index: 1; }
#view-other .top-tabs.dock.dk-live .dk-ico, #view-other .top-tabs.dock.dk-live .tab.ico { transition-duration: .06s; }
#view-other .topbar .top-tabs.dock .tab.ico svg { width: 21px; height: 21px; }
/* The name: a small label under the icon, only while it's hovered or focused */
#view-other .top-tabs.dock .dk-lbl { position: absolute; left: 50%; top: calc(46px + 34px * (var(--s) - 1)); transform: translate(-50%, -3px); opacity: 0; visibility: hidden; white-space: nowrap; padding: 3px 9px; border-radius: 7px; background: rgba(22,24,28,.88); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.25; letter-spacing: .01em; box-shadow: 0 4px 14px -4px rgba(0,0,0,.45); pointer-events: none; transition: opacity .12s, transform .12s, visibility 0s .12s; z-index: 4; }
#view-other .top-tabs.dock .tab.ico:hover .dk-lbl, #view-other .top-tabs.dock .tab.ico:focus-visible .dk-lbl { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .12s, transform .12s; }
#view-other .topbar .top-tabs.dock .tab.ico[aria-current="page"] { background: none; }
#view-other .top-tabs.dock .tab.ico[aria-current="page"] .dk-ico { background: var(--pc, var(--accent)); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--pc, var(--accent)) 70%, transparent); }
#view-other .top-tabs.dock .tab.ico[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--muted); }
#view-other .top-tabs.dock .tab.ico:focus-visible { outline: none; }
#view-other .top-tabs.dock .tab.ico:focus-visible .dk-ico { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Too narrow to sit beside the breadcrumbs: the dock takes its own row under them */
@media (max-width: 1279px) {
  #view-other .topbar { flex-wrap: wrap; }
  #view-other .topbar .top-tabs.dock { position: static; transform: none; order: 4; flex-basis: 100%; margin: 4px 0 0; justify-content: center; overflow: visible; }
}
/* Phones and touch screens: no hover, so the names stay visible and the row scrolls */
@media (hover: none), (max-width: 699px) {
  #view-other .topbar .top-tabs.dock { justify-content: flex-start; height: 62px; overflow-x: auto; scrollbar-width: none; }
  #view-other .topbar .top-tabs.dock::-webkit-scrollbar { display: none; }
  #view-other .topbar .top-tabs.dock .tab.ico { width: 66px; height: 62px; }
  #view-other .top-tabs.dock .dk-lbl { top: 44px; opacity: 1; visibility: visible; transform: translateX(-50%); padding: 0; background: none; box-shadow: none; color: var(--muted); font-size: 10px; }
  #view-other .top-tabs.dock .tab.ico[aria-current="page"] .dk-lbl { color: var(--fg); font-weight: 600; }
  #view-other .top-tabs.dock .tab.ico[aria-current="page"]::after { display: none; }
}

/* Load Out trucks: a trailer with its tractor, to scale */
.lo-tractor { position: absolute; top: 50%; pointer-events: auto; display: block; }
.lo-tractor-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lo-tractor-svg * { vector-effect: none; }
.lo-tr-shadow { fill: #000; opacity: .16; }
.lo-tr-rail { fill: #34363a; }
.lo-tr-cross { stroke: #2a2b2e; stroke-width: 3; fill: none; }
.lo-tr-tire { fill: #1a1b1e; stroke: #5d6168; stroke-width: 1; }
.lo-tr-tread { stroke: #3d4046; stroke-width: 1.2; fill: none; }
.lo-tr-flap { fill: #101113; }
.lo-tr-deck { fill: #6b6f76; stroke: #4a4d53; stroke-width: 1; }
.lo-tr-fifth { fill: #2c2d31; stroke: #8f949b; stroke-width: 1.5; }
.lo-tr-slot { fill: #0d0e10; }
.lo-tr-pin { fill: #b7bbc1; }
.lo-tr-tank { fill: #c8ccd2; stroke: #8a8f97; stroke-width: 1; }
.lo-tr-shine { stroke: #f4f6f8; stroke-width: 2; stroke-linecap: round; opacity: .9; fill: none; }
.lo-tr-strap { stroke: #6f747b; stroke-width: 1.6; fill: none; }
.lo-tr-step { fill: #3a3c40; }
.lo-tr-body { fill: var(--pc); stroke: color-mix(in srgb, var(--pc) 55%, #000); stroke-width: 1.6; }
.lo-tr-roof { fill: color-mix(in srgb, var(--pc) 72%, #fff); stroke: color-mix(in srgb, var(--pc) 75%, #000); stroke-width: .8; }
.lo-tr-vent { fill: color-mix(in srgb, var(--pc) 40%, #555); opacity: .7; }
.lo-tr-edge { stroke: color-mix(in srgb, var(--pc) 45%, #000); stroke-width: 2; fill: none; }
.lo-tr-stack { fill: #dfe2e6; stroke: #7d828a; stroke-width: 1.4; }
.lo-tr-amber { fill: #ffb43a; }
.lo-tr-glass { fill: #1d2a38; stroke: #0f151c; stroke-width: 1; }
.lo-tr-pillar { stroke: #0f151c; stroke-width: 1.4; fill: none; }
.lo-tr-glint { stroke: #9fb8d0; stroke-width: 1.4; stroke-linecap: round; opacity: .55; fill: none; }
.lo-tr-arm { stroke: #2a2b2e; stroke-width: 1.8; fill: none; }
.lo-tr-mirror { fill: #2a2b2e; stroke: #8f949b; stroke-width: .8; }
.lo-tr-fender { fill: color-mix(in srgb, var(--pc) 70%, #000); }
.lo-tr-hood { fill: color-mix(in srgb, var(--pc) 88%, #fff); stroke: color-mix(in srgb, var(--pc) 55%, #000); stroke-width: 1.6; }
.lo-tr-crease { stroke: color-mix(in srgb, var(--pc) 50%, #000); stroke-width: 1.2; opacity: .45; fill: none; }
.lo-tr-lamp { fill: #f7f3d6; stroke: #8f949b; stroke-width: .6; }
.lo-tr-grille { fill: #c9ccd1; }
.lo-tr-bumper { fill: #d7dadf; stroke: #848990; stroke-width: 1; }
/* Drag-select box, preselection, snap guides, Space to pan */
.lo-marquee { position: absolute; z-index: 5; pointer-events: none; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 2px; }
.lo-pre { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent) !important; }
.lo-guide { position: absolute; z-index: 6; pointer-events: none; }
.lo-guide.v { width: 0; border-left: 1.5px dashed #ff3d8b; }
.lo-guide.h { height: 0; border-top: 1.5px dashed #ff3d8b; }
.lo-gap.h { height: 9px; margin-top: -5px; border: 0; border-left: 1.5px solid #ff3d8b; border-right: 1.5px solid #ff3d8b; box-sizing: border-box; background: linear-gradient(#ff3d8b, #ff3d8b) center / 100% 1.5px no-repeat; }
.lo-gap.v { width: 9px; margin-left: -5px; border: 0; border-top: 1.5px solid #ff3d8b; border-bottom: 1.5px solid #ff3d8b; box-sizing: border-box; background: linear-gradient(#ff3d8b, #ff3d8b) center / 1.5px 100% no-repeat; }
.si-canvas.lo-spacepan, .si-canvas.lo-spacepan * { cursor: grab !important; }
.si-canvas.lo-spacepan.si-panning, .si-canvas.lo-spacepan.si-panning * { cursor: grabbing !important; }
.lo-page .si-canvas:not(.si-placing):not(.lo-spacepan) { cursor: default; }
.lo-scale { position: absolute; left: 70px; bottom: 10px; z-index: 4; padding: 3px 9px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.lo-scale:hover:not(:disabled) { color: var(--fg); border-color: var(--muted); }
.lo-scale:disabled { cursor: default; }
.lo-scalehelp { font-size: 12.5px; line-height: 1.4; }
.lo-trailer { justify-content: space-between; }
.lo-lensel { flex: 1; min-width: 0; }
.lo-cabchk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.lo-cabchk input { accent-color: var(--t-loadout); }

/* A stack of trucks sharing floor space: one card, in load order */
.lo-stack { position: absolute; z-index: 3; transform: translate(-50%, -50%); min-width: 150px; max-width: 280px; padding: 5px; border-radius: 9px; background: rgba(20,22,26,.9); color: #fff; box-shadow: 0 4px 16px -6px rgba(0,0,0,.6); pointer-events: auto; font-size: 12px; }
.lo-stackhead { display: flex; justify-content: space-between; gap: 8px; padding: 1px 4px 4px; font-weight: 600; font-size: 11.5px; letter-spacing: .02em; }
.lo-stackn { font-weight: 400; opacity: .7; white-space: nowrap; }
.lo-stackrow { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; cursor: move; white-space: nowrap; }
.lo-stackrow:hover { background: rgba(255,255,255,.1); }
.lo-stackrow.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.lo-stackrow .lo-tname { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.lo-stackarr { opacity: .65; font-size: 11px; font-variant-numeric: tabular-nums; }

/* Load Out: draw from a picture */
.modal.lo-drawbox { width: min(520px, calc(100vw - 32px)); max-width: none; }
.lo-drawthumb:empty { display: none; }
.lo-drawthumb img { display: block; max-height: 220px; margin: 0 auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.lo-drawrow { display: flex; align-items: center; gap: 10px; }
.lo-drawstatus { margin: 0; font-size: 14px; color: var(--muted); }
.lo-drawstatus.err { color: var(--bad); }
.lo-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--t-loadout) 30%, transparent); border-top-color: var(--t-loadout); animation: pa-spin .8s linear infinite; }
.lo-magicbtn svg { color: var(--t-loadout); }
.lo-ref { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; pointer-events: none; transition: opacity .2s; }
.lo-blank.ref-on .lo-ref { opacity: .4; }
.lo-reftoggle[aria-pressed="true"] { background: color-mix(in srgb, var(--t-loadout) 20%, var(--raise)); font-weight: 600; }
/* Load Out: text tools */
.lo-ttools { display: grid; gap: 6px; }
.lo-fmt { display: inline-flex; gap: 3px; }
.lo-fb { min-width: 28px; height: 28px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); color: var(--fg); font: inherit; font-size: 13.5px; cursor: pointer; }
.lo-fb svg { width: 16px; height: 16px; }
.lo-fb[aria-pressed="true"] { border-color: var(--t-loadout); background: color-mix(in srgb, var(--t-loadout) 22%, var(--raise)); }
.lo-fb-b { font-weight: 800; } .lo-fb-i { font-style: italic; font-family: Georgia, serif; } .lo-fb-u { text-decoration: underline; }
.lo-fb-bg { background: linear-gradient(transparent 55%, color-mix(in srgb, #e8c13a 70%, transparent) 55%); font-weight: 700; }
.lo-fb-bg[aria-pressed="true"] { background: color-mix(in srgb, #e8c13a 55%, var(--raise)); }
.lo-level { font-size: 12px; }
.lo-range, .lo-angle { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.lo-angle { grid-template-columns: 52px minmax(0, 1fr) auto; }
.lo-angle .lo-fmt { grid-column: 2 / -1; }
.lo-range input[type=range], .lo-angle input[type=range] { width: 100%; accent-color: var(--t-loadout); }
.lo-rv { font-size: 12.5px; color: var(--muted); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.lo-angbox { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); }
.lo-angnum { width: 54px; padding: 4px 4px; font-variant-numeric: tabular-nums; }
.lo-angle .lo-angbox { margin-right: 2px; }
.lo-pop .lo-range { grid-template-columns: 52px minmax(0, 1fr) auto; }
.lo-text.hl { background: color-mix(in srgb, #fff3b0 88%, transparent); color: #1b1e23 !important; padding: 1px 6px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.lo-text .lo-rot { top: -30px; }

/* Load Out: tour cities */
.lo-citybox { display: inline-flex; align-items: center; gap: 0; position: relative; }
.lo-cityico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--t-loadout); pointer-events: none; }
.lo-cityico svg { width: 16px; height: 16px; display: block; }
.lo-citysel { padding-left: 32px !important; padding-right: 34px !important; min-width: 220px; max-width: 340px; font-weight: 600; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 11px; }
@media (max-width: 700px) { .lo-citysel { min-width: 170px; } }
.lo-cityhold { display: inline-flex; }
.lo-citylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lo-citylist li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.lo-cl-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.lo-citypick { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.lo-cpick { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--raise); color: var(--fg); font: inherit; cursor: pointer; }
.lo-cpick:hover:not(:disabled) { border-color: var(--t-loadout); }
.lo-cpick.cur { border-color: var(--t-loadout); }
.lo-cpick:disabled { opacity: .5; cursor: default; }
.lo-cpick.add { border-style: dashed; color: var(--muted); }
.lo-danger { color: var(--bad); }

.lo-stackname { all: unset; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 4px; padding: 0 3px; margin-left: -3px; max-width: 150px; }
.lo-stackname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-stackname svg { width: 12px; height: 12px; opacity: .55; flex: none; }
.lo-stackname:hover { background: rgba(255,255,255,.12); }
.lo-stackname:hover svg { opacity: 1; }
.lo-stackname:focus-visible { outline: 2px solid var(--accent); }
.lo-ghstack strong { display: inline-flex; align-items: center; gap: 4px; }
.lo-ghedit { width: 22px; height: 22px; }
.lo-ghedit svg { width: 14px; height: 14px; }

/* Load Out: color tools */
.lo-colors { display: grid; gap: 8px; }
.lo-crow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lo-custom { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); font-size: 12.5px; cursor: pointer; }
.lo-custom:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.lo-cpick-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.lo-cwell { width: 18px; height: 18px; border-radius: 4px; background: conic-gradient(#e5534b, #e8c13a, #57c05f, #2fb5a6, #4a94f8, #a57be4, #e86aa6, #e5534b); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.lo-hexbox { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--muted); }
.lo-hex { width: 78px; padding: 4px 6px; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; text-transform: uppercase; }
.lo-hex.bad { border-color: var(--bad); }
.lo-eye svg { width: 16px; height: 16px; }

.lo-ccopy { margin: 2px 0 0; align-items: flex-start; line-height: 1.4; }
.lo-ccopy input { margin-top: 2px; }

/* Load Out: truck names as pills inside the trailer when trucks are parked close together */
.lo-pills { position: absolute; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; font-size: 12px; pointer-events: none; white-space: nowrap; }
.lo-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: .35em; max-width: 100%; box-sizing: border-box; padding: .1em .6em .1em .15em; border-radius: 999px; background: rgba(20,22,26,.86); color: #fff; font-weight: 500; line-height: 1.45; cursor: move; }
.lo-pill.solo { padding-left: .6em; }
.lo-pill .lo-tname { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lo-pill .lo-num { min-width: 1.45em; height: 1.45em; padding: 0 .3em; font-size: .9em; border-width: 1px; }
.lo-pill.sel { box-shadow: 0 0 0 2px var(--accent); }
/* Paths: draggable divider between the canvas and the properties panel */
.pa-body { gap: 0; }
.pa-split { flex: none; width: 12px; cursor: col-resize; position: relative; touch-action: none; outline: none; }
.pa-split::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 2px; background: var(--line); transition: background .15s, height .15s; }
.pa-split:hover::after, .pa-split.on::after, .pa-split:focus-visible::after { background: var(--accent); height: 72px; margin-top: -36px; }
body.pa-resizing, body.pa-resizing * { cursor: col-resize !important; user-select: none !important; }
@media (max-width: 900px) { .pa-split { display: none; } .pa-panel { width: auto !important; } .pa-body { gap: 12px; } }
/* Dashboard: project lock */
.lock-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; vertical-align: middle; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; opacity: .45; transition: opacity .15s, background .15s; }
.lock-btn svg { width: 15px; height: 15px; }
tr:hover .lock-btn, .lock-btn:focus-visible { opacity: 1; }
.lock-btn:hover { background: var(--hover, color-mix(in srgb, var(--fg) 8%, transparent)); color: var(--fg); }
.lock-btn.on { opacity: 1; color: var(--bad); }
/* Load Out: undo/redo and tours */
.lo-undogrp .btn { width: 34px; height: 34px; padding: 0; justify-content: center; display: inline-flex; align-items: center; }
.lo-undogrp .btn svg { width: 17px; height: 17px; }
.lo-undogrp .btn:disabled { opacity: .4; }
.lo-tourmodal { width: min(560px, 94vw); }
.lo-tourrow { display: flex; gap: 8px; }
.lo-tourrow input { flex: 1; min-width: 0; }
.lo-tourrow .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lo-tourrow .btn svg { width: 15px; height: 15px; }
.lo-tourhelp { margin: -4px 0 10px; font-size: 13px; }
.lo-tourstat:empty { display: none; }
.lo-tourstat { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--t-loadout) 10%, var(--raise)); border: 1px solid color-mix(in srgb, var(--t-loadout) 35%, var(--line)); }
.lo-tourline { margin: 4px 0; font-size: 13px; line-height: 1.4; }
.lo-tourline.failed span, .lo-tourline.none span { color: var(--muted); }
.lo-tourmodal textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; }
.lo-tourchk { margin: 2px 0 12px; align-items: flex-start; }
.lo-tourchk input:disabled + span { color: var(--muted); }
/* ---------- Labels designer (like P-touch Editor for Mac) ---------- */
.lb-host { min-width: 0; }
.lbd { --lbd-ruler: color-mix(in srgb, var(--panel) 70%, var(--bg)); --lbd-tick: var(--muted); --lbd-desk: color-mix(in srgb, var(--bg) 82%, #000);
  display: flex; flex-direction: column; height: calc(100dvh - 128px); min-height: 520px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); position: relative; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lbd { --lbd-desk: #d9dce1; } }
:root[data-theme="light"] .lbd { --lbd-desk: #d9dce1; }
.lbd-bar { display: flex; align-items: flex-end; gap: 4px; padding: 6px 10px 4px; border-bottom: 1px solid var(--line); background: var(--panel); overflow-x: auto; scrollbar-width: none; flex: none; }
.lbd-bar::-webkit-scrollbar { display: none; }
.lbd-grow { flex: 1 1 8px; min-width: 6px; }
.lbd-tb { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; padding: 4px 6px 2px; border: 0; border-radius: 7px; background: none; color: var(--fg); cursor: pointer; white-space: nowrap; }
.lbd-tb:hover { background: var(--raise); }
.lbd-tb:disabled { opacity: .4; cursor: default; }
.lbd-tbi { display: inline-flex; align-items: center; height: 22px; color: var(--muted); }
.lbd-tbi svg { width: 21px; height: 21px; }
.lbd-tb:hover .lbd-tbi { color: var(--fg); }
.lbd-tbl { font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.lbd-car svg { width: 12px; height: 12px; }
.lbd-tbi .lbd-car { margin-left: 1px; }
.lbd-ins { display: flex; gap: 0; }
.lbd-grp { display: inline-flex; align-self: center; gap: 2px; margin: 0 4px; }
.lbd-ib { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--fg); cursor: pointer; }
.lbd-ib:hover:not(:disabled) { background: var(--raise); }
.lbd-ib:disabled { opacity: .35; cursor: default; }
.lbd-ib svg { width: 17px; height: 17px; }
.lbd-zoom { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 8px; }
.lbd-zctl { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--raise); }
.lbd-zctl .lbd-ib { width: 30px; height: 24px; border-radius: 0; }
.lbd-zlbl { min-width: 58px; height: 24px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: none; color: var(--fg); font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.lbd-mode { display: inline-flex; align-self: center; margin-left: 8px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; flex: none; }
.lbd-mode button { height: 28px; padding: 0 12px; border: 0; background: none; color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap; }
.lbd-mode button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.lb-modebar { display: flex; align-items: center; gap: 12px; }
.lb-modeinfo { flex: 1; color: var(--muted); font-size: 13px; }
.lbd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr) 292px; }
.lbd-body.no-left { grid-template-columns: 0 minmax(0, 1fr) 292px; }
.lbd-body.no-right { grid-template-columns: 236px minmax(0, 1fr) 0; }
.lbd-body.no-left.no-right { grid-template-columns: 0 minmax(0, 1fr) 0; }
.lbd-body.no-left .lbd-left, .lbd-body.no-right .lbd-right { display: none; }
.lbd-left, .lbd-right { min-height: 0; overflow-y: auto; background: var(--panel); }
.lbd-left { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 4px 16px 16px; }
.lbd-right { border-left: 1px solid var(--line); padding: 0 14px 16px; }
.lbd-sec { padding: 12px 0; border-bottom: 1px solid var(--line); }
.lbd-sec h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.lbd-sec.lbd-inline { display: flex; align-items: center; gap: 8px; }
.lbd-sec.lbd-inline h3 { margin: 0; flex: 1; }
.lbd-row { display: flex; align-items: center; gap: 6px; }
.lbd-row.wrap { flex-wrap: wrap; margin-top: 6px; }
.lbd-dd, .lbd-in, .lbd-num { height: 28px; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); color: var(--fg); font-size: 13px; padding: 0 8px; }
.lbd-dd { flex: 1; padding-right: 4px; }
.lbd-in { width: 100%; }
.lbd-ta { height: auto; padding: 6px 8px; resize: vertical; font-family: inherit; line-height: 1.35; }
.lbd-num { width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.lbd-dd:disabled, .lbd-num:disabled, .lbd-in:disabled { opacity: .55; }
.lbd-u { color: var(--muted); font-size: 12px; }
.lbd-pick { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 30px; padding: 0 8px 0 10px; border: 0; border-radius: 6px; background: var(--raise); color: var(--fg); font-size: 13px; text-align: left; cursor: pointer; }
.lbd-pick span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbd-pick .lbd-car { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 4px; background: var(--accent); color: var(--accent-fg); flex: none; }
.lbd-pstat { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.lbd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.lbd-dot.ok { background: var(--ok); } .lbd-dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.lbd-link { border: 0; background: none; color: var(--accent); font-size: 12.5px; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.lbd-tapeico { position: relative; width: 34px; height: 20px; flex: none; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.lbd-tapeico span { position: absolute; left: 7px; top: 3px; bottom: 3px; width: 2px; background: #333; }
.lbd-tapeico span::before, .lbd-tapeico span::after { content: ""; position: absolute; left: -3px; width: 8px; height: 2px; background: #333; }
.lbd-tapeico span::before { top: 0; } .lbd-tapeico span::after { bottom: 0; }
.lbd-lenico { position: relative; width: 34px; height: 20px; flex: none; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.lbd-lenico::before { content: ""; position: absolute; left: 4px; right: 4px; top: 9px; height: 2px; background: #333; }
.lbd-chk { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; color: var(--fg); cursor: pointer; line-height: 1.3; }
.lbd-chk input { flex: none; margin: 0; accent-color: var(--accent); }
.lbd-colorbtn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); }
.lbd-abc { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 24px; padding: 0 8px; font: 600 14px/1 var(--font-ui); border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.lbd-buy { margin-top: 12px; text-align: center; justify-content: center; }
/* center: rulers, desk and label */
.lbd-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.lbd-rulers { flex: 1; min-height: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: 22px minmax(0, 1fr); }
.lbd-corner { grid-row: 1; grid-column: 1; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--lbd-ruler); color: var(--muted); font-size: 9px; padding: 0; cursor: pointer; }
.lbd-hr { grid-row: 1; grid-column: 2; width: 100%; height: 22px; display: block; border-bottom: 1px solid var(--line); }
.lbd-vr { grid-row: 2; grid-column: 1; width: 22px; height: 100%; display: block; border-right: 1px solid var(--line); }
.lbd-scroll { grid-row: 2; grid-column: 2; overflow: auto; background: var(--lbd-desk); position: relative; }
.lbd-sizer { position: relative; }
.lbd-paper { position: absolute; outline: none; }
.lbd-tape { box-sizing: content-box; display: inline-block; border-radius: 3px; box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.28); }
.lbd-canvas { display: block; }
.lbd-paper:focus-visible .lbd-tape { box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(0,0,0,.28); }
.lbd-overlay { position: absolute; }
.lbd-selbox { position: absolute; box-shadow: 0 0 0 1.5px var(--accent); pointer-events: none; }
.lbd-selbox.locked { box-shadow: 0 0 0 1.5px var(--warn); }
.lbd-selbox.noprint { box-shadow: 0 0 0 1.5px var(--muted); background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(128,128,128,.12) 6px 7px); }
.lbd-h { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px #fff; pointer-events: auto; touch-action: none; }
.lbd-h.nw { left: 0; top: 0; cursor: nwse-resize; } .lbd-h.n { left: 50%; top: 0; cursor: ns-resize; } .lbd-h.ne { left: 100%; top: 0; cursor: nesw-resize; }
.lbd-h.e { left: 100%; top: 50%; cursor: ew-resize; } .lbd-h.se { left: 100%; top: 100%; cursor: nwse-resize; } .lbd-h.s { left: 50%; top: 100%; cursor: ns-resize; }
.lbd-h.sw { left: 0; top: 100%; cursor: nesw-resize; } .lbd-h.w { left: 0; top: 50%; cursor: ew-resize; }
.lbd-cellsel { position: absolute; background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 2px var(--accent); pointer-events: none; }
.lbd-marquee { position: absolute; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; }
.lbd-guide { position: absolute; pointer-events: none; background: #e5534b; }
.lbd-guide.v { top: -14px; bottom: -14px; width: 1px; } .lbd-guide.h { left: -14px; right: -14px; height: 1px; }
.lbd-paper { touch-action: none; user-select: none; -webkit-user-select: none; }
.lbd-edit { position: absolute; z-index: 5; box-sizing: border-box; margin: 0; padding: 0 2px; border: 1.5px solid var(--accent); border-radius: 2px; background: rgba(255,255,255,.96); color: #111; line-height: 1.12; resize: none; outline: none; overflow: hidden; user-select: text; -webkit-user-select: text; }
/* database pane */
.lbd-db { flex: none; max-height: 34%; min-height: 64px; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--panel); }
.lbd-db.empty { min-height: 64px; justify-content: center; }
.lbd-db.drop { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.lbd-dbempty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 13.5px; padding: 12px; }
.lbd-dbacts { display: flex; gap: 14px; }
.lbd-dbhead { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; flex: none; }
.lbd-muted { color: var(--muted); font-size: 12.5px; }
.lbd-recn { font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 60px; text-align: center; }
.lbd-dbscroll { overflow: auto; min-height: 0; flex: 1; }
.lbd-dbt { border-collapse: collapse; font-size: 12.5px; width: max-content; min-width: 100%; }
.lbd-dbt th, .lbd-dbt td { padding: 4px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.lbd-dbt th { position: sticky; top: 0; background: var(--raise); font-weight: 600; z-index: 1; }
.lbd-dbt .num { color: var(--muted); text-align: right; width: 1%; }
.lbd-dbt .ck { width: 1%; padding: 0 6px; }
.lbd-dbt tbody tr { cursor: pointer; }
.lbd-dbt tbody tr:hover { background: var(--raise); }
.lbd-dbt tr.cur td { background: var(--accent-soft); }
.lbd-dbt td .lbd-in { height: 24px; }
/* inspector */
.lbd-tabs { position: sticky; top: 0; z-index: 2; display: flex; justify-content: center; gap: 2px; padding: 10px 0; background: var(--panel); }
.lbd-tabs button, .lbd-tabs.one span { height: 24px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--raise); color: var(--muted); font-size: 13px; cursor: pointer; }
.lbd-tabs.one span { display: inline-flex; align-items: center; color: var(--fg); cursor: default; }
.lbd-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--fg) 18%, var(--raise)); color: var(--fg); }
.lbd-insp { display: flex; flex-direction: column; }
.lbd-grp2 { padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.lbd-grp2 > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; }
.lbd-grp2 > summary::-webkit-details-marker { display: none; }
.lbd-grp2 > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.lbd-grp2[open] > summary::before { transform: rotate(45deg); }
.lbd-grp2 > *:not(summary) + *:not(summary) { margin-top: 6px; }
.lbd-prow { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; }
.lbd-pl { text-align: right; font-size: 13px; color: var(--fg); }
.lbd-numw { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lbd-numw .lbd-dd { flex: 0 0 52px; }
.lbd-abtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 28px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); color: var(--fg); font-size: 13px; cursor: pointer; text-align: center; }
.lbd-abtn:hover { background: color-mix(in srgb, var(--fg) 10%, var(--raise)); }
.lbd-abi { display: inline-flex; color: var(--muted); } .lbd-abi svg { width: 16px; height: 16px; }
.lbd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lbd-addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lbd-alrow { display: flex; gap: 8px; }
.lbd-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--raise); }
.lbd-seg button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 26px; padding: 0 6px; border: 0; border-right: 1px solid var(--line); background: none; color: var(--fg); font-size: 13.5px; cursor: pointer; }
.lbd-seg button:last-child { border-right: 0; }
.lbd-seg button svg { width: 17px; height: 17px; }
.lbd-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.lbd-tip { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.lbd-err { margin: 2px 0 0; font-size: 12.5px; color: var(--bad); min-height: 0; }
.lbd-err:empty { display: none; }
.lbd-clipcur, .lbd-symcur { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 6px; background: var(--raise); font-size: 26px; }
.lbd-clipcur svg { width: 28px; height: 28px; }
.lbd-row .lbd-abtn { width: auto; flex: 1; }
/* pop-overs: symbols, clip art, shapes, frames, colors */
.lbd-pop { position: fixed; z-index: 60; max-width: min(420px, calc(100vw - 16px)); max-height: min(520px, calc(100vh - 16px)); overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.lbd-pop.wide { width: 420px; }
.lbd-poph { display: block; margin-bottom: 8px; font-size: 13.5px; }
.lbd-popg { margin-bottom: 10px; }
.lbd-popgl { display: block; margin-bottom: 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lbd-symgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 3px; }
.lbd-sym { height: 34px; border: 1px solid transparent; border-radius: 6px; background: var(--raise); color: var(--fg); font-size: 19px; cursor: pointer; }
.lbd-sym:hover, .lbd-clipb:hover, .lbd-frb:hover, .lbd-colb:hover { border-color: var(--accent); }
.lbd-clipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.lbd-clipb { display: inline-flex; align-items: center; justify-content: center; height: 44px; border: 1px solid transparent; border-radius: 6px; background: var(--raise); color: var(--fg); cursor: pointer; }
.lbd-clipb svg { width: 26px; height: 26px; } .lbd-clipb img { width: 34px; height: 34px; }
.lbd-framegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.lbd-framegrid.small { grid-template-columns: repeat(2, 1fr); }
.lbd-frb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border: 1px solid transparent; border-radius: 6px; background: var(--raise); color: var(--fg); font-size: 12px; cursor: pointer; }
.lbd-frb.on { border-color: var(--accent); }
.lbd-frb img { width: 100%; max-width: 120px; height: auto; }
.lbd-colorgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lbd-colb { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid transparent; border-radius: 6px; background: var(--raise); color: var(--fg); font-size: 12.5px; cursor: pointer; text-align: left; }
.lbd-colb.on { border-color: var(--accent); }
.lbd-colb .lbd-abc { min-width: 46px; height: 22px; font-size: 12px; }
/* print window */
.lbd-printmodal { width: min(640px, 94vw); }
.lbd-pchks { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 8px; }
.lbd-pprev { display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 10px; border-radius: 8px; background: var(--lbd-desk, var(--bg)); }
.lbd-pprev canvas { display: block; height: 52px; width: auto; max-width: 100%; object-fit: contain; object-position: left; background: #fff; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--line); }
.lbd-status { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(8px); max-width: min(560px, 90%); padding: 8px 14px; border-radius: 8px; background: color-mix(in srgb, var(--fg) 88%, var(--bg)); color: var(--bg); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 20; }
.lbd-status.on { opacity: 1; transform: translateX(-50%); }
.lbd.ro .lbd-ins { display: none; }
@media (max-width: 1100px) { .lbd-body { grid-template-columns: 210px minmax(0, 1fr) 264px; } .lbd-tbl { font-size: 10.5px; } .lbd-tb { min-width: 46px; padding: 4px 3px 2px; } }
@media (max-width: 820px) {
  .lbd { height: auto; min-height: 0; }
  .lbd-body, .lbd-body.no-left, .lbd-body.no-right { display: flex; flex-direction: column; }
  .lbd-left, .lbd-right { border: 0; border-top: 1px solid var(--line); max-height: none; }
  .lbd-center { order: -1; height: 56dvh; min-height: 320px; }
  .lbd-left { order: 1; } .lbd-right { order: 0; }
}
.lbd-db.empty, .lbd-scroll { user-select: none; -webkit-user-select: none; }

/* ---- Labels designer: open-file tabs, Layers, table dividers, snap lines, history, notes ---- */
.lbd-filetabs { display: flex; align-items: flex-end; gap: 2px; flex: none; padding: 6px 8px 0; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.lbd-ftab { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 96px; max-width: 220px; height: 30px; padding: 0 6px 0 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--raise); color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap; user-select: none; outline: none; }
.lbd-ftab:hover { color: var(--fg); }
.lbd-ftab.on { background: var(--bg); color: var(--fg); font-weight: 600; margin-bottom: -1px; height: 31px; }
.lbd-ftab:focus-visible { box-shadow: 0 0 0 2px var(--accent) inset; }
.lbd-ftab.drag { opacity: .45; }
.lbd-ftab.over { box-shadow: -3px 0 0 var(--accent); }
.lbd-ftn { overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; }
.lbd-ftx, .lbd-ftplus { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 5px; padding: 0; }
.lbd-ftx { width: 18px; height: 18px; flex: none; }
.lbd-ftx svg, .lbd-ftplus svg { width: 13px; height: 13px; }
.lbd-ftx:hover, .lbd-ftplus:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); color: var(--fg); }
.lbd-ftplus { flex: none; width: 28px; height: 26px; margin: 0 0 2px 4px; }
.lbd-labelname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.lbd-scroll.drop { box-shadow: inset 0 0 0 2px var(--accent); }
.lbd-units { margin-left: 8px; }

/* layers */
.lbd-layers { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--raise); max-height: 280px; overflow-y: auto; }
.lbd-lyr { position: relative; display: flex; align-items: center; gap: 6px; height: 32px; flex: none; padding: 0 6px; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; -webkit-user-select: none; font-size: 13px; }
.lbd-lyr:last-child { border-bottom: 0; }
.lbd-lyr:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.lbd-lyr.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.lbd-lyr.frame { cursor: default; }
.lbd-lyr.hid .lbd-lyn, .lbd-lyr.hid .lbd-lyi { opacity: .4; text-decoration: line-through; text-decoration-thickness: 1px; }
.lbd-lyr.dragging { opacity: .45; }
.lbd-lyr.drop-before::before, .lbd-lyr.drop-after::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); z-index: 2; }
.lbd-lyr.drop-before::before { top: -1px; } .lbd-lyr.drop-after::after { bottom: -1px; }
.lbd-lyi { display: inline-flex; flex: none; width: 24px; height: 20px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted); }
.lbd-lyi svg { width: 14px; height: 14px; }
.lbd-lyn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbd-lyedit { height: 24px !important; flex: 1; }
.lbd-lyb { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.lbd-lyb svg { width: 15px; height: 15px; }
.lbd-lyb:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
.lbd-lyb.eye.off { color: var(--muted); opacity: .8; }
.lbd-lyb.lock:not(.on) { opacity: .35; }
.lbd-lyr:hover .lbd-lyb.lock:not(.on) { opacity: .8; }
.lbd-lyb.lock.on { color: var(--warn); }

/* table: row and column dividers, the selected cells */
.lbd-h { z-index: 4; }
.lbd-div { position: absolute; z-index: 3; pointer-events: auto; touch-action: none; }
.lbd-div.h { height: 9px; margin-top: -4px; cursor: row-resize; }
.lbd-div.v { width: 9px; margin-left: -4px; cursor: col-resize; }
.lbd-div::after { content: ""; position: absolute; background: transparent; transition: background .1s; }
.lbd-div.h::after { left: 0; right: 0; top: 4px; height: 1px; } .lbd-div.v::after { top: 0; bottom: 0; left: 4px; width: 1px; }
.lbd-div:hover::after { background: var(--accent); }
.lbd-div.h:hover::after { height: 2px; top: 3px; } .lbd-div.v:hover::after { width: 2px; left: 3px; }
.lbd-cellsel.multi { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* snapping while resizing: dashed lines at the margins; the one being snapped to is bright */
.lbd-guide.cand { background: none; opacity: .55; }
.lbd-guide.cand.v { border-left: 1px dashed #ff4d8d; width: 0; } .lbd-guide.cand.h { border-top: 1px dashed #ff4d8d; height: 0; }
.lbd-guide.snap { background: none; opacity: 1; }
.lbd-guide.snap.v { border-left: 2px dashed #ff2d78; width: 0; margin-left: -1px; } .lbd-guide.snap.h { border-top: 2px dashed #ff2d78; height: 0; margin-top: -1px; }

/* print history, notes */
.lbd-histmodal { width: min(860px, calc(100vw - 32px)); max-width: none; }
.lbd-histscroll { max-height: min(52vh, 440px); overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.lbd-hist { width: 100%; border-collapse: collapse; font-size: 13px; }
.lbd-hist th { position: sticky; top: 0; background: var(--raise); text-align: left; font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lbd-hist td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lbd-hist tr:last-child td { border-bottom: 0; }
.lbd-hist td.nm { font-weight: 600; } .lbd-hist td.num { font-variant-numeric: tabular-nums; } .lbd-hist td.act { text-align: right; white-space: nowrap; }
.lbd-notes { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--fg); }
.lbd-abtn:disabled { opacity: .4; cursor: default; }
@media (max-width: 760px) { .lbd-ftab { min-width: 72px; } }

/* Label templates */
.modal.lbd-tplmodal { width: min(640px, calc(100vw - 32px)); max-width: none; }
.lbd-th { margin: 14px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, var(--fg)); opacity: .75; }
.lbd-th:first-child { margin-top: 0; }
.lbd-tlist { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.lbd-tcard { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raise); }
.lbd-tprev { flex: 0 0 220px; display: flex; align-items: center; justify-content: center; min-height: 54px; background: color-mix(in srgb, var(--fg) 6%, transparent); border-radius: 6px; padding: 4px; }
.lbd-tprev canvas { background: #fff; border-radius: 2px; }
.lbd-tinfo { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.lbd-tinfo span { font-size: 12.5px; opacity: .7; }
.lbd-tinfo .lbd-in { width: 100%; }
.lbd-tcard .btn { padding: 5px 10px; }
@media (max-width: 560px) { .lbd-tprev { flex-basis: 110px; } .lbd-tcard { flex-wrap: wrap; } }
.lbd-tb:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* ✕ beside a hidden label in the "+" menu */
.menu .lbd-mrow { display: flex; align-items: stretch; }
.menu .lbd-mrow > button:first-child { flex: 1; min-width: 0; }
.menu .lbd-mx { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; padding: 0; border: 0; background: none; color: inherit; opacity: .55; cursor: pointer; border-radius: 4px; }
.menu .lbd-mx:hover, .menu .lbd-mx:focus-visible { opacity: 1; color: var(--danger, #e5484d); background: color-mix(in srgb, currentColor 12%, transparent); }
.menu .lbd-mx svg { width: 14px; height: 14px; }

/* Save Artifact dialog: one row per request */
.art-list { display: flex; flex-direction: column; gap: 8px; }
.art-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.art-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.art-row.ready .dot { background: #3fae49; }
.art-row.error .dot { background: var(--bad); }
.art-row.queued .dot, .art-row.working .dot { background: var(--accent); animation: sharepulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .art-row .dot { animation: none !important; } }
.art-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.art-main .muted { color: var(--muted); }

/* Account menu and invites (hosted backend) */
.acct { display: inline-flex; }
.acct-btn { max-width: 200px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); border-radius: 980px; padding: 4px 10px; font-size: 13px; }
.inv-list { display: grid; gap: 6px; }
.inv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); }
.inv-main { display: grid; min-width: 0; }
.inv-main strong { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.inv-note { color: var(--muted); font-size: 13px; }
.inv-foot { display: flex; justify-content: flex-end; }