/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE FLAT LOOKS ON THE BOOKING SYSTEM (5 November 2026)

   Every look except Midnight Glass is built from this one layer over ui.css: it takes the glass,
   the photographs behind the panels and the glow away and paints every component in the --lk-*
   tokens of looks/tokens.css. A look's own file (gala.css, gallery.css …) then adds only its
   signature: the frame, the page header, the type and the few moves that make it that look.

   ⛔ Additive re-skin, never a rewrite: no markup changes, every selector here is ui.css's own.
   ⛔ Printed documents (quotes, invoices, booking sheets) render in their own documents and keep
      their design; nothing here reaches them.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the house tokens, re-pointed, so every ui.css rule and every inline style follows the look ── */
html[data-look] {
  --ink: var(--lk-page);
  --panel: var(--lk-card); --panel-solid: var(--lk-pop); --card: var(--lk-card); --navy: var(--lk-rail); --title: var(--lk-ink);
  --fog: var(--lk-ink); --fog-80: var(--lk-ink-2); --fog-70: var(--lk-ink-2); --fog-50: var(--lk-mute); --fog-40: var(--lk-mute); --fog-30: var(--lk-mute);
  --volt: var(--lk-acc-text); --volt-hi: var(--lk-act); --volt-lo: var(--lk-act); --volt-ink: var(--lk-act-ink);
  --volt-soft: var(--lk-acc-soft); --volt-glow: transparent;
  --amber: var(--lk-money); --amber-glow: transparent;
  --glass: var(--lk-card); --glass-2: var(--lk-card-2);
  --stroke: var(--lk-line); --stroke-2: var(--lk-line-2);
  --ok: var(--lk-ok); --good: var(--lk-good); --warn: var(--lk-warn); --bad: var(--lk-bad); --info: var(--lk-info); --viol: var(--lk-viol);
  --r: var(--lk-r-card); --r-lg: var(--lk-r-card); --pill: 999px;
  --shadow: var(--lk-shadow-pop); --shadow-sm: var(--lk-shadow-card); --glow: 0 0 0 transparent;
}

/* ───────────────────────── base ───────────────────────── */
html[data-look] body { background: var(--lk-page); color: var(--lk-ink); font-family: var(--font-b); font-size: 14px; line-height: 1.45; }
html[data-look] h1, html[data-look] h2, html[data-look] h3, html[data-look] h4 { font-family: var(--font-d); color: var(--lk-ink); }
html[data-look] ::selection { background: var(--lk-acc-soft); color: var(--lk-ink); }
html[data-look] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--lk-ink) 18%, transparent); }
html[data-look] ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--lk-ink) 30%, transparent); }
html[data-look] #ambient, html[data-look] #film { display: none; }
html[data-look] a:focus-visible, html[data-look] button:focus-visible, html[data-look] input:focus-visible, html[data-look] select:focus-visible,
html[data-look] textarea:focus-visible, html[data-look] [tabindex]:focus-visible { outline: 2px solid var(--lk-focus); outline-offset: 2px; }
html[data-look] .muted { color: var(--lk-mute); }
html[data-look] .mini, html[data-look] .tbl td .sub2 { color: var(--lk-mute); }
html[data-look] .hr { border-top-color: var(--lk-line); }

/* sentence case: these looks never set small labels in spaced capitals */
html[data-look] #app .kick, html[data-look] #app .lbl, html[data-look] #app .tbl thead th, html[data-look] #app .chip, html[data-look] #app .fld label,
html[data-look] #app .panel-h h3, html[data-look] #app .fsec-h h3, html[data-look] #app .fglabel, html[data-look] #app .sync, html[data-look] #app .tag-pill,
html[data-look] #app .stat-row .sc .l, html[data-look] #app .bkj-label, html[data-look] #app .invline-head, html[data-look] .sf-steps span, html[data-look] .sf-kv span,
html[data-look] #rail .group, html[data-look] #rail .logo .sys, html[data-look] #login .tag, html[data-look] .donut .dctl, html[data-look] .bkhero .kick,
html[data-look] #modal-root .fld label, html[data-look] #modal-root .panel-h h3, html[data-look] #modal-root .chip { text-transform: none; letter-spacing: 0; }

