/* StayOS admin (lambda/admin/DESIGN.md §7). Plain CSS, no build step.
   Layers: tokens → base → components → views → preview. No serif, no gold. */
@layer tokens, base, components, views, preview;

@layer tokens {
  :root {
    --bg:#F5F7FA; --surface:#FFFFFF; --surface-2:#EEF2F6; --surface-3:#E4E9F0;
    --border:#DCE2EA; --border-strong:#C3CCD8; --input-border:#8693A5;
    --text:#0E1726; --text-2:#475569; --text-3:#5B6B7F;
    --accent:#1D5FD1; --accent-hover:#1852B8; --accent-soft:#EAF1FC; --on-accent:#FFFFFF; --ring:rgba(29,95,209,.35);
    --ok:#0F7A4F; --ok-soft:#E7F5EE; --warn:#B4480B; --warn-soft:#FDF0E7; --danger:#C8312B; --danger-soft:#FCEBEA; --on-danger:#FFFFFF;
    --asleep:#5B5FC7; --asleep-soft:#EFEFFB;
    --src-airbnb:#E8505B; --src-vrbo:#2F6FDE; --src-direct:#64748B;
    --overlay:rgba(14,23,38,.45);
    --sh-1:0 1px 2px rgba(14,23,38,.06); --sh-2:0 4px 14px rgba(14,23,38,.08); --sh-3:0 18px 48px rgba(14,23,38,.16);
    --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
    --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
    --m-fast:120ms; --m-base:200ms; --m-out:160ms; --ease:cubic-bezier(.2,.8,.2,1);
    --gutter:16px; --nav-h:64px; --bar-h:56px; --side-w:248px; --rail-w:80px;
    --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#0A0E14; --surface:#121821; --surface-2:#19212C; --surface-3:#212B38; --border:#243041; --border-strong:#334155; --input-border:#66758A;
      --text:#E9EEF5; --text-2:#AAB6C5; --text-3:#8592A3;
      --accent:#6EA8FF; --accent-hover:#8AB9FF; --accent-soft:rgba(110,168,255,.14); --on-accent:#04142E; --ring:rgba(110,168,255,.45);
      --ok:#3DD68C; --ok-soft:rgba(61,214,140,.14); --warn:#FF9A5A; --warn-soft:rgba(255,154,90,.14); --danger:#FF7A72; --danger-soft:rgba(255,122,114,.14); --on-danger:#2A0705;
      --asleep:#A5A8FF; --asleep-soft:rgba(165,168,255,.14); --overlay:rgba(0,0,0,.6);
      --sh-1:none; --sh-2:none; --sh-3:0 18px 48px rgba(0,0,0,.5);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"] {
    --bg:#0A0E14; --surface:#121821; --surface-2:#19212C; --surface-3:#212B38; --border:#243041; --border-strong:#334155; --input-border:#66758A;
    --text:#E9EEF5; --text-2:#AAB6C5; --text-3:#8592A3;
    --accent:#6EA8FF; --accent-hover:#8AB9FF; --accent-soft:rgba(110,168,255,.14); --on-accent:#04142E; --ring:rgba(110,168,255,.45);
    --ok:#3DD68C; --ok-soft:rgba(61,214,140,.14); --warn:#FF9A5A; --warn-soft:rgba(255,154,90,.14); --danger:#FF7A72; --danger-soft:rgba(255,122,114,.14); --on-danger:#2A0705;
    --asleep:#A5A8FF; --asleep-soft:rgba(165,168,255,.14); --overlay:rgba(0,0,0,.6);
    --sh-1:none; --sh-2:none; --sh-3:0 18px 48px rgba(0,0,0,.5);
    color-scheme:dark;
  }
  @media (min-width:1024px) { :root { --gutter:32px; } }

  /* Accent (Account → Appearance). Each person picks their own; boot.js sets data-accent on <html>
     before first paint. Under Copper, warn moves to a deeper red-orange and danger to crimson, so the
     accent ("Same-day turnover"), warn ("Guest name missing") and danger (offline) stay three different
     colors. Every text pair below is AA on its soft background and on the page. Copper is the
     marketing site's (#E4A47C in dark); light mode uses a deeper copper for contrast. */
  :root { --hero-a:#2B6CB0; --hero-b:#123A64; }
  :root[data-accent="copper"] {
    --accent:#A4603A; --accent-hover:#8A5636; --accent-soft:#FBF5F1; --on-accent:#FFFFFF; --ring:rgba(164,96,58,.35);
    --warn:#B8330F; --warn-soft:#FCECE6; --danger:#C0264E; --danger-soft:#FCE9EE;
    --hero-a:#A4603A; --hero-b:#3A2418;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-accent="copper"]:not([data-theme="light"]) {
      --accent:#E4A47C; --accent-hover:#EFB68E; --accent-soft:rgba(228,164,124,.14); --on-accent:#211B17; --ring:rgba(228,164,124,.45);
      --warn:#FF6E42; --warn-soft:rgba(255,110,66,.14); --danger:#FF6E92; --danger-soft:rgba(255,110,146,.14);
    }
  }
  :root[data-accent="copper"][data-theme="dark"] {
    --accent:#E4A47C; --accent-hover:#EFB68E; --accent-soft:rgba(228,164,124,.14); --on-accent:#211B17; --ring:rgba(228,164,124,.45);
    --warn:#FF6E42; --warn-soft:rgba(255,110,66,.14); --danger:#FF6E92; --danger-soft:rgba(255,110,146,.14);
  }
}

