:root {
  color-scheme: light;
  /* ===== Alternativ — Urbanist brand (Beta Brandbook 2025) =====
     Primary:   Signal Red #BC3634 · Espresso Black #1F191C · Reflective White #F9F8F8
     Secondary: Highlight Blue #003DC4 (+60% #668BDC, 30% #B2C5ED) · Red 60% #D69070 · Red 30% #EBC8B2
     Rule of thumb: 60 / 30 / 10 — white surfaces, espresso text, red for action.
     No gradients made from brand colours (brand guide §3.6). */
  --brand-red: #BC3634;
  --brand-espresso: #1F191C;
  --brand-white: #F9F8F8;
  --brand-blue: #003DC4;
  --brand-blue-60: #668BDC;
  --brand-blue-30: #B2C5ED;
  --brand-red-60: #D69070;
  --brand-red-30: #EBC8B2;
  /* Surfaces */
  --bg: #F9F8F8;
  --bg-2: #F1EFEF;
  --panel: #ffffff;
  --panel-hover: #FCFBFB;
  --panel-elev: #ffffff;
  /* Text */
  --ink: #1F191C;
  --ink-2: #2B2427;
  --ink-3: #4A4245;
  --muted: #6F676A;
  --muted-2: #A39C9E;
  /* Lines */
  --line: #E7E3E4;
  --line-strong: #D6D0D2;
  --line-subtle: #F3F1F1;
  /* Brand accent — Signal Red */
  --accent: #BC3634;
  --accent-hover: #A22D2B;
  --accent-soft: #FBF1EE;
  --accent-soft-2: #F5DDD3;
  --accent-deep: #8C2624;
  --accent-ring: rgba(188,54,52,.20);
  /* Highlight (secondary) */
  --highlight: #003DC4;
  --highlight-soft: #EEF2FC;
  /* Semantic */
  --good: #15803d;
  --good-soft: #f0fdf4;
  --good-soft-2: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --warn-soft-2: #fef3c7;
  --danger: #A11D2A;
  --danger-soft: #FDF2F3;
  --danger-soft-2: #F9DADD;
  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(31,25,28,.04);
  --shadow-sm: 0 1px 2px rgba(31,25,28,.05), 0 1px 1px rgba(31,25,28,.04);
  --shadow: 0 1px 3px rgba(31,25,28,.07), 0 1px 2px rgba(31,25,28,.04);
  --shadow-md: 0 4px 8px -2px rgba(31,25,28,.09), 0 2px 4px -2px rgba(31,25,28,.05);
  --shadow-lg: 0 12px 20px -6px rgba(31,25,28,.11), 0 4px 8px -4px rgba(31,25,28,.06);
  --shadow-xl: 0 24px 36px -10px rgba(31,25,28,.13), 0 8px 16px -6px rgba(31,25,28,.06);
  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  /* Type — Safiro (body, subheads) & Blauer Nue (display). Used when installed on the
     device; otherwise the closest open fonts: Manrope & Lexend. */
  --font-sans: "Safiro", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Blauer Nue", "Blauer Neue", "Lexend", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  /* Decorative layers — flat brand colours only */
  --grad-brand: linear-gradient(0deg, #BC3634, #BC3634);
  --grad-card: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  --grad-page: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  display: grid; grid-template-rows: 60px 1fr; grid-template-columns: 248px 1fr;
  grid-template-areas: "topbar topbar" "sidebar main";
  min-height: 100vh;
}
::selection { background: var(--accent-soft-2); color: var(--accent-deep); }
h1, h2, h3 { letter-spacing: -0.015em; }
/* TOPBAR */
.topbar {
  grid-area: topbar; background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  box-shadow: var(--shadow-xs); z-index: 30;
  backdrop-filter: saturate(180%) blur(8px);
}
.topbar .brand { font-weight: 700; display: flex; align-items: center; gap: 10px; font-size: 14.5px; letter-spacing: -0.01em; }
.topbar .brand .dot {
  width: 16px; height: 16px; border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(188,54,52,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.topbar .crumb { color: var(--muted); margin-left: 4px; font-size: 13px; }
.topbar .grow { flex: 1; }
.save-status { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.save-status .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--good); }
/* PROFILE PILL */
.profile-wrap { position: relative; }
.profile-btn { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: background .12s, border-color .12s; }
.profile-btn:hover { background: var(--bg-2); border-color: var(--line-strong); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--accent); color: white; font-size: 11.5px; font-weight: 600; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.avatar.lg { width: 64px; height: 64px; font-size: 24px; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.2); }
.profile-name { font-weight: 600; font-size: 13px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 250px; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 200; }
.profile-menu .profile-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.profile-menu .profile-item:hover { background: #f3f4f6; }
.profile-menu .profile-item.active { background: var(--accent-soft); }
.profile-menu .profile-item .name { font-weight: 600; font-size: 13.5px; }
.profile-menu .profile-item .role { font-size: 11.5px; color: var(--muted); }
.profile-menu .divider { border-top: 1px solid var(--line); margin: 6px 4px; }
.profile-menu .menu-link { display: block; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.profile-menu .menu-link:hover { background: #f3f4f6; }
/* SIDEBAR */
.sidebar {
  grid-area: sidebar; background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 16px 12px; overflow-y: auto;
}
.sidebar .nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; border-radius: var(--radius); cursor: pointer;
  color: var(--ink-3); margin-bottom: 1px; font-weight: 500; font-size: 13.5px;
  transition: background .12s ease, color .12s ease;
}
.sidebar .nav-item:hover { background: var(--bg-2); color: var(--ink); }
.sidebar .nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent-soft-2);
}
.sidebar .nav-item.active .icon { opacity: 1; color: var(--accent); }
.sidebar .nav-item .icon { width: 18px; text-align: center; opacity: .55; font-size: 13px; }
.sidebar .section-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-2); padding: 18px 12px 8px; font-weight: 600;
}
/* MAIN */
main { grid-area: main; padding: 28px 24px; overflow-y: auto; }
.container { max-width: 1200px; margin: 0 auto; }
h1, h2, h3 { color: var(--ink); margin: 0; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 13.5px; font-weight: 600; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.page-head .grow { flex: 1; }
.subtitle { color: var(--muted); font-size: 13.5px; margin-top: 4px; line-height: 1.5; }
/* PANELS */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); margin-bottom: 16px; overflow: hidden; transition: box-shadow .15s ease; }
.panel:hover { box-shadow: var(--shadow-sm); }
.panel-header { padding: 13px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.panel-header h2 { font-size: 13.5px; font-weight: 600; }
.panel-header .meta { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.panel-body { padding: 16px 18px; }
.panel-body.flush { padding: 0; }
/* BUTTONS */
button, .btn {
  font: inherit; font-weight: 500;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-2);
  padding: 7px 13px; border-radius: var(--radius); cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .06s ease;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1.2;
}
button:hover, .btn:hover { background: var(--bg-2); border-color: var(--line-strong); color: var(--ink); }
button:active, .btn:active { transform: translateY(0.5px); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent); }
button.primary, .btn.primary {
  background: var(--accent);
  color: white; border-color: var(--accent-hover);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.2) inset, var(--shadow-sm);
}
button.primary:hover, .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-deep); }
button.danger { color: var(--danger); border-color: var(--danger-soft-2); background: var(--panel); }
button.danger:hover { background: var(--danger-soft); border-color: var(--danger-soft-2); }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover { background: var(--bg-2); color: var(--ink); }
button.tiny, .btn.tiny { padding: 3px 9px; font-size: 12px; border-radius: var(--radius-sm); }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
button:disabled:hover { background: var(--panel); border-color: var(--line-strong); color: var(--ink-2); }
/* INPUTS */
input[type=text], input[type=date], input[type=number], input[type=email], input[type=tel],
input[type=search], input[type=password], input[type=url], input:not([type]),
textarea, select {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 8px 11px; width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
label { font-size: 12px; color: var(--muted); font-weight: 500; display: block; margin-bottom: 4px; letter-spacing: -0.005em; }
.field { display: flex; flex-direction: column; gap: 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* TABLE */
table.lines { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lines th, table.lines td { padding: 9px 10px; border-bottom: 1px solid var(--line-subtle); vertical-align: middle; }
table.lines tbody tr:hover td { background: var(--bg); }
table.lines th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--bg-2); position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--line); }
table.lines td input, table.lines td select {
  border: 1px solid transparent; background: transparent; padding: 5px 7px; border-radius: var(--radius-sm);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
table.lines td input:hover, table.lines td select:hover { border-color: var(--line); background: var(--panel); }
table.lines td input:focus, table.lines td select:focus { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 2px var(--accent-ring); }
.col-num input, .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.col-actions { width: 36px; text-align: right; }
.row-remove { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 4px 6px; font-size: 16px; line-height: 1; border-radius: 6px; }
.row-remove:hover { color: var(--danger); background: var(--danger-soft); }
.num { font-variant-numeric: tabular-nums; }
.row-empty { text-align: center; color: var(--muted); font-style: italic; padding: 20px !important; }
/* CARDS */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-xs); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card .title { font-weight: 600; font-size: 14.5px; margin-bottom: 6px; letter-spacing: -0.01em; }
.card .meta { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.card .stats { display: flex; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-subtle); }
.card .stat { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.card .stat strong { display: block; font-size: 16px; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; font-weight: 700; text-transform: none; }
.card .stat.good strong { color: var(--good); }
.card .stat.warn strong { color: var(--warn); }
.card .stat.bad strong { color: var(--danger); }
/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 18px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.kpi:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.kpi .label {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.kpi .value {
  font-size: 24px; font-weight: 700; margin-top: 8px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em;
  color: var(--ink);
}
.kpi .delta { font-size: 12px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi.good { background: linear-gradient(180deg, var(--good-soft), var(--panel)); border-color: var(--good-soft-2); }
.kpi.good .value { color: var(--good); }
.kpi.warn { background: linear-gradient(180deg, var(--warn-soft), var(--panel)); border-color: var(--warn-soft-2); }
.kpi.warn .value { color: var(--warn); }
.kpi.bad { background: linear-gradient(180deg, var(--danger-soft), var(--panel)); border-color: var(--danger-soft-2); }
.kpi.bad .value { color: var(--danger); }
/* PILLS / BADGES */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--bg-2); color: var(--ink-2); letter-spacing: .01em; line-height: 1.5; border: 1px solid var(--line); }
.pill.good { background: var(--good-soft-2); color: var(--good); border-color: var(--good-soft-2); }
.pill.warn { background: var(--warn-soft-2); color: var(--warn); border-color: var(--warn-soft-2); }
.pill.bad { background: var(--danger-soft-2); color: var(--danger); border-color: var(--danger-soft-2); }
.pill.accent { background: var(--accent-soft-2); color: var(--accent-deep); border-color: var(--accent-soft-2); }
/* MODAL */
.modal-bd { position: fixed; inset: 0; background: rgba(24,24,27,.45); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; backdrop-filter: blur(4px); animation: fadeIn .15s ease-out; }
.modal-bd.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.modal {
  background: var(--panel); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%; max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line);
  animation: slideUp .15s ease-out;
}
.modal.wide { max-width: 920px; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.modal-header h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.modal-header .close { margin-left: auto; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; background: var(--bg); }
/* LIST ITEM */
.row-list { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.row-list .grow { flex: 1; }
.row-list .title { font-weight: 600; }
.row-list .meta { color: var(--muted); font-size: 12.5px; }
/* PLANNING — overview cards + Gantt */
.plan-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.plan-card { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: box-shadow .12s; }
.plan-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.plan-card-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.plan-card-value { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-card-value small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.plan-card-sub { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.plan-progress-track { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.plan-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.plan-status-pills { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.plan-status-pills .pill { font-size: 12px; padding: 3px 9px; font-weight: 700; }
/* Gantt */
.plan-gantt { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.plan-gantt-head { display: flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.plan-gantt-rows { position: relative; padding-top: 8px; }
.plan-gantt-row { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: center; min-height: 30px; padding: 4px 0; }
.plan-gantt-row:hover .plan-row-bar { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.12); }
.plan-row-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.plan-row-status { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.plan-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.plan-row-bar-wrap { position: relative; height: 22px; background: linear-gradient(180deg, #fafafa, #f1f5f9); border-radius: 6px; overflow: visible; }
.plan-row-bar { position: absolute; top: 2px; bottom: 2px; min-width: 8px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: flex-start; padding: 0 8px; transition: filter .12s, transform .12s, box-shadow .12s; cursor: default; }
.plan-row-bar-text { color: white; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0,0,0,.15); }
.plan-row-no-date { font-size: 11px; color: var(--muted); font-style: italic; padding: 2px 8px; }
.plan-today-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--accent); z-index: 5; pointer-events: none; }
.plan-today-label { position: absolute; top: -16px; left: -22px; font-size: 10px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
.plan-gantt-legend { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 12px; margin-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); }
.plan-gantt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.plan-gantt-legend .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.plan-details summary { cursor: pointer; padding: 8px 0; user-select: none; }
.plan-details summary:hover { color: var(--accent); }
.plan-details[open] summary { margin-bottom: 4px; }
@media (max-width: 700px) {
  .plan-gantt-row { grid-template-columns: 1fr; gap: 4px; }
  .plan-row-label { padding-bottom: 2px; }
}

/* SECTION DRAG-AND-DROP HANDLE */
.sec-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 8px;
  color: var(--muted); font-size: 16px; line-height: 1;
  cursor: grab; user-select: none;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.sec-drag-handle:hover { background: var(--accent-soft); color: var(--accent); }
.sec-drag-handle:active { cursor: grabbing; }
.section-panel.dragging { opacity: 0.55; transform: scale(0.995); }
.section-panel.drag-over-top { box-shadow: 0 -3px 0 0 var(--accent); }
.section-panel.drag-over-bottom { box-shadow: 0 3px 0 0 var(--accent); }
#quote-sections-wrap { display: block; }
/* CATALOG PICKER (multi-select) */
.cat-row { cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.cat-row:hover { border-color: var(--accent); }
.cat-row.picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.cat-check { display: flex; align-items: center; justify-content: center; }
.cat-check input { width: 18px; height: 18px; cursor: pointer; }
.cat-qty { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: white; }
.cat-qty:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* HELPER */
.helper { font-size: 12px; color: var(--muted); }
.info-box { background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--accent-deep); margin-bottom: 14px; }
.warn-box { background: var(--warn-soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--warn); margin-bottom: 14px; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.empty { text-align: center; color: var(--muted); padding: 50px 20px; font-style: italic; }
.stale { color: var(--warn); }
.ordered { background: var(--good-soft) !important; }
/* LETTERHEAD */
.letterhead { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow); }
.letterhead .lh-row { display: flex; align-items: flex-start; gap: 18px; }
.letterhead .lh-logo { flex-shrink: 0; min-width: 120px; }
.letterhead .lh-logo img { max-height: 64px; max-width: 240px; object-fit: contain; }
.letterhead .lh-name { font-size: 22px; font-weight: 700; color: var(--brand-color, var(--accent)); }
.letterhead .lh-tagline { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.letterhead .lh-info { flex: 1; text-align: right; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.letterhead .lh-info .muted { color: var(--muted); }
.letterhead .lh-divider { height: 3px; background: var(--brand-color, var(--accent)); margin-top: 12px; border-radius: 999px; }
.prepared-by { padding: 10px 14px; background: #fafafa; border: 1px solid var(--line); border-radius: 10px; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 12px; }
.prepared-by .label { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; font-weight: 600; }
.prepared-by .signature { font-style: italic; color: var(--muted); margin-left: auto; }
.logo-uploader { display: flex; align-items: center; gap: 12px; }
.logo-preview { width: 120px; height: 80px; border: 1px dashed var(--line-strong); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fafafa; overflow: hidden; }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.perm-locked { padding: 12px 14px; background: var(--warn-soft); border-radius: 10px; color: var(--warn); font-size: 13px; margin-bottom: 14px; }
/* AUTH MODE */
body.auth-mode { display: block; background: #F9F8F8; min-height: 100vh; }
body.auth-mode .topbar, body.auth-mode .sidebar { display: none !important; }
body.auth-mode main { padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { background: white; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.12); padding: 36px 32px; width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 20px; margin: 0 0 6px; }
.auth-card .sub { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }
.auth-card .field { margin-bottom: 12px; }
.auth-card .full { width: 100%; }
.auth-card .err { background: var(--danger-soft); color: var(--danger); padding: 8px 10px; border-radius: 8px; font-size: 13px; margin-bottom: 10px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.auth-brand .dot { width: 12px; height: 12px; border-radius: 999px; background: var(--accent); }
.auth-link { color: var(--accent); cursor: pointer; text-decoration: underline; font-size: 13px; }
.invite-code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 18px; letter-spacing: 0.15em; padding: 6px 12px; background: #fafafa; border: 1px dashed var(--line-strong); border-radius: 8px; }
/* CHAT ASSISTANT */
.chat-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent);
  color: white; border: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(188,54,52,.35), inset 0 1px 0 rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: transform .15s ease, box-shadow .15s ease;
}
.chat-fab:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(188,54,52,.45), inset 0 1px 0 rgba(255,255,255,.2); }
.chat-panel {
  position: fixed; bottom: 24px; right: 24px; z-index: 95;
  width: 420px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 100px);
  background: var(--panel); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: none; flex-direction: column;
  border: 1px solid var(--line);
  overflow: hidden;
  animation: chatSlideUp .18s ease-out;
}
@keyframes chatSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.chat-panel.open { display: flex; }
.chat-head {
  padding: 14px 18px; background: var(--accent);
  color: white; display: flex; align-items: center; gap: 10px;
}
.chat-head .title { font-weight: 600; font-size: 14px; }
.chat-head .sub { font-size: 11.5px; opacity: .85; }
.chat-head .actions { margin-left: auto; display: flex; gap: 4px; }
.chat-head button { background: rgba(255,255,255,.18); color: white; border: 1px solid rgba(255,255,255,.25); padding: 4px 10px; font-size: 11.5px; }
.chat-head button:hover { background: rgba(255,255,255,.28); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; background: var(--bg); }
.chat-msg { margin-bottom: 12px; }
.chat-msg.user { text-align: right; }
.chat-msg .bubble {
  display: inline-block; padding: 9px 13px; border-radius: 14px;
  max-width: 88%; font-size: 13.5px; line-height: 1.45; text-align: left;
  word-wrap: break-word; white-space: pre-wrap;
}
.chat-msg.user .bubble { background: var(--accent); color: white; border-bottom-right-radius: 4px; }
.chat-msg.assistant .bubble { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.system .bubble { background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-style: italic; }
.chat-msg .meta { display: block; color: var(--muted); font-size: 10.5px; margin: 2px 4px; }
.chat-empty { text-align: center; color: var(--muted); padding: 30px 16px; font-size: 13px; }
.chat-empty .suggestion { display: block; margin-top: 8px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; text-align: left; font-size: 12.5px; color: var(--ink); transition: border-color .12s; }
.chat-empty .suggestion:hover { border-color: var(--accent); color: var(--accent-deep); }
.chat-input-wrap { padding: 12px; border-top: 1px solid var(--line); background: var(--panel); display: flex; gap: 8px; align-items: flex-end; }
.chat-input-wrap textarea {
  flex: 1; min-height: 38px; max-height: 120px; resize: none;
  padding: 9px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.4;
}
.chat-typing .bubble::after { content: "▋"; animation: chatBlink 1s steps(2) infinite; }
@keyframes chatBlink { 50% { opacity: 0; } }
/* FILTER BAR */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar input[type=text], .filter-bar input[type=search] { width: auto; flex: 1; min-width: 200px; max-width: 320px; }
.filter-bar select { width: auto; min-width: 130px; }
.filter-bar .filter-clear { color: var(--muted); background: transparent; border: none; }
.filter-bar .results-count { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.group-block { margin-bottom: 18px; }
.group-block h3 { padding: 8px 12px; background: var(--accent-soft); color: var(--accent-deep); border-radius: 8px 8px 0 0; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.group-block h3 .meta { margin-left: auto; color: var(--accent-deep); opacity: .8; font-size: 12px; font-weight: 500; }
.group-block .group-body { background: white; border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; overflow: hidden; }
/* REPORT CHARTS */
.chart-wrap { padding: 14px 16px; }
.chart { width: 100%; height: 220px; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .axis text { fill: var(--muted); font-size: 11px; }
.chart .bar-rev { fill: var(--accent); }
.chart .bar-margin { fill: #D69070; opacity: .6; }
.chart .bar-label { fill: var(--muted); font-size: 10.5px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); padding: 0 16px 8px; align-items: center; flex-wrap: wrap; }
.legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.hbar { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.hbar .label { width: 38%; font-size: 12.5px; }
.hbar .track { flex: 1; height: 14px; background: #f1f5f9; border-radius: 7px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--accent); border-radius: 7px; }
.hbar .val { width: 110px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.report-section { margin-bottom: 22px; }
/* QUICK-ADD */
.quick-add { position: relative; padding: 8px 12px; background: linear-gradient(180deg, #fafafa, white); border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
.quick-add input { flex: 1; border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; }
.quick-add input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.quick-add .qa-help { color: var(--muted); font-size: 11.5px; }
.qa-suggest { position: absolute; top: calc(100% + 2px); left: 12px; right: 12px; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; z-index: 30; }
.qa-suggest .qa-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 8px 12px; cursor: pointer; align-items: center; }
.qa-suggest .qa-row:hover, .qa-suggest .qa-row.active { background: var(--accent-soft); }
.qa-suggest .qa-row .desc { font-weight: 500; font-size: 13.5px; }
.qa-suggest .qa-row .desc small { display: block; color: var(--muted); font-weight: 400; }
.qa-suggest .qa-row .price { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.qa-suggest .qa-empty { padding: 12px; color: var(--muted); font-style: italic; text-align: center; }
/* MARGIN HINT colours */
.margin-warn { background: var(--warn-soft) !important; }
.target-pill { font-size: 11px; padding: 2px 6px; border-radius: 999px; background: #f1f5f9; color: var(--muted); }
.target-pill.met { background: var(--good-soft); color: var(--good); }
.target-pill.miss { background: var(--warn-soft); color: var(--warn); }
/* PANEL TOOLS (collapse / move up / move down) */
.panel-tools { display: inline-flex; gap: 1px; margin-left: 6px; }
.panel-tools button { padding: 3px 7px; font-size: 12px; line-height: 1; border-radius: 6px; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.panel-tools button:hover { background: #eef2f6; color: var(--ink); }
.panel-tools button:disabled { opacity: .35; cursor: not-allowed; background: transparent !important; }
.panel-header { cursor: pointer; transition: background .12s; }
.panel-header:hover { background: var(--bg); }
.panel-header h2 { user-select: none; }
/* Inputs / buttons / selects / drag-handle inside the header keep their normal cursors */
.panel-header button,
.panel-header input,
.panel-header select,
.panel-header textarea,
.panel-header label,
.panel-header a,
.panel-header .sec-drag-handle,
.panel-header .toolbar-actions,
.panel-header .panel-tools { cursor: auto; }
.panel-header .sec-drag-handle { cursor: grab; }
.panel-header button { cursor: pointer; }
.panel.collapsed > *:not(.panel-header) { display: none !important; }
.panel.collapsed .panel-header { border-bottom: none; }
.panel.collapsed .panel-header h2 { opacity: .75; }
.panel.collapsed .panel-header .meta { opacity: .55; }
/* Collapsed summary — visible only when the panel is minimized */
.collapsed-summary { display: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); margin-left: auto; padding: 4px 10px; background: var(--accent-soft); border-radius: 8px; font-size: 13px; }
.panel.collapsed .collapsed-summary { display: inline-flex; align-items: center; gap: 8px; }
.panel.collapsed .collapsed-summary small { font-weight: 500; color: var(--accent-deep); text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.panel.collapsed .panel-header .toolbar-actions,
.panel.collapsed .panel-header .add-btns,
.panel.collapsed .panel-header > .meta { display: none; }
.panel-header .toolbar-actions { /* keep right-aligned action buttons visible */ }
/* STAGE SUBDIVISIONS — strong, scannable section headers */
.stage { margin: 0 0 28px; position: relative; }
.stage:first-child { margin-top: 4px; }
.stage-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  margin: 0 0 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer; user-select: none;
  transition: box-shadow .15s ease, transform .12s ease, border-color .12s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.stage-header:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
  border-left-color: var(--accent-deep);
}
.stage-header .num {
  width: 38px; height: 38px; border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  letter-spacing: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.stage-header:hover .num { border-color: var(--accent); color: var(--accent-deep); }
.stage.collapsed .stage-header .num { color: var(--muted); }
.stage-header .text { flex: 1; min-width: 0; }
.stage-header .title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1.25;
  text-transform: none;
}
.stage-header .desc {
  color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stage-header .chevron {
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--muted);
  transition: transform .18s ease, background .12s, color .12s;
  font-size: 13px; flex-shrink: 0;
  border: 1px solid var(--line);
}
.stage-header:hover .chevron { background: var(--accent-soft); color: var(--accent-deep); }
.stage.collapsed .stage-header .chevron { transform: rotate(-90deg); }
.stage.collapsed .stage-content { display: none; }
.stage.collapsed { margin-bottom: 12px; }
.stage.collapsed .stage-header { margin-bottom: 0; border-left-color: var(--line); }
.stage-summary {
  color: var(--accent-deep); font-size: 13px; font-weight: 700;
  padding: 6px 14px; background: var(--accent-soft);
  border-radius: 999px; border: 1px solid var(--accent-soft-2);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
  max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stage:not(.collapsed) .stage-summary { display: none; }
/* Subtle indent of stage content so it visually belongs to the title above */
.stage-content {
  padding-left: 6px;
  border-left: 2px dashed transparent;
  transition: border-color .15s;
}
@media (min-width: 1024px) {
  .stage-content { padding-left: 14px; margin-left: 18px; border-left-color: var(--line); }
}
/* Stage variants — keep a subtle left-border accent only, badges stay neutral & consistent */
.stage[data-stage="client"]    > .stage-header { border-left-color: #3b82f6; }
.stage[data-stage="plan"]      > .stage-header { border-left-color: #8b5cf6; }
.stage[data-stage="quote"]     > .stage-header { border-left-color: var(--accent); }
.stage[data-stage="planning"]  > .stage-header { border-left-color: #f59e0b; }
.stage[data-stage="sitemeetings"] > .stage-header { border-left-color: #ec4899; }
.stage[data-stage="history"]   > .stage-header { border-left-color: #64748b; }
.stage.collapsed > .stage-header { border-left-color: var(--line) !important; }

/* PHASE BANNER — adaptive front door for each project, surfaces what matters now */
.phase-banner { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 14px; margin-bottom: 16px; background: linear-gradient(135deg, var(--bg-2) 0%, white 100%); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.phase-banner-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.phase-banner-track { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.phase-pip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--bg); color: var(--muted); border: 1px solid var(--line); cursor: pointer; transition: all .12s; user-select: none; }
.phase-pip:hover { border-color: var(--accent); }
.phase-pip.active { background: var(--accent); color: white; border-color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.phase-pip.done { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-soft-2); }
.phase-pip-arrow { color: var(--muted); font-size: 10px; }
.phase-banner-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.phase-banner-sub { font-size: 13px; color: var(--muted); }
.phase-banner-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.phase-banner-actions button { white-space: nowrap; }
.phase-banner-actions .phase-advance { font-weight: 700; }
@media (max-width: 760px) {
  .phase-banner { grid-template-columns: 1fr; padding: 14px 16px; }
  .phase-banner-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .phase-banner-actions button { flex: 1 1 auto; min-width: 0; }
}
.phase-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 18px; }
.phase-quick-card { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; cursor: pointer; transition: all .12s; display: flex; flex-direction: column; gap: 4px; }
.phase-quick-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
.phase-quick-card .pq-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.phase-quick-card .pq-value { font-size: 16px; font-weight: 700; color: var(--ink); }
.phase-quick-card .pq-hint { font-size: 11.5px; color: var(--muted); }
.phase-quick-card.alert { border-color: #f59e0b; background: #fffbeb; }
.phase-quick-card.alert .pq-value { color: #b45309; }
/* COMPARE VERSIONS modal */
.cmp-pickers { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; }
.cmp-pickers label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cmp-pickers select { padding: 7px 10px; font-size: 13px; min-width: 280px; }
.cmp-arrow { font-size: 18px; color: var(--muted); margin-top: 14px; }
.cmp-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.cmp-tot-card { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cmp-tot-card .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cmp-tot-card .val { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.delta-up   { color: #15803d; font-weight: 700; font-size: 12px; }
.delta-down { color: #b91c1c; font-weight: 700; font-size: 12px; }
.delta-zero { color: var(--muted); font-size: 12px; }
.cmp-sections { display: flex; flex-direction: column; gap: 10px; }
.cmp-sec { background: white; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cmp-sec-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 14px; }
.cmp-sec.cmp-sec-added .cmp-sec-head { background: #f0fdf4; }
.cmp-sec.cmp-sec-removed .cmp-sec-head { background: #fef2f2; }
.cmp-sec.cmp-sec-changed .cmp-sec-head { background: #fffbeb; }
.cmp-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.cmp-pill.cmp-sec-added, .cmp-line.cmp-added .cmp-pill { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.cmp-pill.cmp-sec-removed, .cmp-line.cmp-removed .cmp-pill { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.cmp-pill.cmp-sec-changed, .cmp-line.cmp-changed .cmp-pill { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.cmp-line { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.cmp-line:last-child { border-bottom: none; }
.cmp-line.cmp-removed .cmp-l-desc { text-decoration: line-through; color: var(--muted); }
.cmp-l-desc { font-size: 13px; font-weight: 600; color: var(--ink); }
.cmp-l-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cmp-empty { padding: 14px; color: var(--muted); font-size: 12.5px; }
.cmp-foot { padding: 10px 0 4px; color: var(--muted); font-size: 11.5px; text-align: center; }
@media (max-width: 760px) {
  .cmp-pickers { flex-direction: column; align-items: stretch; gap: 8px; }
  .cmp-pickers label { width: 100%; } .cmp-pickers select { width: 100%; min-width: 0; }
  .cmp-arrow { display: none; }
  .cmp-line { grid-template-columns: 1fr; }
}
/* Phase automation summary list — shown right after a phase advance */
.pa-list { display: flex; flex-direction: column; gap: 8px; }
.pa-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.pa-item.pa-ok { background: #f0fdf4; border-color: #bbf7d0; }
.pa-item.pa-skip { background: #fffbeb; border-color: #fde68a; }
.pa-icon { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.pa-ok .pa-icon { background: #16a34a; color: white; }
.pa-skip .pa-icon { background: #d97706; color: white; }
.pa-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pa-note { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* PROJECT TIMELINE — unified chronological view */
.tl-toolbar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tl-pill { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: white; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .12s; }
.tl-pill:hover { border-color: var(--accent); color: var(--accent-deep); }
.tl-pill.active { background: var(--accent); color: white; border-color: var(--accent); }
.tl-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.tl-list { padding: 8px 14px 14px; }
.tl-day { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 0 6px; border-top: 1px dashed var(--line); margin-top: 4px; }
.tl-day:first-child { border-top: none; padding-top: 4px; }
.tl-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; }
.tl-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); flex-shrink: 0; }
.tl-body { min-width: 0; }
.tl-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tl-detail { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tl-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tl-cat-phase .tl-icon       { background: #e0e7ff; color: #3730a3; }
.tl-cat-quote .tl-icon       { background: #F5DDD3; color: #8C2624; }
.tl-cat-version .tl-icon     { background: #f1f5f9; color: #475569; }
.tl-cat-ai .tl-icon          { background: #fef3c7; color: #92400e; }
.tl-cat-plan .tl-icon        { background: #ede9fe; color: #6d28d9; }
.tl-cat-meeting .tl-icon     { background: #fce7f3; color: #be185d; }
.tl-cat-observation .tl-icon { background: #fee2e2; color: #b91c1c; }
.tl-cat-order .tl-icon       { background: #dbeafe; color: #1e40af; }
.tl-cat-invoice .tl-icon     { background: #d1fae5; color: #065f46; }
@media (max-width: 760px) {
  .tl-row { grid-template-columns: 28px 1fr; gap: 8px; }
  .tl-meta { grid-column: 2; font-size: 11px; }
  .tl-icon { width: 24px; height: 24px; font-size: 12px; }
}
/* HOME — image-friendly hero with warm sunset default */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  margin-bottom: 26px;
  box-shadow: var(--shadow-lg);
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: white;
  background: #1F191C;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.hero.has-image {
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%),
    linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 50%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; padding: 40px 40px 32px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.95); margin-bottom: 14px; }
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: #f4a259; box-shadow: 0 0 0 3px rgba(244,162,89,.3); }
.hero h1 { color: white; font-size: 36px; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero .greet { font-size: 16px; opacity: .94; max-width: 660px; line-height: 1.5; text-shadow: 0 1px 12px rgba(0,0,0,.3); }
.hero .actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.hero .actions button { background: rgba(255,255,255,.14); color: white; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); transition: background .15s ease, transform .1s ease; padding: 9px 16px; }
.hero .actions button.primary { background: white; color: #5c2d0e; border-color: white; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.hero .actions button:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.hero .actions button.primary:hover { background: #fff7ed; color: #5c2d0e; }
.hero-image-control { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; }
.hero-image-control label, .hero-image-control button {
  background: rgba(0,0,0,.35); color: white; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 5px 12px; font-size: 11.5px; cursor: pointer; transition: background .12s ease;
  font-weight: 500;
}
.hero-image-control label:hover, .hero-image-control button:hover { background: rgba(0,0,0,.55); }
.home-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
@media (max-width: 880px) { .home-grid { grid-template-columns: 1fr; } }
.feature-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.feature-card { background: #fafafa; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.feature-card .icon { font-size: 20px; color: var(--brand-color, var(--accent)); }
.feature-card .title { font-weight: 600; margin: 4px 0 2px; font-size: 13.5px; }
.feature-card .desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.recent-projects .row-list { transition: border-color .15s; }
.recent-projects .row-list:hover { border-color: var(--brand-color, var(--accent)); cursor: pointer; }
/* QUOTE HISTORY */
.version-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.version-row:last-child { border-bottom: none; }
.version-row .v-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); margin: 0 auto; }
.version-row .v-dot.auto { background: var(--muted); }
.version-row .v-meta { color: var(--muted); font-size: 11.5px; }
.version-row .v-num { font-variant-numeric: tabular-nums; font-weight: 600; }
/* PROGRESS BARS */
.progress { position: relative; height: 18px; background: #f1f5f9; border-radius: 9px; overflow: hidden; min-width: 110px; }
.progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 9px; transition: width .25s; }
.progress-fill.invoiced { background: #D69070; opacity: .55; }
.progress-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ink); }
.progress.dual { height: 22px; }
.progress.dual .progress-fill { height: 12px; top: 0; }
.progress.dual .progress-fill.invoiced { top: 12px; height: 10px; }
.legend.compact { padding: 0; gap: 12px; }
/* YEAR SPLIT */
.year-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.year-tab { padding: 6px 12px; border-radius: 999px; background: #f1f5f9; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.year-tab.active { background: var(--accent); color: white; }
.ms-bucket { padding: 4px 8px; border-radius: 6px; background: #f1f5f9; font-size: 12px; font-weight: 500; }
.ms-bucket.unscheduled { background: var(--warn-soft); color: var(--warn); }
/* FLOOR TABS */
.floor-tabs { display: flex; gap: 4px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; align-items: center; }
.floor-tab { padding: 6px 14px; border-radius: var(--radius); background: transparent; border: 1px solid transparent; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; transition: background .12s ease, border-color .12s ease; }
.floor-tab:hover { background: var(--bg-2); }
.floor-tab.active { background: var(--panel); border-color: var(--accent-soft-2); color: var(--accent-deep); box-shadow: var(--shadow-xs); }
.floor-tab.active::before { content: "▸"; color: var(--accent); }
.floor-tab .floor-meta { color: var(--muted); font-weight: 400; font-size: 11px; }
.floor-tab-add { padding: 6px 12px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-deep); border: 1px dashed var(--accent-soft-2); cursor: pointer; font-size: 12.5px; font-weight: 600; }
.floor-tab-add:hover { background: var(--accent-soft-2); }
.floor-actions-inline { margin-left: auto; display: flex; gap: 4px; }
/* QUOTE FLOOR FILTER BAR */
.qf-bar {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.qf-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.qf-tab {
  padding: 6px 14px; border-radius: var(--radius); background: transparent; border: 1px solid transparent;
  cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s;
}
.qf-tab:hover { background: var(--bg-2); }
.qf-tab.active { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-deep); font-weight: 600; }
.qf-tab .qf-meta { font-weight: 400; font-size: 11px; color: var(--muted); }
.qf-tab.active .qf-meta { color: var(--accent-deep); opacity: .8; }
.qf-summary {
  margin-left: auto; padding: 4px 12px; border-radius: var(--radius); background: var(--bg-2);
  font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-2);
}
.qf-summary strong { color: var(--ink); font-size: 14px; margin-left: 6px; }
/* TAKEOFF / FLOOR PLAN */
.fp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; }
@media (max-width: 880px) { .fp-wrap { grid-template-columns: 1fr; } }
.fp-image { background: #f1f5f9; border-radius: 10px; min-height: 220px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.fp-image img { max-width: 100%; max-height: 480px; display: block; }
.fp-hint { color: var(--muted); padding: 18px; font-size: 13px; text-align: center; }
/* Legacy room-row (kept for any leftover renderers) */
.room-row { background: #fafafa; border-radius: 8px; padding: 8px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.room-row .row-fields { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr 36px; gap: 6px; align-items: center; }
@media (max-width: 720px) { .room-row .row-fields { grid-template-columns: 1fr 1fr; } }
.room-row .ar { background: white; border-radius: 6px; padding: 4px 8px; font-size: 12.5px; color: var(--muted); }

/* Polished rooms layout — grouped by type, cards per room */
.rooms-empty { padding: 24px; text-align: center; background: var(--bg); border-radius: 12px; border: 1px dashed var(--line); }
.rooms-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, var(--accent-soft) 0%, white 100%); border: 1px solid var(--accent-soft-2); border-radius: 12px; margin-bottom: 18px; }
.rooms-summary-stat span { display: block; font-size: 10.5px; color: var(--accent-deep); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 2px; }
.rooms-summary-stat strong { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rooms-group { margin-bottom: 18px; }
.rooms-group-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; background: var(--bg); border-radius: 8px; border-left: 3px solid var(--accent); }
.rooms-group-icon { font-size: 16px; }
.rooms-group-head strong { font-size: 14px; }
.rooms-group-count { color: var(--muted); font-size: 12px; font-weight: 500; }
.rooms-group-area { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent-deep); padding: 2px 10px; background: var(--accent-soft); border-radius: 999px; }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.room-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px; transition: box-shadow .12s, border-color .12s; }
.room-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.room-card-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.room-card-name { flex: 1; font-size: 15px; font-weight: 600; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--bg); transition: border-color .12s; }
.room-card-name:focus { outline: none; border-color: var(--accent); background: white; box-shadow: 0 0 0 3px var(--accent-ring); }
.room-card-rm { width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.room-card-rm:hover { background: var(--danger-soft); color: var(--danger); }
.room-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; padding: 10px; background: var(--bg); border-radius: 8px; }
.room-card-stat { display: flex; flex-direction: column; }
.room-card-stat span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.room-card-stat strong { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
.room-card-stat-main { grid-column: span 2; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.room-card-stat-main strong { font-size: 22px; font-weight: 800; color: var(--accent-deep); letter-spacing: -0.02em; }
.room-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rcf label { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 3px; }
.rcf input, .rcf select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; background: white; }
.rcf input:focus, .rcf select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.room-card-note { margin-top: 10px; padding: 8px 10px; background: var(--bg); border-radius: 6px; font-size: 11.5px; color: var(--muted); font-style: italic; }
.boq-mode { display: flex; gap: 6px; flex-wrap: wrap; }
.boq-mode label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 4px 8px; background: #f1f5f9; border-radius: 6px; cursor: pointer; }
.boq-mode input { width: auto; }
/* PRINT */
.print-only { display: none; }
@media print {
  @page { margin: 14mm 12mm; }
  .print-only { display: inline; }
  body { display: block; background: white; }
  .topbar, .sidebar, .toolbar-actions, .no-print, button, .row-remove { display: none !important; }
  main { padding: 0; }
  .panel { box-shadow: none; border: none; border-radius: 0; page-break-inside: avoid; margin-bottom: 8px; }
  .panel-header { background: white; border-bottom: 1.5px solid var(--ink); padding: 6px 0; }
  .panel-body { padding: 6px 0; }
  table.lines th { background: white; border-bottom: 1px solid var(--ink); }
  table.lines td input, table.lines td select, input, textarea, select {
    border: none !important; background: transparent !important; padding: 0 !important; pointer-events: none;
  }
  /* Client-safe print: hide cost / margin / supplier / order info */
  body.print-client .internal-only { display: none !important; }
  body.print-client th.internal-only,
  body.print-client td.internal-only { display: none !important; }
  body.print-client .kpi.internal-only { display: none !important; }
}
@media (max-width: 880px) {
  body { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  main { padding: 14px; }
  .sidebar { position: fixed; top: 56px; left: 0; bottom: 0; width: 240px; transform: translateX(-100%); transition: transform .2s ease-out; z-index: 60; box-shadow: var(--shadow-lg); }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after { content: ""; position: fixed; inset: 56px 0 0 0; background: rgba(15,23,42,.4); z-index: 55; }
  .hamburger { display: inline-flex !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .totals { grid-template-columns: 1fr !important; }
  .filter-bar { gap: 6px; }
  .filter-bar input[type=search], .filter-bar input[type=text] { min-width: 0; max-width: none; flex: 1 1 100%; }
  .filter-bar select { flex: 1 1 calc(50% - 4px); }
  .results-count { flex: 1 1 100%; }
  .toolbar-actions { width: 100%; }
  .container { padding: 0; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi .value { font-size: 18px; }
  /* Compact line cards on mobile */
  table.lines.mobile-cards { display: block; }
  table.lines.mobile-cards thead { display: none; }
  table.lines.mobile-cards tbody { display: block; }
  table.lines.mobile-cards tfoot { display: block; }
  table.lines.mobile-cards tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: center; }
  table.lines.mobile-cards td { display: contents; padding: 0 !important; border: none !important; }
  table.lines.mobile-cards td input, table.lines.mobile-cards td select { background: white !important; border: 1px solid var(--line) !important; padding: 5px 7px !important; }
  table.lines.mobile-cards .col-desc { grid-column: 1 / -1; }
  table.lines.mobile-cards td::before { content: attr(data-label); display: none; }
  table.lines.mobile-cards .col-actions { grid-column: 2; justify-self: end; }
  table.lines.mobile-cards tfoot tr { background: #fafafa; font-weight: 600; }
}
.hamburger { display: none; padding: 6px; border-radius: 8px; }
.hamburger:hover { background: #f3f4f6; }

/* =============================================================
   MOBILE & TABLET — comprehensive responsive overrides.
   Covers: phones (≤480px), small tablets (≤760px), big tablets (≤1024px).
   Goals: every screen usable with one thumb, modals are full-screen on
   phones, tables become cards, toolbars wrap, Gantt scrolls horizontally,
   drag-drop falls back to ↑/↓ controls, chat panel goes full-screen.
   ============================================================= */
@media (max-width: 1024px) {
  /* Tablet portrait — slightly tighter padding, narrower sidebar */
  body { grid-template-columns: 220px 1fr; }
  main { padding: 16px 18px; }
  body.cp-mode { grid-template-columns: 232px 1fr; }
}
@media (max-width: 760px) {
  /* Phones + small tablets */
  /* Single column — collapse the sidebar track entirely so main takes full width */
  body { grid-template-columns: 1fr !important; grid-template-areas: "topbar" "main" !important; }
  body.cp-mode { grid-template-columns: 1fr !important; grid-template-areas: "topbar" "main" !important; }
  /* Sidebar slides in as a fixed drawer when nav-open */
  .sidebar { position: fixed !important; top: 56px; left: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .2s ease-out; z-index: 60; box-shadow: var(--shadow-lg); display: flex !important; flex-direction: column; }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after { content: ""; position: fixed; inset: 56px 0 0 0; background: rgba(15,23,42,.4); z-index: 55; }
  /* Hamburger always visible on phones */
  .hamburger { display: inline-flex !important; align-items: center; justify-content: center; min-width: 36px; }
  main { padding: 14px 14px 80px; }   /* extra bottom padding so chat fab doesn't overlap content */
  h1 { font-size: 22px; }
  h2 { font-size: 17px; }
  .container { padding: 0; max-width: 100%; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head .toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .page-head .toolbar-actions button, .page-head .toolbar-actions a { flex: 1 1 calc(50% - 3px); min-width: 0; padding: 8px 10px; font-size: 13px; }
  /* Topbar */
  .topbar { padding: 0 12px; gap: 10px; flex-wrap: nowrap; height: 56px; min-height: 56px; }
  .topbar .save-status { display: none; }       /* save msg hidden on phones — too narrow */
  .build-tag-wrap { display: none !important; }
  .topbar .crumb { display: none; }              /* hide breadcrumbs to save space */
  #btn-export-all, #btn-import-all { display: none; }    /* backup/restore hidden on phones — desktop-only */
  /* Brand area — truncate to single line, never wrap */
  .topbar .brand { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
  .topbar .brand #brand-text { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Hide the small "build" label entirely on phones */
  .topbar > [class*="font-size:11px"], .topbar > [style*="font-size:11px"] { display: none !important; }
  /* Sidebar — full slide-in drawer */
  .sidebar, .sidebar-client { width: 270px; }
  /* Stages */
  .stage-header { padding: 10px 12px; gap: 10px; }
  .stage-header .num { width: 32px; height: 32px; font-size: 13px; border-radius: 8px; }
  .stage-header .title { font-size: 15px; }
  .stage-header .desc { font-size: 11.5px; white-space: normal; }
  .stage-summary { display: none; }              /* keeping it hidden when expanded; collapsed-stage chip still shows via .panel.collapsed rules */
  .stage-content { padding-left: 2px !important; margin-left: 0 !important; border-left: none !important; }
  /* Panels */
  .panel { border-radius: 8px; }
  .panel-header { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .panel-header h2 { font-size: 15px; }
  .panel-header .toolbar-actions { width: 100%; flex-wrap: wrap; }
  .panel-header .toolbar-actions button, .panel-header .toolbar-actions select, .panel-header .toolbar-actions a {
    flex: 1 1 auto; padding: 7px 10px; font-size: 12.5px; min-width: 0;
  }
  .panel-tools { margin-left: auto; }
  .collapsed-summary { font-size: 12px; padding: 3px 8px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Project line tables — force the existing mobile-cards behaviour everywhere */
  table.lines { font-size: 12.5px; }
  table.lines tr { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 10px 8px; border-bottom: 1px solid var(--line); align-items: start; }
  table.lines thead { display: none; }
  table.lines td { display: block; padding: 0 !important; border: none !important; }
  table.lines td input, table.lines td select, table.lines td textarea {
    width: 100%; min-width: 0; padding: 6px 8px !important; font-size: 12.5px;
  }
  table.lines td.col-num, table.lines td.r { text-align: left; }
  table.lines td:first-child { grid-column: 1 / -1; font-weight: 600; }   /* description spans full width */
  table.lines td.col-actions, table.lines td:last-child { grid-column: 2; justify-self: end; }
  table.lines tfoot tr { background: var(--bg); font-weight: 700; padding: 8px; grid-template-columns: 1fr auto; }
  /* Catalog modal & similar modals — flex column that fills the screen properly */
  .modal-bd { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
  .modal {
    width: 100% !important; max-width: 100% !important;
    max-height: 100vh !important; height: 100vh !important;
    border-radius: 0 !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important;
  }
  .modal.wide { width: 100% !important; max-width: 100% !important; }
  .modal-header { padding: 12px 14px; gap: 8px; flex: 0 0 auto; }
  .modal-header h3 { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Tabs row inside a modal stays pinned */
  .modal .sm-tabs, .modal .tabs, .modal > nav { flex: 0 0 auto; }
  /* Body grows to fill remaining vertical space and scrolls independently */
  .modal-body { padding: 14px; overflow-x: hidden; overflow-y: auto !important; flex: 1 1 auto !important; min-height: 0 !important; -webkit-overflow-scrolling: touch; }
  .modal-footer { padding: 10px 14px; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .modal-footer button { flex: 1 1 auto; min-width: 100px; padding: 9px 12px; }
  /* Auth shell */
  .sb-auth-shell { padding: 14px; }
  .sb-auth-card { padding: 24px 18px; border-radius: 14px; }
  .sb-auth-card h1 { font-size: 22px; }
  /* Home + dashboard — single column */
  .home-grid, .dashboard-grid, .kpis, .scope-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  /* Plan submission */
  .fp-wrap { grid-template-columns: 1fr !important; }
  .fp-image img { max-height: 280px; }
  /* Room cards stay compact */
  .rooms-grid { grid-template-columns: 1fr !important; }
  .rooms-summary { grid-template-columns: 1fr 1fr !important; }
  /* Planning workspace */
  .plan-overview-grid { grid-template-columns: 1fr; min-width: 0; }
  .plan-overview-side, .plan-overview-track { width: 100%; }
  .plan-overview-track { overflow-x: auto; }
  .plan-board { grid-template-columns: 1fr; }
  .plan-side { border-right: none; border-bottom: 1px solid var(--line); }
  .plan-chart-wrap { overflow-x: auto; }
  /* Client portal */
  body.cp-mode { grid-template-columns: 1fr !important; grid-template-areas: "topbar" "main" !important; }
  body.cp-mode .sidebar-client { display: none !important; }
  body.cp-mode.cp-nav-open .sidebar-client { display: flex !important; position: fixed; top: 56px; left: 0; bottom: 0; z-index: 60; box-shadow: var(--shadow-lg); }
  body.cp-mode main { padding: 14px 16px 80px; }
  .cp-header { margin-bottom: 14px; }
  .cp-hero { padding: 18px 20px; }
  .cp-hero h1 { font-size: 22px; }
  .cp-hero-sub { font-size: 13px; }
  .cp-grid { grid-template-columns: 1fr !important; }
  .cp-home-grid { grid-template-columns: 1fr 1fr !important; }
  .cp-budget-overview { grid-template-columns: 1fr 1fr !important; }
  .cp-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cp-tab { white-space: nowrap; padding: 10px 12px; font-size: 13px; }
  .cp-project-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .cp-plan-grid { grid-template-columns: 1fr !important; min-width: 0; }
  .cp-plan-track { overflow-x: auto; }
  /* Site meetings modal */
  .sm-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 6px; }
  .sm-tab { white-space: nowrap; padding: 8px 10px; font-size: 12.5px; }
  .sm-obs-toolbar { flex-direction: column; align-items: stretch; }
  .sm-obs { padding: 10px 12px; }
  .sm-obs-head { flex-wrap: wrap; }
  .sm-obs-head select, .sm-obs-title { flex: 1 1 100%; }
  .sm-obs-meta { flex-direction: column; align-items: stretch; }
  .sm-obs-meta input, .sm-obs-meta label { width: 100%; }
  .sm-obs-photo { width: 70px; height: 70px; }
  /* AI deliverables / chat */
  .chat-panel { width: 100%; height: 100% !important; right: 0 !important; bottom: 0 !important; border-radius: 0; }
  .chat-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  /* Presence */
  .presence-bar { display: none; }              /* presence avatars hidden on phones — desktop-only */
  /* Profile menu */
  .profile-name { display: none; }
  .profile-btn { padding: 4px 8px; }
  /* Stages — section drag handle hidden on touch (use ↑/↓ buttons in panel-tools instead) */
  .sec-drag-handle { display: none; }
  /* Larger tap targets */
  button, .btn, select, input[type="submit"] { min-height: 36px; }
  .panel-tools button { min-height: 28px; padding: 6px 10px; }
  /* PDF cover-page styles do not need mobile rules — print only */
}
@media (max-width: 480px) {
  /* Tighter — pure phone */
  main { padding: 12px 12px 80px; }
  .cp-home-grid, .cp-budget-overview, .rooms-summary { grid-template-columns: 1fr !important; }
  .cp-hero h1 { font-size: 20px; }
  .stage-header .desc { display: none; }       /* room is too tight for descriptions */
  .stage-header .num { width: 28px; height: 28px; font-size: 12px; }
  .panel-header h2 { font-size: 14px; }
  .toolbar-actions button, .toolbar-actions a { flex-basis: 100% !important; }   /* one button per row */
  .modal-header h3 { font-size: 14px; }
  .modal-body { padding: 12px; }
  .room-card-stats { grid-template-columns: 1fr; }
  .room-card-stat-main { grid-column: span 1; }
  .room-card-fields { grid-template-columns: 1fr; }
}
/* Tablet landscape (~813-1024px) keeps multi-column where it's still legible */
@media (min-width: 761px) and (max-width: 1024px) {
  table.lines { font-size: 13px; }
  .panel-header { flex-wrap: wrap; }
  .rooms-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
/* Supabase auth screens */
.sb-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #1F191C; }
.sb-auth-card { width: 100%; max-width: 440px; background: white; border-radius: 18px; padding: 36px 32px; box-shadow: 0 24px 60px rgba(0,0,0,0.25); }
.sb-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 700; font-size: 18px; color: var(--ink); }
.sb-auth-brand .dot { width: 12px; height: 12px; background: var(--accent); border-radius: 999px; }
.sb-auth-card h1 { font-size: 24px; font-weight: 700; margin: 4px 0 4px; }
.sb-auth-card .sub { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
.sb-auth-card .field { margin-bottom: 14px; }
.sb-auth-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.sb-auth-card input { width: 100%; padding: 11px 13px; font-size: 14.5px; border: 1px solid var(--line); border-radius: 9px; box-sizing: border-box; transition: border-color .12s, box-shadow .12s; }
.sb-auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sb-auth-card button.primary { width: 100%; padding: 12px; font-size: 14.5px; font-weight: 700; background: var(--accent); color: white; border: none; border-radius: 9px; cursor: pointer; transition: background .12s; }
.sb-auth-card button.primary:hover { background: var(--accent-deep); }
.sb-auth-card button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.sb-auth-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.sb-auth-link a { color: var(--accent-deep); cursor: pointer; font-weight: 600; }
.sb-auth-link a:hover { text-decoration: underline; }
.sb-auth-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 9px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.sb-auth-info { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-soft-2); border-radius: 9px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.sb-cloud-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-left: 8px; }
/* Client portal sign-in card variant — warmer, softer, less "internal-tool" */
body:has(.sb-auth-card-client) .sb-auth-shell { background: #BC3634; }
.sb-auth-card-client { box-shadow: 0 30px 80px rgba(15, 23, 42, .35); }
.sb-auth-card-client h1 { color: #A22D2B; }
/* Phase D — presence avatars in topbar */
.presence-bar { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
.presence-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; color: white; font-weight: 700; font-size: 10.5px; border: 2px solid white; box-shadow: 0 1px 2px rgba(0,0,0,.12); margin-left: -6px; cursor: default; }
.presence-avatar:first-child { margin-left: 0; }
.presence-more { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--bg); color: var(--muted); font-weight: 700; font-size: 11px; border: 2px solid white; margin-left: -6px; }
.presence-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-deep); margin-left: 8px; padding: 2px 7px; background: var(--accent-soft); border-radius: 999px; }
/* Phase E — role-based hiding (server-side RLS does the real enforcement) */
body.role-internal-hidden .internal-only { display: none !important; }
body.role-internal-hidden th.internal-only,
body.role-internal-hidden td.internal-only { display: none !important; }
body.role-readonly input,
body.role-readonly textarea,
body.role-readonly select { pointer-events: none; background: var(--bg) !important; }
body.role-readonly button.danger,
body.role-readonly button.primary,
body.role-readonly .row-remove { display: none !important; }

/* PLANNING WORKSPACE — cross-project + interactive Gantt */
.plan-shell main { padding: 22px 28px; }
.plan-zoom { display: inline-flex; gap: 0; background: var(--bg-2); padding: 2px; border-radius: 8px; border: 1px solid var(--line); }
.plan-zoom button { padding: 5px 12px; border: none; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--muted); border-radius: 6px; cursor: pointer; }
.plan-zoom button.active { background: white; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Cross-project overview */
.plan-overview-wrap { background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow-x: auto; overflow-y: visible; margin-top: 14px; }
.plan-overview-grid { display: grid; grid-template-columns: 240px 1fr; min-width: calc(240px + var(--plan-w, 1000px)); }
.plan-overview-head { display: contents; }
.plan-overview-head .plan-overview-side { background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px 16px; }
.plan-overview-head .plan-overview-track { background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px 0 14px 0; height: 52px; }
.plan-overview-side { padding: 14px 16px; border-bottom: 1px dashed var(--line); }
.plan-overview-side strong { display: block; font-size: 14px; font-weight: 600; }
.plan-overview-side-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.plan-overview-row { display: contents; cursor: pointer; }
.plan-overview-row:hover .plan-overview-side,
.plan-overview-row:hover .plan-overview-track { background: var(--accent-soft); }
.plan-overview-track { position: relative; padding: 14px 0; border-bottom: 1px dashed var(--line); height: 64px; }
.plan-axis-track { padding-top: 0; padding-bottom: 0; }
.plan-axis-tick { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--line); }
.plan-axis-tick.faint { border-left-color: var(--line-subtle); }
.plan-axis-tick span { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 6px; white-space: nowrap; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.plan-pill { position: absolute; top: 50%; transform: translateY(-50%); height: 30px; background: var(--accent); border-radius: 8px; box-shadow: 0 2px 6px rgba(188,54,52, .25); display: flex; align-items: center; padding: 0 10px; overflow: hidden; }
.plan-pill-fill { position: absolute; top: 0; left: 0; bottom: 0; background: rgba(255,255,255,.18); }
.plan-pill-label { position: relative; color: white; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }
.plan-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--accent); z-index: 6; }
.plan-today span { position: absolute; top: -2px; left: -22px; background: var(--accent-soft); color: var(--accent-deep); font-size: 9.5px; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.plan-today-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--accent); z-index: 4; }

/* Single-project Gantt */
.plan-board { display: grid; grid-template-columns: 320px 1fr; gap: 0; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; margin-top: 14px; }
.plan-side { background: var(--bg); border-right: 1px solid var(--line); }
.plan-side-head { padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); background: white; height: 36px; display: flex; align-items: center; }
.plan-side-row { display: grid; grid-template-columns: 16px 1fr 110px 24px; gap: 8px; align-items: center; padding: 6px 12px; height: 36px; border-bottom: 1px solid var(--line-subtle); }
.plan-status-dot { width: 10px; height: 10px; border-radius: 999px; }
.plan-side-name input { width: 100%; border: none; background: transparent; padding: 2px 0; font-size: 13px; font-weight: 500; }
.plan-side-name input:focus { outline: none; background: white; padding: 2px 4px; border-radius: 4px; }
.plan-side-name small { display: block; font-size: 10.5px; color: var(--muted); }
.plan-side-status { font-size: 11.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: white; }
.plan-side-row .row-remove { width: 22px; height: 22px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 4px; }
.plan-side-row .row-remove:hover { background: var(--danger-soft); color: var(--danger); }

.plan-chart-wrap { overflow-x: auto; overflow-y: visible; background: white; }
.plan-chart { display: block; user-select: none; }
.plan-grid-line { stroke: var(--line-subtle); stroke-width: 1; }
.plan-head-bg { fill: var(--bg); }
.plan-axis-text { fill: var(--muted); font-size: 11px; font-weight: 600; }
.plan-bar { cursor: grab; transition: filter .12s; }
.plan-bar:hover { filter: brightness(1.05); }
.plan-bar:active { cursor: grabbing; }
.plan-bar-text { fill: white; font-size: 11.5px; font-weight: 600; pointer-events: none; }
.plan-handle { fill: rgba(0,0,0,.001); cursor: ew-resize; }
.plan-handle:hover { fill: rgba(255,255,255,.4); }
.plan-link { fill: none; stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 3 3; }
.plan-today-svg { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.plan-today-text { fill: var(--accent-deep); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.plan-no-dates { fill: var(--muted); font-size: 11px; font-style: italic; }
.plan-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; font-size: 11.5px; color: var(--muted); background: var(--bg); border-radius: 8px; }
.plan-legend span { display: inline-flex; align-items: center; gap: 5px; }
.plan-legend .dot { width: 10px; height: 10px; border-radius: 999px; }

/* SITE MEETINGS — Phase 1 styling */
.sm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 14px; background: var(--bg); }
.sm-tab { padding: 10px 14px; border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.sm-tab:hover { color: var(--ink); }
.sm-tab.active { color: #ec4899; border-bottom-color: #ec4899; background: white; }
.sm-obs-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.sm-obs-group { margin-bottom: 18px; }
.sm-obs-group-head { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--bg); border-radius: 8px; margin-bottom: 8px; border-left: 3px solid #ec4899; }
.sm-obs { background: white; border: 1px solid var(--line); border-left: 4px solid #3b82f6; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.sm-obs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sm-obs-code { font-family: var(--font-mono); font-size: 13px; font-weight: 700; padding: 2px 8px; background: var(--bg); border-radius: 4px; min-width: 38px; text-align: center; }
.sm-obs-title { flex: 1; font-weight: 600; padding: 6px 10px; border: 1px solid transparent; border-radius: 6px; background: var(--bg); }
.sm-obs-title:focus { outline: none; background: white; border-color: var(--accent); }
.sm-obs select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.sm-obs textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; resize: vertical; margin-bottom: 8px; }
.sm-obs-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.sm-obs-meta label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sm-obs-meta input { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; min-width: 140px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; }
.sm-obs-photo-add { padding: 6px 12px; background: var(--accent-soft); color: var(--accent-deep); border-radius: 7px; cursor: pointer; font-weight: 600; font-size: 12.5px; text-transform: none; letter-spacing: 0; align-self: flex-end; }
.sm-obs-photo-add:hover { background: var(--accent-soft-2); }
.sm-obs-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.sm-obs-photo { position: relative; width: 90px; height: 90px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.sm-obs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-obs-photo-rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 999px; border: none; background: rgba(0,0,0,.6); color: white; font-size: 12px; cursor: pointer; }
/* Plan pins */
.sm-pin-stage { background: var(--bg); padding: 12px; border-radius: 10px; min-height: 200px; }
.sm-pin-canvas { user-select: none; }
.sm-pin-canvas img { cursor: crosshair; }
.sm-pin { position: absolute; width: 26px; height: 26px; border-radius: 999px; color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; cursor: pointer; transform: translate(-50%, -100%); box-shadow: 0 2px 6px rgba(0,0,0,.3); border: 2px solid white; }

/* CLIENT PORTAL */
/* Hide the team sidebar in client mode, show the client sidebar */
.sidebar-client { display: none; grid-area: sidebar; background: #1F191C; color: white; padding: 16px 14px; flex-direction: column; }
body.cp-mode .sidebar { display: none !important; }
body.cp-mode .sidebar-client { display: flex; }
body.cp-mode { grid-template-columns: 252px 1fr; grid-template-areas: "topbar topbar" "sidebar main"; }
body.cp-mode main { padding: 28px 36px; max-width: 1180px; margin: 0 auto; }
body.cp-mode .topbar { background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); }
/* Client sidebar — items / brand / footer */
.sidebar-client .cp-side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.10); }
.sidebar-client .cp-side-brand-mark { width: 36px; height: 36px; background: rgba(255,255,255,.14); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.sidebar-client .cp-side-brand-mark .dot { width: 12px; height: 12px; background: white; border-radius: 999px; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.sidebar-client .cp-side-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.sidebar-client .cp-side-brand-sub { font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.sidebar-client .section-label { color: rgba(255,255,255,.55); padding: 12px 12px 6px; }
.sidebar-client .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; cursor: pointer; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.sidebar-client .nav-item:hover { background: rgba(255,255,255,.10); color: white; }
.sidebar-client .nav-item.active { background: rgba(255,255,255,.18); color: white; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.sidebar-client .nav-item .icon { width: 18px; text-align: center; opacity: .85; font-size: 14px; }
.sidebar-client .nav-item.active .icon { opacity: 1; }
.sidebar-client .cp-side-count { margin-left: auto; background: rgba(255,255,255,.18); padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.sidebar-client .cp-side-footer { margin-top: auto; padding: 14px 12px 6px; border-top: 1px solid rgba(255,255,255,.10); }
.sidebar-client .cp-side-footer-name { font-weight: 600; font-size: 13px; }
.sidebar-client .cp-side-footer-email { font-size: 11.5px; opacity: .7; margin-bottom: 12px; word-break: break-all; }
.sidebar-client .cp-side-signout { width: 100%; padding: 8px 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: white; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s; }
.sidebar-client .cp-side-signout:hover { background: rgba(255,255,255,.20); }

/* Client home hero + stat cards */
.cp-hero { background: #BC3634; color: white; padding: 28px 30px; border-radius: 14px; margin-bottom: 22px; box-shadow: 0 8px 24px rgba(188,54,52,.20); }
.cp-hero-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .8; margin-bottom: 4px; }
.cp-hero h1 { color: white; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.cp-hero-sub { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.5; max-width: 640px; }
.cp-home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.cp-home-stat { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; cursor: pointer; transition: box-shadow .15s, transform .12s, border-color .12s; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.cp-home-stat:hover { box-shadow: 0 8px 24px rgba(15,23,42,.08); transform: translateY(-1px); border-color: var(--accent); }
.cp-home-stat-icon { font-size: 22px; margin-bottom: 6px; }
.cp-home-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.cp-home-stat-value { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cp-home-stat-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Client planning Gantt */
.cp-plan-wrap { background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow-x: auto; padding: 0; }
.cp-plan-grid { display: grid; grid-template-columns: 280px 1fr; min-width: calc(280px + var(--plan-w, 800px)); position: relative; }
.cp-plan-head { display: contents; }
.cp-plan-head .cp-plan-side, .cp-plan-head .cp-plan-track { background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 14px; height: 44px; }
.cp-plan-section { display: contents; }
.cp-plan-section .cp-plan-side { background: #f8fafc; border-bottom: 1px solid var(--line); padding: 8px 14px; font-size: 13px; }
.cp-plan-section .cp-plan-track { background: #f8fafc; border-bottom: 1px solid var(--line); }
.cp-plan-row { display: contents; cursor: pointer; }
.cp-plan-row:hover .cp-plan-side, .cp-plan-row:hover .cp-plan-track { background: var(--accent-soft); }
.cp-plan-side { padding: 8px 14px; border-bottom: 1px dashed var(--line); display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cp-plan-track { position: relative; padding: 8px 0; border-bottom: 1px dashed var(--line); height: 36px; }
.cp-plan-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.cp-plan-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-plan-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 22px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.08); display: flex; align-items: center; padding: 0 8px; }
.cp-plan-bar span { color: white; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-plan-no-dates { font-size: 11px; color: var(--muted); font-style: italic; padding-left: 14px; }
.cp-plan-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--accent); z-index: 4; }
.cp-shell { padding: 4px 0; }
.cp-header { margin-bottom: 22px; }
.cp-back { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-deep); font-size: 13px; text-decoration: none; margin-bottom: 16px; font-weight: 600; }
.cp-back:hover { text-decoration: underline; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cp-card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 20px; cursor: pointer; transition: box-shadow .15s, transform .12s, border-color .12s; box-shadow: 0 1px 2px rgba(15,23,42,.04); position: relative; }
.cp-card:hover { box-shadow: 0 12px 28px rgba(15,23,42,.10); transform: translateY(-1px); border-color: var(--accent); }
.cp-card h2 { font-size: 18px; margin: 4px 0 6px; letter-spacing: -0.01em; }
.cp-card-meta { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.cp-card-row { display: flex; gap: 18px; padding: 12px 0 14px; border-top: 1px dashed var(--line); }
.cp-card-num small { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.cp-card-num strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.cp-card-status { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.cp-status-active { background: #dcfce7; color: #166534; }
.cp-status-completed { background: var(--accent-soft); color: var(--accent-deep); }
.cp-status-archived { background: #f1f5f9; color: #64748b; }
.cp-next { font-size: 12.5px; color: var(--ink); padding-top: 4px; }

/* Project page */
.cp-project-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.cp-project-head h1 { margin: 0; }
.cp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.cp-tab { padding: 10px 18px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }
.cp-tab:hover { color: var(--ink); }
.cp-tab.active { color: var(--accent-deep); border-bottom-color: var(--accent); }
.cp-budget-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-bottom: 22px; }
.cp-stat { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.cp-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.cp-stat-value { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cp-chart-wrap { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 22px; }

/* Timeline */
.cp-timeline { display: flex; flex-direction: column; gap: 10px; }
.cp-ms-row { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: flex-start; padding: 14px 16px; background: white; border: 1px solid var(--line); border-radius: 10px; }
.cp-ms-dot { width: 14px; height: 14px; margin-top: 5px; border-radius: 999px; box-shadow: 0 0 0 4px rgba(255,255,255,1), 0 0 0 5px var(--line); }
.cp-ms-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.cp-ms-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.cp-ms-notes { margin-top: 8px; font-size: 12.5px; color: var(--ink); padding: 8px 10px; background: var(--bg); border-radius: 6px; }
.cp-ms-actions { display: flex; gap: 8px; margin-top: 10px; }
.cp-ms-actions button { padding: 7px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: white; }
.cp-ms-actions button.primary { background: #10b981; color: white; border-color: #10b981; }
.cp-ms-actions button.primary:hover { background: #059669; }

/* Change requests */
.cp-cr-list { display: flex; flex-direction: column; gap: 10px; }
.cp-cr-card { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.cp-cr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cp-cr-date { color: var(--muted); font-size: 12px; }
.cp-cr-reason { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.cp-cr-decision { margin-top: 10px; padding: 8px 10px; background: var(--bg); border-radius: 6px; font-size: 12.5px; color: var(--ink); }
.cp-cr-pending { border-left: 3px solid #f59e0b; }
.cp-cr-approved { border-left: 3px solid #10b981; }
.cp-cr-rejected { border-left: 3px solid #ef4444; }
.cp-cr-withdrawn { border-left: 3px solid #94a3b8; opacity: 0.7; }

/* Badges */
.cp-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cp-badge.ok { background: #dcfce7; color: #166534; }
.cp-badge.warn { background: #fef3c7; color: #92400e; }
.cp-badge.bad { background: #fee2e2; color: #991b1b; }
.cp-badge.attn { background: var(--accent-soft); color: var(--accent-deep); }
.cp-badge.muted { background: #f1f5f9; color: #64748b; }

/* =============================================================================
   TIMELINE LENS — in-project Gantt with swim-lanes, baseline, expanded status
   ============================================================================= */
.tl-zoom-bar { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; padding: 6px 0; flex-wrap: wrap; }
.tl-zoom { display: inline-flex; gap: 0; background: var(--bg-2); padding: 2px; border-radius: 8px; border: 1px solid var(--line); }
.tl-zoom button { padding: 5px 14px; border: none; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--muted); border-radius: 6px; cursor: pointer; transition: all .12s; }
.tl-zoom button.active { background: white; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tl-baseline-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 700; border: 1px solid #fde68a; }
.tl-baseline-set { padding: 5px 14px; font-size: 12.5px; font-weight: 600; border: 1px dashed var(--accent); color: var(--accent-deep); background: var(--accent-soft); border-radius: 8px; cursor: pointer; }
.tl-baseline-set:hover { background: var(--accent-soft-2); }

.tl-board {
  display: grid; grid-template-columns: minmax(380px, 480px) 1fr;
  background: white; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
  margin-bottom: 10px;
}
.tl-side { background: white; border-right: 1px solid var(--line); }
.tl-side-head {
  display: grid; grid-template-columns: 1fr 110px 100px 100px 110px;
  padding: 8px 12px; height: 32px; align-items: center;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); background: var(--bg-2); border-bottom: 1px solid var(--line);
  gap: 6px;
}
.tl-side-head .tl-hdr-cell { text-align: left; }
.tl-lane-title {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; height: 28px; background: linear-gradient(180deg, var(--bg-2) 0%, white 100%);
  font-size: 12px; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.tl-lane-title strong { font-weight: 700; }
.tl-lane-count { margin-left: auto; font-size: 11px; color: var(--muted); padding: 1px 7px; border-radius: 999px; background: white; border: 1px solid var(--line); }
.tl-side-row {
  display: grid; grid-template-columns: 14px 1fr 110px 100px 100px 110px 22px;
  align-items: center; gap: 6px; padding: 4px 12px; height: 40px;
  border-bottom: 1px solid #f1f5f9;
}
.tl-side-row:last-child { border-bottom: none; }
.tl-status-dot { width: 10px; height: 10px; border-radius: 999px; }
.tl-name-input { padding: 5px 8px; font-size: 12.5px; border: 1px solid transparent; background: transparent; border-radius: 4px; min-width: 0; }
.tl-name-input:hover, .tl-name-input:focus { border-color: var(--line); background: white; }
.tl-status-select { padding: 4px 6px; font-size: 11.5px; border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.tl-date-input { padding: 4px 6px; font-size: 11px; border: 1px solid var(--line); border-radius: 4px; min-width: 0; font-variant-numeric: tabular-nums; }
.tl-assignee-input { padding: 5px 8px; font-size: 12px; border: 1px solid transparent; background: transparent; border-radius: 4px; min-width: 0; }
.tl-assignee-input:hover, .tl-assignee-input:focus { border-color: var(--line); background: white; }
.tl-row-rm { width: 22px; height: 22px; padding: 0; border-radius: 4px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
.tl-row-rm:hover { background: #fee2e2; color: #b91c1c; }

.tl-chart-wrap { position: relative; overflow-x: auto; overflow-y: hidden; height: var(--tl-h); background: white; }
.tl-chart { display: block; min-width: 100%; }
.tl-grid { stroke: #f1f5f9; stroke-width: 1; }
.tl-axis-text { fill: var(--muted); font-size: 11px; font-weight: 600; }
.tl-today { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; }
.tl-today-label { fill: var(--accent-deep); font-size: 10.5px; font-weight: 700; }
.tl-lane-band { fill: rgba(248, 250, 252, 0.55); }
.tl-baseline { fill: rgba(148, 163, 184, 0.22); stroke: rgba(148, 163, 184, 0.4); stroke-width: 1; stroke-dasharray: 3 3; }
.tl-bar { transition: filter .12s; }
.tl-bar:hover { filter: brightness(1.08); }
.tl-progress {}
.tl-bar-text { fill: white; font-size: 11.5px; font-weight: 600; }
.tl-no-dates { fill: var(--muted); font-size: 11.5px; font-style: italic; }
.tl-slip { fill: #ef4444; font-size: 10.5px; font-weight: 700; }

.tl-mobile { display: none; }
.tl-mob-group { margin-top: 10px; background: white; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.tl-mob-group-h { padding: 8px 14px; background: var(--bg-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.tl-mob-group-h span { margin-left: auto; padding: 1px 7px; background: white; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; color: var(--ink); }
.tl-mob-card { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; }
.tl-mob-card:last-child { border-bottom: none; }
.tl-mob-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tl-mob-due { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.tl-mob-due.late { color: #b91c1c; font-weight: 700; }
.tl-mob-due.soon { color: #b45309; font-weight: 700; }
.tl-mob-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.tl-mob-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tl-status-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }

.tl-legend { display: flex; align-items: center; gap: 12px; padding: 8px 4px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.tl-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 4px; vertical-align: middle; }

@media (max-width: 900px) {
  .tl-board, .tl-side, .tl-chart-wrap { display: none; }
  .tl-mobile { display: block; }
}

/* Leads badge on sidebar nav */
.leads-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: white; font-size: 11px; font-weight: 700; margin-left: 6px; }

/* =============================================================================
   AI LAYOUT PANEL on the lead detail page
   ============================================================================= */
.lai-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1000px) { .lai-grid { grid-template-columns: 1fr; } }

/* Architectural canvas — uploaded plan as background, AI zones overlaid as SVG */
.lai-arch-canvas-wrap {
  background: white; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden;
}
.lai-arch-canvas-meta-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 4px 12px; gap: 16px; border-bottom: 1px dashed var(--line); margin-bottom: 14px;
}
.lai-arch-canvas-meta-top strong { font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink); text-transform: uppercase; display: block; }
.lai-arch-canvas-meta-top small { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; }
.lai-overlay-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lai-overlay-svg .lai-zone { pointer-events: auto; cursor: help; transition: filter .12s; }
.lai-overlay-svg .lai-zone:hover { filter: brightness(1.06); }
.lai-overlay-svg .lai-zone:hover > rect:first-of-type { fill-opacity: 0.32; }
.lai-canvas-corner-tl { position: absolute; top: 8px; right: 8px; pointer-events: none; }

/* (Legacy overlay canvas styles — kept for reference, no longer rendered) */
.lai-canvas {
  position: relative;
  background-color: #fafaf9; background-repeat: no-repeat;
  background-position: center center; background-size: contain;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%; max-height: 720px;
  display: flex; align-items: center; justify-content: center;
}
.lai-canvas.loading-plan {
  background-image: linear-gradient(135deg, #fafaf9 25%, #f1f5f9 25%, #f1f5f9 50%, #fafaf9 50%, #fafaf9 75%, #f1f5f9 75%);
  background-size: 24px 24px;
}
.lai-canvas.no-plan {
  background-image: repeating-linear-gradient(45deg, transparent 0 12px, #fee2e2 12px 13px);
}
.lai-canvas.has-plan { background-color: white; }
.lai-canvas-msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.93); padding: 14px 18px; border-radius: 8px;
  border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.06);
  font-size: 13px; line-height: 1.45; text-align: center; max-width: 75%; z-index: 10;
}
.lai-canvas.has-plan .lai-canvas-msg { display: none; }
.lai-overlay { position: absolute; inset: 0; pointer-events: none; }
.lai-room {
  position: absolute; box-sizing: border-box; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; padding: 4px;
  pointer-events: auto; cursor: help; transition: transform .12s, filter .12s;
}
.lai-room:hover { transform: scale(1.02); filter: brightness(1.05); z-index: 5; }
.lai-room-label { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; text-shadow: 0 1px 3px rgba(255,255,255,.7); font-size: 11.5px; font-weight: 600; }
.lai-room-label small { font-size: 10.5px; opacity: 0.75; font-weight: 500; margin-top: 1px; }

.lai-side { display: flex; flex-direction: column; gap: 10px; }
.lai-card { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.lai-card h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 0 0 8px; }
.lai-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.lai-card ul { margin: 0; padding-left: 18px; }
.lai-card li { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); padding: 2px 0; }
.lai-card.lai-questions { background: #fef3c7; border-color: #fde68a; }
.lai-card.lai-questions h4 { color: #92400e; }
.lai-card.lai-questions li { color: #78350f; }
.lai-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.lai-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: var(--muted); margin-top: 4px; padding: 4px 2px; }
.lai-legend span { display: inline-flex; align-items: center; gap: 4px; }
.lai-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Spinner used while AI is thinking */
.spinner-lai {
  display: inline-block; width: 38px; height: 38px;
  border: 3px solid var(--accent-soft); border-top-color: var(--accent);
  border-radius: 50%; animation: spin-lai 0.9s linear infinite;
}
@keyframes spin-lai { to { transform: rotate(360deg); } }

/* =============================================================================
   COMMERCIAL LANDING PAGE — shown to unauthenticated visitors of app.alternativ.be
   Replaces the bare sign-in card with a branded gateway to the three tools.
   When the shell is in landing-mode, it drops its centred-form flex layout so
   the landing can fill the full width / height of the viewport.
   ============================================================================= */
.sb-auth-shell.sb-landing-mode {
  display: block !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background: white !important;
  min-height: 100vh;
}
.sb-landing { width: 100%; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif; color: #0f172a; background: white; }

/* Header */
.sb-landing-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; max-width: 1280px; width: 100%; margin: 0 auto; }
.sb-landing-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; transition: transform .15s; }
.sb-landing-brand:hover { text-decoration: none; transform: translateY(-1px); }
.sb-landing-mark { width: 38px; height: 38px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(162,45,43,.22)); }
.sb-landing-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sb-landing-brand-name { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.sb-landing-brand-sub { font-size: 11.5px; color: #64748b; font-weight: 500; letter-spacing: 0.02em; margin-top: 2px; }
.sb-landing-nav { color: #64748b; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: color .12s; }
.sb-landing-nav:hover { color: #A22D2B; text-decoration: none; }

/* Hero */
.sb-landing-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #ecfeff 0%, #FBF1EE 35%, #fefce8 100%); border-bottom: 1px solid #e2e8f0; }
.sb-landing-hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; background-image: linear-gradient(rgba(162,45,43,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(162,45,43,.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 75%); }
.sb-landing-hero-inner { position: relative; max-width: 1100px; margin: 0 auto; padding: 64px 32px 56px; text-align: center; }
.sb-landing-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: white; border: 1px solid #EBC8B2; color: #A22D2B; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(162,45,43,.08); }
.sb-landing-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #BC3634; box-shadow: 0 0 0 4px #F5DDD3; }
.sb-landing-hero h1 { font-size: clamp(34px, 5.5vw, 60px); font-weight: 800; margin: 0 0 18px; letter-spacing: -0.025em; line-height: 1.05; }
.sb-landing-hero h1 .accent { background: linear-gradient(120deg, #BC3634 0%, #A22D2B 35%, #f59e0b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sb-landing-lead { font-size: clamp(16px, 1.6vw, 19px); color: #334155; max-width: 720px; margin: 0 auto 32px; line-height: 1.55; }
.sb-landing-cta-row { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.sb-landing-cta-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: #BC3634; color: white; font-weight: 700; font-size: 16px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 20px rgba(188,54,52,.30); transition: all .15s; }
.sb-landing-cta-primary:hover { background: #A22D2B; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(188,54,52,.42); text-decoration: none; }
.sb-landing-cta-primary span { font-size: 18px; }
.sb-landing-cta-sub { font-size: 12px; color: #64748b; font-weight: 500; }

/* Stats strip */
.sb-landing-stats { display: flex; justify-content: center; gap: 50px; padding: 36px 32px; flex-wrap: wrap; border-bottom: 1px solid #e2e8f0; background: white; }
.sb-landing-stats div { display: flex; flex-direction: column; gap: 4px; }
.sb-landing-stats strong { font-size: 28px; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; }
.sb-landing-stats span { font-size: 11.5px; color: #64748b; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

/* Why section */
.sb-landing-why { background: linear-gradient(180deg, #fafaf9 0%, white 100%); padding: 64px 32px; }
.sb-landing-why h2 { text-align: center; font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin: 0 0 40px; letter-spacing: -0.02em; }
.sb-landing-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
.sb-landing-why-card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: all .15s; }
.sb-landing-why-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.06); }
.sb-landing-why-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; font-weight: 800; font-size: 17px; margin-bottom: 14px; }
.sb-landing-why-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.sb-landing-why-card p { color: #64748b; font-size: 13.5px; line-height: 1.55; margin: 0; }

/* How it works */
.sb-landing-how { background: white; padding: 64px 32px; border-top: 1px solid #e2e8f0; }
.sb-landing-how h2 { text-align: center; font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin: 0 0 40px; letter-spacing: -0.02em; }
.sb-landing-how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
.sb-landing-step { padding: 4px; }
.sb-landing-step-num { display: inline-block; font-size: 13px; font-weight: 800; color: #BC3634; letter-spacing: 0.08em; margin-bottom: 12px; }
.sb-landing-step h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; }
.sb-landing-step p { color: #64748b; font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.sb-landing-step-link { color: #A22D2B; font-weight: 700; text-decoration: none; font-size: 13.5px; }
.sb-landing-step-link:hover { text-decoration: underline; }

/* Access cards inside the hero — the three paths are immediately visible */
.sb-landing-access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sb-landing-access-hero { max-width: 1100px; margin: 12px auto 0; }

/* "Ready when you are" strip near footer */
.sb-landing-revisit { background: linear-gradient(135deg, #0f172a 0%, #1F191C 100%); color: white; padding: 56px 32px; text-align: center; }
.sb-landing-revisit-inner { max-width: 760px; margin: 0 auto; }
.sb-landing-revisit h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; color: white; }
.sb-landing-revisit p { color: rgba(255,255,255,0.78); font-size: 15px; margin: 0 0 28px; }
.sb-landing-revisit-cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sb-landing-cta-secondary { padding: 13px 22px; background: rgba(255,255,255,0.10); color: white; font-weight: 700; font-size: 14.5px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; transition: all .12s; font-family: inherit; }
.sb-landing-cta-secondary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.30); transform: translateY(-1px); }
.sb-landing-revisit .sb-landing-cta-primary { box-shadow: 0 6px 20px rgba(188,54,52,.40); }
.sb-landing-access-card { background: white; border: 2px solid #e2e8f0; border-radius: 16px; padding: 28px 24px; text-align: left; cursor: pointer; transition: all .2s; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.sb-landing-access-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15,23,42,.10); }
.sb-landing-access-card.sb-access-prospect:hover { border-color: #BC3634; }
.sb-landing-access-card.sb-access-client:hover   { border-color: #f59e0b; }
.sb-landing-access-card.sb-access-team:hover     { border-color: #6366f1; }
.sb-access-ico { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.sb-landing-access-card h3 { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.sb-landing-access-card p { color: #64748b; font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; flex: 1; }
.sb-access-cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13.5px; }
.sb-access-prospect .sb-access-cta { color: #A22D2B; }
.sb-access-client .sb-access-cta   { color: #b45309; }
.sb-access-team .sb-access-cta     { color: #4338ca; }

/* Footer */
.sb-landing-footer { background: linear-gradient(180deg, #0f172a 0%, #1F191C 100%); color: rgba(255,255,255,0.85); padding: 56px 32px 28px; margin-top: auto; }
.sb-landing-footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; align-items: start; }
.sb-landing-footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sb-landing-footer-brand svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.sb-landing-footer-name { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: white; }
.sb-landing-footer-sub { font-size: 11.5px; color: #EBC8B2; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.sb-landing-footer-blurb { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; max-width: 360px; margin: 0; }
.sb-landing-footer-col h4 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #EBC8B2; margin: 0 0 14px; }
.sb-landing-footer-col a, .sb-landing-footer-col span { display: block; font-size: 13.5px; color: rgba(255,255,255,0.75); padding: 4px 0; line-height: 1.55; text-decoration: none; cursor: pointer; background: none; border: none; font: inherit; text-align: left; }
.sb-landing-footer-col a:hover { color: white; text-decoration: none; }
.sb-landing-footer-bottom { max-width: 1280px; margin: 36px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 12px; color: rgba(255,255,255,0.55); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }

@media (max-width: 760px) {
  .sb-landing-header { padding: 14px 18px; }
  .sb-landing-brand-sub { display: none; }
  .sb-landing-hero-inner { padding: 48px 20px 40px; }
  .sb-landing-stats { gap: 22px; padding: 26px 20px; }
  .sb-landing-stats strong { font-size: 22px; }
  .sb-landing-why, .sb-landing-how, .sb-landing-access { padding: 48px 20px; }
  .sb-landing-footer { padding: 40px 20px 24px; }
  .sb-landing-footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .sb-landing-footer-bottom { flex-direction: column; text-align: center; }
}


/* ---- Toasts (non-blocking notifications) ---- */
#toast-host { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 12000; pointer-events: none; width: min(560px, calc(100vw - 24px)); }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px 11px 14px; border-radius: 10px; background: #0f172a; color: #fff; font-size: 13.5px; line-height: 1.4; box-shadow: 0 10px 30px rgba(15,23,42,.25); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; border-left: 4px solid #64748b; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-info { border-left-color: #38bdf8; }
.toast-warn { border-left-color: #f59e0b; background: #1f2937; }
.toast-error { border-left-color: #ef4444; background: #3b0a0a; }
.toast-msg { flex: 1; }
.toast-x { background: transparent; border: 0; color: rgba(255,255,255,.7); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
.toast-x:hover { color: #fff; }
@media print { #toast-host { display: none !important; } }


/* ---- Prospecting ---- */
.ps-score { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:28px; padding:0 6px; border-radius:8px; font-weight:700; font-size:13px; font-variant-numeric: tabular-nums; }
.ps-score.hot  { background:#dcfce7; color:#166534; }
.ps-score.warm { background:#fef3c7; color:#92400e; }
.ps-score.cold { background:#f1f5f9; color:#475569; }
.ps-table td { vertical-align: top; }
.ps-table tbody tr:hover { background:#f8fafc; }
.ps-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px; flex-wrap:wrap; }
.ps-tabs button { border:0; background:transparent; padding:8px 12px; border-bottom:2px solid transparent; border-radius:0; cursor:pointer; font-weight:500; }
.ps-tabs button.active { border-bottom-color: var(--accent, #A22D2B); color: var(--accent, #A22D2B); }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .ps-table th:nth-child(5), .ps-table td:nth-child(5) { display:none; } }

/* ---- Organigram ---- */
.org-company { padding:10px 12px; background:#f8fafc; border:1px solid var(--line); border-radius:10px; margin-bottom:14px; }
.org-scroll { overflow-x:auto; padding-bottom:6px; }
.org-tree, .org-tree ul { list-style:none; margin:0; padding:0; }
.org-tree ul { margin-left:22px; padding-left:16px; border-left:2px solid #e2e8f0; }
.org-tree li { position:relative; margin:8px 0; }
.org-tree ul > li::before { content:""; position:absolute; left:-16px; top:22px; width:14px; border-top:2px solid #e2e8f0; }
.org-card { display:inline-block; min-width:240px; max-width:340px; vertical-align:top; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.org-card.primary { border-color: var(--accent, #A22D2B); box-shadow:0 0 0 2px rgba(162,45,43,.15); }
.org-card-role { font-size:12.5px; color:var(--muted); }
.org-card-line { font-size:12.5px; margin-top:3px; word-break:break-all; }
.org-card-actions { display:flex; gap:4px; justify-content:flex-end; margin-top:6px; }
@media print { .org-card-actions { display:none; } }

/* ---- Cloud load veil ---- */
#hydrate-veil { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; background: rgba(249,248,248,.72); backdrop-filter: blur(2px); }
.hydrate-veil-card { display: flex; gap: 12px; align-items: center; padding: 14px 20px; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(31,25,28,.14); font-weight: 600; }
.hydrate-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #e7e3e4; border-top-color: var(--accent); animation: hv-spin .8s linear infinite; }
@keyframes hv-spin { to { transform: rotate(360deg); } }


/* ===== Brand typography (v46) ===== */
@font-face { font-family: "Safiro"; src: local("Safiro"), local("Safiro-Regular"), local("Safiro Regular"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Safiro"; src: local("Safiro Medium"), local("Safiro-Medium"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Safiro"; src: local("Safiro SemiBold"), local("Safiro-SemiBold"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Safiro"; src: local("Safiro Bold"), local("Safiro-Bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Blauer Nue"; src: local("Blauer Nue Medium"), local("BlauerNue-Medium"), local("Blauer Neue Medium"); font-weight: 500; font-display: swap; }
h1, .page-head h1, .hero h1, .sb-landing h1, .sb-auth-card h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
h2, h3, .panel-header h2 { font-family: var(--font-sans); font-weight: 600; }
.kpi .value { font-family: var(--font-display); font-weight: 500; }

/* ===== Brand marks ===== */
.brand-wordmark { display: inline-block; height: 20px; width: auto; color: var(--brand-red); vertical-align: middle; }
.brand-wordmark svg { height: 100%; width: auto; display: block; }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.topbar .brand .dot { display: none; }
.topbar .brand .brand-suffix { font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; letter-spacing: .02em; }
/* Bracket frame — the icon used "open" as a graphic frame (brand guide §2.9) */
.bracket-frame { position: relative; }
.bracket-frame::before, .bracket-frame::after { content: ""; position: absolute; width: 22px; height: 22px; border-color: currentColor; border-style: solid; pointer-events: none; }
.bracket-frame::before { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 10px; }
.bracket-frame::after { right: 0; top: 0; border-width: 4px 4px 0 0; }
/* Primary buttons: Signal Red, flat */
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled), .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.nav-item.active { color: var(--accent); }

/* ===== Landing — Alternativ Urbanist (v46) ===== */
.sb-landing.al { font-family: var(--font-sans); color: var(--brand-espresso); background: var(--brand-white); min-height: 100vh; }
.al svg { display: block; }
.al-header { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 5vw, 64px); background: var(--brand-espresso); }
.al-logo { color: var(--brand-white); height: 26px; display: block; }
.al-logo svg { height: 26px; width: auto; }
.al-nav { display: flex; gap: 22px; }
.al-nav a { color: var(--brand-white); text-decoration: none; font-weight: 600; font-size: 14px; opacity: .85; }
.al-nav a:hover { opacity: 1; }
.al-hero { position: relative; background: var(--brand-espresso); color: var(--brand-white); padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 110px); overflow: hidden; }
.al-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.al-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-red-30); margin-bottom: 18px; }
.al-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 7vw, 88px); line-height: .98; letter-spacing: -0.03em; margin: 0 0 22px; color: var(--brand-white); }
.al-lead { max-width: 640px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: rgba(249,248,248,.82); margin: 0 0 40px; }
.al-access { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.al-card { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: 14px; border: 1px solid rgba(249,248,248,.16); background: rgba(249,248,248,.04); color: var(--brand-white); cursor: pointer; font-family: inherit; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.al-card:hover { transform: translateY(-2px); background: rgba(249,248,248,.08); border-color: rgba(249,248,248,.32); }
.al-card-red { background: var(--brand-red); border-color: var(--brand-red); }
.al-card-red:hover { background: #A22D2B; border-color: #A22D2B; }
.al-card-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.al-card-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.al-card-text { font-size: 14px; line-height: 1.5; opacity: .82; }
.al-card-cta { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 14px; }
/* Open bracket icon as a frame (brand guide §2.9) */
.al-hero-frame { position: absolute; inset: 28px; pointer-events: none; }
.al-hero-frame::before, .al-hero-frame::after { content: ""; position: absolute; width: clamp(48px, 7vw, 96px); height: clamp(48px, 7vw, 96px); border: clamp(8px, 1.1vw, 14px) solid var(--brand-red); }
.al-hero-frame::before { left: 0; bottom: 0; border-top: 0; border-right: 0; border-bottom-left-radius: clamp(24px, 3.4vw, 48px); }
.al-hero-frame::after { right: 0; top: 0; border-bottom: 0; border-left: 0; }
.al-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--brand-red); color: var(--brand-white); }
.al-value { padding: 34px clamp(18px, 3vw, 40px); border-right: 1px solid rgba(249,248,248,.18); }
.al-value:last-child { border-right: 0; }
.al-value p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; opacity: .9; }
.al-bracket { position: relative; display: inline-block; font-family: var(--font-display); font-size: 21px; font-weight: 500; padding: 4px 14px 4px 14px; }
.al-bracket::before, .al-bracket::after { content: ""; position: absolute; width: 9px; height: 11px; border: 2.5px solid currentColor; }
.al-bracket::before { left: 0; bottom: 0; border-top: 0; border-right: 0; border-bottom-left-radius: 5px; }
.al-bracket::after { right: 0; top: 0; border-bottom: 0; border-left: 0; }
.al-how { max-width: 1180px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); }
.al-how h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.02em; margin: 0 0 36px; }
.al-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.al-step { border-top: 3px solid var(--brand-espresso); padding-top: 18px; }
.al-step-num { font-family: var(--font-display); font-size: 15px; color: var(--brand-red); font-weight: 600; }
.al-step h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin: 6px 0 8px; }
.al-step p { font-size: 15px; line-height: 1.55; color: #4A4245; margin: 0 0 10px; }
.al-step a { color: var(--brand-red); font-weight: 700; text-decoration: none; }
.al-footer { background: var(--brand-espresso); color: var(--brand-white); padding: 48px clamp(20px, 5vw, 64px) 28px; }
.al-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid rgba(249,248,248,.14); }
.al-footer-logo { color: var(--brand-red); height: 30px; }
.al-footer-logo svg { height: 30px; width: auto; }
.al-footer-tag { font-family: var(--font-display); font-size: 20px; }
.al-footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 28px 0; }
.al-footer-cols h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-red-30); }
.al-footer-cols span, .al-footer-cols a { display: block; color: rgba(249,248,248,.85); text-decoration: none; font-size: 14px; line-height: 1.8; }
.al-footer-cols a:hover { color: #fff; }
.al-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: rgba(249,248,248,.55); }
@media (max-width: 860px) {
  .al-access, .al-steps, .al-footer-cols { grid-template-columns: 1fr; }
  .al-values { grid-template-columns: 1fr 1fr; }
  .al-value { border-right: 0; border-bottom: 1px solid rgba(249,248,248,.18); }
  .al-nav a:first-child { display: none; }
  .al-hero-frame { inset: 14px; }
}
/* Auth cards */
.sb-auth-card { border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.sb-auth-brand { gap: 12px; }
.sb-auth-wordmark { color: var(--brand-red); height: 24px; display: inline-block; }
.sb-auth-wordmark svg { height: 24px; width: auto; display: block; }
.sb-cloud-pill { background: var(--accent-soft) !important; color: var(--accent-deep) !important; }

.hero:not(.has-image)::after { content: ""; position: absolute; right: 22px; top: 22px; width: 54px; height: 54px; border: 9px solid #BC3634; border-bottom: 0; border-left: 0; z-index: 1; pointer-events: none; }

.lh-wordmark svg { height: 100%; width: auto; display: block; }

.sidebar .nav-item .icon svg { display: block; }
.sidebar .nav-item .icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; color: var(--muted); }
.sidebar .nav-item.active .icon, .sidebar .nav-item:hover .icon { color: var(--accent); }
.hero:not(.has-image)::after { top: 64px !important; }

/* ============================================================
   SPACE PLANNER (v46)
   ============================================================ */
.sp-empty { padding: 34px 28px; }
.sp-empty-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 24px; }
.sp-empty-steps > div { border-top: 3px solid var(--brand-red); padding-top: 12px; }
.sp-empty-steps span { display: block; font-family: var(--font-display, inherit); color: var(--brand-red); font-size: 22px; font-weight: 600; }
.sp-empty-steps strong { display: block; margin: 4px 0 6px; font-size: 15px; }
.sp-empty-steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sp-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.sp-card:hover { border-color: var(--brand-red); box-shadow: 0 4px 18px rgba(31,25,28,.08); }
.sp-card-thumb { height: 170px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 6px; }
.sp-card-thumb svg { width: 100%; height: 100%; }
.sp-card-ph { color: var(--muted-2); font-size: 13px; }
.sp-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.sp-card-body span { color: var(--muted); font-size: 12.5px; }
.sp-card-body small { color: var(--muted-2); font-size: 11.5px; }

.sp-editor { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 0; min-height: calc(100vh - 64px); }
.sp-side { border-right: 1px solid var(--line); background: var(--panel); padding: 16px; overflow-y: auto; max-height: calc(100vh - 64px); position: sticky; top: 0; }
.sp-side-head { margin-bottom: 14px; }
.sp-title { width: 100%; font-size: 17px; font-weight: 600; border: 1px solid transparent; background: transparent; padding: 4px 6px; margin-left: -6px; border-radius: 6px; }
.sp-title:hover, .sp-title:focus { border-color: var(--line); background: var(--bg); }
.sp-side-sub { color: var(--muted); font-size: 12.5px; }
.sp-step { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; background: var(--panel); }
.sp-step-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-weight: 600; font-size: 13.5px; }
.sp-step-h span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--bg-2); color: var(--ink-3); }
.sp-step.done .sp-step-h span { background: var(--brand-red); color: #fff; }
.sp-step-b { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.sp-mini { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-kv { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.sp-kv strong { color: var(--ink); font-weight: 600; }
.sp-inline { display: flex; gap: 6px; }
.sp-inline input { flex: 1; min-width: 0; }
.sp-nfg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.sp-nf { display: flex; flex-direction: column; font-size: 11.5px; color: var(--muted); gap: 2px; }
.sp-nf input { width: 100%; padding: 5px 7px; font-size: 13px; }
.sp-ncg { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sp-nc { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.sp-why summary { cursor: pointer; font-size: 12.5px; color: var(--brand-blue); }
.sp-why p { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); margin: 6px 0 0; }
.sp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.sp-stats > div { background: var(--brand-espresso); color: #fff; border-radius: 8px; padding: 10px 12px; }
.sp-stats strong { display: block; font-size: 20px; font-weight: 600; }
.sp-stats span { font-size: 11.5px; opacity: .75; }
.sp-warn { margin-top: 10px; font-size: 12.5px; background: #FBF1EF; border: 1px solid var(--brand-red-30); color: #7A2422; padding: 8px 10px; border-radius: 6px; }

.sp-main { min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.sp-tabs { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.sp-tabs > button[data-sp-tab] { border: none; background: transparent; padding: 7px 12px; border-radius: 6px; font-weight: 500; color: var(--ink-3); }
.sp-tabs > button[data-sp-tab].active { background: var(--brand-espresso); color: #fff; }
.sp-tabs > button[data-sp-tab]:disabled { opacity: .4; }
.sp-tabs .grow, .sp-toolbar .grow { flex: 1; }
.sp-tabs button.tiny.active, .sp-toolbar button.tiny.active { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.sp-opts { display: inline-flex; gap: 4px; margin-left: 8px; }
.sp-canvas { flex: 1; padding: 14px 16px; min-height: 0; }
.sp-toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sp-hint, .sp-hint-inline { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.sp-stage { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sp-stage svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 210px); touch-action: none; user-select: none; }
#sp-trace { cursor: crosshair; }
.sp-stage-plan svg { cursor: default; }
.sp-placeholder { display: flex; align-items: center; justify-content: center; min-height: 360px; color: var(--muted); font-size: 14px; background: #fff; border: 1px dashed var(--line-strong); border-radius: 8px; }
.sp-3d { background: #EDEBEA; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.sp-3d canvas { display: block; width: 100% !important; height: auto !important; cursor: grab; }
.sp-3d canvas:active { cursor: grabbing; }
.sp-inspector { width: 260px; border-left: 1px solid var(--line); background: var(--panel); padding: 14px; }
.sp-inspector[hidden] { display: none; }
.sp-insp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sp-qty { max-width: 900px; }
@media (max-width: 1100px) {
  .sp-editor { grid-template-columns: 1fr; }
  .sp-side { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
  .sp-inspector { width: auto; border-left: none; border-top: 1px solid var(--line); }
  .sp-empty-steps { grid-template-columns: 1fr; }
}
.sp-tabs select { width: auto; min-width: 190px; padding: 5px 8px; font-size: 13px; }

/* ============================================================
   BUDGET CALCULATOR (v47)
   ============================================================ */
.modal.foc-modal { max-width: 1180px; width: 96vw; }
.foc-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 12px; margin: 10px 0 6px; }
.foc-opts .field { margin: 0; }
.foc-opts select, .foc-opts input { width: 100%; }
.foc-chks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foc-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.foc-src { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.foc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.foc-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); display: flex; flex-direction: column; gap: 2px; }
.foc-card span { font-size: 12px; color: var(--muted); }
.foc-card strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.foc-card small { font-size: 11.5px; color: var(--muted); }
.foc-card.dark { background: var(--brand-espresso); border-color: var(--brand-espresso); color: #fff; }
.foc-card.dark span, .foc-card.dark small { color: rgba(255,255,255,.72); }
.foc-card.red { border-color: var(--brand-red); background: #FBF1EF; }
.foc-card.red strong { color: var(--brand-red); }
.foc-table td { vertical-align: top; }
.foc-table .foc-sec td { background: var(--bg-2); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
.foc-basis { font-size: 12px; color: var(--muted); max-width: 340px; }
.foc-code { color: var(--muted-2); font-size: 11px; margin-left: 4px; }
.foc-add { color: var(--brand-red); font-weight: 600; }
.foc-zero { color: var(--muted-2); }
.sp-qty { max-width: 1100px; }
@media (max-width: 1000px) { .foc-opts { grid-template-columns: 1fr 1fr; } .foc-cards { grid-template-columns: 1fr 1fr; } }
.foc-chks .foc-chk, .foc-modal > .modal-body > .foc-chk { display: inline-flex; width: auto; flex: 0 0 auto; white-space: nowrap; margin: 0; font-weight: 400; text-transform: none; letter-spacing: 0; }
.foc-chk input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; }
.foc-modal > .modal-body > .foc-chk { white-space: normal; }

/* ============================================================
   MODULE ACCESS (v48)
   ============================================================ */
.sidebar .nav-item[hidden], .sidebar .section-label[hidden], .chat-fab[hidden], .topbar button[hidden] { display: none !important; }
.access-field { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.access-presets { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 8px; }
.access-presets .foc-chk input { width: auto; }
.access-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 6px; }
.access-mods[hidden] { display: none; }
.access-mod { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; cursor: pointer; }
.access-mod input { width: auto; margin-top: 3px; }
.access-mod span { display: flex; flex-direction: column; }
.access-mod small { color: var(--muted); font-size: 11.5px; }
.ta-pending td { color: var(--muted); }
#ta-body .col-actions { white-space: nowrap; }

/* ============================================================
   OPPORTUNITY RADAR (v49)
   ============================================================ */
.ps-mode { display: inline-flex; background: var(--bg-2); border-radius: 10px; padding: 4px; gap: 4px; margin: 2px 0 14px; }
.ps-mode button { border: none; background: transparent; padding: 8px 14px; border-radius: 7px; font-weight: 600; color: var(--ink-3); }
.ps-mode button span { font-weight: 500; color: var(--muted); margin-left: 4px; font-size: 12px; }
.ps-mode button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(31,25,28,.12); }
.ps-mode button.active span { color: var(--brand-red); }
.rd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.rd-chips-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-fchip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; }
.rd-fchip span { color: var(--muted); margin-left: 3px; }
.rd-fchip.active { background: var(--brand-espresso); border-color: var(--brand-espresso); color: #fff; }
.rd-fchip.active span { color: rgba(255,255,255,.7); }
.rd-list { display: flex; flex-direction: column; gap: 10px; }
.rd-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rd-card:hover { border-color: var(--brand-red); box-shadow: 0 4px 16px rgba(31,25,28,.07); }
.rd-card-top { display: flex; gap: 12px; align-items: flex-start; }
.rd-card-top .grow { flex: 1; min-width: 0; }
.rd-card-top small { color: var(--muted); }
.rd-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rd-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--ink-3); white-space: nowrap; }
.rd-chip.rd-up { background: #E8F1EA; color: #2F6B3B; }
.rd-chip.rd-down { background: #F3ECE6; color: #7A4B2A; }
.rd-chip.rd-mna { background: #E6ECFA; color: #003DC4; }
.rd-chip.rd-lead { background: #F2E9F5; color: #6B3C7A; }
.rd-chip.rd-esg { background: #EAF3EC; color: #3E6B47; }
.rd-chip.rd-stack { background: var(--brand-red); color: #fff; font-weight: 600; }
.rd-lik { width: 120px; text-align: right; flex: 0 0 auto; }
.rd-lik small { color: var(--muted); font-size: 11.5px; }
.rd-lik-bar { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; margin: 6px 0 3px; }
.rd-lik-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-red-60), var(--brand-red)); }
.rd-hyp { font-size: 13px; line-height: 1.5; margin: 8px 0 6px; color: var(--ink-2); }
.rd-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.rd-angle { color: var(--ink-3); }
.rd-playbook { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; position: sticky; top: 12px; }
.rd-playbook h3 { margin: 0 0 2px; font-size: 15px; }
.rd-playbook details { border-top: 1px solid var(--line-subtle); padding: 7px 0; }
.rd-playbook summary { cursor: pointer; list-style: none; }
.rd-playbook dl { display: grid; grid-template-columns: 56px 1fr; gap: 3px 8px; margin: 8px 0 2px; font-size: 12px; }
.rd-playbook dt { color: var(--muted); }
.rd-playbook dd { margin: 0; color: var(--ink-2); line-height: 1.45; }
.rd-rules { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.rd-rules ul { margin: 6px 0 0 16px; padding: 0; line-height: 1.55; }
.rd-panel { border-color: var(--brand-blue-30); }
.rd-top { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.rd-lik.big { width: auto; text-align: left; }
.rd-lik.big strong { font-size: 28px; font-weight: 600; display: block; }
.rd-hyp.big { font-size: 14px; margin: 0; }
.rd-h { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rd-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.rd-timeline li { position: relative; padding: 0 0 10px 10px; font-size: 13px; line-height: 1.45; }
.rd-timeline li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-red); border: 2px solid var(--panel); }
.rd-date { color: var(--muted); font-size: 12px; margin-left: 4px; }
.rd-play { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rd-play > div { background: var(--bg); border: 1px solid var(--line-subtle); border-radius: 8px; padding: 8px 10px; }
.rd-play span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.rd-play p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; }
.rd-watch { margin: 0; padding-left: 4px; list-style: none; font-size: 13px; line-height: 1.7; }
.rd-lane-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin: 6px 0; }
@media (max-width: 1100px) { .rd-layout { grid-template-columns: 1fr; } .rd-playbook { position: static; } .rd-top { grid-template-columns: 1fr; } .rd-play { grid-template-columns: 1fr; } }
.rd-layout .filters select { width: auto; min-width: 140px; }

/* ============================================================
   TEAM TAGS ON CLIENTS & PROSPECTS (v50)
   ============================================================ */
.asg-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 600; flex: 0 0 auto; border: 2px solid var(--panel); letter-spacing: 0; }
.asg-stack { display: inline-flex; align-items: center; }
.asg-stack .asg-av + .asg-av { margin-left: -7px; }
.asg-more { font-size: 11px; color: var(--muted); margin-left: 4px; }
.asg-panel .panel-header .toolbar-actions { display: flex; gap: 6px; }
.asg-list { display: flex; flex-direction: column; gap: 8px; }
.asg-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-subtle); border-radius: 8px; background: var(--bg); }
.asg-item .grow { flex: 1; min-width: 0; }
.asg-note { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.asg-note small { color: var(--muted-2); }
.asg-empty { color: var(--muted); font-size: 13px; padding: 4px 0; }
.asg-home .asg-row { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; }
.asg-type { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.asg-type.client { background: #E6ECFA; color: #003DC4; }
.asg-type.prospect { background: #FBF1EF; color: #BC3634; }
.toolbar-actions #cl-who { width: auto; min-width: 160px; }
/* v50.1 — Viewer profiles may still tag themselves */
body.role-readonly .asg-modal input, body.role-readonly .asg-modal select, body.role-readonly .asg-modal textarea { pointer-events: auto; background: var(--panel) !important; }
body.role-readonly button.asg-go { display: inline-flex !important; }
body.role-readonly .asg-x { display: inline-flex !important; }
.asg-me { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.asg-pick { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.asg-opt { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid transparent; background: transparent; padding: 6px 8px; border-radius: 6px; font-size: 13px; justify-content: flex-start; }
.asg-opt:hover { background: var(--bg); }
.asg-opt.active { border-color: var(--brand-red); background: #FBF1EF; }
.asg-opt:disabled { opacity: .5; }
.asg-opt small { color: var(--muted); }

/* ============================================================
   PUBLIC LANDING — high-end editorial (v52)
   ============================================================ */
.sb-landing.alx { --ink: #1F191C; --paper: #F9F8F8; --red: #BC3634; --blue: #003DC4; --sand: #EBC8B2; font-family: var(--font-sans); background: var(--paper); color: var(--ink); min-height: 100vh; overflow-x: hidden; }
.alx h1, .alx h2, .alx h3, .alx .alx-door-t, .alx .alx-brk, .alx dt { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; }
.alx-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px clamp(20px, 5vw, 72px); background: transparent; transition: background .25s, padding .25s, box-shadow .25s; }
.alx-header.is-scrolled { background: rgba(31,25,28,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 14px; padding-bottom: 14px; box-shadow: 0 1px 0 rgba(249,248,248,.08); }
.alx-logo { color: var(--paper); display: block; height: 28px; }
.alx-logo svg { height: 28px; width: auto; display: block; }
.alx-nav { display: flex; align-items: center; gap: 26px; }
.alx-nav a, .alx-nav-btn { color: rgba(249,248,248,.78); text-decoration: none; font-weight: 600; font-size: 14px; background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; transition: color .15s; }
.alx-nav a:hover, .alx-nav-btn:hover { color: #fff; text-decoration: none; }
.alx-nav .alx-nav-cta { color: var(--ink); background: var(--paper); padding: 10px 18px; border-radius: 999px; }
.alx-nav .alx-nav-cta:hover { background: var(--red); color: #fff; }

.alx-hero { position: relative; margin-top: -76px; padding: 140px clamp(20px, 5vw, 72px) 90px; background: var(--ink); color: var(--paper); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; min-height: min(100vh, 920px); overflow: hidden; }
.alx-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(249,248,248,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(249,248,248,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 75%); }
.alx-hero-copy { position: relative; z-index: 1; }
.alx-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-bottom: 26px; }
.alx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(188,54,52,.25); animation: alxPulse 2.4s ease-in-out infinite; }
@keyframes alxPulse { 50% { box-shadow: 0 0 0 9px rgba(188,54,52,0); } }
.alx-title { font-size: clamp(48px, 7.4vw, 112px); line-height: .94; margin: 0 0 28px; color: var(--paper); }
.alx-line { display: block; overflow: hidden; padding-bottom: .06em; }
.alx-line > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.19, 1, .22, 1); }
.alx-line:nth-child(2) > span { transition-delay: .12s; }
.alx-hero.is-in .alx-line > span { transform: none; }
.alx-title em { font-style: normal; color: var(--red); }
.alx-lead { font-size: clamp(16px, 1.45vw, 20px); line-height: 1.6; color: rgba(249,248,248,.74); max-width: 560px; margin: 0 0 36px; }
.alx-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 52px; }
.alx-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 15.5px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s, background .2s, border-color .2s, color .2s; }
.alx-btn span { transition: transform .2s; }
.alx-btn:hover { text-decoration: none; transform: translateY(-2px); }
.alx-btn:hover span { transform: translateX(4px); }
.alx-btn-red { background: var(--red); color: #fff; box-shadow: 0 14px 34px rgba(188,54,52,.35); }
.alx-btn-red:hover { background: #A22D2B; color: #fff; }
.alx-btn-ghost { background: transparent; color: var(--paper); border-color: rgba(249,248,248,.28); }
.alx-btn-ghost:hover { border-color: var(--paper); color: #fff; }
.alx-btn-xl { font-size: 18px; padding: 20px 34px; }
.alx-hero-facts { display: flex; gap: clamp(22px, 4vw, 56px); margin: 0; border-top: 1px solid rgba(249,248,248,.14); padding-top: 26px; }
.alx-hero-facts div { display: flex; flex-direction: column; gap: 4px; }
.alx-hero-facts dt { font-size: clamp(28px, 3vw, 40px); color: var(--paper); line-height: 1; }
.alx-hero-facts dd { margin: 0; font-size: 12.5px; color: rgba(249,248,248,.55); letter-spacing: .02em; }
.alx-hero-visual { position: relative; z-index: 1; }
.alx-visual-frame { position: relative; padding: 18px; }
.alx-visual { position: relative; aspect-ratio: 5 / 4; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 40px 90px rgba(0,0,0,.45), inset 0 0 0 1px rgba(249,248,248,.08); }
.alx-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .92; filter: invert(1) hue-rotate(180deg) saturate(.55) brightness(.9); transition: opacity .8s; }
.alx-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.19, 1, .22, 1); }
.alx-canvas.is-in { opacity: 1; transform: none; }
.alx-corner { position: absolute; width: 72px; height: 72px; border: 12px solid var(--red); pointer-events: none; }
.alx-corner-bl { left: 0; bottom: 0; border-top: 0; border-right: 0; border-bottom-left-radius: 34px; }
.alx-corner-tr { right: 0; top: 0; border-bottom: 0; border-left: 0; }
.alx-visual-tag { position: absolute; left: 40px; bottom: 40px; display: flex; flex-direction: column; background: rgba(31,25,28,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(249,248,248,.12); border-radius: 14px; padding: 10px 14px; }
.alx-visual-tag b { font-size: 13px; color: #fff; } .alx-visual-tag span { font-size: 12px; color: rgba(249,248,248,.6); }
.alx-scroll { position: absolute; left: clamp(20px, 5vw, 72px); bottom: 26px; display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(249,248,248,.45); }
.alx-scroll span { width: 1px; height: 34px; background: rgba(249,248,248,.25); position: relative; overflow: hidden; }
.alx-scroll span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--red); animation: alxScroll 1.8s ease-in-out infinite; }
@keyframes alxScroll { to { top: 100%; } }

.alx-marquee { background: var(--red); color: #fff; overflow: hidden; padding: 18px 0; }
.alx-marquee-track { display: flex; align-items: center; gap: 26px; width: max-content; animation: alxMarquee 44s linear infinite; }
.alx-marquee span { font-family: var(--font-display); font-size: clamp(18px, 2vw, 26px); white-space: nowrap; letter-spacing: -0.01em; }
.alx-marquee i { width: 10px; height: 10px; border: 2.5px solid rgba(255,255,255,.7); border-top: 0; border-right: 0; border-bottom-left-radius: 4px; flex: 0 0 auto; }
@keyframes alxMarquee { to { transform: translateX(-50%); } }

.alx-section-head { display: flex; align-items: baseline; gap: 22px; margin-bottom: clamp(28px, 4vw, 52px); }
.alx-index { font-family: var(--font-display); font-size: 15px; color: var(--red); font-weight: 600; letter-spacing: .04em; padding-top: 10px; }
.alx-section-head h2 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1; margin: 0; max-width: 900px; }

.alx-doors { padding: clamp(64px, 9vw, 130px) clamp(20px, 5vw, 72px); max-width: 1440px; margin: 0 auto; }
.alx-doors-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
.alx-door { position: relative; text-align: left; display: flex; flex-direction: column; gap: 12px; min-height: 340px; padding: 34px 30px 30px; border-radius: 26px; border: 1.5px solid #E7E3E4; background: #fff; color: var(--ink); cursor: pointer; font-family: inherit; overflow: hidden; transition: transform .35s cubic-bezier(.19, 1, .22, 1), box-shadow .35s, border-color .35s; }
.alx-door::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border: 18px solid currentColor; border-radius: 50%; opacity: .05; transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .3s; }
.alx-door:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(31,25,28,.12); border-color: var(--ink); }
.alx-door:hover::after { transform: scale(1.25); opacity: .1; }
.alx-door-red { background: var(--red); border-color: var(--red); color: #fff; }
.alx-door-red:hover { border-color: var(--red); box-shadow: 0 30px 70px rgba(188,54,52,.35); }
.alx-door-k { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.alx-door-t { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; }
.alx-door-p { font-size: 15px; line-height: 1.55; opacity: .75; max-width: 380px; }
.alx-door-a { margin-top: auto; font-weight: 700; font-size: 15px; display: inline-flex; gap: 10px; align-items: center; }
.alx-door-a b { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid currentColor; transition: transform .3s, background .3s, color .3s; }
.alx-door:hover .alx-door-a b { transform: translateX(6px); background: currentColor; }
.alx-door:hover .alx-door-a b { color: var(--paper); }
.alx-door-red:hover .alx-door-a b { color: var(--red); background: #fff; }

.alx-statement { background: var(--paper); padding: 0 clamp(20px, 5vw, 72px) clamp(64px, 9vw, 130px); }
.alx-statement p { max-width: 1180px; margin: 0 auto; font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 54px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.alx-hl { color: var(--red); background-image: linear-gradient(currentColor, currentColor); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size 1.2s cubic-bezier(.19, 1, .22, 1) .3s; }
.alx-statement .is-in .alx-hl, .alx-statement p.is-in .alx-hl { background-size: 100% 3px; }

.alx-method { background: var(--ink); color: var(--paper); padding: clamp(64px, 9vw, 130px) clamp(20px, 5vw, 72px); }
.alx-method .alx-section-head h2 { color: var(--paper); }
.alx-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1300px; }
.alx-steps li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 160px; gap: 24px; align-items: baseline; padding: 30px 0; border-top: 1px solid rgba(249,248,248,.14); transition: padding .3s; }
.alx-steps li:last-child { border-bottom: 1px solid rgba(249,248,248,.14); }
.alx-steps li:hover { padding-left: 14px; }
.alx-step-n { font-family: var(--font-display); font-size: clamp(36px, 4vw, 58px); color: var(--red); line-height: 1; }
.alx-steps h3 { font-size: clamp(26px, 2.6vw, 38px); margin: 0 0 10px; color: var(--paper); }
.alx-steps p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(249,248,248,.68); max-width: 640px; }
.alx-step-w { text-align: right; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sand); }

.alx-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); border-top: 1px solid #E7E3E4; border-bottom: 1px solid #E7E3E4; }
.alx-value { padding: clamp(36px, 4vw, 56px) clamp(20px, 2.6vw, 40px); border-right: 1px solid #E7E3E4; transition-delay: var(--d, 0ms); }
.alx-value:last-child { border-right: 0; }
.alx-value p { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: #4A4245; }
.alx-brk { position: relative; display: inline-block; font-size: clamp(22px, 2vw, 28px); padding: 6px 18px; color: var(--ink); }
.alx-brk::before, .alx-brk::after { content: ""; position: absolute; width: 12px; height: 15px; border: 3px solid var(--red); }
.alx-brk::before { left: 0; bottom: 0; border-top: 0; border-right: 0; border-bottom-left-radius: 6px; }
.alx-brk::after { right: 0; top: 0; border-bottom: 0; border-left: 0; }

.alx-platform { padding: clamp(64px, 9vw, 130px) clamp(20px, 5vw, 72px); max-width: 1440px; margin: 0 auto; }
.alx-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.alx-feat { background: #fff; border: 1.5px solid #E7E3E4; border-radius: 26px; padding: 18px 18px 28px; transition: transform .35s cubic-bezier(.19, 1, .22, 1), box-shadow .35s; }
.alx-feat:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(31,25,28,.1); }
.alx-feat h3 { font-size: 26px; margin: 22px 10px 8px; }
.alx-feat p { margin: 0 10px; font-size: 15px; line-height: 1.55; color: #4A4245; }
.alx-feat-art { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--ink); }
.alx-art-plan { background-color: #F1EFEF; background-image: linear-gradient(#1F191C 3px, transparent 3px), linear-gradient(90deg, #1F191C 3px, transparent 3px), linear-gradient(rgba(31,25,28,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(31,25,28,.08) 1px, transparent 1px); background-size: 100% 46%, 34% 100%, 22px 22px, 22px 22px; background-position: 0 30%, 40% 0, 0 0, 0 0; }
.alx-art-plan::after { content: ""; position: absolute; left: 12%; top: 50%; width: 22%; height: 34%; background: var(--red); border-radius: 0 0 0 28px; }
.alx-art-budget { display: flex; align-items: center; justify-content: center; background: var(--red); }
.alx-art-budget span { font-family: var(--font-display); font-size: 120px; color: #fff; line-height: 1; }
.alx-art-budget::before, .alx-art-budget::after { content: ""; position: absolute; width: 60px; height: 60px; border: 10px solid #fff; }
.alx-art-budget::before { left: 22px; bottom: 22px; border-top: 0; border-right: 0; border-bottom-left-radius: 26px; }
.alx-art-budget::after { right: 22px; top: 22px; border-bottom: 0; border-left: 0; }
.alx-art-plan2 { background: var(--ink); }
.alx-art-plan2::before { content: ""; position: absolute; left: 10%; right: 10%; top: 26%; height: 10px; border-radius: 5px; background: rgba(249,248,248,.15); box-shadow: 0 30px 0 rgba(249,248,248,.15), 0 60px 0 rgba(249,248,248,.15); }
.alx-art-plan2::after { content: ""; position: absolute; left: 10%; top: 26%; width: 52%; height: 10px; border-radius: 5px; background: var(--red); box-shadow: 60px 30px 0 -0px var(--sand), 110px 60px 0 var(--blue); }

.alx-final { background: var(--red); color: #fff; padding: clamp(72px, 10vw, 150px) clamp(20px, 5vw, 72px); position: relative; overflow: hidden; }
.alx-final::before { content: ""; position: absolute; right: -6vw; bottom: -6vw; width: 34vw; height: 34vw; border: 4vw solid rgba(255,255,255,.12); border-top: 0; border-right: 0; border-bottom-left-radius: 14vw; }
.alx-final-inner { position: relative; max-width: 1300px; margin: 0 auto; }
.alx-final h2 { font-size: clamp(52px, 9vw, 150px); line-height: .92; margin: 0 0 40px; color: #fff; }
.alx-final-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.alx-final .alx-btn-red { background: #fff; color: var(--red); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.alx-final .alx-btn-red:hover { background: var(--ink); color: #fff; }
.alx-final .alx-btn-ghost { border-color: rgba(255,255,255,.45); color: #fff; }

.alx-footer { background: var(--ink); color: var(--paper); padding: 56px clamp(20px, 5vw, 72px) 30px; }
.alx-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 30px; border-bottom: 1px solid rgba(249,248,248,.12); }
.alx-footer-logo { color: var(--red); height: 34px; } .alx-footer-logo svg { height: 34px; width: auto; }
.alx-footer-tag { font-family: var(--font-display); font-size: 22px; }
.alx-footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 30px 0; }
.alx-footer-cols h4 { margin: 0 0 10px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.alx-footer-cols span, .alx-footer-cols a { display: block; color: rgba(249,248,248,.8); text-decoration: none; font-size: 14.5px; line-height: 1.9; }
.alx-footer-cols a:hover { color: #fff; }
.alx-footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: rgba(249,248,248,.45); padding-top: 18px; border-top: 1px solid rgba(249,248,248,.12); }

.alx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s cubic-bezier(.19, 1, .22, 1); }
.alx-reveal.is-in { opacity: 1; transform: none; }
.alx-hero .alx-reveal { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) { .alx-reveal, .alx-line > span { opacity: 1 !important; transform: none !important; transition: none !important; } .alx-marquee-track, .alx-dot, .alx-scroll span::after { animation: none; } }
@media (max-width: 1080px) {
  .alx-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 120px; }
  .alx-doors-grid, .alx-feat-grid { grid-template-columns: 1fr; }
  .alx-values { grid-template-columns: 1fr 1fr; } .alx-value:nth-child(2) { border-right: 0; } .alx-value { border-bottom: 1px solid #E7E3E4; }
  .alx-steps li { grid-template-columns: 70px 1fr; } .alx-step-w { grid-column: 2; text-align: left; }
  .alx-nav a:not(.alx-nav-cta) { display: none; }
  .alx-scroll { display: none; }
}
@media (max-width: 600px) { .alx-values { grid-template-columns: 1fr; } .alx-value { border-right: 0; } .alx-footer-cols { grid-template-columns: 1fr; } .alx-hero-facts { flex-wrap: wrap; } .alx-door { min-height: 0; } }
.alx-door { align-items: flex-start; text-align: left; }
.alx-door > span { text-align: left; }
.alx-title { font-size: clamp(46px, 6.1vw, 98px); }
.alx-final::before { opacity: .7; }

/* ---- v53: calmer, more architectural landing (no marquee, no rotating model, no moving cards) ---- */
.alx-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding-bottom: 80px; }
.alx-hero::before { opacity: .35; }
.alx-hero-visual { margin: 0; padding: 0; position: relative; z-index: 1; }
.alx-drawing { aspect-ratio: 16 / 9; width: 100%; }
.alx-drawing svg { width: 100%; height: 100%; display: block; }
.alx-hero-visual figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(249,248,248,.14); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(249,248,248,.5); }
.alx-line > span { transition-duration: .9s; }
.alx-reveal { transform: translateY(10px); transition: opacity .8s ease, transform .8s ease; }
.alx-capabilities { display: flex; align-items: center; gap: 28px; padding: 26px clamp(20px, 5vw, 72px); background: var(--ink); border-top: 1px solid rgba(249,248,248,.1); color: rgba(249,248,248,.7); }
.alx-cap-l { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.alx-capabilities ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; }
.alx-capabilities li { font-size: 14px; padding: 0 18px; border-left: 1px solid rgba(249,248,248,.16); white-space: nowrap; }
.alx-capabilities li:first-child { border-left: 0; padding-left: 0; }
.alx-door, .alx-feat { transition: border-color .25s ease, background .25s ease, color .25s ease; }
.alx-door:hover, .alx-feat:hover { transform: none; box-shadow: none; }
.alx-door::after { display: none; }
.alx-door { min-height: 300px; border-radius: 4px; border-color: #DCD6D3; }
.alx-door:hover { border-color: var(--ink); }
.alx-door-red:hover { border-color: var(--red); background: #A9302E; }
.alx-door-a b { transition: background .25s, color .25s; }
.alx-door:hover .alx-door-a b { transform: none; }
.alx-feat { border-radius: 4px; padding: 30px 28px 34px; border-color: #DCD6D3; background: transparent; }
.alx-feat:hover { border-color: var(--ink); }
.alx-feat-n { font-family: var(--font-display); font-size: 15px; color: var(--red); letter-spacing: .04em; }
.alx-feat h3 { margin: 40px 0 10px; }
.alx-feat p { margin: 0; }
.alx-btn { border-radius: 2px; }
.alx-btn:hover, .alx-btn:hover span { transform: none; }
.alx-btn-red { box-shadow: none; }
.alx-nav .alx-nav-cta { border-radius: 2px; }
.alx-final::before { display: none; }
.alx-final .alx-btn-red { box-shadow: none; }
.alx-steps li:hover { padding-left: 0; }
@media (max-width: 1080px) { .alx-hero { grid-template-columns: 1fr; } .alx-capabilities { flex-direction: column; align-items: flex-start; gap: 12px; } }

.alx-title { font-size: clamp(44px, 5.3vw, 86px); }
.alx-capabilities li { font-size: 13px; padding: 0 14px; }

/* ============================================================
   PUBLIC LANDING v54 — aligned with the new alternativ.be:
   rounded full-bleed panels, oversized brand brackets, wide grotesk type
   ============================================================ */
.sb-landing.alw { --ink: #1F191C; --paper: #F9F8F8; --red: #C93234; --blue: #003DC4; background: #fff; color: var(--ink); font-family: var(--font-sans); padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 100vh; }
.alw h1, .alw h2, .alw h3, .alw .alw-door-t { font-family: var(--font-display); font-stretch: expanded; font-weight: 600; letter-spacing: -0.015em; }
.alw-panel { position: relative; overflow: hidden; border-radius: clamp(28px, 4.2vw, 72px); isolation: isolate; }
.alw-red { background: var(--red); color: #fff; }
.alw-dark { background: var(--ink); color: var(--paper); }
.alw-paper { background: var(--paper); color: var(--ink); }
.alw-brk { position: absolute; width: clamp(160px, 22vw, 380px); height: clamp(160px, 22vw, 380px); color: rgba(255,255,255,.3); pointer-events: none; z-index: 0; }
.alw-brk.muted { color: rgba(249,248,248,.26); }
.alw-brk.tl { left: 0; top: 0; } .alw-brk.tr { right: 0; top: 0; } .alw-brk.br { right: 12%; bottom: 0; }
.alw-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: clamp(24px, 3.4vw, 52px) clamp(28px, 4.4vw, 88px); }
.alw-logo { color: #fff; display: block; height: clamp(26px, 2.4vw, 40px); }
.alw-logo svg { height: 100%; width: auto; display: block; }
.alw-logo.red { color: var(--red); }
.alw-menu-btn { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; color: #fff; font: inherit; font-size: 17px; font-weight: 500; cursor: pointer; padding: 0; }
.alw-ico { display: inline-flex; width: clamp(38px, 3.2vw, 56px); height: clamp(38px, 3.2vw, 56px); }
.alw-ico svg { width: 100%; height: 100%; }
.alw-menu-btn:hover .alw-ico { opacity: .8; }
.alw-hero { min-height: min(calc(100vh - 24px), 900px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px 6vw 120px; }
.alw-h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(44px, 6.6vw, 118px); line-height: 1.02; color: #fff; }
.alw-sub { position: relative; z-index: 1; margin: 28px 0 0; font-size: clamp(16px, 1.4vw, 20px); color: rgba(255,255,255,.86); max-width: 620px; }
.alw-down { position: absolute; right: clamp(28px, 4.4vw, 88px); bottom: clamp(24px, 3.4vw, 52px); z-index: 2; background: none; border: 0; color: #fff; font-size: clamp(34px, 3vw, 52px); line-height: 1; cursor: pointer; font-weight: 300; }
.alw-photo { min-height: min(calc(100vh - 24px), 820px); background: #2A2326; display: flex; align-items: center; }
.alw-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.alw-photo-shade { position: absolute; inset: 0; z-index: -1; background: rgba(20,16,18,.38); }
.alw-photo-drawing { display: none; }
.alw-photo.no-photo { background: var(--ink); }
.alw-photo.no-photo .alw-photo-shade { display: none; }
.alw-photo.no-photo .alw-photo-drawing { display: block; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 56%; aspect-ratio: 16 / 9; opacity: .9; z-index: -1; }
.alw-photo.no-photo .alw-photo-drawing svg { width: 100%; height: 100%; }
.alw-photo-copy { position: relative; padding: 0 clamp(28px, 6vw, 120px); }
.alw-h2 { margin: 0; font-size: clamp(48px, 7.6vw, 140px); line-height: .98; color: #fff; }
.alw-h2.alw-left { font-size: clamp(34px, 4.4vw, 76px); }
.alw-h2.ink { color: var(--ink); }
.alw-cta { display: flex; gap: 8px; margin-top: clamp(24px, 3vw, 44px); }
.alw-cta.center { justify-content: center; position: relative; z-index: 1; }
.alw-sq { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 22px; text-decoration: none; transition: background .2s; }
.alw-sq.dark { background: var(--ink); }
.alw-sq:hover { background: #000; text-decoration: none; }
.alw-blue { display: inline-flex; align-items: center; height: 62px; padding: 0 34px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 19px; font-weight: 500; text-decoration: none; transition: background .2s; }
.alw-blue:hover { background: #0032A3; text-decoration: none; color: #fff; }
.alw-inner { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: clamp(80px, 10vw, 170px) clamp(28px, 5vw, 96px); }
.alw-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(249,248,248,.6); margin-bottom: 22px; }
.alw-eyebrow.red { color: var(--red); }
.alw-doors-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin-top: clamp(40px, 5vw, 72px); }
.alw-door { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 300px; padding: 32px 30px; border-radius: 28px; border: 1px solid rgba(249,248,248,.16); background: rgba(249,248,248,.04); color: var(--paper); font: inherit; cursor: pointer; transition: background .2s, border-color .2s; }
.alw-door:hover { background: rgba(249,248,248,.08); border-color: rgba(249,248,248,.32); }
.alw-door-red { background: var(--red); border-color: var(--red); }
.alw-door-red:hover { background: #B42C2E; border-color: #B42C2E; }
.alw-door-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.alw-door-t { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.08; }
.alw-door-p { font-size: 15px; line-height: 1.55; opacity: .78; max-width: 360px; }
.alw-door-a { margin-top: auto; display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.alw-door-a b { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(249,248,248,.12); font-weight: 400; }
.alw-door-red .alw-door-a b { background: var(--ink); }
.alw-steps { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.alw-steps li { background: #fff; border-radius: 28px; padding: 28px 26px 32px; }
.alw-steps span { font-family: var(--font-display); color: var(--red); font-size: 15px; font-weight: 600; }
.alw-steps h3 { margin: 44px 0 10px; font-size: clamp(22px, 1.9vw, 30px); }
.alw-steps p { margin: 0; font-size: 15px; line-height: 1.55; color: #4A4245; }
.alw-values { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.alw-values span { border: 1.5px solid var(--ink); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; }
.alw-final { padding: clamp(100px, 12vw, 200px) 6vw; text-align: center; }
.alw-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; padding: 48px clamp(28px, 5vw, 96px) 36px; align-items: start; }
.alw-footer h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.alw-footer span, .alw-footer a { display: block; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.8; }
.alw-footer a:hover { color: var(--red); }
.alw-footer small { grid-column: 1 / -1; color: #8C8487; font-size: 12.5px; padding-top: 20px; border-top: 1px solid #ECE8E6; }
.alw-menu { position: fixed; inset: 12px; z-index: 50; background: var(--ink); color: var(--paper); border-radius: clamp(28px, 4.2vw, 72px); padding: clamp(24px, 3.4vw, 52px) clamp(28px, 4.4vw, 88px); display: flex; flex-direction: column; }
.alw-menu[hidden] { display: none; }
.alw-menu-top { display: flex; justify-content: space-between; align-items: center; }
.alw-menu-links { margin: auto 0; display: flex; flex-direction: column; gap: 6px; }
.alw-menu-links a { font-family: var(--font-display); font-stretch: expanded; font-weight: 600; font-size: clamp(36px, 5vw, 84px); color: var(--paper); text-decoration: none; line-height: 1.12; transition: color .2s; }
.alw-menu-links a:hover { color: var(--red); text-decoration: none; }
.alw-menu-foot { display: flex; gap: 28px; flex-wrap: wrap; font-size: 15px; }
.alw-menu-foot a, .alw-menu-foot span { color: rgba(249,248,248,.7); text-decoration: none; }
@media (max-width: 1000px) { .alw-doors-grid { grid-template-columns: 1fr; } .alw-steps { grid-template-columns: 1fr 1fr; } .alw-footer { grid-template-columns: 1fr 1fr; } .alw-photo.no-photo .alw-photo-drawing { display: none; } }
@media (max-width: 600px) { .alw-steps { grid-template-columns: 1fr; } .alw-menu-btn { font-size: 0; gap: 0; } .alw-brk { opacity: .7; } }
.alw-photo.no-photo .alw-photo-copy { max-width: 46%; }
.alw-photo.no-photo .alw-h2 { font-size: clamp(44px, 5.6vw, 104px); }
.alw-photo.no-photo .alw-photo-drawing { width: 46%; right: 5%; }
.alw-photo.no-photo .alw-sq { background: rgba(249,248,248,.12); }
@media (max-width: 1000px) { .alw-photo.no-photo .alw-photo-copy { max-width: none; } }
/* v55: landing = the three entrances only */
.alw-gate { min-height: min(calc(100vh - 24px), 980px); display: flex; align-items: center; }
.alw-gate-inner { position: relative; z-index: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 150px clamp(28px, 5vw, 96px) 90px; }
.alw-gate .alw-h1 { text-align: center; font-size: clamp(40px, 5.4vw, 96px); }
.alw-gate .alw-doors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); }
.alw-door-white { background: #fff; border-color: #fff; color: var(--ink); }
.alw-door-white:hover { background: #F9F8F8; border-color: #F9F8F8; }
.alw-door-white .alw-door-a b { background: var(--blue); color: #fff; }
.alw-door-dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.alw-door-dark:hover { background: #2A2326; border-color: #2A2326; }
@media (max-width: 1000px) { .alw-gate .alw-doors-grid { grid-template-columns: 1fr; } }
/* v55: brand pattern fragments (true letterform pieces, stroke = 20 grid units) */
.alw-frag { --s: clamp(22px, 3.1vw, 50px); position: absolute; width: calc(var(--fw) / 20 * var(--s)); height: calc(var(--fh) / 20 * var(--s)); color: rgba(255,255,255,.3); pointer-events: none; z-index: 0; overflow: visible; }
.alw-frag.tl { left: calc(var(--fw) / 20 * var(--s) * -0.42); top: calc(var(--fh) / 20 * var(--s) * -0.48); }
.alw-frag.tr { right: calc(var(--fw) / 20 * var(--s) * -0.4); top: calc(var(--fh) / 20 * var(--s) * -0.45); }
.alw-frag.br { right: 11%; bottom: calc(var(--fh) / 20 * var(--s) * -0.42); }
.alw-dark .alw-frag { color: rgba(249,248,248,.18); }
.alw-frag.blue { color: rgba(102,139,220,.55); } .alw-frag.sand { color: rgba(235,200,178,.6); }
.alw-brk { display: none; }
/* v55: ergonomics & safety panel */
.sp-comp .sp-step-h b.sp-cscore { margin-left: auto; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #FBEAEA; color: #BC3634; }
.sp-comp .sp-step-h b.sp-cscore.ok { background: #E6F4EC; color: #1F8A4C; }
.sp-cclist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.sp-cc { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.35; }
.sp-cc i { flex: 0 0 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #1F8A4C; }
.sp-cc.warn i { background: #D08A1E; } .sp-cc.ko i { background: #BC3634; }
.sp-cc strong { display: block; font-size: 12px; } .sp-cc span { display: block; color: var(--ink, #1E1A1B); opacity: .8; }
.sp-cc em { display: block; font-style: normal; font-size: 10.5px; opacity: .55; }
.sp-rules { margin: 8px 0; } .sp-rules .sp-nf span { font-size: 10.5px; }

/* v59 — restored / missing component styles */
.totals { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 24px; margin-top: 18px; align-items: start; }
.totals .sums { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.totals .sums .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.totals .sums .row + .row { border-top: 1px dashed var(--line); }
.totals .sums .row.muted { color: var(--muted); }
.totals .sums .row .num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.totals .sums .row.grand { border-top: 2px solid var(--ink) !important; margin-top: 6px; padding-top: 12px; font-size: 16px; font-weight: 800; color: var(--ink); }
.totals .sums .row.grand .num { font-size: 18px; color: var(--accent); }
.section-actions { display: flex; gap: 8px; padding: 10px 14px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13px; background: var(--panel); transition: border-color .15s ease, background .15s ease; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.qa-input { width: 100%; }
[hidden] { display: none !important; }
/* v59 — page head never squeezes the title; secondary actions in a "More" menu */
.page-head { flex-wrap: wrap; align-items: flex-start; }
.page-head > .grow { flex: 1 1 380px; min-width: 280px; }
.page-head h1 { line-height: 1.15; }
.more-menu { position: relative; display: inline-block; }
.more-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); font-weight: 600; font-size: 13px; user-select: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu[open] > summary { border-color: var(--accent); color: var(--accent); }
.more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(30,26,27,.16); padding: 6px; display: grid; gap: 2px; }
.more-pop button { justify-content: flex-start; text-align: left; border: 0; background: transparent; width: 100%; padding: 8px 10px; border-radius: 8px; }
.more-pop button:hover { background: var(--bg, #F6F4F4); }
.more-pop button.danger { color: var(--danger, #BC3634); }
.topbar .icon-btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
@media (max-width: 1500px) { .topbar .build-tag-wrap { display: none; } }
@media (max-width: 1280px) { .topbar .save-status #save-msg { display: none; } }
.topbar .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.col-actions { white-space: nowrap; text-align: right; }
td.col-actions > * { vertical-align: middle; }
/* v59 — quote line table: numbers never truncated; empty trades collapse to one tidy row */
@media (min-width: 901px) {
  table.lines td.col-num input[type=number] { min-width: 76px; }
  table.lines td.col-num input[data-lf="qty"], table.lines td.col-num input[data-lf="disc"] { min-width: 58px; }
  table.lines td select[data-lf="supplierId"], table.lines td select { min-width: 110px; }
  table.lines td:first-child input { min-width: 220px; }
}
.section-panel.is-empty { box-shadow: none; }
.section-panel.is-empty table.lines { display: none; }
.section-panel.is-empty .panel-header { padding-top: 8px; padding-bottom: 8px; }
.section-panel.is-empty .panel-header h2 { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.section-panel.is-empty .target-pill, .section-panel.is-empty .collapsed-summary { display: none; }
.section-panel.is-empty .quick-add { padding-top: 6px; padding-bottom: 10px; }
.section-panel.is-empty .quick-add .qa-help { display: none; }
/* v59 — client portal never shows team chrome */
body.cp-mode .chat-fab, body.cp-mode #chat-fab, body.cp-mode #btn-export-all, body.cp-mode #btn-import-all,
body.cp-mode .save-status, body.cp-mode .build-tag-wrap, body.cp-mode .chat-panel { display: none !important; }

/* ============ v59 — Executive cockpit ============ */
.cockpit { display: grid; gap: 14px; margin: 0 0 22px; }
.ck-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 20px 24px 22px; color: #F9F8F8;
  background: radial-gradient(120% 140% at 100% 0%, rgba(188,54,52,.55) 0%, rgba(188,54,52,0) 46%), linear-gradient(135deg, #1F191C 0%, #2A2124 100%); }
.ck-hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border: 26px solid rgba(255,255,255,.06); border-radius: 0 0 0 110px; border-top: 0; border-right: 0; pointer-events: none; }
.ck-hero-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ck-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; opacity: .75; }
.ck-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; opacity: .8; }
.ck-live i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 4px rgba(61,220,132,.18); }
.ck-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; z-index: 1; }
.ck-kpi { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(4px); animation: ckUp .5s ease both; }
.ck-kpi:nth-child(2) { animation-delay: .06s } .ck-kpi:nth-child(3) { animation-delay: .12s } .ck-kpi:nth-child(4) { animation-delay: .18s }
.ck-kpi span { display: block; font-size: 11.5px; opacity: .7; font-weight: 600; }
.ck-kpi b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 2px; font-variant-numeric: tabular-nums; }
.ck-kpi small { font-size: 11.5px; opacity: .62; }
.ck-kpi.warn b { color: #FFB3AE; }
.ck-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ck-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; min-width: 0; animation: ckUp .5s ease both; }
.ck-span2 { grid-column: span 2; }
.ck-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ck-card-h h3 { margin: 0; font-size: 14px; font-weight: 750; }
.ck-key { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.ck-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .ck-key i.inv { background: #1F191C; } .ck-key i.fc { background: linear-gradient(#BC3634, #E7867E); margin-left: 6px; }
.ck-curve { width: 100%; height: 190px; display: block; }
.ck-ax { font-size: 10px; fill: var(--muted); } .ck-ax.cur { fill: #BC3634; font-weight: 700; }
.ck-bar { animation: ckGrow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); transform-origin: 50% 100%; transform-box: fill-box; }
.ck-donut { display: flex; align-items: center; gap: 14px; } .ck-donut svg { width: 128px; height: 128px; flex: none; }
.ck-arc { transition: stroke-dasharray .6s ease; }
.ck-dn-v { font-size: 15px; font-weight: 800; fill: var(--ink); } .ck-dn-l { font-size: 7.5px; fill: var(--muted); }
.ck-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; color: var(--muted); }
.ck-leg i { width: 9px; height: 9px; border-radius: 50%; } .ck-leg b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; padding-left: 12px; }
.ck-fun-row { display: grid; grid-template-columns: 112px 1fr 64px; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.ck-fun-l { font-size: 12.5px; font-weight: 600; } .ck-fun-l small { margin-left: 6px; color: var(--muted); font-weight: 500; }
.ck-fun-bar { height: 10px; background: #F1EFEF; border-radius: 99px; overflow: hidden; } .ck-fun-bar i { display: block; height: 100%; border-radius: 99px; animation: ckW .8s ease both; }
.ck-fun-v { text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-mg { display: grid; grid-template-columns: minmax(0, 1fr) 90px 46px; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.ck-mg-n { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-mg-bar { position: relative; height: 8px; background: #F1EFEF; border-radius: 99px; } .ck-mg-bar i { display: block; height: 100%; border-radius: 99px; animation: ckW .8s ease both; }
.ck-mg-bar i.ok { background: #1F8A4C; } .ck-mg-bar i.low { background: #D08A1E; }
.ck-mg-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #1F191C; opacity: .5; }
.ck-mg-v { text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-act { display: grid; grid-template-columns: 30px 1fr 16px; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.ck-act:hover { background: var(--bg, #F6F4F4); }
.ck-act-i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #F1EFEF; color: var(--ink); }
.ck-act.sev3 .ck-act-i { background: #FBEAEA; color: #BC3634; } .ck-act.sev2 .ck-act-i { background: #FDF3E1; color: #A86A10; }
.ck-act-t b { display: block; font-size: 12.5px; font-weight: 650; } .ck-act-t small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-act-go { color: var(--muted); } .ck-act:hover .ck-act-go { color: var(--accent); }
.ck-empty { color: var(--muted); font-size: 13px; padding: 12px 0; }
@keyframes ckUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ckGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ckW { from { width: 0; } }
@media (max-width: 1100px) { .ck-kpis { grid-template-columns: repeat(2, 1fr); } .ck-grid { grid-template-columns: 1fr; } .ck-span2 { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .ck-kpi, .ck-card, .ck-bar, .ck-fun-bar i, .ck-mg-bar i { animation: none !important; } }
/* ============ v59 — Command palette ============ */
.cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2, #F6F4F4); color: var(--muted); font-size: 12.5px; min-width: 240px; margin-right: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.cmdk-trigger:hover { border-color: var(--line-strong); background: var(--panel); color: var(--ink); }
.cmdk-trigger span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-trigger kbd, .cmdk kbd { font: 600 10.5px/1 ui-monospace, Menlo, monospace; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
@media (max-width: 1280px) { .cmdk-trigger { min-width: 0; } .cmdk-trigger span { display: none; } }
.cmdk-wrap { position: fixed; inset: 0; z-index: 400; background: rgba(31,25,28,.36); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; opacity: 0; transition: opacity .14s ease; }
.cmdk-wrap.on { opacity: 1; }
.cmdk { width: min(680px, 92vw); background: var(--panel); border-radius: 18px; box-shadow: 0 30px 80px rgba(31,25,28,.35), 0 0 0 1px rgba(31,25,28,.06); overflow: hidden; transform: translateY(-6px) scale(.985); transition: transform .16s ease; }
.cmdk-wrap.on .cmdk { transform: none; }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk-in input { flex: 1; border: 0 !important; box-shadow: none !important; padding: 4px 0 !important; font-size: 16px; background: transparent !important; color: var(--ink); }
.cmdk-list { max-height: min(58vh, 520px); overflow-y: auto; padding: 6px 8px 8px; }
.cmdk-g { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.cmdk-it { display: grid; grid-template-columns: 32px 1fr 18px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.cmdk-it.sel { background: #FBEDEC; }
.cmdk-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #F1EFEF; font-weight: 700; color: var(--ink); }
.cmdk-it.sel .cmdk-ic { background: var(--accent); color: #fff; }
.cmdk-tx b { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-tx small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-go { color: transparent; font-weight: 700; } .cmdk-it.sel .cmdk-go { color: var(--accent); }
.cmdk-none { padding: 26px; text-align: center; color: var(--muted); }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); background: var(--bg-2, #FAF9F9); }
.cmdk-foot kbd { margin-right: 3px; }
/* ============ v60 — Quote e-signature ============ */
.sig-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sig-summary { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; background: var(--bg-2, #FAF9F9); }
.sig-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13.5px; } .sig-sum-row b { font-size: 18px; } .sig-sum-row.muted { color: var(--muted); }
.sig-pad-wrap { position: relative; margin-top: 6px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: #fff; height: 190px; }
.sig-pad { width: 100%; height: 100%; display: block; border-radius: 14px; cursor: crosshair; }
.sig-pad-hint { position: absolute; left: 16px; bottom: 34px; right: 16px; border-top: 1px solid var(--line); padding-top: 6px; font-size: 11.5px; color: var(--muted-2, #a39a9d); pointer-events: none; }
.sig-clear { position: absolute; top: 8px; right: 8px; }
.sig-strip { display: flex; align-items: center; gap: 14px; margin: -6px 0 14px; padding: 10px 16px; border-radius: 14px; background: #E9F5EE; border: 1px solid #BFE3CC; color: #14532D; font-size: 13px; }
.sig-strip img { height: 40px; max-width: 140px; background: #fff; border-radius: 8px; padding: 2px 6px; border: 1px solid #BFE3CC; }
.sig-strip small { display: block; color: #3F6B50; font-size: 12px; margin-top: 2px; }
.sig.signed img { filter: none; }
.cp-sign-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 16px; margin: 0 0 16px; background: linear-gradient(135deg, #1F191C, #3A2B2F); color: #fff; }
.cp-sign-cta b { font-size: 16px; } .cp-sign-cta small { display: block; opacity: .75; margin-top: 2px; }
.cp-sign-cta button { background: #fff; color: #1F191C; border: 0; font-weight: 700; padding: 10px 18px; border-radius: 999px; }
.cp-signed { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; margin: 0 0 16px; background: #E9F5EE; border: 1px solid #BFE3CC; color: #14532D; }
.cp-signed img { height: 46px; background: #fff; border-radius: 8px; padding: 2px 8px; }
@media (max-width: 700px) { .sig-form .row-2 { grid-template-columns: 1fr; } .cp-sign-cta { flex-direction: column; align-items: flex-start; } }
/* ============ v60 — Cost control ============ */
.cost-control .pill.ok { background: #E6F4EC; color: #1F8A4C; } .cost-control .pill.warn { background: #FBEAEA; color: #BC3634; }
.cc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cc-kpis > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cc-kpis span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; } .cc-kpis b { font-size: 19px; font-variant-numeric: tabular-nums; } .cc-kpis small { display: block; font-size: 11.5px; color: var(--muted); }
.cc-kpis .warn { border-color: #F3C9C4; background: #FDF3F2; } .cc-kpis .warn b { color: #BC3634; }
.cc-table td small { display: block; font-size: 10.5px; color: var(--muted); }
.cc-bar { position: relative; height: 18px; } .cc-bar i { position: absolute; left: 0; height: 5px; border-radius: 3px; }
.cc-bar i.b { top: 0; background: #D6D0D2; } .cc-bar i.c { top: 6px; background: #668BDC; } .cc-bar i.a { top: 12px; background: #1F191C; }
.cc-key { display: inline-flex; gap: 5px; align-items: center; text-transform: none; letter-spacing: 0; font-weight: 500; }
.cc-key i { display: inline-block; width: 9px; height: 5px; border-radius: 2px; margin-left: 4px; } .cc-key i.b { background: #D6D0D2; } .cc-key i.c { background: #668BDC; } .cc-key i.a { background: #1F191C; }
.cc-over td { background: #FDF6F5; } .cc-red { color: #BC3634; font-weight: 700; } .cc-amber { color: #A86A10; font-weight: 600; } .cc-ok { color: #1F8A4C; }
.cc-bills { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; } .cc-bills-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.cc-bill { display: grid; grid-template-columns: 90px 1.4fr 1fr 1.2fr 110px 24px; gap: 10px; align-items: center; padding: 6px 0; font-size: 12.5px; border-bottom: 1px dashed var(--line); }
.cc-bill .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .cc-kpis { grid-template-columns: repeat(2, 1fr); } }
/* ============ v60 — Workload heatmap ============ */
.wl-table { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 12px; padding: 8px 12px; }
.wl-table th { font-size: 10.5px; color: var(--muted); font-weight: 600; text-align: center; padding: 2px 0 6px; white-space: nowrap; } .wl-table th:first-child { text-align: left; } .wl-table th.cur { color: var(--accent); }
.wl-who { min-width: 190px; padding-right: 10px; } .wl-who b { display: block; font-size: 13px; } .wl-who small { color: var(--muted); font-size: 11px; }
.wl-c { height: 34px; min-width: 46px; border-radius: 8px; text-align: center; font-weight: 700; font-size: 11px; cursor: default; transition: transform .12s; }
.wl-c:hover { transform: scale(1.06); }
.wl-c.z { background: #F6F4F4; } .wl-c.l { background: #E7EEF9; color: #3B5BA9; } .wl-c.m { background: #CFE9DA; color: #1F6B40; } .wl-c.h { background: #F8DFB4; color: #8A5A0E; } .wl-c.x { background: #F2B8B3; color: #8E1F1D; }
.wl-flag { white-space: nowrap; padding-left: 8px; }
.wl-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 6px 16px 14px; font-size: 11.5px; color: var(--muted); }
.wl-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; }
.wl-legend i.l { background: #E7EEF9; } .wl-legend i.m { background: #CFE9DA; } .wl-legend i.h { background: #F8DFB4; } .wl-legend i.x { background: #F2B8B3; }
.wl-note { flex-basis: 100%; font-size: 11px; }
.ai-photo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius); cursor: pointer; font-weight: 650; font-size: 13px; color: #fff; background: linear-gradient(135deg, #1F191C, #4A3A3F); border: 0; }
.ai-photo-btn:hover { filter: brightness(1.12); }
.ai-photo-btn.busy { opacity: .75; pointer-events: none; animation: aiPulse 1.2s ease-in-out infinite; }
@keyframes aiPulse { 50% { opacity: .5; } }
/* ============ v60 — Client presentation mode ============ */
.present-btn { background: #1F191C !important; color: #fff !important; border-color: #1F191C !important; font-weight: 700; }
.present-btn:hover { background: #3A2B2F !important; }
.pz { position: fixed; inset: 0; z-index: 900; background: #F9F8F8; overflow: hidden; opacity: 0; transition: opacity .25s ease; outline: none; font-family: var(--font-sans, inherit); color: #1F191C; }
.pz.in { opacity: 1; }
.pz-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.65,0,.25,1); }
.pz-slide { flex: 0 0 100vw; height: 100%; display: flex; align-items: center; justify-content: center; padding: 6vh 7vw; box-sizing: border-box; }
.pz-slide > section { width: 100%; max-width: 1240px; opacity: 0; transform: translateY(14px); transition: opacity .5s .2s ease, transform .5s .2s ease; }
.pz-slide.on > section { opacity: 1; transform: none; }
.pz-eyebrow { display: inline-block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #BC3634; margin-bottom: 14px; }
.pz h2 { font-size: clamp(30px, 4vw, 54px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 28px; font-weight: 800; max-width: 22ch; }
.pz h2 small { font-size: .45em; color: #6F676A; font-weight: 600; letter-spacing: 0; }
.pz-note { color: #6F676A; font-size: 15px; max-width: 70ch; margin-top: 24px; }
.pz-slide:has(.pz-cover) { background: #BC3634; color: #fff; padding: 0; }
.pz-cover { position: relative; height: 100vh; max-width: none !important; display: flex; flex-direction: column; justify-content: space-between; padding: 7vh 7vw; box-sizing: border-box; overflow: hidden; }
.pz-brand svg { height: 34px; width: auto; color: #fff; }
.pz-cover h1 { font-size: clamp(44px, 7vw, 104px); line-height: .98; letter-spacing: -.03em; margin: 0 0 14px; max-width: 14ch; font-weight: 800; }
.pz-cover p { font-size: 20px; opacity: .9; margin: 0; }
.pz-cover .pz-eyebrow { color: rgba(255,255,255,.8); }
.pz-cover-foot { font-size: 14px; opacity: .8; }
.pz-frag { position: absolute; border: 3.4vw solid rgba(255,255,255,.22); pointer-events: none; }
.pz-frag.f1 { right: -6vw; top: -10vh; width: 30vw; height: 40vh; border-left: 0; border-top: 0; border-radius: 0 0 14vw 0; }
.pz-frag.f2 { right: 18vw; bottom: -12vh; width: 22vw; height: 30vh; border-bottom: 0; border-left: 0; border-radius: 0 3vw 0 0; }
.pz-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pz-chip { background: #fff; border: 1px solid #E7E1E2; border-radius: 16px; padding: 16px 18px; } .pz-chip b { display: block; font-size: 16px; } .pz-chip span { font-size: 13px; color: #6F676A; }
.pz-plan { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 20px 60px rgba(31,25,28,.08); max-height: 56vh; display: flex; } .pz-plan svg { width: 100%; height: auto; max-height: 52vh; }
.pz-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px; font-size: 15px; color: #6F676A; } .pz-stats b { color: #1F191C; font-size: 22px; margin-right: 4px; }
.pz-3d { height: 62vh; border-radius: 18px; overflow: hidden; background: #1F191C; position: relative; }
.pz-3d .sp-3d { height: 100%; } .pz-3d canvas { width: 100% !important; height: 100% !important; display: block; } .pz-3d .sp-hint { display: none; }
.pz-3d-load { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: 15px; }
.pz-bars { display: grid; gap: 10px; max-width: 980px; }
.pz-bar { display: grid; grid-template-columns: 260px 1fr 150px; align-items: center; gap: 16px; font-size: 15px; }
.pz-bar i { height: 14px; border-radius: 99px; background: linear-gradient(90deg, #BC3634, #E7867E); width: 0; transition: width 1s .5s cubic-bezier(.2,.8,.2,1); }
.pz-slide.on .pz-bar i { width: var(--w); } .pz-bar b { text-align: right; font-variant-numeric: tabular-nums; } .pz-bar.more span { color: #6F676A; }
.pz-tot { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 26px; padding-top: 18px; border-top: 2px solid #1F191C; font-size: 15px; color: #6F676A; }
.pz-tot b { display: block; color: #1F191C; font-size: 24px; font-variant-numeric: tabular-nums; } .pz-tot .g b { color: #BC3634; font-size: 30px; }
.pz-gantt { position: relative; background: #fff; border-radius: 18px; padding: 18px 22px 12px; box-shadow: 0 20px 60px rgba(31,25,28,.06); }
.pz-g-months { position: relative; height: 22px; margin-left: 240px; border-bottom: 1px solid #E7E1E2; margin-bottom: 8px; } .pz-g-months span { position: absolute; top: 0; font-size: 12px; color: #6F676A; text-transform: uppercase; letter-spacing: .06em; }
.pz-g-row { display: grid; grid-template-columns: 240px 1fr; align-items: center; height: 30px; font-size: 13.5px; } .pz-g-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.pz-g-row div { position: relative; height: 12px; background: #F4F1F1; border-radius: 99px; } .pz-g-row i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: #1F191C; } .pz-g-row i.done { background: #1F8A4C; }
.pz-steps { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: s; }
.pz-steps li { background: #fff; border-radius: 18px; padding: 20px; border: 1px solid #E7E1E2; counter-increment: s; } .pz-steps li::before { content: "0" counter(s); display: block; color: #BC3634; font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.pz-steps b { display: block; font-size: 17px; margin-bottom: 4px; } .pz-steps span { color: #6F676A; font-size: 13.5px; }
.pz-sign { background: #BC3634; color: #fff; border: 0; font-size: 18px; font-weight: 800; padding: 16px 30px; border-radius: 999px; cursor: pointer; box-shadow: 0 14px 30px rgba(188,54,52,.3); }
.pz-contact { margin-top: 22px; color: #6F676A; font-size: 14px; }
.pz-ui { position: fixed; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.pz-ui > * { pointer-events: auto; }
.pz-x { position: fixed; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(31,25,28,.08); font-size: 22px; cursor: pointer; color: inherit; }
.pz-dots { display: flex; gap: 8px; padding: 8px 12px; border-radius: 99px; background: rgba(255,255,255,.8); backdrop-filter: blur(6px); box-shadow: 0 4px 18px rgba(31,25,28,.1); }
.pz-dots i { width: 8px; height: 8px; border-radius: 99px; background: #D6D0D2; cursor: pointer; transition: width .3s, background .3s; } .pz-dots i.on { width: 26px; background: #BC3634; }
.pz-nav { position: fixed; right: 22px; bottom: 18px; display: flex; gap: 8px; } .pz-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #1F191C; color: #fff; font-size: 22px; cursor: pointer; }
.pz-prog { position: fixed; left: 0; right: 0; top: 0; height: 3px; } .pz-prog i { display: block; height: 100%; background: #BC3634; transition: width .5s; }
@media (max-width: 900px) { .pz-steps { grid-template-columns: 1fr 1fr; } .pz-bar { grid-template-columns: 140px 1fr 100px; } .pz-g-row { grid-template-columns: 140px 1fr; } .pz-g-months { margin-left: 140px; } }
.pz-cover, .pz-cover h1, .pz-cover p, .pz-cover-foot { color: #fff !important; }
.pz-slide:has(.pz-cover) ~ * { }
.pz-3d { background: radial-gradient(120% 120% at 50% 0%, #3A2B2F 0%, #1F191C 70%); }
/* ============ v61 — Presentation content slides ============ */
.pz-lead { font-size: clamp(18px, 1.8vw, 26px); line-height: 1.45; max-width: 46ch; color: #3A3235; margin: 0 0 34px; }
.pz-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; max-width: 1100px; }
.pz-figs div { border-top: 3px solid #BC3634; padding-top: 14px; } .pz-figs b { display: block; font-size: clamp(30px, 3.4vw, 50px); font-weight: 800; letter-spacing: -.02em; } .pz-figs span { color: #6F676A; font-size: 15px; }
.pz-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; position: relative; }
.pz-step { background: #fff; border: 1px solid #E7E1E2; border-radius: 18px; padding: 18px 18px 20px; position: relative; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; transition-delay: calc(.35s + var(--i) * .12s); }
.pz-slide.on .pz-step { opacity: 1; transform: none; }
.pz-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #BC3634; color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 12px; }
.pz-step b { display: block; font-size: 18px; margin-bottom: 2px; } .pz-step em { display: block; font-style: normal; font-size: 12px; color: #BC3634; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .pz-step p { margin: 0; color: #6F676A; font-size: 14px; line-height: 1.45; }
.pz-team { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pz-team.n1 { grid-template-columns: minmax(0, 360px); } .pz-team.n2 { grid-template-columns: repeat(2, minmax(0, 360px)); } .pz-team.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pz-person { background: #fff; border: 1px solid #E7E1E2; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.pz-person img, .pz-av { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.pz-av { display: grid; place-items: center; background: linear-gradient(135deg, #BC3634, #E7867E); color: #fff; font-weight: 800; font-size: 30px; }
.pz-person b { font-size: 19px; } .pz-role { color: #BC3634; font-weight: 700; font-size: 13.5px; } .pz-yrs { color: #6F676A; font-size: 13px; }
.pz-person p { margin: 8px 0 6px; font-size: 14px; color: #3A3235; line-height: 1.45; } .pz-person small { color: #6F676A; font-size: 12.5px; margin-top: auto; }
.pz-refs { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pz-refs.n1 { grid-template-columns: minmax(0, 520px); } .pz-refs.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pz-ref { background: #fff; border: 1px solid #E7E1E2; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.pz-ref-img { height: 30vh; max-height: 260px; background-size: cover; background-position: center; } .pz-ref-img.empty { display: grid; place-items: center; background: linear-gradient(135deg, #1F191C, #4A3A3F); color: rgba(255,255,255,.75); font-size: 40px; font-weight: 800; }
.pz-ref-b { padding: 16px 18px 18px; } .pz-ref-b b { display: block; font-size: 18px; } .pz-ref-b > span { color: #6F676A; font-size: 13.5px; }
.pz-ref-k { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .pz-ref-k i { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: #F4EEEE; color: #7A2422; }
.pz-ref-b p { margin: 0 0 8px; font-size: 13.5px; color: #3A3235; } .pz-ref blockquote { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid #BC3634; background: #FAF6F6; font-size: 13.5px; font-style: italic; color: #3A3235; border-radius: 0 10px 10px 0; } .pz-ref cite { display: block; font-style: normal; font-size: 12px; color: #6F676A; margin-top: 4px; }
.pz-commit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1100px; } .pz-commit div { background: #fff; border: 1px solid #E7E1E2; border-radius: 18px; padding: 18px 20px 18px 58px; position: relative; }
.pz-commit i { position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%; background: #1F8A4C; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; }
.pz-commit b { display: block; font-size: 17px; margin-bottom: 4px; } .pz-commit p { margin: 0; color: #6F676A; font-size: 14px; }
.pz-sus { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; max-width: 1100px; background: #EEF6F0; border-radius: 18px; padding: 16px 20px; } .pz-sus span { font-size: 22px; } .pz-sus p { margin: 0; color: #1F4F33; font-size: 14.5px; }
@media (max-width: 1000px) { .pz-team, .pz-team.n3, .pz-refs { grid-template-columns: 1fr 1fr; } .pz-figs { grid-template-columns: 1fr 1fr; } .pz-commit { grid-template-columns: 1fr; } }
/* editor (Company branding) */
.pze-sec { border-top: 1px solid var(--line); padding: 16px 0 14px; } .pze-sec:first-child { border-top: 0; padding-top: 0; }
.pze-sec h3 { margin: 0 0 10px; font-size: 14px; } .pze-sec h3 small { font-weight: 500; color: var(--muted); font-size: 12px; margin-left: 6px; }
.pze-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; } .pze-label small { font-weight: 500; }
.pze-figs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .pze-fig { display: grid; grid-template-columns: 110px 220px 24px; gap: 6px; align-items: center; }
.pze-row { display: grid; grid-template-columns: 26px 1fr 160px 1.6fr 24px; gap: 8px; align-items: start; margin-bottom: 8px; } .pze-row textarea { min-height: 38px; }
.pze-row.c2 { grid-template-columns: 26px 1fr 2fr 24px; }
.pze-n { width: 26px; height: 26px; border-radius: 8px; background: #FBEDEC; color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 12px; margin-top: 6px; }
.pze-people, .pze-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; margin-bottom: 10px; }
.pze-person, .pze-ref { display: grid; grid-template-columns: 96px 1fr 24px; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; } .pze-person > div, .pze-ref > div { display: grid; gap: 6px; }
.pze-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pze-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.pze-img { width: 96px; height: 96px; border-radius: 12px; border: 1.5px dashed var(--line-strong); display: grid; place-items: center; cursor: pointer; overflow: hidden; color: var(--muted); font-size: 12px; background: var(--bg-2, #FAF9F9); }
.pze-img.round { border-radius: 50%; } .pze-img img { width: 100%; height: 100%; object-fit: cover; }
.pzs-grid { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 18px; } .pzs-grid h4 { margin: 0 0 8px; font-size: 13px; } .pzs-grid .sp-nc { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
/* ============ v61 — deck-derived slides ============ */
.pz-about.with-photo { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4vw; align-items: center; }
.pz-about-img { height: 66vh; border-radius: 24px; background-size: cover; background-position: center; box-shadow: 0 30px 70px rgba(31,25,28,.18); }
.pz-about.with-photo .pz-figs { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .pz-about.with-photo .pz-figs b { font-size: clamp(26px, 2.6vw, 40px); }
.pz-tl { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0; margin-top: 10px; }
.pz-tl::before { content: ""; position: absolute; left: 0; right: 0; top: 52px; height: 2px; background: #E7E1E2; }
.pz-tl-i { position: relative; padding-right: 12px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; transition-delay: calc(.3s + var(--i) * .08s); }
.pz-slide.on .pz-tl-i { opacity: 1; transform: none; }
.pz-tl-i b { display: block; font-size: clamp(20px, 2vw, 30px); font-weight: 800; letter-spacing: -.02em; height: 40px; }
.pz-tl-i i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #BC3634; border: 3px solid #F9F8F8; box-shadow: 0 0 0 2px #BC3634; margin: 3px 0 14px; position: relative; z-index: 1; }
.pz-tl-i span { display: block; font-size: 14px; color: #3A3235; line-height: 1.4; }
.pz-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pz-svc div { background: #fff; border: 1px solid #E7E1E2; border-radius: 20px; padding: 22px; min-height: 150px; }
.pz-svc-how { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #BC3634; background: #FBEDEC; padding: 4px 10px; border-radius: 99px; margin-bottom: 14px; }
.pz-svc b { display: block; font-size: 20px; margin-bottom: 6px; } .pz-svc p { margin: 0; color: #6F676A; font-size: 14.5px; }
.pz-partners { margin-top: 20px; color: #6F676A; font-size: 15px; max-width: 90ch; } .pz-partners b { color: #1F191C; }
.pz-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pz-roles div { border-radius: 16px; padding: 14px 16px; background: #fff; border: 1px solid #E7E1E2; } .pz-roles div.lead { background: #1F191C; color: #fff; border-color: #1F191C; }
.pz-roles b { display: block; font-size: 15px; margin-bottom: 3px; } .pz-roles span { font-size: 12.5px; color: #6F676A; } .pz-roles .lead span { color: rgba(255,255,255,.7); }
.pz-team:empty { display: none; }
.pz-trust { margin-top: 18px; display: flex; gap: 14px; align-items: baseline; } .pz-trust span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #BC3634; white-space: nowrap; } .pz-trust p { margin: 0; color: #6F676A; font-size: 14px; line-height: 1.6; }
.pz-net { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; } .pz-net-map { width: 100%; max-height: 66vh; object-fit: contain; }
.pz-net .pz-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pz-sus img { height: 96px; width: 96px; object-fit: contain; border-radius: 50%; background: #fff; flex: none; }
@media (max-width: 1000px) { .pz-about.with-photo, .pz-net { grid-template-columns: 1fr; } .pz-about-img { height: 30vh; } }
.pze-row.hist { grid-template-columns: 26px 110px 1fr 24px; }
.pze-fig { grid-template-columns: 110px 320px 24px; }
/* ============ v62 — Presentation editor, themes, layouts, custom slides ============ */
.pz-slide.pz-t-dark { background: #1F191C; color: #F9F8F8; }
.pz-slide.pz-t-red { background: #BC3634; color: #fff; }
.pz-slide.pz-t-sand { background: #F3E6DC; }
.pz-slide.pz-t-light { background: #fff; }
.pz-t-dark .pz-eyebrow, .pz-t-red .pz-eyebrow { color: rgba(255,255,255,.75); }
.pz-t-dark .pz-lead, .pz-t-dark .pz-note, .pz-t-dark .pz-partners, .pz-t-dark .pz-contact, .pz-t-red .pz-lead, .pz-t-red .pz-note, .pz-t-red .pz-contact { color: rgba(255,255,255,.82); }
.pz-t-dark h2 small, .pz-t-red h2 small { color: rgba(255,255,255,.7); }
.pz-t-dark .pz-chip, .pz-t-dark .pz-step, .pz-t-dark .pz-person, .pz-t-dark .pz-ref, .pz-t-dark .pz-commit div, .pz-t-dark .pz-svc div, .pz-t-dark .pz-roles div, .pz-t-dark .pz-steps li, .pz-t-dark .pz-gantt, .pz-t-dark .pz-plan { background: #2B2226; border-color: #3A2E32; color: #F9F8F8; }
.pz-t-dark .pz-step p, .pz-t-dark .pz-person p, .pz-t-dark .pz-svc p, .pz-t-dark .pz-commit p, .pz-t-dark .pz-steps span, .pz-t-dark .pz-chip span, .pz-t-dark .pz-ref-b p, .pz-t-dark .pz-tl-i span, .pz-t-dark .pz-figs span { color: rgba(255,255,255,.7); }
.pz-t-red .pz-chip, .pz-t-red .pz-step, .pz-t-red .pz-person, .pz-t-red .pz-ref, .pz-t-red .pz-commit div, .pz-t-red .pz-svc div, .pz-t-red .pz-steps li, .pz-t-red .pz-roles div { color: #1F191C; }
.pz-t-red .pz-figs div, .pz-t-red .pz-tot { border-color: #fff; } .pz-t-red .pz-figs span, .pz-t-red .pz-tl-i span { color: rgba(255,255,255,.85); } .pz-t-red .pz-tl-i i { background: #fff; box-shadow: 0 0 0 2px #fff; border-color: #BC3634; }
.pz-t-red .pz-sign { background: #fff; color: #BC3634; } .pz-t-red .pz-step-n { background: #1F191C; }
.pz-slide.pz-l-center > section { text-align: center; } .pz-l-center h2, .pz-l-center .pz-lead, .pz-l-center .pz-note { margin-left: auto; margin-right: auto; }
.pz-l-center .pz-chips, .pz-l-center .pz-flow, .pz-l-center .pz-commit, .pz-l-center .pz-figs, .pz-l-center .pz-steps { text-align: left; margin-left: auto; margin-right: auto; }
.pz-slide.pz-l-compact h2 { font-size: clamp(24px, 2.8vw, 38px); margin-bottom: 18px; } .pz-l-compact .pz-lead { font-size: 17px; } .pz-l-compact .pz-ref-img { height: 20vh; }
.pz-slide.pz-l-wide > section { max-width: 1560px; }
.pz-slide.pz-is-hidden { opacity: .45; } .pz-slide.pz-is-hidden::after { content: "Hidden — not shown when presenting"; position: absolute; top: 70px; left: 50%; transform: translateX(-50%); background: #1F191C; color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 99px; }
.pz-slide { position: relative; }
/* custom slides */
.pz-c-statement { text-align: center; } .pz-c-statement h2 { font-size: clamp(40px, 6vw, 92px); max-width: 18ch; margin: 0 auto; line-height: 1.02; }
.pz-c-ti { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; }
.pz-c-img { height: 64vh; border-radius: 24px; background: #EDE7E7 center/cover no-repeat; display: grid; place-items: center; color: #6F676A; }
.pz-c-img.empty, .pz-c-bg.empty { border: 2px dashed #D6D0D2; }
.pz-c-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 900px; }
.pz-c-bullets li { position: relative; padding: 16px 20px 16px 54px; background: #fff; border: 1px solid #E7E1E2; border-radius: 16px; font-size: 19px; }
.pz-c-bullets li::before { content: ""; position: absolute; left: 22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 4px; background: #BC3634; }
.pz-t-dark .pz-c-bullets li { background: #2B2226; border-color: #3A2E32; }
.pz-c-quote blockquote { margin: 0; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; max-width: 26ch; }
.pz-c-quote cite { display: block; margin-top: 22px; font-style: normal; color: #BC3634; font-weight: 700; font-size: 16px; }
.pz-slide:has(.pz-c-full) { padding: 0; } .pz-c-full { position: relative; height: 100vh; max-width: none !important; display: flex; align-items: flex-end; padding: 8vh 7vw; box-sizing: border-box; }
.pz-c-bg { position: absolute; inset: 0; background: #2B2226 center/cover no-repeat; display: grid; place-items: center; color: rgba(255,255,255,.7); }
.pz-c-full h2 { position: relative; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45); margin: 0; }
.pz-c-two { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; } .pz-c-two p { font-size: 17px; line-height: 1.55; margin: 0; padding: 22px; background: #fff; border: 1px solid #E7E1E2; border-radius: 18px; }
.pz-t-dark .pz-c-two p { background: #2B2226; border-color: #3A2E32; }
/* editing */
.pz-edit-btn { position: fixed; top: 18px; right: 74px; height: 42px; padding: 0 16px; border-radius: 99px; border: 0; background: #1F191C; color: #fff; font-weight: 700; cursor: pointer; z-index: 5; }
.pz-editing .pz-edit-btn { background: #1F8A4C; }
.pz-editing [data-e] { outline: 1px dashed transparent; outline-offset: 3px; border-radius: 4px; cursor: text; transition: outline-color .15s; }
.pz-editing [data-e]:hover { outline-color: rgba(188,54,52,.55); } .pz-editing [data-e]:focus { outline: 2px solid #BC3634; background: rgba(188,54,52,.06); }
.pz-it-ed { position: relative; } .pz-it-x { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #BC3634; color: #fff; font-weight: 800; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 3; line-height: 1; }
.pz-it-ed:hover > .pz-it-x { opacity: 1; }
.pz-editing [data-cimg] { cursor: pointer; } .pz-editing [data-cimg]:hover { outline: 3px solid #BC3634; outline-offset: -3px; }
.pz-ebar { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 6; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: calc(100vw - 260px); background: rgba(31,25,28,.94); color: #fff; padding: 8px 12px; border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.25); font-size: 12.5px; backdrop-filter: blur(6px); }
.pz-en { padding: 0 6px; white-space: nowrap; } .pz-eg { display: inline-flex; gap: 3px; align-items: center; background: rgba(255,255,255,.08); border-radius: 10px; padding: 3px; } .pz-eg em { font-style: normal; opacity: .6; padding: 0 6px; }
.pz-eg button, .pz-eg select { border: 0; background: transparent; color: #fff; font: inherit; padding: 5px 9px; border-radius: 7px; cursor: pointer; } .pz-eg button:hover { background: rgba(255,255,255,.14); }
.pz-eg button.on { background: #fff; color: #1F191C; font-weight: 700; } .pz-eg button.primary { background: #BC3634; font-weight: 700; } .pz-eg button.danger { color: #FFB3AE; }
.pz-eg select { background: rgba(255,255,255,.12); } .pz-eg select option { color: #1F191C; }
.pz section h1, .pz section h2, .pz section h3, .pz section b { color: inherit; }
.pz-t-dark .pz-chip b, .pz-t-dark .pz-person b, .pz-t-dark .pz-step b { color: #fff; }
.pz-t-red .pz-chip b, .pz-t-red .pz-person b, .pz-t-red .pz-step b, .pz-t-red .pz-svc b, .pz-t-red .pz-commit b, .pz-t-red .pz-steps b, .pz-t-red .pz-ref-b b, .pz-t-red .pz-roles b { color: #1F191C; }
.pz-t-red .pz-roles .lead b { color: #fff; }
.pz-ebar { max-width: min(1240px, calc(100vw - 200px)); }
.pz-l-center .pz-c-bullets, .pz-l-center .pz-c-two { margin-left: auto; margin-right: auto; }
.pz-nav button { box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 6px 16px rgba(0,0,0,.18); }
.pz-ebar { border: 1px solid rgba(255,255,255,.14); }
.pz-x { box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
/* ============ v64 — prospect marks & freshness ============ */
.ps-fresh { background: #BC3634 !important; color: #fff !important; font-weight: 800; }
.ps-added { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.pm-working { background: #E6F4EC; color: #1F8A4C; } .pm-client { background: #FDF3E1; color: #A86A10; } .pm-later { background: #E7EEF9; color: #3B5BA9; } .pm-partner { background: #F1ECF7; color: #6B3FA0; } .pm-no { background: #F1EFEF; color: #6F676A; }
.pm-menu { display: flex; gap: 3px; margin-top: 6px; opacity: .35; transition: opacity .15s; }
tr:hover .pm-menu, .pm-menu:focus-within { opacity: 1; }
.pm-btn { width: 24px; height: 24px; padding: 0; border-radius: 7px; border: 1px solid var(--line); font-size: 12px; font-weight: 800; cursor: pointer; display: inline-grid; place-items: center; background: var(--panel); color: var(--muted); }
.pm-btn:hover, .pm-btn.on { border-color: transparent; }
.pm-btn.pm-working:hover, .pm-btn.pm-working.on { background: #1F8A4C; color: #fff; } .pm-btn.pm-client:hover, .pm-btn.pm-client.on { background: #D08A1E; color: #fff; }
.pm-btn.pm-later:hover, .pm-btn.pm-later.on { background: #3B5BA9; color: #fff; } .pm-btn.pm-partner:hover, .pm-btn.pm-partner.on { background: #6B3FA0; color: #fff; } .pm-btn.pm-no:hover, .pm-btn.pm-no.on { background: #6F676A; color: #fff; }
.pm-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pm-pill { border-radius: 99px; padding: 5px 12px; font-size: 12.5px; font-weight: 650; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.pm-pill.on.pm-working { background: #1F8A4C; color: #fff; } .pm-pill.on.pm-client { background: #D08A1E; color: #fff; } .pm-pill.on.pm-later { background: #3B5BA9; color: #fff; } .pm-pill.on.pm-partner { background: #6B3FA0; color: #fff; } .pm-pill.on.pm-no { background: #6F676A; color: #fff; }
.filters select, .filter-bar select { width: auto; max-width: 240px; }
/* v64.1 — clearer marks: labelled menu */
.pm-chip svg, .pm-pill svg { flex: none; }
.pm-chip { gap: 5px; }
.pm-dd { position: relative; display: inline-block; margin-top: 6px; }
.pm-dd > summary { list-style: none; } .pm-dd > summary::-webkit-details-marker { display: none; }
.pm-trigger { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; cursor: pointer; background: var(--panel); white-space: nowrap; }
.pm-trigger:hover, .pm-dd[open] .pm-trigger { color: var(--ink); border-color: var(--line-strong); }
.pm-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(31,25,28,.16); padding: 6px; display: grid; gap: 2px; }
.pm-opt { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; padding: 8px; border-radius: 10px; cursor: pointer; width: 100%; }
.pm-opt:hover { background: var(--bg, #F6F4F4); }
.pm-opt i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-style: normal; }
.pm-opt b { display: block; font-size: 13px; color: var(--ink); } .pm-opt small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.pm-opt em { font-style: normal; font-weight: 800; color: #1F8A4C; }
.pm-opt.pm-working i { background: #E6F4EC; color: #1F8A4C; } .pm-opt.pm-client i { background: #FDF3E1; color: #A86A10; } .pm-opt.pm-later i { background: #E7EEF9; color: #3B5BA9; } .pm-opt.pm-partner i { background: #F1ECF7; color: #6B3FA0; } .pm-opt.pm-no i { background: #F1EFEF; color: #6F676A; }
.pm-opt.pm-clear { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; } .pm-opt.pm-clear i { background: transparent; color: var(--muted); }
.pm-pill { display: inline-flex; align-items: center; gap: 6px; }
/* Design DNA (v65) */
.dna-hero{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:28px;align-items:center;background:var(--brand-espresso,#2a211d);color:#fff;border-radius:14px;padding:22px 26px;margin:6px 0 18px}
.dna-hero>div b{display:block;font-size:34px;line-height:1;font-weight:700;color:#fff}
.dna-hero>div span{font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.06em}
.dna-hero p{margin:0;font-size:13.5px;line-height:1.5;opacity:.85}
.dna-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.dna-g td{background:var(--bg-2,#f6f4f2);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted,#777)}
tr.dna-off td,.dna-src.dna-off{opacity:.45}
.dna-pr{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.dna-pr-row{display:flex;gap:8px;align-items:center}.dna-pr-row>span{width:22px;height:22px;flex:none;border-radius:50%;background:var(--accent,#c8102e);color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700}
.dna-pr-row input{flex:1}
.dna-src{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line,#eee)}
.dna-src>div{flex:1;min-width:0}.dna-src small{display:block;color:var(--muted,#777);font-size:12px;margin-top:2px}
.dna-src img,.dna-src-ic{width:64px;height:46px;object-fit:cover;border-radius:6px;border:1px solid var(--line,#eee);flex:none;background:#fff}
.dna-src-ic{display:grid;place-items:center;font-size:20px;color:var(--accent,#c8102e)}
@media (max-width:1000px){.dna-grid{grid-template-columns:1fr}.dna-hero{grid-template-columns:repeat(3,1fr)}.dna-hero p{grid-column:1/-1}}
.fp-scope{display:grid;grid-template-columns:1.3fr .7fr 2fr;gap:12px;margin-top:10px;padding:12px 14px;border:1px dashed var(--line-strong,#ddd);border-radius:10px;background:var(--bg-2,#faf8f6)}
.fp-scope .field{margin:0}.fp-scope .field[style]{grid-column:auto!important}
.fp-scope label small{color:var(--muted);font-weight:400}
.scope-box{border-left:3px solid var(--accent)}
.dna-fixed>div{flex:1;font-size:12.5px;line-height:1.45;color:var(--ink-2,#444)}
@media (max-width:900px){.fp-scope{grid-template-columns:1fr}}
.dna-pr-row.dna-fixed{align-items:flex-start}.dna-pr-row.dna-fixed>span{margin-top:2px}
.mg-now{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mg-now>div{background:var(--bg-2,#f6f4f2);border-radius:10px;padding:10px 12px}
.mg-now small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mg-now b{font-size:20px}

/* ============================================================
   v67 — MOBILE PASS (phones ≤ 760 px). Appended last so it wins over later feature blocks.
   ============================================================ */
@media (max-width: 760px) {
  html, body { max-width: 100%; }
  .topbar { gap: 8px; padding: 0 10px; min-width: 0; }
  .topbar .brand { flex: 1 1 auto; min-width: 0; }
  .topbar .brand-suffix, .topbar #brand-text { display: none !important; }
  .topbar .brand-wordmark svg { height: 20px; width: auto; }
  .topbar .grow { display: none; }
  .cmdk-trigger { min-width: 0 !important; padding: 7px 9px !important; flex: none; }
  .cmdk-trigger span, .cmdk-trigger kbd { display: none !important; }
  .profile-btn { padding: 2px !important; }
  .profile-btn .profile-name, .profile-btn > span:last-child { display: none !important; }
  .profile-menu { position: fixed; top: 60px; right: 8px; left: 8px; min-width: 0; }
  main, #view { min-width: 0; max-width: 100vw; }
}
@media (max-width: 760px) {
  .page-head > .grow { flex: none !important; min-width: 0 !important; }
  .page-head .toolbar-actions { gap: 6px !important; }
  .page-head .toolbar-actions > button, .page-head .toolbar-actions > a, .page-head .toolbar-actions > label.btn { flex: 1 1 auto !important; width: auto !important; justify-content: center; text-align: center; padding: 9px 12px !important; }
  .page-head .toolbar-actions > .more-menu, .page-head .toolbar-actions > details { flex: 1 1 auto; }
  /* cards from tables: show the column label above each value */
  table.lines td[data-label]:not(:first-child):not(.col-actions):not(:empty)::before,
  table.lines td[data-label]:not(:first-child):not(.col-actions):has(*)::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  table.lines td[data-label=""]::before { display: none !important; }
  table.lines tr.dna-g { display: block !important; }
  /* any other wide table → horizontal scroll inside its panel instead of widening the page */
  .panel-body, .panel-body.flush, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table:not(.lines) { min-width: 0; }
  /* bigger touch targets */
  button, .btn, select, input:not([type=checkbox]):not([type=radio]) { min-height: 38px; }
  button.tiny, .tiny { min-height: 32px; }
  input, select, textarea { font-size: 16px !important; }   /* stop iOS zoom-on-focus */
  /* modals → bottom sheet */
  #modal .modal, .modal { width: 100% !important; max-width: 100% !important; margin: auto 0 0 !important; border-radius: 16px 16px 0 0 !important; max-height: 92vh; overflow-y: auto; }
  .modal .grid-2, .modal .grid-3 { grid-template-columns: 1fr !important; }
  .modal-footer { position: sticky; bottom: 0; background: var(--panel, #fff); }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  /* documents (quote / invoice previews) scale to the screen */
  .doc { max-width: 100%; overflow-x: auto; }
  /* chat button smaller, out of the way */
  .chat-fab, #chat-fab, .ai-fab { width: 46px !important; height: 46px !important; right: 12px !important; bottom: 12px !important; }
}
@media (max-width: 760px) {
  table.lines.mobile-cards td { display: block !important; min-width: 0; }
  table.lines td input, table.lines td select { width: 100% !important; min-width: 0 !important; }
  /* quote lines: description full width, then a tidy 3-column field grid */
  .section-panel table.lines tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px 10px !important; padding: 12px 12px !important; }
  .section-panel table.lines tbody td:first-child { grid-column: 1 / -1 !important; }
  .section-panel table.lines tbody td[data-label="Supplier"] { grid-column: span 2; }
  .section-panel table.lines tbody td.col-actions { grid-column: 3 !important; justify-self: end; align-self: end; }
  .section-panel table.lines tbody td.col-num { text-align: left !important; }
  .section-panel table.lines tfoot tr { grid-template-columns: 1fr auto !important; }
  /* section header: compact wrapping toolbar instead of full-width stacked buttons */
  .section-panel > .panel-header { flex-wrap: wrap; gap: 8px; }
  .section-panel > .panel-header h2 { flex: 1 1 100%; }
  .section-panel > .panel-header .toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-left: 0 !important; }
  .section-panel > .panel-header .toolbar-actions > button { flex: 1 1 auto !important; width: auto !important; padding: 7px 10px !important; font-size: 13px; }
  .section-panel > .panel-header .toolbar-actions > label { flex: 1 1 100%; justify-content: space-between; }
  .quick-add { flex-wrap: wrap; } .quick-add .qa-input { flex: 1 1 100%; } .quick-add .qa-help { display: none; }
}
/* Design DNA · 3D looks (v68) */
.dna-hero{grid-template-columns:repeat(4,auto) 1fr}
.dna-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:14px}
.dna-look{display:grid;grid-template-columns:150px 1fr;gap:14px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel,#fff)}
.dna-look.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft,rgba(188,54,52,.15))}
.dna-look-ph{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start}
.dna-look-ph img{width:100%;height:64px;object-fit:cover;border-radius:6px}
.dna-look-ph img:first-child{grid-column:1/-1;height:96px}
.dna-look-sw{grid-column:1/-1;height:120px;border-radius:8px}
.dna-look-h{display:flex;gap:8px;align-items:center}.dna-look-h input{flex:1;font-weight:600}
.dna-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0}
.dna-chips label{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.dna-chips input[type=color]{width:100%;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.dna-chips small{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.1}
.dna-look-opts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12px}
.dna-look-opts label{display:flex;gap:6px;align-items:center}.dna-look-opts select{width:auto;padding:3px 6px;font-size:12px}
@media (max-width:760px){.dna-looks{grid-template-columns:1fr}.dna-look{grid-template-columns:1fr}.dna-chips{grid-template-columns:repeat(4,1fr)}.dna-hero{grid-template-columns:repeat(2,1fr)}}
/* Photoreal renders (v69) */
.rnd-modal .modal-body{max-height:none}
.rnd-compare{position:relative;aspect-ratio:16/9;background:#111;border-radius:12px;overflow:hidden}
.rnd-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rnd-b{position:absolute;inset:0}
.rnd-wait{position:absolute;inset:auto 0 0 0;padding:12px 16px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:13px;display:flex;gap:10px;align-items:center}
.rnd-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rndspin .9s linear infinite;flex:none}
@keyframes rndspin{to{transform:rotate(360deg)}}
.rnd-compare input[type=range]{position:absolute;left:12px;right:12px;bottom:10px;width:calc(100% - 24px);z-index:3;min-height:0}
.rnd-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.rnd-gallery figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.rnd-gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#eee}
.rnd-gallery figcaption{display:flex;gap:6px;align-items:center;padding:8px;font-size:12px}.rnd-gallery figcaption input:not([type]){flex:1;min-width:0}
.pz-renders{display:grid;gap:14px;margin-top:18px}.pz-renders.n2{grid-template-columns:1fr 1fr}.pz-renders.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}.pz-renders.n3 figure:first-child{grid-row:1/3}.pz-renders.n4{grid-template-columns:1fr 1fr}
.pz-renders figure{margin:0;position:relative;border-radius:14px;overflow:hidden;background:#222}
.pz-renders img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}
.pz-renders figcaption{position:absolute;left:12px;bottom:10px;color:#fff;font-size:13px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media (max-width:760px){.pz-renders{grid-template-columns:1fr!important}.pz-renders.n3 figure:first-child{grid-row:auto}}
.rnd-gallery figcaption{flex-wrap:wrap}.rnd-gallery figcaption input:not([type]){flex:1 1 100%}
.sp-ccg{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}

/* ===== v71 — win more deals & smoother projects ===== */
.ce-card .panel-header{flex-wrap:wrap;gap:8px}.ce-card .toolbar-actions{display:flex;flex-wrap:wrap;gap:6px}
.ce-hot{background:linear-gradient(90deg,#fff1e8,#fff);border:1px solid #f6c7a8;color:#8a3b12;border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13.5px}
.ce-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.ce-kpis>div{background:var(--bg-2,#f6f4f2);border-radius:10px;padding:10px 12px}
.ce-kpis small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.ce-kpis b{font-size:17px}
.ce-bars{display:flex;flex-direction:column;gap:6px}.ce-bar{display:grid;grid-template-columns:minmax(120px,32%) 1fr 56px;gap:10px;align-items:center;font-size:12.5px}
.ce-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ce-bar i{height:8px;border-radius:4px;background:var(--accent);display:block}.ce-bar b{text-align:right;font-weight:600}
.dc-head{display:flex;gap:18px;align-items:center;margin-bottom:14px}.dc-score{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;text-align:center;border:6px solid #e5e1dc;flex:none}
.dc-score b{font-size:26px;line-height:1}.dc-score small{font-size:9.5px;color:var(--muted);display:block;margin-top:-14px}.dc-score.ok{border-color:#3fa66b}.dc-score.mid{border-color:#e0a23a}.dc-score.low{border-color:var(--accent)}
.dc-facts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2,#444)}
.dc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.dc-list li{display:flex;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.dc-list li i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;flex:none;color:#fff;background:#9aa3ad}
.dc-list li.sev3 i{background:var(--accent)}.dc-list li.sev2 i{background:#e0a23a}.dc-list li span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.dc-bands{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:12px;font-size:12.5px}.dc-bands small{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);width:100%}
.dc-ai{margin-top:12px}.dc-ai-b{background:var(--bg-2,#f6f4f2);border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.55}
.lost-strip{display:flex;gap:10px;align-items:center;background:#f4f1ee;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:8px 0;font-size:13px}.lost-strip button{margin-left:auto}
.wu-ph{display:flex;gap:8px;flex-wrap:wrap}.wu-ph label{position:relative}.wu-ph img{width:110px;height:76px;object-fit:cover;border-radius:8px;display:block}.wu-ph input{position:absolute;top:6px;left:6px}
.sup-panel{margin-top:10px}
/* snag map */
.snag-modal .modal-body{display:grid;grid-template-columns:1fr 300px;grid-template-rows:auto 1fr;gap:12px}.snag-bar{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.snag-bar select{width:auto}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{border:0;border-radius:0;background:#fff;padding:6px 12px;font-size:13px}.seg button.on{background:var(--ink,#1f191c);color:#fff}
.snag-status button.on{background:var(--c);color:#fff}
.snag-stage{overflow:auto;max-height:70vh;background:#f4f2ef;border-radius:12px;padding:8px}.snag-canvas{position:relative;display:block;width:100%;cursor:crosshair}.snag-canvas img{width:100%;height:auto;display:block;user-select:none}
.snag-pin{position:absolute;transform:translate(-50%,-100%);min-width:26px;height:26px;padding:0 6px;border-radius:13px 13px 13px 2px;border:2px solid #fff;color:#fff;font-size:11px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer;display:grid;place-items:center;min-height:0}
.snag-pin.sel{outline:3px solid var(--ink);z-index:2}.snag-pin.draft{background:var(--accent)}
.snag-side{border:1px solid var(--line);border-radius:12px;padding:12px;align-self:start}.snag-side h4{margin:0 0 6px;font-size:14px}.snag-photos{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.snag-photos img{width:80px;height:60px;object-fit:cover;border-radius:6px}
.snag-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}.snag-photo{display:inline-flex;margin-top:6px}
.ho-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.ho-kpis>div{background:var(--bg-2,#f6f4f2);border-radius:10px;padding:12px}.ho-kpis b{font-size:22px;display:block}.ho-kpis small{color:var(--muted);font-size:12px}.ho-kpis .warn b{color:#b8660b}.ho-kpis .ok b{color:#2f8a55}
/* carbon */
.co2-head{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.co2-head>div{background:var(--bg-2,#f6f4f2);border-radius:10px;padding:12px}.co2-head b{font-size:24px;display:block}.co2-head small{font-size:11.5px;color:var(--muted)}.co2-head .ok b{color:#2f8a55}
.co2-bar{display:block;height:8px;border-radius:4px;background:#7aa874}
/* client portal */
.cp-pz-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:var(--muted)}
.cp-pz-frame-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111}.cp-pz-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cp-updates{display:flex;flex-direction:column;gap:14px}.cp-update{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}.cp-update h3{margin:2px 0 8px}.cp-update-d{font-size:12px;color:var(--muted)}
.cp-update-b{font-size:14.5px;line-height:1.6}.cp-update-ph{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}.cp-update-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.cp-tab-n{background:var(--accent);color:#fff;border-radius:999px;font-size:10.5px;padding:1px 6px;margin-left:4px}
@media (max-width:760px){
  .ce-kpis{grid-template-columns:1fr 1fr}.ce-bar{grid-template-columns:1fr 1fr 48px}
  .snag-modal .modal-body{grid-template-columns:1fr}.snag-stage{max-height:55vh}
  .ho-kpis,.co2-head{grid-template-columns:1fr 1fr}.cp-pz-frame-wrap{aspect-ratio:3/4}
}
/* Site mode (v72) */
.site-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.site-head h1{margin:0}
.site-net{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap}.site-net.on{background:#e9f6ee;color:#2f8a55}.site-net.off{background:#fff3e0;color:#b8660b}
.site-install{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--bg-2,#f6f4f2);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13.5px}
.site-due{background:#fff;border:1px solid #f3c4c4;border-radius:14px;padding:12px;margin-bottom:14px}.site-due h3{margin:0 0 8px;font-size:15px;color:var(--accent)}
.site-due-row{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:10px 4px}.site-due-row small{display:block;color:var(--muted);font-weight:400;margin-top:2px}
.site-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.site-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.site-card-h b{font-size:16px;display:block}.site-card-h small{color:var(--muted)}
.site-card-k{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0;font-size:13px}.site-card-k .crit{color:var(--accent)}
.site-card-a{display:grid;grid-template-columns:1fr 1fr;gap:8px}.site-card-a>*{min-height:48px;font-size:15px;justify-content:center;display:flex;align-items:center}
/* Building-services check (v72) */
.mep-types{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;margin:6px 0 10px}.mep-types i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.mep-adj{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;font-size:12.5px}.mep-adj small{color:var(--muted);width:100%}
.sp-mep-n{background:var(--accent);color:#fff;border-radius:999px;padding:0 6px;font-size:11px;margin-left:4px}
.dc-list li.sev0 i{background:#3fa66b}.rnd-spin.dark{border-color:rgba(0,0,0,.2);border-top-color:#333;display:inline-block;vertical-align:-3px}
/* Live co-design (v72) */
.cd-status{font-size:13px;padding:8px 12px;border-radius:10px;background:var(--bg-2,#f6f4f2);margin-bottom:12px}.cd-status.on{background:#e9f6ee;color:#2f8a55;font-weight:600}
.cd-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}.cd-plan svg,.cd-stage svg{width:100%;height:auto;display:block}
.cd-budget{background:var(--ink,#1f191c);color:#fff;border-radius:14px;padding:14px 16px;margin-bottom:12px}.cd-budget small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}.cd-budget b{font-size:28px;display:block}.cd-budget span{font-size:12px;opacity:.75}
.cd-diff,.cd-note{background:var(--bg-2,#f6f4f2);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px}.cd-diff small,.cd-note small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.cd-client{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}.cd-ctrl{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.cd-ctrl h3{margin:0 0 4px}.cd-ctrl h4{margin:14px 0 6px;font-size:13px}
.cd-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.cd-step{display:flex;align-items:center;gap:4px}.cd-step button{width:34px;height:34px;min-height:34px;border-radius:50%;padding:0;font-size:16px}.cd-step input{width:64px;text-align:center}
.cd-tog{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.cd-pals{display:grid;grid-template-columns:1fr 1fr;gap:6px}.cd-pal{display:flex;align-items:center;gap:3px;padding:6px 8px;border-radius:10px;font-size:12px;text-align:left}.cd-pal i{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.1)}.cd-pal span{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cd-pal.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft,rgba(188,54,52,.18))}
.cd-view .seg{margin-bottom:10px}.cd-stage{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;min-height:300px}.cd-kpi{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin-top:8px}.cd-kpi .warn{color:#b8660b}
@media (max-width:900px){.cd-grid,.cd-client{grid-template-columns:1fr}}

/* ===== v73 — Marketing ===== */
.mk-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line, #e6e1da); margin: 8px 0 16px; }
.mk-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px; color: var(--muted); font-weight: 600; }
.mk-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.mk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mk-kpis > div { background: var(--panel); border: 1px solid var(--line, #e6e1da); border-radius: 14px; padding: 14px 16px; }
.mk-kpis small { display: block; color: var(--muted); font-size: 12px; } .mk-kpis b { display: block; font-size: 26px; margin: 4px 0 2px; } .mk-kpis span { font-size: 12px; color: var(--muted); }
.mk-grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; } .mk-grid2 > * { min-width: 0; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mk-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line, #e6e1da); }
.mk-table td { padding: 10px; border-bottom: 1px solid var(--line, #eee); vertical-align: top; } .mk-table td small { display: block; color: var(--muted); font-size: 12px; }
.mk-table tr[data-nl] { cursor: pointer; } .mk-table tr[data-nl]:hover td { background: var(--panel-hover); }
.mk-utm { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; } .mk-utm input { font-size: 12px; }
.mk-ideas { display: grid; gap: 8px; } .mk-idea { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line, #e6e1da); border-radius: 12px; background: var(--panel); width: 100%; }
.mk-idea:hover { border-color: var(--accent); }
.mk-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.mk-legend i, .mk-chip i, .mk-ch i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.mk-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .mk-cal-head h3 { margin: 0; min-width: 160px; text-align: center; }
.mk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mk-dow { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 4px; }
.mk-day { min-height: 96px; background: var(--panel); border: 1px solid var(--line, #eee); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.mk-day > span { font-size: 12px; color: var(--muted); } .mk-day.out { opacity: .45; } .mk-day.today { border-color: var(--accent); }
.mk-chip { display: block; text-align: left; font-size: 11px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; border: 0; background: var(--bg-2); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mk-chip.st-published { background: var(--good-soft-2); } .mk-chip.st-approved, .mk-chip.st-scheduled { background: var(--accent-soft-2); } .mk-chip.st-idea { background: transparent; border: 1px dashed var(--line, #ccc); }
.mk-list { display: flex; flex-wrap: wrap; gap: 6px; } .mk-list .mk-chip { max-width: 280px; }
.mk-modal .modal-body { max-height: calc(100vh - 170px); overflow: auto; }
.mk-post, .mk-nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.mk-ch { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.mk-ctabs { margin-bottom: 6px; } .mk-count { font-size: 12px; color: var(--muted); text-align: right; } .mk-count.over { color: var(--danger); font-weight: 700; }
#mp-text { width: 100%; font: 14px/1.5 inherit; }
.mk-img-prev { background: var(--bg-2); border-radius: 12px; min-height: 220px; display: grid; place-items: center; overflow: hidden; margin-bottom: 10px; padding: 10px; text-align: center; }
.mk-img-prev img { max-width: 100%; max-height: 420px; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.mk-picker { position: fixed; inset: 0; z-index: 2147483100; background: rgba(20,14,16,.55); display: grid; place-items: center; padding: 16px; }
.mk-picker-in { background: var(--panel); border-radius: 16px; width: min(900px, 100%); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.mk-picker-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line, #eee); }
.mk-picker-tools { display: flex; gap: 8px; padding: 10px 16px; } .mk-picker-tools select { flex: 1; }
.mk-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 0 16px 16px; overflow: auto; }
.mk-picker-grid button, .mk-imsel { position: relative; padding: 0; border: 1px solid var(--line, #eee); border-radius: 10px; overflow: hidden; background: var(--bg-2); aspect-ratio: 4/3; display: block; cursor: pointer; }
.mk-picker-grid img, .mk-imsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-picker-grid span, .mk-imsel span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; padding: 3px 6px; background: rgba(0,0,0,.55); color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-imsel input { position: absolute; top: 6px; left: 6px; z-index: 1; }
.mk-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mk-case { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line, #e6e1da); border-radius: 14px; overflow: hidden; background: var(--panel); }
.mk-case img, .mk-case-ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--bg-2); display: grid; place-items: center; font-size: 32px; }
.mk-case > div { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; } .mk-case span { font-size: 12px; color: var(--muted); }
.mk-case small, .mk-case-status { font-size: 12px; font-weight: 600; color: var(--muted); }
.st-approved, .mk-case-status.st-approved { color: var(--good); } .st-declined, .mk-case-status.st-declined { color: var(--danger); } .st-client_review, .mk-case-status.st-client_review { color: var(--warn); }
.mk-case-status { padding: 8px 12px; border-radius: 10px; background: var(--bg-2); margin-bottom: 12px; }
.mk-case-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.mk-case-media figure { margin: 0; position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.mk-case-media img { width: 100%; height: 100%; object-fit: cover; } .mk-case-media .row-remove { position: absolute; top: 4px; right: 4px; background: rgba(255,255,255,.9); }
.mk-lib-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .mk-lib-bar input { flex: 1; min-width: 200px; }
.mk-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-tag { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line, #ddd); background: var(--panel); } .mk-tag.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.mk-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mk-asset { position: relative; padding: 0; border: 1px solid var(--line, #eee); border-radius: 12px; overflow: hidden; background: var(--bg-2); aspect-ratio: 4/3; }
.mk-asset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-asset span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 12px; padding: 4px 8px; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; text-align: left; }
.mk-asset i { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 13px; }
.mk-asset-big { background: var(--bg-2); border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; } .mk-asset-big img { max-width: 100%; max-height: 50vh; }
.mk-nl-intro { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); margin-bottom: 14px; }
.mk-nl-intro b { display: block; } .mk-nl-intro span { font-size: 13px; color: var(--muted); }
.mk-nl-block { border: 1px solid var(--line, #e6e1da); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--panel); }
.mk-nl-block input, .mk-nl-block textarea, .mk-nl-block select { width: 100%; }
.mk-nl-bh { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.mk-nl-img { display: grid; gap: 6px; } .mk-nl-img img { max-width: 100%; max-height: 140px; object-fit: cover; border-radius: 6px; }
.mk-nl-add { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-nl-r { display: flex; flex-direction: column; min-height: 560px; }
.mk-nl-prevbar { display: flex; gap: 6px; margin-bottom: 6px; } .mk-nl-prevbar .on { background: var(--ink); color: #fff; }
#nl-prev { flex: 1; width: 100%; border: 1px solid var(--line, #e6e1da); border-radius: 12px; background: #efebe6; min-height: 560px; transition: width .2s; align-self: center; }
#nl-prev.mobile { width: 375px; max-width: 100%; }
.cp-case-cta { background: linear-gradient(135deg, var(--accent, #BC3634), #7d1f1d); }
@media (max-width: 860px) {
  .mk-grid2, .mk-post, .mk-nl { grid-template-columns: 1fr; }
  .mk-day { min-height: 64px; } .mk-chip { font-size: 10px; padding: 2px 4px; }
  .mk-utm { grid-template-columns: 1fr auto; } .mk-utm b { grid-column: 1 / -1; }
  .mk-nl-intro { flex-direction: column; align-items: stretch; }
  .mk-table { font-size: 13px; display: block; overflow-x: auto; }
}
.mk-idea > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mk-idea small { color: var(--muted); font-size: 12px; } .mk-idea > span { font-size: 18px; }

/* ===== v74 — walk-through videos ===== */
.wt-stage { position: relative; margin: 12px 0 8px; border-radius: 12px; overflow: hidden; background: #1F191C; aspect-ratio: 16/9; display: grid; place-items: center; }
.wt-stage video, .wt-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wt-stage .helper { color: #EDE7E3; text-align: center; padding: 20px; max-width: 520px; }
.wt-over { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); font-size: 14px; }
.wt-kept { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wt-kept figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.wt-kept video { width: 100%; aspect-ratio: 16/9; background: #000; display: block; }
.wt-kept figcaption { display: flex; align-items: center; gap: 6px; padding: 6px 8px; } .wt-kept figcaption b { flex: 1; font-size: 13px; } .wt-kept figcaption small { color: var(--muted); font-size: 11px; }
#wt-mode button.on { background: var(--ink); color: #fff; }

/* ===== v75 — furniture panel ===== */
.sp-furn-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.sp-insp-sub { font-weight: 700; font-size: 13px; }
.sp-furn-check { font-size: 12px; padding: 8px 10px; border-radius: 8px; }
.sp-furn-check.ok { background: var(--good-soft-2, #E4F3EA); color: var(--good, #1F8A4C); }
.sp-furn-check.bad { background: var(--danger-soft-2, #F8E3E2); color: var(--danger, #BC3634); }
.sp-furn-check ul { margin: 4px 0 0; padding-left: 16px; }
.sp-furn-btns, .sp-furn-add { display: flex; gap: 6px; flex-wrap: wrap; } .sp-furn-add select { flex: 1; min-width: 0; }
.sp-furn-stds { display: grid; gap: 4px; font-size: 12px; } .sp-furn-stds small { color: var(--muted); }
.sp-furn-stds > div { display: flex; align-items: center; justify-content: space-between; background: var(--bg-2); border-radius: 6px; padding: 3px 4px 3px 8px; }
.sp-toolbar select.sp-add { height: 30px; padding: 0 8px; border-radius: 8px; font-size: 13px; max-width: 150px; }
/* v78 building-services preview */
.mep-view { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; margin: 12px 0; align-items: start; }
.mep-view-plan { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.mep-view-plan svg { display: block; width: 100%; height: auto; max-height: 60vh; }
.mep-view-plan small { display: block; padding: 6px 10px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
.mep-view-src { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.mep-view-src img { display: block; width: 100%; height: auto; }
.mep-view-src figcaption { padding: 6px 10px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .mep-view { grid-template-columns: 1fr; } }
/* v80 building-services placement */
.mep-reg { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; font-size: 13px; }
.mep-reg .tiny.primary { margin-left: auto; }
.mep-unk { margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; } .mep-unk summary { cursor: pointer; font-weight: 600; }
.mep-al { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.mep-al-pane b { display: block; font-size: 13px; margin-bottom: 6px; }
.mep-al-img, .mep-al-plan { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; cursor: crosshair; }
.mep-al-img img { display: block; width: 100%; height: auto; user-select: none; }
.mep-al-plan svg { display: block; width: 100%; height: auto; max-height: 70vh; }
.ma-dot { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: #BC3634; color: #fff; font: 700 12px/22px sans-serif; text-align: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
.mep-al-steps { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft-2, #F6E2E1); font-size: 14px; }
@media (max-width: 860px) { .mep-al { grid-template-columns: 1fr; } }
.sp-fit summary { color: var(--warn, #B7791F); } .sp-fit ul { margin: 6px 0; padding-left: 18px; font-size: 13px; } .sp-fit small { color: var(--muted); font-size: 12px; }
/* v81 trace selection bar */
.sp-selbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 12px; margin: 6px 0; border-radius: 10px; background: #EEF2FC; border: 1px solid #C9D6F5; font-size: 13px; }
.sp-selbar label { display: inline-flex; gap: 4px; align-items: center; } .sp-selbar input { width: 80px; padding: 3px 6px; } .sp-selbar input#sel-name { width: 140px; }
.sp-toolbar [data-sp-undo][disabled], .sp-toolbar [data-sp-redo][disabled] { opacity: .45; }
/* ===== v82 — file system ===== */
.fs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
.fs-side { display: flex; flex-direction: column; gap: 4px; } .fs-side select { margin-bottom: 8px; }
.fs-f { display: flex; justify-content: space-between; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.fs-f span { color: var(--muted); font-size: 12px; } .fs-f.on { background: var(--accent-soft-2, #F6E2E1); color: var(--accent-deep, #8E2826); font-weight: 600; } .fs-f:hover { background: var(--bg-2); }
.fs-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .fs-bar input { flex: 1; }
.fs-drop { min-height: 260px; border: 2px dashed transparent; border-radius: 12px; padding: 4px; transition: border-color .15s; } .fs-drop.over { border-color: var(--accent); background: rgba(188,54,52,.04); }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.fs-card { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); cursor: pointer; }
.fs-card.sel { outline: 3px solid var(--accent); }
.fs-th { aspect-ratio: 4/3; background: var(--bg-2); display: grid; place-items: center; font-size: 36px; } .fs-th img { width: 100%; height: 100%; object-fit: cover; }
.fs-meta { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; } .fs-meta b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-meta small { font-size: 11px; color: var(--muted); }
.fs-tags { color: var(--accent) !important; }
.fs-act { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; background: rgba(255,255,255,.92); border-radius: 8px; } .fs-card:hover .fs-act { display: flex; }
.fs-edit { position: fixed; inset: 0; background: rgba(20,14,16,.45); display: grid; place-items: center; z-index: 2147483200; }
.fs-edit-in { background: var(--panel); border-radius: 14px; padding: 16px; width: min(420px, 92vw); display: grid; gap: 10px; } .fs-edit-in label { display: grid; gap: 4px; font-size: 13px; } .fs-edit-b { display: flex; justify-content: flex-end; gap: 6px; }
.fs-strip { display: flex; gap: 6px; overflow-x: auto; } .fs-strip img { height: 72px; border-radius: 8px; }
@media (max-width: 760px) { .fs { grid-template-columns: 1fr; } .fs-side { flex-direction: row; flex-wrap: wrap; } .fs-act { display: flex; } }
.rnd-missing { aspect-ratio: 16/10; display: grid; place-items: center; padding: 14px; text-align: center; font-size: 12.5px; color: var(--muted); background: var(--bg-2); }
.ap-choice { display: grid; gap: 10px; } .ap-opt { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ap-opt:hover { border-color: var(--accent); } .ap-opt b { font-size: 15px; } .ap-opt span { font-size: 13px; color: var(--ink-2); } .ap-opt small { color: var(--muted); }
/* v86 fit-out zone */
.fz-prev { position: relative; display: block; } .fz-prev img { display: block; width: 100%; height: auto; }
.fz-ov { position: absolute; inset: 0; pointer-events: none; }
.fz-rect { position: absolute; border: 3px solid #E0201B; background: rgba(224,32,27,.08); border-radius: 4px; }
.fz-rect span { position: absolute; top: -12px; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: #E0201B; color: #fff; font: 700 12px/22px sans-serif; text-align: center; }
.fz-rect.draft { border-style: dashed; }
.fz-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fz-stage { border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 72vh; background: #fff; }
.fz-wrap { position: relative; } .fz-wrap img { display: block; width: 100%; user-select: none; }
.fz-layer { position: absolute; inset: 0; cursor: crosshair; } .fz-layer .fz-rect { cursor: pointer; }
.fz-status { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--bg-2); font-size: 13px; } .fz-status.ok { background: #FCE9E8; color: #8E2826; }
.foc-scope { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; background: var(--panel); } .foc-scope summary { cursor: pointer; font-size: 14px; }
.foc-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin: 10px 0; font-size: 13px; } .foc-rooms label { display: flex; gap: 6px; align-items: center; } .foc-rooms label.out { opacity: .5; text-decoration: line-through; } .foc-rooms small { color: var(--muted); margin-left: auto; }
.foc-scope-b { display: flex; gap: 6px; align-items: center; }
/* v86 mobile fixes found by the QA sweep */
@media (max-width: 640px) {
  .cc-bill { grid-template-columns: 1fr 1fr !important; flex-wrap: wrap; } .cc-bill > * { min-width: 0; }
  .pze-figs { grid-template-columns: 1fr !important; } .pze-fig { grid-template-columns: 1fr 1fr auto !important; flex-wrap: wrap; } .pze-fig > * { min-width: 0; }
}
@media (max-width: 640px) { .pze-people { grid-template-columns: 1fr !important; } .pze-person { grid-template-columns: 56px minmax(0,1fr) !important; } .pze-person > *, .pze-person input { min-width: 0; max-width: 100%; } }
@media (max-width: 640px) { .pze-refs { grid-template-columns: 1fr !important; } .pze-ref { grid-template-columns: 56px minmax(0,1fr) !important; } .pze-ref > *, .pze-ref input { min-width: 0; max-width: 100%; } }
@media (max-width: 640px) { .lh-row { flex-wrap: wrap; } .lh-info { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } }
/* v87 */
.fp-ai-rooms{margin-top:10px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.foc-basis-box{margin:8px 0 10px;padding:10px 12px;border-radius:10px;background:var(--bg-soft,#f4f6fb);font-size:13px;line-height:1.45}
/* v89 — Ask a report */
.rpt-ask .panel-header .helper{margin-left:10px}
.rpt-form{display:flex;gap:8px}
.rpt-form input{flex:1;font-size:15px;padding:11px 14px;border-radius:12px}
.rpt-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.rpt-chips .chip{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--bg-soft,#f4f6fb);border:1px solid var(--line,#e5e5e5);cursor:pointer}
.rpt-chips .chip:hover{border-color:var(--accent,#BC3634)}
.rpt-loading{padding:18px;color:var(--muted);display:flex;gap:8px;align-items:center}
.rpt-card{border:1px solid var(--line,#e5e5e5);border-radius:14px;padding:16px;margin-top:14px;background:#fff}
.rpt-card.mini{margin-top:0;padding:12px}
.rpt-card.mini .rpt-chart{margin-top:8px}
.rpt-head{display:flex;gap:10px;align-items:flex-start}
.rpt-head h3{margin:0;font-size:17px}
.rpt-head h4{margin:0;font-size:14px}
.rpt-sub{font-size:12px;color:var(--muted);margin-top:2px}
.rpt-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rpt-tools select{font-size:12px;padding:4px 6px}
.rpt-chart{margin:12px 0 4px;overflow-x:auto}
.rpt-svg{width:100%;height:auto;display:block}
.rpt-ax{font-size:11px;fill:#6b6b6b}
.rpt-val{font-size:10.5px;fill:#333;font-weight:600}
.rpt-grid{stroke:#eee}
.rpt-zero{stroke:#aaa}
.rpt-hit{cursor:pointer}
.rpt-hit:hover rect,.rpt-hit:hover path{opacity:.85}
tr.rpt-hit:hover td{background:var(--bg-soft,#f4f6fb)}
.rpt-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;margin-top:6px}
.rpt-legend i,.rpt-pie-l i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.rpt-pie{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.rpt-pie-t{font-size:22px;font-weight:700;fill:#1d1d1f}
.rpt-pie-l{display:grid;gap:4px;font-size:12.5px;min-width:220px}
.rpt-pie-l div{display:grid;grid-template-columns:auto 1fr auto auto;gap:6px;align-items:center}
.rpt-pie-l small{color:var(--muted)}
.rpt-kpis{display:flex;gap:12px;flex-wrap:wrap}
.rpt-kpi{border:1px solid var(--line,#e5e5e5);border-radius:12px;padding:12px 16px;min-width:160px}
.rpt-kpi span{display:block;font-size:12px;color:var(--muted)}
.rpt-kpi b{font-size:22px}
.rpt-insight{background:var(--bg-soft,#f4f6fb);border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.5;margin:10px 0}
.rpt-insight:empty{display:none}
.rpt-note{margin-top:4px}
.rpt-table td.rpt-n{color:var(--muted)}
.rpt-empty{padding:16px;color:var(--muted)}
.rpt-drill{margin-top:12px;border-top:1px dashed var(--line,#ddd);padding-top:10px}
.rpt-refine{display:flex;gap:8px;margin-top:12px}
.rpt-refine input{flex:1}
.rpt-saved-h{margin:18px 0 8px}
.rpt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-bottom:10px}
.rpt-list{display:grid;gap:2px}
.rpt-li{display:flex;gap:8px;align-items:center;padding:6px 4px;border-bottom:1px solid var(--line,#eee);font-size:13px}
.rpt-li small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%}
.rpt-li .link{background:none;border:0;padding:0;font-weight:600;cursor:pointer;color:inherit;text-align:left}
@media (max-width:700px){.rpt-form,.rpt-refine{flex-direction:column}.rpt-grid{grid-template-columns:1fr}.rpt-head{flex-direction:column}.rpt-li small{display:none}}
.rpt-tools select{width:auto;max-width:140px}
/* v90 — AI costs */
.aiu .kpis{margin-bottom:10px}
.aiu-budget{position:relative;height:8px;border-radius:99px;background:var(--bg-soft,#eef0f5);margin:4px 0 14px;overflow:visible}
.aiu-budget span{display:block;height:100%;border-radius:99px;background:#16a34a}
.aiu-budget span.warn{background:#f59e0b}.aiu-budget span.bad{background:#BC3634}
.aiu-budget i{position:absolute;top:-3px;width:2px;height:14px;background:#1d1d1f;opacity:.35}
.aiu-tips ul{margin:6px 0 0 18px;padding:0}.aiu-tips li{margin:3px 0}
.aiu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));gap:14px}
.aiu-grid .panel{margin:0}
.aiu-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.aiu-bar{display:inline-block;width:44px;height:6px;border-radius:9px;background:var(--bg-soft,#eef0f5);margin-right:6px;vertical-align:middle;overflow:hidden}
.aiu-bar i{display:block;height:100%;background:var(--accent,#BC3634)}
.aiu-fail{color:#991b1b;font-weight:600}
.aiu-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.aiu-hs{grid-column:1/-1}
.aiu-prices{margin-top:12px}.aiu-prices summary{cursor:pointer;font-weight:600}
.aiu-prices input{width:86px;text-align:right}
@media (max-width:700px){.aiu-grid{grid-template-columns:1fr}}
/* v91 — AI costs per user */
.aiu-users input.aiu-ulim{width:110px;text-align:right}
.aiu-users tr.aiu-u-bad td{background:#fdf2f2}
.aiu-users tr.aiu-u-warn td{background:#fffaeb}
.aiu-bar.warn i{background:#f59e0b}.aiu-bar.bad i{background:#991b1b}
.aiu-who{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.aiu-me{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:8px}
.aiu-me span{display:block;font-size:12px;color:var(--muted)}.aiu-me b{font-size:22px;display:block}.aiu-me small{color:var(--muted);font-size:12px}
.aiu-me-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 18px;margin-top:6px;font-size:13px}
.aiu-me-f div{display:grid;grid-template-columns:1fr auto auto;gap:8px;border-bottom:1px solid var(--line,#eee);padding:4px 0}
.aiu-me-f small{color:var(--muted)}
/* v92 — Home as a personal start page */
.home2 .home-hero{padding-top:34px;padding-bottom:30px}
.home2 .home-hero h1{margin-bottom:6px}
.home2 .home-hero .greet b{color:#fff}
.home-ask{display:flex;gap:8px;margin:16px 0 12px;max-width:820px}
.home-ask input{flex:1;font-size:15px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.96);color:#1d1d1f}
.home-ask button{white-space:nowrap}
.home-kpis .kpi{cursor:pointer}
.home-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.home-cols .panel{margin:0}
.home-scope{margin-left:auto;display:inline-flex;border:1px solid var(--line,#e5e5e5);border-radius:999px;overflow:hidden}
.home-scope button{border:0;border-radius:0;padding:4px 12px;font-size:12px;background:transparent}
.home-scope button.on{background:var(--ink,#1d1d1f);color:#fff}
.home-acts{display:grid;gap:6px}
.home-act{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;border:1px solid var(--line,#eee);cursor:pointer;background:#fff}
.home-act:hover{border-color:var(--accent,#BC3634)}
.home-act .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--bg-soft,#f4f6fb);font-size:13px;flex:none}
.home-act.sev3 .ic{background:#fde8e8;color:#991b1b}.home-act.sev2 .ic{background:#fff4dc;color:#92400e}
.home-act b{display:block;font-size:13.5px}.home-act small{display:block;color:var(--muted);font-size:12px}
.home-act .go{color:var(--muted);font-size:18px}
.home-zero{padding:22px 4px;color:#1F8A4C;font-weight:600}
.hw-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.hw-day{min-height:120px;border-radius:10px;background:var(--bg-soft,#f6f7fa);padding:6px;display:flex;flex-direction:column;gap:4px}
.hw-day.today{background:#fff;border:1.5px solid var(--accent,#BC3634)}
.hw-day.we{opacity:.7}
.hw-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}.hw-h small{color:var(--muted)}
.hw-it{font-size:11px;line-height:1.25;border-radius:6px;padding:4px 5px;background:#fff;border-left:3px solid #64748b;cursor:pointer;overflow:hidden}
.hw-it span{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-it small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-it.k-site{border-color:#ec4899}.hw-it.k-deliv{border-color:#0891b2}.hw-it.k-inv{border-color:#16a34a}.hw-it.k-quote{border-color:#BC3634}.hw-it.k-end{border-color:#f59e0b}.hw-it.k-start{border-color:#003DC4}
.hs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.hs-tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--line,#e5e5e5);background:#fff;cursor:pointer;height:auto}
.hs-tile:hover{border-color:var(--accent,#BC3634);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.hs-ic{grid-row:1/3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg-soft,#f4f6fb);font-size:16px}
.hs-tile b{font-size:13.5px}.hs-tile small{color:var(--muted);font-size:12px;line-height:1.35;font-weight:400}
.home-proj{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line,#eee);cursor:pointer}
.home-proj:hover{background:var(--bg-soft,#f8f9fb)}
.home-proj small{display:block;color:var(--muted);font-size:12px}
.hp-t{display:flex;gap:8px;align-items:center}
.hp-ph{font-size:11px;padding:2px 8px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}
.hp-bar{height:4px;border-radius:9px;background:var(--bg-soft,#eef0f5);margin-top:6px;overflow:hidden;max-width:260px}.hp-bar i{display:block;height:100%;background:#16a34a}
.home-proj .num{text-align:right}.home-proj .num b{display:block}
.home-feed{display:grid;gap:2px}
.hf-i{display:flex;gap:10px;align-items:center;padding:7px 2px;cursor:pointer;border-bottom:1px solid var(--line,#f0f0f0);font-size:13px}
.hf-i .avatar{width:26px;height:26px;font-size:10px;flex:none}
.hf-i small{display:block;color:var(--muted);font-size:11.5px}
.home-pick{display:grid;gap:6px}
.home-pick-i{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--line,#e5e5e5);background:#fff;height:auto}
.home-pick-i small{color:var(--muted);font-weight:400}
@media (max-width:900px){.home-cols{grid-template-columns:1fr}.hw-days{grid-template-columns:repeat(7,minmax(92px,1fr));overflow-x:auto}.home-week .panel-body{overflow-x:auto}}
@media (max-width:600px){.home-ask{flex-wrap:wrap}.home-ask input{flex-basis:100%}}
.home-full{margin-bottom:16px}
.home-act .grow{flex:1;min-width:0}
.home-proj .grow{flex:1;min-width:0}
.hw-day{min-height:96px}
@media (max-width:600px){.home-kpis{grid-template-columns:1fr 1fr !important}.home-kpis .kpi .value{font-size:20px}.home2 .hero .actions button{padding:8px 12px}}
/* v93 — new home header: split layout, 4 colour styles, picture on the right */
.hh{--hh-bg:#fff;--hh-ink:#1F191C;--hh-sub:#6F676A;--hh-line:#E7E3E4;--hh-acc:#BC3634;--hh-btn:#1F191C;--hh-btn-ink:#fff;--hh-glass:rgba(255,255,255,.7);--hh-side:#EEF2FC;
  position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);gap:0;border-radius:22px;overflow:hidden;margin-bottom:20px;
  background:var(--hh-bg);color:var(--hh-ink);border:1px solid var(--hh-line);box-shadow:0 1px 2px rgba(31,25,28,.04),0 12px 32px -18px rgba(31,25,28,.18)}
.hh-main{padding:34px 36px 30px;position:relative}
.hh-date{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-sub);font-weight:600}
.hh-dot{width:8px;height:8px;border-radius:50%;background:var(--hh-acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--hh-acc) 18%,transparent)}
.hh h1{font-size:40px;line-height:1.05;margin:12px 0 6px;color:var(--hh-ink);letter-spacing:-.03em;font-weight:500}
.hh-acc{color:var(--hh-acc)}
.hh-sub{margin:0 0 20px;color:var(--hh-sub);font-size:15px}
.hh-ask{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--hh-line);border-radius:16px;padding:6px 6px 6px 14px;max-width:720px;box-shadow:0 8px 24px -16px rgba(31,25,28,.35)}
.hh-ask:focus-within{border-color:var(--hh-acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--hh-acc) 14%,transparent)}
.hh-ask-ic{color:var(--hh-acc);font-size:16px}
.hh-ask input{flex:1;border:0;outline:0;background:transparent;font-size:15px;padding:9px 4px;color:#1F191C;min-width:0;box-shadow:none}
.hh-ask button{border:0;border-radius:11px;padding:9px 14px;font-weight:600;white-space:nowrap;height:auto}
.hh-ask-r{background:#F4F2F2;color:#1F191C}
.hh-ask-go{background:var(--hh-acc);color:#fff}
.hh-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.hh-btn{border-radius:999px;padding:8px 16px;border:1px solid var(--hh-line);background:transparent;color:var(--hh-ink);font-weight:500;height:auto}
.hh-btn:hover{border-color:var(--hh-ink)}
.hh-btn.main{background:var(--hh-btn);color:var(--hh-btn-ink);border-color:var(--hh-btn)}
.hh-side{position:relative;background:var(--hh-side);padding:28px 26px;display:flex;flex-direction:column;justify-content:center;gap:10px;background-size:cover;background-position:center}
.hh.has-img .hh-side{background-image:linear-gradient(180deg,rgba(31,25,28,.05),rgba(31,25,28,.35)),var(--hero-image)}
.hh-glance{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border-radius:14px;background:var(--hh-glass);backdrop-filter:blur(10px);cursor:pointer;border:1px solid rgba(255,255,255,.6);transition:transform .12s}
.hh-glance:hover{transform:translateX(3px)}
.hh-glance b{font-size:24px;font-weight:600;color:#1F191C;letter-spacing:-.02em;min-width:54px}
.hh-glance span{color:#4A4245;font-size:13.5px}
.hh-glance.hot b{color:#BC3634}
.hh-glance.ok b{color:#15803d}
.hh-tools{position:absolute;top:14px;right:14px;display:flex;gap:8px;align-items:center;z-index:3}
.hh-swatches{display:flex;gap:5px;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border:1px solid rgba(31,25,28,.08)}
.hh-sw{width:16px;height:16px;border-radius:50%;padding:0;border:2px solid #fff;box-shadow:0 0 0 1px rgba(31,25,28,.18);cursor:pointer;height:16px;min-height:0}
.hh-sw.on{box-shadow:0 0 0 2px #1F191C}
.sw-light{background:linear-gradient(135deg,#fff 50%,#EEF2FC 50%)}.sw-blue{background:#003DC4}.sw-sand{background:#EBC8B2}.sw-espresso{background:#1F191C}
.hh-img{font-size:11.5px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border:1px solid rgba(31,25,28,.08);color:#1F191C;cursor:pointer;height:auto;font-weight:500}
/* colour styles */
.hh-light{--hh-bg:linear-gradient(120deg,#FFFFFF 0%,#FBFAFA 55%,#F4F6FD 100%);--hh-side:linear-gradient(160deg,#EEF2FC,#DCE5F8)}
.hh-blue{--hh-bg:linear-gradient(125deg,#003DC4 0%,#1F55D6 60%,#3A6BE0 100%);--hh-ink:#fff;--hh-sub:rgba(255,255,255,.78);--hh-line:rgba(255,255,255,.22);--hh-acc:#EBC8B2;--hh-btn:#fff;--hh-btn-ink:#003DC4;--hh-side:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));--hh-glass:rgba(255,255,255,.92)}
.hh-blue .hh-ask-go{background:#BC3634}.hh-blue .hh-dot{background:#EBC8B2}
.hh-sand{--hh-bg:linear-gradient(120deg,#FBF1EE 0%,#F5DDD3 100%);--hh-ink:#1F191C;--hh-sub:#6b4b40;--hh-line:#E7C9BB;--hh-acc:#BC3634;--hh-btn:#1F191C;--hh-side:linear-gradient(160deg,#EBC8B2,#D69070);--hh-glass:rgba(255,255,255,.8)}
.hh-espresso{--hh-bg:linear-gradient(125deg,#1F191C 0%,#2B2427 100%);--hh-ink:#F9F8F8;--hh-sub:rgba(249,248,248,.65);--hh-line:rgba(255,255,255,.14);--hh-acc:#D69070;--hh-btn:#F9F8F8;--hh-btn-ink:#1F191C;--hh-side:linear-gradient(160deg,#BC3634,#8C2624);--hh-glass:rgba(255,255,255,.9)}
.hh-espresso .hh-ask-go{background:#BC3634}
@media (max-width:900px){.hh{grid-template-columns:1fr}.hh-side{flex-direction:row;flex-wrap:wrap;padding:14px}.hh-glance{flex:1 1 140px}.hh h1{font-size:30px}.hh-main{padding:54px 20px 22px}}
@media (max-width:600px){.hh-ask{flex-wrap:wrap}.hh-ask input{flex-basis:calc(100% - 30px)}.hh-ask button{flex:1}}
.hh-side{padding-top:58px}
@media (max-width:900px){.hh-side{padding-top:14px}}
.aiu-diag{font-size:12.5px;padding:8px 12px;border-radius:10px;margin:0 0 14px;background:#f0fdf4;color:#166534}
.aiu-diag.bad{background:#fdf2f3;color:#991b1b}
/* v96 — CAD drawing modal */
.cad-modal{max-width:1240px;width:96vw}
.cad-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.cad-bar select{margin-left:6px}
.cad-bar .helper{flex:1;min-width:260px}
.cad-prev{border:1px solid var(--line,#e5e5e5);border-radius:10px;overflow:auto;background:#fff;max-height:70vh}
.cad-prev svg{display:block;width:100%;height:auto}

/* v100 — fit-out options as cards */
.sp-optcards { display: grid; gap: 8px; margin-top: 10px; }
.sp-optcard { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; text-align: left; padding: 8px; border: 1.5px solid var(--border, #e5e1dc); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.sp-optcard:hover { border-color: #b9b2ab; }
.sp-optcard.active { border-color: var(--accent, #BC3634); box-shadow: 0 0 0 3px rgba(188,54,52,.12); }
.sp-optthumb { width: 96px; height: 56px; border-radius: 6px; background: #f6f4f1; overflow: hidden; display: flex; }
.sp-optthumb svg { width: 100%; height: 100%; }
.sp-optmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-optmeta strong { font-size: 13px; }
.sp-optmeta span { font-size: 12px; color: #555; line-height: 1.25; }
.sp-optmeta small { font-size: 11px; color: #777; }
.sp-optmeta em { color: #b45309; font-style: normal; }
/* v101 — colour / line toggle */
.sp-seg { display: inline-flex; border: 1px solid var(--border, #e5e1dc); border-radius: 8px; overflow: hidden; margin-right: 6px; }
.sp-seg button { border: 0 !important; border-radius: 0 !important; margin: 0 !important; }
.sp-seg button.active { background: var(--ink, #1f191c); color: #fff; }
/* v101 — brand furniture library */
.fml .fml-up { display: grid; grid-template-columns: 1fr 400px; gap: 16px; align-items: start; margin-bottom: 14px; }
.fml .fml-form { display: grid; gap: 8px; } .fml .fml-form label { display: grid; gap: 4px; font-size: 12px; color: #555; }
.fml .fml-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fml .fml-btns { display: flex; gap: 8px; align-items: center; font-size: 12px; } .fml .warn { color: #b45309; }
.fml .fml-prev canvas { width: 400px; height: 270px; border-radius: 10px; border: 1px solid #e5e1dc; background: #f3f1ee; display: block; }
.fml .fml-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #eee; }
.fml .fml-row img { width: 72px; height: 50px; object-fit: cover; border-radius: 6px; background: #f3f1ee; }
.fml .fml-meta { display: flex; flex-direction: column; gap: 2px; } .fml .fml-meta span, .fml .fml-meta small { color: #666; font-size: 12px; }
.fml .fml-act { display: flex; gap: 6px; align-items: center; }
@media (max-width: 900px) { .fml .fml-up { grid-template-columns: 1fr; } }

/* ============================================================
   v102 — SPACE PLANNER, restructured
   header (name · views · undo · share · export) / guided steps / one toolbar per view / full-height drawing
   ============================================================ */
main:has(.sp2) { padding: 0; }
body:has(.sp2.sp-focus) { grid-template-columns: 1fr !important; grid-template-areas: "topbar" "main" !important; }
body:has(.sp2.sp-focus) .sidebar { display: none; }
.sp2.sp-editor { display: flex; flex-direction: column; min-height: calc(100vh - 64px); }
.sp2 .sp-head { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: 12px; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.sp2 .sp-head-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp2 .sp-head-l > div { min-width: 0; }
.sp2 .sp-back { font-size: 22px; line-height: 1; color: var(--muted); text-decoration: none; padding: 2px 8px 4px; border-radius: 8px; }
.sp2 .sp-back:hover { background: var(--bg); color: var(--ink); }
.sp2 .sp-title { font-size: 16px; margin: 0; padding: 2px 6px; }
.sp2 .sp-head .sp-side-sub { padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp2 .sp-views { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.sp2 .sp-views button { border: 0; background: transparent; padding: 6px 18px; border-radius: 8px; font-weight: 600; font-size: 13.5px; color: var(--ink-3); cursor: pointer; }
.sp2 .sp-views button.active { background: var(--brand-espresso); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.sp2 .sp-views button:disabled { opacity: .35; cursor: not-allowed; }
.sp2 .sp-head-r { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.sp2 .sp-head-r [data-sp-undo][disabled], .sp2 .sp-head-r [data-sp-redo][disabled] { opacity: .4; }
.sp2 .icon-btn { width: 30px; padding: 0; justify-content: center; font-weight: 700; }
.sp2 .sp-body { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; flex: 1; min-height: 0; }
.sp2.sp-focus .sp-body { grid-template-columns: minmax(0, 1fr) auto; }
.sp2.sp-focus .sp-side { display: none; }
.sp2 .sp-side { padding: 14px; max-height: calc(100vh - 64px - 57px); top: 57px; display: flex; flex-direction: column; gap: 8px; }
.sp2 .sp-side .sp-step { margin: 0; }
/* guided steps: collapsed = one-line summary */
.sp2 details.sp-step > summary { list-style: none; cursor: pointer; border-radius: 8px; }
.sp2 details.sp-step > summary::-webkit-details-marker { display: none; }
.sp2 details.sp-step > summary:hover { background: var(--bg); }
.sp2 details.sp-step > summary::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 18px; transition: transform .15s; }
.sp2 details.sp-step[open] > summary::after { transform: rotate(90deg); }
.sp2 .sp-step-h { align-items: center; }
.sp2 .sp-step-h > span { flex: none; }
.sp2 .sp-step-t { display: flex; flex-direction: column; min-width: 0; }
.sp2 .sp-step-t b { font-size: 13.5px; }
.sp2 .sp-step-t small { font-weight: 400; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp2 .sp-step-t small .warn { color: #b45309; font-weight: 600; }
.sp2 details.sp-step[open] { border-color: var(--ink-3); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.sp2 .sp-step.todo:not([open]) .sp-step-h span { background: var(--bg-2); }
.sp2 .sp-comp.done .sp-step-h span { background: #1F8A4C; color: #fff; }
.sp2 .sp-comp.todo .sp-step-h span { background: #b45309; color: #fff; }
.sp2 .sp-stats { margin: 0; }
.sp2 .sp-stats > div { padding: 8px 10px; }
.sp2 .sp-stats strong { font-size: 18px; }
/* one toolbar per view */
.sp2 .sp-main { background: var(--bg); }
.sp2 .sp-viewbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); min-height: 46px; }
.sp2 .sp-viewbar .grow { flex: 1; }
.sp2 .sp-viewbar select { height: 30px; padding: 0 8px; border-radius: 8px; font-size: 13px; width: auto; }
.sp2 .sp-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.sp2 .sp-viewbar select#spe-pal { min-width: 190px; }
.sp2 .seg.sp-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 0; background: #fff; }
.sp2 .seg.sp-seg button { border: 0 !important; border-radius: 0 !important; margin: 0 !important; background: transparent; }
.sp2 .seg.sp-seg button + button { border-left: 1px solid var(--line) !important; }
.sp2 .seg.sp-seg button.active { background: var(--brand-espresso) !important; color: #fff !important; }
.sp2 .sp-optseg button.active { background: var(--brand-red) !important; }
.sp2 .sp-viewbar button.tiny.active:not(.seg button) { background: var(--brand-espresso); border-color: var(--brand-espresso); color: #fff; }
.sp2 .sp-canvas { padding: 14px 16px 10px; }
.sp2 .sp-stage svg { max-height: calc(100vh - 64px - 57px - 46px - 64px); }
.sp2 .sp-foot { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: center; }
.sp2 .sp-3d + .sp-hint { text-align: center; font-size: 12px; margin-top: 6px; }
/* dropdown menus */
.sp-menu { position: relative; }
.sp-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.sp-menu > summary::-webkit-details-marker { display: none; }
.sp-menu[open] > summary { box-shadow: 0 0 0 3px rgba(31,25,28,.08); }
.sp-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 270px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(31,25,28,.16); padding: 6px; display: flex; flex-direction: column; }
.sp-mh { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.sp-mi { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.sp-mi:hover { background: var(--bg); }
.sp-mi i { font-style: normal; width: 18px; text-align: center; }
.sp-mi span { display: flex; flex-direction: column; }
.sp-mi b { font-weight: 600; font-size: 13px; }
.sp-mi small { font-size: 11.5px; color: var(--muted); }
.sp-mc { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer; border-radius: 8px; }
.sp-mc:hover { background: var(--bg); }
.sp-mc-sub { padding-left: 34px; color: var(--muted); font-size: 12px; }
.sp-mc-sub input[type=range] { flex: 1; }
/* empty state */
.sp-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 420px; border: 2px dashed var(--line-strong, #cfc8c3); border-radius: 16px; background: #fff; cursor: pointer; text-align: center; padding: 30px; transition: background .15s, border-color .15s; }
.sp-drop:hover, .sp-drop.over { background: #FBF6F3; border-color: var(--brand-red); }
.sp-drop-i { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 6px; }
.sp-drop b { font-size: 17px; } .sp-drop span { color: var(--ink-3); } .sp-drop small { color: var(--muted); }
.sp-keys h4 { margin: 14px 0 6px; font-size: 13px; } .sp-keys table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-keys td { padding: 5px 0; border-bottom: 1px solid var(--line); } .sp-keys td:first-child { width: 170px; }
.sp-keys kbd { background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; font-size: 12px; font-family: inherit; }
@media (max-width: 1100px) {
  .sp2 .sp-head { grid-template-columns: 1fr; }
  .sp2 .sp-head-r { justify-content: flex-start; flex-wrap: wrap; }
  .sp2 .sp-body { grid-template-columns: 1fr; }
  .sp2 .sp-side { max-height: none; position: static; }
}

.sp2 .sp-viewbar select#spe-pal { min-width: 0; max-width: 200px; }
.sp2 .sp-viewbar select#spe-eye { max-width: 150px; }
.sp2 .seg.sp-seg.sp-optseg button.active { background: var(--brand-red) !important; }
.sp2 .sp-title, .sp2 .sp-title:not(:hover):not(:focus) { border-color: transparent !important; box-shadow: none !important; background: transparent; }
.sp2 .sp-stats { grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sp2 .sp-stats > div { background: transparent; color: var(--ink); border-radius: 0; padding: 8px 6px; text-align: center; }
.sp2 .sp-stats > div + div { border-left: 1px solid var(--line); }
.sp2 .sp-stats strong { font-size: 17px; } .sp2 .sp-stats span { font-size: 10.5px; color: var(--muted); opacity: 1; line-height: 1.2; display: block; }

.sp-menu.left .sp-menu-pop { right: auto; left: 0; }
.sp2 .sp-viewbar select#spe-pal { max-width: 180px; } .sp2 .sp-viewbar select#spe-eye { max-width: 130px; }

.sp-brandlink { display: block; width: 100%; text-align: left; border: 1px dashed var(--line); background: #FBF8F6; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--ink-3); cursor: pointer; margin: 8px 0; }
.sp-brandlink:hover { border-color: var(--brand-red); color: var(--ink); }

/* ===== v104 — Reports: won business, insights, targets & forecast, boardroom ===== */
.rp-v2 { margin-bottom: 18px; }
.rp-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.rp-head > div:first-child { flex: 1; min-width: 220px; }
.rp-h2 { font: 500 19px var(--font-display); margin: 0; letter-spacing: -0.01em; }
.rp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); color: var(--accent-deep); border-radius: 999px; padding: 3px 5px 3px 11px; font-size: 12px; font-weight: 600; }
.rp-chip button { border: 0; background: #fff; color: var(--accent-deep); border-radius: 999px; width: 20px; height: 20px; line-height: 18px; padding: 0; font-size: 13px; cursor: pointer; }
button.rp-chip.clear { background: transparent; border-color: transparent; color: var(--muted); padding: 3px 8px; cursor: pointer; }
.rp-ins { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.rp-ins .panel { margin-bottom: 16px; }
.rp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.rp-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.rp-sum { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 10px 0 12px; }
.rp-sum b { color: var(--ink); }
.rp-action { display: flex; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.rp-action strong { color: var(--accent-deep); white-space: nowrap; }
.rp-src { font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.rp-flag { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-subtle); align-items: flex-start; }
.rp-flag:last-child { border-bottom: 0; }
.rp-flag.go { cursor: pointer; }
.rp-flag.go:hover, .rp-flag.go:focus-visible { background: var(--panel-hover); outline: none; }
.rp-flag .t { font-weight: 600; font-size: 13.5px; }
.rp-flag .d { font-size: 12.5px; color: var(--muted); }
.rp-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; }
.rp-dot.s3 { background: var(--danger); } .rp-dot.s2 { background: var(--warn); } .rp-dot.s1 { background: var(--good); }
.rp-go { margin-left: auto; color: var(--muted-2); font-size: 12px; white-space: nowrap; margin-top: 2px; }
.rp-flags .empty { padding: 26px; }
.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.rp-kpi { min-width: 0; }
.rp-kpi.rp-wide { grid-column: span 2; }
.rp-kpi .value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-spark { display: block; width: 100%; height: 28px; margin-top: 10px; overflow: visible; }
.rp-dup { color: var(--good); font-weight: 600; } .rp-ddn { color: var(--danger); font-weight: 600; } .rp-d0 { color: var(--muted); font-weight: 600; }
.rp-prog { position: relative; height: 8px; border-radius: 4px; background: var(--bg-2); margin: 12px 0 6px; }
.rp-prog-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.rp-prog-fc { position: absolute; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(135deg, var(--brand-red-30) 0 3px, var(--accent-soft) 3px 6px); }
.rp-prog-pace { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; }
.rp-prog-tgt { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--brand-blue); }
.rp-progcap { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.rp-progcap b { color: var(--ink); font-weight: 600; }
.rp-ctrl { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 18px 0; font-size: 12px; color: var(--muted); }
.rp-seg { display: inline-flex; background: var(--bg-2); border-radius: 8px; padding: 3px; }
.rp-seg button { border: 0; background: transparent; color: var(--muted); font: 600 12px var(--font-sans); padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.rp-seg button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-xs); }
.rp-tog { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.rp-tog input { accent-color: var(--accent); margin: 0; width: auto; }
.rp-tog.off { opacity: .5; cursor: default; }
.rp-legend { display: inline-flex; gap: 12px; margin-left: auto; }
.rp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rp-sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.rp-sw.ly { height: 0; border-top: 2px dashed var(--ink-3); border-radius: 0; width: 14px; vertical-align: 3px; }
.rp-sw.tg { height: 0; border-top: 2px solid var(--brand-blue); border-radius: 0; width: 14px; vertical-align: 3px; }
.rp-sw.fc { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, var(--accent-soft) 2px 5px); }
.rp-sw.pace { width: 2px; height: 11px; background: var(--ink); }
.rp-pmkey { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rp-pmkey .rp-sw { margin-left: 6px; }
.rp-chartwrap { padding: 6px 18px 12px; position: relative; }
.rp-svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.rp-grid line { stroke: var(--line-subtle); }
.rp-axis text, .rp-wl, .rp-wp, .rp-cv { fill: var(--muted); }
.rp-wp { fill: var(--muted-2); }
.rp-wv, .rp-cl { fill: var(--ink); font-weight: 700; }
.rp-fclab { fill: var(--muted); }
.rp-tlab { fill: var(--brand-blue); font-weight: 600; } .rp-flab { fill: var(--accent); font-weight: 700; } .rp-lylab { fill: var(--ink-3); }
.rp-bar { transition: opacity .18s; }
.rp-dim .rp-bar { opacity: .25; } .rp-dim .rp-bar.sel { opacity: 1; }
.rp-anim .rp-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: rp-grow .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 28ms); }
.rp-anim .rp-draw { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: rp-draw 1.1s .1s ease-out forwards; }
.rp-anim .rp-fade { animation: rp-fade .5s .45s both; }
@keyframes rp-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rp-draw { to { stroke-dashoffset: 0; } }
@keyframes rp-fade { from { opacity: 0; } to { opacity: 1; } }
.rp-hit { fill: transparent; cursor: pointer; }
.rp-hit:hover { fill: rgba(31,25,28,.035); }
.rp-hit.nf { cursor: default; }
.rp-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.45; box-shadow: var(--shadow-lg); min-width: 210px; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; z-index: 5; }
.rp-tip.on { opacity: 1; transform: none; }
.rp-tip b { font: 500 13px var(--font-display); }
.rp-tip .r { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.rp-tip .r span:first-child { color: #c9c2c5; }
.rp-tip .hint { color: var(--muted-2); font-size: 11px; margin-top: 4px; border-top: 1px solid #3a3236; padding-top: 4px; }
.rp-note { font-size: 11.5px; color: var(--muted); padding: 0 18px 14px; }
.rp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rp-grid2 > .panel { min-width: 0; }
.rp-funnel .rp-fst { display: grid; grid-template-columns: 74px 1fr 92px; align-items: center; gap: 10px; margin: 4px 0; }
.rp-fn { font-size: 12.5px; font-weight: 600; }
.rp-fbx { height: 26px; background: var(--bg-2); border-radius: 5px; position: relative; }
.rp-fbx i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.rp-fbx span { position: absolute; left: 9px; top: 3px; font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.rp-fbx span.dark { color: var(--ink); }
.rp-fv { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.rp-fcv { margin-left: 84px; font-size: 11px; color: var(--muted); }
.rp-fsum { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-subtle); }
.rp-fsum b { color: var(--ink); font-size: 14px; }
.rp-sub { margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rp-lost { display: grid; grid-template-columns: 130px 1fr 28px; gap: 8px; align-items: center; font-size: 12px; margin: 4px 0; }
.rp-lost i { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); }
.rp-lost b { text-align: right; font-variant-numeric: tabular-nums; }
.rp-callout { font-size: 12.5px; padding: 8px 11px; border-radius: 8px; margin-bottom: 12px; }
.rp-callout.warn { background: var(--warn-soft); border: 1px solid var(--warn-soft-2); color: #7c3d07; }
.rp-callout.ok { background: var(--good-soft); border: 1px solid var(--good-soft-2); color: #14532d; }
.rp-conc { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin: 4px 0 12px; }
.rp-conc div { height: 100%; border-right: 2px solid #fff; min-width: 2px; }
.rp-conc div:last-child { border-right: 0; }
.rp-conc div[data-rp-client] { cursor: pointer; }
.rp-clegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.rp-clegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.rp-clegend b { color: var(--ink); }
.rp-tbl tr.rp-click { cursor: pointer; }
.rp-tbl tr.rp-click:hover td, .rp-tbl tr.rp-click:focus-visible td { background: var(--panel-hover); outline: none; }
.rp-tbl tr.sel td { background: var(--accent-soft); }
.rp-tbl tr.faded td { opacity: .45; }
.rp-pmbar { min-width: 180px; }
.rp-pmbar .rp-prog { margin-top: 4px; }
.rp-city { cursor: pointer; }
.rp-city:focus-visible circle { stroke: var(--ink); }
details.rp-more { margin-top: 6px; }
details.rp-more > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); margin-bottom: 16px; }
details.rp-more > summary::-webkit-details-marker { display: none; }
details.rp-more > summary span { font-weight: 600; }
details.rp-more > summary span::before { content: "▸ "; color: var(--muted); }
details.rp-more[open] > summary span::before { content: "▾ "; }
details.rp-more > summary small { color: var(--muted); font-size: 12px; }
.rp-mgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.rp-mgrid label, .rp-pmgrid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.rp-mgrid .helper { grid-column: 1 / -1; }
.rp-pmgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-bottom: 8px; }
.rp-pmgrid label span { color: var(--ink); font-weight: 600; }
.rp-pmgrid label small { color: var(--muted); font-weight: 400; margin-left: 6px; }
/* boardroom */
#rp-deck { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: none; flex-direction: column; }
body.rp-presenting #rp-deck { display: flex; }
body.rp-presenting { overflow: hidden; }
.rp-dbar { display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.rp-dmark { display: inline-block; height: 20px; color: var(--accent); }
.rp-dmark svg { height: 100%; width: auto; display: block; }
.rp-dttl { color: var(--muted); font-size: 13px; }
.rp-dsp { flex: 1; }
.rp-dots { display: flex; gap: 6px; margin-right: 6px; }
.rp-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--line-strong); cursor: pointer; padding: 0; }
.rp-dots button.on { background: var(--accent); }
.rp-slides { flex: 1; position: relative; overflow: hidden; }
.rp-slide { position: absolute; inset: 0; padding: 34px 6vw 46px; display: flex; flex-direction: column; opacity: 0; transform: translateX(30px); transition: opacity .35s, transform .35s; pointer-events: none; overflow: auto; }
.rp-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.rp-slide h2 { font: 500 clamp(22px, 3vw, 34px) var(--font-display); margin: 0 0 4px; letter-spacing: -0.02em; }
.rp-kick { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.rp-lede { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.rp-big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 6px 0 26px; }
.rp-bv { font: 500 clamp(30px, 4.6vw, 56px) var(--font-display); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rp-bl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.rp-bd { font-size: 14px; margin-top: 4px; }
.rp-slide .rp-prog { height: 14px; border-radius: 7px; }
.rp-slide .rp-prog-fill { border-radius: 7px; }
.rp-progcap.big { font-size: 14px; }
.rp-sum.big { font-size: clamp(16px, 1.6vw, 20px); max-width: 920px; }
.rp-action.big { font-size: 15px; max-width: 920px; }
.rp-dflags { margin-top: 18px; max-width: 920px; }
.rp-dflags .rp-flag { padding: 10px 0; }
.rp-s3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.rp-dfoot { position: absolute; left: 6vw; bottom: 14px; font-size: 11px; color: var(--muted-2); }
@media (max-width: 1100px) { .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rp-ins, .rp-grid2, .rp-s3col { grid-template-columns: 1fr; } .rp-legend { margin-left: 0; } .rp-mgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rp-kpis { grid-template-columns: 1fr; } .rp-kpi.rp-wide { grid-column: span 1; } .rp-big3 { grid-template-columns: 1fr; } .rp-pmgrid { grid-template-columns: 1fr; } .rp-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rp-funnel .rp-fst { grid-template-columns: 62px 1fr 76px; } .rp-fcv { margin-left: 72px; } .rp-lost { grid-template-columns: 100px 1fr 24px; } .rp-dttl { display: none; } }
@media (prefers-reduced-motion: reduce) { .rp-anim .rp-bar, .rp-anim .rp-draw, .rp-anim .rp-fade { animation: none !important; } .rp-anim .rp-draw { stroke-dashoffset: 0; stroke-dasharray: none; } .rp-slide, .rp-tip, .rp-prog-fill, .rp-fbx i { transition: none !important; } }
@media print {
  .rp-anim .rp-bar, .rp-anim .rp-draw, .rp-anim .rp-fade { animation: none !important; }
  .rp-anim .rp-draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .rp-tip, .rp-ctrl, .rp-chips { display: none !important; }
  .rp-kpi, .rp-ins .panel, .rp-grid2 .panel { break-inside: avoid; }
  details.rp-more > summary { border: none; padding: 6px 0; }
  body.rp-presenting > *:not(#rp-deck) { display: none !important; }
  body.rp-presenting #rp-deck { position: static; display: block; background: #fff; }
  body.rp-presenting .rp-dbar { display: none; }
  body.rp-presenting .rp-slides { overflow: visible; }
  body.rp-presenting .rp-slide { position: relative; opacity: 1; transform: none; page-break-after: always; break-after: page; min-height: 170mm; overflow: visible; padding: 4mm 6mm 12mm; }
  body.rp-presenting .rp-slide:last-child { page-break-after: auto; break-after: auto; }
  body.rp-presenting .rp-dfoot { left: 6mm; bottom: 2mm; }
}
@page rpdeck { size: A4 landscape; margin: 10mm; }
@media print { body.rp-presenting #rp-deck { page: rpdeck; } }
.rp-regbox { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 4px; padding-right: 18px; }
.rp-regbox .rp-chartwrap { padding: 8px 6px 8px 18px; }
.rp-rlist { display: flex; flex-direction: column; gap: 2px; }
.rp-rrow { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(30px, .8fr) 58px 38px; gap: 8px; align-items: center; font-size: 12.5px; padding: 5px 6px; border-radius: 6px; }
.rp-rrow.rp-click { cursor: pointer; }
.rp-rrow.rp-click:hover, .rp-rrow.rp-click:focus-visible { background: var(--panel-hover); outline: none; }
.rp-rrow.sel { background: var(--accent-soft); }
.rp-rrow.faded { opacity: .45; }
.rp-rrow .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-rrow .b { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.rp-rrow .b i { display: block; height: 100%; background: var(--brand-red-60); border-radius: 3px; }
.rp-rrow .v, .rp-rrow .s { text-align: right; font-variant-numeric: tabular-nums; }
.rp-rrow .s { color: var(--muted); }
@media (max-width: 640px) { .rp-regbox { grid-template-columns: 1fr; padding: 0 18px 8px; } .rp-regbox .rp-chartwrap { padding: 6px 0; } }
.rp-mini3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.rp-mini3 .rp-bv { font-size: clamp(20px, 2.4vw, 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .rp-mini3 { grid-template-columns: 1fr; } }

/* ===================== v105 — People & access, permissions ===================== */
body.noperm-costs-view [data-perm="costs.view"],
body.noperm-invoices-manage [data-perm="invoices.manage"],
body.noperm-orders-manage [data-perm="orders.manage"],
body.noperm-catalog-edit [data-perm="catalog.edit"],
body.noperm-projects-delete [data-perm="projects.delete"],
body.noperm-ai-use [data-perm="ai.use"],
body.noperm-data-export [data-perm="data.export"],
body.not-admin .admin-only { display: none !important; }
.ro-catalog .row-remove, .ro-catalog [data-cat-margin], .ro-catalog .toolbar-actions { display: none !important; }
.ro-catalog input, .ro-catalog select, .ro-catalog textarea { background: var(--bg) !important; }
.btn-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: none; background: var(--panel); }
.btn-link.tiny { padding: 3px 9px; font-size: 12px; }
.btn-link:hover { border-color: var(--accent); color: var(--accent); }
.ta-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 14px; overflow-x: auto; }
.ta-tab { border: none; background: none; padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap; }
.ta-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.ta-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ta-bar input[type=search] { flex: 1 1 240px; max-width: 360px; }
.ta-bar select { width: auto; }
.ta-person { display: flex; gap: 10px; align-items: center; }
.ta-person .helper { margin: 0; }
.ta-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.ta-prof { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--c, #64748b); background: color-mix(in srgb, var(--c, #64748b) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c, #64748b) 30%, transparent); }
.ta-prof.custom { --c: #64748b; }
.ta-table tr.ta-group td { background: var(--bg); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; padding-top: 8px; padding-bottom: 8px; }
.ta-table tr.ta-row-sus td { opacity: .62; }
.ta-table tr.ta-pending td { background: color-mix(in srgb, var(--warn, #b45309) 5%, transparent); }
.ta-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ta-card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c, #94a3b8); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ta-card-h { display: flex; align-items: center; gap: 4px; }
.ta-card-h strong { flex: 1; }
.ta-card-m { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-height: 26px; }
.ta-card-a { margin-top: auto; display: flex; gap: 6px; }
.ta-sum { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; margin: 8px 0; }
.ta-sum b { display: inline-block; min-width: 46px; color: var(--muted); font-weight: 600; }
.ta-chip { display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0; border-radius: 6px; font-size: 11.5px; background: var(--bg); border: 1px solid var(--line); }
.ta-chip.ok { background: var(--good-soft-2); border-color: transparent; color: var(--good); }
.ta-chip.no { background: var(--danger-soft-2); border-color: transparent; color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1px; }
.ta-chip.warn { background: var(--warn-soft-2); border-color: transparent; color: var(--warn); }
.ta-perms { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ta-perm { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.ta-perm:last-child { border-bottom: none; }
.ta-perm small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ta-perm select { width: auto; min-width: 128px; }
.ta-where { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; background: var(--bg); }
.ta-where.db, .ta-where.server { background: var(--good-soft-2); color: var(--good); }
.ta-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.ta-switch input { opacity: 0; width: 0; height: 0; }
.ta-switch span { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .15s; cursor: pointer; }
.ta-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ta-switch input:checked + span { background: var(--accent); }
.ta-switch input:checked + span::after { transform: translateX(16px); }
.ta-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ta-details { margin: 12px 0; }
.ta-details > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.ta-danger { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--danger-soft-2); background: color-mix(in srgb, var(--danger) 4%, transparent); border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.ta-matrix th { font-size: 11px; white-space: nowrap; }
.ta-matrix td.c { text-align: center; }
.ta-yes { color: var(--good); font-weight: 800; }
.ta-no { color: #cbd5e1; }
.ta-modal { max-width: 760px; }
@media (max-width: 720px) {
  .ta-hide-m { display: none; }
  .ta-perm { flex-direction: column; align-items: stretch; }
  .ta-danger { flex-direction: column; align-items: stretch; }
}
@media (max-width: 720px) {
  .ta-table tr.ta-group, .ta-table tr.ta-group td { display: block; text-align: left !important; width: auto; }
  .ta-table tr.ta-group td::before { content: none !important; }
  .ta-tabs .ta-tab { padding: 10px 10px; }
}
.ta-welcome { border-left: 4px solid var(--accent); }
.ta-welcome-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ta-welcome kbd { font: 11px ui-monospace, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--bg); }
.ta-rollout > summary { list-style: none; display: flex; align-items: center; }
.ta-rollout > summary::-webkit-details-marker { display: none; }
.ta-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; }
.ta-checks li { display: flex; gap: 10px; align-items: flex-start; }
.ta-checks li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.ta-checks li.ok > span { background: var(--good-soft-2); color: var(--good); }
.ta-checks li.todo > span { background: var(--warn-soft-2); color: var(--warn); }

/* ===================== v106 — Furniture ===================== */
.fur-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.fur-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.fur-kpi small { font-size: 11.5px; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.fur-kpi b { font-size: 24px; }
.fur-kpi span { font-size: 12.5px; color: var(--muted); }
.fur-board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.fur-col { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
.fur-col h3 { margin: 2px 2px 4px; font-size: 13.5px; }
.fur-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; color: var(--ink); text-decoration: none; font-size: 13px; }
.fur-card:hover { border-color: var(--accent); }
.fur-card strong { font-size: 14px; }
.fur-brands { color: var(--blue, #2563EB); font-size: 12px; }
.fur-due, .fur-todo { color: var(--warn); font-size: 12px; font-weight: 600; }
.fur-empty { color: var(--muted); text-align: center; padding: 12px 0; }
.fur-deal { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.fur-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fur-side { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.fur-group .panel-header .meta { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fur-bdisc { width: 64px !important; padding: 3px 6px !important; display: inline-block; }
.fur-table td.num, .fur-table th.num { text-align: right; white-space: nowrap; }
.fur-table td.num input { width: 84px; text-align: right; }
.fur-tot { display: flex; flex-direction: column; gap: 8px; }
.fur-tot > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.fur-ok { color: var(--good); } .fur-low { color: var(--danger); }
.fur-res { max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; }
.fur-res td.num { text-align: right; white-space: nowrap; }
@media (max-width: 720px) { .fur-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fur-side { max-width: none; } }
.fur-kind { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; }
.fur-kind input { width: auto; margin: 0; }
.fur-kind { display: flex !important; justify-content: flex-start !important; width: auto !important; text-align: left; }
.fur-kind input[type=checkbox] { width: 16px !important; min-width: 0 !important; max-width: 16px; height: 16px; flex: none; padding: 0 !important; }

/* v107 — supplier conditions */
.fur-freight { font-size: 12.5px; padding: 6px 16px; border-bottom: 1px solid var(--line, #EEE9E4); color: var(--muted); }
.fur-freight.warn { color: var(--warn); }
.fur-freight.bad { color: var(--danger, #B42318); font-weight: 600; }
.fur-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.fur-filters input[type=search] { flex: 1 1 220px; max-width: 320px; }
.fur-filters .chip { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.fur-filters .chip.active { background: var(--ink, #1F191C); color: #fff; border-color: var(--ink, #1F191C); }
.fur-suppliers td { vertical-align: top; }
.fur-suppliers td:nth-child(6) { white-space: nowrap; }
.fur-frcell { font-size: 12.5px; max-width: 260px; }

/* ============================================================
   SKETCH TABLE (v109) — a drawing table, not a dashboard. Organic: torn-edge
   trace, irregular rounded scraps and cards, curved tape; nothing boxy.
   Drawing colours live in :root as --sk-* (drawing-palette exception, DESIGN.md §2).
   ============================================================ */
:root {
  --sk-desk: #CBC2B6; --sk-desk-dot: rgba(31,25,28,.07); --sk-paper: #FBF7EA; --sk-trace-1: #EFE8D2; --sk-trace-2: #F3EDDA;
  --sk-tape: rgba(235,222,190,.82); --sk-sticky: #B2C5ED; --sk-rule: #DCE4F5; --sk-margin: #EBC8B2; --sk-good: #2E6B45;
  --sk-hand: "Architects Daughter", "Safiro", "Manrope", system-ui, sans-serif;
  --sk-ease: cubic-bezier(.2,.7,.2,1);
}
main:has(.sk-desk) { padding: 0; }
.sk-desk { min-height: 100%; padding: 24px 24px 48px; box-sizing: border-box; background-color: var(--sk-desk);
  background-image: radial-gradient(var(--sk-desk-dot) 1px, transparent 1.4px), radial-gradient(rgba(249,248,248,.18) 1px, transparent 1.4px); background-size: 7px 7px, 11px 11px; color: var(--ink); }
.sk-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; max-width: 1440px; margin: 0 auto 16px; }
.sk-head-txt { flex: 999 1 420px; min-width: 0; }
.sk-back { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.sk-back:hover { color: var(--accent); }
.sk-head h1 { margin: 4px 0 0; font-family: var(--sk-hand); font-weight: 400; font-size: 40px; line-height: 46px; color: var(--ink); }
.sk-head p { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--ink-3); max-width: 70ch; }
.sk-pill-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sk-pill-btn:hover { background: rgba(249,248,248,.4); }
.sk-note-bar { max-width: 1440px; margin: 0 auto 16px; padding: 12px 16px; background: var(--sk-paper); border-radius: 14px 6px 16px 8px / 8px 16px 6px 14px; font-size: 13px; box-shadow: 0 2px 6px rgba(31,25,28,.12); }
.sk-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; max-width: 1440px; margin: 0 auto; }
.sk-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sk-side { flex: 1 1 290px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 22px; padding-top: 24px; }
.sk-grow { flex: 1; }

/* tools lie on the desk like real pencils */
.sk-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 8px; padding: 0 6px; }
.sk-tool { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 6px 10px 4px; border: none; border-radius: 18px 12px 20px 10px; background: transparent; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(31,25,28,.2)); transition: transform 200ms var(--sk-ease); }
.sk-tool span { font-family: var(--sk-hand); font-size: 14px; color: var(--ink); }
.sk-tool:hover { transform: translateY(-3px); }
.sk-tool.on { background: rgba(249,248,248,.55); transform: translateY(-6px) rotate(-1deg); filter: drop-shadow(0 6px 4px rgba(31,25,28,.25)); }
.sk-link { min-height: 40px; padding: 0 6px; border: none; background: transparent; font-family: var(--sk-hand); font-size: 16px; color: var(--ink); text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: pointer; }
.sk-link:disabled { opacity: .4; cursor: default; }
.sk-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; background: var(--sk-paper); border-radius: 16px 8px 18px 10px / 10px 18px 8px 16px; box-shadow: 0 2px 6px rgba(31,25,28,.15), inset 3px 0 0 var(--danger); }
.sk-confirm span { flex: 1 1 240px; font-size: 14px; }
.sk-confirm button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.sk-confirm button.danger { background: var(--danger); color: #fff; border: none; }

/* the trace stack: torn top/bottom edges, curved tape */
.sk-stack { position: relative; padding: 16px 10px 12px; }
.sk-sheet-b, .sk-sheet-c { position: absolute; display: block; box-shadow: 0 2px 4px rgba(31,25,28,.12); border-radius: 22px 10px 26px 14px / 12px 24px 10px 20px; }
.sk-sheet-b { inset: 24px 4px 0 18px; background: var(--sk-trace-1); transform: rotate(1.6deg); }
.sk-sheet-c { inset: 8px 22px 12px 2px; background: var(--sk-trace-2); transform: rotate(-1.1deg); }
.sk-paper { position: relative; width: 100%; aspect-ratio: 3 / 2; background: var(--sk-paper); overflow: hidden; border-radius: 18px 8px 22px 12px / 10px 20px 8px 16px;
  box-shadow: 0 1px 2px rgba(31,25,28,.12), 0 12px 28px -12px rgba(31,25,28,.35);
  -webkit-mask: radial-gradient(7px 5px at 50% 0, transparent 98%, #000) 0 0 / 22px 51% repeat-x, radial-gradient(7px 5px at 50% 100%, transparent 98%, #000) 0 100% / 26px 51% repeat-x;
  mask: radial-gradient(7px 5px at 50% 0, transparent 98%, #000) 0 0 / 22px 51% repeat-x, radial-gradient(7px 5px at 50% 100%, transparent 98%, #000) 0 100% / 26px 51% repeat-x; }
.sk-paper > img, .sk-paper > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-paper > img { object-fit: contain; mix-blend-mode: multiply; }
.sk-paper > img.sk-under { opacity: .22; }
.sk-paper > img.missing { display: none; }
.sk-marks { pointer-events: none; }
.sk-layer { touch-action: none; cursor: crosshair; }
.sk-layer.tool-eraser { cursor: cell; }
.sk-layer.tool-eraser [data-mk] { cursor: pointer; }
.sk-blank { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; font-family: var(--sk-hand); font-size: 20px; line-height: 28px; color: var(--ink-3); }
.sk-blank p { margin: 0; max-width: 34ch; }
.sk-tblock { position: absolute; right: 10px; bottom: 10px; color: var(--ink); display: grid; grid-template-columns: auto auto; background: rgba(251,247,234,.94); border: 1.5px solid var(--ink); border-radius: 14px 6px 12px 8px; overflow: hidden; font-family: var(--sk-hand); font-size: 13px; line-height: 16px; pointer-events: none; }
.sk-tblock span { padding: 5px 10px; }
.sk-tblock span:nth-child(odd) { border-right: 1px solid var(--ink); }
.sk-tblock span:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
.sk-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; background: rgba(251,247,234,.86); }
.sk-loading b { font-family: var(--sk-hand); font-weight: 400; font-size: 24px; }
.sk-loading small { font-size: 13px; color: var(--ink-3); }
.sk-spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); animation: sk-spin 1.1s linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }
.sk-tape { position: absolute; top: 4px; display: block; width: 92px; height: 26px; background: var(--sk-tape); border-radius: 40% 46% 38% 44% / 30% 26% 34% 28%; box-shadow: 0 1px 1px rgba(31,25,28,.08); }
.sk-tape.l { left: 6%; transform: rotate(-4deg); }
.sk-tape.r { right: 7%; transform: rotate(5deg); width: 84px; }

/* the sheets of the story, as loose paper tags */
.sk-scraps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.sk-scrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 150px; min-height: 76px; padding: 10px 16px; border: none; cursor: pointer; text-align: left; background: rgba(251,247,234,.6);
  border-radius: 26px 12px 22px 16px / 16px 24px 12px 22px; transform: rotate(var(--rot, 0deg)); box-shadow: 0 2px 4px rgba(31,25,28,.15); transition: transform 200ms var(--sk-ease); }
.sk-scrap:hover { transform: rotate(var(--rot, 0deg)) translateY(-4px); }
.sk-scrap.on { background: var(--sk-paper); transform: translateY(-6px); box-shadow: 0 10px 18px -8px rgba(31,25,28,.45); }
.sk-scrap.on::after { content: ""; position: absolute; }
.sk-scrap small { font-size: 12px; font-weight: 700; color: var(--muted); }
.sk-scrap.on small { color: var(--accent); }
.sk-scrap b { font-family: var(--sk-hand); font-weight: 400; font-size: 17px; line-height: 20px; color: var(--ink); }
.sk-scrap.on b { text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: 4px; }
.sk-scrap em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); }
.sk-scrap em.in { color: var(--sk-good); }

/* the side: an index card, version scraps, a blue sticky note */
.sk-card { position: relative; padding: 18px 20px 20px 34px; background: #fff; transform: rotate(-.8deg); border-radius: 20px 10px 24px 12px / 12px 22px 10px 18px;
  box-shadow: 0 1px 2px rgba(31,25,28,.12), 0 10px 22px -12px rgba(31,25,28,.35); background-image: repeating-linear-gradient(#fff 0 27px, var(--sk-rule) 27px 28px); background-position: 0 44px; }
.sk-card::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 24px; width: 1.5px; background: var(--sk-margin); border-radius: 2px; }
.sk-card h2, .sk-vers h2 { margin: 0 0 12px; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink); }
.sk-card fieldset { border: none; margin: 0 0 12px; padding: 0; }
.sk-card legend, .sk-card label[for] { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-bottom: 6px; }
.sk-styles, .sk-forms { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-style, .sk-form { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; min-height: 44px; padding: 6px 8px; cursor: pointer; color: var(--ink); background: transparent; border: 1.5px solid var(--line); border-radius: 16px 10px 18px 12px / 12px 18px 10px 16px; font: inherit; }
.sk-forms .sk-form { flex-direction: row; gap: 8px; min-width: 0; padding: 4px 12px; }
.sk-style span, .sk-form span { font-size: 12px; font-weight: 600; }
.sk-style.on, .sk-form.on { background: var(--sk-paper); border-color: var(--ink); }
.sk-card textarea { width: 100%; box-sizing: border-box; padding: 0 2px; border: none; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent; font-family: var(--sk-hand); font-size: 18px; line-height: 28px; color: var(--ink); resize: vertical; }
.sk-gen { width: 100%; min-height: 46px; margin-top: 16px; border-radius: 999px; font-weight: 700; }
.sk-hint { margin: 10px 0 0; font-size: 12px; line-height: 17px; color: var(--muted); }
.sk-vers > div { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-ver { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; min-height: 58px; padding: 4px; border: none; cursor: pointer; color: var(--ink); background: var(--sk-paper);
  border-radius: 18px 10px 20px 12px / 12px 20px 10px 18px; box-shadow: 0 2px 4px rgba(31,25,28,.15); font: inherit; }
.sk-ver:nth-child(odd) { transform: rotate(-2deg); } .sk-ver:nth-child(even) { transform: rotate(2deg); }
.sk-ver b { font-family: var(--sk-hand); font-weight: 400; font-size: 17px; }
.sk-ver small { font-size: 11px; color: var(--ink-3); }
.sk-ver.on { box-shadow: 0 0 0 2px var(--ink), 0 6px 12px -6px rgba(31,25,28,.4); }
.sk-ver.add { background: transparent; box-shadow: none; border: 1.5px dashed var(--ink-3); }
.sk-sticky { position: relative; padding: 18px 18px 16px; background: var(--sk-sticky); transform: rotate(1.2deg); border-radius: 6px 22px 8px 30px / 22px 8px 30px 8px; box-shadow: 0 10px 20px -12px rgba(31,25,28,.45); }
.sk-sticky > label[for] { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.sk-sticky textarea { width: 100%; box-sizing: border-box; padding: 0; border: none; background: transparent; font-family: var(--sk-hand); font-size: 17px; line-height: 25px; color: var(--ink); resize: vertical; }
.sk-check { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-top: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sk-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.sk-desk :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* present mode: the espresso table */
.sk-present { position: fixed; inset: 0; z-index: 2000; overflow: auto; padding: 28px 28px 48px; box-sizing: border-box; background: var(--ink); color: var(--bg); animation: sk-in 280ms var(--sk-ease); }
@keyframes sk-in { from { opacity: 0; } to { opacity: 1; } }
.sk-pr-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; max-width: 1180px; margin: 0 auto 18px; }
.sk-pr-top > div:first-child { flex: 1 1 320px; }
.sk-pr-top h2 { margin: 0; font-family: var(--sk-hand); font-weight: 400; font-size: 40px; line-height: 46px; color: var(--bg); }
.sk-pr-top p { margin: 6px 0 0; font-size: 14px; color: var(--muted-2); }
.sk-pr-nav { display: flex; gap: 8px; }
.sk-pr-nav button { min-width: 48px; height: 48px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--muted); background: transparent; color: var(--bg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sk-pr-nav button:disabled { opacity: .35; cursor: default; }
.sk-pr-sheet { max-width: min(1180px, calc((100vh - 220px) * 1.5)); margin: 0 auto; }
.sk-pr-cap { max-width: 820px; margin: 18px auto 0; text-align: center; font-family: var(--sk-hand); font-size: 26px; line-height: 38px; color: var(--bg); }

/* proposal slide */
.pz-sk { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.pz-sk.n1 { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.pz-sk figure { margin: 0; }
.pz-sk .sk-paper { -webkit-mask: none; mask: none; }
.pz-sk figcaption { margin-top: 8px; font-size: 13px; line-height: 19px; }
.pz-sk figcaption b { display: block; }
.pz-sk figcaption span { font-family: var(--sk-hand); font-size: 16px; line-height: 22px; }

@media (max-width: 900px) {
  .sk-desk { padding: 16px 16px 40px; }
  .sk-head h1, .sk-pr-top h2 { font-size: 30px; line-height: 36px; }
  .sk-side { padding-top: 0; }
  .sk-tool svg { width: 80px; }
  .pz-sk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sk-scraps li { flex: 0 0 calc(50% - 5px); }
  .sk-scrap { width: 100%; box-sizing: border-box; }
  .sk-tool svg { width: 64px; }
  .sk-scraps { gap: 10px; }
  .sk-tblock { font-size: 11px; line-height: 14px; }
  .sk-present { padding: 16px; }
}
@media (pointer: coarse) { .sk-link, .sk-check { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .sk-tool, .sk-scrap { transition: none; }
  .sk-tool:hover, .sk-scrap:hover { transform: rotate(var(--rot, 0deg)); }
  .sk-tool.on { transform: none; }
  .sk-spin { animation: none; border-color: var(--accent); }
  .sk-present { animation: none; }
}

/* ============================================================
   ALTERNATIV OS (v110) — living floor, espresso hub sidebar, Home river and
   agents, client "watch it being built", agents page, landing hero.
   Brand fonts stay Safiro (body) and Blauer Nue (display). Motion: transform and
   opacity only, with reduced-motion fallbacks. Shapes are organic.
   ============================================================ */
:root { --os-ease: cubic-bezier(.2,.7,.2,1); --os-plate: #EFE9E2; --os-glass: #DCE6F5; --os-sage: #7E9676; --os-ink-2: #2B2427; --os-ink-3: #3A3235; --os-r: 28px; --os-r-org: 28px 16px 30px 18px / 18px 30px 16px 28px; }

/* ---------- living floor ---------- */
.lf { position: relative; width: 640px; height: 480px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lf-scene { position: relative; width: 520px; height: 340px; transform-style: preserve-3d; transform: translateY(30px) rotateX(57deg) rotateZ(-38deg); }
.lf-scene > * { position: absolute; display: block; }
.lf-plate { inset: 0; background: var(--os-plate); border-radius: 6px; box-shadow: 0 0 0 1.5px var(--ink); }
.lf-dark .lf-plate { background: var(--os-ink-2); box-shadow: 0 0 0 1.5px var(--ink-3); }
.lf-warm { inset: 0; border-radius: 6px; background: rgba(255,196,140,.22); transform: translateZ(1px); opacity: 0; transition: opacity .6s var(--os-ease); }
.lf-s3 .lf-warm { opacity: 1; }
.lf-wall { height: 64px; transform-origin: 0 0; box-shadow: inset 0 -3px 0 var(--ink); }
.lf-wall-n { left: 0; top: 0; width: 520px; transform: rotateX(90deg); background: repeating-linear-gradient(90deg, var(--os-glass) 0 36px, #FFFFFF 36px 42px); }
.lf-wall-e { left: 520px; top: 0; width: 340px; transform: rotateZ(90deg) rotateX(90deg); background: repeating-linear-gradient(90deg, #E6EDF8 0 36px, #F4F1EE 36px 42px); }
.lf-rail { height: 10px; transform-origin: 0 0; background: rgba(31,25,28,.5); }
.lf-rail-s { left: 0; top: 340px; width: 520px; transform: rotateX(90deg); }
.lf-rail-w { left: 0; top: 0; width: 340px; transform: rotateZ(90deg) rotateX(90deg); background: rgba(31,25,28,.35); }
.lf-core-top { left: 300px; top: 120px; width: 80px; height: 100px; transform: translateZ(70px); background: #CFC8CA; border-radius: 4px; }
.lf-core-f { left: 300px; top: 220px; width: 80px; height: 70px; transform-origin: 0 0; transform: rotateX(90deg); background: #B9B1B4; }
.lf-core-l { left: 300px; top: 120px; width: 100px; height: 70px; transform-origin: 0 0; transform: rotateZ(90deg) rotateX(90deg); background: var(--muted-2); }
.lf-col { width: 10px; height: 10px; background: var(--ink); border-radius: 2px; transform: translateZ(2px); }
.lf-door { left: 70px; top: 330px; width: 54px; height: 10px; background: var(--accent); border-radius: 3px; }
.lf-zone { opacity: 0; transform: translateZ(60px); transition: transform .7s var(--os-ease) var(--d, 0ms), opacity .5s var(--os-ease) var(--d, 0ms); }
.lf-s1 .lf-zone { opacity: .85; transform: translateZ(2px); }
.lf-s2 .lf-zone, .lf-s3 .lf-zone { opacity: .3; transform: translateZ(1px); }
.lf-up { opacity: 0; transform: rotate(var(--r, 0deg)) translateZ(calc(var(--z, 0px) + 140px)); transition: transform .7s var(--os-ease) var(--d, 0ms), opacity .5s var(--os-ease) var(--d, 0ms); }
.lf-s2 .lf-up, .lf-s3 .lf-up { opacity: 1; transform: rotate(var(--r, 0deg)) translateZ(var(--z, 0px)); }
.lf-dsh { width: 36px; height: 18px; border-radius: 9px; background: rgba(31,25,28,.16); opacity: 0; transition: opacity .5s var(--os-ease) var(--d, 0ms); }
.lf-s2 .lf-dsh, .lf-s3 .lf-dsh { opacity: 1; }
.lf-desk { width: 36px; height: 18px; border-radius: 9px; background: #FFFFFF; box-shadow: 0 0 0 1.5px var(--ink); }
.lf-pod { border-radius: 50%; background: rgba(0,61,196,.08); box-shadow: 0 0 0 2px rgba(0,61,196,.35); opacity: 0; transition: opacity .5s var(--os-ease) var(--d, 0ms); }
.lf-s2 .lf-pod, .lf-s3 .lf-pod { opacity: 1; }
.lf-ptab { border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1.5px var(--ink); }
.lf-ring { border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,61,196,.55); }
.lf-bench { left: 0; top: 0; }
.lf-kit { left: 390px; top: 190px; width: 96px; height: 26px; border-radius: 13px; background: var(--ink); }
.lf-plant { width: 18px; height: 18px; border-radius: 50%; background: var(--os-sage); box-shadow: 0 0 0 3px rgba(126,150,118,.35); }
.lf-man { width: 10px; height: 10px; transform-style: preserve-3d; opacity: 0; transition: opacity .5s var(--os-ease) var(--d, 0ms); }
.lf-man b { display: block; width: 10px; height: 10px; border-radius: 50%; transform: translateZ(14px); animation: lf-breathe 3.2s ease-in-out infinite; }
.lf-s3 .lf-man { opacity: 1; }
@keyframes lf-breathe { 0%, 100% { transform: translateZ(14px) scale(1); } 50% { transform: translateZ(14px) scale(1.18); } }
.lfp { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.lfp-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--os-r); background: var(--os-ink-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lfp-stage .lf, .cpx-floor .lf { flex: none; transform-origin: 50% 50%; }
.lfp-cap { position: absolute; left: 20px; top: 18px; display: flex; flex-direction: column; gap: 2px; color: var(--bg); text-align: left; }
.lfp-code { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); letter-spacing: .06em; }
.lfp-cap b { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.lfp-cap small { font-size: 14px; color: #D6D0D2; max-width: 300px; }
.lfp-bar { display: flex; align-items: center; gap: 12px; }
.lfp-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--muted); background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.lfp-stops { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lfp-stops button { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-height: 44px; padding: 6px 2px; border: none; background: transparent; color: var(--muted-2); cursor: pointer; text-align: left; font: inherit; font-size: 13px; font-weight: 600; }
.lfp-stops button i { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--ink-3); }
.lfp-stops button.on i { background: var(--accent); }
.lfp-stops button[aria-pressed="true"] { color: inherit; }
@media (prefers-reduced-motion: reduce) { .lf-zone, .lf-up, .lf-dsh, .lf-pod, .lf-man, .lf-warm { transition: opacity .2s linear; } .lf-man b { animation: none; } }

/* ---------- sidebar: espresso, 8 hubs ---------- */
.sidebar { background: var(--ink); border-right: none; color: #D6D0D2; padding: 14px 10px 24px; }
.sidebar .section-label { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 10px 0 2px; padding: 10px 12px 6px; border: none; background: transparent; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); cursor: pointer; border-radius: 10px; }
.sidebar .section-label:hover { color: #F9F8F8; }
.sidebar .section-label::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--os-ease); margin-right: 4px; }
.sidebar .section-label.folded::after { transform: rotate(-45deg); }
.sidebar .nav-item { color: #D6D0D2; border-radius: 14px; min-height: 38px; }
.sidebar .nav-item.hub-fold { display: none; }
.sidebar .nav-item:hover { background: var(--os-ink-2); color: #FFFFFF; }
.sidebar .nav-item .icon { opacity: .7; }
.sidebar .nav-item.active { background: var(--os-ink-3); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--accent); }
.sidebar .nav-item.active .icon { color: #FFFFFF; opacity: 1; }
.sidebar .leads-badge { background: var(--accent); color: #FFFFFF; }
.sidebar .nav-item:focus-visible, .sidebar .section-label:focus-visible { outline: 2px solid #F9F8F8; outline-offset: 2px; }
@media (pointer: coarse) { .sidebar .nav-item, .sidebar .section-label { min-height: 44px; } }

/* ---------- Home: hero, river, agents ---------- */
.home2 .hh { border-radius: var(--os-r); }
.home2 .hh h1 { font-family: var(--font-display); letter-spacing: -0.035em; }
.home-river .panel-body { padding: 18px 18px 14px; }
.hr-scroll { overflow-x: auto; }
.hr-track { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(118px, 1fr)); min-width: calc(var(--n) * 122px); }
.hr-flow { position: absolute; left: 0; right: 0; top: 50px; height: 4px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.hr-flow::after { content: ""; position: absolute; left: -40px; right: -40px; top: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 40px); animation: hr-flow 1.6s linear infinite; }
@keyframes hr-flow { to { transform: translateX(40px); } }
.hr-stage { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 10px 4px; color: var(--ink); text-decoration: none; transition: transform .2s var(--os-ease); }
.hr-stage:hover { transform: translateY(-3px); text-decoration: none; }
.hr-l { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.hr-n { position: relative; z-index: 1; min-width: 60px; height: 60px; padding: 0 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 2px var(--ink); font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.hr-stage:first-child .hr-n { background: var(--ink); color: #FFFFFF; }
.hr-stage.hot .hr-n { background: var(--accent); color: #FFFFFF; box-shadow: 0 0 0 2px var(--accent); }
.hr-v { font-size: 13px; }
.hr-stage small { font-size: 12px; color: var(--muted); }
.ha-list { display: grid; gap: 8px; }
.ha-i { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: transform .2s var(--os-ease); }
.ha-i:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.ha-i .grow { min-width: 0; display: flex; flex-direction: column; }
.ha-i small { font-size: 12px; color: var(--muted); }
.ha-i b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-v { font-size: 13px; font-weight: 700; white-space: nowrap; }
.ag-badge { flex: none; width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--c, var(--ink)); }

/* ---------- Agents page ---------- */
.ag-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; margin-bottom: 20px; }
.ag-head h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); line-height: 1.02; letter-spacing: -0.035em; }
.ag-head .subtitle { max-width: 640px; font-size: 15px; }
.ag-figs { display: flex; gap: 10px; }
.ag-figs > div { padding: 14px 18px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); min-width: 110px; }
.ag-figs b { display: block; font-family: var(--font-display); font-size: 30px; }
.ag-figs small { font-size: 13px; color: var(--ink-3); }
.ag-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ag-grid { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ag-card { padding: 20px; border-radius: var(--os-r); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.ag-top { display: flex; align-items: center; gap: 12px; }
.ag-top .grow { min-width: 0; }
.ag-top h2 { font-size: 17px; }
.ag-top small { font-size: 13px; color: var(--ink-3); }
.ag-n { min-width: 28px; height: 28px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--bg-2); color: var(--muted); }
.ag-n.on { background: var(--accent); color: #FFFFFF; }
.ag-card ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ag-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-2); }
.ag-modes button { min-height: 36px; border: none; border-radius: 999px; background: transparent; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.ag-modes button.on { background: var(--ink); color: #FFFFFF; }
.ag-modes button.locked { color: var(--muted-2); text-decoration: line-through; cursor: not-allowed; }
.ag-modes button:disabled:not(.locked):not(.on) { cursor: default; }
.ag-guard { font-size: 12px; font-weight: 600; color: var(--danger); }
.ag-inbox { flex: 1 1 340px; min-width: 0; padding: 22px; border-radius: var(--os-r); background: var(--ink); color: #F9F8F8; position: sticky; top: 12px; }
.ag-inbox h2 { display: flex; align-items: center; gap: 10px; color: #F9F8F8; font-size: 19px; margin-bottom: 14px; }
.ag-beat { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: ag-beat 1.6s ease-in-out infinite; }
@keyframes ag-beat { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
.ag-inbox > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 620px; overflow-y: auto; }
.ag-inbox > ul > li { padding: 14px; border-radius: 20px; background: var(--os-ink-2); display: flex; flex-direction: column; gap: 6px; }
.ag-inbox > ul > li small { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.ag-inbox > ul > li b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.ag-inbox > ul > li span { font-size: 13px; color: #D6D0D2; }
.ag-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ag-acts button { min-height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ag-go { border: none; background: #F9F8F8; color: var(--ink); }
.ag-x { border: 1.5px solid var(--muted); background: transparent; color: #F9F8F8; }
.ag-clear { margin: 0; padding: 16px; border-radius: 20px; background: var(--os-ink-2); }
.ag-never { margin-top: 16px; padding: 16px; border-radius: 20px; background: #FFFFFF; color: var(--ink); }
.ag-never h3 { font-size: 15px; margin-bottom: 6px; }
.ag-never ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.ag-inbox :focus-visible { outline: 2px solid #F9F8F8; outline-offset: 2px; }
.ag-lock { margin-bottom: 12px; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; font-size: 13.5px; }
@media (max-width: 900px) { .ag-inbox { position: static; } }

/* ---------- client portal: watch it being built ---------- */
.cpx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; margin: 4px 0 20px; }
.cpx-main { padding: 28px; border-radius: var(--os-r); background: var(--ink); color: #F9F8F8; display: flex; flex-direction: column; gap: 14px; }
.cpx-k { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--muted-2); }
.cpx-main h2 { color: #F9F8F8; font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.035em; font-weight: 600; }
.cpx-main h2 span { color: var(--accent); }
.cpx-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.cpx-figs > div { padding: 12px 14px; border-radius: 18px; background: var(--os-ink-2); }
.cpx-figs b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.cpx-figs small { font-size: 12.5px; color: var(--muted-2); }
.cpx-cta { align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: #FFFFFF; font-weight: 700; text-decoration: none; }
.cpx-cta:hover { background: var(--accent-hover); color: #FFFFFF; text-decoration: none; }
.cpx-floor { position: relative; min-height: 360px; border-radius: var(--os-r); background: #FFFFFF; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cpx-tag { position: absolute; left: 16px; top: 14px; padding: 7px 12px; border-radius: 999px; background: var(--bg); font-size: 12.5px; font-weight: 700; }
.cpx-strip { grid-column: 1 / -1; list-style: none; margin: 0; padding: 16px 18px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(var(--n), minmax(96px, 1fr)); gap: 0; overflow-x: auto; }
.cpx-strip li { display: flex; flex-direction: column; gap: 6px; padding-right: 8px; min-width: 96px; }
.cpx-strip i { display: block; height: 8px; border-radius: 8px; background: var(--os-plate); }
.cpx-strip li.done i { background: var(--ink); }
.cpx-strip li.now i { background: var(--accent); }
.cpx-strip b { font-size: 14px; }
.cpx-strip small { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
@media (max-width: 900px) { .cpx { grid-template-columns: minmax(0, 1fr); } .cpx-floor { min-height: 280px; } }

/* ---------- landing hero (sign-in gate) ---------- */
.alw-os { position: relative; display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; max-width: 1280px; margin: 0 auto; padding: clamp(16px, 4vw, 48px); color: #F9F8F8; }
.alw-os-txt { flex: 1 1 440px; min-width: 0; }
.alw-os-k { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(31,25,28,.28); font-size: 13px; font-weight: 600; }
.alw-os-k i { width: 8px; height: 8px; border-radius: 50%; background: #F9F8F8; animation: ag-beat 1.8s ease-in-out infinite; }
.alw-os h2.alw-os-h { margin: 0; color: #F9F8F8; font-family: var(--font-display); font-size: clamp(46px, 6.6vw, 104px); line-height: .94; font-weight: 600; letter-spacing: -0.045em; }
.alw-os-p { margin: 22px 0 0; max-width: 520px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: #FBF1EE; }
.alw-os-fig { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; }
.alw-os-fig b { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.03em; }
.alw-os-fig small { font-size: 13px; color: #FBF1EE; }
.alw-os-floor { flex: 1 1 480px; min-width: 0; max-width: 620px; color: #F9F8F8; }
.alw-os-floor .lfp-stage { background: var(--ink); }
.alw-os-floor .lfp-play { border-color: rgba(249,248,248,.6); }
.alw-os-floor .lfp-stops button { color: #FBF1EE; }
.alw-os-floor .lfp-stops button i { background: rgba(31,25,28,.35); }
.alw-os-floor .lfp-stops button.on i { background: #F9F8F8; }
.alw-story { background: #F6F2EE; color: var(--ink); padding: clamp(48px, 8vw, 104px) clamp(16px, 4vw, 48px); }
.alw-story-in { max-width: 1280px; margin: 0 auto; }
.alw-story h2 { font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; max-width: 820px; }
.alw-story-sub { margin: 16px 0 36px; max-width: 560px; font-size: 17px; color: var(--ink-3); }
.alw-sheets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.alw-sheet { padding: 14px; background: #FFFFFF; border-radius: var(--os-r-org); box-shadow: 0 1px 2px rgba(31,25,28,.08), 0 18px 36px -24px rgba(31,25,28,.4); transition: transform .28s var(--os-ease); }
.alw-sheet:nth-child(odd) { transform: rotate(-.8deg); } .alw-sheet:nth-child(even) { transform: rotate(.7deg); }
.alw-sheet:hover { transform: translateY(-6px); }
.alw-sheet svg { display: block; width: 100%; height: auto; background: #FBF7EA; border-radius: 18px 8px 22px 12px / 10px 20px 8px 16px; }
.alw-sheet h3 { display: flex; gap: 10px; align-items: baseline; margin: 14px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.alw-sheet h3 span { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.alw-sheet p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-3); }
.alw-size { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; margin-top: clamp(48px, 7vw, 88px); }
.alw-size-l { flex: 1 1 380px; min-width: 0; }
.alw-size-l label { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; }
.alw-size-l input[type=range] { width: 100%; margin: 12px 0 18px; accent-color: var(--accent); height: 32px; }
.alw-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.alw-modes button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: #FFFFFF; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.alw-modes button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.alw-figs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.alw-figs3 > div { padding: 16px; border-radius: 20px; background: #FFFFFF; }
.alw-figs3 > div:last-child { background: var(--ink); color: #FFFFFF; }
.alw-figs3 b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.alw-figs3 small { font-size: 13px; }
.alw-dots { flex: 1 1 420px; min-width: 0; display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; min-height: 300px; padding: 28px; border-radius: 30px; background: #FFFFFF; }
.alw-dots i { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--muted-2); }
.alw-dots i.on { background: var(--accent); border-color: var(--accent); }
.alw-size-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .hr-flow::after, .ag-beat, .alw-os-k i { animation: none; }
  .hr-stage, .ha-i, .alw-sheet { transition: none; }
  .hr-stage:hover, .ha-i:hover, .alw-sheet:hover { transform: none; }
  .sidebar .section-label::after { transition: none; }
}
.alw-gate:has(.alw-os) { flex-direction: column; align-items: stretch; }
.alw-gate .alw-os { width: 100%; box-sizing: border-box; padding-top: clamp(110px, 12vw, 150px); }
.alw-os + .alw-gate-inner { padding-top: 24px; }
.alw-os + .alw-gate-inner .alw-h1 { font-size: clamp(32px, 3.8vw, 60px); }
.home-river { min-width: 0; max-width: 100%; }
.home-river .panel-body, .hr-scroll { min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .topbar { max-width: 100vw; overflow-x: clip; } }

/* ===== v111: explicit hover states, so the global button:hover never puts dark text on a dark surface ===== */
.alw-door:hover { color: inherit; }
.alw-door-dark:hover { background: #2A2326; border-color: rgba(249,248,248,.32); color: var(--paper); }
.alw-door-white:hover { background: #F9F8F8; color: var(--ink); }
.alw-door-red:hover { color: #FFFFFF; }
.alw-door-dark:hover .alw-door-a b { background: rgba(249,248,248,.2); }
.sidebar .section-label:hover { background: transparent; border-color: transparent; color: #F9F8F8; }
.lfp-play:hover { background: rgba(249,248,248,.16); border-color: currentColor; color: inherit; }
.lfp-stops button:hover { background: transparent; color: #FFFFFF; }
.alw-modes button:hover { background: #FFFFFF; border-color: var(--ink); color: var(--ink); }
.alw-modes button[aria-pressed="true"]:hover { background: var(--ink); color: #FFFFFF; }
.ha-i:hover { background: var(--panel); color: var(--ink); }
.ag-go:hover { background: #FFFFFF; color: var(--ink); border: none; }
.ag-x:hover { background: rgba(249,248,248,.12); border-color: #F9F8F8; color: #F9F8F8; }
.ag-modes button:hover:not(:disabled) { background: #FFFFFF; color: var(--ink); border: none; }
.ag-modes button.on:hover { background: var(--ink); color: #FFFFFF; }
.ag-modes button.locked, .ag-modes button.locked:hover { opacity: 1; color: var(--muted); background: transparent; }
.ag-modes button:disabled:hover { background: transparent; }
.ag-modes button.on:disabled:hover { background: var(--ink); color: #FFFFFF; }
.profile-btn .caret { color: var(--ink-3); }
.sk-tool:hover { background: transparent; border: none; color: inherit; }
.sk-tool.on:hover { background: rgba(249,248,248,.55); }
.sk-link:hover { background: transparent; color: var(--accent-deep); }
.sk-style:hover, .sk-form:hover { background: var(--sk-paper); border-color: var(--ink); color: var(--ink); }
.sk-ver:hover { background: var(--sk-paper); color: var(--ink); }
.sk-scrap:hover { background: var(--sk-paper); color: var(--ink); }
.sk-pill-btn:hover { background: rgba(249,248,248,.4); border-color: var(--ink); color: var(--ink); }
.sk-pr-nav button:hover:not(:disabled) { background: rgba(249,248,248,.14); border-color: #F9F8F8; color: #F9F8F8; }
.sk-pr-nav button:disabled:hover { background: transparent; color: var(--bg); }
.sk-confirm button.danger:hover { background: #8A1823; color: #FFFFFF; }
.cpx-cta:hover { color: #FFFFFF; }