/* ============================================================
   FlipDesk — theme tokens (matched to xyris.space / Vuexy)
   ============================================================ */
:root {
  --primary: #7367f0;
  --primary-rgb: 115, 103, 240;
  --primary-hover: #6155e6;
  --primary-soft: rgba(115, 103, 240, .12);
  --primary-soft-hover: rgba(115, 103, 240, .2);
  --primary-gradient: linear-gradient(72deg, #7367f0 0%, #8b80f9 100%);
  --success: #28c76f; --success-rgb: 40, 199, 111; --success-soft: rgba(40, 199, 111, .14);
  --warning: #ff9f43; --warning-rgb: 255, 159, 67; --warning-soft: rgba(255, 159, 67, .14);
  --danger:  #ea5455; --danger-rgb: 234, 84, 85;  --danger-soft:  rgba(234, 84, 85, .14);
  --info:    #00cfe8; --info-rgb: 0, 207, 232;    --info-soft:    rgba(0, 207, 232, .14);
  --secondary: #808390; --secondary-rgb: 128, 131, 144; --secondary-soft: rgba(128, 131, 144, .14);

  --body-bg: #f8f7fa;
  --card-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --header-bg: rgba(248, 247, 250, .85);
  --hover-bg: rgba(47, 43, 61, .04);
  --track-bg: #ededf0;

  --ink: 47, 43, 61;
  --text-heading: rgba(47, 43, 61, .9);
  --text-body: rgba(47, 43, 61, .78);
  --text-muted: rgba(47, 43, 61, .55);
  --text-light: rgba(47, 43, 61, .42);
  --border: rgba(47, 43, 61, .1);
  --border-strong: rgba(47, 43, 61, .16);
  --input-border: rgba(47, 43, 61, .22);

  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(47, 43, 61, .08);
  --shadow-sm: 0 2px 6px rgba(47, 43, 61, .06);
  --shadow:    0 4px 14px rgba(47, 43, 61, .08);
  --shadow-md: 0 6px 20px rgba(47, 43, 61, .1);
  --shadow-lg: 0 10px 34px rgba(47, 43, 61, .12);
  --shadow-primary: 0 4px 14px rgba(115, 103, 240, .4);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .15s; --dur: .25s; --dur-slow: .4s;

  --sidebar-w: 260px;
  --sidebar-collapsed-w: 82px;
  --header-h: 62px;
  --content-max: 1440px;

  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  --body-bg: #25293c;
  --card-bg: #2f3349;
  --sidebar-bg: #2f3349;
  --header-bg: rgba(37, 41, 60, .85);
  --hover-bg: rgba(225, 222, 245, .06);
  --track-bg: #3a3f57;

  --ink: 225, 222, 245;
  --text-heading: rgba(225, 222, 245, .9);
  --text-body: rgba(225, 222, 245, .78);
  --text-muted: rgba(225, 222, 245, .55);
  --text-light: rgba(225, 222, 245, .42);
  --border: rgba(225, 222, 245, .12);
  --border-strong: rgba(225, 222, 245, .18);
  --input-border: rgba(225, 222, 245, .24);

  --shadow-xs: 0 1px 2px rgba(16, 17, 33, .3);
  --shadow-sm: 0 2px 6px rgba(16, 17, 33, .28);
  --shadow:    0 4px 14px rgba(16, 17, 33, .32);
  --shadow-md: 0 6px 20px rgba(16, 17, 33, .35);
  --shadow-lg: 0 10px 34px rgba(16, 17, 33, .4);
}

/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The whole site renders at 95% by default — 100% felt a size too big. It
   stacks with the browser's own zoom, so users can still go bigger. The
   landing's live previews sit inside an already-zoomed page, so they stay 1. */
html { zoom: .95; --zoom: .95; }
html.embedded { zoom: 1; --zoom: 1; }
/* Viewport units are scaled by zoom too, so full-height layouts divide it back out. */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease);
}
h1,h2,h3,h4,h5 { color: var(--text-heading); margin: 0 0 .5rem; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1rem; }
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: var(--text-body); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }
.mono { font-family: var(--font-mono); font-size: .88em; letter-spacing: .02em; }
.muted { color: var(--text-muted); }
.hide-sm { display: inline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============ Page transitions ============ */
/* Cross-document: landing <-> app hand off like an app opening — the new
   page settles down from a slight zoom while the old one fades beneath it.
   (Pairs with the same rules in landing.css.) */
@view-transition { navigation: auto; }
/* CRITICAL: the transition overlay must not swallow clicks — without this
   the whole page is unclickable until the animation finishes. */
::view-transition { pointer-events: none; }
::view-transition-old(root) { animation: vt-root-out .32s ease both; }
::view-transition-new(root) { animation: vt-root-in .52s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes vt-root-out { to { opacity: 0; } }
@keyframes vt-root-in { from { opacity: 0; transform: scale(1.1); } }
/* Minimal animations: keep a quick plain fade; none: swap instantly. */
html[data-anim="min"]::view-transition-old(root) { animation: vt-root-out .18s ease both; }
html[data-anim="min"]::view-transition-new(root) { animation: vt-root-fade .18s ease both; }
@keyframes vt-root-fade { from { opacity: 0; } }
html[data-anim="none"]::view-transition-old(root),
html[data-anim="none"]::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============ Layout ============ */
.app { display: flex; min-height: calc(100vh / var(--zoom, 1)); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.5rem;
  /* Apple-style entrance: soft overshoot-free spring, settles quickly. */
  animation: view-in .5s cubic-bezier(.32, .72, 0, 1) both;
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(14px) scale(.988); }
  to { opacity: 1; transform: none; }
}

/* ============ Sidebar ============ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: calc(100vh / var(--zoom, 1));
  z-index: 60;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark { display: grid; place-items: center; filter: drop-shadow(0 3px 8px rgba(115,103,240,.45)); }
.brand-name { font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); }
/* Wordmark: lowercase "fixwise", both i dots are small folded strips cut at
   the same angle as the mark's fold. Text is dotless ı, so the dots are ours. */
.brand-wm { font-family: 'Plus Jakarta Sans', 'Public Sans', sans-serif; font-weight: 800; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.boot-name.brand-wm, .auth-brand .brand-name.brand-wm { letter-spacing: -.045em; }
.brand-wm .wm-f { margin-right: .05em; }
.brand-wm .wm-i { position: relative; display: inline-block; line-height: 1; }
.brand-wm .wm-i::after {
  content: ''; position: absolute; left: 50%; top: .07em; width: .3em; height: .19em; transform: translateX(-50%);
  background: linear-gradient(135deg, #8C8FFF, #5F62F5); clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%);
}

/* Collapse arrow beside the brand */
.side-toggle {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border: none; background: transparent;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.side-toggle:hover { background: rgba(var(--primary-rgb), .12); color: var(--primary); }
/* Lucide's chevron-left path sits 1px left of its box centre — counter it so
   the arrow is optically centred in the hover circle (and again when flipped). */
.side-toggle svg { transition: transform var(--dur) var(--ease); transform: translateX(-1px); }

/* Collapsed icon rail (desktop only) */
@media (min-width: 901px) {
  .sidebar { transition: width var(--dur) var(--ease), background var(--dur) var(--ease); }
  .app.side-collapsed .sidebar { width: var(--sidebar-collapsed-w); }
  .app.side-collapsed .side-toggle svg { transform: translateX(1px) rotate(180deg); }
  /* Collapsed: logo and arrow stack on the rail's centre line, aligned with the icons below. */
  .app.side-collapsed .sidebar-brand { flex-direction: column; align-items: center; gap: .5rem; padding: 1rem 0 .6rem; }
  .app.side-collapsed .side-toggle { margin: 0 auto; }
  .app.side-collapsed .brand-name,
  .app.side-collapsed .nav-label,
  .app.side-collapsed .nav-count,
  .app.side-collapsed .sidebar-foot { display: none; }
  .app.side-collapsed .nav-section {
    height: 1px; margin: .8rem .6rem; padding: 0;
    background: var(--border); overflow: hidden;
    font-size: 0;
  }
  .app.side-collapsed .nav-item { justify-content: center; gap: 0; padding: .6rem .4rem; }
  .app.side-collapsed .sidebar-nav { padding-inline: .6rem; }
}

/* Mobile edge tab that opens the sidebar overlay */
.sidebar-edge-btn { display: none; }
@media (max-width: 900px) {
  .sidebar-edge-btn {
    display: grid; place-items: center;
    position: fixed; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 52px;
    border: 1px solid var(--border); border-left: none;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--card-bg);
    color: var(--text-muted);
    box-shadow: var(--shadow);
    cursor: pointer;
    z-index: 54;
  }
}
.sidebar-nav {
  flex: 1; overflow-y: auto; padding: 12px 14px 24px;
  /* The scroll container clips the active item's purple glow at its top edge —
     give the glow room to bleed, like the reference's first tab. */
  overflow-x: visible;
}
/* Scrollbars everywhere (dropdowns, lists, modals, the page itself): a slim rounded purple thumb with no arrows; Firefox gets the closest match. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: rgba(var(--primary-rgb), .3) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--primary-rgb), .6); }
::-webkit-scrollbar-thumb:active { background-color: var(--primary); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(var(--primary-rgb), .38) transparent; }
}
.hdrop-scroll::-webkit-scrollbar { width: 8px; }
.hdrop-scroll::-webkit-scrollbar-thumb { border-width: 2px; }
.hdrop-scroll::-webkit-scrollbar-track { margin: 2px 0; }

/* The sidebar's own: thinner and faint until you're in the menu. */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-button { display: none; height: 0; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.sidebar-nav::-webkit-scrollbar-thumb { border: 0; border-radius: 99px; background: rgba(var(--primary-rgb), .14); transition: background .2s; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .38); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), .65); }
.sidebar-nav::-webkit-scrollbar-thumb:active { background: var(--primary); }
@supports not selector(::-webkit-scrollbar) {
  .sidebar-nav { scrollbar-color: rgba(var(--primary-rgb), .38) transparent; }
}
.nav-section {
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-light);
  padding: 18px 12px 8px; margin: 0;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px;
  margin-bottom: 2px;
  border-radius: var(--r);
  color: var(--text-body);
  font-weight: 400;
  font-size: .9rem;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-item:hover { background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.nav-item:active { transform: scale(.955); }
.nav-item.active {
  position: relative;
  background: var(--primary-gradient);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow-primary);
  animation: nav-pop .4s cubic-bezier(.2, 0, 0, 1);
}
@keyframes nav-pop {
  0% { transform: scale(.95); }
  55% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .nav-item.active { animation: none; } }
/* A light streak orbits the active item's border. */
@property --nav-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.nav-item.active::after,
.set-tab.active::after {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: calc(var(--r) + 1.5px);
  padding: 1.5px;
  background: conic-gradient(from var(--nav-angle),
    transparent 0turn, transparent .7turn,
    rgba(255, 255, 255, .75) .85turn, transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: nav-orbit 3.4s linear infinite;
  pointer-events: none;
}
@keyframes nav-orbit { to { --nav-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .nav-item.active::after, .set-tab.active::after { animation: none; opacity: 0; }
}
.nav-ico { display: grid; place-items: center; width: 21px; height: 21px; flex-shrink: 0; }
.nav-ico svg { width: 21px; height: 21px; stroke-width: 1.8px; }
.nav-count {
  margin-left: auto;
  font-size: .68rem; font-weight: 700;
  background: var(--primary-soft); color: var(--primary);
  border-radius: var(--r-pill);
  padding: .04rem .45rem;
}
.nav-count:empty { display: none; }
.nav-count.warn { background: var(--warning-soft); color: var(--warning); }
.nav-item.active .nav-count { background: rgba(255,255,255,.25); color: #fff; }
.sidebar-foot { padding: .9rem 1.25rem; border-top: 1px solid var(--border); }
.storage-pill { font-size: .74rem; color: var(--text-light); }
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 55;
  background: rgba(var(--ink), .4);
  backdrop-filter: blur(2px);
}

/* ============ Header (floating rounded bar, XyrisKey-style) ============ */
.header {
  height: var(--header-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 .8rem 0 1.1rem;
  /* Same column as the page content below it. */
  width: calc(100% - 3rem);
  max-width: calc(var(--content-max) - 3rem);
  margin: 1rem auto 0;
  position: sticky; top: .8rem; z-index: 50;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease);
}
.header.scrolled { box-shadow: var(--shadow-md); }

.header-search { margin-right: auto; }
.hdr-item { position: relative; }
.hdr-btn { position: relative; }
.header-actions .icon-btn { width: 40px; height: 40px; color: var(--text-muted); }
.header-actions .icon-btn:hover { background: rgba(var(--primary-rgb), .12); color: var(--primary); }

/* Icon buttons expand into labeled pills on hover, like the reference. */
.header-actions .icon-btn.hdr-btn {
  width: auto; min-width: 40px;
  padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Bigger, clearer glyphs (overrides the inline svg sizes). */
.hdr-btn > svg { width: 21px; height: 21px; }
.hdr-label {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-size: .84rem; font-weight: 600;
  margin-left: 0;
  transition: max-width .32s var(--ease), opacity .22s var(--ease), margin-left .32s var(--ease);
}
.hdr-item:hover .hdr-label,
.hdr-item.open .hdr-label { max-width: 120px; opacity: 1; margin-left: .45rem; }
.avatar-btn {
  border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: 0;
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease), padding var(--dur) var(--ease);
}
.hdr-item:hover .avatar-btn,
.hdr-item.open .avatar-btn { background: rgba(var(--primary-rgb), .12); padding: 0 .55rem 0 .3rem; }
/* Clean 34px header avatar with the status dot pinned to its top right. */
.avatar-btn .avatar { width: 34px; height: 34px; font-size: .76rem; box-shadow: none; position: relative; }
.avatar-btn .hdr-dot.online { top: -1px; right: -1px; bottom: auto; left: auto; }
.hdr-label-prof { color: var(--primary); }
#hd-prof .hdrop { min-width: 272px; }
.hdr-dot {
  position: absolute;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--card-bg);
}
.hdr-dot.online { right: -1px; bottom: -1px; background: var(--success); }
.hdr-dot.alert { right: 6px; top: 6px; background: var(--danger); }

/* Dropdown panels: scale/fade in from the trigger corner. */
.hdrop {
  position: absolute; top: calc(100% + 12px); right: 0;
  min-width: 230px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: .45rem;
  z-index: 80;
  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(.96);
  transform-origin: top right;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.hdr-item.open .hdrop { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .hdrop { transition: none; } }
.hdrop-wide { min-width: 300px; }
.hdrop-head {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-light);
  padding: .45rem .65rem .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.hdrop-badge {
  background: var(--danger-soft); color: var(--danger);
  font-size: .7rem; border-radius: var(--r-pill); padding: .05rem .5rem;
}
.hdrop-item {
  display: flex; align-items: center; gap: .65rem;
  width: 100%;
  border: none; background: transparent; cursor: pointer;
  padding: .55rem .65rem;
  border-radius: var(--r);
  color: var(--text-body); font-size: .9rem; font-weight: 500;
  text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hdrop-item:hover { background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.hdrop-item.active { color: var(--primary); }
.hdrop-ico { display: grid; place-items: center; width: 20px; }
.hdrop-check { margin-left: auto; color: var(--primary); display: grid; place-items: center; }
.hdrop-scroll { max-height: 260px; overflow-y: auto; }
.hdrop-sep { height: 1px; background: var(--border); margin: .35rem .3rem; }
.hdrop-prof { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; }
.hdrop-prof strong { display: block; font-size: .92rem; color: var(--text-heading); }
.hdrop-prof span:not(.avatar) { display: block; font-size: .78rem; color: var(--text-muted); }
.hdrop-note {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .65rem;
  font-size: .85rem; color: var(--text-body);
  border-radius: var(--r);
}
.hdrop-note .tl-dot { margin-top: .35rem; }
/* "Display" panel + profile panel (reference-style) */
.hdrop-big { font-size: .98rem; font-weight: 700; color: var(--text-heading); padding: .5rem .65rem .55rem; }
.prof-head { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem .65rem; }
.prof-head strong { display: block; font-size: .95rem; color: var(--text-heading); }
.prof-head div span { display: block; font-size: .78rem; color: var(--text-muted); }
.prof-chev { margin-left: auto; color: var(--text-muted); display: grid; place-items: center; }
.prof-balance {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left; cursor: pointer;
  background: rgba(var(--primary-rgb), .16);
  border: 1px solid rgba(var(--primary-rgb), .35);
  border-radius: var(--r-md);
  padding: .65rem .75rem;
  margin: .1rem 0 .45rem;
  color: var(--text-body);
  transition: background var(--dur-fast) var(--ease);
}
.prof-balance:hover { background: rgba(var(--primary-rgb), .25); }
.pb-ico { color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.prof-balance div span { display: block; font-size: .72rem; color: var(--text-muted); }
.prof-balance div strong { font-size: .98rem; color: var(--text-heading); }
.pb-chev { margin-left: auto; color: var(--primary); display: grid; place-items: center; }
.hdrop-item.danger { color: var(--danger); }
.hdrop-item.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* Animation levels (Display panel). "min" trims the flourishes; "none" is still. */
html[data-anim="min"] .nav-item.active::after { animation: none; opacity: 0; }
html[data-anim="min"] .promo-art { animation: none; }
html[data-anim="none"] *,
html[data-anim="none"] *::before,
html[data-anim="none"] *::after { animation: none !important; transition: none !important; }
.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: none; background: transparent;
  border-radius: var(--r-pill);
  color: var(--text-body);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--hover-bg); }
html[data-theme="dark"] .ico-moon { display: none; }
html:not([data-theme="dark"]) .ico-sun { display: none; }

.header-search { position: relative; display: flex; align-items: center; gap: .6rem; flex: 1; max-width: 480px; color: var(--text-muted); }
.header-search > svg { position: absolute; left: .8rem; pointer-events: none; }
.header-search input {
  width: 100%;
  height: 40px;
  padding: 0 2.6rem 0 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card-bg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.header-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.header-search kbd {
  position: absolute; right: .9rem;
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--text-light);
  border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: .05rem .4rem;
  background: var(--body-bg);
  pointer-events: none;
}
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: .4rem;
  max-height: 380px; overflow-y: auto;
  z-index: 70;
}
.search-result {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--text-body);
}
.search-result:hover, .search-result.sel { background: var(--primary-soft); }
.search-result .sr-type { margin-left: auto; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); }
.search-empty { padding: .9rem; text-align: center; color: var(--text-muted); font-size: .88rem; }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.avatar {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--primary-gradient);
  color: #fff; font-weight: 700; font-size: .82rem;
  cursor: pointer;
  box-shadow: var(--shadow-primary);
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: none; cursor: pointer;
  border-radius: var(--r);
  font-weight: 600; font-size: .92rem;
  padding: .58rem 1.15rem;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease),
    box-shadow .2s var(--ease), filter .2s var(--ease), transform .15s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: .42rem .85rem; font-size: .85rem; }
.btn-xs { padding: .25rem .6rem; font-size: .78rem; border-radius: var(--r-sm); }
.btn-primary { background: var(--primary-gradient); color: #fff; box-shadow: var(--shadow-primary); }
/* Same gradient on hover (a gradient→solid swap can't animate and flashes);
   brighten + lift + deepen the shadow instead. */
.btn-primary:hover { filter: brightness(1.06) saturate(1.02); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(115,103,240,.5); }
.btn-primary:active { transform: translateY(0) scale(.98); filter: brightness(.98); }
.btn-soft { background: var(--primary-soft); color: var(--primary); }
.btn-soft:hover { background: var(--primary-soft-hover); }
.btn-outline { background: transparent; color: var(--text-body); border: 1px solid var(--input-border); }
.btn-outline:hover { background: var(--hover-bg); color: var(--text-heading); }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger); }
.btn-danger-soft:hover { background: rgba(var(--danger-rgb), .22); }
.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 4px 12px rgba(var(--danger-rgb), .3); }
.btn-danger:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--danger-rgb), .4); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Explicit displays (e.g. .btn's inline-flex) would otherwise beat the attribute. */
[hidden] { display: none !important; }

/* ============ Cards ============ */
.card {
  background: var(--card-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.card-pad { padding: 1.35rem 1.5rem; }
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.5rem .9rem;
}
.card-header h3 { margin: 0; font-size: 1.12rem; font-weight: 600; }
.card-sub { font-size: .85rem; color: var(--text-muted); margin-top: .125rem; }

/* ============ Page head ============ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: 0; }
.page-head .page-sub { color: var(--text-muted); font-size: .95rem; margin: .25rem 0 0; }
.page-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* ============ Dashboard (XyrisKey-style) ============ */
.crumbs { font-size: .9rem; color: var(--text-muted); margin-bottom: .3rem; }
.crumbs .sep { margin: 0 .35rem; color: var(--text-light); }
.dash-head h1 .wave { display: inline-block; }

.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.1rem; overflow: hidden; }
.sb-item { padding: 1.375rem 1.5rem; border-left: 1px solid var(--border); }
.sb-item:first-child { border-left: none; }
.sb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .7rem; }
.sb-label { font-size: .9rem; font-weight: 400; color: var(--text-muted); padding-top: .35rem; }
.sb-top .stat-ico { width: 40px; height: 40px; }
.sb-value { font-size: 1.6rem; font-weight: 700; color: var(--text-heading); letter-spacing: -.01em; line-height: 1.2; margin: .5rem 0 .375rem; }
.sb-sub { font-size: .82rem; color: var(--text-muted); }
.sb-sub.up { color: var(--success); font-weight: 600; }
.sb-sub.down { color: var(--danger); font-weight: 600; }

.dash-mid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.promo-card {
  position: relative; overflow: hidden;
  padding: 1.6rem 1.7rem;
  background:
    radial-gradient(340px 220px at 88% 0%, rgba(var(--primary-rgb), .22), transparent 70%),
    linear-gradient(135deg, rgba(var(--primary-rgb), .14), rgba(var(--primary-rgb), .03)),
    var(--card-bg);
  display: flex; flex-direction: column;
}
.promo-card h3 { color: var(--primary); font-size: 1.15rem; font-weight: 600; margin-bottom: .25rem; }
.promo-card .promo-plan { font-size: .95rem; color: var(--text-body); margin: 0 0 .8rem; }
.promo-card .promo-plan strong { color: var(--primary); }
.promo-big { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; color: var(--text-heading); margin-bottom: .55rem; }
.promo-note { font-size: .9rem; line-height: 1.55; color: var(--text-body); max-width: 260px; margin: 0 0 1.2rem; }
.promo-stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 1.1rem;
  justify-content: start; margin: 0 0 1.3rem; position: relative; z-index: 1;
  max-width: calc(100% - 132px);   /* clear of the phone art */
}
.promo-stats > div { display: flex; flex-direction: column; gap: .15rem; }
.promo-stats span { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.promo-stats strong { font-size: 1.05rem; font-weight: 700; color: var(--text-heading); }
.promo-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; }
.promo-art {
  position: absolute; right: 1.2rem; bottom: 1.1rem;
  width: 130px; height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 26px rgba(var(--primary-rgb), .45));
  animation: promo-float 5.5s ease-in-out infinite;
}
@keyframes promo-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .promo-art { animation: none; } }
.promo-ring {
  position: absolute; border: 1px solid rgba(var(--primary-rgb), .25); border-radius: 50%;
  pointer-events: none;
}

.dash-table-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.5rem .4rem; }
.dash-table-head h3 { margin: 0; font-size: 1.12rem; font-weight: 600; }

@media (max-width: 1100px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .sb-item:nth-child(odd) { border-left: none; }
  .sb-item:nth-child(n+3) { border-top: 1px solid var(--border); }
  .dash-mid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stat-band { grid-template-columns: 1fr; }
  .sb-item { border-left: none; }
  .sb-item:nth-child(n+2) { border-top: 1px solid var(--border); }
}

/* ============ Stat cards ============ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.1rem; }
.stat-card { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.25rem 1.4rem; }
.stat-card { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1), border-color .25s ease; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card .stat-ico { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.stat-card:hover .stat-ico { transform: scale(1.08) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .stat-ico { transition: none; } .stat-card:hover, .stat-card:hover .stat-ico { transform: none; } }
.stat-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .45rem; }
.stat-value { font-size: 1.65rem; font-weight: 700; color: var(--text-heading); letter-spacing: -.02em; line-height: 1.1; }
.stat-delta { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; margin-top: .45rem; }
.stat-delta.up { color: var(--success); }
.stat-delta.down { color: var(--danger); }
.stat-delta.flat { color: var(--text-muted); }
.stat-ico {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
}
.stat-ico svg { width: 24px; height: 24px; }
.tint-primary { background: var(--primary-soft); color: var(--primary); }
.tint-success { background: var(--success-soft); color: var(--success); }
.tint-warning { background: var(--warning-soft); color: var(--warning); }
.tint-danger  { background: var(--danger-soft);  color: var(--danger); }
.tint-info    { background: var(--info-soft);    color: var(--info); }
.tint-secondary { background: var(--secondary-soft); color: var(--secondary); }

/* ============ Settings ============ */
/* Tabs float on the page like the reference — no container box. */
.set-tabs {
  display: flex; gap: .45rem; flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.set-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  border: none; background: transparent; cursor: pointer;
  padding: .55rem .95rem;
  border-radius: var(--r);
  color: var(--text-muted); font-size: .9rem; font-weight: 600;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.set-tab:hover { background: rgba(var(--primary-rgb), .1); color: var(--primary); }
.set-tab.active { background: var(--primary-gradient); color: #fff; box-shadow: var(--shadow-primary); }
/* Each tab's content glides in — replayed on every tab change. */
.set-panel { animation: set-panel-in .4s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes set-panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.994); }
  to { opacity: 1; transform: none; }
}
html[data-anim="none"] .set-panel,
html[data-anim="min"] .set-panel,
.set-panel.still { animation: none; }
.set-tab { position: relative; }

/* Manage-subscriptions / notifications header card: title left, actions right. */
.sub-manage { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sub-manage .set-sub { margin-bottom: 0; }
.sub-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Reference buttons: flat purple solid + purple-tinted outline. */
.sub-manage .btn { border-radius: 10px; padding: .55rem 1.15rem; }
.sub-manage .btn-primary {
  background: var(--primary);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3);
  text-shadow: none;
}
.sub-manage .btn-primary:hover { background: #7f74f2; transform: none; box-shadow: 0 4px 18px rgba(var(--primary-rgb), .42); }
.btn-outline-primary {
  background: rgba(var(--primary-rgb), .08);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), .45);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-outline-primary:hover { background: rgba(var(--primary-rgb), .16); border-color: rgba(var(--primary-rgb), .7); box-shadow: 0 0 14px rgba(var(--primary-rgb), .25); }
.sub-empty { text-align: center; padding: 3.4rem 1rem; color: var(--text-heading); }
.sub-empty a { color: var(--primary); font-weight: 600; }
.sub-empty a:hover { text-decoration: underline; }
.notif-empty { text-align: center; padding: 3.2rem 1.5rem; color: var(--text-muted); }
.notif-empty-ico {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: .8rem;
  border-radius: var(--r-md);
  background: var(--primary-soft); color: var(--primary);
}
.notif-empty p { margin: 0; font-size: .92rem; }

.set-h { font-size: 1.02rem; margin-bottom: .15rem; }
/* Masked PIN inputs (text type to dodge password-manager autofill). */
.pin-mask { -webkit-text-security: disc; text-security: disc; letter-spacing: .25em; }
.set-row-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.set-row-head .set-h { margin: 0; }
/* Discreet "?" that reveals a hint on hover / focus. */
h3 .hint-i, .set-h .hint-i { vertical-align: 1px; margin-left: .35rem; }
/* Page titles: the "?" sits on the middle of the capitals, not the baseline. */
.page-head h1 .hint-i { vertical-align: middle; position: relative; top: -2px; margin-left: .45rem; }
.hint-i {
  position: relative; display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-left: .3rem; vertical-align: -2px;
  border-radius: 50%; font-size: .64rem; font-weight: 700; text-transform: none; letter-spacing: 0;
  background: var(--primary-soft); color: var(--primary); cursor: help;
}
.hint-i::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px);
  width: max-content; max-width: 240px;
  background: var(--text-heading); color: var(--card-bg);
  font-size: .74rem; font-weight: 500; line-height: 1.4; text-transform: none; letter-spacing: 0;
  padding: .45rem .65rem; border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  z-index: 120; white-space: normal;
}
.hint-i:hover::after, .hint-i:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.danger-row > div { flex: 1; min-width: 240px; }
.danger-row .set-sub { margin-bottom: 0; }
.set-foot { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-size: .86rem; margin: .9rem 0 0; padding: 0 .25rem; }
.link-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  border: none; background: transparent; padding: 0; cursor: pointer;
  color: var(--primary); font-weight: 600; font-size: inherit;
}
.link-btn:hover { text-decoration: underline; }

/* ============ Billing: Plans ============ */
.pp-head { text-align: center; margin: .3rem 0 1.7rem; }
.pp-head h1 { font-size: 1.72rem; font-weight: 800; letter-spacing: -.02em; }
.pp-accent { color: var(--primary); }
.pp-head p { color: var(--text-muted); margin: .4rem 0 1rem; }
.pp-toggle { display: inline-flex; align-items: center; gap: .7rem; }
.pt-label { font-weight: 600; color: var(--text-muted); font-size: .92rem; }
.pt-label.active { color: var(--text-heading); }
.pp-save {
  font-size: .74rem; font-weight: 700;
  color: var(--success); background: var(--success-soft);
  border: 1px solid rgba(40, 199, 111, .4);
  border-radius: var(--r-pill); padding: .18rem .6rem;
}
.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; max-width: 1020px; margin: 0 auto 1.1rem; }
.pp-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.4rem 1.4rem;
  text-align: center;
}
.pp-card.popular {
  border-color: rgba(var(--primary-rgb), .65);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), .35), var(--shadow-md);
}
.pp-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: .2rem .75rem; border-radius: var(--r-pill);
  white-space: nowrap;
}
.pp-icon { width: 86px; height: 86px; object-fit: contain; margin: .3rem auto .9rem; }
.pp-card h3 { font-size: 1.05rem; }
.pp-desc { color: var(--text-muted); font-size: .84rem; margin: .25rem 0 .9rem; }
.pp-price { font-size: 1.55rem; font-weight: 800; color: var(--primary); margin-bottom: 1.05rem; }
.pp-price small { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.pp-prev { color: var(--primary); font-size: .78rem; font-weight: 700; text-align: left; margin: 0 0 .6rem; }
.pp-feats {
  list-style: none; padding: 0; margin: 0 0 1.3rem;
  display: grid; gap: .55rem;
  text-align: left; font-size: .86rem; color: var(--text-body);
}
.pp-feats li { display: flex; gap: .55rem; align-items: center; }
.pp-feats li svg { color: var(--success); flex-shrink: 0; }
.pp-btn { margin-top: auto; width: 100%; justify-content: center; }
.pp-current {
  background: rgba(var(--primary-rgb), .14); color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), .35);
  cursor: default;
}
@media (max-width: 1150px) { .pp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pp-grid { grid-template-columns: 1fr; } }


.lbl-note { color: var(--text-light); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field input:disabled { background: var(--body-bg); color: var(--text-muted); cursor: not-allowed; }
.hr { height: 1px; background: var(--border); margin: 1rem 0; }
.danger-card { border-color: rgba(var(--danger-rgb), .35); }
.danger-title { color: var(--danger); display: flex; align-items: center; gap: .5rem; }

/* Option cards (language / currency pickers) */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; }
.opt-card {
  display: flex; align-items: center; gap: .75rem;
  text-align: left; cursor: pointer;
  background: var(--body-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .8rem .9rem;
  color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.opt-card:hover { border-color: rgba(var(--primary-rgb), .5); transform: translateY(-1px); }
.opt-card.active { border-color: var(--primary); background: rgba(var(--primary-rgb), .12); }
.opt-badge {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft); color: var(--primary);
  font-weight: 700; font-size: .82rem;
}
.opt-card.active .opt-badge { background: var(--primary); color: #fff; }
.opt-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text-heading); font-size: .92rem; }
.opt-name em { display: block; font-style: normal; font-weight: 400; font-size: .76rem; color: var(--text-muted); }
.opt-state {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .76rem; font-weight: 600; color: var(--success); white-space: nowrap;
}
.opt-state.muted { color: var(--text-light); font-weight: 400; }
.opt-state.link { color: var(--primary); }
.cur-summary { display: flex; gap: 2rem; flex-wrap: wrap; }
.cur-summary span { display: block; font-size: .78rem; color: var(--text-muted); }
.cur-summary strong { font-size: 1.25rem; color: var(--text-heading); }

/* Plan banner + usage */
.plan-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem 1.7rem;
  background:
    radial-gradient(400px 200px at 90% 0%, rgba(var(--primary-rgb), .22), transparent 70%),
    linear-gradient(135deg, rgba(var(--primary-rgb), .14), rgba(var(--primary-rgb), .03)),
    var(--card-bg);
}
.plan-chip {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--primary-soft); color: var(--primary);
  border-radius: var(--r-pill); padding: .2rem .65rem; margin-bottom: .5rem;
}
.plan-banner h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.plan-banner p { margin: 0; color: var(--text-muted); font-size: .88rem; max-width: 46ch; }
.plan-price { text-align: right; }
.plan-price strong { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-heading); }
.plan-price span { font-size: .8rem; color: var(--text-muted); }
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.usage-item { background: var(--body-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: .75rem .9rem; }
.usage-item span { display: block; font-size: .75rem; color: var(--text-muted); }
.usage-item strong { font-size: 1.15rem; color: var(--text-heading); }

/* Notification centre */
/* Filter tabs across the top of the notification card. */
.notif-filters {
  display: flex; gap: .25rem; flex-wrap: wrap;
  padding: .8rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.nf-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  border: none; background: transparent; cursor: pointer;
  padding: .4rem .8rem; border-radius: var(--r-pill);
  font-size: .86rem; font-weight: 600; color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nf-tab:hover { background: var(--hover-bg); color: var(--text-heading); }
.nf-tab.active { background: var(--primary-soft); color: var(--primary); }
.nf-count {
  font-size: .7rem; font-weight: 700;
  background: var(--track-bg); color: var(--text-muted);
  border-radius: var(--r-pill); padding: .05rem .45rem; line-height: 1.5;
}
.nf-tab.active .nf-count { background: var(--primary); color: #fff; }
.notif-day {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-light);
  padding: .9rem 1.5rem .45rem;
}
.notif-list { border-top: 1px solid var(--border); }
/* Clean-list rows (option C) with hover actions (option D). */
.notif-row {
  position: relative;
  display: grid; grid-template-columns: 38px 1fr auto auto auto 26px;
  align-items: center; column-gap: .9rem;
  padding: .95rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease);
}
/* Unread: a slim accent bar in the row's tone colour. */
.notif-row.unread::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--nt);
}
/* Round tinted icon, like an avatar. */
.notif-ico {
  width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--nt) 15%, transparent); color: var(--nt);
}
/* Action button: revealed on hover (always visible on touch). */
.notif-act {
  opacity: 0; transform: translateX(4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
    background-color .2s var(--ease), filter .2s var(--ease);
  white-space: nowrap;
}
.notif-row:hover .notif-act, .notif-act:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .notif-act { opacity: 1; transform: none; } }
.notif-row[data-route] { cursor: pointer; }
.notif-row:hover { background: var(--hover-bg); }
.notif-row:last-child { border-bottom: none; }
.notif-row.read { opacity: .62; }
.notif-row.read .notif-ico { background: var(--track-bg); color: var(--text-muted); }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .42rem; }
.notif-body { min-width: 0; }
.notif-title { font-size: .94rem; font-weight: 600; color: var(--text-heading); line-height: 1.4; }
.notif-row.read .notif-title { font-weight: 500; }
.notif-text { font-size: .86rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.5; }
/* Status chip (stock count, lateness, age) — colour-coded by tone. */
.notif-chip {
  display: inline-flex; align-items: center;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  padding: .22rem .62rem; border-radius: var(--r-sm);
  margin-top: .05rem; margin-right: .4rem;
}
.notif-chip.danger { background: var(--danger-soft); color: var(--danger); }
.notif-chip.warning { background: var(--warning-soft); color: var(--warning); }
.notif-chip.info { background: var(--info-soft); color: var(--info); }
.notif-chip.success { background: var(--success-soft); color: var(--success); }
/* Time sits on the right, aligned with the title line. */
.notif-time { font-size: .78rem; color: var(--text-light); white-space: nowrap; padding-top: .18rem; min-width: 52px; text-align: right; }
.notif-x {
  border: none; background: transparent; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--text-light);
  width: 26px; height: 26px; border-radius: var(--r-pill);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.notif-row:hover .notif-x { opacity: 1; }