@layer base {
  *,*::before,*::after { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { margin:0; background:var(--bg); color:var(--text); font:400 15px/22px var(--font); -webkit-font-smoothing:antialiased; min-height:100dvh; overflow-x:hidden; }
  h1,h2,h3,h4,p { margin:0; }
  h1 { font-size:24px; line-height:30px; font-weight:700; letter-spacing:-.015em; }
  h2 { font-size:19px; line-height:26px; font-weight:600; letter-spacing:-.01em; }
  h3 { font-size:16px; line-height:22px; font-weight:600; }
  a { color:var(--accent); text-decoration:none; }
  a:hover { text-decoration:underline; }
  button, input, select, textarea { font:inherit; color:inherit; }
  button { cursor:pointer; }
  img { max-width:100%; display:block; }
  [hidden] { display:none !important; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 5px var(--ring); border-radius:var(--r-xs); }
  ::selection { background:var(--accent-soft); }
  .num, time, .tnum { font-variant-numeric:tabular-nums; }
  .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .skip { position:fixed; left:12px; top:-80px; z-index:100; background:var(--surface); color:var(--accent); padding:12px 16px; border-radius:var(--r-sm); }
  .skip:focus { top:12px; box-shadow:var(--sh-3); }
  svg.i { width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  svg.i.lg { width:24px; height:24px; }
  svg.i.sm { width:16px; height:16px; }
  .muted { color:var(--text-2); } .faint { color:var(--text-3); }
  .small { font-size:13px; line-height:18px; font-weight:500; }
  .caption { font-size:12px; line-height:16px; font-weight:500; }
  .eyebrow { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
  .mono { font-family:var(--mono); }
  .stack { display:grid; gap:var(--s-4); } .stack-sm { display:grid; gap:var(--s-2); } .stack-lg { display:grid; gap:var(--s-6); }
  .stack, .stack-sm, .stack-lg, .list, .field, .sheet-body, .with-preview, .guide, .homes-grid, .today-grid, .two-col, .climate-grid, .md, .le, .fav-list, .sec-list, .blocks, .items, .block-body, .fav-body, .panel { grid-template-columns:minmax(0,1fr); }
  .row-flex { display:flex; align-items:center; gap:var(--s-3); min-width:0; } .wrap { flex-wrap:wrap; } .grow { flex:1; min-width:0; } .end { margin-left:auto; }
  .ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:60ms !important; transition-property:opacity !important; scroll-behavior:auto !important; } }
}

@layer components {
  /* ── Buttons ── */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; border-radius:var(--r-sm); border:1px solid transparent; font-weight:600; font-size:15px; line-height:20px; white-space:nowrap; text-decoration:none; transition:background var(--m-fast) var(--ease), border-color var(--m-fast), color var(--m-fast), transform var(--m-fast); -webkit-tap-highlight-color:transparent; }
  .btn:hover { text-decoration:none; }
  .btn:active:not(:disabled) { transform:scale(.98); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
  .btn-primary { background:var(--accent); color:var(--on-accent); }
  .btn-primary:hover:not(:disabled) { background:var(--accent-hover); }
  .btn-secondary { background:var(--surface); color:var(--text); border-color:var(--input-border); }
  .btn-secondary:hover:not(:disabled) { background:var(--surface-2); }
  .btn-ghost { background:transparent; color:var(--accent); padding:0 12px; }
  .btn-ghost:hover:not(:disabled) { background:var(--accent-soft); }
  .btn-danger { background:var(--danger); color:var(--on-danger); }
  .btn-danger-2 { background:transparent; color:var(--danger); border-color:var(--danger); }
  .btn-danger-2:hover:not(:disabled) { background:var(--danger-soft); }
  .btn-block { width:100%; }
  .btn .spin { width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
  @media (pointer:fine) { .btn-compact { min-height:36px; padding:0 12px; font-size:14px; } }
  @keyframes spin { to { transform:rotate(360deg); } }
  .icon-btn { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm); border:0; background:transparent; color:var(--text-2); flex:none; }
  .icon-btn:hover:not(:disabled) { background:var(--surface-2); color:var(--text); }
  .icon-btn:disabled { opacity:.4; cursor:not-allowed; }
  .icon-btn.on-dark { color:#fff; background:rgba(0,0,0,.28); }
  .link-btn { border:0; background:none; padding:0; color:var(--accent); font-weight:600; min-height:44px; display:inline-flex; align-items:center; gap:6px; }
  .link-btn:hover { text-decoration:underline; }
  .btn-ghost.edge { margin-left:-12px; } /* a ghost button that starts a row lines its label up with the text above */

  /* ── Chips and badges ── */
  .chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:var(--r-pill); font-size:12px; line-height:16px; font-weight:600; white-space:nowrap; background:var(--surface-2); color:var(--text-2); border:0; max-width:100%; }
  .chip > span { overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .chip .dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
  .chip svg.i { width:14px; height:14px; }
  button.chip, a.chip { position:relative; cursor:pointer; text-decoration:none; }
  button.chip::after, a.chip::after { content:""; position:absolute; inset:-8px -2px; }
  button.chip:hover, a.chip:hover { filter:brightness(.97); }
  .badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-xs); font-size:12px; line-height:16px; font-weight:600; background:var(--surface-2); color:var(--text-2); white-space:nowrap; }
  .t-ok { background:var(--ok-soft); color:var(--ok); }
  .t-warn { background:var(--warn-soft); color:var(--warn); }
  .t-danger { background:var(--danger-soft); color:var(--danger); }
  .t-asleep { background:var(--asleep-soft); color:var(--asleep); }
  .t-accent { background:var(--accent-soft); color:var(--accent); }
  .t-neutral { background:var(--surface-2); color:var(--text-2); }
  .src { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-2); font-weight:500; }
  .src::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--src-direct); }
  .src-airbnb::before { background:var(--src-airbnb); } .src-vrbo::before { background:var(--src-vrbo); }

  /* ── Cards ── */
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-1); min-width:0; }
  @media (min-width:1024px) { .card { padding:20px; } }
  .card-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
  .card-head h2, .card-head h3 { flex:1; min-width:0; }
  .card-desc { color:var(--text-2); font-size:13px; line-height:18px; font-weight:500; margin-top:2px; }
  .card-flush { padding:0; overflow:hidden; }
  .card-link { display:block; color:inherit; text-decoration:none; transition:border-color var(--m-fast), box-shadow var(--m-fast); }
  .card-link:hover { text-decoration:none; border-color:var(--border-strong); box-shadow:var(--sh-2); }
  .divider { height:1px; background:var(--border); margin:12px 0; border:0; }

  /* ── List rows ── */
  .list { display:grid; }
  .lrow { display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 0; color:inherit; text-decoration:none; border:0; background:none; width:100%; text-align:left; border-top:1px solid var(--border); }
  .list > .lrow:first-child, .list > li:first-child > .lrow { border-top:0; }
  a.lrow:hover, button.lrow:hover { text-decoration:none; background:linear-gradient(90deg,transparent,var(--surface-2) 12%,var(--surface-2) 88%,transparent); }
  .lrow .t { font-weight:600; } .lrow .s { color:var(--text-2); font-size:13px; line-height:18px; font-weight:500; }
  .lrow .chev { color:var(--text-3); }
  .tile { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:none; font-weight:700; font-size:14px; }
  .tile.neutral { background:var(--surface-2); color:var(--text-2); }
  ul.plain, ol.plain { list-style:none; margin:0; padding:0; }

  /* ── Forms ── */
  .field { display:grid; gap:6px; min-width:0; }
  .field-top { display:flex; align-items:baseline; gap:8px; }
  .field label, .label { font-size:13px; line-height:18px; font-weight:600; color:var(--text); }
  .opt-tag { font-size:12px; font-weight:500; color:var(--text-3); }
  .counter { margin-left:auto; font-size:12px; color:var(--text-3); font-weight:500; opacity:0; transition:opacity var(--m-fast); }
  .field:focus-within .counter, .counter.show { opacity:1; }
  .counter.over { color:var(--danger); }
  .hint { font-size:13px; line-height:18px; color:var(--text-2); font-weight:500; }
  .error { font-size:13px; line-height:18px; color:var(--danger); font-weight:600; display:flex; gap:6px; align-items:flex-start; }
  .error svg.i { width:16px; height:16px; margin-top:1px; }
  .input, .textarea, .select { width:100%; min-height:48px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--input-border); background:var(--surface); color:var(--text); font-size:16px; line-height:22px; transition:border-color var(--m-fast), box-shadow var(--m-fast); }
  .textarea { min-height:96px; resize:vertical; field-sizing:content; max-height:420px; }
  .select { appearance:none; padding-right:40px; background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%); background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat; }
  .input:focus, .textarea:focus, .select:focus { outline:2px solid var(--accent); outline-offset:0; box-shadow:0 0 0 4px var(--ring); border-color:var(--accent); }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color:var(--danger); }
  .input:disabled, .textarea:disabled, .select:disabled { background:var(--surface-2); color:var(--text-2); }
  .input-group { display:flex; gap:8px; align-items:stretch; }
  .input-group .input { flex:1; min-width:0; }
  .input-affix { position:relative; }
  .input-affix .input { padding-right:96px; }
  .input-affix .affix { position:absolute; right:4px; top:2px; display:flex; }
  .mono-input { font-family:var(--mono); letter-spacing:.02em; }
  .fields-2 { display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
  @media (min-width:640px) { .fields-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .check { display:flex; gap:12px; align-items:flex-start; min-height:44px; padding:10px 0; cursor:pointer; }
  .check input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); flex:none; }
  details.disclosure > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:44px; font-weight:600; color:var(--accent); }
  details.disclosure > summary::-webkit-details-marker { display:none; }
  details.disclosure > summary svg.i { transition:transform var(--m-fast); }
  details.disclosure[open] > summary svg.i { transform:rotate(90deg); }

  /* Segmented control */
  .seg { display:inline-flex; background:var(--surface-2); border-radius:var(--r-sm); padding:3px; gap:2px; max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .seg::-webkit-scrollbar { display:none; }
  .seg button { min-height:40px; padding:0 14px; border:0; background:transparent; border-radius:8px; font-weight:600; font-size:14px; color:var(--text-2); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
  .seg button[aria-checked="true"] { background:var(--surface); color:var(--text); box-shadow:var(--sh-1),0 0 0 1px var(--border); }
  .seg.block { display:flex; } .seg.block button { flex:1; }

  /* Switch */
  .switch-row { display:flex; align-items:center; gap:12px; min-height:44px; }
  .switch { position:relative; width:44px; height:28px; border-radius:999px; border:0; background:var(--border-strong); flex:none; transition:background var(--m-fast); padding:0; }
  .switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform var(--m-base) var(--ease); }
  .switch[aria-checked="true"] { background:var(--accent); }
  .switch[aria-checked="true"]::after { transform:translateX(16px); }

  /* Stepper */
  .stepper { display:inline-flex; align-items:center; border:1px solid var(--input-border); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); }
  .stepper button { width:44px; height:44px; border:0; background:transparent; display:grid; place-items:center; color:var(--text); }
  .stepper button:hover:not(:disabled) { background:var(--surface-2); }
  .stepper button:disabled { opacity:.35; }
  .stepper .val { min-width:56px; text-align:center; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; }

  /* Search */
  .search { position:relative; display:flex; align-items:center; }
  .search > svg.i { position:absolute; left:14px; color:var(--text-3); pointer-events:none; }
  .search .input { padding-left:42px; padding-right:44px; min-height:44px; }
  .search .icon-btn { position:absolute; right:0; }

  /* Filter chips */
  .fchips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; margin:-2px; mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); }
  .fchips::-webkit-scrollbar { display:none; }
  .fchip { flex:none; min-height:36px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; position:relative; }
  .fchip::after { content:""; position:absolute; inset:-4px 0; }
  .fchip[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
  .fchip .count { font-variant-numeric:tabular-nums; opacity:.8; }

  /* Tabs */
  .tabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border); mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { flex:none; min-height:48px; padding:0 14px; display:inline-flex; align-items:center; color:var(--text-2); font-weight:600; font-size:14px; border-bottom:3px solid transparent; margin-bottom:-1px; text-decoration:none; white-space:nowrap; }
  .tab:hover { color:var(--text); text-decoration:none; }
  .tab[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent); }

  /* Banner */
  .banner { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--text); font-size:14px; line-height:20px; }
  .banner > svg.i { color:var(--accent); margin-top:1px; }
  .banner .grow > * + * { margin-top:4px; }
  .banner.warn { background:var(--warn-soft); } .banner.warn > svg.i { color:var(--warn); }
  .banner.danger { background:var(--danger-soft); } .banner.danger > svg.i { color:var(--danger); }
  .banner.ok { background:var(--ok-soft); } .banner.ok > svg.i { color:var(--ok); }
  .banner.neutral { background:var(--surface-2); } .banner.neutral > svg.i { color:var(--text-2); }
  .banner .btn { min-height:36px; }

  /* Save bar */
  .savebar { position:sticky; bottom:calc(var(--nav-h) + var(--safe-b) + 8px); z-index:45; display:flex; align-items:center; gap:12px; margin-top:16px; padding:10px 10px 10px 16px; border-radius:var(--r-md); background:var(--text); color:var(--bg); box-shadow:var(--sh-3); animation:rise var(--m-base) var(--ease); }
  .savebar .grow { font-weight:600; font-size:14px; }
  .savebar .btn-secondary { background:transparent; color:inherit; border-color:color-mix(in srgb,var(--bg) 45%,transparent); }
  .savebar .btn-secondary:hover:not(:disabled) { background:color-mix(in srgb,var(--bg) 12%,transparent); }
  .savebar .btn-primary { background:var(--bg); color:var(--text); }
  @media (min-width:768px) { .savebar { bottom:16px; } }
  @keyframes rise { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
  .delivery { display:grid; gap:4px; padding:12px 14px; border-radius:var(--r-md); background:var(--ok-soft); font-size:14px; line-height:20px; }
  .delivery strong { color:var(--ok); }
  .delivery .tick { display:flex; gap:8px; align-items:center; color:var(--text-2); font-size:13px; font-weight:500; }
  .delivery .tick svg.i { width:16px; height:16px; color:var(--ok); }

  /* Command stepper (Sent → Received → Done) */
  .cmd { display:grid; gap:8px; padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2); }
  .cmd-steps { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-3); }
  .cmd-steps .st { display:inline-flex; align-items:center; gap:6px; }
  .cmd-steps .st i { width:10px; height:10px; border-radius:50%; border:2px solid currentColor; }
  .cmd-steps .st.done { color:var(--ok); } .cmd-steps .st.done i { background:currentColor; }
  .cmd-steps .st.now { color:var(--accent); } .cmd-steps .st.now i { animation:pulse 1.2s ease-in-out infinite; }
  .cmd-steps .st.err { color:var(--danger); } .cmd-steps .st.err i { background:currentColor; }
  .cmd-steps .bar { flex:1; height:2px; background:var(--border-strong); min-width:12px; }
  .cmd-steps .bar.done { background:var(--ok); }
  @keyframes pulse { 50% { box-shadow:0 0 0 5px var(--ring); } }

  /* Skeleton, empty */
  .skel { background:var(--surface-2); border-radius:var(--r-sm); position:relative; overflow:hidden; min-height:14px; }
  .skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 55%,transparent),transparent); animation:shimmer 1.2s infinite; }
  @keyframes shimmer { to { transform:translateX(100%); } }
  .skel-card { height:132px; border-radius:var(--r-lg); }
  .skel-row { height:64px; border-radius:var(--r-md); }
  .empty { display:grid; justify-items:center; text-align:center; gap:8px; padding:32px 16px; }
  .empty .tile { width:48px; height:48px; border-radius:14px; margin-bottom:4px; }
  .empty p { color:var(--text-2); max-width:360px; }
  .empty .btn { margin-top:8px; }

  /* Avatar */
  .avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; flex:none; background:var(--av,#4a6fa5); letter-spacing:.02em; }
  .avatar.sm { width:32px; height:32px; font-size:12px; }

  /* Ring (setup progress) */
  .ring { --p:0; width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--surface-3) 0); }
  .ring::before { content:attr(data-label); width:30px; height:30px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--text-2); font-variant-numeric:tabular-nums; }
  .ring.sm { width:32px; height:32px; } .ring.sm::before { width:24px; height:24px; font-size:12px; }

  /* Dialogs and sheets (native <dialog>) */
  dialog { color:var(--text); }
  dialog::backdrop { background:var(--overlay); }
  .dlg { border:0; padding:0; border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--sh-3); width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); }
  .dlg[open] { animation:pop var(--m-base) var(--ease); }
  .dlg-body { padding:24px 24px 8px; display:grid; gap:10px; }
  .dlg-body p { color:var(--text-2); }
  .dlg-context { padding:10px 12px; border-radius:var(--r-sm); background:var(--surface-2); font-weight:600; font-size:14px; }
  .dlg-actions { display:flex; gap:8px; justify-content:flex-end; padding:16px 24px 24px; flex-wrap:wrap; }
  @media (max-width:639px) { .dlg-actions { flex-direction:column-reverse; } .dlg-actions .btn { width:100%; } }
  @keyframes pop { from { transform:scale(.97); opacity:0; } to { transform:none; opacity:1; } }
  .sheet { border:0; padding:0; margin:0; background:var(--surface); box-shadow:var(--sh-3); max-width:100vw; max-height:92dvh; width:100%; inset:auto 0 0 0; border-radius:var(--r-xl) var(--r-xl) 0 0; display:flex; flex-direction:column; }
  .sheet:not([open]) { display:none; }
  .sheet[open] { animation:sheetUp var(--m-base) var(--ease); }
  .sheet.full { height:92dvh; }
  .sheet-grab { width:36px; height:4px; border-radius:4px; background:var(--border-strong); margin:8px auto 0; flex:none; touch-action:none; }
  .sheet-head { display:flex; align-items:center; gap:8px; padding:8px 8px 8px 20px; border-bottom:1px solid var(--border); flex:none; }
  .sheet-head h2 { flex:1; min-width:0; font-size:18px; line-height:24px; }
  .sheet-head .sub { display:block; font-size:13px; font-weight:500; color:var(--text-2); }
  .sheet-body { overflow:auto; padding:20px; flex:1; overscroll-behavior:contain; display:grid; gap:20px; align-content:start; }
  .sheet-foot { flex:none; padding:12px 20px calc(12px + var(--safe-b)); border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; background:var(--surface); flex-wrap:wrap; }
  .sheet-foot .grow-btn { flex:1; }
  @keyframes sheetUp { from { transform:translateY(24px); opacity:.4; } to { transform:none; opacity:1; } }
  @media (min-width:1024px) {
    .sheet { inset:0 0 0 auto; height:100dvh; max-height:100dvh; width:480px; border-radius:var(--r-xl) 0 0 var(--r-xl); }
    .sheet.wide { width:640px; }
    .sheet.full { height:100dvh; }
    .sheet-grab { display:none; }
    .sheet-head { padding:14px 12px 14px 24px; }
    .sheet-body { padding:24px; }
    .sheet-foot { padding:16px 24px; }
    @keyframes sheetUp { from { transform:translateX(32px); opacity:.4; } to { transform:none; opacity:1; } }
  }
  .lightbox { border:0; padding:0; background:transparent; max-width:96vw; max-height:96dvh; }
  .lightbox::backdrop { background:rgba(0,0,0,.85); }
  .lightbox img { max-width:96vw; max-height:88dvh; border-radius:12px; }
  .lightbox .icon-btn { position:fixed; top:12px; right:12px; color:#fff; background:rgba(255,255,255,.12); }

  /* Toasts */
  .toasts { position:fixed; z-index:80; left:50%; transform:translateX(-50%); bottom:calc(var(--nav-h) + var(--safe-b) + 12px); display:grid; gap:8px; width:min(420px,calc(100vw - 32px)); pointer-events:none; }
  @media (min-width:768px) { .toasts { bottom:24px; } }
  .toast { pointer-events:auto; display:flex; gap:10px; align-items:center; padding:10px 10px 10px 14px; border-radius:var(--r-md); background:var(--text); color:var(--bg); box-shadow:var(--sh-3); font-size:14px; font-weight:600; animation:rise var(--m-base) var(--ease); min-height:48px; }
  .toast svg.i { color:color-mix(in srgb,var(--bg) 70%,var(--ok)); }
  .toast .grow { line-height:18px; }
  .toast button { border:0; background:transparent; color:inherit; font-weight:700; min-height:36px; padding:0 10px; border-radius:8px; text-decoration:underline; }

  /* Menu (⋯) */
  .menu { position:fixed; z-index:50; min-width:200px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-3); padding:6px; display:grid; }
  .menu button { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border:0; background:transparent; border-radius:8px; text-align:left; font-weight:500; }
  .menu button:hover, .menu button:focus-visible { background:var(--surface-2); }
  .menu button.danger { color:var(--danger); }
  .menu button:disabled { opacity:.4; }
  .menu hr { border:0; border-top:1px solid var(--border); margin:4px 0; }

  /* Sortable lists */
  .sortable-item { position:relative; }
  .sortable-item.dragging { opacity:.55; }
  .sortable-item.lifted { box-shadow:0 0 0 2px var(--accent); border-radius:var(--r-md); }
  .drop-line { position:absolute; left:0; right:0; height:3px; border-radius:3px; background:var(--accent); pointer-events:none; z-index:5; }
  .handle { cursor:grab; touch-action:none; color:var(--text-3); }
  .handle:active { cursor:grabbing; }

  /* Phone frame for previews */
  .phone { margin:0; width:380px; max-width:100%; height:780px; max-height:calc(100dvh - 120px); border-radius:44px; padding:8px; background:#0B0F14; box-shadow:var(--sh-3); flex:none; }
  .phone-screen { width:100%; height:100%; border-radius:36px; overflow:hidden auto; position:relative; scrollbar-width:none; }
  .phone-screen::-webkit-scrollbar { display:none; }
  .phone.static { height:auto; max-height:none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone { box-shadow:0 0 0 1px var(--border-strong),var(--sh-3); } }
  :root[data-theme="dark"] .phone { box-shadow:0 0 0 1px var(--border-strong),var(--sh-3); }
  .phone.static .phone-screen { height:auto; min-height:300px; }
}

