/* Stone Surgeons CRM — pearl glass theme.
   Look only. Loaded last on the signed-in app. The silk photo is /assets/img/crm-silk.webp.
   Customer quote and unsubscribe pages do not load this file. */

:root {
  --ink: #1c2128;
  --navy: #1c2128;
  --blue: #155a9c;
  --blue-d: #0e4478;
  --text: #1c2128;
  --muted: #2a3340;
  --line: rgba(40, 50, 65, .12);
  --err: #9e221c;
  --ok: #14643f;
  --radius: 24px;
  --glass: rgba(255, 255, 255, .32);
  --glass-2: rgba(255, 255, 255, .4);
  --edge: rgba(255, 255, 255, .82);
  --edge-dim: rgba(255, 255, 255, .28);
  --smoke: rgba(36, 40, 46, .88);
  --shadow: 0 18px 44px rgba(55, 65, 80, .16), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .22), inset 0 18px 28px rgba(255, 255, 255, .2);
  --blur: blur(32px) saturate(1.45);
}

html { background: #9aa3ae; color-scheme: light; }
body {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--text);
}

/* Satin: the photo is the light and the troughs. A slow sheen and a fine grain sit on top. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #b7c0cb url("/assets/img/crm-silk.webp") center / cover no-repeat;
  transform: scale(1.08);
}
body::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0%, rgba(255, 255, 255, .45) 18%, transparent 36%),
    linear-gradient(128deg, transparent 48%, rgba(90, 100, 115, .18) 62%, transparent 78%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
  mix-blend-mode: soft-light;
  opacity: .55;
  animation: ss-mist 46s ease-in-out infinite alternate;
}
@keyframes ss-mist {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-3%, 2%, 0); }
}

/* Programmatic focus lands on main after every route. That ring is not a control. */
#main:focus,
#main:focus-visible { outline: none; }

/* ── shared glass ── */
.side, .card, .tile, .auth-card, .modal-box, .sheet, .mobar, .wday, .lane, .unsched,
.qt-areas, .qt-ask, .qt-card, .subtabs, .door-tabs, .note-box, .aud-count, .setrow,
.field-row, .textmenu, .fu, .print-wrap > .acts, .pick-list, .exp-form, .top-search, .avatar,
.mini li, .jcard, .lb-row {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-bottom-color: var(--edge-dim);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.card, .tile, .auth-card, .modal-box, .qt-areas, .wday, .unsched, .note-box, .exp-form, .pick-list {
  border-radius: 26px;
  padding: 22px 24px;
}
.tile { min-height: 118px; padding: 22px 24px 18px; }
.tile b {
  font-family: var(--body);
  font-weight: 650;
  font-stretch: 100%;
  font-size: 40px;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
}
.tile span { color: var(--muted); display: block; margin-top: 8px; }
.tile::after, .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), transparent 36%);
}
.tile, .card, .jcard, .mini li, .wday, .modal-box, .auth-card { position: relative; }
.tile > *, .card > * { position: relative; z-index: 1; }
a.tile { color: inherit; }

h2, .auth h1 {
  font-family: var(--body);
  font-stretch: 100%;
  font-weight: 650;
  text-transform: none;
  letter-spacing: -.03em;
  color: var(--ink);
}
h2 { font-size: 30px; margin-bottom: 18px; }
h3, .card h3, .card h4 { color: var(--ink); }
a { color: var(--blue); }
.muted, .mini .meta, .kv dt, .tile span { color: var(--muted); }