.notif-x:hover { background: var(--danger-soft); color: var(--danger); }
@media (hover: none) { .notif-x { opacity: 1; } }
/* Phones: the title gets the full width; action, chip and time sit on a line below. */
@media (max-width: 640px) {
  #stx-notifs .card-header { flex-wrap: wrap; gap: .75rem; }
  .notif-filters { padding: .7rem 1rem; }
  .notif-day { padding: .8rem 1rem .4rem; }
  .notif-row { grid-template-columns: 38px auto auto minmax(0, 1fr) 26px; column-gap: .5rem; row-gap: .55rem; padding: .85rem 1rem; }
  .notif-row > .notif-ico { grid-row: 1; grid-column: 1; }
  .notif-row > .notif-body { grid-row: 1; grid-column: 2 / 5; }
  .notif-row > .notif-x { grid-row: 1; grid-column: 5; }
  .notif-row > :nth-child(3) { grid-row: 2; grid-column: 2; }
  .notif-row > :nth-child(4) { grid-row: 2; grid-column: 3; }
  .notif-row > .notif-time { grid-row: 2; grid-column: 4; min-width: 0; padding-top: 0; text-align: right; }
}
.set-sub { color: var(--text-muted); font-size: .86rem; margin: 0 0 1rem; }
.set-note {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--warning-soft);
  border-radius: var(--r-md);
  padding: .8rem .95rem;
  font-size: .84rem; color: var(--text-body);
  margin-bottom: 0;
}
.set-note svg { color: var(--warning); flex-shrink: 0; margin-top: .1rem; }

/* Roles — a quiet reference list, easy to scan */
.roles-intro { color: var(--text-muted); font-size: .9rem; margin: .1rem 0 1rem; }
.roles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (max-width: 640px) { .roles-grid { grid-template-columns: 1fr; } }
.role-card {
  --rc: var(--primary); --rc-soft: var(--primary-soft);
  border-radius: var(--r-lg);
  padding: 1rem 1.05rem .95rem;
  background: var(--body-bg);
}
html[data-theme="light"] .role-card { background: var(--hover-bg); }
.role-card.rc-info { --rc: var(--info); --rc-soft: var(--info-soft); }
.role-card.rc-success { --rc: var(--success); --rc-soft: var(--success-soft); }
.role-card.rc-secondary { --rc: var(--secondary); --rc-soft: var(--secondary-soft); }
.rc-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.rc-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--rc-soft); color: var(--rc);
}
.rc-head strong { display: block; font-size: .96rem; color: var(--text-heading); }
.rc-head span { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .1rem; }
.rc-can { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.rc-can li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-body); }
.rc-can li svg { color: var(--rc); flex-shrink: 0; }
.role-list { border-top: 1px solid var(--border); }
.role-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 1rem; align-items: baseline;
  padding: .7rem .1rem;
  border-bottom: 1px solid var(--border);
}
.role-name {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 600; color: var(--text-heading);
}
.role-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.role-desc { font-size: .86rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .role-row { grid-template-columns: 1fr; gap: .2rem; }
}

/* Security cards */
.sec-card .sec-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1rem; }
.sec-ico {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--secondary-soft); color: var(--secondary);
}
.sec-ico.on { background: var(--success-soft); color: var(--success); }
.sec-head .set-sub { margin-bottom: 0; }
.sec-status {
  margin-left: auto; flex-shrink: 0;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  background: var(--secondary-soft); color: var(--secondary);
  border-radius: var(--r-pill); padding: .2rem .6rem;
}
.sec-status.on { background: var(--success-soft); color: var(--success); }
.sec-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* Toggle switch */
.switch-row { display: flex; align-items: center; gap: 1rem; cursor: pointer; }
.switch-row strong { display: block; font-size: .92rem; color: var(--text-heading); }
.switch-row span { display: block; font-size: .82rem; color: var(--text-muted); margin-top: .1rem; }
.tswitch {
  position: relative; flex-shrink: 0; margin-left: auto;
  width: 44px; height: 24px;
  border: none; border-radius: var(--r-pill);
  background: var(--track-bg); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.tswitch.on { background: var(--primary); }
.tswitch span {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(8, 9, 20, .3);
  transition: transform var(--dur) var(--ease);
}
.tswitch.on span { transform: translateX(20px); }

/* 2FA setup */
.setup-steps { margin: 0; padding-left: 1.2rem; }
.setup-steps li { margin-bottom: 1rem; font-size: .9rem; color: var(--text-body); }
.setup-steps strong { display: block; color: var(--text-heading); margin-bottom: .5rem; font-size: .92rem; }
.qr-wrap { background: #fff; padding: 10px; border-radius: var(--r-md); width: max-content; border: 1px solid var(--border); }
.secret-chip {
  font-family: var(--font-mono); font-size: .9rem; letter-spacing: .06em;
  background: var(--hover-bg); border: 1px solid var(--border);
  border-radius: var(--r); padding: .5rem .8rem; cursor: copy;
  color: var(--text-heading);
}
.secret-chip:hover { border-color: var(--primary); color: var(--primary); }
.code-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
  background: var(--body-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: .9rem;
}
.code-grid span { font-size: .92rem; color: var(--text-heading); letter-spacing: .05em; }

/* ============ Auth page (always light, like the reference) ============ */
body.auth {
  display: flex; align-items: center; min-height: calc(100vh / var(--zoom, 1));
  background:
    radial-gradient(720px 600px at 10% 6%, rgba(115, 103, 240, .34), rgba(115, 103, 240, .12) 38%, transparent 66%),
    radial-gradient(640px 520px at 56% 100%, rgba(0, 207, 232, .22), rgba(0, 207, 232, .07) 40%, transparent 66%),
    #f8f7fa;
}
.auth-art {
  flex: 1; position: relative;
  align-self: stretch; min-height: calc(100vh / var(--zoom, 1));
  display: grid; place-items: center;
  animation: auth-art-in .6s ease .1s both;
  /* Sit the scene left of the zone's center, like the reference. */
  padding-right: 12vw;
  overflow: hidden;
}
.auth-scene { position: relative; z-index: 1; }
.auth-char {
  display: block;
  width: clamp(120px, 10.5vw, 200px); height: auto;
  margin: 0 auto;
  animation: auth-bob 7s ease-in-out infinite;
}
@keyframes auth-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* Floating shop-stat cards around the character (dark, like the art). */
.art-card {
  position: absolute;
  background: #2b2f44;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(37, 41, 60, .35);
  color: #e6e4f5;
  animation: auth-bob 8s ease-in-out infinite;
}
.art-card .ac-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(115, 103, 240, .22); color: #8b80f9;
}
.ac-delta { color: #34d97b; font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; gap: .15rem; }
.ac-delta.up svg { margin-top: 1px; }
.ac-big { font-size: 1.05rem; font-weight: 700; color: #eceaf7; }
.ac-big em { font-style: normal; font-size: .74rem; vertical-align: 2px; }
.ac-label { font-size: .72rem; color: #a4a1bd; margin-top: .1rem; }
.ac-chip {
  display: inline-block; margin-top: .7rem;
  font-size: .68rem; color: #b6b3cd;
  background: rgba(225, 222, 245, .1);
  border-radius: var(--r-pill); padding: .22rem .6rem;
}
.art-card-a {
  left: max(-150px, -10vw); top: 6%;
  width: 132px; padding: .8rem .85rem;
  animation-delay: -2.5s;
}
.art-card-a .ac-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .8rem; }
.art-card-a .ac-big { font-size: 1.15rem; }
.art-card-b {
  right: max(-190px, -13vw); top: -7%;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem;
  animation-delay: -5s;
}
.art-card-b .ac-big { font-size: .95rem; }
.art-card-c {
  right: max(-200px, -14vw); bottom: 9%;
  width: 140px; padding: .8rem .85rem .65rem;
  animation-delay: -1s;
}
.art-card-c .ac-chart { width: 100%; height: auto; margin-top: .55rem; }
.auth-sphere {
  position: absolute; left: -12vw; bottom: -7%;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #6d6d74, #3c3c42 58%, #2a2a30);
  box-shadow: 0 18px 22px -8px rgba(37, 41, 60, .45);
  animation: auth-bob 9s ease-in-out infinite;
  animation-delay: -4s;
}
.auth-card {
  width: min(430px, 100%);
  /* Hugs its content (no stretched white gaps) and sits mid-screen. */
  align-self: center;
  margin: 1.4rem clamp(1.4rem, 11vw, 13rem) 1.4rem 1.4rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(47, 43, 61, .12);
  padding: 40px 38px;
  display: flex; flex-direction: column;
  animation: auth-in .55s cubic-bezier(.32, .72, 0, 1) both;
}
@keyframes auth-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes auth-art-in { from { opacity: 0; } }
.auth-brand { margin-bottom: 1.5rem; }
.auth-brand .brand-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: rgba(47, 43, 61, .9); }
.auth-pane { display: flex; flex-direction: column; animation: auth-in .45s cubic-bezier(.32, .72, 0, 1) both; }
/* An explicit display would otherwise beat the [hidden] attribute. */
.auth-pane[hidden] { display: none; }
.auth-pane h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; margin-bottom: 6px; color: rgba(47, 43, 61, .9); }
.auth-sub { color: rgba(47, 43, 61, .55); font-size: .92rem; line-height: 1.5; margin-bottom: 24px; }
.auth-pane .field { margin-bottom: 16px; }
.auth-pane .field input {
  height: 46px; font-size: .94rem;
  border: 1px solid rgba(47, 43, 61, .22); border-radius: 8px;
  color: rgba(47, 43, 61, .9); background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.auth-pane .field input::placeholder { color: rgba(47, 43, 61, .55); }
.auth-pane .field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .16); }
.auth-pass { position: relative; }
.auth-pass input { padding-right: 2.8rem; }
.auth-eye {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); padding: .35rem; border-radius: var(--r-sm);
}
.auth-eye:hover { color: var(--text-heading); }
.auth-agree {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; color: rgba(47, 43, 61, .78);
  margin: .1rem 0 1.1rem; cursor: pointer;
}
/* Custom checkbox: rounded, fills purple with a soft pop, the tick draws in. */
.auth-agree input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; margin: 0;
  border: 1.6px solid rgba(47, 43, 61, .3); border-radius: 5px;
  background: #fff; cursor: pointer; position: relative;
  transition: background .22s var(--ease), border-color .22s var(--ease),
    box-shadow .22s var(--ease), transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.auth-agree input:hover { border-color: var(--primary); }
.auth-agree input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2); }
.auth-agree input:checked {
  background: var(--primary); border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), .32);
  animation: cb-pop .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes cb-pop { 0% { transform: scale(.9); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
.auth-agree input::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transform-origin: 60% 60%;
  opacity: 0;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1) .05s, opacity .15s ease .05s;
}
.auth-agree input:checked::after { transform: rotate(45deg) scale(1); opacity: 1; }
/* Signup: which workspace the app should lead with. */
.auth-ws { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: .2rem 0 1rem; }
.auth-ws-opt { position: relative; cursor: pointer; }
.auth-ws-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-ws-opt span {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .62rem .8rem; border: 1.5px solid rgba(47, 43, 61, .16); border-radius: 8px;
  background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.auth-ws-opt strong { font-size: .86rem; font-weight: 600; color: rgba(47, 43, 61, .9); }
.auth-ws-opt small { font-size: .76rem; color: rgba(47, 43, 61, .55); }
.auth-ws-opt:hover span { border-color: rgba(var(--primary-rgb), .55); }
.auth-ws-opt input:checked + span { border-color: var(--primary); background: rgba(var(--primary-rgb), .06); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14); }
.auth-ws-opt input:focus-visible + span { border-color: var(--primary); }
html[data-theme="dark"] .auth-ws-opt span { background: rgba(44, 48, 70, .55); border-color: rgba(225, 222, 245, .14); }
html[data-theme="dark"] .auth-ws-opt strong { color: rgba(225, 222, 245, .9); }
html[data-theme="dark"] .auth-ws-opt small { color: rgba(225, 222, 245, .55); }
html[data-theme="dark"] .auth-ws-opt input:checked + span { background: rgba(var(--primary-rgb), .16); }
.auth-link { color: var(--primary); font-weight: 500; }
.auth-link:hover { text-decoration: underline; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.1rem; font-size: .9rem; }
.auth-cta {
  width: 100%; justify-content: center;
  height: 39px; padding: 0 18px; font-size: .92rem; font-weight: 600;
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(#8479f2 0%, #7367f0 52%, #6d62e4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
    0 5px 13px rgba(var(--primary-rgb), .3),
    0 1px 2px rgba(0, 0, 0, .08);
  /* Hover brightens the SAME background (no gradient swap = no flash) and
     lifts the shadow — the reference's exact recipe. */
  transition: filter .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
.auth-cta:hover {
  background:
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(#8479f2 0%, #7367f0 52%, #6d62e4 100%);
  filter: brightness(1.06) saturate(1.02);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
    0 8px 18px rgba(var(--primary-rgb), .42),
    0 1px 2px rgba(0, 0, 0, .08);
}
.auth-cta:active { transform: translateY(0); filter: brightness(.98); }
.auth-or {
  display: flex; align-items: center; gap: .9rem;
  color: var(--text-light); font-size: .82rem;
  margin: 1.15rem 0;
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: #e6e3ef; }
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; height: 42px;
  background: #fff; border: 1px solid rgba(47, 43, 61, .22); border-radius: var(--r-pill);
  font-size: .92rem; font-weight: 600; color: rgba(47, 43, 61, .9);
  cursor: pointer;
  transition: border-color .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
.auth-google:hover { border-color: rgba(47, 43, 61, .38); box-shadow: 0 4px 14px rgba(47, 43, 61, .1); transform: translateY(-1px); }
.auth-swap { text-align: center; font-size: .92rem; color: rgba(47, 43, 61, .55); margin-top: 1.25rem; }
.auth-swap .auth-link, .auth-agree .auth-link, .auth-row .auth-link { font-weight: 500; }
.auth-note { text-align: center; font-size: .74rem; color: var(--text-light); margin-top: 1.6rem; }
.auth-floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: auto; display: none;
  pointer-events: none;
}
/* ---- Dark theme (follows the landing's pick / the OS setting) ---- */
html[data-theme="dark"] body.auth {
  background:
    radial-gradient(720px 600px at 10% 6%, rgba(115, 103, 240, .28), rgba(115, 103, 240, .08) 40%, transparent 66%),
    radial-gradient(620px 520px at 56% 100%, rgba(0, 207, 232, .16), rgba(0, 207, 232, .05) 42%, transparent 66%),
    #25293c;
}
html[data-theme="dark"] .auth-floor { display: block; }
/* The floor art carries its own sphere. */
html[data-theme="dark"] .auth-sphere { display: none; }
html[data-theme="dark"] .art-card { background: #2f3349; box-shadow: 0 16px 40px rgba(15, 17, 26, .5); }
html[data-theme="dark"] .art-card-c .ac-chart circle { fill: #2f3349; }
html[data-theme="dark"] .auth-card {
  background: #2f3349;
  border: 1px solid rgba(225, 222, 245, .12);
  box-shadow: 0 10px 34px rgba(15, 17, 26, .45);
}
html[data-theme="dark"] .auth-brand .brand-name { color: rgba(225, 222, 245, .9); }
html[data-theme="dark"] .auth-pane h2 { color: rgba(225, 222, 245, .9); }
html[data-theme="dark"] .auth-sub,
html[data-theme="dark"] .auth-swap,
html[data-theme="dark"] .auth-or { color: rgba(225, 222, 245, .55); }
html[data-theme="dark"] .auth-or::before, html[data-theme="dark"] .auth-or::after { background: rgba(225, 222, 245, .12); }
html[data-theme="dark"] .auth-pane .field input {
  background: #2f3349;
  border-color: rgba(225, 222, 245, .16);
  color: rgba(225, 222, 245, .9);
}
html[data-theme="dark"] .auth-pane .field input::placeholder { color: rgba(225, 222, 245, .5); }
html[data-theme="dark"] .auth-eye { color: rgba(225, 222, 245, .55); }
html[data-theme="dark"] .auth-eye:hover { color: rgba(225, 222, 245, .9); }
html[data-theme="dark"] .auth-agree { color: rgba(225, 222, 245, .78); }
html[data-theme="dark"] .auth-agree input { background: transparent; border-color: rgba(225, 222, 245, .3); }
html[data-theme="dark"] .auth-row { color: rgba(225, 222, 245, .78); }
html[data-theme="dark"] .auth-google { background: #fff; border-color: #fff; color: rgba(47, 43, 61, .9); }
html[data-theme="dark"] .auth-google:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .auth-note { color: rgba(225, 222, 245, .4); }
@media (max-width: 920px) {
  .auth-art { display: none; }
  body.auth { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-char, .art-card, .auth-sphere, .auth-art { animation: none; }
  .auth-card, .auth-pane { animation: none; }
}

/* ============ Boot splash ============ */
/* Branded loading screen: the P draws itself in, the wordmark rises, a
   shimmer bar ticks — then the whole sheet lifts once the page is ready.
   Cold loads only; internal moves use the page-zoom transition instead
   (the head script sets html.no-boot for those). */
.boot-screen {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: #25293c;
  transition: opacity .5s var(--ease), visibility .5s;
}
html[data-theme="light"] .boot-screen { background: #f8f7fa; }
html.no-boot .boot-screen { display: none; }
.boot-screen.boot-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner {
  display: grid; justify-items: center; gap: 1.05rem;
  transition: transform .5s var(--ease);
}
/* Lift-off: the logo grows into the page while the sheet fades. */
.boot-screen.boot-done .boot-inner { transform: scale(1.07); }
.boot-mark {
  filter: drop-shadow(0 8px 28px rgba(115, 103, 240, .38));
  animation: boot-breath 2.6s ease-in-out 1.5s infinite;
}
/* Fold-in: the stem grows up, then each bar unfolds out from it. */
.boot-mark .fw-stem, .boot-mark .fw-top, .boot-mark .fw-mid { transform-box: fill-box; }
.boot-mark .fw-stem { transform-origin: 50% 0; transform: scaleY(0); animation: boot-grow .6s cubic-bezier(.32, .72, 0, 1) .1s forwards; }
.boot-mark .fw-top { transform-origin: 0 50%; transform: scaleX(0); animation: boot-unfold .6s cubic-bezier(.32, .72, 0, 1) .42s forwards; }
.boot-mark .fw-mid { transform-origin: 0 50%; transform: scaleX(0); animation: boot-unfold .55s cubic-bezier(.32, .72, 0, 1) .64s forwards; }
.boot-mark .fw-base { animation: boot-shade-in .3s ease 1.1s backwards; }
@keyframes boot-grow { to { transform: scaleY(1); } }
@keyframes boot-unfold { to { transform: scaleX(1); } }
@keyframes boot-shade-in { from { opacity: 0; } }
@keyframes boot-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
.boot-name {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
  color: rgba(225, 222, 245, .9);
  opacity: 0; transform: translateY(10px);
  animation: boot-rise .6s var(--ease) .8s forwards;
}
html[data-theme="light"] .boot-name { color: rgba(47, 43, 61, .92); }
@keyframes boot-rise { to { opacity: 1; transform: none; } }
.boot-bar {
  width: 148px; height: 4px; border-radius: var(--r-pill);
  background: rgba(225, 222, 245, .12);
  overflow: hidden;
  opacity: 0; animation: boot-fade-1 .5s ease 1s forwards;
}
html[data-theme="light"] .boot-bar { background: rgba(47, 43, 61, .12); }
@keyframes boot-fade-1 { to { opacity: 1; } }
.boot-bar span {
  display: block; height: 100%; width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5558F2, #8487FF);
  animation: boot-sweep 1.15s cubic-bezier(.45, .15, .35, .85) .2s infinite;
}
@keyframes boot-sweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(350%); }
}
/* Minimal/no animations and reduced motion: fully-drawn logo, no theatrics
   (the data-anim="none" global kill handles its animations already). */
html[data-anim="min"] .boot-mark, html[data-anim="min"] .boot-name, html[data-anim="min"] .boot-bar { animation: none; }
html[data-anim="none"] .boot-mark :is(.fw-stem, .fw-top, .fw-mid, .fw-base), html[data-anim="min"] .boot-mark :is(.fw-stem, .fw-top, .fw-mid, .fw-base) { animation: none; transform: none; }
html[data-anim="none"] .boot-name, html[data-anim="min"] .boot-name { opacity: 1; transform: none; }
html[data-anim="none"] .boot-bar, html[data-anim="min"] .boot-bar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .boot-mark, .boot-name, .boot-bar, .boot-bar span { animation: none; }
  .boot-mark :is(.fw-stem, .fw-top, .fw-mid, .fw-base) { animation: none; transform: none; }
  .boot-name { opacity: 1; transform: none; }
  .boot-bar { opacity: 1; }
}

/* ============ Lock screen ============ */
.lock-screen {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--body-bg);
  animation: fade-in var(--dur) var(--ease);
}
/* An explicit display would otherwise beat the [hidden] attribute. */
.lock-screen[hidden] { display: none; }
.lock-card {
  width: min(340px, 90vw);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.8rem;
  text-align: center;
}
.lock-mark {
  width: 54px; height: 54px; margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: var(--primary-soft); color: var(--primary);
}
.lock-card h2 { font-size: 1.15rem; margin-bottom: .3rem; }
.lock-card p { font-size: .86rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.lock-card input {
  width: 100%; height: 46px;
  text-align: center; letter-spacing: .4em; font-size: 1.1rem;
  border: 1px solid var(--input-border); border-radius: var(--r);
  background: var(--body-bg); margin-bottom: .9rem;
}
.lock-card input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.lock-card .btn { width: 100%; }
.lock-card.shake { animation: lock-shake .4s var(--ease); }
@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
/* Unlock: XyrisKey-style login handoff — the lock screen fades away while
   the whole app settles down from a slight zoom, like an app opening. */
.lock-screen.unlocking { pointer-events: none; animation: lock-out .4s ease both; }
@keyframes lock-out { to { opacity: 0; } }
.lock-screen.unlocking .lock-card { animation: lock-card-out .4s var(--ease) both; }
@keyframes lock-card-out { to { opacity: 0; transform: scale(.94) translateY(8px); } }
.app.zoom-enter {
  transform-origin: 50% 40%;
  animation: app-zoom-enter .55s cubic-bezier(.32, .72, 0, 1) both;
}
@keyframes app-zoom-enter { from { opacity: 0; transform: scale(1.1); } }
/* Keep the scaled frame from spawning scrollbars mid-animation. */
html.zoom-clip body { overflow: clip; }
html[data-anim="min"] .app.zoom-enter { animation: fade-in .22s ease both; }

@media (max-width: 900px) {
  .role-grid, .code-grid { grid-template-columns: 1fr; }
}

/* ============ Badges ============ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 600;
  padding: .22rem .62rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============ Tables ============ */
.table-wrap { overflow-x: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
table.dt { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dt th {
  text-align: left;
  font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
.dt th.sortable { cursor: pointer; }
.dt th.sortable:hover { color: var(--text-heading); }
.dt th .sort-arrow { font-size: .8em; margin-left: .2rem; }
.dt td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: .9rem; color: var(--text-body); }
.dt tbody tr { transition: background var(--dur-fast) var(--ease); }
.dt tbody tr:hover { background: var(--hover-bg); }
.dt tbody tr.clickable { cursor: pointer; }
.dt tbody tr:last-child td { border-bottom: none; }
.dt .num { text-align: right; font-variant-numeric: tabular-nums; }
.dt .cell-main { font-weight: 600; color: var(--text-heading); }
.dt .cell-sub { font-size: .8rem; color: var(--text-muted); margin-top: .1rem; }
.row-actions { display: flex; gap: .3rem; justify-content: flex-end; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
/* Filter/sort refresh: fresh rows glide in with a stagger (set inline by
   the view, full-animation mode only). */
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
tr:hover .row-actions, .row-actions:focus-within { opacity: 1; }
@media (hover: none) { .row-actions { opacity: 1; } }

/* ============ Toolbar / filters ============ */
.toolbar { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.5rem; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.filter-input {
  height: 38px;
  padding: 0 .9rem;
  border: 1px solid var(--input-border);
  border-radius: var(--r);
  background: var(--card-bg);
  min-width: 200px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.filter-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
select.filter-input { min-width: 140px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808390' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
  padding-right: 2rem;
}
html[data-theme="dark"] select.filter-input option { background: var(--card-bg); }

/* ---------- Custom filter dropdown ---------- */
.fsel { position: relative; }
.fsel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; height: 38px; padding: 0 .8rem 0 .9rem;
  border: 1px solid var(--input-border); border-radius: var(--r);
  background: var(--card-bg); color: var(--text-body);
  font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fsel-btn svg { color: var(--text-muted); transition: transform .25s var(--ease); flex-shrink: 0; }
.fsel-btn:hover { border-color: rgba(var(--primary-rgb), .55); }
.fsel.open .fsel-btn { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fsel.open .fsel-btn svg { transform: rotate(180deg); }
.fsel-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 80;
  min-width: 100%; padding: .35rem;
  background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: fsel-in .18s cubic-bezier(.2, 0, 0, 1) both;
}
.fsel-menu.closing { animation: fsel-out .15s var(--ease) both; pointer-events: none; }
@keyframes fsel-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes fsel-out { to { opacity: 0; transform: translateY(-4px) scale(.99); } }
.fsel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; padding: .5rem .7rem;
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-sm);
  font-size: .88rem; color: var(--text-body); text-align: left; white-space: nowrap;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.fsel-opt:hover { background: var(--primary-soft); color: var(--primary); }
.fsel-opt.active { color: var(--primary); font-weight: 600; }
.fsel-opt svg { flex-shrink: 0; }

/* ---------- Toolbar checkbox (custom, animated) ---------- */
.fcheck {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .88rem; color: var(--text-body); cursor: pointer; user-select: none;
}
.fcheck input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; margin: 0;
  border: 1.6px solid var(--input-border); border-radius: 5px;
  background: var(--card-bg); cursor: pointer; position: relative;
  transition: background .22s var(--ease), border-color .22s var(--ease),
    box-shadow .22s var(--ease), transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.fcheck input:hover { border-color: var(--primary); }
.fcheck input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.fcheck input:checked {
  background: var(--primary); border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), .32);
  animation: cb-pop .32s cubic-bezier(.34, 1.56, .64, 1);
}
.fcheck input::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transform-origin: 60% 60%;
  opacity: 0;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1) .05s, opacity .15s ease .05s;
}
.fcheck input:checked::after { transform: rotate(45deg) scale(1); opacity: 1; }
.seg { display: inline-flex; background: var(--track-bg); border-radius: var(--r); padding: 3px; gap: 2px; }
.seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  border: none; background: transparent; cursor: pointer;
  padding: .35rem .8rem; border-radius: var(--r-sm);
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.seg button.active { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-xs); }
/* In page headers a switch is as tall as the 36px buttons beside it. */
.page-head .seg { height: 36px; align-items: stretch; }
.page-head .seg button { padding-top: 0; padding-bottom: 0; }

/* ============ Forms ============ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .95rem 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-bottom: .3rem; }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%;
  height: 40px;
  padding: 0 .85rem;
  border: 1px solid var(--input-border);
  border-radius: var(--r);
  background: var(--card-bg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { height: auto; min-height: 84px; padding: .6rem .85rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.field input.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.field .hint { font-size: .76rem; color: var(--text-light); margin-top: .25rem; }
.field select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808390' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2rem;
}
html[data-theme="dark"] .field select option { background: var(--card-bg); }

/* ============ Modal ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(var(--ink), .45);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 1.25rem;
  animation: fade-in var(--dur-fast) var(--ease);
  overflow-y: auto;
}
@keyframes fade-in { from { opacity: 0; } }
.modal {
  background: var(--card-bg);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 640px;
  max-height: calc(100vh / var(--zoom, 1) - 3rem);
  display: flex; flex-direction: column;
  animation: modal-in var(--dur) var(--ease);
}
.modal.modal-sm { max-width: 440px; }
.modal.modal-lg { max-width: 840px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
/* Closing mirrors the entrance so dismissing never feels abrupt. */
.modal-overlay.closing { animation: fade-out .19s var(--ease) forwards; pointer-events: none; }
.modal-overlay.closing .modal { animation: modal-out .19s var(--ease) forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes modal-out { to { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.5rem .9rem; }
.modal-head h3 { margin: 0; font-size: 1.12rem; }
.modal-body { padding: .4rem 1.5rem 1.2rem; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.5rem 1.35rem; border-top: 1px solid var(--border); }
.modal-close {
  border: none; background: transparent; cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  color: var(--text-muted); font-size: 1.3rem; line-height: 1;
}
.modal-close:hover { background: var(--hover-bg); color: var(--text-heading); }

/* ============ Toasts ============ */
.toast-root { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; }
.toast {
  --tc: var(--primary);
  display: flex; align-items: center; gap: .7rem;
  min-width: 230px; max-width: 380px; margin-top: .6rem;
  padding: .7rem 1.05rem .7rem .75rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card-bg); color: var(--text-heading);
  box-shadow: 0 12px 32px -10px rgba(15, 16, 30, .3), 0 2px 6px rgba(15, 16, 30, .06);
  font-size: .9rem; font-weight: 500; line-height: 1.35;
  cursor: default; overflow: hidden;
  animation: toast-in .5s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-theme="dark"] .toast { box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .25); }
.toast.success { --tc: var(--success); }
.toast.danger { --tc: var(--danger); }
.toast.warning { --tc: var(--warning); }
/* A filled dot whose mark draws itself in. */
.toast-ico {
  flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 72%, #fff), var(--tc) 60%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 15%, transparent), 0 4px 10px -2px color-mix(in srgb, var(--tc) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28);
  animation: toast-pop .5s cubic-bezier(.34, 1.56, .64, 1) .06s backwards;
}
.toast-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15)); }
.toast-ico path { stroke-dasharray: 1; animation: toast-draw .42s cubic-bezier(.65, 0, .35, 1) .26s backwards; }
.toast-ico circle { fill: currentColor; stroke: none; transform-origin: 12px 16.6px; animation: toast-dot .3s cubic-bezier(.34, 1.56, .64, 1) .5s backwards; }
.toast-msg { min-width: 0; }
.toast.leaving { animation: toast-out .22s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(28px) scale(.98); } }
@keyframes toast-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes toast-draw { from { stroke-dashoffset: 1; } }
@keyframes toast-dot { from { transform: scale(0); } }
@media (max-width: 560px) {
  .toast-root { left: 1rem; right: 1rem; bottom: 1rem; align-items: stretch; }
  .toast { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .toast, .toast-ico, .toast-ico path, .toast-ico circle { animation: none; } }

/* ============ Empty state ============ */
.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
}
.empty .empty-art {
  width: 74px; height: 74px; margin: 0 auto 1rem;
  border-radius: var(--r-xl);
  background: var(--primary-soft);
  display: grid; place-items: center;
  color: var(--primary);
}
.empty h3 { font-size: 1.02rem; }
.empty p { font-size: .88rem; max-width: 380px; margin: 0 auto 1.1rem; }

/* ============ Charts ============ */
.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.chart-svg { width: 100%; height: auto; display: block; }
/* Tooltip: pops in above the hovered point, then glides between points. */
.chart-tip {
  position: fixed; z-index: 90; pointer-events: none; left: 0; top: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: .5rem .75rem .55rem;
  font-size: .8rem;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 6px)) scale(.92);
  transform-origin: 50% 100%;
  transition: opacity .16s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1), left .24s cubic-bezier(.22, 1, .36, 1), top .24s cubic-bezier(.22, 1, .36, 1);
}
.chart-tip.instant { transition: opacity .16s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1); }
.chart-tip.show { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
.chart-tip::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px;
  background: var(--card-bg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg);
}
.chart-tip .tip-label { display: flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .72rem; font-weight: 600; }
.chart-tip .tip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chart-tip .tip-value { margin-top: .1rem; font-weight: 700; font-size: .9rem; color: var(--text-heading); font-variant-numeric: tabular-nums; }