@layer views {
  /* ── Shell ── */
  .shell { min-height:100dvh; }
  .side { display:none; }
  .main-col { min-width:0; }
  .topbar { position:sticky; top:0; z-index:40; min-height:calc(var(--bar-h) + var(--safe-t)); padding:var(--safe-t) 8px 0; display:flex; align-items:center; gap:4px; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color var(--m-fast); }
  .topbar.scrolled { border-bottom-color:var(--border); }
  .topbar .tb-title { flex:1; min-width:0; font-size:17px; line-height:22px; font-weight:700; padding:0 8px; opacity:0; transition:opacity var(--m-fast); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar.scrolled .tb-title, .topbar.nolarge .tb-title { opacity:1; }
  .topbar .tb-actions { display:flex; align-items:center; gap:4px; margin-left:auto; }
  .topbar .brandmini { display:flex; align-items:center; gap:8px; padding:0 8px; }
  .large-title { padding:4px var(--gutter) 12px; font-size:28px; line-height:34px; font-weight:700; letter-spacing:-.02em; }
  .large-sub { padding:0 var(--gutter) 16px; margin-top:-8px; color:var(--text-2); font-weight:500; }
  .page { padding:0 var(--gutter) calc(var(--nav-h) + var(--safe-b) + 32px); max-width:1200px; }
  .page.narrow { max-width:720px; }
  .page.wide { max-width:none; }
  .bnav { position:fixed; z-index:40; left:0; right:0; bottom:0; height:calc(var(--nav-h) + var(--safe-b)); padding-bottom:var(--safe-b); display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-top:1px solid var(--border); }
  .bnav a { position:relative; display:grid; justify-items:center; align-content:center; gap:3px; color:var(--text-2); font-size:12px; line-height:16px; font-weight:600; text-decoration:none; min-height:44px; }
  .bnav a[aria-current="page"] { color:var(--accent); }
  .bnav a[aria-current="page"]::before { content:""; position:absolute; top:0; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px; background:var(--accent); }
  .bnav svg.i { width:24px; height:24px; }
  .bnav .dotn { position:absolute; top:8px; left:calc(50% + 8px); min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--danger); color:#fff; font-size:12px; line-height:16px; text-align:center; }
  .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
  .brand:hover { text-decoration:none; }
  .brand-mark { width:32px; height:32px; border-radius:9px; background:var(--accent); display:grid; place-items:center; flex:none; }
  .brand-mark svg { width:32px; height:32px; stroke:var(--on-accent); fill:none; stroke-width:2.6; stroke-linecap:round; }
  .wordmark { font-size:18px; font-weight:800; letter-spacing:-.02em; }
  .wordmark b { color:var(--accent); font-weight:800; }
  .offline-banner { margin:0 var(--gutter) 12px; }

  @media (min-width:768px) {
    .bnav { display:none; }
    .shell { display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); }
    .side { display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; border-right:1px solid var(--border); background:var(--surface); padding:12px 8px; gap:4px; overflow-y:auto; }
    .side .brand { justify-content:center; padding:4px 0 12px; }
    .side .brand .brand-text { display:none; }
    .side nav { display:grid; gap:2px; }
    .side .nav-group-label { display:none; }
    .side a.nav-item, .side button.nav-item { display:grid; justify-items:center; gap:4px; padding:10px 4px; border-radius:var(--r-md); color:var(--text-2); font-size:12px; line-height:16px; font-weight:600; text-decoration:none; border:0; background:none; text-align:center; }
    .side .nav-item svg.i { width:24px; height:24px; }
    .side .nav-item:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
    .side .nav-item[aria-current="page"] { background:var(--accent-soft); color:var(--accent); }
    .side .account { margin-top:auto; }
    .side .account .who { display:none; }
    .page { padding-bottom:48px; }
    .large-title, .large-sub { display:none; }
    .topbar { padding:0 16px 0 24px; } .topbar .tb-title { opacity:1; font-size:20px; padding:0; }
  }
  @media (min-width:1024px) {
    .shell { grid-template-columns:var(--side-w) minmax(0,1fr); background:linear-gradient(90deg,var(--surface) calc(var(--side-w) - 1px),var(--border) 0 var(--side-w),transparent 0); }
    .side { padding:20px 16px; gap:8px; }
    .side .brand { justify-content:flex-start; padding:4px 8px 16px; }
    .side .brand .brand-text { display:grid; }
    .side .brand-text small { font-size:12px; font-weight:600; color:var(--text-3); line-height:16px; }
    .side .nav-group-label { display:block; padding:16px 12px 6px; }
    .side a.nav-item, .side button.nav-item { grid-auto-flow:column; justify-content:start; align-items:center; gap:12px; padding:0 12px; min-height:44px; font-size:14px; line-height:20px; text-align:left; }
    .side .nav-item svg.i { width:20px; height:20px; }
    .side .nav-item .count { margin-left:auto; }
    .side .account .who { display:grid; }
    .side .account { border-top:1px solid var(--border); padding-top:12px; }
    .topbar { min-height:72px; padding:0 32px; background:color-mix(in srgb,var(--bg) 92%,transparent); }
    .topbar .tb-title { font-size:24px; line-height:30px; letter-spacing:-.015em; }
  }
  .account-btn { display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:8px; border-radius:var(--r-md); text-align:left; }
  .account-btn:hover { background:var(--surface-2); }
  .account-btn .who b { font-size:14px; line-height:18px; } .account-btn .who span { font-size:12px; color:var(--text-3); font-weight:600; line-height:16px; }

  /* ── Login ── */
  .login { min-height:100dvh; display:grid; place-items:center; padding:32px 16px; background:radial-gradient(1000px 600px at 50% -10%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%),var(--bg); }
  .login-wrap { width:100%; max-width:400px; display:grid; gap:20px; }
  .login-brand { display:grid; justify-items:center; gap:8px; text-align:center; }
  .login-brand .brand-mark { width:44px; height:44px; border-radius:12px; } .login-brand .brand-mark svg { width:44px; height:44px; }
  .login-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 24px; box-shadow:var(--sh-2); display:grid; gap:16px; }
  .login-card h1 { font-size:22px; line-height:28px; }
  .login-foot { text-align:center; color:var(--text-3); font-size:13px; font-weight:500; }

  /* ── Today ── */
  .today-grid { display:grid; gap:16px; }
  @media (min-width:1024px) { .today-grid { grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; } .today-side { position:sticky; top:88px; } }
  .homes-grid { display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
  @media (min-width:1280px) { .homes-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
  .att-list { display:grid; }
  .att { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
  .att:first-child { border-top:0; padding-top:4px; }
  .att .sev { width:10px; height:10px; border-radius:50%; margin-top:6px; flex:none; background:var(--text-3); }
  .att .sev.high { background:var(--danger); box-shadow:0 0 0 4px var(--danger-soft); } .att .sev.medium { background:var(--warn); } .att .sev.low { background:var(--text-3); }
  .att .t { font-weight:600; line-height:20px; } .att .btn { margin-left:auto; flex:none; }
  .allok { display:flex; gap:14px; align-items:center; }
  .allok .tile { background:var(--ok-soft); color:var(--ok); width:48px; height:48px; border-radius:14px; }
  .home-card { display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
  .home-card-head { display:flex; align-items:center; gap:12px; }
  .home-thumb { width:44px; height:44px; border-radius:12px; flex:none; object-fit:cover; background:linear-gradient(140deg,var(--hero-a),var(--hero-b)); }
  .home-thumb.initials { display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px; }
  .home-card h2 a { color:inherit; } .home-card h2 a:hover { color:var(--accent); text-decoration:none; }
  .kv-line { display:flex; align-items:center; gap:10px; min-height:28px; flex-wrap:wrap; }
  .kv-line > svg.i { color:var(--text-3); }
  .chips-row { display:flex; gap:8px; flex-wrap:wrap; }
  .compact-home { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); color:inherit; text-decoration:none; min-height:56px; }
  .compact-home:first-child { border-top:0; }
  .compact-home:hover { text-decoration:none; }
  .dots { display:inline-flex; gap:4px; } .dots i { width:8px; height:8px; border-radius:50%; background:var(--ok); } .dots i.warn { background:var(--warn); } .dots i.danger { background:var(--danger); } .dots i.neutral { background:var(--text-3); } .dots i.asleep { background:var(--asleep); }
  .agenda-day { padding:10px 0; border-top:1px solid var(--border); display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; }
  .agenda-day:first-of-type { border-top:0; }
  .agenda-day .d { font-weight:700; font-size:13px; line-height:18px; color:var(--text-2); }
  .agenda-day .d b { display:block; font-size:18px; line-height:22px; color:var(--text); }
  .agenda-item { display:grid; gap:2px; font-size:14px; line-height:20px; padding:2px 0 6px; }
  .agenda-item .row-flex { gap:8px; }
  .agenda-item .h { font-weight:600; }

  /* ── Stays ── */
  .toolbar { display:grid; gap:12px; margin-bottom:16px; }
  @media (min-width:1024px) { .toolbar { grid-template-columns:auto minmax(0,1fr) 280px; align-items:center; } }
  .month-h { padding:20px 0 8px; } .month-h:first-child { padding-top:4px; }
  .stay-row { display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); margin-bottom:8px; color:inherit; text-decoration:none; min-height:64px; }
  .stay-row:hover { border-color:var(--border-strong); text-decoration:none; }
  .stay-row[aria-current="true"] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .date-tile { width:48px; flex:none; text-align:center; border-radius:12px; background:var(--surface-2); padding:6px 0; }
  .date-tile small { display:block; font-size:12px; line-height:14px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
  .date-tile b { display:block; font-size:19px; line-height:22px; font-variant-numeric:tabular-nums; }
  .stay-row .who { font-weight:600; }
  .stay-row .meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--text-2); font-size:13px; font-weight:500; line-height:18px; margin-top:2px; }
  .stay-row .right { display:grid; justify-items:end; gap:4px; flex:none; text-align:right; }
  .name-edit { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .name-edit .input { min-height:40px; padding:8px 12px; flex:1; min-width:140px; }
  .add-name { border:1px dashed var(--input-border); background:transparent; color:var(--accent); font-weight:600; border-radius:var(--r-sm); min-height:36px; padding:0 12px; position:relative; }
  .add-name::after { content:""; position:absolute; inset:-4px; }
  .md { display:grid; gap:20px; }
  @media (min-width:1200px) { .md { grid-template-columns:480px minmax(0,1fr); align-items:start; } .md-detail { position:sticky; top:88px; } }
  .panel { display:grid; gap:10px; padding:14px; border-radius:var(--r-md); background:var(--surface-2); }
  .panel-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .preset-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .preset-chips button { min-height:36px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); font-weight:600; font-size:13px; }
  .dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; font-size:14px; }
  .dl dt { color:var(--text-2); font-weight:500; } .dl dd { margin:0; font-weight:600; min-width:0; overflow-wrap:anywhere; }

  /* ── Homes ── */
  .homes-list { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
  .home-tile { overflow:hidden; padding:0; }
  .home-tile .hero { aspect-ratio:16/9; background:linear-gradient(140deg,var(--hero-a),var(--hero-b)); position:relative; }
  .home-tile .hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hero-fallback { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.28); }
  .hero-fallback svg.i { width:56px; height:56px; stroke-width:1.4; }
  .home-tile .body { padding:16px; display:grid; gap:8px; }
  .home-banner { position:relative; height:120px; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(140deg,var(--hero-a),var(--hero-b)); color:#fff; margin-bottom:12px; }
  @media (min-width:1024px) { .home-banner { height:160px; } }
  .home-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
  .home-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,10,12,.15),rgba(4,10,12,.65)); }
  .home-banner .copy { position:absolute; z-index:1; left:16px; right:60px; bottom:12px; }
  .home-banner .copy h2 { font-size:22px; line-height:28px; font-weight:700; letter-spacing:-.015em; }
  .home-banner .copy p { opacity:.9; font-size:13px; font-weight:500; }
  .home-banner .icon-btn { position:absolute; z-index:1; right:8px; top:8px; }
  .home-tabs { position:sticky; top:calc(var(--bar-h) + var(--safe-t)); z-index:30; background:var(--bg); margin:0 calc(var(--gutter) * -1) 16px; padding:0 var(--gutter); }
  @media (min-width:1024px) { .home-tabs { top:72px; margin:0 0 20px; padding:0; } }
  .checklist { display:grid; }
  .check-item { display:flex; align-items:center; gap:12px; min-height:48px; border-top:1px solid var(--border); }
  .check-item:first-child { border-top:0; }
  .check-item .mark { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; border:2px solid var(--border-strong); }
  .check-item.done .mark { background:var(--ok); border-color:var(--ok); color:#fff; }
  .check-item.done .mark svg.i { width:14px; height:14px; stroke-width:2.6; }
  .check-item.done .lbl { color:var(--text-2); }
  .two-col { display:grid; gap:16px; }
  @media (min-width:1024px) { .two-col { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; } }

  /* Guest info sections with a sticky preview */
  .with-preview { display:grid; gap:16px; }
  .with-preview > .preview-col { display:none; }
  @media (min-width:1280px) { .with-preview { grid-template-columns:minmax(0,720px) 380px; gap:32px; } .with-preview > .preview-col { display:block; position:sticky; top:140px; align-self:start; } }
  .section-card { scroll-margin-top:140px; }
  .section-card.dirty { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .le { display:grid; gap:8px; }
  .le-item { display:flex; gap:6px; align-items:flex-start; padding:4px; border-radius:var(--r-md); background:var(--surface); }
  .le-item .handle { width:36px; min-height:48px; display:grid; place-items:center; border:0; background:none; border-radius:8px; }
  .le-item .num { width:24px; text-align:center; padding-top:13px; font-weight:700; color:var(--text-3); font-size:13px; }
  .le-item .textarea, .le-item .input { min-height:48px; }
  .le-item .textarea { min-height:48px; resize:none; }
  .fav-row { border:1px solid var(--border); border-radius:var(--r-md); }
  .fav-row summary { display:flex; align-items:center; gap:10px; min-height:56px; padding:6px 8px 6px 4px; cursor:pointer; list-style:none; }
  .fav-row summary::-webkit-details-marker { display:none; }
  .fav-row .fav-body { padding:4px 14px 14px; display:grid; gap:14px; }
  .photo-frames { display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
  @media (min-width:640px) { .photo-frames { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); } }
  .frame { border-radius:var(--r-md); overflow:hidden; position:relative; background:linear-gradient(160deg,#1d4f6b,#0e2a33 55%,#0a1a1f); }
  .frame img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; position:absolute; inset:0; }
  .frame.phonehdr { aspect-ratio:390/330; } .frame.tablet { aspect-ratio:16/10; }
  .frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,10,12,.4) 0%,rgba(4,10,12,0) 28%,rgba(4,10,12,.05) 48%,rgba(4,10,12,.74) 100%); }
  .frame .lbl { position:absolute; z-index:1; left:12px; bottom:10px; color:#fff; font-weight:700; font-size:13px; }
  .cropper { position:relative; aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden; background:#000; touch-action:none; cursor:grab; }
  .cropper canvas { width:100%; height:100%; display:block; }
  .cropper .crop-phone { position:absolute; top:0; bottom:0; border:2px solid rgba(255,255,255,.85); box-shadow:0 0 0 9999px rgba(0,0,0,.35); pointer-events:none; border-radius:6px; }

  /* ── Guide builder ── */
  .guide { display:grid; gap:16px; }
  @media (min-width:1024px) { .guide { grid-template-columns:280px minmax(0,1fr); gap:20px; align-items:start; } .guide-list-col { position:sticky; top:140px; max-height:calc(100dvh - 160px); overflow:auto; } }
  @media (min-width:1280px) { .guide { grid-template-columns:280px minmax(0,1fr) 380px; } .guide-preview-col { display:block !important; position:sticky; top:140px; } }
  .guide-preview-col { display:none; }
  .sec-row { display:flex; align-items:center; gap:4px; padding:4px; border-radius:var(--r-md); min-height:56px; }
  .sec-row:hover { background:var(--surface-2); }
  .sec-row[aria-current="true"] { background:var(--accent-soft); }
  .sec-row .open { flex:1; min-width:0; display:flex; align-items:center; gap:10px; border:0; background:none; text-align:left; padding:6px 4px; color:inherit; text-decoration:none; min-height:44px; }
  .sec-row .open:hover { text-decoration:none; }
  .sec-row .tile { width:36px; height:36px; border-radius:10px; }
  .sec-row .t { font-weight:600; font-size:14px; line-height:18px; } .sec-row .s { font-size:12px; line-height:16px; color:var(--text-3); font-weight:500; }
  .sec-row .err-dot { width:8px; height:8px; border-radius:50%; background:var(--danger); flex:none; }
  .sec-row .handle { width:32px; height:44px; display:grid; place-items:center; border:0; background:none; }
  .block-card { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); }
  .block-card.has-error { border-color:var(--danger); }
  .block-head { display:flex; align-items:center; gap:6px; padding:4px 4px 4px 4px; border-bottom:1px solid var(--border); }
  .block-head .handle { width:36px; height:44px; display:grid; place-items:center; border:0; background:none; }
  .block-head .lbl { font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
  .block-body { padding:14px; display:grid; gap:14px; }
  .insert { display:flex; justify-content:center; height:20px; align-items:center; position:relative; }
  .insert button { opacity:0; transition:opacity var(--m-fast); }
  .insert:hover button, .insert button:focus-visible { opacity:1; }
  .insert.always button { opacity:1; }
  @media (pointer:coarse) { .insert:not(.always) { display:none; } }
  .items { display:grid; gap:6px; }
  .item-row { display:flex; gap:6px; align-items:flex-start; }
  .item-row .marker { width:28px; flex:none; text-align:center; padding-top:13px; font-weight:700; color:var(--accent); font-size:14px; font-variant-numeric:tabular-nums; }
  .item-row .textarea { min-height:48px; resize:none; }
  .sample { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--warn); background:var(--warn-soft); padding:2px 8px; border-radius:var(--r-xs); }
  .icon-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
  @media (min-width:1024px) { .icon-grid { grid-template-columns:repeat(8,minmax(0,1fr)); } }
  .icon-cell { min-height:56px; display:grid; justify-items:center; align-content:center; gap:4px; padding:6px 2px; border-radius:var(--r-sm); border:1px solid transparent; background:var(--surface-2); color:var(--text); font-size:12px; line-height:14px; font-weight:500; overflow:hidden; }
  .icon-cell span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .icon-cell svg.i { width:24px; height:24px; }
  .icon-cell[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); background:var(--accent-soft); color:var(--accent); }
  .icon-cell .fallback { font-weight:700; font-size:12px; }
  .start-options { display:grid; gap:12px; }
  @media (min-width:768px) { .start-options { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .start-option { display:grid; gap:8px; text-align:left; padding:20px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--surface); align-content:start; }
  .start-option:hover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .start-option .tile { margin-bottom:6px; }
  .review-row { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--border); }
  .review-row:first-child { border-top:0; }
  .review-row .input { min-height:40px; padding:8px 12px; }
  .review-row > input[type=checkbox] { width:20px; height:20px; margin-top:12px; accent-color:var(--accent); flex:none; }
  .meter { height:6px; border-radius:6px; background:var(--surface-3); overflow:hidden; }
  .meter i { display:block; height:100%; width:calc(var(--p,0) * 1%); background:var(--accent); border-radius:6px; }
  .meter.over i { background:var(--danger); }

  /* ── Climate ── */
  .brand-options { display:grid; gap:12px; }
  @media (min-width:640px) { .brand-options { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .brand-option { display:flex; align-items:center; gap:14px; text-align:left; padding:14px 16px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--surface); color:inherit; font:inherit; cursor:pointer; }
  .brand-option:hover { border-color:var(--accent); }
  .brand-option.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--accent-soft, var(--surface)); }
  .brand-option .copy { display:grid; gap:2px; flex:1; min-width:0; }
  .brand-option > svg { color:var(--accent); flex:none; }
  .brand-logo { flex:none; border-radius:10px; background:#fff; object-fit:contain; box-shadow:0 0 0 1px var(--border); }
  .brand-line { display:flex; align-items:center; gap:10px; margin:0; }
  .big-num .readout-prefix { font-size:15px; font-weight:500; color:var(--text-2, var(--muted)); letter-spacing:0; }
  .climate-grid { display:grid; gap:16px; }
  @media (min-width:900px) { .climate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .range-pair { position:relative; height:44px; margin:4px 0 -8px; }
  .range-pair .track { position:absolute; left:0; right:0; top:19px; height:6px; border-radius:6px; background:var(--surface-3); }
  .range-pair .span { position:absolute; top:19px; height:6px; border-radius:6px; background:var(--accent); left:calc(var(--a) * 1%); right:calc(100% - var(--b) * 1%); }
  .range-pair .tick { position:absolute; top:12px; width:2px; height:20px; background:var(--border-strong); left:calc(var(--t) * 1%); border-radius:2px; }
  .range-pair input[type=range] { position:absolute; inset:0; width:100%; height:44px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
  .range-pair input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto; width:28px; height:28px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); box-shadow:var(--sh-2); cursor:grab; }
  .range-pair input[type=range]::-moz-range-thumb { pointer-events:auto; width:24px; height:24px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); cursor:grab; }
  .range-pair input[type=range]::-webkit-slider-runnable-track { background:none; }
  .range-pair input[type=range]:focus-visible { outline:none; box-shadow:none; }
  .range-pair input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 5px var(--ring); }
  .range-scale { display:flex; justify-content:space-between; font-size:12px; color:var(--text-3); font-weight:600; }
  .ends { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .end-ctl { display:grid; gap:6px; }
  .big-num { font-size:30px; line-height:36px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

  /* ── Tablets ── */
  .tab-row { display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); margin-bottom:8px; color:inherit; text-decoration:none; min-height:72px; }
  .tab-row:hover { text-decoration:none; border-color:var(--border-strong); }
  .shot-thumb { width:72px; height:45px; border-radius:8px; object-fit:cover; background:var(--surface-2); flex:none; }
  .shot { position:relative; aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); border:1px solid var(--border); }
  .shot img { width:100%; height:100%; object-fit:cover; }
  .shot button.zoom { position:absolute; inset:0; border:0; padding:0; background:none; cursor:zoom-in; }
  .shot .shot-empty { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px; color:var(--text-2); }
  .action-row { display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:8px 4px; border:0; border-top:1px solid var(--border); background:none; text-align:left; color:inherit; }
  .action-row:first-child { border-top:0; }
  .action-row:hover:not(:disabled) { background:var(--surface-2); }
  .action-row:disabled { opacity:.5; cursor:not-allowed; }
  .action-row .t { font-weight:600; } .action-row .s { color:var(--text-2); font-size:13px; line-height:18px; font-weight:500; }
  .try-list { margin:0; padding-left:20px; display:grid; gap:6px; color:var(--text-2); font-size:14px; }
  .health-row { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--border); font-size:14px; }
  .health-row:first-child { border-top:0; }
  .health-row .lbl { width:96px; flex:none; font-weight:600; }
  .group-h { display:flex; align-items:center; gap:10px; padding:16px 0 8px; }
  .group-h:first-child { padding-top:0; }
  .code-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 6px 6px 14px; border-radius:var(--r-pill); background:var(--surface-2); font-family:var(--mono); font-weight:700; font-size:15px; }

  /* ── Turnovers ── */
  .cal-wrap { overflow-x:auto; }
  .cal { display:grid; grid-template-columns:repeat(7,minmax(96px,1fr)); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--border); gap:1px; min-width:700px; }
  .cal .wd { background:var(--surface-2); padding:6px 8px; font-size:12px; font-weight:700; color:var(--text-2); }
  .cal .day { background:var(--surface); min-height:104px; padding:6px; display:grid; gap:4px; align-content:start; font-size:12px; }
  .cal .day.blank { background:var(--surface-2); }
  .cal .day .n { font-weight:700; font-size:13px; color:var(--text-2); }
  .cal .day.today .n { color:var(--accent); }
  .cal .ev { border:0; text-align:left; border-radius:6px; padding:4px 6px; background:var(--accent-soft); color:var(--text); font-size:12px; line-height:15px; font-weight:600; }
  .cal .ev.warn { background:var(--warn-soft); } .cal .ev.ok { background:var(--ok-soft); }
  .cal .stay { font-size:12px; color:var(--text-2); line-height:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .turno-photos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .turno-photos img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }
  .chk { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--border); font-size:14px; }
  .chk.h { font-weight:700; padding-top:16px; border-top:0; }
  .chk .m { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none; border:2px solid var(--border-strong); }
  .chk .m.on { background:var(--ok); border-color:var(--ok); color:#fff; }
  .chk .m svg.i { width:12px; height:12px; stroke-width:3; }
  progress.bar { width:100%; height:8px; border-radius:8px; overflow:hidden; appearance:none; border:0; background:var(--surface-3); }
  progress.bar::-webkit-progress-bar { background:var(--surface-3); } progress.bar::-webkit-progress-value { background:var(--ok); border-radius:8px; } progress.bar::-moz-progress-bar { background:var(--ok); }

  /* ── Team / Activity / Releases / Diagnostics ── */
  .role-cards { display:grid; gap:10px; }
  .role-card { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; }
  .role-card:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--accent-soft); }
  .role-card input { width:20px; height:20px; margin-top:2px; accent-color:var(--accent); flex:none; }
  .act-row { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--border); }
  .act-row:first-child { border-top:0; }
  .act-row .grow > button { border:0; background:none; padding:0; text-align:left; font-weight:600; line-height:20px; }
  .changes { margin:6px 0 0; padding:10px 12px; background:var(--surface-2); border-radius:var(--r-sm); display:grid; gap:4px; font-size:13px; }
  .rel-cards { display:grid; gap:16px; }
  @media (min-width:768px) { .rel-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .big-ver { font-size:30px; line-height:36px; font-weight:700; letter-spacing:-.02em; }
  .rel-row { display:grid; gap:8px; grid-template-columns:minmax(0,1fr); padding:12px 0; border-top:1px solid var(--border); align-items:center; }
  .rel-row:first-child { border-top:0; }
  @media (min-width:900px) { .rel-row { grid-template-columns:minmax(0,1.4fr) 100px 220px 140px; } }
  .diag-table { width:100%; border-collapse:collapse; font-size:13px; display:none; }
  .diag-table th { position:sticky; top:72px; background:var(--surface); text-align:left; padding:10px 8px; font-size:12px; color:var(--text-2); border-bottom:1px solid var(--border); }
  .diag-table td { padding:10px 8px; border-top:1px solid var(--border); vertical-align:top; overflow-wrap:anywhere; }
  .diag-cards { display:grid; gap:8px; }
  @media (min-width:1024px) { .diag-table { display:table; } .diag-cards { display:none; } }
  .diag-card { padding:12px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); display:grid; gap:4px; font-size:13px; }
}