/* ── buttons, fields, focus rings for real controls only ── */
.btn {
  background: linear-gradient(180deg, rgba(62, 68, 76, .92), rgba(28, 32, 38, .94));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px rgba(30, 34, 40, .18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn:hover { background: linear-gradient(180deg, rgba(48, 53, 60, .96), rgba(18, 21, 26, .98)); }
.btn-ghost {
  background: rgba(255, 255, 255, .28);
  color: var(--ink);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(55, 65, 80, .08);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .48); color: var(--ink); }
.btn-danger { background: rgba(255, 255, 255, .3); color: var(--err); border: 1px solid rgba(158, 34, 28, .4); box-shadow: none; }
.btn-danger:hover { background: rgba(253, 236, 234, .72); }
.linkbtn { color: var(--blue); }
.in, .in-sm, textarea.in, select.in {
  background: rgba(255, 255, 255, .38);
  border: 1px solid var(--edge);
  border-bottom-color: var(--edge-dim);
  border-radius: 14px;
  color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 1px 2px rgba(40, 50, 65, .06);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}
.in::placeholder { color: #3a4452; opacity: 1; }
select.in option { background: #f4f6f8; color: var(--ink); }
input[type=checkbox], input[type=radio] { accent-color: #2a3038; }
.in:focus, .btn:focus-visible, .tab:focus-visible, .linkbtn:focus-visible,
.nav-head:focus-visible, .nav-collapse:focus-visible, .ham:focus-visible,
.door-btn:focus-visible, .disp-btn:focus-visible, .top-search input:focus-visible, .avatar:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.btn:focus-visible, .nav-item.on:focus-visible, .tab.sub.on:focus-visible {
  outline: 2px solid #fff;
  box-shadow: 0 0 0 4px #1c2128;
}

/* ── shell ── */
.app-shell { gap: 16px; padding: 16px; min-height: 100vh; align-items: stretch; box-sizing: border-box; }
.content { display: flex; flex-direction: column; min-width: 0; }
main { max-width: none; padding: 2px 2px 48px; }
.side {
  flex: 0 0 268px;
  width: 268px;
  height: calc(100dvh - 32px);
  top: 16px;
  border-radius: 28px;
  color: var(--ink);
  overflow: hidden;
  background: rgba(255, 255, 255, .26);
}
.side-top { display: flex; align-items: center; gap: 8px; padding: 18px 14px 8px 16px; }
.side .brand, .mobar .brand {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 0;
  color: var(--ink); font-family: var(--body); font-stretch: 100%; font-weight: 700;
  font-size: 16px; letter-spacing: -.02em; text-transform: none; line-height: 1.15;
}
.brand-mark { width: 34px; height: 34px; flex: 0 0 34px; color: var(--ink); display: inline-flex; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand small, .brand-text small { display: block; margin: 1px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.nav { min-height: 0; padding: 8px 12px 14px; }
.nav-item, .nav-head {
  color: var(--ink);
  border-radius: 16px;
  padding: 8px 10px;
  gap: 12px;
  min-height: 48px;
}
.nav-group { margin-top: 10px; }
.nav-head { color: var(--muted); font-size: 12px; letter-spacing: .08em; min-height: 36px; }
.nav-item:hover, .nav-head:hover { background: rgba(255, 255, 255, .38); color: var(--ink); }
.nav .icn, .who .btn .icn {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px;
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav .icn svg, .who .btn .icn svg { width: 18px; height: 18px; }
.nav-item.on {
  background: var(--smoke);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px rgba(30, 34, 40, .18);
}
.nav-item.on .icn { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.nav-group.admin .nav-head { color: var(--muted); }
.nav-group.admin .nav-head:hover { background: rgba(255, 255, 255, .3); color: var(--ink); }
.nav-collapse {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 14px;
  border: 1px solid var(--edge); background: rgba(255, 255, 255, .32); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nav-collapse:hover { background: rgba(255, 255, 255, .55); }
.nav-collapse .icn { width: 18px; height: 18px; background: none; border: 0; box-shadow: none; }
html.nav-collapsed .nav-collapse svg { transform: rotate(180deg); }
.side .who { color: var(--ink); border-top: 1px solid rgba(40, 50, 65, .1); gap: 8px; }
.side .who .btn { justify-content: flex-start; background: rgba(255, 255, 255, .28); }
.side .who .btn-ghost, .side .who .btn-ghost:hover { color: var(--ink); }

@media (min-width: 861px) {
  .side { transition: width .22s ease, flex-basis .22s ease; }
  html.nav-collapsed .side { flex-basis: 88px; width: 88px; }
  html.nav-collapsed .side-top { flex-direction: column; padding: 14px 8px 4px; }
  html.nav-collapsed .brand { justify-content: center; flex: 0; }
  html.nav-collapsed .brand-text,
  html.nav-collapsed .nav-txt,
  html.nav-collapsed .who-label,
  html.nav-collapsed .who-name {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  html.nav-collapsed .nav-head { display: none; }
  html.nav-collapsed .nav-sub { display: flex; flex-direction: column; gap: 4px; }
  html.nav-collapsed .nav-item { justify-content: center; padding: 8px; }
  html.nav-collapsed .nav-sub .nav-item { padding-left: 8px; }
  html.nav-collapsed .who { align-items: center; padding: 10px 8px 14px; }
  html.nav-collapsed .who .btn { width: 48px; height: 48px; padding: 0; justify-content: center; }
  html.nav-collapsed .nav-item { position: relative; }
  html.nav-collapsed .nav-badge {
    position: absolute; top: 4px; right: 6px; margin: 0;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px;
  }
}

/* ── top search + avatar ── */
.topbar { display: flex; align-items: center; gap: 12px; margin: 2px 2px 16px; }
.top-search {
  flex: 1; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px;
  border-radius: 999px; margin: 0;
}
.top-search .icn { width: 20px; height: 20px; color: #3a4452; background: none; border: 0; box-shadow: none; }
.top-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; outline: none; height: 100%;
}
.top-search input::placeholder { color: #3a4452; }
.avatar {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 750; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; font-size: 14px;
}

/* ── lists, tables, pills as nested glass ── */
.mini { display: grid; gap: 8px; }
.mini li { border-radius: 16px; list-style: none; }
.mini li + li { border-top: 1px solid var(--edge); }
.mini a { padding: 12px 14px; border-radius: 16px; }
.mini a:hover { background: rgba(255, 255, 255, .28); }
/* One tile per body row. A backdrop-filter on each cell composites a seam, so the
   glass is painted once, on the row, and the cells stay transparent. */
.tbl-wrap {
  background: transparent; border: 0; box-shadow: none; overflow: auto;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0;
  padding: 2px 2px 6px;
}
.tbl-wrap table {
  background: transparent; border-collapse: separate; border-spacing: 0 10px;
  margin-top: -10px; width: 100%;
}
.tbl-wrap th {
  background: transparent; color: var(--muted); border: 0;
  font-size: 12px; letter-spacing: .04em; font-weight: 700;
}
.tbl-wrap td, .tbl-wrap tbody td {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  position: static;
}
@media (min-width: 761px) {
  .tbl-wrap th, .tbl-wrap td { padding: 13px 14px; vertical-align: middle; }
  .tbl-wrap thead th { padding: 0 14px 8px; vertical-align: bottom; }
}
/* The tile is a child of the first cell, positioned against the row.
   A ::before on the row itself is an extra table cell and shifts every column. */
.tbl-wrap tbody tr { position: relative; z-index: 0; }
.tbl-wrap tbody td:first-child::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background: rgba(255, 255, 255, .4);
  border: 1px solid var(--edge);
  border-bottom-color: var(--edge-dim);
  box-shadow: 0 10px 26px rgba(55, 65, 80, .1), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 14px 22px rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}
.tbl-wrap tbody tr:hover td:first-child::before {
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 16px 32px rgba(55, 65, 80, .16), inset 0 1px 0 #fff, inset 0 14px 22px rgba(255, 255, 255, .22);
}
.tbl-wrap tbody tr:focus-visible { outline: none; }
.tbl-wrap tbody tr:focus-visible td:first-child::before { box-shadow: 0 0 0 2px #1c2128, 0 12px 28px rgba(55, 65, 80, .14); }
@media (min-width: 761px) {
  .leads-tbl th.c-check, .leads-tbl td.c-check {
    width: 48px; padding-left: 14px; padding-right: 6px; text-align: center;
  }
  .leads-tbl thead th.c-check { padding-top: 0; padding-bottom: 8px; vertical-align: bottom; }
}
.leads-tbl tbody tr.is-selected td:first-child::before {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 2px rgba(28, 33, 40, .72), 0 12px 28px rgba(55, 65, 80, .14), inset 0 1px 0 #fff;
}
.leads-tbl tbody tr.is-selected:hover td:first-child::before {
  background: rgba(255, 255, 255, .84);
}
.lead-check-ui {
  border-radius: 6px;
  background: rgba(255, 255, 255, .55);
  border: 1.5px solid rgba(40, 50, 65, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(55, 65, 80, .08);
}
.lead-check input:checked + .lead-check-ui {
  background: linear-gradient(180deg, rgba(62, 68, 76, .95), rgba(28, 32, 38, .96));
  border-color: rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.lead-check input:indeterminate + .lead-check-ui { background: rgba(255, 255, 255, .78); border-color: #2a3038; }
.bulk-bar, .bulk-menu {
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--edge);
  border-bottom-color: var(--edge-dim);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}
.bulk-menu {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bulk-item:hover, .bulk-item:focus-visible { background: rgba(40, 50, 65, .08); }
.bulk-item.split { border-top-color: rgba(40, 50, 65, .12); }
.toast { max-width: min(520px, calc(100vw - 24px)); }
.q-items tbody tr:hover td:first-child::before {
  background: rgba(255, 255, 255, .4);
  box-shadow: 0 10px 26px rgba(55, 65, 80, .1), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 14px 22px rgba(255, 255, 255, .18);
}
.pill {
  background: rgba(255, 255, 255, .55);
  color: #1e2833;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff;
}
.st-new, .j-scheduled { background: rgba(228, 233, 239, .85); color: #1a3044; }
.st-contacted, .q-sent, .i-marked_sent, .j-unscheduled, .c-sending { background: rgba(236, 228, 214, .9); color: #5a3b0c; }
.st-quoted, .j-in_progress { background: rgba(232, 228, 240, .9); color: #3c3158; }
.st-bot { background: rgba(220, 236, 232, .9); color: #0d534c; }
.st-founder { background: rgba(224, 230, 242, .9); color: #1d3f78; }
.st-won, .q-approved, .i-marked_paid, .j-completed, .c-sent, .c-printed { background: rgba(214, 236, 222, .92); color: #0f4a2e; }
.st-lost, .q-draft, .i-draft, .j-cancelled, .c-draft { background: rgba(226, 228, 232, .92); color: #2c343e; }
.pr-high { background: rgba(250, 226, 224, .92); color: #8d221c; border-color: rgba(158, 34, 28, .25); }
.q-declined, .i-void { background: rgba(250, 226, 224, .92); color: #8d221c; }
.tag { background: rgba(255, 255, 255, .55); color: #1e3330; border: 1px solid var(--edge); }

.subtabs, .door-tabs { border-radius: 18px; padding: 5px; gap: 4px; background: rgba(255, 255, 255, .22); }
.tab.sub { border-radius: 14px; color: var(--ink); background: transparent; }
.tab.sub:hover { background: rgba(255, 255, 255, .4); }
.tab.sub.on { background: var(--smoke); color: #fff; }

.note-box { color: #1a3044; }
.note-box.ok { background: rgba(214, 236, 222, .55); color: #0f4a2e; }
.note-box.bad { background: rgba(250, 226, 224, .6); color: #8d221c; }
.note-box.warn, .imp, .dup, .offline-bar { background: rgba(255, 236, 210, .55); color: #5c3b0c; }
.offline-bar.is-off { background: rgba(250, 226, 224, .65); color: #8d221c; }
.claim { background: rgba(255, 255, 255, .35); color: #1a3044; border-radius: 16px; }
.tile.warn { background: rgba(252, 228, 226, .45); }
.tile.warn b { color: var(--err); }

.wday.today { box-shadow: inset 0 3px 0 #2a3038, var(--shadow); }
.jcard, .jcard.j-completed, .jcard.j-in_progress, .jcard.j-cancelled {
  background: rgba(255, 255, 255, .4);
  border: 1px solid var(--edge);
  border-left: 4px solid #5c6b7c;
  border-radius: 14px;
}
.jcard.j-completed { border-left-color: var(--ok); }
.jcard.j-in_progress { border-left-color: #5a3cb0; }
.jcard.j-cancelled { border-left-color: #6b7280; opacity: .75; }
.lane, .lb-row { border-radius: 16px; }
.lb-row + .lb-row { border-top: 0; margin-top: 8px; }
.modal, .sheet-back, .qt-ask-back, .print-wrap {
  background: rgba(30, 36, 44, .28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sheet { border-radius: 24px 24px 0 0; }
.toast {
  background: rgba(28, 32, 38, .9); color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.qt-map, .door-map { border-radius: 22px; }
.qt-results { background: rgba(255, 255, 255, .72); border: 1px solid var(--edge); border-radius: 16px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.qt-tools .qt-primary, .qt-tools .qt-primary:hover, .map-bar .btn.on, .map-tool.on { background: #2a3038; color: #fff; border-color: transparent; }
.bars .bar, .cols .c i, .lb-trk i { background: linear-gradient(90deg, rgba(255,255,255,.3), #5d6874); }
.wday-empty { color: var(--muted); }
.leaflet-bar a { background: rgba(255, 255, 255, .82); color: var(--ink); }
.map-tool, .strip-btn, .route-banner { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.print-sheet, .pc-page, .pc-front, .labels, .label, .sig, .qr, .sig-view img {
  background: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none;
  color: #111;
}

/* flowcharts */
#fc-root {
  --bg: transparent;
  --surface: rgba(255, 255, 255, .34);
  --border: rgba(255, 255, 255, .55);
  --border-strong: rgba(40, 50, 65, .2);
  --text: #1c2128;
  --muted: #2a3340;
  --accent: #2a3038;
  --accent-soft: rgba(255, 255, 255, .45);
  color: var(--text);
  background: rgba(255, 255, 255, .22);
  border: 1px solid var(--edge);
  border-radius: 26px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  min-height: calc(100dvh - 120px);
  overflow: hidden;
}
#fc-root .app-header, #fc-root .topbar, #fc-root .palette, #fc-root .panel { background: transparent; color: var(--text); }
#fc-root .brand { color: var(--text); }
#fc-root .tabs button { color: var(--muted); }
#fc-root .tabs button.active, #fc-root .tabs button:hover { color: var(--text); }
#fc-root button.primary, #fc-root .btn.primary, #fc-root .folder-chips button.on { background: #2a3038; color: #fff; border-color: #2a3038; }
#fc-root .canvas-wrap { background: rgba(255, 255, 255, .28); }
#fc-root .card, #fc-root .modal, #fc-root input, #fc-root select, #fc-root textarea { background: rgba(255, 255, 255, .5); color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .tile, .nav-item, .tab.sub, .jcard, .nav-collapse, .avatar, .mini li, .tbl-wrap tbody tr {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .btn:hover:not(:disabled), a.tile:hover, .nav-item:hover, .avatar:hover, .mini li:hover { transform: translateY(-1px); }
  .tbl-wrap tbody tr:hover { transform: translateY(-1px); z-index: 2; }
  .q-items tbody tr:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  .side, .btn, .tile, .nav-item, .card, .jcard, .avatar, .tbl-wrap tbody tr { transition: none !important; }
  .btn:hover, a.tile:hover, .nav-item:hover, .tbl-wrap tbody tr:hover { transform: none !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .side, .card, .tile, .auth-card, .modal-box, .sheet, .mobar, .wday, .lane, .unsched,
  .subtabs, .note-box, .mini li, .jcard, .top-search, .avatar, .in, .tbl-wrap tbody td:first-child::before, .bulk-bar, .bulk-menu, #fc-root {
    background: rgba(246, 247, 249, .94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-item.on, .tab.sub.on, .btn { background: #2a3038; }
}
@media (prefers-reduced-transparency: reduce) {
  .side, .card, .tile, .auth-card, .modal-box, .wday, .mini li, .jcard, .top-search, .in, .tbl-wrap tbody td:first-child::before, .bulk-bar, .bulk-menu, #fc-root {
    background: #f6f7f9;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  .side, .card, .tile, .btn, .nav-item, .in, .top-search {
    background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; backdrop-filter: none;
  }
  .tbl-wrap tbody td:first-child::before { background: Canvas; border: 1px solid CanvasText; box-shadow: none; backdrop-filter: none; }
  .nav-item.on, .btn { background: ButtonFace; color: ButtonText; }
}

.auth { background: transparent; }
.scrim { background: rgba(30, 36, 44, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

@media (max-width: 860px) {
  .app-shell { padding: 0; gap: 0; }
  .side {
    position: fixed; top: 0; left: 0; width: min(300px, 88vw); height: 100dvh;
    border-radius: 0 26px 26px 0; transform: translateX(-105%); transition: transform .22s ease;
  }
  html.nav-collapsed .side { width: min(300px, 88vw); flex-basis: auto; }
  body.nav-open .side { transform: none; }
  .mobar {
    display: flex; position: sticky; top: 8px; z-index: 20; margin: 8px 8px 0; padding: 8px 12px;
    border-radius: 18px; color: var(--ink);
  }
  .mobar .brand-text { flex-direction: row; align-items: baseline; gap: 6px; }
  .mobar .brand-text small { display: inline; margin: 0; }
  .ham { color: var(--ink); background: transparent; border-radius: 10px; }
  .nav-collapse { display: none; }
  .who .icn { display: inline-flex; }
  .who .who-label { display: inline; position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .topbar { margin: 10px 8px 8px; }
  .top-search { height: 46px; }
  main { padding: 8px 8px 40px; }
}
@media (max-width: 760px) {
  .leads-tbl tbody tr, .admin-tbl tbody tr { margin: 0 0 10px; }
  .leads-tbl td, .admin-tbl td { background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tile b { font-size: 32px; }
}

@media print {
  body::before, body::after { display: none !important; }
  body, html { background: #fff !important; }
  .side, .card, .tile, .mobar, .topbar { box-shadow: none; backdrop-filter: none; background: #fff; }
  .tbl-wrap tbody td:first-child::before {
    background: #fff !important; box-shadow: none !important; border-color: #ddd !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}