/* ARCHES 2.0 wireframes — shared styles. Desktop web app, responsive down to tablet and phone widths.
   Placeholder brand (house blue) until BVS brand guidelines arrive (UX-00 UQ-2).
   Restyle 26 Oct 2026: richer, modern look — navy side menu with icons, soft elevated cards, list pages with
   selection, bulk actions and pagination (added by shell.js). Class names are unchanged from the first set. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

:root {
  --brand: #1f5aa6; --brand-dark: #153f78; --brand-soft: #e3edfb; --brand-tint: #f3f7fd; --brand-2: #3b82c4;
  --accent: #0e9f8f; --accent-soft: #dcf5f1;
  --nav-1: #0f2747; --nav-2: #16365f; --nav-text: #c9d6e8; --nav-faint: #7f93b0;
  --bg: #f4f6fb; --surface: #ffffff; --text: #16202d; --muted: #4f5b6b; --faint: #5d6878;
  --border: #e2e8f0; --border-strong: #c3cddb; --line: #eef2f7;
  --ok-bg: #e3f6ea; --ok: #166534; --ok-dot: #22a35a;
  --warn-bg: #fff4e0; --warn: #8a4b00; --warn-dot: #e59a1c;
  --bad-bg: #fde8e8; --bad: #b42318; --bad-dot: #e5484d;
  --wait-bg: #eef1f6; --wait: #3d4754; --wait-dot: #8b97a8;
  --info-bg: #e3edfb; --info: #153f78; --info-dot: #3b82c4;
  --radius: 14px; --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 32, 60, .06);
  --shadow: 0 1px 2px rgba(16, 32, 60, .05), 0 6px 20px rgba(16, 32, 60, .06);
  --shadow-lg: 0 10px 30px rgba(16, 32, 60, .12);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--brand-dark); }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 26px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
p { margin: 0; }
svg.i { width: 18px; height: 18px; flex: none; }
:focus-visible { outline: 3px solid rgba(59, 130, 196, .45); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- review strip, header, layout -------------------------------------------------------- */
.wf-strip { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 6px 20px; background: #1b2532; color: #cfd8e3; font-size: 12px; }
.wf-strip b { color: #ffffff; font-weight: 600; }
.wf-strip a { color: #9cc3ee; margin-left: auto; } .wf-strip a + a { margin-left: 0; }
.app-header { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 10px 24px;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 17px; letter-spacing: .02em; text-decoration: none; color: var(--text); min-width: 206px; }
.logo-tile { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--brand-2), var(--brand-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; letter-spacing: .04em; box-shadow: 0 4px 12px rgba(31, 90, 166, .35); }
.logo small { display: block; font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--faint); }
.header-search { flex: 1 1 260px; max-width: 520px; height: 40px; padding: 0 14px 0 40px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px; color: var(--text);
  background: #f3f6fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%235d6878' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px 50%; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.header-search:focus { outline: 0; background-color: #fff; border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(59, 130, 196, .15); }
.app-header > .header-search { max-width: 560px; }
.kbd { font-size: 11px; color: var(--faint); border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 5px; margin-left: -54px; pointer-events: none; background: #fff; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--brand-tint); color: var(--brand); }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 5px; background: var(--bad-dot); border: 2px solid #fff; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #dbe8fb, #c3d7f3); color: var(--brand-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; text-decoration: none; }
.app-header .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-soft); }
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; color: #fff; }
.who { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.switcher { display: flex; gap: 4px; padding: 4px; background: #eef2f7; border-radius: 12px; flex-wrap: wrap; }
.switcher button, .tabs button { height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.switcher button:hover, .tabs button:hover { color: var(--brand); }
.switcher button.on, .switcher a.on, .tabs button.on { background: #fff; color: var(--brand); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 32, 60, .14); }
.switcher a { height: 32px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; color: var(--muted); font-size: 13px; text-decoration: none; }
.switcher a.later { color: var(--faint); font-style: italic; }

.layout { display: flex; flex-wrap: wrap; min-height: calc(100vh - 92px); }
.side-nav { flex: 1 1 230px; max-width: 250px; padding: 16px 12px 24px; background: linear-gradient(180deg, var(--nav-1), var(--nav-2)); display: flex; flex-direction: column; gap: 2px; }
.side-nav .group { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--nav-faint); padding: 16px 12px 6px; }
.side-nav a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 12px; border-radius: 10px; text-decoration: none; color: var(--nav-text); font-size: 13.5px; line-height: 1.3; transition: background .15s, color .15s; }
.side-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side-nav a svg.i { width: 17px; height: 17px; opacity: .85; }
.side-nav a .lbl { flex: 1; }
.side-nav a.sub { padding-left: 39px; font-size: 12.5px; min-height: 32px; color: #aebfd6; }
.side-nav a.sub::before { content: ""; width: 5px; height: 5px; border-radius: 3px; background: currentColor; opacity: .5; margin-left: -15px; margin-right: 5px; flex: none; }
.side-nav a.on { background: linear-gradient(90deg, rgba(91, 156, 230, .32), rgba(91, 156, 230, .12)); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #7fb6f2; }
.side-nav a .count { font-size: 11px; font-weight: 700; background: #f2994a; color: #fff; border-radius: 10px; padding: 1px 8px; line-height: 1.5; }
.side-nav a.later { color: #6f83a0; }
.side-nav a.later .count { background: transparent; color: #7f93b0; border: 1px dashed #4e6587; font-weight: 500; }
.content { flex: 999 1 560px; min-width: 0; padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 20px; }
.content.narrow { max-width: 900px; margin: 0 auto; width: 100%; }
.public .content { max-width: 1160px; margin: 0 auto; width: 100%; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--faint); margin-bottom: -10px; }
.crumbs a { color: var(--faint); text-decoration: none; } .crumbs a:hover { color: var(--brand); }
.crumbs span.sep { opacity: .6; } .crumbs b { color: var(--muted); font-weight: 600; }
@media (max-width: 860px) {
  .side-nav { max-width: none; flex-direction: row; overflow-x: auto; padding: 8px; }
  .side-nav .group { display: none; }
  .side-nav a { white-space: nowrap; } .side-nav a.sub { padding-left: 12px; } .side-nav a.sub::before { display: none; }
  .content { padding: 16px; }
  .logo { min-width: 0; }
}

/* ---- building blocks --------------------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.page-head .sub, .muted { color: var(--muted); font-size: 14px; }
.page-head .sub { display: block; margin-top: 2px; }
.small { font-size: 13px; } .tiny { font-size: 12px; color: var(--faint); }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-kpi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: var(--shadow); }
.card h2 { display: flex; align-items: center; gap: 8px; }
a.card { transition: transform .15s, box-shadow .15s, border-color .15s; } a.card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.card .card { box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); }
.card.flush { padding: 0; overflow: hidden; gap: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.card.flush .card-head { padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--border); }
.card.flush .card-head .header-search { background-color: #f6f8fb; }
.kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow); }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); }
.kpi::after { content: ""; position: absolute; right: -26px; top: -26px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--brand-soft), transparent 70%); }
.grid-kpi .kpi:nth-child(4n+2)::before { background: linear-gradient(180deg, #2bb8a6, var(--accent)); } .grid-kpi .kpi:nth-child(4n+2)::after { background: radial-gradient(circle, var(--accent-soft), transparent 70%); }
.grid-kpi .kpi:nth-child(4n+3)::before { background: linear-gradient(180deg, #8b7cf0, #5b4bd1); } .grid-kpi .kpi:nth-child(4n+3)::after { background: radial-gradient(circle, #ece9fd, transparent 70%); }
.grid-kpi .kpi:nth-child(4n)::before { background: linear-gradient(180deg, #5fb0f0, #2b7fc9); }
.kpi .label { position: relative; z-index: 1; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { position: relative; z-index: 1; font-family: var(--font-head); font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin-top: 4px; }
.kpi .note { position: relative; z-index: 1; font-size: 12px; color: var(--faint); }
.kpi.warn { background: linear-gradient(180deg, #fffaf0, #fff); border-color: #f3dcae; }
.grid-kpi .kpi.warn::before, .kpi.warn::before { background: linear-gradient(180deg, #f5b544, #e08a00); }
.kpi.warn::after { background: radial-gradient(circle, #ffefcf, transparent 70%); }
.kpi.warn .label, .kpi.warn .value { color: var(--warn); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.split { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.split > .list-col { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.split > .detail-col { flex: 2 1 480px; min-width: 0; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--wait-bg); color: var(--wait); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wait-dot); flex: none; }
.chip.ok { background: var(--ok-bg); color: var(--ok); } .chip.ok::before { background: var(--ok-dot); }
.chip.warn { background: var(--warn-bg); color: var(--warn); } .chip.warn::before { background: var(--warn-dot); }
.chip.bad { background: var(--bad-bg); color: var(--bad); } .chip.bad::before { background: var(--bad-dot); }
.chip.info { background: var(--info-bg); color: var(--info); } .chip.info::before { background: var(--info-dot); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn:hover { background: #f6f9fd; border-color: #a9b8cc; color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #2a6bbd, var(--brand)); border-color: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(31, 90, 166, .28); }
.btn.primary:hover { background: linear-gradient(180deg, var(--brand), var(--brand-dark)); color: #fff; }
.btn.danger { color: var(--bad); border-color: #ecc0bd; } .btn.danger:hover { background: var(--bad-bg); }
.btn.small { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn.link { border: 0; background: none; color: var(--brand); padding: 0 4px; box-shadow: none; }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); } .btn.ghost:hover { background: var(--brand-tint); color: var(--brand); }
select.btn { appearance: none; padding-right: 32px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%234f5b6b' stroke-width='2.2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center; }

.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 620px; }
.table th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 11px 14px; border-bottom: 1px solid var(--border); background: #f7f9fc; white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover td { background: #f8fbff; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.sel td { background: var(--brand-soft); } .table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--brand-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.pick, .table th.pick { width: 44px; padding-right: 0; }
.table input[type="checkbox"], .check input, .bulk input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.table td.more { color: var(--faint); font-size: 13px; text-align: center; background: #fbfcfe; }

/* list toolbar, bulk bar and pager (added to list cards by shell.js) */
.list-tools { display: inline-flex; gap: 6px; margin-left: auto; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #fbfcfe; font-size: 12.5px; color: var(--faint); align-items: center; }
.filter-chips .fc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--muted); font-weight: 500; }
.filter-chips .fc button { border: 0; background: var(--line); color: var(--faint); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; }
.bulk { display: none; align-items: center; gap: 10px; padding: 9px 18px; background: linear-gradient(90deg, var(--brand-soft), #eef4fd); border-bottom: 1px solid #c9daf3; font-size: 13px; color: var(--brand-dark); font-weight: 600; }
.bulk.show { display: flex; } .bulk .btn { height: 30px; font-weight: 500; }
.bulk .clear { margin-left: auto; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); background: #fff; }
.pager .pages { display: inline-flex; gap: 4px; margin-left: auto; }
.pager .pages button { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.pager .pages button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager .pages button:disabled { opacity: .45; cursor: default; }
.pager select { height: 32px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; padding: 0 8px; background: #fff; }

.form-grid { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; color: #2b3746; }
.field .hint { font-size: 12px; color: var(--muted); }
.field input, .field select, .field textarea { height: 42px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; font: inherit; font-size: 14.5px; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(59, 130, 196, .15); }
.field textarea { height: auto; padding: 10px 12px; resize: vertical; }
.field input, .field select, .field textarea, .header-search { min-width: 0; max-width: 100%; }
.field.full { grid-column: 1 / -1; }
.check { display: flex; gap: 10px; align-items: flex-start; } .check input { margin-top: 2px; }

.tabs { display: inline-flex; gap: 4px; padding: 4px; background: #e9eef5; border-radius: 12px; flex-wrap: wrap; }
[hidden] { display: none !important; }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px 12px 44px; border-radius: 12px; font-size: 14px; border: 1px solid; position: relative; }
.banner::before { content: "!"; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: currentColor; }
.banner.warn { background: #fff8eb; border-color: #f3dcae; color: #6b3b00; } .banner.warn::before { background: var(--warn-dot); }
.banner.info { background: var(--brand-tint); border-color: #c8d9ef; color: var(--info); } .banner.info::before { content: "i"; background: var(--info-dot); }
.banner.ok { background: var(--ok-bg); border-color: #bfe3cb; color: var(--ok); } .banner.ok::before { content: "✓"; background: var(--ok-dot); }

.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 12px; }
.step .rail { display: flex; flex-direction: column; align-items: center; width: 22px; flex: none; }
.step .dot { width: 16px; height: 16px; border-radius: 8px; border: 2px solid var(--border-strong); background: #fff; margin-top: 3px; }
.step .bar { flex: 1; width: 2px; background: var(--border); margin-top: 2px; min-height: 16px; }
.step.done .dot { background: var(--ok-dot); border-color: var(--ok-dot); box-shadow: 0 0 0 3px var(--ok-bg); } .step.done .bar { background: var(--ok-dot); }
.step.now .dot { border: 4px solid var(--brand-2); box-shadow: 0 0 0 4px var(--brand-soft); }
.step .body { padding-bottom: 16px; display: flex; flex-direction: column; }
.step.now .body b { color: var(--brand); }

.wizard { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: wz; }
.wizard span { flex: 1 1 110px; padding: 9px 12px; border-radius: 10px; background: #edf1f6; color: var(--muted); font-size: 13px; font-weight: 500; counter-increment: wz; }
.wizard span::before { content: counter(wz); display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--faint); font-size: 11px; font-weight: 700; align-items: center; justify-content: center; margin-right: 8px; }
.wizard span.done { background: var(--ok-bg); color: var(--ok); } .wizard span.done::before { content: "✓"; background: var(--ok-dot); color: #fff; }
.wizard span.on { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(31, 90, 166, .3); } .wizard span.on::before { color: var(--brand); }

.register { display: grid; grid-template-columns: 48px minmax(160px, 1fr) repeat(4, auto); gap: 0; }
.mark { display: inline-flex; gap: 4px; padding: 3px; background: #f1f4f8; border-radius: 10px; }
.mark button { min-width: 38px; height: 32px; border-radius: 8px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mark button.p.on { background: var(--ok-dot); color: #fff; box-shadow: 0 2px 6px rgba(34, 163, 90, .35); }
.mark button.a.on { background: var(--bad-dot); color: #fff; box-shadow: 0 2px 6px rgba(229, 72, 77, .35); }
.mark button.l.on { background: var(--warn-dot); color: #fff; box-shadow: 0 2px 6px rgba(229, 154, 28, .35); }
.mark button.v.on { background: var(--brand-2); color: #fff; box-shadow: 0 2px 6px rgba(59, 130, 196, .35); }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .d { min-height: 66px; padding: 7px; border-radius: 10px; background: #fff; border: 1px solid var(--border); font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.cal .d.off { background: var(--line); color: var(--faint); }
.cal .h { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); text-align: center; }

.slot { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: #fff; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.slot:hover { border-color: var(--brand-2); background: var(--brand-tint); }
.slot.on { background: linear-gradient(135deg, var(--brand-2), var(--brand)); border-color: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(31, 90, 166, .28); }
.slot.full { background: var(--line); color: var(--faint); cursor: not-allowed; border-style: dashed; }
.slot.on .muted, .slot.on .tiny { color: #dbe6f2; }
.bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 170px; padding-top: 8px; }
.bar-chart .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); height: 100%; }
.bar-chart .b i { display: block; width: 100%; max-width: 44px; background: linear-gradient(180deg, #4f97dc, var(--brand)); border-radius: 8px 8px 3px 3px; }
.bar-chart .b i.alt { background: linear-gradient(180deg, #bcd6f1, #8fb3d9); }
.meter { height: 8px; border-radius: 999px; background: #e8edf4; overflow: hidden; } .meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-2), var(--brand)); }
.meter.ok i { background: linear-gradient(90deg, #4cc47c, #1f9a52); } .meter.warn i { background: linear-gradient(90deg, #f5b544, #e08a00); }
.tt { display: grid; gap: 4px; font-size: 12px; } .tt .c { padding: 7px; border-radius: 8px; background: #fff; border: 1px solid var(--border); min-height: 46px; }
.tt .c.hd { background: #f7f9fc; font-weight: 700; color: var(--faint); min-height: 0; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.tt .c.brk { background: var(--line); color: var(--faint); text-align: center; }
.tt .c.me { background: var(--brand-soft); border-color: #a9c3e0; box-shadow: inset 3px 0 0 var(--brand-2); } .tt .c.sub { background: var(--warn-bg); border-color: #f0d9a8; box-shadow: inset 3px 0 0 var(--warn-dot); }
.drop { border: 2px dashed var(--border-strong); border-radius: 12px; padding: 22px; text-align: center; color: var(--muted); font-size: 13px; background: var(--brand-tint); }
.doc-view { background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 10px, #e8ecf2 10px, #e8ecf2 20px); border-radius: 12px; min-height: 360px; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; }

.masked { font-family: ui-monospace, Consolas, monospace; letter-spacing: .05em; }
.placeholder { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 26px; text-align: center; color: var(--faint); background: #fbfcfe; }
.hero { position: relative; overflow: hidden; border-radius: 18px; padding: 36px; background: radial-gradient(circle at 85% 20%, rgba(127, 182, 242, .45), transparent 45%), linear-gradient(135deg, #123a6d, var(--brand) 55%, #2c7fc0); color: #fff; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); }
.hero h1 { font-size: 32px; }
.hero .btn { border-color: rgba(255, 255, 255, .7); }
.hero .btn.primary { background: #fff; color: var(--brand-dark); }

.later-note { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 14px 16px; color: var(--faint); background: repeating-linear-gradient(135deg, #fbfcfe, #fbfcfe 8px, #f5f7fa 8px, #f5f7fa 16px); display: flex; flex-direction: column; gap: 4px; }
.later-note b { color: var(--muted); }
.mm-tree { list-style: none; margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--line); }
.mm-tree.root { padding-left: 0; border-left: 0; }
.mm-tree li { display: flex; flex-direction: column; gap: 3px; }
.mm-tree .it { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 14px; padding: 2px 0; }
.mm-tree .it a { font-size: 13px; }