@layer views {
  /* ── Shared additions ── */
  .desk-only { display:none; } @media (min-width:768px) { .desk-only { display:revert; } .phone-only { display:none !important; } }
  .block { display:block; } .seg.block { display:flex; } /* the utility above sits in a later layer than .seg.block, which made full-width segments shrink */ .warn-text { color:var(--warn); font-weight:600; }
  .page-head { margin:4px 0 20px; } .page-head .greet { font-size:30px; line-height:36px; font-weight:700; letter-spacing:-.02em; }
  .thumb-wrap { position:relative; width:44px; height:44px; flex:none; border-radius:12px; overflow:hidden; display:block; }
  .thumb-wrap > * { position:absolute; inset:0; width:100%; height:100%; }
  .ring-link { border-radius:50%; } .ring-link:hover { text-decoration:none; }
  a.link-row { color:inherit; border-radius:var(--r-sm); margin:0 -6px; padding:4px 6px; }
  a.link-row:hover { text-decoration:none; background:var(--surface-2); }
  .compact-home .t { font-weight:600; display:block; }
  .auth-form { display:grid; gap:14px; } .auth-links { justify-content:center; }
  .link-panel p { margin:0; }
  .top-actions { display:flex; gap:8px; align-items:center; }
  .ok-text { color:var(--ok); font-weight:600; } .danger-text { color:var(--danger); font-weight:600; } .accent-text { color:var(--accent); font-weight:600; }
  .h3 { font-size:16px; line-height:22px; font-weight:600; }
  .narrow-col { max-width:760px; }
  .card-tight { padding:4px 16px; } @media (min-width:1024px) { .card-tight { padding:4px 20px; } }
  .err-list { margin:6px 0 0; padding-left:18px; display:grid; gap:2px; }
  .foot-note { margin-top:16px; }
  .filters-3 { display:grid; gap:12px; grid-template-columns:minmax(0,1fr); align-items:end; }
  @media (min-width:640px) { .filters-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .dg-check { align-self:end; }
  .filters-box > summary { list-style:none; cursor:pointer; } .filters-box > summary::-webkit-details-marker { display:none; }
  @media (min-width:640px) { .filters-box > summary { display:none; } }
  .act-row .grow > button { font-weight:400; color:inherit; display:inline; } .act-row .grow > button svg.i { vertical-align:-3px; color:var(--text-3); }
  .spin-sm { width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; flex:none; }
  .delivery .tick.pending { color:var(--text-3); }
  .file-btn { cursor:pointer; position:relative; } .file-btn:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
  .file-btn.busy { opacity:.6; pointer-events:none; }
  .sb-reason { display:block; font-size:12px; font-weight:500; opacity:.8; }
  .savebar-in { display:flex; align-items:center; gap:8px; width:100%; } .savebar-in .grow { font-weight:600; }
  .fix-pill { border:0; border-radius:var(--r-pill); background:var(--danger); color:var(--on-danger); font-weight:700; font-size:13px; min-height:36px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; }

  /* Stays */
  .stay-row { position:relative; }
  .stay-row .row-link { position:absolute; inset:0; border-radius:inherit; z-index:0; }
  .stay-row .row-link:focus-visible { outline-offset:-2px; }
  .stay-row > :not(.row-link) { position:relative; z-index:1; pointer-events:none; }
  .stay-row .add-name, .stay-row .name-edit, .stay-row .name-edit * { pointer-events:auto; }
  .stay-row.editing { align-items:flex-start; }
  .chip-text { font-weight:600; background:none !important; }
  .chip-text.t-neutral { color:var(--text-2); }
  .link-ico { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; }
  .sync-row { margin:-8px 0 8px; } .sync-note { margin-bottom:12px; }
  .md .toolbar { grid-template-columns:minmax(0,1fr); }
  .sec-delivery:empty, .sec-errors:empty, .sec-bar:empty, .stack > div:empty, .stack-lg > div:empty { display:none; }
  .md-detail .card { max-height:calc(100dvh - 120px); overflow:auto; }
  .stay-sheet .dl { font-size:14px; }

  /* Tablets */
  .fleet-meta { margin-top:4px; gap:8px; }
  .group-note { margin:-4px 0 8px; }
  .state-big { display:grid; gap:6px; justify-items:start; padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2); }
  .tablet-sheet .card-tight { padding:0 12px; }
  fieldset { border:0; margin:0; padding:0; min-width:0; }
  .set-group { display:grid; gap:12px; padding-top:8px; } .set-group legend { margin-bottom:8px; }
  .tablet-cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
  .tablet-card { display:grid; gap:12px; }
  .steps-list { margin:0; padding-left:20px; display:grid; gap:6px; }
  .code-pill .icon-btn { width:36px; height:36px; }

  /* Guest info */
  @media (min-width:1280px) { .preview-btn { display:none; } }
  .phone.in-sheet { margin:0 auto; height:min(780px,calc(100dvh - 140px)); }
  .with-preview > .preview-col .eyebrow { margin-bottom:8px; }
  .fav-list { display:grid; gap:8px; }
  .fav-row.has-error { border-color:var(--danger); }
  .fav-row summary .handle { width:36px; height:44px; display:grid; place-items:center; border:0; background:none; }
  .fav-row summary .t { font-weight:600; }
  .fav-row summary > .chev { color:var(--text-3); transition:transform var(--m-fast); }
  .fav-row details[open] summary > .chev { transform:rotate(180deg); }
  .addr { position:relative; }
  .addr-list { position:absolute; z-index:20; left:0; right:0; top:76px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-3); padding:6px; display:grid; max-height:280px; overflow:auto; }
  .addr-opt { display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:8px; cursor:pointer; min-height:44px; }
  .addr-opt:hover, .addr-opt:focus { background:var(--surface-2); outline:none; }
  .addr-opt > svg.i { color:var(--text-3); margin-top:2px; }
  .addr-none { padding:10px; }
  .zoom-range { width:100%; accent-color:var(--accent); min-height:44px; }

  /* Guide */
  .guide-list .card-head { align-items:center; }
  .sec-list { display:grid; gap:2px; }
  .sec-row .open { color:inherit; }
  .name-tile { font-size:12px; font-weight:700; letter-spacing:-.02em; overflow:hidden; }
  .sm-tile { width:32px; height:32px; border-radius:9px; }
  .icon-pick { justify-content:flex-start; width:max-content; max-width:100%; padding-left:6px; }
  .icon-pick .tile { width:32px; height:32px; border-radius:8px; }
  .icon-pick .tile svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .tile svg { stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .blocks { display:grid; gap:0; }
  .blocks > .block-card + .block-card { margin-top:12px; }
  .blocks > .insert { margin:4px 0; }
  .img-block { display:flex; gap:12px; align-items:flex-start; }
  .img-thumb { width:96px; height:72px; border-radius:10px; object-fit:cover; background:var(--surface-2); flex:none; display:grid; place-items:center; color:var(--text-3); }
  .legacy-card h2 { display:flex; gap:8px; align-items:baseline; }
  .phone-preview-wrap { display:grid; justify-items:center; }
  .tpl-check { align-items:center; border-top:1px solid var(--border); }
  .tpl-check:first-of-type { border-top:0; }
  .copy-home { padding-bottom:12px; }
  .rv-icon { background:var(--accent-soft); color:var(--accent); flex:none; }
  .rv-icon svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .icon-cell svg { stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; width:24px; height:24px; }
  .sec-row .tile svg, .tile svg { width:20px; height:20px; }
  .guide-preview-col .phone, .preview-col .phone { position:relative; }

  /* Climate */
  .summary-line { font-size:16px; }
  .stepper .num-input { width:64px; border:0; background:transparent; text-align:center; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; min-height:44px; color:var(--text); }
  .stepper .num-input:focus { outline:2px solid var(--accent); outline-offset:-2px; }
  .ends .stepper { width:max-content; }

  /* Turnovers, team, releases, diagnostics */
  .month-nav { margin-bottom:12px; }
  .not-linked { margin-top:16px; }
  .member-row .t { font-weight:600; }
  .member-actions .btn { justify-self:start; }
  .rel-row .seg { max-width:100%; }
  .rollout { padding-top:4px; }
  .diag-wrap { display:none; } @media (min-width:1024px) { .diag-wrap { display:block; overflow:visible; } }
  .diag-table th { top:72px; }
}