/* Line chart: a guide line, the dot grows with a soft halo, the rest dim. */
.chart-svg .pt { cursor: crosshair; }
.chart-svg .pt .guide { stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; transition: opacity .2s ease; }
.chart-svg .pt .halo { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.chart-svg .pt .dot { transition: r .3s cubic-bezier(.34, 1.56, .64, 1), stroke-width .2s ease, opacity .2s ease; }
.chart-svg .pt.on .guide { opacity: .45; }
.chart-svg .pt.on .halo { opacity: .18; transform: scale(1); }
.chart-svg .pt.on .dot { r: 6.5; stroke-width: 3; }
.chart-svg.hovering .pt:not(.on) .dot { opacity: .45; }
html[data-anim="full"] .area-chart .area-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chart-draw 1.1s cubic-bezier(.22, 1, .36, 1) .1s forwards; }
html[data-anim="full"] .area-chart .area-fill { animation: chart-fade .9s ease .35s backwards; }
html[data-anim="full"] .area-chart .pt .dot { animation: chart-pop .45s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(.35s + var(--i, 0) * 60ms); transform-box: fill-box; transform-origin: center; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-fade { from { opacity: 0; } }
@keyframes chart-pop { from { opacity: 0; transform: scale(0); } }

/* Bars: the hovered bar brightens and shows its value; the rest fade back. */
.chart-svg .bar-g { cursor: pointer; }
.chart-svg .bar-g .col { fill: var(--text-heading); opacity: 0; transition: opacity .2s ease; }
.chart-svg .bar-g .bar { opacity: .9; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .25s ease, filter .25s ease; }
.chart-svg .bar-g .bar.neg { transform-origin: 50% 0; }
.chart-svg .bar-g .bar-val { opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.chart-svg .bar-g.on .col { opacity: .04; }
.chart-svg .bar-g.on .bar { opacity: 1; filter: brightness(1.12) drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.chart-svg .bar-g.on .bar-val { opacity: 1; transform: none; }
.chart-svg.hovering .bar-g:not(.on) .bar { opacity: .35; }
html[data-anim="full"] .bar-chart .bar { animation: chart-grow .7s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(.1s + var(--i, 0) * 55ms); }
@keyframes chart-grow { from { transform: scaleY(0); } }

/* Donut: the hovered slice thickens and the centre shows its share. */
.chart-svg .seg { cursor: pointer; transition: stroke-width .3s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease; }
.chart-svg .seg.on { stroke-width: var(--thick-on); }
.chart-svg.hovering .seg:not(.on) { opacity: .4; }
.chart-svg .swap { animation: chart-swap .3s cubic-bezier(.22, 1, .36, 1); }
@keyframes chart-swap { from { opacity: 0; transform: translateY(4px); } }
.chart-svg .d-val, .chart-svg .d-lab { transform-box: fill-box; }
html[data-anim="full"] .donut-chart .seg { animation: chart-spin .8s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes chart-spin { from { opacity: 0; } }
.legend-row { transition: opacity .2s ease; cursor: default; }
.legend-row[data-hl] { cursor: pointer; }
.legend-row.dim { opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  .chart-tip, .chart-svg .pt .dot, .chart-svg .pt .halo, .chart-svg .bar-g .bar, .chart-svg .bar-g .bar-val, .chart-svg .seg { transition: none; }
  .area-chart .area-line, .area-chart .area-fill, .area-chart .pt .dot, .bar-chart .bar, .donut-chart .seg, .chart-svg .swap { animation: none !important; stroke-dashoffset: 0 !important; }
}
.legend { display: flex; flex-direction: column; gap: .75rem; }
.legend-row { display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.legend-row .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-row .lg-label { color: var(--text-body); }
.legend-row .lg-val { margin-left: auto; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.legend-row .lg-pct { color: var(--text-muted); font-size: .78rem; width: 38px; text-align: right; }
.bar-track { height: 6px; background: var(--track-bg); border-radius: var(--r-pill); overflow: hidden; margin-top: .3rem; }
.bar-fill { height: 100%; border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease); }

/* ============ Timeline / activity ============ */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: .85rem; padding: .55rem 0; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .4rem; flex-shrink: 0; }
.tl-body { flex: 1; min-width: 0; }
.tl-text { font-size: .88rem; color: var(--text-body); }
.tl-time { font-size: .74rem; color: var(--text-light); }

/* ============ Grade chips ============ */
.grade {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  font-weight: 800; font-size: .78rem;
}
.grade-A { background: var(--success-soft); color: var(--success); }
.grade-B { background: var(--info-soft); color: var(--info); }
.grade-C { background: var(--warning-soft); color: var(--warning); }
.grade-D { background: var(--danger-soft); color: var(--danger); }

/* ============ Settings (five tabs) ============ */
/* Short setting rows (label left, control right) and compact forms. */
.stx-body { width: 100%; }
.stx-group { margin: 1.7rem 0 .65rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); scroll-margin-top: calc(var(--header-h) + 2rem); }
.stx-group:first-child { margin-top: .2rem; }
.stx-row { display: flex; align-items: center; gap: .7rem 1.2rem; flex-wrap: wrap; padding: .9rem 1.25rem; border-top: 1px solid var(--border); }
.stx-row:first-child { border-top: 0; }
.stx-l { flex: 1 1 220px; min-width: 0; }
.stx-l strong { display: flex; align-items: center; gap: .1rem; font-size: .9rem; font-weight: 600; color: var(--text-heading); }
.stx-l small { display: block; margin-top: .12rem; font-size: .78rem; color: var(--text-muted); }
.stx-r { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; margin-left: auto; }
.stx-r .tswitch { margin-left: 0; }
.stx-select, .stx-num {
  height: 38px; padding: 0 .8rem; border: 1px solid var(--input-border); border-radius: var(--r); background-color: var(--card-bg); color: var(--text-heading);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.stx-select {
  min-width: 230px; padding-right: 2rem; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808390' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}
.stx-select:disabled, .stx-num:disabled { opacity: .6; cursor: not-allowed; }
.stx-num { width: 150px; font-variant-numeric: tabular-nums; }
.stx-select:focus, .stx-num:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.stx-val { font-size: .88rem; font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.stx-pill { display: inline-flex; align-items: center; gap: .35rem; height: 22px; padding: 0 .6rem; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.stx-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stx-pill.ok { color: var(--success); background: var(--success-soft); }
.stx-pill.warn { color: var(--warning); background: var(--warning-soft); }
.stx-pill.pri { color: var(--primary); background: var(--primary-soft); }
.stx-pill.info { color: var(--info); background: var(--info-soft); }
.stx-pill.mut { color: var(--text-muted); background: var(--track-bg); }
.stx-form { padding: 1.15rem 1.25rem 1.25rem; }
.stx-h { margin: 0 0 .9rem; font-size: .98rem; font-weight: 600; }
.stx-ex { margin-top: .3rem; font-size: .76rem; color: var(--text-light); }
.stx-ex b { font-family: var(--font-mono); font-weight: 600; color: var(--primary); }

/* Profile */
.stx-prof { display: flex; align-items: center; gap: 1.1rem; padding: 1.2rem 1.25rem; }
.stx-ava {
  width: 64px; height: 64px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, #7367f0, #9e95f5); color: #fff; font-size: 1.3rem; font-weight: 800;
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), .35);
}
.stx-prof h3 { margin: 0; font-size: 1.15rem; }
.stx-prof small { display: block; margin-top: .15rem; font-size: .84rem; color: var(--text-muted); }
.stx-prof .stx-pill { margin-top: .5rem; }

/* How the shop header prints */

/* Theme choice */
.stx-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.stx-th {
  padding: .55rem; border: 1.5px solid var(--border); border-radius: var(--r-lg); background: transparent; cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.stx-th:hover { border-color: rgba(var(--primary-rgb), .45); }
.stx-th.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.stx-th-pv { height: 78px; display: grid; grid-template-columns: 26% 1fr; overflow: hidden; border-radius: 8px; }
.stx-th-pv i { display: block; }
.stx-th-pv > span { display: grid; align-content: start; gap: 6px; padding: 9px; }
.stx-th-pv b { display: block; height: 7px; border-radius: 4px; }
.stx-th-pv b:nth-child(1) { width: 70%; background: #7367f0 !important; }
.stx-th-pv b:nth-child(2) { width: 90%; }
.stx-th-pv b:nth-child(3) { width: 55%; }
.stx-th-pv.light { background: #f8f7fa; }
.stx-th-pv.light i { background: #fff; border-right: 1px solid #e6e5ea; }
.stx-th-pv.light b { background: #dcdbe2; }
.stx-th-pv.dark { background: #25293c; }
.stx-th-pv.dark i { background: #2f3349; }
.stx-th-pv.dark b { background: #44495f; }
.stx-th-pv.system { background: linear-gradient(90deg, #f8f7fa 50%, #25293c 50%); }
.stx-th-pv.system i { background: linear-gradient(90deg, #fff 50%, #2f3349 50%); }
.stx-th-pv.system b { background: linear-gradient(90deg, #dcdbe2 50%, #44495f 50%); }
.stx-th strong { display: flex; align-items: center; gap: .4rem; margin: .55rem .2rem .1rem; font-size: .86rem; color: var(--text-heading); }
.stx-th.on strong svg { color: var(--primary); }

/* Members */
.stx-mem { display: grid; grid-template-columns: minmax(0, 1.5fr) 130px 110px 100px 40px; gap: 1rem; align-items: center; padding: .75rem 1.5rem; border-top: 1px solid var(--border); font-size: .88rem; }
.stx-who { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.stx-mava { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: .72rem; font-weight: 800; }
.stx-who strong { display: block; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-who small { display: block; font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-pin { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--text-muted); }
.stx-danger { border-color: rgba(var(--danger-rgb), .35); }
.stx-danger .stx-l strong { color: var(--danger); }

/* One save bar for every form on the tab */
.stx-savebar {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: .8rem;
  padding: .55rem .55rem .55rem 1.1rem; border-radius: var(--r-lg); background: #1f2233; color: #e1def5; box-shadow: var(--shadow-lg);
  font-size: .88rem; font-weight: 600; animation: stx-bar-in .3s cubic-bezier(.22, 1, .36, 1);
}
.stx-savebar[hidden] { display: none; }
.stx-savebar span { white-space: nowrap; }
.stx-savebar span i { font-style: normal; }
.stx-savebar span i + i { display: none; }
.stx-discard { border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #e1def5; }
.stx-discard:hover { background: rgba(255, 255, 255, .08); }
@keyframes stx-bar-in { from { opacity: 0; transform: translate(-50%, 10px); } }
/* Centre over the page column, not the whole window. */
@media (min-width: 901px) {
  .stx-savebar { left: calc(50% + var(--sidebar-w) / 2); }
  body:has(.app.side-collapsed) .stx-savebar { left: calc(50% + var(--sidebar-collapsed-w) / 2); }
}
@media (max-width: 760px) {
  .stx-select { min-width: 0; max-width: 100%; }
  .stx-mem { grid-template-columns: minmax(0, 1fr) auto 32px; padding: .7rem 1rem; }
  .stx-mem > :nth-child(3), .stx-mem > :nth-child(4) { display: none; }
  .stx-themes { gap: .5rem; }
  .stx-th-pv { height: 58px; }
  .stx-savebar { left: 1rem; right: 1rem; transform: none; justify-content: flex-end; }
  .stx-savebar { gap: .5rem; padding-left: .9rem; justify-content: flex-start; }
  .stx-savebar span { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .stx-savebar .btn { flex-shrink: 0; }
  .stx-savebar .btn svg { display: none; }
  .stx-savebar span i:first-child { display: none; }
  .stx-savebar span i + i { display: inline; }
  @keyframes stx-bar-in { from { opacity: 0; transform: translateY(10px); } }
}
@media (prefers-reduced-motion: reduce) { .stx-savebar { animation: none; } }

/* Settings logs: security activity, activity log, time on the counter */
.stx-log { overflow: hidden; }
.stx-log-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem .7rem; }
.stx-log-h h3 { display: flex; align-items: center; gap: .1rem; margin: 0; font-size: .98rem; font-weight: 600; }
.stx-day { padding: .75rem 1.25rem .35rem; border-top: 1px solid var(--border); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); }
.stx-act-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 72px; gap: .8rem; align-items: center; padding: .6rem 1.25rem; border-top: 1px solid var(--border); font-size: .86rem; }
.stx-log > .stx-act-row:first-child, .stx-day + .stx-act-row { border-top: 0; }
.stx-act-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.stx-act-ico.ok { background: var(--success-soft); color: var(--success); }
.stx-act-ico.warn { background: var(--warning-soft); color: var(--warning); }
.stx-act-ico.pri { background: var(--primary-soft); color: var(--primary); }
.stx-act-ico.info { background: var(--info-soft); color: var(--info); }
.stx-act-ico.mut { background: var(--track-bg); color: var(--text-muted); }
.stx-act-text { min-width: 0; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-act-who { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.stx-mava.sm { width: 22px; height: 22px; font-size: .58rem; }
.stx-act-time { text-align: right; font-size: .78rem; color: var(--text-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stx-more { display: block; width: 100%; padding: .75rem; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--primary); font-size: .84rem; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.stx-more:hover { background: var(--hover-bg); }
.stx-log-empty { margin: 0; padding: 1.6rem 1.25rem; text-align: center; font-size: .86rem; color: var(--text-muted); }
.stx-log-h + .stx-log-empty { border-top: 1px solid var(--border); }
.stx-log-modal { max-height: 62vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.stx-act-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.stx-shift { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .75rem 1.25rem; border-top: 1px solid var(--border); }
.stx-shift-t { min-width: 0; }
.stx-shift-t strong { display: block; font-size: .9rem; font-weight: 600; color: var(--text-heading); }
.stx-shift-t small { display: block; margin-top: .1rem; font-size: .78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.stx-shift-r { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.stx-shift-r b { font-size: .95rem; color: var(--text-heading); font-variant-numeric: tabular-nums; }

/* Daily goals: one slim card, three targets side by side */
.stx-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stx-goal { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .8rem 1.25rem; cursor: text; }
.stx-goal + .stx-goal { border-left: 1px solid var(--border); }
.stx-goal-ico { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; }
.stx-goal-ico.ok { background: var(--success-soft); color: var(--success); }
.stx-goal-ico.warn { background: var(--warning-soft); color: var(--warning); }
.stx-goal-ico.pri { background: var(--primary-soft); color: var(--primary); }
.stx-goal-t { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-goal-in {
  flex-shrink: 0; width: 138px; height: 38px; display: flex; align-items: center; gap: .35rem; padding: 0 .75rem;
  border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.stx-goal-in:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.stx-goal-in input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none; font-size: .98rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.stx-goal-in input::placeholder { color: var(--text-light); }
.stx-goal-in em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.stx-goal-in input:disabled { cursor: not-allowed; }
@media (max-width: 1400px) {
  .stx-goals { grid-template-columns: minmax(0, 1fr); }
  .stx-goal + .stx-goal { border-left: 0; border-top: 1px solid var(--border); }
}

/* Roles: who can do what */
.modal.stx-roles-modal { max-width: 920px; }
.stx-roles { overflow-x: auto; margin: 0 -.3rem; }
.stx-roles-row { display: grid; grid-template-columns: minmax(210px, 1.5fr) repeat(4, minmax(110px, 1fr)); align-items: center; min-width: 660px; border-top: 1px solid var(--border); }
.stx-roles-row > * { padding: .7rem .6rem; }
.stx-roles-row > :not(:first-child) { display: grid; place-items: center; text-align: center; }
.stx-roles-head { border-top: 0; align-items: stretch; }
.stx-roles-head > :not(:first-child) { display: flex; }
.stx-role { flex-direction: column; align-items: center; gap: .15rem; padding: .4rem .5rem 1rem !important; }
.stx-role.rc-primary { --rc: var(--primary); --rc-soft: var(--primary-soft); }
.stx-role.rc-info { --rc: var(--info); --rc-soft: var(--info-soft); }
.stx-role.rc-success { --rc: var(--success); --rc-soft: var(--success-soft); }
.stx-role.rc-secondary { --rc: var(--text-muted); --rc-soft: var(--track-bg); }
.stx-role-ico { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: .4rem; border-radius: 12px; background: var(--rc-soft); color: var(--rc); }
.stx-role strong { font-size: .94rem; color: var(--text-heading); }
.stx-role small { font-size: .74rem; color: var(--text-muted); }
.stx-role em { margin-top: .3rem; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--text-light); }
.stx-roles-l { font-size: .88rem; color: var(--text-body); }
.stx-yes { color: var(--success); }
.stx-yes svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--success-soft); }
.stx-no { color: var(--text-light); font-weight: 600; }
@media (max-width: 1000px) { .stx-act-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .stx-act-row { grid-template-columns: 30px minmax(0, 1fr) auto; padding: .6rem 1rem; }
  .stx-act-who { display: none; }
  .stx-log-h { flex-wrap: wrap; padding: .85rem 1rem .6rem; }
}

/* Gliding pill behind the active tab (glide() in components.js) */
.has-glide { position: relative; }
.glide-thumb {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1), width .42s cubic-bezier(.22, 1, .36, 1), height .42s cubic-bezier(.22, 1, .36, 1), opacity .2s;
}
.has-glide > :not(.glide-thumb) { position: relative; z-index: 1; }
.has-glide > button { transition: color .32s cubic-bezier(.22, 1, .36, 1), background var(--dur-fast) var(--ease); }
.has-glide > .active, .has-glide > .active:hover, .seg.has-glide > button.active { background: transparent; box-shadow: none; }
.set-tabs > .glide-thumb { border-radius: var(--r); background: var(--primary-gradient); box-shadow: var(--shadow-primary); }
.set-tabs.has-glide .set-tab.active::after { content: none; }
.set-tabs > .glide-thumb::after {
  content: ''; position: absolute; inset: -1.5px; padding: 1.5px; border-radius: calc(var(--r) + 1.5px);
  background: conic-gradient(from var(--nav-angle), transparent 0turn, transparent .7turn, rgba(255, 255, 255, .75) .85turn, transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: nav-orbit 3.4s linear infinite;
}
.notif-filters > .glide-thumb { border-radius: var(--r-pill); background: var(--primary-soft); }
.seg > .glide-thumb { border-radius: var(--r-sm); background: var(--card-bg); box-shadow: var(--shadow-xs); }
@media (prefers-reduced-motion: reduce) { .glide-thumb { transition: none; } .set-tabs > .glide-thumb::after { animation: none; opacity: 0; } }

/* Animated dropdowns replacing plain <select>s (enhanceSelects) */
.xsel > select { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.xsel .fsel-btn { color: var(--text-heading); }
.xsel .fsel-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xsel .fsel-btn:disabled { opacity: .6; cursor: not-allowed; }
.xsel .fsel-btn:disabled:hover { border-color: var(--input-border); }
.xsel .fsel-btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.xsel-row { min-width: 230px; }
.xsel-field { width: 100%; }
.xsel-field .fsel-btn { height: 40px; padding: 0 .8rem 0 .85rem; font-size: .9rem; font-weight: 400; }
.xsel .fsel-menu { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.xsel .fsel-menu.up { top: auto; bottom: calc(100% + 6px); animation-name: fsel-in-up; }
.xsel .fsel-menu.up.closing { animation-name: fsel-out-up; }
.fsel-opt:focus-visible { outline: none; background: var(--primary-soft); color: var(--primary); }
.fsel-opt:disabled { opacity: .5; cursor: default; }
@keyframes fsel-in-up { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes fsel-out-up { to { opacity: 0; transform: translateY(4px) scale(.99); } }
@media (max-width: 760px) { .xsel-row { min-width: 0; width: 100%; } }

/* ============ IMEI chip ============ */
.imei-chip {
  font-family: var(--font-mono); font-size: .8rem;
  white-space: nowrap;
  background: var(--hover-bg);
  border: 1px solid var(--border);
  padding: .18rem .5rem;
  border-radius: var(--r-sm);
  cursor: copy;
  color: var(--text-body);
  transition: all var(--dur-fast) var(--ease);
}
.imei-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ============ Staff switcher ============ */
/* One calm, centred screen: the time and a greeting, the team as glass tiles,
   and the PIN boxes sliding in under whoever was picked. Behind it, soft orbs
   drift and sparks ride a fan of light ribbons, like the landing hero. */
.staff-screen {
  --lift-ease: cubic-bezier(.22, 1, .36, 1);
  --ss-base: #f4f3fb; --ss-base2: #ebe8fb;
  --ss-text: #2f2b3d; --ss-muted: rgba(47, 43, 61, .58); --ss-faint: rgba(47, 43, 61, .42);
  --ss-tile: rgba(255, 255, 255, .62); --ss-tile-hover: rgba(255, 255, 255, .85); --ss-line: rgba(47, 43, 61, .09);
  --ss-orb: .5; --ss-ribbon: .55; --ss-vignette: rgba(244, 243, 251, .7);
  --ss-card-shadow: 0 24px 60px -30px rgba(47, 43, 61, .28);
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  color: var(--ss-text);
  background: radial-gradient(120% 90% at 50% 0%, var(--ss-base2), var(--ss-base) 60%);
  overflow-y: auto; overflow-x: hidden;
  animation: fade-in var(--dur) var(--ease);
}
[data-theme="dark"] .staff-screen {
  --ss-base: #171a2b; --ss-base2: #22264a;
  --ss-text: #f1effc; --ss-muted: rgba(225, 222, 245, .62); --ss-faint: rgba(225, 222, 245, .42);
  --ss-tile: rgba(255, 255, 255, .045); --ss-tile-hover: rgba(255, 255, 255, .08); --ss-line: rgba(225, 222, 245, .1);
  --ss-orb: .55; --ss-ribbon: 1; --ss-vignette: rgba(23, 26, 43, .72);
  --ss-card-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65);
}
.staff-screen[hidden] { display: none; }
/* The app page behind would otherwise show its own scrollbar through the overlay. */
html:has(.staff-screen:not([hidden])) { overflow: hidden; }
/* Leaving: fade the screen while the app zooms in behind it (see lock screen). */
.staff-screen.unlocking { pointer-events: none; animation: lock-out .4s ease both; }
.staff-screen.unlocking :is(.staff-pick, .ss-side) { animation: lock-card-out .4s var(--ease) both; }

/* backdrop */
.ss-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ss-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--ss-orb); will-change: transform; }
.ss-orb.o1 { width: 520px; height: 520px; left: -140px; top: -160px; background: radial-gradient(circle, #7367f0, transparent 68%); animation: ss-drift1 26s ease-in-out infinite alternate; }
.ss-orb.o2 { width: 460px; height: 460px; right: -120px; top: 12%; background: radial-gradient(circle, #a855f7, transparent 68%); animation: ss-drift2 30s ease-in-out infinite alternate; }
.ss-orb.o3 { width: 600px; height: 600px; right: 8%; bottom: -300px; background: radial-gradient(circle, #4f46e5, transparent 66%); animation: ss-drift3 34s ease-in-out infinite alternate; }
.ss-orb.o4 { width: 340px; height: 340px; left: 12%; bottom: 6%; background: radial-gradient(circle, #00cfe8, transparent 70%); opacity: calc(var(--ss-orb) * .45); animation: ss-drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes ss-drift1 { to { transform: translate(120px, 80px) scale(1.12); } }
@keyframes ss-drift2 { to { transform: translate(-140px, 90px) scale(.9); } }
@keyframes ss-drift3 { to { transform: translate(-110px, -70px) scale(1.08); } }
.ss-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--ss-ribbon); transform-origin: 60% 70%; animation: ss-ribbon 24s ease-in-out infinite alternate; }
@keyframes ss-ribbon { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.025) rotate(-.6deg); } 100% { transform: scale(1.04) rotate(.5deg); } }
.ss-sparks { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; transform-origin: 0 0; }
.ss-sparks i {
  position: absolute; top: 0; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #b9a9ff 55%, rgba(143, 110, 242, 0) 78%);
  box-shadow: 0 0 10px 2px rgba(143, 110, 242, .55); offset-rotate: 0deg;
  animation: ss-ride 11s linear infinite;
}
@keyframes ss-ride { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* A soft pool of the base colour behind the content keeps the text crisp over the ribbons. */
.ss-vignette { position: absolute; inset: 0; background: radial-gradient(46% 42% at 50% 46%, var(--ss-vignette), transparent 72%); }

/* frame: the day and the shop on the left, the profile card on the right */
.staff-main {
  position: relative; z-index: 1; flex: 1; width: min(1100px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: 3rem clamp(2rem, 6vw, 5.5rem);
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.5rem);
}

/* left: greeting, time, date, then the quote of the day — one left edge, one rhythm */
.ss-side { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; animation: staff-card-in .7s var(--lift-ease) backwards; }
@keyframes staff-card-in { from { opacity: 0; transform: translateY(12px); } }
.ss-greet { margin: 0; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.ss-time { display: block; margin-top: .55rem; font-size: clamp(3.5rem, 6vw, 4.75rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ss-text); }
.ss-time small { margin-left: .12em; font-size: .3em; font-weight: 600; letter-spacing: 0; color: var(--ss-muted); }
.ss-when { display: block; margin-top: .6rem; font-size: 1.05rem; font-weight: 500; color: var(--ss-muted); }
.ss-rule { display: block; width: 36px; height: 2px; margin: 1.75rem 0 1.5rem; border-radius: 2px; background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), .25)); }
.ss-quote { margin: 0; max-width: 24rem; }
.ss-quote blockquote { margin: 0; font-size: .95rem; font-weight: 500; line-height: 1.55; letter-spacing: -.005em; color: var(--ss-text); opacity: .86; }
.ss-quote figcaption { margin-top: .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-faint); }

/* bottom bar: brand and today's numbers */
.staff-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem .9rem; padding: 0 1rem 1.5rem; font-size: .78rem; color: var(--ss-faint); }
.staff-foot > i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.staff-foot b { color: var(--ss-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-mark { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ss-muted); }
.ss-mark svg { width: 16px; height: 16px; }

/* right: one card listing everyone */
.staff-pick { width: 100%; outline: none; animation: staff-card-in .7s var(--lift-ease) .08s backwards; }
.ss-title { margin: 0 0 .75rem .3rem; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ss-muted); }
.staff-list {
  display: flex; flex-direction: column; gap: 2px; padding: .5rem; border-radius: 20px;
  background: var(--ss-tile); border: 1px solid var(--ss-line); box-shadow: var(--ss-card-shadow);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.staff-item { border-radius: 14px; animation: staff-item-in .5s var(--lift-ease) backwards; animation-delay: calc(var(--i, 0) * 50ms + 160ms); transition: opacity .35s var(--lift-ease), background .25s var(--lift-ease); }
@keyframes staff-item-in { from { opacity: 0; transform: translateY(8px); } }
.staff-item.open { background: var(--ss-tile-hover); }
.staff-row {
  width: 100%; display: flex; align-items: center; gap: .9rem; padding: .75rem .85rem;
  border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .25s var(--lift-ease);
}
.staff-item:not(.disabled):not(.open) .staff-row:hover { background: var(--ss-tile-hover); }
.staff-row:focus-visible { outline: none; background: var(--ss-tile-hover); box-shadow: inset 0 0 0 1.5px rgba(var(--primary-rgb), .4); }
.staff-row[disabled] { cursor: not-allowed; }
.staff-item.disabled { opacity: .5; }
.staff-list.picking .staff-item:not(.open) { opacity: .5; }
.staff-list.picking .staff-item:not(.open):not(.disabled):hover { opacity: .85; }
.ss-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.staff-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; font-weight: 600; color: var(--ss-text); }
.staff-role { font-size: .78rem; color: var(--ss-muted); }
.ss-tag { flex-shrink: 0; padding: .2rem .5rem; border-radius: 6px; font-size: .7rem; font-weight: 600; color: var(--success); background: rgba(var(--success-rgb), .14); }
.ss-chev { flex-shrink: 0; color: var(--ss-faint); transition: transform .35s var(--lift-ease), color .25s; }
.staff-item.open .ss-chev { transform: rotate(90deg); color: var(--ss-muted); }
.staff-ava {
  position: relative; width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 50%; color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  --c1: #7367f0; --c2: #9e95f5; --glow: 115, 103, 240;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 4px 14px rgba(var(--glow), .35), inset 0 0 0 2px rgba(255, 255, 255, .14);
  transition: transform .45s var(--lift-ease), box-shadow .45s var(--lift-ease);
}
.staff-ava.tone-info    { --c1: #00b8cf; --c2: #4fe0f2; --glow: 0, 207, 232; }
.staff-ava.tone-success { --c1: #22b365; --c2: #5ddc97; --glow: 40, 199, 111; }
.staff-ava.tone-warning { --c1: #f7902f; --c2: #ffbb7a; --glow: 255, 159, 67; }
.staff-ava.tone-danger  { --c1: #e0485e; --c2: #f7828f; --glow: 234, 84, 85; }
.staff-ava.tone-violet  { --c1: #b04fe0; --c2: #d68cf5; --glow: 176, 79, 224; }
.staff-row .staff-ava { width: 42px; height: 42px; border-radius: 12px; font-size: .86rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.staff-item.disabled .staff-ava { background: var(--ss-line); color: var(--ss-faint); box-shadow: none; }

/* PIN: four dots over one real (invisible) input, so typing, paste and the
   phone's number keyboard all just work. Opens under the chosen row. */
.staff-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--lift-ease); }
.staff-panel.open { grid-template-rows: 1fr; }
.staff-panel-in { overflow: hidden; min-height: 0; }
.staff-pin { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .3rem 0 .9rem; opacity: 0; transition: opacity .3s var(--lift-ease) .08s; }
.staff-panel.open .staff-pin { opacity: 1; }
.ss-pin-for { font-size: .8rem; color: var(--ss-muted); }
.staff-boxes { position: relative; display: flex; gap: .75rem; padding: .35rem .5rem; cursor: text; }
.staff-boxes input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  border: 0; padding: 0; font-size: 16px; caret-color: transparent; color: transparent; background: transparent;
}
.staff-boxes i {
  width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ss-muted);
  transition: background .2s, border-color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
.staff-boxes i.on { background: var(--ss-text); border-color: var(--ss-text); transform: scale(1.08); }
/* Where the next digit lands, while the input has focus. */
.staff-boxes:focus-within i.next { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .22); }
/* Wrong PIN: the dots turn red together for the length of the shake. */
.staff-boxes.bad { animation: lock-shake .4s var(--ease); }
.staff-boxes.bad i, .staff-boxes.bad:focus-within i.next { border-color: var(--danger); background: var(--danger); box-shadow: none; }
.staff-boxes.ok i { border-color: var(--success); background: var(--success); }
.staff-err { min-height: 1.1em; margin: -.35rem 0 -.5rem; font-size: .8rem; color: var(--danger); font-weight: 600; }

@media (max-width: 860px) {
  .staff-main { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 1.75rem; padding: 1.5rem 1rem 2rem; }
  .ss-side { padding-top: .5rem; }
  .ss-time { font-size: 3rem; }
  .ss-when { font-size: .95rem; }
  .ss-rule { margin: 1.1rem 0 1rem; }
  .ss-quote blockquote { font-size: .88rem; }
  .staff-foot { gap: .4rem .65rem; font-size: .74rem; }
  .staff-foot .brand-wm { display: none; }
  .ss-orb { filter: blur(56px); }
}
/* Reduced motion / minimal animation: keep the fades, drop the movement. */
html[data-anim="min"] :is(.staff-pick, .ss-side, .staff-item) { animation: fade-in .2s ease backwards; animation-delay: 0s; }
html[data-anim="none"] :is(.staff-pick, .ss-side, .staff-item) { animation: none; }
html[data-anim="none"] .ss-orb, html[data-anim="none"] .ss-ribbons { animation: none; }
html[data-anim="none"] .ss-sparks, html[data-anim="min"] .ss-sparks { display: none; }
@media (prefers-reduced-motion: reduce) {
  .staff-pick, .ss-side, .staff-item, .staff-screen, .ss-orb, .ss-ribbons { animation: none; }
  .ss-sparks { display: none; }
}


/* ============ Tickets board (urgency lanes) ============ */
/* Open work sorted by what needs doing: overdue, due today, queue, ready.
   Stage lives on each card as a pill that doubles as a menu. */
.tk-head { align-items: center; margin-bottom: 1rem; }
.tk-head h1 { display: flex; align-items: baseline; gap: .6rem; }
.tk-count { font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.tk-head .page-actions { align-items: center; }
.tk-search { position: relative; }
.tk-search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; }
.tk-search input {
  height: 36px; width: 240px; padding: 0 .8rem 0 2.25rem;
  border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-heading);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tk-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tk-head .seg button { display: inline-flex; align-items: center; gap: .35rem; }
.tk-icon-btn { width: 36px; height: 36px; padding: 0; }

.tk-quick { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tk-quick[hidden] { display: none; }
.tk-chip {
  display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .8rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent;
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tk-chip b { font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.tk-chip.tone-danger b { color: var(--danger); }
.tk-chip:hover { border-color: rgba(var(--primary-rgb), .45); }
.tk-chip.on { background: var(--primary-soft); border-color: rgba(var(--primary-rgb), .45); color: var(--primary); }
.tk-chip.on b { color: var(--primary); }

.tk-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.tk-lane { --c: var(--primary); --cs: var(--primary-soft); background: rgba(var(--ink), .03); border-radius: var(--r-xl); padding: .75rem; }
.tk-lane.tone-danger  { --c: var(--danger);  --cs: var(--danger-soft); }
.tk-lane.tone-warning { --c: var(--warning); --cs: var(--warning-soft); }
.tk-lane.tone-success { --c: var(--success); --cs: var(--success-soft); }
.tk-lane-h { display: flex; align-items: center; gap: .6rem; padding: .15rem .25rem .8rem; }
.tk-lane-h h3 { margin: 0; font-size: .95rem; font-weight: 600; }
.tk-lane-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--cs); color: var(--c); }
.tk-lane-n { margin-left: auto; font-size: 1.15rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.tk-lane-n.zero { color: var(--text-light); }
.tk-empty { padding: 1.3rem 0; text-align: center; font-size: .8rem; color: var(--text-light); border: 1px dashed var(--border); border-radius: var(--r-lg); }

.tk-card {
  --lift-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative; margin-bottom: .55rem; padding: .8rem .9rem .75rem; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  animation: tk-in .45s var(--lift-ease) backwards; animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform .35s var(--lift-ease), box-shadow .35s var(--lift-ease), border-color .25s var(--lift-ease);
}
@keyframes tk-in { from { opacity: 0; transform: translateY(8px); } }
.tk-card:last-child { margin-bottom: 0; }
.tk-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(var(--primary-rgb), .3); }
.tk-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tk-card.menu-open { z-index: 30; transform: none; }
/* Drag and drop: the lifted card, the stage tray, and the Ready lane as a target. */
.tk-card.tk-dragging { opacity: .35; transform: scale(.98); box-shadow: none; border-style: dashed; }
.tk-ghost {
  position: fixed; z-index: 400; margin: 0; pointer-events: none; will-change: translate, scale;
  transform: rotate(1.5deg) scale(1.03);
  animation: none !important; transition: scale .22s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
  border-color: rgba(var(--primary-rgb), .45);
  box-shadow: 0 24px 44px -14px rgba(15, 12, 40, .5), 0 0 0 1px rgba(var(--primary-rgb), .3);
}
.tk-ghost.shrink { scale: .58; opacity: .85; }
.tk-ghost.returning { transform: none; scale: 1; transition: translate .3s cubic-bezier(.22, 1, .36, 1), transform .3s ease, scale .3s ease; }
.tk-ghost.landing { scale: .3; opacity: 0; transition: translate .26s cubic-bezier(.5, 0, .75, 0), scale .26s ease, opacity .26s ease; }
html.tk-is-dragging, html.tk-is-dragging * { cursor: grabbing !important; user-select: none; }
.tk-tray {
  position: fixed; left: 50%; bottom: 22px; z-index: 410; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .45rem;
  max-width: calc(100vw / var(--zoom, 1) - 2rem); padding: .6rem; border-radius: 18px;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border); box-shadow: 0 18px 50px -12px rgba(10, 8, 30, .55);
  animation: tk-tray-in .38s cubic-bezier(.22, 1, .36, 1) both;
}
.tk-tray.leaving { animation: tk-tray-out .22s ease both; }
@keyframes tk-tray-in { from { opacity: 0; transform: translate(-50%, 24px) scale(.96); } }
@keyframes tk-tray-out { to { opacity: 0; transform: translate(-50%, 16px) scale(.97); } }
.tk-tray-l { padding: 0 .35rem 0 .45rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); }
.tk-drop {
  display: inline-flex; align-items: center; gap: .45rem; height: 42px; padding: 0 1rem; border-radius: 12px;
  border: 1.5px dashed color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent);
  font-size: .85rem; font-weight: 600; color: var(--text-heading); white-space: nowrap;
  animation: tk-drop-in .4s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 30ms + 60ms);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tk-drop .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tk-drop.over {
  transform: translateY(-4px) scale(1.06); border-style: solid; border-color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--c) 55%, transparent);
}
.tk-drop.current { opacity: .4; border-style: solid; }
.tk-drop.hit { animation: tk-drop-hit .3s ease; }
@keyframes tk-drop-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes tk-drop-hit { 50% { transform: scale(1.12); } }
.tk-lane.tk-lane-drop { outline: 2px dashed color-mix(in srgb, var(--c) 50%, transparent); outline-offset: -2px; transition: background .2s ease, outline-color .2s ease; }
.tk-lane.tk-lane-drop.over { background: color-mix(in srgb, var(--c) 10%, transparent); outline-color: var(--c); }
.tk-card.tk-landed { animation: tk-landed .7s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes tk-landed {
  0% { opacity: 0; transform: scale(.9); box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .5); }
  45% { opacity: 1; transform: scale(1.02); box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .18); }
  100% { transform: none; }
}
.tk-row { display: flex; align-items: center; gap: .45rem; min-height: 24px; }
.tk-no { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.tk-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.tk-tag.tag-info { color: var(--info); } .tk-tag.tag-primary { color: var(--primary); } .tk-tag.tag-danger { color: var(--danger); }
.tk-flag { display: inline-flex; color: var(--danger); }
.tk-title { margin: .4rem 0 .1rem; font-size: .92rem; font-weight: 700; color: var(--text-heading); line-height: 1.3; }
.tk-issue { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-whens { display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin-top: .5rem; }
.tk-when { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.tk-when.late { color: var(--danger); }
.tk-when.today { color: var(--warning); }
.tk-foot { display: flex; align-items: center; gap: .45rem; margin-top: .65rem; font-size: .78rem; }
.tk-cust { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--text-body); }
.tk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-ava {
  width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  font-size: .58rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7367f0, #9e95f5);
}
.tk-ava.t-info    { background: linear-gradient(135deg, #00b8cf, #4fe0f2); }
.tk-ava.t-success { background: linear-gradient(135deg, #22b365, #5ddc97); }
.tk-ava.t-warning { background: linear-gradient(135deg, #f7902f, #ffbb7a); }
.tk-ava.t-violet  { background: linear-gradient(135deg, #b04fe0, #d68cf5); }
.tk-ava.t-danger  { background: linear-gradient(135deg, #e0485e, #f7828f); }
.tk-ava.walk { background: var(--track-bg); color: var(--text-muted); }
.tk-who {
  width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  font-size: .58rem; font-weight: 700; color: var(--primary); background: var(--primary-soft);
}
.tk-money { font-size: .76rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-money.due { color: var(--danger); }
.tk-money.paid { display: inline-flex; align-items: center; gap: .2rem; color: var(--success); }
.tk-money.dep { color: var(--info); }
.tk-money.none { color: var(--text-light); font-weight: 600; }

/* Stage pill + its menu. */
.tk-st { position: relative; margin-left: auto; }
.tk-status {
  display: inline-flex; align-items: center; gap: .3rem; height: 22px; padding: 0 .35rem 0 .55rem; cursor: pointer;
  border: 0; border-radius: var(--r-pill); font-size: .7rem; font-weight: 700; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tk-status .dot, .tk-menu .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.tk-status svg { opacity: .7; }
.tk-status:hover, .tk-status[aria-expanded="true"] { background: color-mix(in srgb, var(--c) 24%, transparent); }
.tk-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 176px; padding: .35rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: tk-menu-in .18s var(--ease) both; cursor: default;
}
@keyframes tk-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.tk-menu button {
  display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .6rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-body); font-size: .84rem; font-weight: 500; text-align: left; cursor: pointer;
}
.tk-menu button:hover, .tk-menu button:focus-visible { background: var(--hover-bg); outline: none; }
.tk-menu button[aria-checked="true"] { color: var(--text-heading); font-weight: 700; }
.tk-menu button svg { margin-left: auto; color: var(--primary); }

@media (max-width: 1280px) { .tk-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tk-board { grid-template-columns: minmax(0, 1fr); }
  .tk-search, .tk-search input { width: 100%; }
  .tk-head .page-actions { width: 100%; }
  .tk-search { flex: 1 1 100%; }
}
html[data-anim="none"] .tk-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .tk-card { animation: none; } .tk-card:hover { transform: none; } }

/* ============ Shop dashboard ============ */
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.1rem; }
.qa-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  padding: 1.1rem 1.25rem; text-align: left; text-decoration: none;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); color: var(--text-body); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.qa-tile .stat-ico { width: 40px; height: 40px; margin-bottom: .55rem; }
.qa-tile strong { font-size: .98rem; color: var(--text-heading); }
.qa-tile span:not(.stat-ico) { font-size: .8rem; color: var(--text-muted); }
.qa-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(var(--primary-rgb), .4); }
.qa-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.glance { list-style: none; margin: 0; padding: 0; }
.glance li { display: grid; grid-template-columns: 8px 1fr 2fr auto; align-items: center; gap: .7rem; padding: .42rem 0; font-size: .88rem; }
.glance .dot { width: 8px; height: 8px; border-radius: 50%; }
.glance .gl-label { color: var(--text-body); }
.glance .gl-bar { height: 6px; background: var(--track-bg); border-radius: var(--r-pill); overflow: hidden; }
.glance .gl-bar span { display: block; height: 100%; border-radius: inherit; transition: width .4s var(--ease); }
.glance strong { color: var(--text-heading); font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }
@media (max-width: 1100px) { .qa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qa-grid { grid-template-columns: 1fr; } }

/* ============ Employee dashboard ============ */
.goal-band { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.1rem; }
.goal { padding: 1.3rem 1rem 1.2rem; text-align: center; }
.goal + .goal { border-left: 1px solid var(--border); }
.goal-arc { width: 132px; max-width: 100%; display: block; margin: 0 auto; }
.goal-fill { transition: stroke-dashoffset .9s cubic-bezier(.32, .72, 0, 1); }
.goal-pct { font-size: 1.5rem; font-weight: 700; margin-top: -.45rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.goal-label { font-size: .9rem; font-weight: 600; color: var(--text-heading); margin-top: .2rem; }
.goal-sub { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.card-sub .stat-delta { font-size: .76rem; margin: 0; }
/* Clock tile: green invites you in, red lets you out. */
.qa-clock.is-out { border-color: rgba(var(--success-rgb), .45); }
.qa-clock.is-out:hover { border-color: var(--success); }
.qa-clock.is-in { border-color: rgba(var(--danger-rgb), .45); }
.qa-clock.is-in:hover { border-color: var(--danger); }
.qa-clock.pressing { transform: scale(.96); transition: transform .18s var(--ease); }
.qa-clock.pressing .stat-ico { transform: scale(.85); transition: transform .18s var(--ease); }
/* State change: tile pops, the tint sweeps through, the clock hand spins once. */
.qa-clock.just-in { animation: clock-pop .55s cubic-bezier(.34, 1.56, .64, 1) both, clock-flash-in .9s ease-out both; }
.qa-clock.just-out { animation: clock-pop .55s cubic-bezier(.34, 1.56, .64, 1) both, clock-flash-out .9s ease-out both; }
.qa-clock.just-in .stat-ico, .qa-clock.just-out .stat-ico { animation: clock-spin .6s cubic-bezier(.32, .72, 0, 1) both; }
.qa-clock.just-in strong, .qa-clock.just-out strong, .qa-clock.just-in span:not(.stat-ico), .qa-clock.just-out span:not(.stat-ico) { animation: clock-text .4s var(--ease) .12s both; }
@keyframes clock-pop { 0% { transform: scale(.96); } 55% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes clock-flash-in { 0% { background: var(--success-soft); box-shadow: 0 0 0 0 rgba(var(--success-rgb), .45); } 100% { background: var(--card-bg); box-shadow: 0 0 0 14px rgba(var(--success-rgb), 0); } }
@keyframes clock-flash-out { 0% { background: var(--danger-soft); box-shadow: 0 0 0 0 rgba(var(--danger-rgb), .45); } 100% { background: var(--card-bg); box-shadow: 0 0 0 14px rgba(var(--danger-rgb), 0); } }
@keyframes clock-spin { from { transform: rotate(-180deg) scale(.7); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes clock-text { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qa-clock, .qa-clock .stat-ico, .qa-clock strong, .qa-clock span { animation: none !important; } }
.mini-stats { display: flex; align-items: center; gap: .6rem; }
.mini-stats > span { display: inline-flex; align-items: baseline; gap: .35rem; padding: .3rem .7rem; border-radius: var(--r-pill); background: var(--body-bg); border: 1px solid var(--border); font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.mini-stats > span strong { font-size: .92rem; color: var(--text-heading); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .goal-band { grid-template-columns: 1fr; }
  .goal + .goal { border-left: none; border-top: 1px solid var(--border); }
}

/* ============ Ticket modal ============ */
.tk-sec { padding: .2rem 0 1rem; margin-bottom: .6rem; border-bottom: 1px solid var(--border); }
.tk-sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.tk-sec h4 { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 .75rem; }
.tk-tags { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding-top: .55rem; }
/* The generic .field input sizing must not swallow the custom checkboxes. */
.field .fcheck input { width: 18px; height: 18px; padding: 0; border-width: 1.6px; border-radius: 5px; }
.tk-lines { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0 .6rem; }
.tk-line { display: flex; align-items: center; gap: .5rem; }
.tk-line.pay { font-size: .88rem; color: var(--text-body); padding: .35rem .1rem; border-bottom: 1px dashed var(--border); }
.tk-line.pay:last-child { border-bottom: none; }
.tk-line .grow, .tk-payrow .grow { flex: 1; min-width: 0; }
.tk-in {
  height: 36px; padding: 0 .7rem; font-size: .88rem;
  border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-body);
}
.tk-in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
select.tk-in {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d8799' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center;
}
html[data-theme="dark"] select.tk-in option { background: var(--card-bg); }
.tk-in.qty { width: 64px; }
.tk-in.amt { width: 110px; }
.tk-in.tone { width: 120px; text-transform: capitalize; }
.tk-payrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tk-payrow input[type="number"] { width: 120px; }
.tk-none { margin: 0; font-size: .85rem; }
.tk-sum { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: .9rem; font-size: .88rem; color: var(--text-muted); }
.tk-sum strong { color: var(--text-heading); margin-left: .25rem; }
.tk-sum .due strong { color: var(--danger); }
.tk-sum .ok strong { color: var(--success); }
.col-list { display: flex; flex-direction: column; gap: .45rem; }
.col-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  .col-row .tk-in.grow { flex-basis: 100%; order: -1; }
  .tk-line:not(.pay) { flex-wrap: wrap; }
  .tk-line:not(.pay) .grow { flex-basis: 100%; }
}
.col-row .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.col-row .fcheck { font-size: .82rem; }

/* Check-in: customer suggestions */
.cust-field { position: relative; }
.cust-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: .3rem; max-height: 220px; overflow-y: auto;
  animation: fsel-in .16s cubic-bezier(.2, 0, 0, 1) both;
}
.cust-suggest button {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%;
  padding: .5rem .65rem; border: none; background: transparent; border-radius: var(--r-sm);
  text-align: left; cursor: pointer; color: var(--text-body);
}
.cust-suggest button:hover, .cust-suggest button:focus-visible { background: var(--primary-soft); outline: none; }
.cust-suggest .sug-new { flex-direction: row; align-items: center; gap: .45rem; margin-top: .2rem; border-top: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--primary); }
.cust-suggest .sug-new strong { color: var(--primary); font-weight: 600; }
.cust-suggest strong { font-size: .88rem; color: var(--text-heading); }
.cust-suggest span { font-size: .76rem; color: var(--text-muted); }
.cust-state { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .82rem; }
.cust-state[hidden] { display: none; }

/* ============ Check In page ============ */
/* Three columns that fit one screen: who and what | charges and ticket |
   money and notes. Columns stretch to equal height and the last card in each
   grows, so the bottoms line up. Cards share one header style. */
.ci-no {
  display: inline-block; vertical-align: 3px; margin-left: .4rem;
  font-size: .8rem; font-weight: 600; font-family: var(--font-mono); letter-spacing: .02em;
  color: var(--primary); background: var(--primary-soft); padding: .15rem .55rem; border-radius: var(--r-pill);
}
.ci .page-head { margin-bottom: 1rem; align-items: center; }
.ci-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(310px, 360px); gap: 1.1rem; }
.ci-col { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.ci-grow { flex: 1 1 auto; }
.ci-card { padding: 1.1rem 1.25rem 1.2rem; }
.ci-card-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; min-height: 30px; }
.ci-card-h h3 { flex: 1; margin: 0; font-size: 1.02rem; font-weight: 600; display: flex; align-items: center; }
.ci-ico {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary);
}
.ci-ico.tone-info      { background: var(--info-soft);      color: var(--info); }
.ci-ico.tone-success   { background: var(--success-soft);   color: var(--success); }
.ci-ico.tone-warning   { background: var(--warning-soft);   color: var(--warning); }
.ci-ico.tone-violet    { background: rgba(176, 79, 224, .14); color: #b04fe0; }
.ci-ico.tone-secondary { background: var(--secondary-soft); color: var(--text-muted); }
/* Sits on the middle of the lowercase letters, with a little more room from the title. */
.ci-card-h h3 .hint-i { margin-left: .55rem; position: relative; top: 1px; }
.ci-card-h .btn { margin-left: auto; }
.ci-card .field label { display: flex; align-items: center; gap: .3rem; }
.ci .field input, .ci .field select { height: 38px; }
.ci .form-grid { gap: .75rem .85rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ci .field input, .ci .field select { min-width: 0; }
/* Field pairs stack when their own card gets narrow, whatever the window size. */
.ci-card { container-type: inline-size; }
@container (max-width: 330px) {
  .ci .form-grid, .ci-pair { grid-template-columns: minmax(0, 1fr); }
  .ci-cost { grid-template-columns: minmax(0, 1fr) auto; }
  .ci-cost label:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* Two-up field groups; .full spans the row. */
.ci-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem .85rem; }
.ci-pair .full { grid-column: 1 / -1; }
.ci-pair[hidden] { display: none; }
/* The same gap as between the rows above, even with the warranty banner (hidden) in between. */
.ci-pair ~ .ci-issue { margin-top: .75rem; }

/* Inputs with an inline icon (left) or badge (right). */
.ci-inwrap { position: relative; }
.ci-inwrap > svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; }
.ci-inwrap > input.ci-search { padding-left: 2.3rem; }
.ci-inwrap.end > input { padding-right: 4.2rem; }
.ci-badge {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: var(--r-pill);
  color: var(--text-muted); background: var(--track-bg); font-variant-numeric: tabular-nums;
}
.ci-badge.ok { color: var(--success); background: var(--success-soft); }
.ci-badge.bad { color: var(--danger); background: var(--danger-soft); }
.ci-badge[hidden] { display: none; }

/* The card being typed in sits above its neighbours, so its dropdowns
   (customer suggestions, device picker) aren't hidden under the next card. */
.ci-card:focus-within { z-index: 3; }

/* Device picker: models, then colour swatches, then storage. */
.ci-dev-field { position: relative; }
.ci-dev-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; padding: .35rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: tk-menu-in .18s var(--ease) both;
}
.ci-dev-pop[hidden] { display: none; }
.dp-list button {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .5rem .65rem;
  border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; cursor: pointer;
}
.dp-list strong { font-size: .9rem; font-weight: 600; color: var(--text-heading); }
.dp-list span { font-size: .72rem; font-weight: 600; color: var(--text-light); }
.dp-list button:hover, .dp-list button.active { background: var(--primary-soft); }
.dp-head { display: flex; align-items: center; gap: .6rem; padding: .35rem .45rem .6rem; margin-bottom: .45rem; border-bottom: 1px solid var(--border); }
.dp-crumb { flex: 1; min-width: 0; font-size: .84rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-crumb strong { color: var(--text-heading); font-weight: 600; }
.dp-step { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--primary); }
.dp-skip { border: 0; background: transparent; cursor: pointer; padding: .2rem .5rem; border-radius: var(--r-sm); font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.dp-skip:hover { background: var(--hover-bg); color: var(--text-heading); }
.dp-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .3rem .3rem; }
.dp-chip {
  display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .8rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card-bg);
  font-size: .82rem; font-weight: 600; color: var(--text-heading);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dp-chip i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.dp-chip:hover, .dp-chip.active { border-color: rgba(var(--primary-rgb), .55); background: var(--primary-soft); color: var(--primary); }

/* Linked customer: a compact profile card instead of three inputs. */
.ci-cust {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1rem; border-radius: var(--r-lg);
  background: var(--body-bg); border: 1px solid var(--border);
  animation: set-panel-in .3s cubic-bezier(.32, .72, 0, 1) both;
}
.ci-cust[hidden] { display: none; }
.ci-ava {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--primary-gradient); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: var(--shadow-primary);
}
.ci-cust-info { flex: 1; min-width: 0; }
.ci-cust-info strong { display: block; font-size: 1rem; color: var(--text-heading); margin-bottom: .15rem; }
.ci-cust-meta { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; font-size: .85rem; color: var(--text-body); }
.ci-cust-meta > span { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.ci-cust-meta svg { color: var(--text-light); flex-shrink: 0; }

/* Quick-pick chips (issues, tags). */
.ci-chips, .ci-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.ci-chips { margin-bottom: .5rem; }
.ci-tags { margin-top: .85rem; }
.ci-chip {
  height: 27px; padding: 0 .68rem; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  font-size: .75rem; font-weight: 600; color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ci-chip:hover { border-color: rgba(var(--primary-rgb), .45); color: var(--primary); }
.ci-chip.on { background: var(--primary-soft); border-color: rgba(var(--primary-rgb), .4); color: var(--primary); }
.ci-chip.tag-danger.on    { background: var(--danger-soft);    border-color: rgba(var(--danger-rgb), .4);    color: var(--danger); }
.ci-chip.tag-info.on      { background: var(--info-soft);      border-color: rgba(var(--info-rgb), .4);      color: var(--info); }
.ci-chip.tag-secondary.on { background: var(--secondary-soft); border-color: rgba(var(--secondary-rgb), .4); color: var(--text-heading); }
.ci-issue textarea { min-height: 54px; }

.ci-cost select {
  flex: 1; min-width: 0; height: 36px; padding: 0 2rem 0 .75rem; cursor: pointer; appearance: none;
  border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-body);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808390' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
}
.ci-cost select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Charges: a light table. Cells look like text until you hover or type. */
.ci-lines { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ci-line {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px 28px; gap: .45rem; align-items: center;
  padding: .45rem .5rem .45rem .85rem; border-top: 1px solid var(--border);
}
.ci-line:first-child { border-top: 0; }
.ci-line .num { text-align: right; }
.ci-line-name { font-weight: 600; color: var(--text-heading); font-size: .9rem; line-height: 1.25; }
/* Fixed labels line up with the text inside the editable cells. */
.ci-line-name, .ci-line.total > span:first-child { padding-left: calc(.55rem + 1px); }
.ci-line-name small { display: block; font-size: .72rem; font-weight: 500; color: var(--text-muted); }
.ci-line.total { background: var(--body-bg); padding-top: .6rem; padding-bottom: .6rem; font-weight: 700; color: var(--text-heading); font-size: .9rem; }
.ci-line.total strong { text-align: right; padding-right: .55rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ci-in {
  width: 100%; height: 34px; padding: 0 .55rem; border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--text-heading); font-size: .9rem;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ci-in:hover { border-color: var(--border); }
.ci-in:focus { outline: none; border-color: var(--primary); background: var(--card-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.ci-in.num { text-align: right; font-variant-numeric: tabular-nums; }
.ci-in::-webkit-outer-spin-button, .ci-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ci-in[type="number"] { -moz-appearance: textfield; }
/* Money input with a currency prefix. */
.ci-money { position: relative; display: flex; align-items: center; }
.ci-money > span { position: absolute; left: .6rem; font-size: .85rem; color: var(--text-light); pointer-events: none; }
.ci-money > input { padding-left: 1.5rem; }
.ci-money.boxed > input {
  width: 100%; height: 40px; padding: 0 .75rem 0 1.6rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-heading);
}
.ci-money.boxed > span { left: .75rem; }
.ci-money.boxed > input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ci-x {
  width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--r);
  background: transparent; color: var(--text-light); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ci-x:hover { background: var(--danger-soft); color: var(--danger); }
#tk-items:empty { display: none; }

/* Your cost: internal numbers, set apart and quieter. */
.ci-cost {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: .75rem; align-items: end;
  margin-top: .85rem; padding: .75rem .9rem .85rem; border-radius: var(--r-lg); background: var(--body-bg);
}
.ci-cost label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--text-muted); min-width: 0; }
.ci-lab { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ci-cost .ci-money.boxed > input, .ci-cost select { height: 36px; flex: none; width: 100%; }
.ci-profit { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; padding: 0 .1rem .35rem .4rem; }
.ci-profit span { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.ci-profit strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--text-heading); }
.ci-profit strong.pos { color: var(--success); }
.ci-profit strong.neg { color: var(--danger); }

/* Existing tickets: the device check result, one line. */
.ci-ck {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--border); font-size: .8rem;
}
.ci-ck-l { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--text-muted); margin-right: auto; }
.ci-ck-l svg { color: var(--primary); }
.ci-ck-pill { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: var(--r-pill); }
.ci-ck-pill.pass { color: var(--success); background: var(--success-soft); }
.ci-ck-pill.fail { color: var(--danger); background: var(--danger-soft); }
.ci-ck-pill.na { color: var(--text-muted); background: var(--secondary-soft); }
.ci-ck-none { color: var(--text-light); }

/* Payment. Each method carries its own colour; the active one fills with it. */
.ci-methods { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ci-method {
  --m: var(--primary); --m-rgb: var(--primary-rgb); --m-soft: var(--primary-soft);
  display: flex; align-items: center; justify-content: center; gap: .5rem; height: 42px; padding: 0 .5rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); background: transparent;
  font-size: .85rem; font-weight: 600; color: var(--text-body); white-space: nowrap; min-width: 0;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ci-method[data-method="cash"]     { --m: var(--success); --m-rgb: var(--success-rgb); --m-soft: var(--success-soft); }
.ci-method[data-method="transfer"] { --m: var(--info);    --m-rgb: var(--info-rgb);    --m-soft: var(--info-soft); }
.ci-method[data-method="other"]    { --m: var(--warning); --m-rgb: var(--warning-rgb); --m-soft: var(--warning-soft); }
.ci-method:hover { border-color: rgba(var(--m-rgb), .5); }
.ci-method.active { background: var(--m-soft); border-color: rgba(var(--m-rgb), .6); color: var(--m); box-shadow: 0 0 0 1px rgba(var(--m-rgb), .25); }
.pm { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.pm svg { display: block; border-radius: 4px; }
.pm-cards svg { box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.pm-transfer { color: var(--info); }
.pm-other { color: var(--warning); }
.ci-payrow { display: flex; gap: .5rem; margin-top: .65rem; }
.ci-payrow .grow { flex: 1; min-width: 0; }
.ci-date {
  width: 132px; height: 40px; padding: 0 .6rem; font-size: .84rem;
  border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-body);
}
.ci-date:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ci-payrow .btn { height: 40px; padding: 0 1rem; }
.ci-pays { display: flex; flex-direction: column; margin-top: .55rem; }
.ci-pays:empty { display: none; }
.ci-pay { display: flex; align-items: center; gap: .65rem; padding: .4rem 0; border-top: 1px dashed var(--border); font-size: .88rem; }
.ci-pay:first-child { border-top: 0; }
.ci-pay-ico { width: 32px; display: grid; place-items: center; flex-shrink: 0; }
.ci-pay .grow { flex: 1; min-width: 0; color: var(--text-heading); font-weight: 600; }
.ci-pay small { display: block; font-weight: 400; font-size: .76rem; color: var(--text-muted); }
.ci-pay strong { font-variant-numeric: tabular-nums; color: var(--text-heading); }
.ci-sum {
  display: flex; flex-direction: column; gap: .3rem; margin-top: .8rem; padding: .7rem .9rem;
  border-radius: var(--r-lg); background: var(--body-bg); font-size: .88rem;
}
.ci-sum div { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-muted); }
.ci-sum strong { color: var(--text-heading); font-variant-numeric: tabular-nums; }
.ci-sum .bal { margin-top: .2rem; padding-top: .5rem; border-top: 1px solid var(--border); color: var(--text-heading); font-weight: 600; }
.ci-sum .bal strong { font-size: 1.2rem; }
.ci-sum .due strong { color: var(--danger); }
.ci-sum .ok strong { color: var(--success); }

/* Notes fill whatever height is left in their column. */
.ci-notes { display: flex; flex-direction: column; }
.ci-notes .field { flex: 1; display: flex; flex-direction: column; }
.ci-notes textarea { flex: 1; min-height: 70px; resize: none; }

.ci-submit { width: 100%; justify-content: center; height: 48px; flex-shrink: 0; font-size: 1rem; gap: .5rem; position: relative; }
.ci-submit kbd {
  position: absolute; right: .9rem; font-family: var(--font-sans); font-size: .7rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .9);
}
@media (pointer: coarse) { .ci-submit kbd { display: none; } }

/* Wide screens fit the whole page without scrolling: past two rows, extra
   items and payments scroll inside their own lists instead of growing the page. */
@media (min-width: 1360px) {
  #tk-items { max-height: 100px; overflow-y: auto; }
  .ci-pays { max-height: 92px; overflow-y: auto; }
}
/* Narrower screens: the two job columns side by side, money and notes as a
   full-width row under them; phones stack everything. */
@media (max-width: 1359px) {
  .ci-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ci-col-pay { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .ci-col-pay .ci-submit { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ci-grid, .ci-col-pay, .ci-pair { grid-template-columns: 1fr; }
  .ci-col-pay { display: flex; }
  .ci-card { padding: 1.05rem 1.05rem 1.15rem; }
  .ci-line { grid-template-columns: minmax(0, 1fr) 96px 28px; gap: .35rem; padding-left: .7rem; }
  .ci-cost { grid-template-columns: 1fr 1fr; }
  .ci-cost label:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* ============ Device check (check-in checklist) ============ */
/* A light veil: the ticket behind stays readable in outline. */
.modal-overlay.ck-overlay { background: rgba(20, 22, 38, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html:not([data-theme="dark"]) .modal-overlay.ck-overlay { background: rgba(47, 43, 61, .18); }
.modal.ck-modal { max-width: 860px; }
.ck-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ck-sub { font-size: .88rem; color: var(--text-muted); font-weight: 600; }
.ck-quick { display: flex; gap: .45rem; }
.ck-progress { height: 4px; border-radius: var(--r-pill); background: var(--track-bg); overflow: hidden; margin-bottom: 1rem; }
.ck-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary); transition: width .35s cubic-bezier(.22, 1, .36, 1); }
.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .9rem; }
.ck-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem .6rem .55rem .85rem; border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ck-row[data-state="pass"] { border-color: rgba(var(--success-rgb), .35); }
.ck-row[data-state="fail"] { border-color: rgba(var(--danger-rgb), .45); background: var(--danger-soft); }
.ck-l { min-width: 0; }
.ck-l strong { display: block; font-size: .88rem; color: var(--text-heading); }
.ck-l span { display: block; font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-md); background: var(--track-bg); flex-shrink: 0; }
.ck-b {
  min-width: 52px; height: 28px; padding: 0 .55rem; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--text-muted); font-size: .74rem; font-weight: 600;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ck-b:hover { color: var(--text-heading); }
.ck-b.pass[aria-pressed="true"] { background: var(--success); color: #fff; box-shadow: 0 2px 6px rgba(var(--success-rgb), .35); }
.ck-b.fail[aria-pressed="true"] { background: var(--danger); color: #fff; box-shadow: 0 2px 6px rgba(var(--danger-rgb), .35); }
.ck-b.na[aria-pressed="true"] { background: var(--card-bg); color: var(--text-heading); box-shadow: var(--shadow-xs); }
.ck-note { margin-top: .9rem; }
.ck-note input { height: 40px; }
.ck-modal .modal-foot { align-items: center; }
.ck-count { margin-right: auto; font-size: .82rem; color: var(--text-muted); font-weight: 600; }
@media (max-width: 700px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-row { flex-wrap: wrap; }
  .ck-seg { margin-left: auto; }
  .ck-count { display: none; }
  .ck-modal .modal-foot { flex-wrap: wrap; }
  .ck-print { flex: 1 0 100%; margin: 0 0 .15rem; }
  .ck-modal .modal-foot .btn { flex: 1; }
}

/* ============ Workspace picker ============ */
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
@media (max-width: 600px) { .ws-grid { grid-template-columns: minmax(0, 1fr); } }
.ws-choice {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: 1.15rem 1.15rem 1.1rem; text-align: left; cursor: pointer;
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--r-lg); color: var(--text-body);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.ws-choice:hover { border-color: var(--input-border); transform: translateY(-1px); }
.ws-choice.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--card-bg)); box-shadow: 0 0 0 3px var(--primary-soft); transform: none; }
.ws-choice:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ws-ico {
  width: 44px; height: 44px; margin-bottom: .7rem; display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--primary-soft); color: var(--primary); transition: background .25s var(--ease), color .25s var(--ease), transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.ws-choice.active .ws-ico { background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); transform: scale(1.04); }
.ws-choice strong { font-size: .98rem; font-weight: 700; color: var(--text-heading); }
.ws-blurb { font-size: .82rem; line-height: 1.4; color: var(--text-muted); }
.ws-points { list-style: none; width: 100%; margin: .85rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; }
.ws-points li { display: flex; align-items: flex-start; gap: .55rem; font-size: .82rem; line-height: 1.4; color: var(--text-body); }
.ws-points i { width: 16px; height: 16px; flex-shrink: 0; margin-top: .05rem; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.ws-intro { margin: -.2rem 0 1.1rem; font-size: .9rem; line-height: 1.5; color: var(--text-muted); }
.ws-radio {
  position: absolute; top: 1rem; right: 1rem; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--input-border); color: transparent; transition: background .2s, border-color .2s, color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.ws-choice.active .ws-radio { background: var(--primary); border-color: var(--primary); color: #fff; transform: scale(1.08); }
.modal.ws-modal { max-width: 640px; }
.ws-modal .modal-foot { align-items: center; }
.ws-note { display: inline-flex; align-items: center; gap: .4rem; margin-right: auto; font-size: .8rem; color: var(--text-light); }
.ws-modal [data-act="go"] { min-width: 120px; }
@media (prefers-reduced-motion: reduce) { .ws-choice, .ws-ico, .ws-radio { transition: none; } }

/* ============ Customer messages ============ */
/* Channel marks: SMS in brand purple, email in blue, WhatsApp in its own green. */
.msg-mark {
  width: 26px; height: 26px; flex-shrink: 0; display: inline-grid; place-items: center;
  border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary);
}
.msg-mark.email { background: var(--info-soft); color: var(--info); }
.msg-mark.wa { background: rgba(37, 211, 102, .14); }
.msg-mark.none { background: var(--track-bg); color: var(--text-muted); }

/* Composer */
.modal.msg-modal { max-width: 540px; }
.msg-to { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.msg-ava {
  width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--primary-gradient); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: var(--shadow-primary);
}
.msg-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-who strong { color: var(--text-heading); font-size: .98rem; }
.msg-who span { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-st {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; height: 26px; padding: 0 .7rem;
  border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.msg-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* SMS / WhatsApp: a segmented switch whose highlight slides and takes the channel's colour. */
.msg-chans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border-radius: calc(var(--r-md) + 4px); background: var(--track-bg);
}
.msg-chans > .glide-thumb {
  border-radius: var(--r-md); background: var(--primary-soft); box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .5), 0 2px 8px rgba(var(--primary-rgb), .18);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1), height .45s cubic-bezier(.22, 1, .36, 1), background-color .35s ease, box-shadow .35s ease;
}
.msg-chans[data-on="whatsapp"] > .glide-thumb { background: rgba(37, 211, 102, .14); box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .55), 0 2px 8px rgba(37, 211, 102, .16); }
.msg-chan {
  display: flex; align-items: center; justify-content: center; gap: .5rem; height: 40px; padding: 0 .5rem; cursor: pointer; min-width: 0;
  border: 0; border-radius: var(--r-md); background: transparent;
  font-size: .88rem; font-weight: 600; color: var(--text-muted);
}
.msg-chan:hover { color: var(--text-heading); }
.msg-chan.active { color: var(--primary); }
.msg-chan[data-ch="whatsapp"].active { color: #1ea952; }
.msg-chan .msg-mark { width: 24px; height: 24px; background: transparent; color: inherit; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.msg-chan.active .msg-mark { transform: scale(1.12); }
/* Template chips: one pill glides to the chosen template. */
.msg-starts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; }
.msg-starts > .glide-thumb { border-radius: var(--r-pill); background: var(--primary-soft); box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .45); }
.msg-starts > .ci-chip { transition: color .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease; }
.msg-starts > .ci-chip.active { border-color: transparent; color: var(--primary); }
.msg-bubble-wrap { margin-top: .9rem; }
.msg-bubble-wrap textarea {
  width: 100%; min-height: 118px; resize: vertical; padding: .75rem .9rem; line-height: 1.5;
  border: 1px solid var(--input-border); border-radius: 16px 16px 16px 6px; background: var(--body-bg);
  color: var(--text-heading); font: inherit; font-size: .93rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.msg-bubble-wrap textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; margin-top: .45rem; }
.msg-count { font-size: .74rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.msg-count.multi { color: var(--warning); }

/* History */
.msg-hist { display: flex; flex-direction: column; }
.msg-row { display: flex; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--border); }
.msg-row:first-child { border-top: 0; padding-top: .2rem; }
.msg-row-b { flex: 1; min-width: 0; }
.msg-row-h { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.msg-row-h strong { color: var(--text-heading); font-size: .9rem; }
.msg-row-h span { font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.msg-row p { margin: .25rem 0 0; font-size: .86rem; color: var(--text-body); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Check In: how the customer hears back, and the ticket's last update. */
.ci-via { margin-top: .85rem; display: flex; flex-direction: column; gap: .4rem; }
.ci-via .ci-lab { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.ci-via-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.ci-via-opt {
  display: flex; align-items: center; justify-content: center; gap: .4rem; height: 36px; padding: 0 .4rem; min-width: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); background: transparent;
  font-size: .8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ci-via-opt .msg-mark { width: 20px; height: 20px; background: transparent; color: inherit; }
.ci-via-opt .msg-mark svg { width: 15px; height: 15px; }
.ci-via-opt:hover { border-color: rgba(var(--primary-rgb), .45); color: var(--text-heading); }
.ci-via-opt.on { background: var(--primary-soft); border-color: rgba(var(--primary-rgb), .5); color: var(--primary); }
.ci-via-opt[data-via="whatsapp"].on { background: rgba(37, 211, 102, .12); border-color: rgba(37, 211, 102, .55); color: #1ea952; }
.ci-via-opt[data-via="none"].on { background: var(--track-bg); border-color: var(--border); color: var(--text-heading); }
.ci-review { margin-top: .65rem; font-size: .84rem; }
.ci-msg-last {
  display: inline-flex; align-items: center; gap: .4rem; height: 28px; padding: 0 .55rem 0 .25rem; cursor: pointer; min-width: 0;
  border: 0; border-radius: var(--r-pill); background: var(--track-bg); color: var(--text-heading); font-size: .76rem; font-weight: 600;
}
.ci-msg-last:hover { background: var(--primary-soft); color: var(--primary); }
.ci-msg-last .msg-mark { width: 20px; height: 20px; border-radius: 50%; }
.ci-msg-last .msg-mark svg { width: 13px; height: 13px; }
.ci-msg-last b { font-size: .68rem; padding: 0 .4rem; border-radius: var(--r-pill); background: var(--card-bg); color: var(--text-muted); }

/* Settings → Messages: templates on the left, a phone preview on the right. */
.mt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.1rem; align-items: start; }
.mt-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding-bottom: .9rem; margin-bottom: .2rem; border-bottom: 1px solid var(--border); }
.mt-tokens .ci-lab { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin-right: .25rem; }
.mt-item { padding: .85rem .9rem .8rem; margin: .5rem -.9rem 0; border-radius: var(--r-lg); transition: background var(--dur-fast) var(--ease); }
.mt-item.focus { background: var(--body-bg); }
.mt-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.mt-head strong { color: var(--text-heading); font-size: .92rem; }
.mt-head .tswitch { margin-left: auto; }
.mt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.mt-done { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .45rem; border-radius: var(--r-pill); color: var(--success); background: var(--success-soft); }
.mt-item textarea, .stx-form textarea[data-tpl] {
  width: 100%; min-height: 62px; resize: vertical; padding: .6rem .8rem; line-height: 1.5;
  border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg);
  color: var(--text-body); font: inherit; font-size: .88rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.mt-item textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.mt-item.off textarea { opacity: .5; }
.mt-item.off .mt-head strong { color: var(--text-muted); }
.mt-foot { display: flex; justify-content: flex-end; margin-top: .3rem; min-height: 1rem; }

/* The preview is an iPhone 17 drawn in CSS (titanium frame, black bezel,
   side buttons) so it stays sharp at any size. Everything inside .ip-screen is
   sized in iPhone points (402 × 874) and zoomed to 258px wide; zoom lays text
   out at its final size, so it renders crisply rather than being scaled. */
.mt-prev { position: sticky; top: 92px; display: flex; justify-content: center; padding-top: .2rem; }
#mt-phone { cursor: pointer; }

.ip { position: relative; width: 277px; flex-shrink: 0; user-select: none; }
.ip-frame {
  padding: 3.5px; border-radius: 50px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 0) 97%, rgba(255, 255, 255, .3) 100%),
    linear-gradient(90deg, #6c6e75 0%, #d3d5da 5%, #8b8d94 13%, #a9abb2 50%, #8b8d94 87%, #dcdee2 95%, #6c6e75 100%);
  box-shadow: 0 0 0 .6px rgba(0, 0, 0, .6), inset 0 0 0 .6px rgba(255, 255, 255, .35),
    0 30px 50px -20px rgba(4, 5, 16, .65), 0 12px 20px -10px rgba(4, 5, 16, .45);
}
.ip-bezel { padding: 6px; border-radius: 46.5px; background: #030303; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ip-btn { position: absolute; width: 3px; background: linear-gradient(90deg, #55575e, #b9bbc1 60%, #8b8d94); }
.ip-act { left: -2.5px; top: 120px; height: 22px; border-radius: 2px 0 0 2px; }
.ip-vup { left: -2.5px; top: 164px; height: 40px; border-radius: 2px 0 0 2px; }
.ip-vdn { left: -2.5px; top: 214px; height: 40px; border-radius: 2px 0 0 2px; }
.ip-pwr { right: -2.5px; top: 178px; height: 62px; border-radius: 0 2px 2px 0; background: linear-gradient(270deg, #55575e, #b9bbc1 60%, #8b8d94); }
.ip-screen {
  position: relative; width: 402px; height: 874px; zoom: .6418;
  border-radius: 63px; overflow: hidden; background: #fff; color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.01em;
}
.ip-glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, 0) 46%);
}

/* Liquid Glass controls (iOS 26). */
.ip-glass {
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 16px rgba(0, 0, 0, .12);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
}

/* Header: status bar, back button, contact. Messages scroll under its fade. */
.ip-top {
  position: absolute; left: 0; right: 0; top: 0; height: 176px; z-index: 2; pointer-events: none;
  background: linear-gradient(#fff 0, #fff 82%, rgba(255, 255, 255, .7) 92%, rgba(255, 255, 255, 0) 100%);
}
.ip-status { position: absolute; left: 0; right: 0; top: 0; height: 56px; }
.ip-time { position: absolute; left: 50px; top: 18px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ip-island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.ip-icons { position: absolute; right: 30px; top: 21px; display: flex; align-items: center; gap: 6px; }
.ip-icons svg { fill: #000; }
.ip-batt {
  position: relative; width: 27px; height: 13px; margin-left: 1px; border-radius: 4.5px;
  background: linear-gradient(90deg, #000 80%, rgba(0, 0, 0, .3) 80%);
  display: grid; place-items: center;
}
.ip-batt::after { content: ""; position: absolute; right: -3.5px; top: 4px; width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: rgba(0, 0, 0, .35); }
.ip-batt b { font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: -.03em; }
.ip-back { position: absolute; left: 16px; top: 63px; height: 44px; padding: 0 12px 0 14px; border-radius: 22px; display: flex; align-items: center; gap: 9px; }
.ip-back path { stroke: #000; }
.ip-back b { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: #000; color: #fff; font-size: 14px; font-weight: 600; display: grid; place-items: center; }
.ip-contact { position: absolute; left: 0; right: 0; top: 60px; display: flex; flex-direction: column; align-items: center; }
.ip-ava {
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden; display: grid; place-items: end center;
  background: linear-gradient(180deg, #a7abb5 0%, #868a94 100%);
}
.ip-ava svg { display: block; width: 60px; height: 60px; }
.ip-name {
  position: relative; margin-top: -7px; height: 32px; max-width: 220px; padding: 0 13px 0 14px; border-radius: 16px;
  display: flex; align-items: center; gap: 5px; font-size: 16.5px; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.ip-name i { font-style: normal; font-weight: 700; color: #8e8e93; font-size: 18px; margin-top: -2px; }

/* The conversation. */
.ip-thread { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; scrollbar-width: none; padding: 170px 16px 112px; }
.ip-thread::-webkit-scrollbar { display: none; }
.ip-msgs { display: flex; flex-direction: column; }
.ip-stamp { align-self: center; margin: 16px 0 8px; text-align: center; font-size: 12.5px; line-height: 1.32; font-weight: 500; color: #8e8e93; }
.ip-stamp:first-child { margin-top: 8px; }
.ip-stamp b { display: block; font-weight: 500; }
.ip-stamp.fade { animation: ip-fade .35s ease both; }
.ip-b {
  position: relative; z-index: 0; max-width: 272px; margin-top: 5px; padding: 8px 15px 9px;
  border-radius: 20px; font-size: 17px; line-height: 22px; letter-spacing: -.02em;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* The tail: a curve in the bubble colour, trimmed by a black layer. */
.ip-b::before, .ip-b::after { content: ""; position: absolute; bottom: 0; height: 22px; z-index: -1; }
.ip-b.in { align-self: flex-start; margin-left: 6px; background: #e9e9eb; color: #000; transform-origin: 0 100%; }
.ip-b.in::before { left: -8px; width: 22px; background: #e9e9eb; border-bottom-right-radius: 18px 15px; }
.ip-b.in::after { left: -28px; width: 28px; background: #fff; border-bottom-right-radius: 11px; }
.ip-b.out { align-self: flex-end; margin-right: 6px; margin-top: 12px; background: #34c759; color: #fff; transform-origin: 100% 100%; }
.ip-b.out::before { right: -8px; width: 22px; background: #34c759; border-bottom-left-radius: 18px 15px; }
.ip-b.out::after { right: -28px; width: 28px; background: #fff; border-bottom-left-radius: 11px; }
.ip-b u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ip-b.off { opacity: .4; }
.ip-b.pop { animation: ip-pop .5s cubic-bezier(.2, .9, .3, 1.25) both; }
.ip-b.sent { animation: ip-send .55s cubic-bezier(.2, .85, .3, 1.15) both; }
.ip-b.hl { animation: ip-hl .55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes ip-pop { 0% { opacity: 0; transform: scale(.55) translateY(10px); } 55% { opacity: 1; } 100% { transform: none; } }
@keyframes ip-send { 0% { opacity: 0; transform: translateY(110px) scale(.85); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes ip-hl { 40% { transform: scale(1.05); filter: brightness(1.15); } }
@keyframes ip-fade { from { opacity: 0; } }

/* Typing dots while the shop writes. */
.ip-typing {
  position: relative; align-self: flex-start; margin: 5px 0 0 6px; display: flex; align-items: center; gap: 5px;
  padding: 14px 16px; border-radius: 20px; background: #e9e9eb; transform-origin: 0 100%;
  animation: ip-pop .35s cubic-bezier(.2, .9, .3, 1.25) both;
}
.ip-typing::before, .ip-typing::after { content: ""; position: absolute; border-radius: 50%; background: #e9e9eb; }
.ip-typing::before { left: -2px; bottom: -2px; width: 12px; height: 12px; }
.ip-typing::after { left: -8px; bottom: -8px; width: 6px; height: 6px; }
.ip-typing i { width: 9px; height: 9px; border-radius: 50%; background: #8e8e93; animation: ip-dot 1.2s infinite ease-in-out; }
.ip-typing i:nth-child(2) { animation-delay: .18s; }
.ip-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes ip-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Message bar: the customer's reply types here before it sends. */
.ip-input {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px 32px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 32%);
}
.ip-plus { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 300; line-height: 1; color: #000; padding-bottom: 3px; }
.ip-field { flex: 1; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 6px 7px 6px 16px; border-radius: 20px; font-size: 17px; }
.ip-typed { flex: 1; min-width: 0; color: #000; line-height: 22px; overflow-wrap: anywhere; }
.ip-typed:empty { display: none; }
.ip-ph { flex: 1; color: #8a8a8e; white-space: nowrap; }
.ip-mic { color: #8e8e93; display: grid; padding-right: 7px; }
.ip-send { display: none; }
.ip-field.typing .ip-ph, .ip-field.typing .ip-mic { display: none; }
.ip-field.typing .ip-send { display: grid; animation: ip-pop .25s cubic-bezier(.2, .9, .3, 1.3) both; }
.ip-home { position: absolute; left: 50%; bottom: 9px; z-index: 3; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: #000; }
@media (max-width: 1100px) {
  .mt-wrap { grid-template-columns: minmax(0, 1fr); }
  .mt-prev { position: static; }
}

/* ============ Trade-ins, orders, scanning ============ */
/* Status pill shared by trade-ins and orders. */
.ti-st { --c: var(--text-muted); display: inline-flex; align-items: center; gap: .4rem; height: 24px; padding: 0 .6rem; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ti-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ti-st.t-info { --c: var(--info); } .ti-st.t-success { --c: var(--success); } .ti-st.t-warning { --c: var(--warning); }
.ti-st.t-danger { --c: var(--danger); } .ti-st.t-primary { --c: var(--primary); } .ti-st.t-secondary { --c: var(--text-muted); }
.ti-sub { display: block; margin-top: .1rem; font-size: .74rem; font-weight: 500; color: var(--text-muted); }
.ptx-table td strong.mono { font-size: .84rem; }

/* Trade-in form */
.ti-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: .9rem; }
.ti-grade {
  --c: var(--success); display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem .3rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); background: transparent; color: var(--text-muted);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.ti-grade b { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.ti-grade span { font-size: .72rem; font-weight: 600; }
.ti-grade.g-B { --c: var(--info); } .ti-grade.g-C { --c: var(--warning); } .ti-grade.g-D { --c: var(--danger); }
.ti-grade:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); color: var(--text-heading); }
.ti-grade.on { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: var(--c); color: var(--c); transform: translateY(-2px); }
.ti-cond { margin-top: .2rem; }
.ti-ck { display: flex; align-items: center; gap: .4rem; height: 38px; }
.ti-safety { display: flex; flex-direction: column; gap: .5rem; }
.ti-safe {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .8rem; cursor: pointer; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: transparent; color: var(--text-body);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ti-safe:hover { border-color: var(--input-border); }
.ti-safe.on { background: var(--success-soft); border-color: rgba(var(--success-rgb), .4); }
.ti-safe-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--warning-soft); color: var(--warning); transition: background .2s, color .2s; }
.ti-safe.on .ti-safe-ico { background: var(--success-soft); color: var(--success); }
.ti-safe-t { flex: 1; min-width: 0; }
.ti-safe-t strong { display: block; font-size: .87rem; color: var(--text-heading); }
.ti-safe-t small { display: block; font-size: .74rem; color: var(--text-muted); line-height: 1.35; }
.ti-safe .tswitch { pointer-events: none; flex-shrink: 0; }
.ti-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
.ti-offer .ci-money > input { min-width: 0; }
.ti-offer label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--text-muted); min-width: 0; }
.ti-big > input { height: 48px !important; font-size: 1.25rem; font-weight: 800; }
.ti-paylab { margin: .85rem 0 .4rem; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.ti-pay .ci-method svg { color: currentColor; }
.ti-opts-field .iv-opts { margin-top: .4rem; }
.ti-imei > input { padding-right: 6.6rem !important; }
.ti-imei .ci-badge { right: 2.6rem; }

/* Trade-in bought: summary */
.ti-hero { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; background: linear-gradient(100deg, var(--success-soft), transparent 70%), var(--card-bg); }
.ti-hero-ico { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; background: var(--success); color: #fff; box-shadow: 0 8px 20px -6px rgba(var(--success-rgb), .6); animation: ptx-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.ti-hero-t { flex: 1; min-width: 0; }
.ti-hero-t h2 { margin: 0; font-size: 1.2rem; }
.ti-hero-t p { margin: .2rem 0 0; color: var(--text-muted); font-size: .88rem; }
.ti-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.ti-kv { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--border); font-size: .87rem; }
.ti-kv:first-of-type { border-top: 0; }
.ti-kv span { color: var(--text-muted); }
.ti-kv strong { color: var(--text-heading); font-weight: 600; text-align: right; }
.ti-safe-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--border); font-size: .8rem; }
.ti-safe-list span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.ti-safe-list .ok { color: var(--success); } .ti-safe-list .no { color: var(--danger); }
.ti-notes { margin: .7rem 0 0; padding: .7rem .8rem; border-radius: var(--r-md); background: var(--body-bg); font-size: .85rem; color: var(--text-body); }
@media (max-width: 1000px) { .ti-cols { grid-template-columns: 1fr; } }

/* Part out */
.modal.po-modal { max-width: 720px; }
.po-basis { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; margin-bottom: .8rem; border-radius: var(--r-lg); background: var(--body-bg); }
.po-basis span { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.po-basis strong { font-size: 1.15rem; color: var(--text-heading); }
.po-rows { display: flex; flex-direction: column; }
.po-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 74px 74px 110px; gap: .75rem; align-items: center; padding: .55rem .2rem; border-top: 1px solid var(--border); cursor: pointer; transition: opacity .2s; }
.po-row:first-child { border-top: 0; }
.po-row.off { opacity: .45; }
.po-row .fcheck input { width: 18px; height: 18px; }
.po-name strong { display: block; font-size: .88rem; color: var(--text-heading); }
.po-name small { display: block; font-size: .74rem; color: var(--text-light); }
.po-in { display: flex; flex-direction: column; gap: .15rem; }
.po-in small { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); }
.po-in input { width: 100%; height: 32px; padding: 0 .5rem; border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-heading); text-align: right; }
.po-cost { text-align: right; font-size: .84rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }

/* Purchase orders */
.po-cnt { min-width: 20px; height: 18px; padding: 0 .35rem; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--warning-soft); color: var(--warning); font-size: .7rem; font-weight: 700; }
.po-tabs button { display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .85rem; }
.po-tabs { height: 36px; align-items: stretch; }
.modal.po-edit { max-width: 860px; }
.po-sup { display: flex; gap: .4rem; }
.po-sup select { flex: 1; min-width: 0; }
.po-sup .btn { height: auto; padding: 0 .7rem; }
.po-lines { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.po-line { display: grid; grid-template-columns: minmax(0, 1fr) 76px 104px 104px 34px; gap: .55rem; align-items: center; padding: .45rem .6rem; border-top: 1px solid var(--border); }
.po-line:first-child, #po-items .po-line:first-child { border-top: 0; }
.po-line.head { border-top: 0; background: var(--body-bg); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); }
#po-items { border-top: 1px solid var(--border); }
.po-line .r { text-align: right; }
.po-line input { width: 100%; height: 34px; padding: 0 .55rem; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--text-heading); transition: border-color .15s, background .15s; }
.po-line input:hover:not(:disabled) { border-color: var(--border); }
.po-line input:focus { outline: none; border-color: var(--primary); background: var(--card-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.po-pn { display: flex; flex-direction: column; min-width: 0; }
.po-pn small { padding-left: .55rem; font-size: .7rem; font-weight: 600; color: var(--info); }
.po-line strong.num { font-variant-numeric: tabular-nums; color: var(--text-heading); padding-right: .2rem; }
.po-empty { margin: 0; padding: 1.2rem; text-align: center; font-size: .85rem; color: var(--text-light); }
.po-add { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--border); background: var(--body-bg); }
.po-foot { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.2rem; margin-top: 1rem; align-items: start; }
.po-totals { display: flex; flex-direction: column; gap: .45rem; padding: .8rem 1rem; border-radius: var(--r-lg); background: var(--body-bg); font-size: .88rem; }
.po-totals > div { display: flex; align-items: center; justify-content: space-between; gap: .8rem; color: var(--text-muted); }
.po-totals > div > span { display: flex; align-items: center; gap: .3rem; }
.po-totals strong { color: var(--text-heading); font-variant-numeric: tabular-nums; }
.po-totals .tot { padding-top: .45rem; border-top: 1px solid var(--border); font-weight: 600; color: var(--text-heading); }
.po-totals .tot strong { font-size: 1.15rem; }
.po-ship { width: 120px; }
.po-ship > input { height: 34px !important; }
.po-rcv { font-size: .78rem; font-weight: 700; color: var(--warning); font-variant-numeric: tabular-nums; }
.po-rcv.all { color: var(--success); display: inline-flex; align-items: center; gap: .3rem; }
.modal.po-rcv-modal { max-width: 520px; }
.po-rlines { display: flex; flex-direction: column; }
.po-rline { display: flex; align-items: center; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--border); }
.po-rline:first-child { border-top: 0; }
.po-rline .po-pn { flex: 1; }
.po-rline .po-pn strong { font-size: .9rem; color: var(--text-heading); }
.po-rline .po-pn small { padding: 0; color: var(--text-muted); }
.po-rline input { width: 80px; height: 36px; padding: 0 .6rem; border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-heading); text-align: right; font-weight: 700; }
.po-rline.done { opacity: .6; }
@media (max-width: 760px) {
  .po-foot { grid-template-columns: 1fr; }
  .po-line { grid-template-columns: minmax(0, 1fr) 56px 80px 30px; }
  .po-line > :nth-child(4) { display: none; }
  .po-row { grid-template-columns: auto minmax(0, 1fr) 60px 60px; }
  .po-cost { display: none; }
}


/* Check In: warranty banner, cover line; inventory cover tag */
.ci-warranty { display: flex; align-items: center; gap: .75rem; margin-top: .8rem; padding: .7rem .8rem; border-radius: var(--r-lg); animation: ptx-rise .35s var(--ease) both; }
.ci-warranty[hidden] { display: none; }
.ci-warranty.on { background: var(--success-soft); border: 1px solid rgba(var(--success-rgb), .35); }
.ci-warranty.off { background: var(--body-bg); border: 1px solid var(--border); }
.ci-w-ico { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--card-bg); color: var(--success); }
.ci-warranty.off .ci-w-ico { color: var(--text-muted); }
.ci-w-t { flex: 1; min-width: 0; }
.ci-w-t strong { display: block; font-size: .88rem; color: var(--text-heading); }
.ci-w-t small { display: block; font-size: .76rem; color: var(--text-muted); }
.ci-cover span { display: inline-flex; align-items: center; gap: .35rem; height: 38px; font-size: .86rem; font-weight: 600; }
.ci-cover.on span { color: var(--success); } .ci-cover.off span { color: var(--text-muted); }
.iv-cover { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.iv-cover.on { color: var(--success); } .iv-cover.off { color: var(--text-muted); }

/* Scanning */
.scan-in-btn { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: transparent; color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s; }
.scan-in-btn:hover { background: var(--primary-soft); color: var(--primary); }
.ci-inwrap.end:has(.scan-in-btn) > input { padding-right: 6.6rem; }
/* No IMEI badge yet: only the scan button needs the room. */
.ci-inwrap.end:has(.scan-in-btn):has(.ci-badge[hidden]) > input { padding-right: 2.8rem; }
.ci-inwrap.end:has(.scan-in-btn) .ci-badge { right: 2.6rem; }
.imx-scan { position: relative; }
.imx-scan .scan-in-btn { position: static; transform: none; flex-shrink: 0; }
.modal.scan-modal { max-width: 460px; }
.scan-view { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; background: #0b0c14; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 18% 14%; }
.scan-frame i { position: absolute; width: 26px; height: 26px; border: 3px solid #fff; border-radius: 4px; opacity: .9; transition: border-color .2s; }
.scan-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.scan-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.scan-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.scan-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.scan-line { position: absolute; left: 6%; right: 6%; height: 2px; top: 50%; border-radius: 2px; background: var(--primary); box-shadow: 0 0 12px 2px rgba(var(--primary-rgb), .7); animation: scan-sweep 2s ease-in-out infinite; }
@keyframes scan-sweep { 0%, 100% { transform: translateY(-38px); } 50% { transform: translateY(38px); } }
.scan-view.hit .scan-frame i { border-color: var(--success); }
.scan-view.hit .scan-line { background: var(--success); box-shadow: 0 0 14px 3px rgba(var(--success-rgb), .7); animation: none; }
.scan-msg { position: absolute; inset: auto 1rem 1rem; padding: .6rem .8rem; border-radius: var(--r-md); background: rgba(0, 0, 0, .7); color: #fff; font-size: .82rem; text-align: center; }
.scan-manual { display: flex; gap: .5rem; margin-top: .8rem; }
.scan-manual input { flex: 1; min-width: 0; height: 38px; padding: 0 .8rem; border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-heading); }
.scan-manual input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
@media (prefers-reduced-motion: reduce) { .scan-line { animation: none; } }

/* ============ Settings: Taxes and Tickets ============ */
.field.tx-dep.is-off { display: none; }
/* Settings → Team: the same card + equal-row style as Tickets. */
.tks-h-r { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.tms { display: flex; flex-direction: column; gap: 1.25rem; }
.tms-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.tms-count { margin-left: .45rem; min-width: 22px; height: 20px; padding: 0 .45rem; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--track-bg); font-size: .72rem; font-weight: 700; color: var(--text-muted); }
.tms-mem { display: grid; grid-template-columns: minmax(0, 1.6fr) 130px 120px 36px; gap: 1rem; align-items: center; min-height: 64px; padding: .6rem 1.25rem; border-top: 1px solid var(--border); font-size: .88rem; }
.tms-login { margin-left: .4rem; font-weight: 600; }
.tms-login:not(:empty)::before { content: '·'; margin-right: .4rem; color: var(--text-light); font-weight: 400; }
.tms-login.on { color: var(--success); }
.tms-login.wait { color: var(--warning); }
.tms-mem-h { min-height: 38px; border-top: 0; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); background: color-mix(in srgb, var(--body-bg) 50%, var(--card-bg)); }
.tms-who { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.tms-who > span:last-child { min-width: 0; }
.tms-who strong { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; }
.tms-who strong em { font-style: normal; height: 18px; padding: 0 .45rem; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary); font-size: .66rem; font-weight: 700; }
.tms-who small { display: block; font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tms-pin { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--text-light); }
.tms-pin.on { color: var(--text-heading); font-weight: 600; }
.tms-pin.on svg { color: var(--success); }
.tms-invite { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.25rem; border-top: 1px dashed var(--border); font-size: .84rem; color: var(--text-muted); }
.tms-invite > span { flex: 1; }
.tms-invite > svg { color: var(--primary); }
.tms-goal { cursor: text; }
.tms-goal .stx-goal-ico { flex-shrink: 0; }
.tms-goal .stx-goal-in { flex-shrink: 0; }

.tms-dc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tms-dc-col { padding: 1rem 1.25rem 1.15rem; min-width: 0; }
.tms-dc-col + .tms-dc-col { border-left: 1px solid var(--border); }
.tms-dc-h { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.tms-dc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; transition: opacity .25s; }
.tms-dc-list.off { opacity: .45; }
.tms-dc-item { display: flex; align-items: center; gap: .55rem; min-height: 40px; padding: 0 .35rem 0 .2rem; border-radius: var(--r); transition: background .2s; }
.tms-dc-item:hover, .tms-dc-item:focus-within { background: var(--hover-bg); }
.tms-dc-n { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--track-bg); font-size: .68rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tms-dc-item input { flex: 1; min-width: 0; height: 32px; padding: 0 .5rem; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-heading); font: inherit; font-size: .86rem; transition: border-color .2s, background .2s; }
.tms-dc-item input:hover { border-color: var(--border); }
.tms-dc-item input:focus { outline: none; border-color: var(--primary); background: var(--card-bg); box-shadow: 0 0 0 3px var(--primary-soft); }
.tms-dc-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .2s; }
.tms-dc-item:hover .tms-dc-acts, .tms-dc-item:focus-within .tms-dc-acts { opacity: 1; }
@media (hover: none) { .tms-dc-acts { opacity: 1; } }
.tms-dc-acts button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.tms-dc-acts button:first-child svg { transform: rotate(180deg); }
.tms-dc-acts button:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.tms-dc-acts button.rm:hover { background: var(--danger-soft); color: var(--danger); }
.tms-dc-acts button:disabled { opacity: .3; cursor: default; }
.tms-dc-none { padding: .6rem .3rem; font-size: .84rem; color: var(--text-light); }
.tms-dc-add { display: flex; align-items: center; gap: .55rem; margin-top: .5rem; padding: .3rem .35rem .3rem .2rem; border: 1px dashed var(--input-border); border-radius: var(--r); transition: border-color .2s; }
.tms-dc-add:focus-within { border-color: var(--primary); border-style: solid; }
.tms-dc-add > span { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; color: var(--text-light); }
.tms-dc-add input { flex: 1; min-width: 0; height: 30px; border: 0; outline: none; background: transparent; color: var(--text-heading); font: inherit; font-size: .86rem; }

.stx-act-grid .tks-card .tks-h { border-bottom: 1px solid var(--border); }
.stx-act-grid .stx-day:first-child { border-top: 0; }
@media (max-width: 1000px) { .tms-two, .tms-dc { grid-template-columns: minmax(0, 1fr); } .tms-dc-col + .tms-dc-col { border-left: 0; border-top: 1px solid var(--border); } }
@media (max-width: 760px) {
  .tms-mem { grid-template-columns: minmax(0, 1fr) auto 32px; }
  .tms-mem > :nth-child(3) { display: none; }
  .tks-h { flex-wrap: wrap; }
}

/* Settings → Tickets: three cards of equal-height rows, live preview on the right. */
.tks { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.tks-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.tks-card { overflow: hidden; }
.tks-h { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.tks-h h3 { margin: 0; font-size: .98rem; font-weight: 700; display: flex; align-items: center; }
.tks-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.tks-row { display: flex; align-items: center; gap: 1rem; min-height: 68px; padding: .7rem 1.25rem; border-top: 1px solid var(--border); }
.tks-h + .tks-row { border-top: 0; }
.tks-l { flex: 1; min-width: 0; }
.tks-l strong { display: block; font-size: .9rem; font-weight: 600; color: var(--text-heading); }
.tks-l small { display: block; margin-top: .1rem; font-size: .78rem; color: var(--text-muted); }
.tks-r { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }
.tks-r .stx-select, .tks-r .xsel { width: 200px; }
.tks-r .tswitch { margin-left: 0; }

.tks-views { display: flex; gap: .5rem; }
.tks-view {
  display: flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .8rem 0 .55rem; border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: transparent; cursor: pointer; font-size: .76rem; font-weight: 600; color: var(--text-muted);
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.tks-view svg { width: 38px; height: 24px; }
.tks-view span { font-size: .82rem; }
.tks-view .a1 { fill: var(--track-bg); transition: fill .25s; }
.tks-view .a2 { fill: var(--input-border); transition: fill .25s; }
.tks-view:hover { border-color: var(--input-border); }
.tks-view.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.tks-view.on .a1 { fill: color-mix(in srgb, var(--primary) 18%, transparent); }
.tks-view.on .a2 { fill: var(--primary); }

.tks-bits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: 1rem 1.25rem 1.2rem; }
.tks-bit {
  display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .55rem .7rem .55rem .6rem; border: 1px solid var(--border); border-radius: var(--r-md);
  background: transparent; cursor: pointer; text-align: left; transition: border-color .25s var(--ease), background .25s var(--ease);
}
.tks-bit:hover { border-color: var(--input-border); }
.tks-bit.on { border-color: rgba(var(--primary-rgb), .35); background: color-mix(in srgb, var(--primary) 5%, var(--card-bg)); }
.tks-bit-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--track-bg); color: var(--text-muted); transition: background .25s, color .25s; }
.tks-bit.on .tks-bit-ico { background: var(--primary-soft); color: var(--primary); }
.tks-bit-l { flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; color: var(--text-heading); }
.tks-bit .tswitch { margin-left: 0; pointer-events: none; transform: scale(.85); transform-origin: right center; }

.tks-due { height: 36px; }
.tks-due button { padding: 0 .7rem; font-size: .8rem; }
.tks-stages-row { flex-wrap: wrap; }
.tks-stages { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .1rem 0 .2rem; }
.tks-stage { display: inline-flex; align-items: center; gap: .4rem; height: 26px; padding: 0 .65rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: .76rem; font-weight: 700; }
.tks-stage i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tks-arrow { color: var(--text-light); display: inline-flex; }

.tks-side { position: sticky; top: 90px; }
.tks-prev { padding: 1rem 1.1rem 1.2rem; background: color-mix(in srgb, var(--body-bg) 55%, var(--card-bg)); }
.tks-prev-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.tks-prev-h span { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); }
.tks-prev-h em { display: inline-flex; align-items: center; gap: .3rem; font-style: normal; font-size: .74rem; font-weight: 600; color: var(--text-muted); }
.tks-prev-card .tk-card { pointer-events: none; margin: 0; box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .tks-view, .tks-bit, .tks-bit-ico { transition: none; } }
@media (max-width: 1100px) { .tks { grid-template-columns: minmax(0, 1fr); } .tks-side { position: static; order: -1; } .tks-bits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tks-row { flex-wrap: wrap; }
  .tks-r { width: 100%; justify-content: flex-start; }
  .tks-r .stx-select, .tks-r .xsel { width: 100%; }
  .tks-due { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tks-bits { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Day checks ============ */
/* Start / End of Day checklist (pops up on clock in / out), its record and editor. */
.modal.dc-modal { max-width: 520px; }
.dc-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.dc-ico { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-md); }
.dc-ico.open, .stx-dc-ico.open { background: var(--warning-soft); color: var(--warning); }
.dc-ico.close, .stx-dc-ico.close { background: var(--primary-soft); color: var(--primary); }
.dc-top-t { flex: 1; min-width: 0; }
.dc-top-t strong { display: block; font-size: .95rem; color: var(--text-heading); }
.dc-top-t small { font-size: .78rem; color: var(--text-muted); }
.dc-list { display: flex; flex-direction: column; gap: .4rem; }
.dc-item {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: transparent; text-align: left; font: inherit; font-size: .9rem; font-weight: 600; color: var(--text-heading); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dc-item:hover { border-color: var(--input-border); }
.dc-item[aria-pressed="true"] { border-color: rgba(var(--success-rgb), .4); background: var(--success-soft); }
.dc-item.ro { cursor: default; }
.dc-item.ro[aria-pressed="false"] { color: var(--text-muted); }
.dc-box {
  width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--input-border); color: transparent;
  transition: background .2s, border-color .2s, color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.dc-item[aria-pressed="true"] .dc-box { background: var(--success); border-color: var(--success); color: #fff; transform: scale(1.08); }
.dc-item.ro[aria-pressed="false"] .dc-box { border-color: transparent; background: var(--danger-soft); color: var(--danger); }
.dc-modal .modal-foot { align-items: center; }
.dc-said { display: flex; align-items: flex-start; gap: .45rem; margin: .9rem 0 0; padding: .7rem .85rem; border-radius: var(--r-md); background: var(--body-bg); font-size: .86rem; color: var(--text-body); }
.dc-said svg { flex-shrink: 0; margin-top: .15rem; color: var(--text-muted); }



/* Day checks: each day in plain words. */
.dk-card { overflow: hidden; }
.dk-head, .dk-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0 1.2rem; }
.dk-head { height: 42px; border-bottom: 1px solid var(--border); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); }
.dk-head span { display: inline-flex; align-items: center; gap: .4rem; }
.dk-row { padding-top: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.dk-row:last-child { border-bottom: 0; }
.dk-row.today { background: rgba(var(--primary-rgb), .045); }
.dk-day strong { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--text-heading); }
.dk-day em { font-style: normal; height: 20px; padding: 0 .5rem; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--primary); color: #fff; font-size: .66rem; font-weight: 700; }
.dk-day small { font-size: .76rem; color: var(--text-muted); }
.dk-st { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .35rem .5rem .35rem .35rem; border: 0; border-radius: var(--r-lg); background: transparent; text-align: left; font: inherit; color: inherit; }
button.dk-st { cursor: pointer; transition: background .2s var(--ease); }
button.dk-st:hover { background: var(--hover-bg); }
.dk-st > i { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--tone-soft, var(--track-bg)); color: var(--tone, var(--text-muted)); }
.dk-st > span { min-width: 0; display: flex; flex-direction: column; }
.dk-st strong { font-size: .86rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-st small { font-size: .74rem; color: var(--text-muted); }
.dk-st.ok { --tone: var(--success); --tone-soft: var(--success-soft); }
.dk-st.part { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.dk-st.skip, .dk-st.miss { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.dk-st.miss strong { color: var(--danger); }
.dk-st.todo { --tone: #fff; --tone-soft: var(--primary); }
.dk-st.todo strong { color: var(--primary); }
.dk-st.off strong, .dk-st.wait strong { color: var(--text-muted); font-weight: 500; }
html[data-anim="full"] .dk-st > i { animation: dk-pop .45s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: .12s; }
@keyframes dk-pop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ts-prog i, .dk-st > i { animation: none !important; } }
@media (max-width: 760px) {
  .ts-row { grid-template-columns: 1fr auto; gap: .2rem .8rem; }
  .ts-day { grid-column: 1; }
  .ts-time { grid-column: 1; grid-row: 2; font-size: .84rem; }
  .ts-brk, .ts-flags { display: none; }
  .ts-hrs { grid-column: 2; grid-row: 1 / span 2; }
  .ts-h { flex-wrap: wrap; }
  .ts-sum { width: 100%; flex-direction: row; align-items: baseline; gap: .5rem; justify-content: flex-start; }
  .dk-head { display: none; }
  .dk-row { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

/* Settings → Team → Day Checks */
.stx-dc-ico { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-md); }
.stx-dc-t { flex: 1; min-width: 0; }
.stx-dc-t strong { display: block; font-size: .92rem; color: var(--text-heading); }
.stx-dc-t small { font-size: .76rem; color: var(--text-muted); }

/* ============ Schedule ============ */
/* Rota and Timesheets share one week grid (below). */
.sc-week { display: flex; align-items: center; gap: .5rem; }
.sc-week strong { min-width: 150px; text-align: center; font-size: .95rem; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.sc-bar-r { display: flex; align-items: center; gap: 1rem; margin-left: auto; flex-wrap: wrap; }
.sc-bar-r .iv-stats { margin-left: 0; }
.sc-who-t { min-width: 0; }
.sc-who-t strong { display: block; font-size: .88rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-who-t small { display: block; font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* Rota and Timesheets: one week grid. People down the side, days across,
   a total per person on the right and per day along the bottom. */
.wk-card { overflow: hidden; }
.wk-scroll { overflow-x: auto; }
.wk { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.wk th, .wk td { padding: 0; font-weight: inherit; text-align: left; vertical-align: top; }
.wk col, .wk .wk-corner, .wk .wk-who { width: 200px; }
.wk .wk-tot { width: 124px; }
.wk thead th { padding: .85rem .6rem .7rem; border-bottom: 1px solid var(--border); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); vertical-align: bottom; }
.wk thead .wk-corner { padding-left: 1.2rem; }
.wk-dh span { display: block; }
.wk-dh b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin-top: .3rem; margin-left: -.35rem; padding: 0 .35rem; border-radius: 8px; font-size: .95rem; font-weight: 700; letter-spacing: 0; color: var(--text-heading); }
.wk-dh.today span { color: var(--primary); }
.wk-dh.today b { background: var(--primary); color: #fff; }
.wk thead .wk-tot, .wk td.wk-tot { text-align: right; padding-right: 1.2rem; }

.wk-who { padding: .8rem .6rem .8rem 1.2rem !important; vertical-align: middle !important; }
.wk-who-in { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.wk-ft-h { padding: .85rem .6rem .7rem 1.2rem !important; }
.wk tbody tr + tr > *, .wk tfoot > tr > * { border-top: 1px solid var(--border); }
.wk-cell { padding: .45rem .3rem !important; border-left: 1px solid var(--border); }
.wk td.wk-tot { padding: .85rem 1.2rem .85rem .6rem; border-left: 1px solid var(--border); }
.wk-cell.today, .wk-ft.today { background: rgba(var(--primary-rgb), .04); }
.wk tbody tr { transition: background var(--dur-fast) var(--ease); }
.wk tbody tr:hover { background: var(--hover-bg); }
.wk tbody tr:hover .wk-cell.today { background: transparent; }

/* A shift (or a day's clocked hours): soft tint in the person's colour. */
.wk-shift, .wk-ghost {
  display: flex; flex-direction: column; gap: .1rem; width: 100%; min-width: 0; padding: .45rem .55rem; margin-bottom: .3rem;
  border: 0; border-left: 3px solid var(--c); border-radius: 8px; text-align: left; font: inherit;
  background: color-mix(in srgb, var(--c) 13%, var(--card-bg)); color: inherit;
}
.wk-shift { cursor: pointer; transition: background .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.wk-shift:last-child, .wk-ghost:last-child { margin-bottom: 0; }
.wk-shift:hover { background: color-mix(in srgb, var(--c) 22%, var(--card-bg)); transform: translateY(-1px); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--c) 70%, transparent); }
.wk-shift:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.wk-shift[tabindex="-1"] { cursor: default; }
.wk-shift[tabindex="-1"]:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--c) 13%, var(--card-bg)); }
.wk-shift b, .wk-ghost b { font-size: .78rem; letter-spacing: -.01em; font-weight: 700; color: var(--text-heading); white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.wk-shift small, .wk-ghost small { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wk-shift.live small { color: var(--success); font-weight: 600; }
.wk-shift.live b::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 .35rem .1rem 0; border-radius: 50%; background: var(--success); vertical-align: middle; }
.wk-shift.warn { --c: var(--warning); }
.wk-shift.warn small { color: var(--warning); font-weight: 600; }
/* Planned but not clocked: an outline only. */
.wk-ghost { background: transparent; border: 1px dashed color-mix(in srgb, var(--c) 45%, var(--border)); border-left: 3px solid color-mix(in srgb, var(--c) 45%, transparent); }
.wk-ghost b { color: var(--text-muted); font-weight: 600; }
.wk-ghost.miss small { color: var(--danger); }
button.wk-ghost { cursor: pointer; transition: border-color .2s, background .2s; }
button.wk-ghost:hover { border-style: solid; background: color-mix(in srgb, var(--c) 7%, transparent); }
button.wk-ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Empty day: a quiet + that shows when you hover the row. */
.wk-add {
  display: grid; place-items: center; width: 100%; min-height: 46px; border: 1px dashed transparent; border-radius: 8px;
  background: none; color: var(--text-light); cursor: pointer; opacity: 0; transition: opacity .2s, border-color .2s, color .2s, background .2s;
}
.wk tr:hover .wk-add, .wk-add:focus-visible { opacity: 1; border-color: var(--border); }
.wk-add:hover { color: var(--primary); border-color: rgba(var(--primary-rgb), .45) !important; background: rgba(var(--primary-rgb), .05); }
.wk-add:focus-visible { outline: none; color: var(--primary); }
@media (hover: none) { .wk-add { opacity: .55; border-color: var(--border); } }

/* Totals */
.wk td.wk-tot strong, .wk-ft strong { display: block; font-size: .92rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.wk td.wk-tot small, .wk-ft small { display: block; margin-top: .1rem; font-size: .72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk tfoot > tr > * { background: var(--body-bg); }
.wk tfoot .wk-ft-h { vertical-align: top; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); }
.wk-ft { padding: .7rem .6rem !important; border-left: 1px solid var(--border); }
.wk tfoot .wk-ft.today { background: color-mix(in srgb, var(--primary) 5%, var(--body-bg)); }
.wk-none { font-size: .8rem; color: var(--text-light); }

/* Keep names in view while the week scrolls sideways on small screens. */
@media (max-width: 1100px) {
  .wk .wk-who, .wk .wk-corner, .wk .wk-ft-h { position: sticky; left: 0; z-index: 1; background: var(--card-bg); }
  .wk tfoot .wk-ft-h { background: var(--body-bg); }
  .wk .wk-corner, .wk .wk-who { width: 170px; }
}
@media (max-width: 760px) {
  .wk { min-width: 1080px; }
  .wk .wk-corner, .wk .wk-who, .wk .wk-ft-h { width: 128px; }
  .wk .wk-tot { width: 100px; }
  .wk-who { padding-left: .8rem !important; }
  .wk thead .wk-corner, .wk-ft-h { padding-left: .8rem !important; }
  .wk-who .sc-ava { display: none; }
  .wk td.wk-tot, .wk thead .wk-tot { padding-right: .8rem; }
}
.sc-ava { position: relative; width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--c); color: #fff; font-size: .74rem; font-weight: 700; }
.sc-live { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--success); border: 2px solid var(--card-bg); animation: sc-pulse 2s ease-out infinite; }
.sc-live.brk { background: var(--warning); animation: none; }
@keyframes sc-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--success-rgb), .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--success-rgb), 0); } }
.sc-tip { display: flex; align-items: center; gap: .45rem; margin: .9rem .2rem 0; font-size: .82rem; color: var(--text-muted); }

.sc-len { display: flex; align-items: center; height: 40px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.sc-rates-h { margin: 1.3rem 0 .6rem; font-size: .9rem; }
.sc-rates { display: flex; flex-direction: column; gap: .45rem; }
.sc-rate { display: flex; align-items: center; gap: .65rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--r-md); }
.sc-rate .sc-ava { width: 30px; height: 30px; font-size: .68rem; }
.sc-rate-n { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--text-heading); }
.sc-rate-in { display: flex; align-items: center; gap: .35rem; }
.sc-rate-in em { font-style: normal; font-weight: 600; color: var(--text-muted); }
.sc-rate-in input { width: 92px; height: 34px; padding: 0 .6rem; border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-heading); text-align: right; font-weight: 700; }

/* Header time clock: green while on shift, amber on a break. */
/* On shift it becomes a pill like the others when hovered: icon, time, even padding. */
#hd-clock .sc-dot { display: none; top: 6px; right: 6px; bottom: auto; }
#hd-clock.on .hdr-label { max-width: 120px; opacity: 1; margin-left: .45rem; }
.header-actions #hd-clock.on .icon-btn { padding: 0 .8rem; border-radius: var(--r-pill); color: var(--success); background: var(--success-soft); }
.header-actions #hd-clock.on .icon-btn:hover { background: rgba(var(--success-rgb), .22); color: var(--success); }
.header-actions #hd-clock.brk .icon-btn, .header-actions #hd-clock.brk .icon-btn:hover { color: var(--warning); background: var(--warning-soft); }
#hd-clock.brk .sc-dot { background: var(--warning); }
#hd-clock .hdr-label { font-variant-numeric: tabular-nums; }
.hdrop-item.sc-in { color: var(--success); }
.hdrop-item.sc-out { color: var(--danger); }
.hdrop-item.sc-out:hover { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 760px) {
  .sc-bar-r { margin-left: 0; width: 100%; justify-content: space-between; }
  .sc-week { width: 100%; justify-content: space-between; }
}

/* ============ Analytics period switch ============ */
.an-head { align-items: center; }
.page-head .seg.an-periods { height: 38px; padding: 4px; }
.an-periods button { min-width: 78px; padding: 0 1rem; font-size: .84rem; }
.an-overview { padding-top: .2rem; }
/* Sales Overview tooltip: the day, then revenue / profit / spent / orders. */
.chart-tip .tip-title { margin-bottom: .35rem; font-size: .8rem; font-weight: 700; color: var(--text-heading); }
.chart-tip .tip-row { display: flex; justify-content: space-between; gap: 1.2rem; font-size: .76rem; line-height: 1.6; color: var(--text-muted); }
.chart-tip .tip-row b { color: var(--text-heading); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .an-head .seg.an-periods { width: 100%; } .an-periods button { flex: 1; min-width: 0; padding: 0 .4rem; } }

/* ============ Messages ============ */
/* Conversations on the left, the thread and composer on the right. */
.mx-wrap { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100vh - 205px); min-height: 520px; overflow: hidden; }
.mx-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.mx-side-top { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; border-bottom: 1px solid var(--border); }
.mx-search, .iv-search.mx-search input { width: 100%; }
.mx-tabs { align-self: flex-start; }
.mx-tabs > .glide-thumb { border-radius: var(--r-sm); background: var(--card-bg); box-shadow: var(--shadow-xs); }
.mx-tabs.has-glide > button.on { background: transparent; box-shadow: none; }
.mx-convs { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem; }
.mx-conv {
  position: relative; display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem .7rem; border: 0; border-radius: var(--r-md);
  background: transparent; text-align: left; cursor: pointer; color: inherit; transition: background var(--dur-fast) var(--ease);
}
.mx-conv:hover { background: var(--hover-bg); }
.mx-conv.on { background: var(--primary-soft); }
.mx-conv:disabled { opacity: .45; cursor: not-allowed; }
.mx-conv-t { flex: 1; min-width: 0; }
.mx-conv-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.mx-conv-h strong { font-size: .88rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-conv-h time { flex-shrink: 0; font-size: .72rem; color: var(--text-light); }
.mx-snip { display: block; margin-top: .1rem; font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-snip em { font-style: normal; color: var(--text-light); }
.mx-conv.unread .mx-conv-h strong, .mx-conv.unread .mx-snip { color: var(--text-heading); font-weight: 700; }
.mx-badge { min-width: 20px; height: 20px; padding: 0 .4rem; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; }
.mx-ava { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: .76rem; font-weight: 700; background: linear-gradient(135deg, #7367f0, #9e95f5); }
.mx-ava.t-info    { background: linear-gradient(135deg, #00bad1, #4dd6e6); }
.mx-ava.t-success { background: linear-gradient(135deg, #28c76f, #60dd97); }
.mx-ava.t-warning { background: linear-gradient(135deg, #ff9f43, #ffbf80); }
.mx-ava.t-violet  { background: linear-gradient(135deg, #b04fe0, #d68cf5); }
.mx-ava.t-danger  { background: linear-gradient(135deg, #ff4c51, #ff8a8d); }
.mx-none { margin: 0; padding: 1.4rem 1rem; text-align: center; font-size: .85rem; color: var(--text-light); }

.mx-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mx-empty { flex: 1; display: grid; place-items: center; }
.mx-th { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.2rem; border-bottom: 1px solid var(--border); }
.mx-back { display: none; }
.mx-th-t { flex: 1; min-width: 0; }
.mx-th-t strong { display: block; font-size: .95rem; color: var(--text-heading); }
.mx-th-t small { font-size: .78rem; color: var(--text-muted); }
.mx-th-tk { display: flex; gap: .35rem; }
.mx-tk { height: 26px; padding: 0 .6rem; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary); font-size: .74rem; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.mx-tk:hover { background: var(--primary); color: #fff; }
.mx-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 1.2rem 1.4rem .6rem; display: flex; flex-direction: column; gap: .55rem; }
.mx-day { display: flex; justify-content: center; margin: .6rem 0 .3rem; }
.mx-day span { padding: .2rem .7rem; border-radius: var(--r-pill); background: var(--track-bg); font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.mx-msg { display: flex; flex-direction: column; max-width: min(72%, 520px); }
.mx-msg.out { align-self: flex-end; align-items: flex-end; }
.mx-msg.in { align-self: flex-start; align-items: flex-start; }
.mx-b { padding: .6rem .85rem; border-radius: 18px; font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.mx-msg.out .mx-b { background: var(--primary); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 3px 10px rgba(var(--primary-rgb), .25); }
.mx-msg.in .mx-b { background: var(--track-bg); color: var(--text-heading); border-bottom-left-radius: 6px; }
.mx-tag { margin-bottom: .2rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); }
.mx-meta { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; font-size: .7rem; color: var(--text-light); }
.mx-meta .msg-mark { transform: scale(.8); }
.mx-compose { padding: .75rem 1.2rem 1rem; border-top: 1px solid var(--border); }
.mx-compose-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; flex-wrap: wrap; }
.mx-chans { height: 34px; }
.mx-chans button { display: inline-flex; align-items: center; gap: .35rem; height: 28px; padding: 0 .75rem; font-size: .8rem; }
.mx-chans .msg-mark { transform: scale(.85); }
#mx-count { font-size: .74rem; color: var(--text-light); }
#mx-tpl { margin-left: auto; }
.mx-input { display: flex; align-items: flex-end; gap: .6rem; padding: .45rem .45rem .45rem .9rem; border: 1px solid var(--input-border); border-radius: 16px; background: var(--card-bg); transition: border-color .2s, box-shadow .2s; }
.mx-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.mx-input textarea { flex: 1; min-height: 38px; max-height: 160px; padding: .5rem 0; border: 0; outline: none; resize: none; background: transparent; color: var(--text-heading); font: inherit; font-size: .9rem; line-height: 1.4; }
.mx-acts { display: flex; gap: .4rem; flex-shrink: 0; }
.mx-pick-list { display: flex; flex-direction: column; gap: .1rem; max-height: 360px; margin-top: .7rem; overflow-y: auto; }

/* ============ Guides ============ */
/* iFixit search: device and repair chips, then a grid of guide cards. */
.gd-head { align-items: center; }
.gd-head .seg b { min-width: 18px; height: 18px; padding: 0 .35rem; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--hover-bg); font-size: .7rem; font-weight: 700; color: var(--text-muted); transition: background .25s, color .25s; }
.gd-head .seg button.active b { background: var(--primary-soft); color: var(--primary); }
.gd-find { display: flex; flex-direction: column; gap: .85rem; padding: 1.1rem 1.2rem 1.2rem; margin-bottom: 1.2rem; }
.gd-search { position: relative; display: flex; align-items: center; gap: .5rem; height: 48px; padding: 0 .4rem 0 .9rem; border: 1px solid var(--input-border); border-radius: var(--r-lg); background: var(--card-bg); transition: border-color .2s, box-shadow .2s; }
.gd-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.gd-search > svg { color: var(--text-light); flex-shrink: 0; }
.gd-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text-heading); font: inherit; font-size: .95rem; }
.gd-row { display: flex; align-items: flex-start; gap: .8rem; }
.gd-lab { width: 120px; flex-shrink: 0; padding-top: .45rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); }
.gd-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.gd-chip {
  display: inline-flex; align-items: center; gap: .3rem; height: 32px; padding: 0 .8rem; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: transparent; color: var(--text-muted); font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.gd-chip:hover { color: var(--text-heading); border-color: var(--input-border); }
.gd-chip:active { transform: scale(.95); }
.gd-chip.on { border-color: transparent; background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.gd-chip.job { border-style: dashed; }
.gd-head-row { display: flex; align-items: center; justify-content: space-between; margin: 0 .2rem .8rem; }
.gd-count { font-size: .85rem; color: var(--text-muted); }
.gd-count b { color: var(--text-heading); }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.gd-card { position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.gd-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gd-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.gd-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: inherit; }
.gd-img { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--track-bg); color: var(--text-light); }
.gd-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gd-card:hover .gd-img img { transform: scale(1.04); }
.gd-body { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1rem; }
.gd-dev { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); }
.gd-body strong { font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--text-heading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gd-tags { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; flex-wrap: wrap; }
.gd-diff { height: 22px; padding: 0 .55rem; display: inline-flex; align-items: center; border-radius: var(--r-pill); font-size: .7rem; font-weight: 700; }
.gd-diff.success { background: var(--success-soft); color: var(--success); }
.gd-diff.warning { background: var(--warning-soft); color: var(--warning); }
.gd-diff.danger { background: var(--danger-soft); color: var(--danger); }
.gd-diff.secondary { background: var(--track-bg); color: var(--text-muted); }
.gd-time { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; color: var(--text-muted); }
.gd-save {
  position: absolute; top: .6rem; right: .6rem; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(20, 22, 38, .55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.85); transition: opacity .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s;
}
.gd-card:hover .gd-save, .gd-save:focus-visible, .gd-save.on { opacity: 1; transform: none; }
.gd-save.on { background: var(--primary); }
@media (hover: none) { .gd-save { opacity: 1; transform: none; } }
.gd-skel .gd-img { animation: gd-pulse 1.2s ease-in-out infinite; }
.gd-skel .gd-body i { display: block; height: 10px; border-radius: 5px; background: var(--track-bg); animation: gd-pulse 1.2s ease-in-out infinite; }
.gd-skel .gd-body i:nth-child(1) { width: 40%; } .gd-skel .gd-body i:nth-child(2) { width: 90%; height: 14px; } .gd-skel .gd-body i:nth-child(3) { width: 55%; }
@keyframes gd-pulse { 50% { opacity: .45; } }
.gd-more { display: flex; justify-content: center; margin-top: 1.2rem; }
.gd-out { display: flex; justify-content: center; margin: -1rem 0 1.6rem; }
.gd-credit { margin: 1.4rem 0 0; text-align: center; font-size: .76rem; color: var(--text-light); }
.gd-credit a { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .gd-skel .gd-img, .gd-skel .gd-body i { animation: none; } .gd-card, .gd-img img { transition: none; } }

@media (max-width: 900px) {
  .mx-wrap { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 190px); }
  .mx-main { display: none; }
  .mx-wrap.has-open .mx-side { display: none; }
  .mx-wrap.has-open .mx-main { display: flex; }
  .mx-back { display: grid; }
  .mx-msg { max-width: 85%; }
}
@media (max-width: 640px) {
  .gd-row { flex-direction: column; gap: .4rem; }
  .gd-lab { width: auto; padding-top: 0; }
  .gd-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: .2rem; scrollbar-width: none; }
  .gd-chip { flex-shrink: 0; }
  .mx-th-tk { display: none; }
  .mx-acts .btn { padding: 0 .6rem; }
}

/* ============ Warranty claims ============ */
/* File Claim on a ticket row, the claim form, and a filed claim. */
.tk-file-claim { white-space: nowrap; }
.tk-claim-chip {
  display: inline-flex; align-items: center; gap: .25rem; height: 20px; margin-left: .45rem; padding: 0 .5rem; border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: .68rem; font-weight: 700; vertical-align: 1px; cursor: pointer; transition: filter .2s;
}
.tk-claim-chip:hover { filter: brightness(1.1); }
.tk-claim-chip.open { background: var(--warning-soft); color: var(--warning); }
.tk-claim-chip.approved { background: var(--success-soft); color: var(--success); }
.tk-claim-chip.declined { background: var(--danger-soft); color: var(--danger); }

.modal.wc-modal { max-width: 720px; }
.wc-modal .modal-head h3 { color: var(--primary); }
.wc-cover { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem; padding: .6rem .8rem; border-radius: var(--r-md); font-size: .84rem; font-weight: 600; }
.wc-cover.ok { background: var(--success-soft); color: var(--success); }
.wc-cover.warn { background: var(--warning-soft); color: var(--warning); }
.wc-cover.off { background: var(--body-bg); color: var(--text-muted); }
.wc-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Device and IMEI come from the ticket and can't be changed here. */
.wc-grid input:disabled { background: var(--body-bg); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; }
.wc-grid + .wc-grid, .wc-desc { margin-top: .9rem; }
.wc-desc textarea { min-height: 84px; resize: vertical; }
.wc-min { display: block; margin-top: .3rem; font-size: .74rem; color: var(--text-light); transition: color .2s; }
.wc-min.ok { color: var(--success); }
.wc-h { margin: 1.3rem 0 .55rem; font-size: .9rem; color: var(--text-heading); }
.wc-need { padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--body-bg); font-size: .84rem; color: var(--text-body); }
.wc-need strong { display: block; margin-bottom: .3rem; font-size: .84rem; color: var(--text-heading); }
.wc-need ul, .wc-ack ul { margin: 0; padding-left: 1.1rem; }
.wc-need li, .wc-ack li { margin: .12rem 0; }
.wc-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; margin-top: .9rem; }
.wc-btn { position: relative; justify-content: center; height: 40px; cursor: pointer; }
.wc-btn.disabled { opacity: .45; pointer-events: none; }
.wc-limits { margin: .5rem 0 0; text-align: center; font-size: .76rem; color: var(--text-light); }
.wc-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.wc-thumbs:empty { display: none; }
.wc-thumb {
  position: relative; width: 112px; height: 84px; border-radius: var(--r-md); overflow: hidden; background: var(--track-bg); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-muted); animation: ptx-rise .3s var(--ease) both;
}
.wc-thumb img, .wc-thumb video { width: 100%; height: 100%; object-fit: cover; }
.wc-play { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; display: grid; place-items: center; border-radius: 50%; background: rgba(20, 22, 38, .6); color: #fff; }
.wc-size { position: absolute; left: .3rem; bottom: .3rem; padding: .05rem .35rem; border-radius: 5px; background: rgba(20, 22, 38, .6); color: #fff; font-size: .64rem; font-weight: 700; }
.wc-rm {
  position: absolute; top: .3rem; right: .3rem; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--danger); color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.wc-rm:hover { transform: scale(1.12); }
.wc-loading { animation: gd-pulse 1.2s ease-in-out infinite; }
.wc-missing { flex-direction: column; gap: .2rem; text-align: center; }
.wc-missing small { font-size: .66rem; font-weight: 600; }
.wc-ack {
  display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.3rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--r-lg);
  cursor: pointer; transition: border-color .2s, background .2s;
}
.wc-ack:hover { border-color: var(--input-border); }
.wc-ack.on { border-color: rgba(var(--primary-rgb), .45); background: var(--primary-soft); }
.wc-ack input { position: absolute; opacity: 0; pointer-events: none; }
.wc-check {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: .05rem; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--input-border); color: transparent;
  transition: background .2s, border-color .2s, color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.wc-ack.on .wc-check { background: var(--primary); border-color: var(--primary); color: #fff; transform: scale(1.06); }
.wc-ack input:focus-visible + .wc-check { box-shadow: 0 0 0 3px var(--primary-soft); }
.wc-ack-t { display: flex; flex-direction: column; gap: .3rem; font-size: .83rem; color: var(--text-body); }
.wc-ack-t strong { font-size: .9rem; color: var(--text-heading); }
.wc-modal .modal-foot { align-items: center; }

.wc-view-top { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: .84rem; color: var(--text-muted); }
.wc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem 1rem; padding: .9rem 1rem; border-radius: var(--r-lg); background: var(--body-bg); }
.wc-facts span { display: block; margin-bottom: .15rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); }
.wc-facts strong { font-size: .88rem; color: var(--text-heading); }
.wc-said { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text-body); }
.wc-decided { margin: 1rem 0 0; font-size: .8rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .wc-grid.three, .wc-up { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Closed tickets ============ */
.cl-tabs > .glide-thumb { border-radius: var(--r-sm); background: var(--card-bg); box-shadow: var(--shadow-xs); }
.cl-tabs.has-glide > button.on { background: transparent; box-shadow: none; }
.cl-war { display: inline-flex; align-items: center; gap: .3rem; height: 24px; padding: 0 .6rem; border-radius: var(--r-pill); background: var(--track-bg); color: var(--text-muted); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.cl-war.on { background: var(--success-soft); color: var(--success); }
.cl-card .row-actions .btn { white-space: nowrap; }
@media (max-width: 900px) { .cl-card .dt :is(th, td):is(:nth-child(3), :nth-child(5)) { display: none; } }
@media (max-width: 640px) { .cl-card .dt :is(th, td):is(:nth-child(4), :nth-child(7)) { display: none; } }

/* ============ Right-click menus ============ */
.cm-root { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.cm {
  position: fixed; min-width: 220px; max-width: 300px; padding: .3rem; pointer-events: auto; outline: none;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 44px -12px rgba(10, 11, 22, .45), 0 2px 8px rgba(10, 11, 22, .12);
  animation: cm-in .16s cubic-bezier(.22, 1, .36, 1);
}
.cm.out { animation: cm-out .12s ease forwards; }
@keyframes cm-in { from { opacity: 0; transform: scale(.96) translateY(-3px); } }
@keyframes cm-out { to { opacity: 0; transform: scale(.98); } }
.cm-head { padding: .45rem .7rem .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-item {
  display: flex; align-items: center; gap: .65rem; width: 100%; height: 34px; padding: 0 .55rem 0 .6rem; border: 0; border-radius: 7px;
  background: transparent; text-align: left; font: inherit; font-size: .86rem; color: var(--text-heading); cursor: pointer; outline: none;
}
.cm-item:hover:not(:disabled), .cm-item:focus:not(:disabled), .cm-item[aria-expanded="true"] { background: var(--hover-bg); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.cm-item:disabled { opacity: .4; cursor: default; }
.cm-ico { width: 18px; display: grid; place-items: center; flex-shrink: 0; color: var(--text-muted); }
.cm-item:hover:not(:disabled) .cm-ico, .cm-item:focus:not(:disabled) .cm-ico { color: var(--primary); }
.cm-dot { width: 9px; height: 9px; border-radius: 50%; }
.cm-blank { width: 16px; }
.cm-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-hint { font-size: .74rem; color: var(--text-light); }
.cm-more { display: grid; place-items: center; color: var(--text-light); }
.cm-item.checked .cm-more { color: var(--primary); }
.cm-item.danger, .cm-item.danger .cm-ico { color: var(--danger); }
.cm-item.danger:hover:not(:disabled), .cm-item.danger:focus:not(:disabled) { background: var(--danger-soft); }
.cm-item.danger:hover .cm-ico { color: var(--danger); }
.cm-sep { height: 1px; margin: .3rem .45rem; background: var(--border); }
@media (prefers-reduced-motion: reduce) { .cm, .cm.out { animation: none; } }

/* ============ Price List ============ */
/* One grid: phones down the side (sticky), repairs across the top. Cells read
   as plain prices until you point at one; then a box shows you can type. */
.pl-card { overflow: hidden; }
.pl-scroll { overflow-x: auto; }
.pl-grid { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .9rem; }
.pl-c-dev { width: 230px; }
.pl-c-price { width: 116px; }
.pl-c-end { width: 52px; }
.pl-grid thead th {
  height: 48px; padding: 0 .2rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--body-bg) 55%, var(--card-bg));
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-light); text-align: center; white-space: nowrap;
}
.pl-grid thead th.pl-dev-h { text-align: left; padding-left: 1.25rem; }
.pl-rep {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; max-width: 100%; min-height: 28px; padding: .3rem .4rem;
  border: 0; border-radius: var(--r-sm); background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  transition: background .2s, color .2s;
}
.pl-rep-t { min-width: 0; white-space: normal; line-height: 1.2; text-wrap: balance; }
button.pl-rep { cursor: pointer; }
.pl-rep svg { flex-shrink: 0; width: 0; opacity: 0; transition: width .2s, opacity .2s; }
button.pl-rep:hover, button.pl-rep:focus-visible { background: var(--hover-bg); color: var(--text-heading); outline: none; }
button.pl-rep:hover svg, button.pl-rep:focus-visible svg { width: 12px; opacity: 1; }
.pl-rep-h.hc .pl-rep { color: var(--primary); }
.pl-grid .pl-dev, .pl-grid .pl-dev-h { position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--border); }
.pl-grid .pl-dev-h { z-index: 3; }
.pl-grid tbody th, .pl-grid tbody td { height: 50px; border-bottom: 1px solid var(--border); background: var(--card-bg); transition: background .2s; }
.pl-grid tbody tr:last-child > * { border-bottom: 0; }
.pl-dev { padding: 0 1rem 0 1.25rem; text-align: left; font-weight: 600; color: var(--text-heading); }
.pl-dev-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-grid tbody tr[data-dev]:hover > * { background: color-mix(in srgb, var(--primary) 3.5%, var(--card-bg)); }
.pl-group th { height: 34px; padding: 0 1.25rem; text-align: left; background: color-mix(in srgb, var(--body-bg) 55%, var(--card-bg)) !important; }
.pl-group th > span { position: sticky; left: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pl-group b { min-width: 20px; height: 18px; padding: 0 .4rem; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--track-bg); font-size: .66rem; letter-spacing: 0; color: var(--text-muted); }
.pl-cell { position: relative; padding: 0 .4rem; text-align: center; font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; outline: none; }
.pl-dash { font-weight: 400; color: var(--text-light); opacity: .6; }
.pl-grid.can-edit .pl-cell { cursor: text; }
.pl-grid.can-edit .pl-cell::after {
  content: ''; position: absolute; inset: 7px 9px; border-radius: var(--r); border: 1px solid transparent; pointer-events: none;
  transition: border-color .15s, box-shadow .15s;
}
.pl-grid.can-edit .pl-cell:hover::after { border-color: var(--input-border); }
.pl-grid.can-edit .pl-cell:focus-visible::after, .pl-grid.can-edit .pl-cell:focus::after { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pl-cell.editing::after { display: none; }
.pl-edit {
  position: absolute; inset: 7px 9px; display: flex; align-items: center; gap: .15rem; padding: 0 .6rem;
  border: 1px solid var(--primary); border-radius: var(--r); background: var(--card-bg); box-shadow: 0 0 0 3px var(--primary-soft);
}
.pl-edit > span { color: var(--text-light); font-weight: 600; }
.pl-edit input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--text-heading); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-cell.saved { animation: pl-saved 1.2s ease; }
@keyframes pl-saved { from, 25% { background-color: color-mix(in srgb, var(--success) 16%, var(--card-bg)); } }
.pl-grid tr.fresh > * { animation: pl-fresh 2.4s ease; }
@keyframes pl-fresh { from, 35% { background-color: color-mix(in srgb, var(--primary) 10%, var(--card-bg)); } }
.pl-end { text-align: center; }
.pl-more { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .2s, background .2s, color .2s; }
.pl-grid tr:hover .pl-more, .pl-more:focus-visible { opacity: 1; }
.pl-more:hover { background: var(--hover-bg); color: var(--text-heading); }
.pl-add-rep { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px dashed var(--input-border); border-radius: var(--r); background: transparent; color: var(--text-muted); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.pl-add-rep:hover, .pl-add-rep:focus-visible { border-style: solid; border-color: var(--primary); color: var(--primary); background: var(--primary-soft); outline: none; }
@media (hover: none) { .pl-more { opacity: 1; } }
@media (max-width: 760px) {
  .pl-c-dev { width: 140px; } .pl-dev { padding: .4rem .75rem .4rem 1rem; } .pl-grid thead th.pl-dev-h { padding-left: 1rem; } .pl-c-price { width: 92px; }
  .pl-dev-name { white-space: normal; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) { .pl-cell.saved, .pl-grid tr.fresh > * { animation: none; } }

/* Add Devices: the phone list as tick rows, with a search that also takes any model. */
.modal.pl-add-modal { max-width: 560px; }
.pl-add-modal .modal-foot { align-items: center; }
.pl-pick-top { display: flex; align-items: center; gap: .6rem; }
.pl-pick-q { flex: 1; min-width: 0; }
.pl-pick-q input { width: 100%; }
.pl-pick-brands { flex-shrink: 0; height: 38px; align-items: stretch; transition: opacity .2s; }
.pl-pick-brands.dim { opacity: .45; }
.pl-pick-head { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .4rem; padding: 0 .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); }
.pl-pick-all { border: 0; background: none; padding: .2rem .3rem; font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--primary); cursor: pointer; border-radius: var(--r-sm); }
.pl-pick-all:hover { background: var(--primary-soft); }
.pl-pick-list { display: flex; flex-direction: column; height: 340px; overflow-y: auto; margin: 0 -.4rem; padding: 0 .4rem; }
.pl-pick-row {
  flex-shrink: 0; display: flex; align-items: center; gap: .75rem; min-height: 42px; padding: .35rem .6rem; border: 0; border-radius: var(--r);
  background: transparent; text-align: left; font: inherit; font-size: .9rem; color: var(--text-heading); cursor: pointer; transition: background .15s;
}
.pl-pick-row:hover:not(:disabled) { background: var(--hover-bg); }
.pl-pick-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pl-pick-box { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; border: 1.5px solid var(--input-border); border-radius: 5px; color: #fff; transition: background .15s, border-color .15s; }
.pl-pick-box svg { stroke-width: 3; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .2s cubic-bezier(.22, 1, .36, 1); }
.pl-pick-row.on .pl-pick-box { background: var(--primary); border-color: var(--primary); }
.pl-pick-row.on .pl-pick-box svg, .pl-pick-row.added .pl-pick-box svg { opacity: 1; transform: none; }
.pl-pick-row.added { cursor: default; color: var(--text-light); }
.pl-pick-row.added .pl-pick-box { background: var(--track-bg); border-color: transparent; color: var(--text-light); }
.pl-pick-name { flex: 1; min-width: 0; font-weight: 500; }
.pl-pick-row.on .pl-pick-name { font-weight: 600; }
.pl-pick-name small { display: block; font-size: .74rem; font-weight: 500; color: var(--text-muted); }
.pl-pick-tag { font-size: .72rem; font-weight: 600; color: var(--text-light); }
.pl-pick-brand { font-size: .76rem; color: var(--text-muted); }
.pl-pick-none { padding: 2rem 0; text-align: center; font-size: .86rem; color: var(--text-muted); }
.pl-pick-count { margin-right: auto; font-size: .84rem; font-weight: 600; color: var(--text-muted); }
@media (max-width: 560px) { .pl-pick-top { flex-direction: column; align-items: stretch; } .pl-pick-brands button { flex: 1; } }

/* Adjust Prices */
.modal.pl-adj-modal { max-width: 520px; }
.pl-seg { display: flex; height: 38px; align-items: stretch; }
.pl-seg button { flex: 1; }
.pl-adj-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.pl-adj-amt { display: flex; align-items: center; gap: .4rem; height: 38px; padding: 0 3px 0 .75rem; border: 1px solid var(--input-border); border-radius: var(--r); transition: border-color .2s, box-shadow .2s; }
.pl-adj-amt:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pl-adj-amt input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--text-heading); font: inherit; font-weight: 600; }
.pl-adj-amt input::-webkit-inner-spin-button { display: none; }
.pl-adj-amt .pl-seg { flex: 0 0 auto; height: 30px; padding: 2px; }
.pl-adj-amt .pl-seg button { min-width: 34px; padding: 0 .5rem; }
.pl-adj-prev { margin-top: 1.1rem; padding: .85rem 1rem; border-radius: var(--r-lg); background: color-mix(in srgb, var(--body-bg) 70%, var(--card-bg)); border: 1px solid var(--border); }
.pl-adj-h { margin-bottom: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); }
.pl-adj-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .45rem; padding: .32rem 0; font-size: .86rem; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.pl-adj-line > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pl-adj-line em { font-style: normal; font-weight: 500; color: var(--text-muted); margin-left: .2rem; }
.pl-adj-line s { color: var(--text-light); }
.pl-adj-line svg { color: var(--text-light); }
.pl-adj-line b { min-width: 52px; text-align: right; color: var(--primary); }
.pl-adj-more { padding-top: .3rem; font-size: .8rem; color: var(--text-muted); }
.pl-adj-none { margin: 0; font-size: .86rem; color: var(--text-muted); }

/* Check In: the phone's prices as one-tap chips above the charges. */
.ci-pl { margin-bottom: .75rem; }
.ci-pl-h { display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-light); }
.ci-pl-h svg { color: var(--primary); }
.ci-pl-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ci-pl-chip {
  display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: transparent; font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-body); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ci-pl-chip b { font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease); }
.ci-pl-chip:hover { border-color: rgba(var(--primary-rgb), .45); color: var(--primary); }
.ci-pl-chip.on { background: var(--primary-soft); border-color: rgba(var(--primary-rgb), .4); color: var(--primary); }
.ci-pl-chip.on b { color: var(--primary); }
.ci-pl-chip .ci-pl-tick { display: grid; place-items: center; width: 0; overflow: hidden; margin-right: -.4rem; transition: width .2s, margin .2s; }
.ci-pl-chip.on .ci-pl-tick { width: 12px; margin-right: 0; }

/* ============ Switch to Fixwise (import) ============ */
.im { max-width: 900px; margin: 0 auto; }
.im-steps { display: flex; align-items: center; gap: 0; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.im-steps li { flex: 1; display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: .86rem; font-weight: 600; color: var(--text-light); }
.im-steps li:not(:last-child)::after { content: ''; flex: 1; height: 2px; margin: 0 .75rem; border-radius: 2px; background: var(--border); transition: background .4s; }
.im-steps li.done:not(:last-child)::after { background: var(--primary); }
.im-step-n { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--input-border); font-size: .78rem; font-weight: 700; background: var(--card-bg); transition: background .3s, border-color .3s, color .3s; }
.im-steps li.active { color: var(--text-heading); }
.im-steps li.active .im-step-n { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.im-steps li.done { color: var(--text-muted); }
.im-steps li.done .im-step-n { background: var(--primary); border-color: var(--primary); color: #fff; }
.im-step-l { white-space: nowrap; }
.im-card { padding: 1.6rem 1.75rem 1.4rem; }
.im-card + .im-card { margin-top: 1.25rem; }
.im-in { animation: im-in .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes im-in { from { opacity: 0; transform: translateY(8px); } }
.im-card-h { margin-bottom: 1.3rem; }
.im-card-h h2 { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.im-card-h p { margin: 0; font-size: .9rem; color: var(--text-muted); }

/* step 1 */
.im-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.im-src {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; min-height: 104px; padding: 1rem;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card-bg); text-align: left; font: inherit; cursor: pointer;
  transition: border-color .25s, box-shadow .25s, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.im-src:hover { border-color: rgba(var(--primary-rgb), .45); transform: translateY(-2px); }
.im-src.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.im-src:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); border-color: var(--primary); }
.im-src-mark {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; font-size: .86rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--tc); background: var(--ts);
}
.im-src-mark.sm { width: 32px; height: 32px; border-radius: 9px; font-size: .74rem; }
.im-src-mark.tone-primary { --tc: var(--primary); --ts: var(--primary-soft); }
.im-src-mark.tone-info { --tc: var(--info); --ts: var(--info-soft); }
.im-src-mark.tone-success { --tc: var(--success); --ts: var(--success-soft); }
.im-src-mark.tone-warning { --tc: var(--warning); --ts: var(--warning-soft); }
.im-src-mark.tone-danger { --tc: var(--danger); --ts: var(--danger-soft); }
.im-src-mark.tone-violet { --tc: #a855f7; --ts: rgba(168, 85, 247, .14); }
.im-src-mark.tone-secondary { --tc: var(--text-muted); --ts: var(--track-bg); }
.im-src-name { font-size: .9rem; font-weight: 600; color: var(--text-heading); line-height: 1.25; }
.im-src-tick { position: absolute; top: .75rem; right: .75rem; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.im-src-tick svg { stroke-width: 3; }
.im-src.on .im-src-tick { opacity: 1; transform: none; }
.im-tip { display: none; }
.im-tip.show { margin-top: 1.1rem; display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem; border-radius: var(--r-lg); background: color-mix(in srgb, var(--primary) 6%, var(--card-bg)); border: 1px solid rgba(var(--primary-rgb), .18); animation: im-in .35s cubic-bezier(.22, 1, .36, 1); }
.im-tip-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.im-tip p { margin: .25rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--text-body); }
.im-tip b { color: var(--text-heading); font-weight: 600; }
.im-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.im-foot-note { flex: 1; text-align: right; font-size: .84rem; color: var(--text-muted); }
.im-foot .btn { display: inline-flex; align-items: center; gap: .4rem; }
.im-foot .btn.loading { pointer-events: none; opacity: .75; }
.im-foot .btn.loading svg { animation: im-nudge .6s ease-in-out infinite alternate; }
@keyframes im-nudge { to { transform: translateX(4px); } }
.im-past .im-card-h { margin-bottom: .6rem; }
.im-past-list { display: flex; flex-direction: column; }
.im-past-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--border); }
.im-past-row:first-child { border-top: 0; }
.im-past-t { flex: 1; min-width: 0; }
.im-past-t strong { display: block; font-size: .9rem; color: var(--text-heading); font-weight: 600; }
.im-past-t small { display: block; font-size: .8rem; color: var(--text-muted); }
.stx-imports { display: block; padding-top: .4rem; padding-bottom: .4rem; }

/* step 2 */
.im-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 2.2rem 1rem 2rem; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--input-border); border-radius: var(--r-xl); background: color-mix(in srgb, var(--body-bg) 55%, var(--card-bg));
  transition: border-color .25s, background .25s, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.im-drop:hover, .im-drop.over { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--card-bg)); }
.im-drop.over { transform: scale(1.01); }
.im-drop.busy { pointer-events: none; opacity: .6; }
.im-drop-art { width: 52px; height: 52px; margin-bottom: .5rem; display: grid; place-items: center; border-radius: 15px; background: var(--primary-soft); color: var(--primary); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.im-drop:hover .im-drop-art, .im-drop.over .im-drop-art { transform: translateY(-3px); }
.im-drop strong { font-size: 1rem; color: var(--text-heading); }
.im-drop span { font-size: .88rem; color: var(--text-muted); }
.im-drop u { color: var(--primary); text-decoration: none; font-weight: 600; }
.im-drop small { margin-top: .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .05em; color: var(--text-light); }
.im-files { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.im-files:empty { display: none; }
.im-file { display: grid; grid-template-columns: 40px minmax(0, 1fr) 200px 32px; align-items: center; gap: .9rem; padding: .7rem .8rem .7rem .9rem; border: 1px solid var(--border); border-radius: var(--r-lg); animation: im-in .4s cubic-bezier(.22, 1, .36, 1); }
.im-file-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); }
.im-file-ico.skip { background: var(--track-bg); color: var(--text-light); }
.im-file-t { min-width: 0; }
.im-file-t strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 600; color: var(--text-heading); }
.im-file-t strong em { font-style: normal; font-weight: 500; color: var(--text-muted); }
.im-file-t small { display: block; font-size: .8rem; color: var(--text-muted); }
.im-file-t small b { color: var(--success); font-weight: 600; }
.im-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: background .2s, color .2s; }
.im-x:hover { background: var(--danger-soft); color: var(--danger); }

/* step 3 */
.im-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.im-tab { display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .85rem; border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent; font: inherit; font-size: .84rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.im-tab small { font-size: .74rem; font-weight: 500; color: var(--text-light); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-tab:hover { color: var(--text-heading); border-color: var(--input-border); }
.im-tab.on { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.im-tab.warn::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.im-map { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: visible; }
.im-map-h, .im-map-row { display: grid; grid-template-columns: 180px minmax(0, 260px) minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0 1rem; }
.im-map-h { height: 38px; border-bottom: 1px solid var(--border); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); background: color-mix(in srgb, var(--body-bg) 55%, var(--card-bg)); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.im-map-row { min-height: 52px; border-top: 1px solid var(--border); }
.im-map-h + .im-map-row { border-top: 0; }
.im-map-f { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--text-muted); }
.im-map-row.set .im-map-f { color: var(--text-heading); }
.im-map-f::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--track-bg); flex-shrink: 0; transition: background .25s; }
.im-map-row.set .im-map-f::before { background: var(--success); }
.im-map-sel .xsel { width: 100%; }
.im-map-sel select { width: 100%; }
.im-map-ex { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; color: var(--text-body); font-variant-numeric: tabular-nums; }
.im-none { color: var(--text-light); font-style: italic; }
.im-need { display: flex; align-items: center; gap: .45rem; margin: .8rem 0 0; font-size: .86rem; font-weight: 600; color: var(--warning); }
.im-stages { margin-top: 1.4rem; }
.im-stages-h { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.im-stages-h strong { font-size: .95rem; color: var(--text-heading); }
.im-stage { display: grid; grid-template-columns: minmax(0, 1fr) 16px 220px; align-items: center; gap: .8rem; padding: .45rem 0; color: var(--text-light); }
.im-stage-from { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--text-heading); }
.im-stage-from b { min-width: 24px; height: 20px; padding: 0 .45rem; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--track-bg); font-size: .7rem; color: var(--text-muted); }

/* step 4 */
.im-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.im-tile { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: color-mix(in srgb, var(--body-bg) 35%, var(--card-bg)); }
.im-tile.zero { opacity: .55; }
.im-tile-ico { width: 34px; height: 34px; margin-bottom: .7rem; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.im-tile strong { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.im-tile-l { font-size: .86rem; font-weight: 600; color: var(--text-heading); }
.im-tile small { margin-top: .15rem; font-size: .78rem; color: var(--text-muted); }
.im-opts { display: flex; flex-direction: column; margin-top: 1.2rem; border: 1px solid var(--border); border-radius: var(--r-lg); }
.im-opt { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; cursor: pointer; }
.im-opt + .im-opt { border-top: 1px solid var(--border); }
.im-opt input { position: absolute; opacity: 0; pointer-events: none; }
.im-opt strong { display: block; font-size: .9rem; color: var(--text-heading); }
.im-opt small { display: block; font-size: .8rem; color: var(--text-muted); }
.im-switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; border-radius: 99px; background: var(--track-bg); transition: background .25s; }
.im-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.im-opt input:checked + .im-switch { background: var(--primary); }
.im-opt input:checked + .im-switch::after { transform: translateX(16px); }
.im-opt input:focus-visible + .im-switch { box-shadow: 0 0 0 3px var(--primary-soft); }
.im-warn { display: flex; flex-direction: column; gap: .4rem; margin: 1rem 0 0; padding: .8rem 1rem; list-style: none; border-radius: var(--r-lg); background: var(--warning-soft); }
.im-warn li { display: flex; align-items: flex-start; gap: .55rem; font-size: .85rem; color: var(--text-heading); }
.im-warn svg { flex-shrink: 0; margin-top: .15rem; color: var(--warning); }
.im-warn.danger { background: var(--danger-soft); }
.im-warn.danger svg { color: var(--danger); }
.im-prev { margin-top: 1.2rem; border: 1px solid var(--border); border-radius: var(--r-lg); }
.im-prev-h { padding: .7rem 1rem; border-bottom: 1px solid var(--border); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); }
.im-prev-row { display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) 120px 80px; align-items: center; gap: .8rem; min-height: 52px; padding: 0 1rem; border-top: 1px solid var(--border); font-size: .88rem; }
.im-prev-h + .im-prev-row { border-top: 0; }
.im-prev-no { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.im-prev-dev { min-width: 0; }
.im-prev-dev strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-heading); font-weight: 600; }
.im-prev-dev small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: .8rem; }
.im-prev-c { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-body); }
.im-prev-p { text-align: right; font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; }

/* done */
.im-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.5rem 2.4rem; }
.im-done-art { width: 88px; height: 88px; display: grid; place-items: center; margin-bottom: 1.2rem; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.im-done-ring, .im-done-tick { stroke-dasharray: 1; stroke-dashoffset: 1; animation: im-draw .6s cubic-bezier(.65, 0, .35, 1) forwards; }
.im-done-tick { animation-delay: .35s; }
@keyframes im-draw { to { stroke-dashoffset: 0; } }
.im-done h2 { margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.im-done p { margin: 0; max-width: 46ch; font-size: .95rem; color: var(--text-muted); }
.im-done-acts { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; }
.im-undo { margin-top: 1.1rem; border: 0; background: none; font: inherit; font-size: .84rem; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.im-undo:hover { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .im-in, .im-file, .im-tip.show { animation: none; } .im-done-ring, .im-done-tick { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 860px) {
  .im-sources, .im-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-step-l { display: none; }
  .im-steps li.active .im-step-l { display: inline; }
  .im-map-h { display: none; }
  .im-map-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding: .6rem .8rem; row-gap: .25rem; }
  .im-map-ex { grid-column: 2; font-size: .78rem; color: var(--text-muted); }
  .im-file { grid-template-columns: 40px minmax(0, 1fr) 32px; }
  .im-file-kind { grid-column: 2 / 4; }
  .im-stage { grid-template-columns: minmax(0, 1fr) 160px; }
  .im-stage > svg { display: none; }
  .im-prev-row { grid-template-columns: 54px minmax(0, 1fr) 90px; }
  .im-prev-c, .im-prev-p { display: none; }
  .im-card { padding: 1.2rem 1.1rem; }
}

/* ============ Supplier order import (from the browser extension) ============ */
.modal.poi-modal { max-width: 860px; }
.poi-head { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: var(--r-lg); background: color-mix(in srgb, var(--primary) 6%, var(--card-bg)); border: 1px solid rgba(var(--primary-rgb), .16); }
.poi-head > div { flex: 1; min-width: 0; }
.poi-head strong { display: block; font-size: .95rem; color: var(--text-heading); }
.poi-head small { display: block; font-size: .8rem; color: var(--text-muted); }
.poi-mark { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); font-size: .8rem; font-weight: 800; }
.poi-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.poi-link:hover { text-decoration: underline; }
.poi-note { display: flex; align-items: center; gap: .45rem; margin: .8rem 0 0; padding: .55rem .8rem; border-radius: var(--r); background: var(--warning-soft); font-size: .84rem; color: var(--text-heading); }
.poi-note svg { color: var(--warning); flex-shrink: 0; }
.poi-lines { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); }
.poi-line { display: grid; grid-template-columns: minmax(0, 1.5fr) 48px 92px minmax(0, 1.3fr); align-items: center; gap: .9rem; min-height: 56px; padding: .45rem 1rem; border-top: 1px solid var(--border); font-size: .88rem; }
.poi-line:first-child { border-top: 0; }
.poi-line.head { min-height: 38px; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); background: color-mix(in srgb, var(--body-bg) 55%, var(--card-bg)); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.poi-line.head > span { display: flex; align-items: center; gap: .4rem; }
.poi-line.head > .r { justify-content: flex-end; }
.poi-line .r { text-align: right; }
.poi-line .num { font-variant-numeric: tabular-nums; color: var(--text-heading); font-weight: 600; }
.poi-name { min-width: 0; }
.poi-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-heading); }
.poi-name small { display: block; font-size: .74rem; color: var(--text-muted); }
.poi-pick { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.poi-pick select {
  flex: 1; min-width: 0; height: 34px; padding: 0 1.8rem 0 .65rem; cursor: pointer; appearance: none; border: 1px solid var(--input-border); border-radius: var(--r);
  background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808390' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .65rem center;
  color: var(--text-body); font: inherit; font-size: .84rem;
}
.poi-pick select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.poi-st { flex-shrink: 0; min-width: 62px; height: 22px; display: inline-grid; place-items: center; padding: 0 .5rem; border-radius: var(--r-pill); font-size: .7rem; font-weight: 700; }
.poi-st.ok { background: var(--success-soft); color: var(--success); }
.poi-st.new { background: var(--primary-soft); color: var(--primary); }
.poi-st.sug { background: var(--info-soft); color: var(--info); cursor: help; }
.poi-foot { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.5rem; align-items: start; margin-top: 1rem; }
.poi-arrived { border: 1px solid var(--border); border-radius: var(--r-lg); }
.poi-foot .po-totals { margin: 0; }
.modal.poi-help { max-width: 460px; }
.poi-help-lead { margin: 0 0 1rem; color: var(--text-muted); font-size: .92rem; }
.poi-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.poi-steps li { display: flex; gap: .8rem; }
.poi-steps b { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: .78rem; }
.poi-steps strong { display: block; font-size: .92rem; color: var(--text-heading); }
.poi-steps small { display: block; margin-top: .1rem; font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
.poi-steps em { font-style: normal; font-family: var(--font-mono); font-size: .9em; }
.poi-help .modal-foot a.btn { text-decoration: none; }
@media (max-width: 760px) {
  .poi-line { grid-template-columns: minmax(0, 1fr) 40px 76px; }
  .poi-line.head > :last-child { display: none; }
  .poi-pick { grid-column: 1 / -1; }
  .poi-foot { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Detail drawer bits ============ */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: .45rem .8rem; font-size: .9rem; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; color: var(--text-heading); font-weight: 500; }
.profit-pos { color: var(--success); font-weight: 700; }
.profit-neg { color: var(--danger); font-weight: 700; }

/* ============ Invoices page ============ */
/* Inbox layout: invoices on the left, the invoice itself on the right. */
.ivc-head { align-items: center; margin-bottom: 1.1rem; }
.ivc-head .page-actions { align-items: center; }
.ivc-head .iv-search input { width: 240px; }
.ivc-wrap { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 1.1rem; align-items: start; }

/* The list */
.ivc-list { padding: .75rem .55rem .6rem; }
.ivc-tabs { position: relative; display: flex; flex-wrap: nowrap; margin: 0 .2rem .3rem; }
.ivc-tabs button { flex: 1 0 auto; justify-content: center; position: relative; z-index: 1; transition: color .3s cubic-bezier(.22, 1, .36, 1); }
.ivc-tabs button b { transition: color .3s cubic-bezier(.22, 1, .36, 1); }
.ivc-tabs button.on { background: transparent; box-shadow: none; }
.ivc-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--r-sm);
  background: var(--card-bg); box-shadow: var(--shadow-xs);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1);
}
.ivc-month { padding: .85rem .75rem .35rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); }
.ivc-item {
  display: flex; flex-direction: column; gap: .3rem; padding: .7rem .75rem; border: 1px solid transparent; border-radius: var(--r-lg);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ivc-item + .ivc-item { margin-top: .15rem; }
.ivc-item:hover { background: var(--hover-bg); }
.ivc-item.on { background: var(--primary-soft); border-color: rgba(var(--primary-rgb), .35); }
.ivc-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ivc-item.void { opacity: .6; }
.ivc-it-top, .ivc-it-bot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.ivc-it-top strong { min-width: 0; font-size: .9rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivc-amt { font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ivc-line { min-width: 0; font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivc-none { margin: 0; padding: 1.4rem .75rem; text-align: center; font-size: .85rem; color: var(--text-muted); }
.ivc-item.ivc-in { animation: sl-row-in .42s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 22ms + 60ms); }

/* Status */
.ivc-pill { display: inline-flex; align-items: center; gap: .35rem; height: 21px; padding: 0 .55rem; border-radius: var(--r-pill); font-size: .68rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.ivc-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ivc-pill.paid    { color: var(--success); background: var(--success-soft); }
.ivc-pill.part    { color: var(--info);    background: var(--info-soft); }
.ivc-pill.unpaid  { color: var(--warning); background: var(--warning-soft); }
.ivc-pill.overdue { color: var(--danger);  background: var(--danger-soft); }
.ivc-pill.void    { color: var(--text-muted); background: var(--secondary-soft); }
.ivc-due.ok { color: var(--success); }
.ivc-due.warn { color: var(--warning); font-weight: 600; }
.ivc-due.bad { color: var(--danger); font-weight: 600; }

/* The preview stays in view while the list scrolls. */
.ivc-prev {
  position: sticky; top: calc(var(--header-h) + 1.8rem);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100vh / var(--zoom, 1) - var(--header-h) - 3.3rem);
  container-type: inline-size;
}
.ivc-bar { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); }
.ivc-bar-t { flex: 1; min-width: 0; }
.ivc-bar-t h3 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.02rem; white-space: nowrap; }
.ivc-bar-t small { display: block; margin-top: .12rem; font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivc-acts { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.ivc-acts .btn { gap: .35rem; }
.ivc-pay { background: var(--success-soft); color: var(--success); }
.ivc-pay:hover { background: var(--success); color: #fff; }
.ivc-back { display: none; width: 34px; height: 34px; flex-shrink: 0; place-items: center; border: 0; border-radius: var(--r); background: transparent; color: var(--text-heading); cursor: pointer; }
.ivc-back:hover { background: var(--hover-bg); }
.ivc-back svg { transform: rotate(90deg); }
.ivc-note {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .8rem 1.1rem 0; padding: .55rem .6rem .55rem .85rem;
  border-radius: var(--r); background: var(--warning-soft); color: var(--text-heading); font-size: .82rem;
}
.ivc-note .btn { margin-left: auto; }
.ivc-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 1.3rem; }
.ivc-fade { animation: ivc-fade .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes ivc-fade { from { opacity: 0; transform: translateY(6px); } }
@container (max-width: 720px) {
  .ivc-acts .btn .l { display: none; }
  .ivc-acts .ivc-pay .l { display: inline; }
}

/* The invoice: always light, like the printout. */
.ivp {
  --ink1: #2f2b3d; --ink2: rgba(47, 43, 61, .62); --ink3: rgba(47, 43, 61, .42); --rule: rgba(47, 43, 61, .1);
  position: relative; max-width: 760px; margin: 0 auto; padding: 2.4rem 2.5rem 2rem; overflow: hidden;
  background: #fff; color: var(--ink1); border-radius: 6px; font-size: .86rem; line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 32px rgba(15, 16, 30, .16);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ivp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--rule); }
.ivp-brand { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; }
.ivp-logo { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: #7367f0; color: #fff; font-weight: 800; font-size: .95rem; }
.ivp-brand strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink1); }
.ivp-brand small { display: block; margin-top: .12rem; font-size: .76rem; line-height: 1.5; color: var(--ink2); }
.ivp-title { text-align: right; }
.ivp-title h2 { margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; color: #7367f0; }
.ivp-title span { display: block; margin-top: .1rem; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--ink2); }
.ivp-meta { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 1rem; padding: 1.2rem 0; }
.ivp-meta span { display: block; margin-bottom: .25rem; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); }
.ivp-meta strong { display: block; font-size: .86rem; color: var(--ink1); }
.ivp-meta small { display: block; font-size: .76rem; color: var(--ink2); }
.ivp-lines { width: 100%; border-collapse: collapse; }
.ivp-lines th {
  padding: .55rem .6rem; border: 0; background: rgba(47, 43, 61, .04); text-align: left;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3);
}
.ivp-lines th:first-child { border-radius: 6px 0 0 6px; }
.ivp-lines th:last-child { border-radius: 0 6px 6px 0; }
.ivp-lines td { padding: .7rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink1); }
.ivp-lines td small { display: block; margin-top: .15rem; font-size: .74rem; color: var(--ink2); }
.ivp-lines .num { width: 96px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ivp-lines .num:nth-child(2) { width: 52px; }
.ivp-sumwrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-top: 1rem; }
.ivp-sum { width: 290px; flex-shrink: 0; }
.ivp-sum > div { display: flex; justify-content: space-between; gap: 1rem; padding: .28rem 0; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ivp-sum b { color: var(--ink1); font-weight: 600; white-space: nowrap; }
.ivp-sum .tot { font-size: .95rem; }
.ivp-sum .tot span { color: var(--ink1); }
.ivp-sum .tot b { font-weight: 800; }
.ivp-sum .bal { margin-top: .45rem; padding: .55rem .7rem; border-radius: 8px; background: rgba(115, 103, 240, .08); color: #7367f0; font-weight: 700; }
.ivp-sum .bal b { color: #7367f0; font-size: 1.05rem; font-weight: 800; }
.ivp-sum .bal.zero { background: rgba(40, 199, 111, .1); color: #1f9d57; }
.ivp-sum .bal.zero b { color: #1f9d57; }
.ivp-notes { margin: 1.2rem 0 0; padding: .7rem .85rem; border-radius: 8px; background: rgba(47, 43, 61, .04); color: var(--ink2); font-size: .8rem; white-space: pre-line; }
.ivp-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); font-size: .76rem; line-height: 1.55; color: var(--ink2); }
.ivp-foot > div:only-child { grid-column: 1 / -1; }
.ivp-foot strong { display: block; margin-bottom: .2rem; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); }
.ivp-thanks { margin: 1.4rem 0 0; text-align: center; font-size: .78rem; color: var(--ink3); }
.ivp-stamp {
  margin: 1.4rem 0 0 1.2rem; padding: .3rem .8rem; border: 3px solid rgba(40, 199, 111, .55); border-radius: 8px;
  color: rgba(31, 157, 87, .72); font-size: 1.3rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-10deg); pointer-events: none;
}
.ivp-stamp.void { border-color: rgba(47, 43, 61, .3); color: rgba(47, 43, 61, .45); }
@container (max-width: 620px) {
  .ivp { padding: 1.4rem 1.15rem 1.2rem; font-size: .82rem; }
  .ivp-top { flex-wrap: wrap; gap: .9rem; }
  .ivp-meta { grid-template-columns: 1fr 1fr; }
  .ivp-sumwrap { flex-direction: column-reverse; align-items: stretch; gap: .8rem; }
  .ivp-sum { width: 100%; }
  .ivp-foot { grid-template-columns: 1fr; gap: .9rem; }
  .ivp-stamp { align-self: flex-start; margin: 0 0 0 .4rem; font-size: 1rem; }
  .ivp-lines .num { width: auto; }
  .ivp-lines th:nth-child(3), .ivp-lines td:nth-child(3) { display: none; }
}

/* New Invoice: what is it for? */
.modal.ivn-modal { max-width: 560px; }
.ivn-opts { display: grid; gap: .6rem; }
.ivn-opt {
  display: flex; align-items: center; gap: .9rem; width: 100%; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: transparent; text-align: left; cursor: pointer; color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ivn-opt:hover, .ivn-opt:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: none; }
.ivn-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; }
.ivn-ico.rep { background: var(--warning-soft); color: var(--warning); }
.ivn-ico.sale { background: var(--info-soft); color: var(--info); }
.ivn-ico.custom { background: var(--primary-soft); color: var(--primary); }
.ivn-t { flex: 1; min-width: 0; }
.ivn-t strong { display: block; font-size: .93rem; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivn-t small { display: block; margin-top: .1rem; font-size: .79rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivn-n { font-size: .74rem; font-weight: 700; color: var(--text-light); white-space: nowrap; }
.ivn-back { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .7rem; padding: 0; border: 0; background: none; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.ivn-back:hover { color: var(--primary); }
.ivn-back svg { transform: rotate(180deg); }
.ivn-search input { width: 100%; }
.ivn-pick { display: grid; gap: .35rem; margin-top: .7rem; max-height: 340px; overflow-y: auto; }
.ivn-pick button {
  display: flex; align-items: center; gap: .8rem; width: 100%; padding: .65rem .85rem; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: transparent; text-align: left; cursor: pointer; color: var(--text-body);
}
.ivn-pick button:hover, .ivn-pick button:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: none; }
.ivn-pick b { font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.ivn-empty { margin: 0; padding: 1.2rem; text-align: center; font-size: .85rem; color: var(--text-muted); }

/* Custom invoice lines + payment method */
.ivc-ed-h, .ivc-ed-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px 34px; gap: .5rem; }
.ivc-ed-h { margin: 1.1rem 0 .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ivc-ed-row { margin-bottom: .5rem; }
.ivc-ed-row input {
  min-width: 0; height: 40px; padding: 0 .75rem; border: 1px solid var(--input-border); border-radius: var(--r);
  background: var(--card-bg); color: var(--text-heading); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ivc-ed-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ivc-ed-del { width: 34px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: transparent; color: var(--text-light); cursor: pointer; }
.ivc-ed-del:hover { background: var(--danger-soft); color: var(--danger); }
.ivc-ed-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ivc-ed-total { display: inline-flex; align-items: baseline; gap: .6rem; margin-right: 42px; font-size: .85rem; color: var(--text-muted); }
.ivc-ed-total strong { font-size: 1.05rem; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.ivc-methods { display: flex; flex-wrap: wrap; gap: .4rem; }
.ivc-methods button {
  height: 36px; padding: 0 .9rem; border: 1px solid var(--border); border-radius: var(--r); background: transparent; cursor: pointer;
  font-size: .84rem; font-weight: 600; color: var(--text-body); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ivc-methods button:hover { border-color: var(--primary); }
.ivc-methods button.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

@media (max-width: 1100px) { .ivc-wrap { grid-template-columns: 320px minmax(0, 1fr); } }
/* Phones: the list, and tapping an invoice shows it in its place. */
@media (max-width: 900px) {
  .ivc-wrap { grid-template-columns: minmax(0, 1fr); }
  .ivc-prev { display: none; }
  .ivc-wrap.sheet .ivc-list, .content:has(.ivc-wrap.sheet) .ivc-head { display: none; }
  .ivc-wrap.sheet .ivc-prev { display: flex; position: static; max-height: none; animation: ivc-fade .32s cubic-bezier(.22, 1, .36, 1); }
  .ivc-back { display: inline-grid; }
  .ivc-bar { flex-wrap: wrap; padding: .7rem .8rem .7rem .5rem; gap: .5rem; }
  .ivc-acts { flex: 1 0 100%; justify-content: flex-end; }
  .ivc-note { margin: .7rem .8rem 0; }
  .ivc-scroll { padding: .8rem; }
}
@media (max-width: 760px) {
  .ivc-head .page-actions { width: 100%; }
  .ivc-head .iv-search { flex: 1 1 100%; }
  .ivc-head .iv-search input { width: 100%; }
  .ivc-tabs button { gap: .3rem; padding: 0 .45rem; font-size: .78rem; }
  .ivc-ed-h, .ivc-ed-row { grid-template-columns: minmax(0, 1fr) 54px 84px 30px; gap: .35rem; }
  .ivc-ed-total { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .ivc-thumb, .ivc-item.ivc-in, .ivc-fade { transition: none; animation: none; } }

/* ============ Inventory board ============ */
/* The flip in four lanes: Repairing → In Stock → Listed → Sold. */
.iv-head { align-items: center; margin-bottom: 1.1rem; }
.iv-head .page-actions { align-items: center; }
.iv-head .seg button { display: inline-flex; align-items: center; gap: .35rem; }
.iv-search { position: relative; }
.iv-search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; }
.iv-search input {
  height: 36px; width: 260px; padding: 0 .8rem 0 2.25rem;
  border: 1px solid var(--input-border); border-radius: var(--r); background: var(--card-bg); color: var(--text-heading);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.iv-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.iv-icon-btn { width: 36px; height: 36px; padding: 0; }

.iv-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; min-height: 36px; }
.iv-tabs { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: 3px; border-radius: var(--r-md); background: var(--track-bg); }
.iv-tabs button {
  display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .8rem; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text-muted);
}
.iv-tabs button b { font-size: .72rem; font-weight: 700; color: var(--text-light); }
.iv-tabs button.on { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-xs); }
.iv-tabs button.on b { color: var(--primary); }
.iv-stats { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.iv-stats > div { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.iv-stats > div + div { padding-left: 1.6rem; border-left: 1px solid var(--border); }
.iv-stats span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); }
.iv-stats strong { font-size: 1.05rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.iv-stats strong.pos { color: var(--success); }

.iv-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.iv-lane { --c: var(--info); --cs: var(--info-soft); background: rgba(var(--ink), .03); border-radius: var(--r-xl); padding: .75rem; }
.iv-lane.tone-warning { --c: var(--warning); --cs: var(--warning-soft); }
.iv-lane.tone-primary { --c: var(--primary); --cs: var(--primary-soft); }
.iv-lane.tone-success { --c: var(--success); --cs: var(--success-soft); }
.iv-lane-h { display: flex; align-items: center; gap: .6rem; padding: .15rem .25rem .8rem; }
.iv-lane-h h3 { margin: 0; font-size: .95rem; font-weight: 600; }
.iv-lane-h small { font-size: .72rem; font-weight: 600; color: var(--text-light); }
.iv-lane-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--cs); color: var(--c); }
.iv-lane-n { margin-left: auto; font-size: 1.15rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.iv-lane-n.zero { color: var(--text-light); }
.iv-empty { padding: 1.3rem 0; text-align: center; font-size: .8rem; color: var(--text-light); border: 1px dashed var(--border); border-radius: var(--r-lg); }
.iv-more {
  width: 100%; height: 34px; margin-top: .2rem; border: 1px dashed var(--border); border-radius: var(--r-lg); background: transparent;
  font-size: .8rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.iv-more:hover { color: var(--primary); border-color: rgba(var(--primary-rgb), .45); }

.iv-card {
  --lift-ease: cubic-bezier(.22, 1, .36, 1);
  margin-bottom: .55rem; padding: .8rem .9rem .7rem; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  animation: tk-in .45s var(--lift-ease) backwards; animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform .35s var(--lift-ease), box-shadow .35s var(--lift-ease), border-color .25s var(--lift-ease);
}
.iv-card:last-of-type { margin-bottom: 0; }
.iv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(var(--primary-rgb), .3); }
.iv-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.iv-top { display: flex; align-items: flex-start; gap: .5rem; }
.iv-dev { flex: 1; min-width: 0; }
.iv-dev strong { display: block; font-size: .9rem; font-weight: 700; color: var(--text-heading); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-dev small, .iv-sub { display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--text-muted); margin-top: .1rem; }
.iv-sw { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); display: inline-block; }
.iv-returned { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--danger); background: var(--danger-soft); padding: .15rem .4rem; border-radius: var(--r-xs); white-space: nowrap; }
.iv-foot { display: flex; align-items: center; gap: .5rem; margin-top: .65rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .8rem; }
.iv-price { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .45rem; font-variant-numeric: tabular-nums; }
.iv-price b { color: var(--text-heading); font-size: .88rem; }
.iv-price .pos { color: var(--success); font-weight: 700; }
.iv-price .neg { color: var(--danger); font-weight: 700; }
.iv-age { font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.iv-age.old { color: var(--warning); font-weight: 700; }
/* The next step shows on hover (always on touch screens). */
.iv-next { background: var(--primary-soft); color: var(--primary); opacity: 0; transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.iv-next.sell { background: var(--success-soft); color: var(--success); }
.iv-next:hover { background: var(--primary-soft-hover); }
.iv-next.sell:hover { background: color-mix(in srgb, var(--success) 24%, transparent); }
.iv-card:hover .iv-next, .iv-card:focus-within .iv-next { opacity: 1; }
@media (hover: none) { .iv-next { opacity: 1; } }

/* Add / Edit Device: model search + one-click storage and colour. */
.iv-model-field { position: relative; }
.iv-inwrap { position: relative; }
.iv-inwrap > svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; }
.iv-inwrap > input { padding-left: 2.3rem; }
.iv-opts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.iv-opts:empty { display: none; }
.iv-opts .dp-chip { height: 28px; padding: 0 .65rem; font-size: .76rem; }
.iv-opts .dp-chip i { width: 11px; height: 11px; }
.dp-chip.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

@media (max-width: 1280px) { .iv-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .iv-board { grid-template-columns: minmax(0, 1fr); }
  .iv-head .page-actions { width: 100%; }
  .iv-search { flex: 1 1 100%; }
  .iv-search input { width: 100%; }
  .iv-stats { margin-left: 0; width: 100%; }
  .iv-stats > div { align-items: flex-start; }
}
html[data-anim="none"] .iv-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .iv-card { animation: none; } .iv-card:hover { transform: none; } }

/* ============ Phone Sales ============ */
/* Buy → sell → profit: a six-month chart, the flip maths, then every sale.
   Search, period tabs and the CSV button reuse the Inventory styles. */
.sl-head { align-items: center; margin-bottom: 1.1rem; }
.sl-head h1 { display: flex; align-items: center; gap: .45rem; }
.sl-head .page-actions { align-items: center; }
.sl-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; margin-bottom: 1rem; }
.sl-chart { padding: 1.15rem 1.3rem 1rem; }
.sl-chart-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sl-chart-h h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.sl-chart-h h3 small { margin-left: .4rem; font-size: .76rem; font-weight: 600; color: var(--text-light); }
.sl-legend { display: flex; gap: 1rem; font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.sl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.sl-legend i.rev { background: var(--primary-soft-hover); }
.sl-legend i.pro { background: var(--primary); }
.sl-bars { display: flex; align-items: stretch; gap: 1.2rem; height: 190px; margin-top: 1rem; padding: 0 .3rem; }
.sl-col {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0;
  padding: 0 .2rem .1rem; border-radius: var(--r-md); outline: none; cursor: default;
}
.sl-col::before {
  content: ""; position: absolute; inset: -.3rem -.1rem -.2rem; border-radius: var(--r-md);
  background: rgba(var(--ink), .045); opacity: 0; transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}
.sl-col > * { position: relative; }
.sl-col:hover::before, .sl-col:focus-visible::before { opacity: 1; }
.sl-col:focus-visible::before { box-shadow: 0 0 0 2px var(--primary); }
.sl-stack, .sl-col em { transition: opacity .25s cubic-bezier(.22, 1, .36, 1); }
.sl-bars:hover .sl-col:not(:hover) .sl-stack, .sl-bars:hover .sl-col:not(:hover) em { opacity: .4; }
.sl-col:hover .sl-pro, .sl-col:focus-visible .sl-pro { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 4px 14px rgba(var(--primary-rgb), .45); }
.sl-tip {
  position: absolute !important; left: calc(100% - .2rem); top: 38%; z-index: 5; min-width: 176px; padding: .6rem .75rem .55rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  text-align: left; pointer-events: none; opacity: 0; transform: translate(-6px, -50%);
  transition: opacity .22s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1);
}
/* Beside the month (left of the last one), so it stays inside the chart. */
.sl-col:last-child .sl-tip { left: auto; right: calc(100% - .2rem); transform: translate(6px, -50%); }
.sl-col:hover .sl-tip, .sl-col:focus-visible .sl-tip { opacity: 1; transform: translate(0, -50%); }
.sl-tip strong { display: block; margin-bottom: .35rem; font-size: .82rem; color: var(--text-heading); white-space: nowrap; }
.sl-tip div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .8rem; line-height: 1.7; }
.sl-tip div span { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); font-weight: 600; }
.sl-tip div b { color: var(--text-heading); font-variant-numeric: tabular-nums; }
.sl-tip div b.pos { color: var(--success); } .sl-tip div b.neg { color: var(--danger); }
.sl-tip i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.sl-tip i.rev { background: var(--primary-soft-hover); } .sl-tip i.pro { background: var(--primary); }
.sl-tip small { display: block; margin-top: .3rem; padding-top: .35rem; border-top: 1px solid var(--border); font-size: .72rem !important; color: var(--text-light) !important; }
.sl-col em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--success); min-height: 1.1em; font-variant-numeric: tabular-nums; }
.sl-col em.neg { color: var(--danger); }
.sl-col small { font-size: .74rem; font-weight: 600; color: var(--text-muted); }
.sl-stack { flex: 1; width: 100%; max-width: 56px; display: flex; flex-direction: column; justify-content: flex-end; }
.sl-rev { position: relative; width: 100%; min-height: 3px; border-radius: 8px 8px 3px 3px; background: var(--primary-soft-hover); transition: height .6s cubic-bezier(.22, 1, .36, 1); }
.sl-pro { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px 8px 3px 3px; background: var(--primary); }

.sl-figs { display: flex; flex-direction: column; padding: .35rem 1.2rem; }
.sl-fig { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--border); }
.sl-fig:first-child { border-top: 0; }
.sl-fig span { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.sl-fig strong { font-size: 1.08rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.sl-fig strong.muted { color: var(--text-muted); font-weight: 600; }
.sl-fig.total { border-top: 1px solid var(--border-strong); }
.sl-fig.total span { color: var(--text-heading); }
.sl-fig.total strong { font-size: 1.3rem; }
.sl-fig .pos { color: var(--success); } .sl-fig .neg { color: var(--danger); }

.sl-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sl-seg { position: relative; display: inline-flex; gap: .2rem; padding: 3px; border-radius: var(--r-md); background: var(--track-bg); }
.sl-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--r-sm);
  background: var(--card-bg); box-shadow: var(--shadow-xs);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1);
}
.sl-seg button {
  position: relative; z-index: 1; height: 30px; padding: 0 .85rem; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text-muted);
  transition: color .3s cubic-bezier(.22, 1, .36, 1);
}
.sl-seg button:hover { color: var(--text-heading); }
.sl-seg button.on { color: var(--primary); }
.sl-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.sl-figs strong { transition: color .3s cubic-bezier(.22, 1, .36, 1); }
.sl-fig.total span em { font-style: normal; }
.sl-row.sl-in { animation: sl-row-in .42s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 22ms + 60ms); }
@keyframes sl-row-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .sl-thumb, .sl-row.sl-in { transition: none; animation: none; } }
.sl-row {
  display: grid; grid-template-columns: 96px minmax(0, 2fr) 128px minmax(0, 1.1fr) 84px 84px 70px 100px 40px; gap: .9rem; align-items: center;
  padding: .65rem 1.2rem; border-top: 1px solid var(--border); font-size: .88rem; cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.sl-row:first-child { border-top: 0; }
.sl-row:hover { background: var(--hover-bg); }
.sl-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sl-row-h { cursor: default; background: rgba(var(--ink), .03); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding-top: .6rem; padding-bottom: .6rem; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sl-row-h:hover { background: rgba(var(--ink), .03); }
.sl-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.sl-phone { min-width: 0; }
.sl-phone strong { display: block; font-size: .9rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-phone small { display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--text-muted); }
.sl-ch { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.sl-ch i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sl-profit { font-weight: 700; color: var(--success); }
.sl-profit.neg { color: var(--danger); }
.sl-profit small { display: block; font-size: .7rem; font-weight: 600; color: var(--text-light); }
.sl-more { position: relative; display: flex; justify-content: flex-end; }
.sl-dots { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: transparent; color: var(--text-muted); cursor: pointer; }
.sl-dots:hover { background: var(--hover-bg); color: var(--text-heading); }
.sl-more .tk-menu button svg { margin-left: 0; color: inherit; }
.sl-more .tk-menu button.danger { color: var(--danger); }

@media (max-width: 1100px) {
  .sl-top { grid-template-columns: 1fr; }
  .sl-row { grid-template-columns: 84px minmax(0, 2fr) 110px 84px 90px 40px; }
  .sl-row > :nth-child(4), .sl-row > :nth-child(7) { display: none; }
}
@media (max-width: 640px) {
  .sl-head .page-actions { width: 100%; }
  .sl-head .iv-search { flex: 1 1 100%; }
  .sl-head .iv-search input { width: 100%; }
  .sl-bars { gap: .6rem; }
  .sl-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: .3rem .6rem; }
  .sl-row-h { display: none; }
  .sl-row > :nth-child(1) { grid-column: 1; grid-row: 2; font-size: .76rem; }
  .sl-row > .sl-phone { grid-column: 1; grid-row: 1; }
  .sl-row > .sl-profit { grid-column: 2; grid-row: 1 / span 2; }
  .sl-row > .sl-more { grid-column: 3; grid-row: 1 / span 2; }
  .sl-row > :nth-child(3), .sl-row > :nth-child(4), .sl-row > :nth-child(5), .sl-row > :nth-child(6), .sl-row > :nth-child(7) { display: none; }
}

/* ============ Parts page ============ */
/* Device first: brand chips, then rows of device · part tag · bin · cost · stock. */
.pc-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pc-chip {
  display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .95rem; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: transparent; font-size: .82rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.pc-chip:hover { color: var(--text-heading); border-color: var(--input-border); }
.pc-chip.active { color: var(--card-bg); border-color: transparent; }
.pc-chips > .glide-thumb { border-radius: var(--r-pill); background: var(--text-heading); transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1), height .4s cubic-bezier(.22, 1, .36, 1), background-color .3s; }
.pc-chips:has(> .pc-chip.warn.active) > .glide-thumb { background: var(--warning); }
.pc-chip.warn i { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); transition: background .3s; }
.pc-chip.warn b { font-size: .74rem; }
.pc-chip.warn.active i { background: var(--card-bg); }
.pc-sum { font-size: .8rem; font-weight: 600; color: var(--text-light); font-variant-numeric: tabular-nums; }
.pc-card .dt td { padding-top: .75rem; padding-bottom: .75rem; }
.pc-card .cell-main { font-weight: 700; color: var(--text-heading); }
.pc-sku { font-size: .82rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pc-card .dt tbody tr:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pc-part { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.pc-type { display: inline-flex; align-items: center; height: 26px; padding: 0 .65rem; border-radius: 7px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: var(--ts); color: var(--tc); }
.pc-type.t-primary { --tc: var(--primary); --ts: var(--primary-soft); }
.pc-type.t-success { --tc: var(--success); --ts: var(--success-soft); }
.pc-type.t-info { --tc: var(--info); --ts: var(--info-soft); }
.pc-type.t-warning { --tc: var(--warning); --ts: var(--warning-soft); }
.pc-type.t-danger { --tc: var(--danger); --ts: var(--danger-soft); }
.pc-type.t-violet { --tc: #b04fe0; --ts: rgba(176, 79, 224, .14); }
.pc-type.t-secondary { --tc: var(--text-muted); --ts: var(--track-bg); }
.pc-var { font-size: .78rem; color: var(--text-light); }
.pt-bin { font-weight: 600; color: var(--text-muted); white-space: nowrap; }
/* Stock: a dot and the number; pointing at the row fades in the − / + stepper
   over the same fixed-width spot, so nothing in the row moves. */
.pc-stock { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; width: 96px; height: 32px; vertical-align: middle; }
.pc-qty { display: inline-flex; align-items: center; gap: .5rem; transition: opacity .18s var(--ease), transform .25s var(--ease); }
.pc-qty i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.pc-qty b { min-width: 1.4em; font-size: 1.02rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; text-align: right; }
.pc-stock.lv-low .pc-qty i { background: var(--warning); } .pc-stock.lv-low .pc-qty b { color: var(--warning); }
.pc-stock.lv-out .pc-qty i { background: var(--danger); } .pc-stock.lv-out .pc-qty b { color: var(--danger); }
.pc-stock .pt-step {
  position: absolute; right: 0; top: 50%; opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.94);
  transition: opacity .18s var(--ease), transform .25s var(--ease);
}
@media (hover: hover) {
  .pc-card tbody tr:is(:hover, :focus-within) .pc-stock .pt-step { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
  .pc-card tbody tr:is(:hover, :focus-within) .pc-stock .pc-qty:has(+ .pt-step) { opacity: 0; transform: scale(.94); }
}
@media (hover: none) { .pc-stock .pt-step { opacity: 1; pointer-events: auto; transform: translateY(-50%); } .pc-stock .pc-qty:has(+ .pt-step) { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pc-qty, .pc-stock .pt-step { transition: none; } }
@media (max-width: 760px) {
  .pc-card .dt :is(th, td):is(:nth-child(3), :nth-child(4)) { display: none; }
  .pc-card .dt td { padding-left: .8rem; padding-right: .8rem; }
  .pc-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; padding-bottom: .1rem; }
  .pc-chip { flex-shrink: 0; }
}

/* Shared by Trade-Ins and Purchase Orders: counts strip, tools row, list table. */
.ptx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.1rem; overflow: hidden; }
.ptx-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ptx-kpi {
  position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem; min-width: 0;
  border: 0; border-left: 1px solid var(--border); background: transparent; text-align: left; color: inherit; cursor: default;
  transition: background var(--dur-fast) var(--ease);
}
.ptx-kpi:first-child { border-left: 0; }
.ptx-kpi-ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-md); background: var(--k-soft); color: var(--k); }
.ptx-kpi small { display: block; margin-bottom: .1rem; font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.ptx-kpi strong { font-size: 1.35rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.ptx-tools { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ptx-seg { height: 36px; align-items: stretch; }
.ptx-seg button { display: inline-flex; align-items: center; gap: .45rem; height: 30px; padding: 0 .85rem; }
.ptx-seg b {
  min-width: 20px; height: 18px; padding: 0 .4rem; display: inline-grid; place-items: center; border-radius: var(--r-pill);
  font-size: .7rem; background: var(--hover-bg); color: var(--text-muted); transition: background .25s, color .25s;
}
.ptx-ico.t-primary   { --c: var(--primary); --cs: var(--primary-soft); }
.ptx-ico.t-success   { --c: var(--success); --cs: var(--success-soft); }
.ptx-ico.t-info      { --c: var(--info);    --cs: var(--info-soft); }
.ptx-ico.t-warning   { --c: var(--warning); --cs: var(--warning-soft); }
.ptx-ico.t-danger    { --c: var(--danger);  --cs: var(--danger-soft); }
.ptx-ico.t-violet    { --c: #b04fe0;        --cs: rgba(176, 79, 224, .14); }
.ptx-ico.t-secondary { --c: var(--text-muted); --cs: var(--track-bg); }
.ptx-ico { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--cs, var(--primary-soft)); color: var(--c, var(--primary)); }
.ptx-table-card { overflow: hidden; }
.ptx-table { width: 100%; border-collapse: collapse; }
.ptx-table th {
  padding: .75rem 1rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light);
}
.ptx-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: .88rem; }
.ptx-table :is(th, td).r { text-align: right; }
.ptx-table .num { font-variant-numeric: tabular-nums; }
.ptx-table tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.ptx-table tbody tr:hover { background: var(--hover-bg); }
.ptx-table tbody tr:last-child td { border-bottom: 0; }
.ptx-table tbody tr:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ptx-part { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.ptx-part strong { display: block; font-weight: 600; color: var(--text-heading); }
.ptx-part small { display: block; font-size: .74rem; color: var(--text-muted); }
.ptx-part .mono { font-size: .72rem; color: var(--text-light); }
.ptx-rise { animation: ptx-rise .45s var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 16) * 25ms); }
@keyframes ptx-rise { from { opacity: 0; transform: translateY(8px); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* − n + stepper (also used on Labels) */
.pt-step { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--card-bg); cursor: default; }
.pt-step button {
  width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; font-weight: 700;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.pt-step button:hover { background: var(--primary-soft); color: var(--primary); }
.pt-step button:active:not(:disabled) { transform: scale(.85); }
.pt-step button:disabled { opacity: .35; cursor: not-allowed; background: transparent; color: var(--text-muted); }
.pt-step > span { min-width: 34px; text-align: center; font-size: .9rem; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.pt-step.low > span { color: var(--warning); } .pt-step.out > span { color: var(--danger); }
.pt-step.ro { border: 0; background: transparent; }
.pt-step.ro > span { padding: 0 .4rem; }
.pt-step .bump { display: inline-block; animation: ptx-bump .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ptx-bump { 40% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .pt-step button { transition: none; } .pt-step button:active:not(:disabled) { transform: none; } .pt-step .bump { animation: none; } }

/* The part form is short: let the suggestion list spill past the modal body. */
.modal.pt-modal .modal-body { overflow: visible; }
.pt-name-field { position: relative; }
.pt-inwrap { position: relative; }
.pt-inwrap > svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; }
.pt-inwrap > input { padding-left: 2.3rem; }
.pt-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 260px; overflow-y: auto; padding: .3rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.pt-suggest[hidden] { display: none; }
.pt-suggest button {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: var(--r-sm);
  background: transparent; text-align: left; cursor: pointer; color: var(--text-body);
}
.pt-suggest button > span { flex: 1; min-width: 0; }
.pt-suggest strong { display: block; font-size: .88rem; font-weight: 600; color: var(--text-heading); }
.pt-suggest small { display: block; font-size: .74rem; color: var(--text-muted); }
.pt-suggest small .mono { color: var(--text-light); }
.pt-suggest button:hover, .pt-suggest button.active { background: var(--primary-soft); }
.pt-suggest button.have { background: var(--warning-soft); margin-bottom: .2rem; }
.pt-suggest button.have:hover, .pt-suggest button.have.active { background: color-mix(in srgb, var(--warning) 22%, transparent); }
.pt-suggest em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--warning); }

@media (max-width: 900px) {
  .ptx-kpis, .ptx-kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptx-kpi:nth-child(odd) { border-left: 0; }
  .ptx-kpi:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .ptx-table-card { overflow-x: auto; }
  .ptx-table { min-width: 600px; }
}

/* ============ Customers page ============ */
/* Who to ring today on top (ready to collect, money owed), then one calm list. */
.cu-head { align-items: center; margin-bottom: 1.1rem; }
.cu-head .page-actions { align-items: center; }
.cu-head .iv-search input { width: 280px; }
.staff-ava.cu-ava { width: 36px; height: 36px; font-size: .74rem; box-shadow: 0 3px 10px rgba(var(--glow), .28), inset 0 0 0 2px rgba(255, 255, 255, .14); transition: none; }
.cu-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cu-who strong { font-size: .9rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-who small { font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-tag {
  display: inline-flex; align-items: center; height: 21px; padding: 0 .55rem; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.cu-tag.rep   { color: var(--warning); background: var(--warning-soft); }
.cu-tag.buy   { color: var(--info);    background: var(--info-soft); }
.cu-tag.reg   { color: var(--primary); background: var(--primary-soft); }
.cu-tag.due   { color: var(--danger);  background: var(--danger-soft); }
.cu-tag.ready { color: var(--success); background: var(--success-soft); }

/* To contact */
.cu-need {
  padding: 1.05rem 1.15rem 1.15rem; margin-bottom: 1.1rem; border-color: rgba(var(--warning-rgb), .35);
  background: linear-gradient(180deg, var(--warning-soft), transparent 75%), var(--card-bg);
}
.cu-need-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.cu-need-h h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.cu-need-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--warning-soft); color: var(--warning); }
.cu-need-n { font-weight: 800; color: var(--warning); font-variant-numeric: tabular-nums; }
.cu-need-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .7rem; }
.cu-need-item {
  display: flex; flex-direction: column; gap: .6rem; padding: .85rem .9rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.cu-need-top { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cu-why {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left; font-size: .8rem; font-weight: 600; color: var(--text-body);
  transition: color var(--dur-fast) var(--ease);
}
.cu-why svg { flex-shrink: 0; color: var(--primary); opacity: 0; transform: translateX(-3px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.cu-why .k { margin-right: .1rem; color: var(--text-muted); font-weight: 600; }
.cu-why strong { min-width: 0; color: var(--text-heading); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-why:hover, .cu-why:focus-visible { color: var(--primary); }
.cu-why:hover strong, .cu-why:focus-visible strong { color: var(--primary); }
.cu-why:hover svg, .cu-why:focus-visible svg { opacity: 1; transform: none; }
.cu-need-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.cu-acts { display: flex; gap: .4rem; }
.cu-acts .btn { gap: .3rem; height: 28px; }

/* Type tabs + totals */
.cu-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cu-tabs { position: relative; }
.cu-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--r-sm);
  background: var(--card-bg); box-shadow: var(--shadow-xs);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1);
}
.cu-tabs button { position: relative; z-index: 1; transition: color .3s cubic-bezier(.22, 1, .36, 1); }
.cu-tabs button b { transition: color .3s cubic-bezier(.22, 1, .36, 1); }
.cu-tabs button.on { background: transparent; box-shadow: none; }
.cu-row.cu-in { animation: sl-row-in .42s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 22ms + 60ms); }
@media (prefers-reduced-motion: reduce) { .cu-thumb, .cu-row.cu-in { transition: none; animation: none; } }

/* The list */
.cu-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1fr) 110px 110px 40px; gap: .9rem; align-items: center;
  padding: .65rem 1.2rem; border-top: 1px solid var(--border); font-size: .88rem; cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.cu-row:first-child { border-top: 0; }
.cu-row:hover { background: var(--hover-bg); }
.cu-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cu-row-h { cursor: default; background: rgba(var(--ink), .03); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding-top: .6rem; padding-bottom: .6rem; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.cu-row-h:hover { background: rgba(var(--ink), .03); }
.cu-row:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.cu-name { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cu-contact { display: flex; flex-direction: column; gap: .1rem; min-width: 0; font-size: .84rem; }
.cu-contact span { display: flex; align-items: center; gap: .4rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-contact svg { flex-shrink: 0; color: var(--text-light); }
.cu-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.cu-last { font-size: .84rem; }
.cu-value, .cu-row-h .num { text-align: right; font-variant-numeric: tabular-nums; }
.cu-value { font-weight: 700; color: var(--text-heading); }
.cu-sec { margin: 1rem 0 .5rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.kv + .cu-sec { margin-top: 0; }

@media (max-width: 1100px) {
  .cu-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) 100px 100px 40px; }
  .cu-row > .cu-tags, .cu-row-h > :nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .cu-head .page-actions { width: 100%; }
  .cu-head .iv-search { flex: 1 1 100%; }
  .cu-head .iv-search input { width: 100%; }
  .cu-need { padding: .9rem; }
  .cu-need-grid { grid-template-columns: minmax(0, 1fr); }
  .cu-bar .iv-tabs { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cu-bar .iv-tabs button { flex: 1 0 auto; justify-content: center; gap: .3rem; padding: 0 .45rem; font-size: .78rem; }
  .cu-bar .iv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
  .cu-bar .iv-stats > div + div { padding-left: 0; border-left: 0; }
  .cu-bar .iv-stats > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--border); }
  .cu-row { grid-template-columns: minmax(0, 1fr) auto 32px; grid-template-areas: "name value more" "contact last more"; gap: .35rem .6rem; padding: .75rem 1rem; }
  .cu-row-h { display: none; }
  .cu-row > .cu-name { grid-area: name; }
  .cu-row > .cu-contact { grid-area: contact; padding-left: calc(36px + .75rem); font-size: .78rem; }
  .cu-row > .cu-contact span + span { display: none; }
  .cu-row > .cu-last { grid-area: last; text-align: right; font-size: .76rem; }
  .cu-row > .cu-value { grid-area: value; }
  .cu-row > .sl-more { grid-area: more; }
  .cu-row:nth-child(2) { border-top: 0; }
}

/* ============ Labels ============ */
/* Settings on the left, the real label on the right. */
.lbd-wrap { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.lbd-set { padding: 1.2rem 1.25rem 1.3rem; display: grid; gap: 1.05rem; }
.lbd-set .field { margin: 0; }
.lbd-types { position: relative; display: flex; width: 100%; flex-wrap: nowrap; }
.lbd-types button { flex: 1 1 0; justify-content: center; position: relative; z-index: 1; padding: 0 .35rem; white-space: nowrap; transition: color .3s cubic-bezier(.22, 1, .36, 1); }
.lbd-types button.on { background: transparent; box-shadow: none; }
.lbd-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--r-sm);
  background: var(--card-bg); box-shadow: var(--shadow-xs);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1);
}
.lbd-size { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lbd-mm { width: 80px; }
.lbd-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.lbd-chip {
  display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: transparent; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lbd-chip:hover { border-color: rgba(var(--primary-rgb), .45); color: var(--text-heading); }
.lbd-chip.on { border-color: rgba(var(--primary-rgb), .5); background: var(--primary-soft); color: var(--primary); }
.lbd-go { display: flex; align-items: flex-end; gap: .8rem; padding-top: .2rem; }
.lbd-step button { width: 36px; height: 40px; }
.lbd-print { flex: 1; height: 42px; font-size: .92rem; }
.lbd-prev { padding: 1rem; }
.lbd-stage {
  display: grid; place-items: center; min-height: 320px; padding: 2rem 1rem; overflow: hidden; border-radius: var(--r-lg);
  background: radial-gradient(circle at 1px 1px, rgba(var(--primary-rgb), .14) 1px, transparent 0) 0 0 / 16px 16px, rgba(var(--ink), .03);
}
.lbd-fit { display: grid; place-items: center; }
.lbd-fit > .plb { transform-origin: center; }
.lbd-cap { margin-top: .8rem; text-align: center; font-size: .78rem; color: var(--text-muted); }
.lbd-prev.lbd-in .lbd-fit { animation: lbd-in .4s cubic-bezier(.22, 1, .36, 1); }
@keyframes lbd-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 1000px) { .lbd-wrap { grid-template-columns: minmax(0, 1fr); } .lbd-prev { order: -1; } .lbd-stage { min-height: 0; padding: 1.4rem .6rem; } }
@media (max-width: 520px) { .lbd-types button { font-size: .74rem; padding: 0 .2rem; } }
@media (prefers-reduced-motion: reduce) { .lbd-thumb, .lbd-prev.lbd-in .lbd-fit { transition: none; animation: none; } }

/* The labels: black on white, drawn in mm (× --k for other roll sizes). */
.plb {
  --u: calc(1mm * var(--k, 1));
  position: relative; display: flex; box-sizing: border-box; overflow: hidden; flex-shrink: 0;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2.4);
  background: #fff; color: #111; border-radius: 1.2mm; line-height: 1.15; font-family: var(--font-sans); text-align: left;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 10px 26px rgba(8, 9, 20, .28);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.plb svg { display: block; }
.plb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plb-mono { font-family: var(--font-mono); }
.plb-shop { font-size: calc(var(--u) * 1.8); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plb-qr { width: calc(var(--u) * 15); flex-shrink: 0; margin-left: calc(var(--u) * 1.8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .6); }
.plb-qr svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.plb-qr span { font-size: calc(var(--u) * 1.6); font-weight: 800; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; text-align: center; color: #333; }
.plb-bar { margin-top: auto; height: calc(var(--u) * 7.5); }
.plb-bar svg { width: 100%; height: 100%; }
/* Repair tag */
.plr-top { display: flex; align-items: baseline; gap: calc(var(--u) * 1.6); min-width: 0; }
.plr-no { font-size: calc(var(--u) * 6.2); font-weight: 900; letter-spacing: -.02em; line-height: .95; white-space: nowrap; }
.plr-top .plb-shop { margin-left: auto; }
.plr-cust { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.9); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plr-cust span { font-size: .8em; font-weight: 600; color: #444; }
.plr-dev { margin-top: calc(var(--u) * .7); font-size: calc(var(--u) * 2.5); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plr-issue { font-size: calc(var(--u) * 2.3); color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plr-foot {
  margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding-top: calc(var(--u) * .9);
  border-top: calc(var(--u) * .25) solid #111; font-size: calc(var(--u) * 2); font-weight: 700; text-transform: uppercase; white-space: nowrap;
}
.plb-due { margin-left: auto; padding: calc(var(--u) * .35) calc(var(--u) * 1.1); border-radius: calc(var(--u) * .7); background: #111; color: #fff; font-weight: 800; }
/* Price tag */
.plp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--u) * 2); min-width: 0; }
.plp-name { min-width: 0; }
.plp-name strong { font-size: calc(var(--u) * 3.7); font-weight: 800; line-height: 1.05; }
.plp-name small { display: block; margin-top: calc(var(--u) * .5); font-size: calc(var(--u) * 2.3); color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plp-name small.plb-shop { font-size: calc(var(--u) * 1.8); color: #555; }
.plp-grade {
  display: inline-grid; place-items: center; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); margin-left: calc(var(--u) * .9);
  border: calc(var(--u) * .3) solid #111; border-radius: calc(var(--u) * .7); font-size: calc(var(--u) * 2.2); font-weight: 900; vertical-align: calc(var(--u) * .3);
}
.plp-price { font-size: calc(var(--u) * 4.6); font-weight: 900; white-space: nowrap; letter-spacing: -.01em; }
.plp-imei { margin-top: calc(var(--u) * .4); text-align: center; font-family: var(--font-mono); font-size: calc(var(--u) * 2); letter-spacing: .12em; }
/* Device report */
.plb-report { flex-direction: column; }
.plx-head { display: flex; align-items: center; gap: calc(var(--u) * 1.5); min-width: 0; flex-shrink: 0; padding-bottom: calc(var(--u) * 1); border-bottom: calc(var(--u) * .3) solid #111; }
.plx-body { flex: 1; min-height: 0; display: flex; padding-top: calc(var(--u) * .4); }
.plx-body .plb-qr { width: calc(var(--u) * 14); }
.plx-body .plb-qr svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.plx-head strong { min-width: 0; font-size: calc(var(--u) * 3.4); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plx-grade { margin-left: auto; flex-shrink: 0; padding: calc(var(--u) * .35) calc(var(--u) * 1.2); border-radius: calc(var(--u) * .8); background: #111; color: #fff; font-size: calc(var(--u) * 2.1); font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.plx-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * .45) calc(var(--u) * 2); margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.2); }
.plx-grid span { color: #555; font-weight: 600; }
.plx-grid b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plx-foot { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 2.1); font-weight: 800; text-transform: uppercase; }
.plx-ok { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); white-space: nowrap; }
.plx-ok i { display: inline-grid; place-items: center; width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; background: #111; color: #fff; font-style: normal; font-size: calc(var(--u) * 1.9); }
.plx-price { margin-left: auto; font-size: calc(var(--u) * 3.6); font-weight: 900; text-transform: none; white-space: nowrap; }
/* Parts bin */
.plbn-top { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.5); min-width: 0; }
.plbn-top strong { flex: 1; min-width: 0; font-size: calc(var(--u) * 2.9); font-weight: 800; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plbn-bin { flex-shrink: 0; padding: calc(var(--u) * .6) calc(var(--u) * 1.4); border-radius: calc(var(--u) * .9); background: #111; color: #fff; font-size: calc(var(--u) * 3.2); font-weight: 900; white-space: nowrap; }
.plbn-sku { margin-top: calc(var(--u) * .6); font-family: var(--font-mono); font-size: calc(var(--u) * 2.1); color: #333; }
.plb-bin .plb-bar { height: calc(var(--u) * 7); }

/* Print buttons elsewhere */
.ck-print { display: inline-flex; align-items: center; gap: .55rem; margin-right: .35rem; font-size: .85rem; font-weight: 600; color: var(--text-heading); cursor: pointer; user-select: none; white-space: nowrap; }
.ck-print .tswitch { margin-left: 0; }
.tk-menu-sep { height: 1px; margin: .3rem .2rem; background: var(--border); }
.tk-menu .tk-menu-act svg { margin-left: 0; color: inherit; }
.iv-print { position: relative; }
.iv-print .tk-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 200px; }
.iv-print .tk-menu a { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: var(--r-sm); font-size: .84rem; color: var(--text-muted); text-decoration: none; }
.iv-print .tk-menu a:hover { background: var(--hover-bg); color: var(--text-heading); }

.print-root { display: none; }
@media print {
  body > .app, .toast-root, #modal-root { display: none !important; }
  .print-root { display: block; }
  body { background: #fff; }
  .print-root .ivp { box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
  .print-root .plb { box-shadow: none; border-radius: 0; transform: none !important; page-break-after: always; break-after: page; }
  /* Price list for the counter or window. */
  .plp { color: #1d1d23; font: 10.5pt/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; }
  .plp-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-bottom: 12pt; margin-bottom: 14pt; border-bottom: 2pt solid #1d1d23; }
  .plp-h h1 { margin: 0; font-size: 22pt; letter-spacing: -.01em; }
  .plp-h p { margin: 2pt 0 0; font-size: 11pt; color: #555; }
  .plp-meta { text-align: right; font-size: 9pt; color: #555; }
  .plp-sec { margin-bottom: 16pt; break-inside: avoid; }
  .plp-sec h2 { margin: 0 0 6pt; font-size: 12pt; text-transform: uppercase; letter-spacing: .08em; color: #555; }
  .plp table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .plp th:first-child { width: 26%; }
  .plp th { padding: 5pt 6pt; border-bottom: 1pt solid #1d1d23; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em; text-align: center; }
  .plp th:first-child, .plp td:first-child { text-align: left; }
  .plp td { padding: 5pt 6pt; border-bottom: .5pt solid #ddd; text-align: center; font-variant-numeric: tabular-nums; }
  .plp td:first-child { font-weight: 600; }
  .plp tbody tr:nth-child(even) td { background: #f6f6f8; }
  .plp-f { margin-top: 10pt; padding-top: 8pt; border-top: .5pt solid #ccc; font-size: 9pt; color: #555; }
}

/* ============ Misc widgets ============ */
.progress-ring { transform: rotate(-90deg); }
.chip-row { display: flex; gap: .45rem; flex-wrap: wrap; }
.low-stock-flag { color: var(--danger); font-weight: 700; font-size: .76rem; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.mt { margin-top: 1.1rem; }
.mb0 { margin-bottom: 0; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open ~ .sidebar-backdrop { display: block; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  #hd-lang, #hd-cur { display: none; }
}
/* Phones: the clock keeps its colour but drops the running time to save room. */
@media (max-width: 640px) {
  .header-actions { gap: .2rem; }
  #hd-clock.on .hdr-label { max-width: 0; opacity: 0; margin-left: 0; }
  .header-actions #hd-clock.on .icon-btn { padding: 0 .5rem; }
  #hd-clock.on .sc-dot { display: block; }
}
@media (max-width: 420px) { #hd-theme { display: none; } }
@media (max-width: 640px) {
  .content { padding: 1rem; }
  .header { padding: 0 .6rem; width: calc(100% - 2rem); margin: .75rem auto 0; gap: .5rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  .header-search kbd { display: none; }
  .kv { grid-template-columns: 110px 1fr; }
}

/* Boot: couldn't reach the server (online accounts) */
.boot-problem { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem; text-align: center; background: var(--body-bg); }
.boot-problem p { max-width: 26rem; margin: 0; font-size: 1rem; color: var(--text-heading); }
.boot-problem div { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.auth-cta.is-busy { opacity: .7; pointer-events: none; }