/* ───────────────────────── surfaces: no glass, no photograph, no glow ───────────────────────── */
html[data-look] .glass { background: var(--lk-card); backdrop-filter: none; -webkit-backdrop-filter: none; border: var(--lk-card-edge); border-radius: var(--lk-r-card); box-shadow: var(--lk-shadow-card); }
html[data-look] .glass::before { display: none; }
html[data-look] .glass.lift { transition: box-shadow .22s ease, border-color .22s ease; }
@media (hover: hover) { html[data-look] .glass.lift:hover { transform: none; border-color: var(--lk-line-2); box-shadow: var(--lk-shadow-lift); } }
html[data-look] .glass.photo { background: var(--lk-card); }
html[data-look] .panel { padding: 20px 22px; }
html[data-look] .panel-h h3, html[data-look] .panel > h3 { font-size: var(--lk-h3-size); font-weight: var(--lk-h3-weight); color: var(--lk-ink); letter-spacing: -0.01em; }
html[data-look] .panel-h h3 svg { stroke: var(--lk-mute); }
html[data-look] .panel-h .more { color: var(--lk-acc-text); font-weight: 600; font-size: 13.5px; }
html[data-look] .panel-h .more:hover { text-shadow: none; text-decoration: underline; }

/* ───────────────────────── the frame: a flush rail on the left, a plain bar on top ───────────────────────── */
html[data-look] #rail { left: 0; top: 0; bottom: 0; width: 244px; padding: 16px 12px 12px; background: var(--lk-rail); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-right: 1px solid var(--lk-line); border-radius: 0; box-shadow: none; }
html[data-look] #rail .logo { padding: 6px 10px 18px; gap: 10px; flex-direction: column; align-items: flex-start; }
html[data-look] #rail .logo img { height: 32px; width: auto; filter: var(--lk-logo-filter); }
html[data-look] #rail nav { scrollbar-width: thin; scrollbar-color: transparent transparent; }
html[data-look] #rail nav:hover { scrollbar-color: color-mix(in srgb, var(--lk-ink) 22%, transparent) transparent; }
html[data-look] #rail nav::-webkit-scrollbar { width: 6px; }
html[data-look] #rail nav::-webkit-scrollbar-thumb { background: transparent; }
html[data-look] #rail nav:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--lk-ink) 22%, transparent); }
html[data-look] #rail .logo .sys { font-size: 12px; font-weight: 500; color: var(--lk-mute); margin-top: 0; }
html[data-look] #rail .group { font-size: 12px; font-weight: 500; color: var(--lk-mute); padding: 16px 10px 6px; }
html[data-look] .rl { gap: 12px; padding: 8px 10px; margin: 1px 0; border-radius: 10px; border: 0; color: var(--lk-ink-2); font-size: 14px; font-weight: 500; box-shadow: none; min-height: 38px; }
html[data-look] .rl svg { width: 17px; height: 17px; stroke-width: 1.7; opacity: 1; stroke: var(--lk-mute); }
@media (hover: hover) { html[data-look] .rl:hover { background: var(--lk-card-2); color: var(--lk-ink); } }
html[data-look] .rl.on { background: var(--lk-card-2); color: var(--lk-ink); font-weight: 600; border: 0; box-shadow: none; }
html[data-look] .rl.on svg { stroke: var(--lk-ink); }
html[data-look] .rl .count { background: var(--lk-acc-fill); color: var(--lk-acc-ink); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
html[data-look] #rail .foot { border-top: 1px solid var(--lk-line); }
html[data-look] #rail .user .av { background: var(--lk-ink); color: var(--lk-page); box-shadow: none; font-family: var(--font-d); }
html[data-look] #rail .user .nm { color: var(--lk-ink); }
html[data-look] #rail .user .rl-role { color: var(--lk-mute); }
html[data-look] #rail .user button { color: var(--lk-mute); }
html[data-look] #rail .user button:hover { color: var(--lk-bad); background: var(--lk-card-2); }
html[data-look] #main { margin-left: 244px; padding: 0 0 56px; }
html[data-look] #topbar, html[data-look] #topbar.glass { position: sticky; top: 0; z-index: 30; margin: 0 0 8px; padding: 12px 32px; gap: 12px; min-height: 64px;
  background: var(--lk-bar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0; border-bottom: 1px solid var(--lk-line); border-radius: 0; box-shadow: none; }
html[data-look] #topbar .search { height: 40px; padding: 0 14px; background: var(--lk-sunk); border: 1px solid var(--lk-line-2); border-radius: 999px; color: var(--lk-mute); box-shadow: none; }
html[data-look] #topbar .search:hover, html[data-look] #topbar .search:focus-within { border-color: var(--lk-field); box-shadow: var(--lk-shadow-menu); }
html[data-look] #topbar .search svg { opacity: 1; color: var(--lk-mute); width: 16px; height: 16px; }
html[data-look] #topbar .search input { color: var(--lk-ink); }
html[data-look] #topbar .search input::placeholder { color: var(--lk-mute); opacity: 1; }
html[data-look] #topbar .search kbd { color: var(--lk-mute); border-color: var(--lk-line-2); background: var(--lk-card-2); }
html[data-look] .sync { height: 38px; padding: 0 10px; border: 0; background: transparent; color: var(--lk-mute); font-size: 13px; font-weight: 500; }
html[data-look] .sync .dot { box-shadow: none; }
html[data-look] #menu-btn { background: var(--lk-card); border: 1px solid var(--lk-line-2); color: var(--lk-ink); border-radius: 50%; width: 40px; height: 40px; }
html[data-look] #view { max-width: 1320px; padding: 16px 32px 0; }

/* ───────────────────────── page headers: a big title, no photograph ───────────────────────── */
html[data-look] .band { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 6px 0 4px; margin-bottom: 22px; overflow: visible; }
html[data-look] .band .kick { color: var(--lk-mute); text-shadow: none; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
html[data-look] .band h1 { font-size: var(--lk-title-size); font-weight: var(--lk-title-weight); letter-spacing: var(--lk-title-track); color: var(--lk-ink); line-height: 1.15; }
html[data-look] .band .sub { color: var(--lk-mute); font-size: 14.5px; margin-top: 8px; max-width: 760px; }
html[data-look] .band .stats { gap: 8px; margin-top: 16px; }
html[data-look] .band .bstat { background: var(--lk-card); border: 1px solid var(--lk-line); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 999px;
  padding: 7px 14px; color: var(--lk-mute); font-size: 13.5px; }
html[data-look] .band .bstat b { color: var(--lk-ink); font-family: var(--font-d); font-weight: 700; }
html[data-look] .band .actions { top: 2px; right: 0; }
html[data-look] .band .check { color: var(--lk-ink) !important; }
html[data-look] .dash-hello { color: var(--lk-ink) !important; text-shadow: none !important; }
/* the compact photo heroes keep their photograph (a booking's event, the new booking's summary): a rounded picture, words under a soft fade */
html[data-look] .bkhero { border: 0; border-radius: var(--lk-r-card); box-shadow: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .86) 100%), var(--lk-photo, none) center / cover no-repeat #1b1b1b; }
html[data-look] .bkhero .kick { color: #ffffff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); font-weight: 600; }
html[data-look] .bkhero h2 { color: #ffffff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
html[data-look] .bkhero .hpill, html[data-look] .bkhero .hclose { background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .28); color: #ffffff; }
html[data-look] .nb-sumhero { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 100%), var(--lk-photo, none) center / cover no-repeat #1b1b1b; border: 0; }

/* ───────────────────────── buttons ───────────────────────── */
html[data-look] .btn { font-family: var(--font-b); font-weight: var(--lk-btn-weight); font-size: 14px; padding: 10px 18px; border-radius: var(--lk-r-btn); letter-spacing: 0;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
html[data-look] .btn:active:not(:disabled) { transform: scale(.98); }
html[data-look] .btn-sm { padding: 8px 14px; font-size: 13.5px; }
html[data-look] .btn-volt { background: var(--lk-act); color: var(--lk-act-ink); box-shadow: none; border-color: transparent; }
html[data-look] .btn-volt:hover:not(:disabled) { background: var(--lk-act-hover); transform: none; box-shadow: none; }
html[data-look] .btn-volt svg { stroke: currentColor; }
html[data-look] .btn-glass { background: var(--lk-card); border: 1px solid var(--lk-line-2); color: var(--lk-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look] .btn-glass:hover:not(:disabled) { transform: none; background: var(--lk-card-2); border-color: var(--lk-field); box-shadow: none; }
html[data-look] .btn-glass.on { background: var(--lk-sel); color: var(--lk-sel-ink); border-color: var(--lk-sel); }
html[data-look] .btn-ghost { color: var(--lk-ink-2); }
html[data-look] .btn-ghost:hover:not(:disabled) { color: var(--lk-ink); background: var(--lk-card-2); }
html[data-look] .btn-back { background: var(--lk-card); border: 1px solid var(--lk-line-2); color: var(--lk-ink); }
html[data-look] .btn-danger { background: var(--lk-card); border: 1px solid var(--lk-bad); color: var(--lk-bad); }
html[data-look] .btn-danger:hover:not(:disabled) { background: var(--lk-bad-fill); border-color: var(--lk-bad-fill); color: #ffffff; }
html[data-look] .btn:disabled { opacity: .45; }

/* ───────────────────────── status: a dot and the word ───────────────────────── */
html[data-look] .chip { --dot: var(--lk-mute); color: var(--lk-ink); background: var(--lk-card); border: 1px solid var(--lk-line-2); border-radius: var(--lk-r-chip);
  font-size: 12px; font-weight: 600; padding: 3px 10px 3px 8px; box-shadow: none; }
html[data-look] .chip::before { background: var(--dot); box-shadow: none; width: 7px; height: 7px; }
html[data-look] .c-new { --dot: var(--lk-acc); }
html[data-look] .c-pending, html[data-look] .c-awaiting { --dot: #e7a417; }
html[data-look] .c-assigned { --dot: var(--lk-info); }
html[data-look] .c-transit { --dot: var(--lk-ok); }
html[data-look] .c-delivered, html[data-look] .c-paid { --dot: var(--lk-good); }
html[data-look] .c-invoiced { --dot: var(--lk-viol); }
html[data-look] .c-cancelled { --dot: var(--lk-bad); }
html[data-look][data-theme="light"] .chip { color: var(--lk-ink); }
html[data-look][data-theme="light"] .c-assigned, html[data-look][data-theme="light"] .c-new, html[data-look][data-theme="light"] .c-transit,
html[data-look][data-theme="light"] .c-delivered, html[data-look][data-theme="light"] .c-paid, html[data-look][data-theme="light"] .c-invoiced,
html[data-look][data-theme="light"] .c-cancelled, html[data-look][data-theme="light"] .c-pending, html[data-look][data-theme="light"] .c-awaiting { background: var(--lk-card); }
html[data-look] .tag-pill { border-radius: var(--lk-r-chip); }
html[data-look] .tag-chip { color: var(--lk-ink); border-radius: var(--lk-r-chip); background: color-mix(in srgb, var(--tagc, var(--lk-acc)) 12%, var(--lk-card)); }
html[data-look] .tag-chip::before, html[data-look] .tagdot { box-shadow: none; }
html[data-look] .addref { color: var(--lk-acc-text); border-color: var(--lk-line-2); background: var(--lk-card); }

/* ───────────────────────── fields ───────────────────────── */
html[data-look] .fld label { font-size: 13px; font-weight: 600; color: var(--lk-ink); }
html[data-look] .fld input, html[data-look] .fld select, html[data-look] .fld textarea, html[data-look] .ta-input,
html[data-look] .invline input, html[data-look] .invline textarea, html[data-look] #nb-paste, html[data-look] #src-new {
  background-color: var(--lk-sunk); border: 1px solid var(--lk-field); border-radius: var(--lk-r-field); color: var(--lk-ink); }
html[data-look] .fld input:focus, html[data-look] .fld select:focus, html[data-look] .fld textarea:focus, html[data-look] .ta-input:focus,
html[data-look] .invline input:focus, html[data-look] .invline textarea:focus {
  background-color: var(--lk-sunk); border-color: var(--lk-focus); box-shadow: 0 0 0 1px var(--lk-focus); }
html[data-look] .fld input::placeholder, html[data-look] .fld textarea::placeholder, html[data-look] .ta-input::placeholder, html[data-look] .fbar .fsearch input::placeholder { color: var(--lk-mute); opacity: 1; }
html[data-look] .fld select option, html[data-look] .fsel option { background: var(--lk-pop); color: var(--lk-ink); }
html[data-look] .fld .sub { color: var(--lk-mute); }
html[data-look] .fld .req { color: var(--lk-bad); }
html[data-look] .fld .check { color: var(--lk-ink-2); }
html[data-look] .fld .check input, html[data-look] .em-pay-panel .check input { accent-color: var(--lk-act); }
html[data-look] input[type="checkbox"] { background-color: var(--lk-sunk); border-color: var(--lk-field); border-radius: 5px; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look] input[type="checkbox"]:checked { background: var(--lk-act); border-color: var(--lk-act); box-shadow: none; }
html[data-look] input[type="checkbox"]:checked::after { border-color: var(--lk-act-ink); }
html[data-look] .fsel { background-color: var(--lk-sunk); border: 1px solid var(--lk-field); color: var(--lk-ink); border-radius: var(--lk-r-btn); }
html[data-look] .fsel.on { background-color: var(--lk-sel); color: var(--lk-sel-ink); border-color: var(--lk-sel); }
html[data-look] .fbar { background-color: transparent; border: 0; padding-left: 0; padding-right: 0; }
html[data-look] .fbar .fsearch { background-color: var(--lk-sunk); border: 1px solid var(--lk-field); border-radius: 999px; }
html[data-look] .fbar .fsearch:focus-within { border-color: var(--lk-focus); box-shadow: 0 0 0 1px var(--lk-focus); }
html[data-look] .fbar .fsearch svg { opacity: 1; color: var(--lk-mute); }
html[data-look] .fbar .fsearch input { color: var(--lk-ink); }
html[data-look] .fbar .fcount { color: var(--lk-mute); }
html[data-look] .ta-menu, html[data-look] .gac-dropdown { background: var(--lk-pop); border: 1px solid var(--lk-line); border-radius: var(--lk-r-tile); box-shadow: var(--lk-shadow-menu); }
html[data-look] .ta-item, html[data-look] .gac-item { border-bottom-color: var(--lk-line); color: var(--lk-ink); }
html[data-look] .ta-item.ta-active, html[data-look] .ta-item:hover, html[data-look] .gac-item:hover { background: var(--lk-card-2); color: var(--lk-ink); }
html[data-look] .ta-new { color: var(--lk-acc-text); }

/* ───────────────────────── filters, tabs, segments: the chosen one is solid ───────────────────────── */
html[data-look] .fpill { background-color: var(--lk-card); color: var(--lk-ink); border: 1px solid var(--lk-line-2); font-size: 13.5px; font-weight: 500; padding: 8px 15px; min-height: 36px; }
@media (hover: hover) { html[data-look] .fpill:hover { border-color: var(--lk-ink); color: var(--lk-ink); } }
html[data-look] .fpill.on { background: var(--lk-sel); color: var(--lk-sel-ink); border-color: var(--lk-sel); box-shadow: none; }
html[data-look] .fglabel { color: var(--lk-mute); font-size: 13px; font-weight: 500; }
html[data-look] .fdiv { background: var(--lk-line-2); }
html[data-look] .tabs { background: none; background-color: transparent; border: 0; border-bottom: 1px solid var(--lk-line); border-radius: 0; padding: 0; gap: 2px; width: 100%; }
html[data-look] .tab { border-radius: 0; background: none; color: var(--lk-mute); font-family: var(--font-b); font-weight: 600; font-size: 14px; padding: 12px 4px; margin-right: 18px;
  border: 0; border-bottom: 2px solid transparent; box-shadow: none; margin-bottom: -1px; min-height: 44px; }
html[data-look] .tab:hover { color: var(--lk-ink); }
html[data-look] .tab.on, html[data-look] .tabs.under .tab.on { background: none; color: var(--lk-ink); border-bottom: 2px solid var(--lk-ink); box-shadow: none; }
html[data-look] .tab.on svg, html[data-look] .tabs.under .tab.on svg { stroke: var(--lk-ink); }
html[data-look] .tab .tcount, html[data-look] .tab.on .tcount { background: var(--lk-card-2); color: var(--lk-ink); border-radius: 999px; padding: 0 6px; opacity: 1; }
html[data-look] .seg { background-color: var(--lk-card-2); border: 0; border-radius: 999px; padding: 3px; }
html[data-look] .seg button { border-radius: 999px; color: var(--lk-ink-2); font-weight: 600; min-height: 34px; }
html[data-look] .seg button:hover { color: var(--lk-ink); }
html[data-look] .seg button.on { background: var(--lk-card); color: var(--lk-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 1px var(--lk-line-2); }
html[data-look] .pill-card { background-color: var(--lk-card); border: 1px solid var(--lk-line-2); color: var(--lk-ink-2); border-radius: var(--lk-r-tile); }
@media (hover: hover) { html[data-look] .pill-card:hover { border-color: var(--lk-ink); color: var(--lk-ink); } }
html[data-look] .pill-card.on { color: var(--lk-ink); border-color: var(--lk-ink); box-shadow: 0 0 0 1px var(--lk-ink); background-color: var(--lk-card); }
html[data-look] .pill-card.big b { color: var(--lk-ink); }
html[data-look] .pill-card.big span { color: var(--lk-mute); }
html[data-look] .pill-card.big.on b { color: var(--lk-ink); }
html[data-look] .pager button { background-color: var(--lk-card); border: 1px solid var(--lk-line-2); color: var(--lk-ink); border-radius: 999px; }
html[data-look] .pager button.on { background: var(--lk-sel); color: var(--lk-sel-ink); border-color: var(--lk-sel); }
html[data-look] .pager .info { color: var(--lk-mute); }

/* ───────────────────────── numbers ───────────────────────── */
html[data-look] .kpi { padding: 20px 22px; }
html[data-look] .kpi .ic, html[data-look] .kpi .ic.money { width: 40px; height: 40px; border-radius: 50%; background: var(--lk-card-2); box-shadow: none; }
html[data-look] .kpi .ic svg, html[data-look] .kpi .ic.money svg { stroke: var(--lk-ink); }
html[data-look] .kpi .num, html[data-look] .kpi .num.money { color: var(--lk-ink); font-family: var(--font-d); font-weight: var(--lk-num-weight); text-shadow: none; letter-spacing: -0.02em; }
html[data-look] .kpi .lbl { font-size: 13.5px; font-weight: 500; color: var(--lk-mute); }
html[data-look] .kpi .delta { color: var(--lk-mute); }
html[data-look] .kpi .delta b { color: var(--lk-good); }
html[data-look] .stat-row .sc .v { color: var(--lk-ink); }
html[data-look] .stat-row .sc .l { color: var(--lk-mute); font-size: 12.5px; font-weight: 500; }
html[data-look] .tick { animation: none; }
html[data-look] .chart .cax { fill: var(--lk-mute); }
html[data-look] .chart .cgrid { stroke: var(--lk-line); }
html[data-look] .donut .dctr { fill: var(--lk-ink); }
html[data-look] .donut .dctl { fill: var(--lk-mute); }
html[data-look] .chart-legend { color: var(--lk-ink-2); }

/* ───────────────────────── tables and rows: hairlines, no bars ───────────────────────── */
html[data-look] .tbl-wrap { border-radius: var(--lk-r-tile); }
html[data-look] .tbl thead th { background: transparent; background-color: transparent; color: var(--lk-mute); font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--lk-line); }
html[data-look] .tbl tbody td { color: var(--lk-ink); border-bottom-color: var(--lk-line); font-size: 14px; }
html[data-look] .tbl tbody tr:hover { background: var(--lk-card-2); }
html[data-look] .tbl tbody tr:hover td:first-child { box-shadow: none; }
html[data-look] .tbl .ref, html[data-look] .tbl td.refcell .refno { color: var(--lk-ink); font-family: var(--font-b); font-weight: 600; font-size: 13.5px; }
html[data-look] .tbl td.refcell .rep { color: var(--lk-acc-text); }
html[data-look] .tbl .money { color: var(--lk-money); }
html[data-look] .tbl th.th-sort:hover { color: var(--lk-ink); }
html[data-look] .tbl th.th-sort.on { color: var(--lk-ink); }
html[data-look] .row { border-bottom-color: var(--lk-line); border-radius: var(--lk-r-tile); }
@media (hover: hover) { html[data-look] .row:hover { background: var(--lk-card-2); } }
html[data-look] .row .t1 { color: var(--lk-ink); font-size: 14px; }
html[data-look] .row .t2 { color: var(--lk-mute); font-size: 13px; }
html[data-look] .feed .ev::before { background: var(--lk-line); }
html[data-look] .feed .ic { background: var(--lk-card-2); border: 0; box-shadow: none; }
html[data-look] .feed .ic svg { stroke: var(--lk-ink); }
html[data-look] .feed .tx { color: var(--lk-ink-2); }
html[data-look] .feed .tx b { color: var(--lk-ink); }
html[data-look] .feed .ago { color: var(--lk-mute); }
html[data-look] .tline .st::before { background: var(--lk-line); }
html[data-look] .tline .dotc { background: var(--lk-card); border-color: var(--lk-line-2); }
html[data-look] .tline .st.done .dotc { background: var(--lk-good); border-color: var(--lk-good); box-shadow: none; }
html[data-look] .tline .st.done .dotc svg { stroke: #ffffff; }
html[data-look] .tline .st.now .dotc { border-color: var(--lk-ink); background: var(--lk-ink); box-shadow: none; animation: none; }
html[data-look] .tline .nm { color: var(--lk-ink); }
html[data-look] .tline .ts { color: var(--lk-mute); }
html[data-look] .kv dt { color: var(--lk-mute); }
html[data-look] .kv dd { color: var(--lk-ink); }
html[data-look] .bkj-stage { background: var(--lk-card); border-color: var(--lk-line-2); }
html[data-look] .bkj-stage.done { border-color: var(--lk-good); background: color-mix(in srgb, var(--lk-good) 8%, var(--lk-card)); }
html[data-look] .bkj-stage.done .bkj-label, html[data-look] .bkj-label { color: var(--lk-ink); }
html[data-look] .bkj-dot { border-color: var(--lk-field); }
html[data-look] .bkj-stage.done .bkj-dot { box-shadow: none; }
html[data-look] .bkj-time, html[data-look] .bkj-meta { color: var(--lk-mute); }
html[data-look] .bkj-note { color: var(--lk-ink-2); }
html[data-look] .invline:not(.invline-head):hover { background: var(--lk-card-2); }
html[data-look] .invline-head { color: var(--lk-mute); font-size: 11.5px; }
html[data-look] .invline .il-tot { color: var(--lk-ink); }
html[data-look] .invline .il-job { color: var(--lk-mute); }
html[data-look] .invline .il-x { color: var(--lk-mute); }
html[data-look] .invprev { background: var(--lk-card-2); }

/* ───────────────────────── quick tiles, empty states, loading ───────────────────────── */
html[data-look] .qa { border-radius: var(--lk-r-card); }
html[data-look] .qa svg { stroke: var(--lk-ink); filter: none; }
html[data-look] .qa .t { color: var(--lk-ink); font-family: var(--font-b); font-size: 14.5px; font-weight: 600; }
html[data-look] .qa .d { color: var(--lk-mute); font-size: 13px; }
html[data-look] .empty .ico { background: var(--lk-card-2); border: 0; box-shadow: none; }
html[data-look] .empty .ico svg { stroke: var(--lk-ink); }
html[data-look] .empty h4 { color: var(--lk-ink); font-size: 16px; }
html[data-look] .empty p { color: var(--lk-mute); font-size: 14px; }
html[data-look] .skel { background: var(--lk-card-2); }
html[data-look] .skel::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lk-card) 60%, transparent), transparent); }

/* ───────────────────────── overlays: solid, rounded, one deep shadow ───────────────────────── */
html[data-look] .overlay { background: var(--lk-scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look] .modal { background: var(--lk-pop); border: 1px solid var(--lk-line); border-radius: var(--lk-r-pop); box-shadow: var(--lk-shadow-pop); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--lk-ink); }
html[data-look] .modal h2 { font-size: 20px; font-weight: 600; color: var(--lk-ink); }
html[data-look] .drawer-overlay { background: var(--lk-scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look] .drawer { background: var(--lk-pop); box-shadow: var(--lk-shadow-pop); border-left: 1px solid var(--lk-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look] .bkmodal-overlay { background: var(--lk-scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look] #palette .modal { border-radius: var(--lk-r-pop); }
html[data-look] #palette input { color: var(--lk-ink); border-bottom-color: var(--lk-line); font-size: 16px; }
html[data-look] #palette .pi { color: var(--lk-ink); }
html[data-look] #palette .pi.on, html[data-look] #palette .pi:hover { background: var(--lk-card-2); color: var(--lk-ink); }
html[data-look] #palette .pi .k { color: var(--lk-mute); border-color: var(--lk-line-2); }
html[data-look] .toast { background: var(--lk-toast); color: var(--lk-toast-ink); border: 0; border-radius: var(--lk-r-tile); box-shadow: var(--lk-shadow-menu); backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 14px; }
html[data-look] .toast.err { background: var(--lk-bad-fill); color: #ffffff; }
html[data-look] .bulkbar { background: var(--lk-toast); border: 0; border-radius: 999px; box-shadow: var(--lk-shadow-pop); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look] .bulkbar .n, html[data-look] .bulkbar .n b { color: var(--lk-toast-ink); }
html[data-look] .bulkbar .sep { background: color-mix(in srgb, var(--lk-toast-ink) 30%, transparent); }
html[data-look] .bulkbar .x { color: var(--lk-toast-ink); }
html[data-look] .bulkbar .btn-glass { background: transparent; border-color: color-mix(in srgb, var(--lk-toast-ink) 50%, transparent); color: var(--lk-toast-ink); }
html[data-look] .bulkbar .btn-danger { background: var(--lk-bad-fill); border-color: var(--lk-bad-fill); color: #ffffff; }

/* ───────────────────────── the send flow (preview → check → sent) and the composer ───────────────────────── */
html[data-look] .sf-steps span { color: var(--lk-mute); background: var(--lk-card); border-color: var(--lk-line-2); font-size: 12px; font-weight: 600; }
html[data-look] .sf-steps span.on { color: var(--lk-sel-ink); background: var(--lk-sel); border-color: var(--lk-sel); }
html[data-look] .sf-kv span { color: var(--lk-mute); font-size: 12px; font-weight: 600; }
html[data-look] .sf-kv b { color: var(--lk-ink); }
html[data-look] .sf-meta, html[data-look] .sf-pdf-link { color: var(--lk-acc-text); }
html[data-look] .sf-frame, html[data-look] .ib-frame { border-color: var(--lk-line-2); }
html[data-look] .sf-attach { background: var(--lk-card-2); border-color: var(--lk-line); }
html[data-look] .em-pay-panel { border-color: var(--lk-line-2); background: var(--lk-card-2); }
html[data-look] .em-pay-panel .check { color: var(--lk-ink); }

/* ───────────────────────── the inbox ───────────────────────── */
html[data-look] .ib-row.on { background: var(--lk-card-2); }
html[data-look] .ib-row .ib-subj { color: var(--lk-ink-2); }
html[data-look] .ib-row.unread .ib-subj { color: var(--lk-ink); }
html[data-look] .ib-dot { background: var(--lk-acc); box-shadow: none; }
html[data-look] .ib-text { color: var(--lk-ink); }

/* ───────────────────────── sign in: a white card on a quiet wall ───────────────────────── */
html[data-look] #login { background: var(--lk-page); }
html[data-look] #login .zoom { display: none; }
html[data-look] #login .card { background: var(--lk-pop); border: 1px solid var(--lk-line); border-radius: var(--lk-r-pop); box-shadow: var(--lk-shadow-pop); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look] #login img.lg { filter: var(--lk-logo-filter); }
html[data-look] #login .tag { color: var(--lk-mute); font-size: 14px; font-weight: 500; }
html[data-look] #login .err { border-radius: var(--lk-r-field); }

/* ───────────────────────── tablets and phones ───────────────────────── */
@media (max-width: 1100px) {
  html[data-look] #rail { transform: translateX(-260px); box-shadow: none; }
  html[data-look] #rail.open { transform: none; box-shadow: var(--lk-shadow-pop); }
  html[data-look] #main { margin-left: 0; padding: 0 0 90px; }
  html[data-look] #topbar, html[data-look] #topbar.glass { padding: 10px 16px; min-height: 58px; }
  html[data-look] #view { padding: 12px 16px 0; }
}
@media (max-width: 560px) {
  html[data-look] .band h1 { font-size: calc(var(--lk-title-size) * .84); }
  html[data-look] .kpi { padding: 15px 16px; }
  html[data-look] #topbar { gap: 8px; }
  html[data-look] #topbar .search { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { html[data-look] .btn, html[data-look] .glass.lift { transition: none; } }