@layer preview {
  /* The phone preview uses the guest app's own tokens (guest/public/s/app.css), not the admin's. */
  .phone-preview { --bg:#eef1f0; --surface:#ffffff; --surface-2:#f5f7f6; --sunken:#e3e8e6; --ink:#0e1816; --ink-2:#2f3d3a; --muted:#5f6e6a; --line:rgba(14,24,22,.09);
    --accent:#0f6aa6; --accent-ink:#ffffff; --accent-soft:rgba(15,106,166,.10); --ok:#17804f; --ok-soft:rgba(23,128,79,.12); --warn:#b45c0a; --warn-soft:rgba(180,92,10,.12);
    --danger:#c03838; --danger-soft:rgba(192,56,56,.10); --shadow:0 1px 2px rgba(14,24,22,.05),0 10px 28px -16px rgba(14,24,22,.25); --r-card:22px;
    font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--ink); min-height:100%; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone-preview { --bg:#090f10; --surface:#121a1c; --surface-2:#172124; --sunken:#0d1416; --ink:#ecf2f1; --ink-2:#c3cecc; --muted:#8c9c99; --line:rgba(255,255,255,.08);
    --accent:#6ab5ea; --accent-ink:#03263b; --accent-soft:rgba(106,181,234,.14); --ok:#4fc58c; --ok-soft:rgba(79,197,140,.14); --warn:#f2a254; --warn-soft:rgba(242,162,84,.14); --danger:#f17575; --danger-soft:rgba(241,117,117,.12); --shadow:0 0 0 1px rgba(255,255,255,.04); } }
  :root[data-theme="dark"] .phone-preview { --bg:#090f10; --surface:#121a1c; --surface-2:#172124; --sunken:#0d1416; --ink:#ecf2f1; --ink-2:#c3cecc; --muted:#8c9c99; --line:rgba(255,255,255,.08);
    --accent:#6ab5ea; --accent-ink:#03263b; --accent-soft:rgba(106,181,234,.14); --ok:#4fc58c; --ok-soft:rgba(79,197,140,.14); --warn:#f2a254; --warn-soft:rgba(242,162,84,.14); --danger:#f17575; --danger-soft:rgba(241,117,117,.12); --shadow:0 0 0 1px rgba(255,255,255,.04); }
  .phone-preview svg.i { width:22px; height:22px; }
  .pp-hero { position:relative; height:330px; color:#fff; overflow:hidden; background:linear-gradient(160deg,#1d4f6b,#0e2a33 55%,#0a1a1f); }
  .pp-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
  .pp-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,10,12,.4) 0%,rgba(4,10,12,0) 28%,rgba(4,10,12,.05) 48%,rgba(4,10,12,.74) 100%); }
  .pp-hero .top { position:absolute; z-index:2; top:44px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:14px; }
  .pp-hero .help { height:36px; padding:0 14px 0 10px; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; }
  .pp-hero .copy { position:absolute; z-index:2; left:20px; right:20px; bottom:44px; }
  .pp-hero .eyebrow2 { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.85; margin:0 0 10px; }
  .pp-hero h1 { font-size:34px; line-height:1.05; font-weight:800; letter-spacing:-.025em; }
  .pp-panel { position:relative; margin-top:-24px; border-radius:26px 26px 0 0; background:var(--bg); padding:20px 16px 24px; display:grid; gap:12px; z-index:3; }
  .pp-card { background:var(--surface); border-radius:var(--r-card); padding:16px; box-shadow:var(--shadow); display:grid; gap:10px; }
  .pp-row { display:flex; align-items:center; gap:12px; }
  .pp-badge { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:none; }
  .pp-badge.warn { background:var(--warn-soft); color:var(--warn); }
  .pp-label { font-size:12.5px; font-weight:600; color:var(--muted); }
  .pp-title { font-size:17px; line-height:1.25; font-weight:700; letter-spacing:-.01em; }
  .pp-sub { font-size:14px; color:var(--muted); }
  .pp-pass { display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:17px; font-weight:600; background:var(--surface-2); border:1px dashed var(--line); border-radius:14px; padding:10px 10px 10px 14px; }
  .pp-pass > span:first-child { overflow-wrap:anywhere; min-width:0; }
  .pp-copy { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font:700 13.5px/1 system-ui,-apple-system,sans-serif; flex:none; }
  .pp-copy svg.i { width:16px; height:16px; }
  .pp-btn { height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; background:var(--accent); color:var(--accent-ink); font-size:15px; }
  .pp-btn.ghost { background:var(--accent-soft); color:var(--accent); }
  .pp-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .pp-head { padding:56px 20px 12px; }
  .pp-head h1 { font-size:30px; line-height:1.1; font-weight:800; letter-spacing:-.02em; }
  .pp-head p { color:var(--muted); margin-top:6px; font-size:15px; }
  .pp-search { margin-top:14px; height:44px; border-radius:14px; background:var(--surface); box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; padding:0 14px; color:var(--muted); font-size:15px; }
  .pp-search input { border:0; background:none; flex:1; font:inherit; color:var(--ink); min-width:0; outline:none; }
  .pp-body { padding:4px 16px 28px; display:grid; gap:18px; }
  .pp-group h3 { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 4px 8px; }
  .pp-list { background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow); overflow:hidden; }
  .pp-lrow { display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--line); width:100%; text-align:left; border-left:0; border-right:0; border-bottom:0; background:none; color:inherit; font:inherit; cursor:pointer; }
  .pp-lrow:first-child { border-top:0; }
  .pp-lrow .t { font-weight:650; font-size:15.5px; } .pp-lrow .s { font-size:13.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pp-lrow .chev { color:var(--muted); }
  .pp-sheet { padding:56px 18px 28px; display:grid; gap:14px; font-size:15.5px; line-height:1.5; }
  .pp-sheet .back { display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:600; border:0; background:none; padding:0; font:inherit; cursor:pointer; }
  .pp-sheet h2 { font-size:24px; line-height:1.15; font-weight:800; letter-spacing:-.02em; }
  .pp-sheet .kicker { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .pp-sheet p { margin:0; white-space:pre-line; }
  .g-list, .g-steps { margin:0; padding-left:22px; display:grid; gap:8px; }
  .g-list li::marker { color:var(--accent); }
  .g-steps li { padding-left:4px; } .g-steps li::marker { color:var(--accent); font-weight:700; }
  .g-callout { display:flex; gap:12px; align-items:flex-start; border-radius:16px; padding:14px; background:var(--accent-soft); }
  .g-callout svg.i { color:var(--accent); margin-top:1px; }
  .g-callout b { display:block; margin-bottom:2px; }
  .g-callout.warning { background:var(--warn-soft); } .g-callout.warning svg.i { color:var(--warn); }
  .g-callout.danger { background:var(--danger-soft); } .g-callout.danger svg.i { color:var(--danger); }
  .g-kv { display:grid; gap:2px; } .g-kv b { font-variant-numeric:tabular-nums; } .g-kv small { color:var(--muted); }
  .g-img { margin:0; display:grid; gap:6px; } .g-img img { width:100%; border-radius:16px; background:var(--surface-2); min-height:120px; object-fit:cover; } .g-img figcaption { font-size:13px; color:var(--muted); }
  .g-img .ph { height:160px; border-radius:16px; background:var(--surface-2); display:grid; place-items:center; color:var(--muted); font-size:13px; }
  .pp-chips { display:flex; gap:8px; overflow:hidden; margin-top:12px; }
  .pp-chip { flex:none; height:34px; padding:0 14px; border-radius:999px; background:var(--surface); box-shadow:var(--shadow); display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; }
  .pp-chip.on { background:var(--ink); color:var(--bg); }
  .pp-place { display:flex; gap:12px; align-items:flex-start; background:var(--surface); border-radius:var(--r-card); padding:14px; box-shadow:var(--shadow); }
  .pp-place .t { font-weight:700; } .pp-place .d { font-size:13.5px; color:var(--muted); display:block; } .pp-place .dist { margin-left:auto; font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; }
  .pp-check { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--line); font-size:15px; }
  .pp-check:first-child { border-top:0; }
  .pp-check i { width:22px; height:22px; border-radius:50%; border:2px solid var(--line); flex:none; margin-top:1px; }
  .pp-warn { color:var(--danger); font-weight:600; }
  /* Controls tab, climate card: mirrors guest/public/s/app.css (.ctl-head, .climate-main, .stepper, .round, .seg). */
  .pp-head .pp-live { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--ok); }
  .pp-live i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px var(--ok-soft); }
  .pp-ctl-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .pp-state { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--surface-2); color:var(--warn); }
  .pp-state.cool { color:var(--accent); }
  .pp-state::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
  .pp-climate { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; }
  .pp-indoor .t { font-size:52px; line-height:.95; font-weight:800; letter-spacing:-.04em; }
  .pp-indoor .pp-fine { margin-top:6px; }
  .pp-temp { display:flex; align-items:center; gap:8px; }
  .pp-temp .val { text-align:center; min-width:62px; }
  .pp-temp .val b { display:block; font-size:28px; line-height:1; font-weight:800; letter-spacing:-.02em; }
  .pp-temp .val span { font-size:12px; color:var(--muted); font-weight:600; }
  .pp-round { width:44px; height:44px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); }
  .pp-round.off { opacity:.35; }
  .pp-seg { display:flex; background:var(--sunken); border-radius:12px; padding:3px; margin-top:6px; }
  .pp-seg span { flex:1; text-align:center; padding:8px; border-radius:10px; font-weight:600; font-size:14px; color:var(--muted); }
  .pp-seg span.on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
  .pp-fine { font-size:13.5px; color:var(--muted); }
}

/* ── Review fixes (test-customer / test-breaker findings). Same layer as the views they adjust. ── */
@layer views {
  /* UT-03: section titles stay readable in the three-column builder; the Sample badge sits under the title. */
  .sec-row .sec-text { min-width:0; }
  .sec-row .t { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; }
  .sec-row .sec-text .sample { margin-top:4px; }
  .sec-row .open { position:relative; }
  .sec-row .err-dot { position:absolute; left:32px; top:6px; width:10px; height:10px; box-shadow:0 0 0 2px var(--surface); }
  @media (min-width:1024px) { .sec-row .icon-btn { width:36px; min-width:36px; } .sec-row .handle { width:26px; } }
  @media (min-width:1280px) {
    .guide { grid-template-columns:300px minmax(0,1fr) 340px; }
    .guide-preview-col .phone { width:100%; }
  }
  @media (min-width:1600px) { .guide { grid-template-columns:300px minmax(0,1fr) 380px; } }

  /* UT-04: the phone Preview fits inside the 16px gutters; small screens drop most of the bezel. */
  .phone-preview-wrap { grid-template-columns:minmax(0,1fr); }
  .phone-preview-wrap .phone { width:100%; max-width:380px; justify-self:center; }
  @media (max-width:430px) {
    .phone-preview-wrap .phone { padding:5px; border-radius:34px; height:calc(100dvh - var(--bar-h) - var(--nav-h) - 120px); }
    .phone-preview-wrap .phone-screen { border-radius:30px; }
  }

  /* UT-20: toasts never cover a save bar; on desktop they sit in the corner, clear of the editor. */
  body:has(.savebar) .toasts { bottom:calc(var(--nav-h) + var(--safe-b) + 84px); }
  @media (min-width:768px) {
    body:has(.savebar) .toasts { bottom:92px; }
  }
  @media (min-width:1024px) {
    .toasts { left:auto; right:24px; transform:none; width:min(400px,calc(100vw - 48px)); }
  }

  /* UT-21: the full banner only on Overview; the other tabs get a compact header. */
  .home-banner.compact { height:64px; border-radius:var(--r-md); }
  @media (min-width:1024px) { .home-banner.compact { height:64px; } }
  .home-banner.compact .copy { bottom:auto; top:50%; transform:translateY(-50%); }
  .home-banner.compact .copy h2 { font-size:17px; line-height:22px; }
  .home-banner.compact .copy p { font-size:12.5px; line-height:16px; }
  .home-banner.compact .icon-btn { top:50%; transform:translateY(-50%); }
  .home-tabs .tabs { mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent); scroll-padding-inline:24px; }
  @media (min-width:768px) { .home-tabs .tabs { mask-image:none; } }

  /* UT-28: the preview phone keeps a visible frame in dark mode. */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone { background:#252C36; box-shadow:0 0 0 1px #3A4452,var(--sh-3); } }
  :root[data-theme="dark"] .phone { background:#252C36; box-shadow:0 0 0 1px #3A4452,var(--sh-3); }
  .sheet-head h2:focus, .sheet-head h2:focus-visible { outline:none; box-shadow:none; }

  /* UT-32: the icon picker keeps its height while you search, with readable labels. */
  .icon-grid-wrap { height:min(440px,48dvh); overflow:auto; align-content:start; }
  .icon-picker .icon-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  @media (min-width:480px) { .icon-picker .icon-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
  @media (min-width:1024px) { .icon-picker .icon-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
  .icon-picker .icon-cell { min-height:68px; }
  .icon-picker .icon-cell span { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-align:center; }

  /* UT-25: sentence-case panel label, link status in words, a neutral booking-channel marker. */
  .link-panel .panel-label { font-size:14px; line-height:20px; font-weight:700; }
  .link-ico { width:auto; height:24px; padding:0 8px 0 6px; gap:4px; display:inline-flex; align-items:center; border-radius:var(--r-pill); font-size:12px; font-weight:600; white-space:nowrap; }
  .src { height:22px; padding:0 8px; border:1px solid var(--border); border-radius:var(--r-pill); font-size:12px; line-height:20px; color:var(--text-2); background:var(--surface); }
  .src::before { display:none; }

  /* UT-24 / UT-08: attention rows on one axis with equal buttons; labelled setup rings. */
  .att { align-items:center; }
  .att .sev { margin-top:0; }
  @media (min-width:768px) { .att .att-btn { min-width:116px; justify-content:center; } }
  .att-more { margin-top:4px; }
  .ring-link { display:inline-flex; flex-direction:column; align-items:center; gap:2px; border-radius:var(--r-sm); }
  .ring-cap { font-size:12px; line-height:14px; font-weight:600; color:var(--text-3); }
  /* UT-10: failing guest controls on the fleet row. */
  .issue-line { display:flex; align-items:center; gap:4px; margin-top:4px; font-weight:600; }
  /* UT-21: shorter tiles on phones, so more than one home fits per screen. */
  @media (max-width:767px) { .home-tile .hero { aspect-ratio:12/5; } }
  /* UT-12: cards size to their content beside the phone preview; the two ends stay on one line. */
  .with-preview { align-items:start; }
  .ends { align-items:start; }
  .end-ctl .hint { margin:0; }
  /* UT-16: a scrolled-to address field clears the sticky top bar and tabs. */
  .field.addr { scroll-margin-top:calc(var(--bar-h) + var(--safe-t) + 56px); }
  .addr-list { scroll-margin-bottom:calc(var(--nav-h) + var(--safe-b) + 96px); }
  /* UT-26: legends line up with the labels above them (browsers pad legends by 2px). */
  fieldset > legend { padding-inline:0; }
  /* UT-15: selects line up with the inputs next to them. */
  select.select:not([multiple]) { height:48px; padding-top:0; padding-bottom:0; }
  /* UT-33: rollout as rows, not one sentence. */
  .rollout-list { display:grid; gap:4px; }
  .rollout-list li { display:flex; gap:12px; padding:6px 0; border-top:1px solid var(--border); }
  .rollout-list li:first-child { border-top:0; }
  /* UT-31: room under the saved confirmation. */
  .section-card .sec-delivery:not(:empty) { margin-bottom:8px; }
  /* UT-24: an odd last home card spans the row instead of sitting alone in a half. */
  @media (min-width:1280px) { .homes-grid > .home-card:last-child:nth-child(odd) { grid-column:1 / -1; } }
}

/* Account → Appearance → Accent: native radios with a swatch of each accent in the current theme. */
@layer views {
  .accent-pick > legend { padding:0; margin-bottom:8px; }
  .accent-opts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .accent-opt { display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-weight:600; cursor:pointer; transition:border-color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); }
  .accent-opt:hover { border-color:var(--border-strong); }
  .accent-opt:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .accent-opt input { margin:0; width:18px; height:18px; flex:none; accent-color:var(--accent); }
  .swatch { width:22px; height:22px; border-radius:50%; flex:none; }
  .swatch-blue { background:#1D5FD1; box-shadow:0 0 0 3px #EAF1FC; }
  .swatch-copper { background:#A4603A; box-shadow:0 0 0 3px #F7EEE8; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .swatch-blue { background:#6EA8FF; box-shadow:0 0 0 3px rgba(110,168,255,.18); }
    :root:not([data-theme="light"]) .swatch-copper { background:#E4A47C; box-shadow:0 0 0 3px rgba(228,164,124,.18); }
  }
  :root[data-theme="dark"] .swatch-blue { background:#6EA8FF; box-shadow:0 0 0 3px rgba(110,168,255,.18); }
  :root[data-theme="dark"] .swatch-copper { background:#E4A47C; box-shadow:0 0 0 3px rgba(228,164,124,.18); }
}