/* ============================================================================
   slate.css — BizHub V2 "Slate & Signal" design system (Wave 3 Phase B).

   The single styling source for the src/components/slate/* primitive library.
   Faithful port of the FROZEN reference (docs/design/v2-design-language-FROZEN.html,
   tag v2-design-frozen) — every color, spacing, radius, shadow, and motion value
   comes from the token layer below (Rule 2: no duplicated / ad-hoc styling).

   ISOLATION: every rule is scoped under `.slate-root`. These styles only apply to
   elements inside a <SlateRoot> subtree, which the cloned V1 pages never enter —
   so the library is DORMANT and cannot affect certified-V1 presentation until a
   Wave-4 page is migrated. Class names mirror the frozen reference; the scope makes
   collisions with the V1-cloned pages impossible.

   DARK MODE (Rule 7): all theme-variable colors live in the token layer; the
   `.slate-root[data-theme="dark"]` block at the bottom re-declares them, so a dark
   theme is a token swap, not a rewrite. Default is light.
   ============================================================================ */

/* ===== Token layer ======================================================== */
.slate-root{
  /* the app has no mockup switcher chrome; keep the frozen shell math by zeroing it */
  --switcher-h:0px;
  --sidebar-w:198px; --inspector-w:372px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:36px;
  --gap-section:24px;

  /* production UI face = self-hosted Inter (Phase A) → same scale as the frozen system stack */
  --font-ui:"Inter Variable",Inter,ui-sans-serif,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;

  /* neutrals — cool graphite, biased toward the iris accent */
  --ground:#FAFBFC; --panel:#FFFFFF; --panel-2:#FCFCFD; --sunken:#F2F4F7;
  --border:#E9EBF0; --border-soft:#EFF0F4; --border-strong:#DADDE4;
  --row-sep:#E3E5EC; --row-zebra:#FBFBFD; --row-hover:#ECEEF4; --row-sel:#E1E4FE;
  --ink:#12141A; --ink-2:#33363F; --muted:#5C5F6A; --faint:#969AA6;

  /* accent — electric iris "signal" */
  --accent:#4B57F0; --accent-2:#5A66FF; --accent-ink:#3A44D4; --accent-soft:#EEF0FE; --accent-border:#C9CEFB;

  /* semantic (kept distinct from accent) */
  --ok:#0E8A5C; --ok-soft:#E5F3EC; --ok-border:#BEE3CF;
  --warn:#996A00; --warn-soft:#F8F0D8; --warn-border:#E9D7A3;
  /* WCAG-AA small-text chip contrast (Wave 4.5): solid ok/warn on their soft tint are 3.82/4.18:1 for
     11px chip labels (fail AA 4.5:1). Darker text used ONLY in status/kchip small labels; the frozen
     --ok/--warn (large KPI numbers, buttons, dots) stay unchanged so the frozen look is preserved. */
  --status-ok-text:#0B7A50;   /* 4.69:1 on --ok-soft */
  --status-warn-text:#7A5600; /* 5.84:1 on --warn-soft */
  --bad:#C6362E; --bad-soft:#FBEAE8; --bad-border:#F1C9C5;
  --live:#7B3EC1; --live-soft:#F2ECFB; --live-border:#DEC9F0;
  --info:#2563EB; --info-soft:#EAF0FE; --info-border:#C6D6FA;
  --dup:#7B3EC1; --dup-soft:#F2ECFB;

  --r-panel:12px; --r-card:10px; --r-ctrl:8px; --r-chip:7px; --r-badge:6px; --r-pill:999px;

  --sh-sm:0 1px 2px rgba(18,20,30,.04);
  --sh-card:0 1px 2px rgba(18,20,30,.04), 0 3px 8px -6px rgba(18,20,30,.07);
  --sh-panel:0 1px 3px rgba(18,20,30,.04), 0 8px 22px -12px rgba(18,20,30,.12);
  --sh-pop:0 12px 32px -8px rgba(18,20,30,.22), 0 0 0 1px var(--border);
  --sh-primary:0 1px 2px rgba(53,63,205,.28), 0 6px 16px -6px rgba(53,63,205,.48), inset 0 1px 0 rgba(255,255,255,.22);

  --tr:150ms cubic-bezier(.2,.7,.2,1); --tr-fast:110ms cubic-bezier(.2,.7,.2,1);
  --ls-eyebrow:.09em;

  /* navy shell (fixed navigation identity — stays navy in dark mode too) */
  --sb-hover:rgba(255,255,255,.08); --sb-text:rgba(255,255,255,.82); --sb-muted:rgba(255,255,255,.52);
  --sb-icon:rgba(255,255,255,.70); --sb-border:rgba(255,255,255,.09);

  font-family:var(--font-ui); font-size:13px; line-height:1.5; color:var(--ink);
  background:linear-gradient(180deg,#F7F9FD 0%, #F0F3F9 100%);
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.slate-root *, .slate-root *::before, .slate-root *::after{ box-sizing:border-box; }
.slate-root :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:5px; }
.slate-root .num{ font-variant-numeric:tabular-nums; }
.slate-root .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.slate-root .eyebrow{ font-size:10.5px; text-transform:uppercase; letter-spacing:var(--ls-eyebrow); font-weight:650; color:var(--faint); }

/* ===== App shell (Rule 4: the permanent navigation architecture) ========= */
.slate-root .app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100dvh; align-items:start; }
.slate-root .sidebar{ display:flex; flex-direction:column; position:sticky; top:var(--switcher-h);
  align-self:start; height:100dvh; background:linear-gradient(180deg,#223A5A 0%, #1B2C48 100%); border-right:1px solid #14223A; }
.slate-root .brand{ display:flex; align-items:center; gap:10px; padding:var(--s4); }
.slate-root .brand-mark{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  color:#fff; display:grid; place-items:center; flex:none; font-size:12.5px; font-weight:800; letter-spacing:.04em; }
.slate-root .brand-mark svg{ width:17px; height:17px; }
.slate-root .brand-txt{ min-width:0; }
.slate-root .brand-name{ font-weight:700; font-size:15px; letter-spacing:-.02em; line-height:1.1; color:#fff; }
.slate-root .brand-sub{ font-size:11px; color:var(--sb-muted); margin-top:1px; }
.slate-root .sb-toggle{ margin-left:auto; width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:7px; border:1px solid transparent;
  background:transparent; color:var(--sb-muted); cursor:pointer; transition:background var(--tr-fast),color var(--tr-fast); }
.slate-root .sb-toggle:hover{ background:var(--sb-hover); color:#fff; } .slate-root .sb-toggle svg{ width:16px; height:16px; }
.slate-root .nav{ padding:var(--s2) 10px var(--s4); display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:transparent transparent; }
.slate-root .sidebar:hover .nav{ scrollbar-color:rgba(255,255,255,.22) transparent; }
.slate-root .nav::-webkit-scrollbar{ width:7px; } .slate-root .nav::-webkit-scrollbar-thumb{ background:transparent; border-radius:4px; }
.slate-root .sidebar:hover .nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); }
.slate-root .nav-group{ padding:var(--s5) var(--s3) var(--s2); margin-top:4px; border-top:1px solid rgba(255,255,255,.08); padding-top:13px; }
.slate-root .nav-group .eyebrow{ color:rgba(255,255,255,.40); }
.slate-root .nav a, .slate-root .nav button.navitem{ position:relative; display:flex; align-items:center; gap:11px; padding:7px 10px; border-radius:7px; color:var(--sb-text);
  text-decoration:none; font-size:13px; font-weight:550; white-space:nowrap; transition:background var(--tr-fast), color var(--tr-fast);
  border:0; background:transparent; cursor:pointer; font-family:inherit; width:100%; text-align:left; }
.slate-root .nav a svg, .slate-root .nav button.navitem svg{ width:18px; height:18px; flex:none; color:var(--sb-icon); opacity:.82; transition:opacity var(--tr-fast); }
.slate-root .nav a:hover, .slate-root .nav button.navitem:hover{ background:var(--sb-hover); color:#fff; }
.slate-root .nav a:hover svg, .slate-root .nav button.navitem:hover svg{ opacity:1; }
.slate-root .nav a.active, .slate-root .nav button.navitem.active{ background:#fff; color:#223A5A; font-weight:650; border-radius:7px;
  box-shadow:0 2px 7px -1px rgba(6,14,32,.42), 0 0 0 1px rgba(255,255,255,.5); }
.slate-root .nav a.active svg, .slate-root .nav button.navitem.active svg{ color:var(--accent); opacity:1; }
.slate-root .nav a.active::before, .slate-root .nav button.navitem.active::before{ content:""; display:block; position:absolute; left:-6px; top:6px; bottom:6px; width:3px; border-radius:3px; background:var(--accent); }
.slate-root .nav .badge{ margin-left:auto; font-size:11px; font-weight:700; padding:1px 7px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); color:#fff; }
.slate-root .nav a.active .badge, .slate-root .nav button.navitem.active .badge{ background:#223A5A; color:#fff; }
.slate-root .side-foot{ margin-top:auto; padding:var(--s4) var(--s4) var(--s5); border-top:1px solid rgba(255,255,255,.13); display:flex; flex-direction:column; gap:var(--s3); position:relative; }
.slate-root .side-status{ display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.slate-root .side-status .conn{ display:flex; align-items:center; gap:6px; color:#7EE0B4; font-weight:640; }
.slate-root .side-status .conn i{ width:7px; height:7px; border-radius:50%; background:#34D399; box-shadow:0 0 0 3px rgba(52,211,153,.18); }
.slate-root .side-status a{ color:#AFC0EC; text-decoration:none; }
.slate-root .side-user{ font-size:12px; color:var(--sb-muted); background:rgba(255,255,255,.06); border:1px solid var(--sb-border); border-radius:9px; padding:9px 11px; }
.slate-root .side-user b{ color:#fff; display:block; font-weight:640; }
.slate-root .side-actions{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.slate-root .side-actions button{ flex:1 1 0; min-width:0; min-height:38px; font:inherit; font-size:12px; font-weight:640; padding:7px 8px; border-radius:var(--r-ctrl);
  background:rgba(255,255,255,.06); border:1px solid var(--sb-border); color:var(--sb-text); cursor:pointer; transition:background var(--tr-fast),color var(--tr-fast);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slate-root .side-actions button:hover{ background:var(--sb-hover); color:#fff; }
.slate-root .side-avatar{ display:none; width:34px; height:34px; border-radius:50%; align-self:center; place-items:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:linear-gradient(160deg,var(--accent-2),var(--accent-ink)); color:#fff; font-size:11px; font-weight:700; }

/* Footer — expanded: Configure gear + clickable Slack-style user card */
.slate-root .side-gear{ display:grid; place-items:center; width:26px; height:26px; border-radius:7px; border:1px solid var(--sb-border); background:rgba(255,255,255,.06); color:var(--sb-text); cursor:pointer; transition:background var(--tr-fast),color var(--tr-fast); }
.slate-root .side-gear:hover{ background:var(--sb-hover); color:#fff; }
.slate-root .side-user-wrap{ position:relative; }
.slate-root button.side-user{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; }
.slate-root button.side-user:hover{ background:rgba(255,255,255,.10); }
.slate-root .side-user .su-avatar{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.14); background:linear-gradient(160deg,var(--accent-2),var(--accent-ink)); }
.slate-root .side-user .su-id{ min-width:0; flex:1 1 auto; }
.slate-root .side-user .su-id b{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slate-root .side-user .su-id > span{ display:block; font-size:11px; color:var(--sb-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slate-root .side-user .su-caret{ flex:none; color:var(--sb-muted); display:grid; place-items:center; }

/* Footer — collapsed icon rail: connection dot → avatar (opens menu) → distinct action icons (>=44px) */
.slate-root .side-rail{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.slate-root .rail-dot{ display:grid; place-items:center; height:14px; }
.slate-root .rail-dot i{ width:8px; height:8px; border-radius:50%; background:#34D399; box-shadow:0 0 0 3px rgba(52,211,153,.18); }
.slate-root .rail-dot i.off{ background:#F2A6A0; box-shadow:0 0 0 3px rgba(242,166,160,.18); }
.slate-root .rail-avatar-wrap{ position:relative; }
.slate-root .rail-avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-size:12px; font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.16); background:linear-gradient(160deg,var(--accent-2),var(--accent-ink)); }
.slate-root .side-railbtn{ width:44px; height:44px; display:grid; place-items:center; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--sb-text); cursor:pointer; transition:background var(--tr-fast),color var(--tr-fast); }
.slate-root .side-railbtn:hover{ background:var(--sb-hover); color:#fff; }
.slate-root .side-railbtn.danger:hover{ background:rgba(239,68,68,.16); color:#FCA5A5; }
.slate-root .side-railbtn svg{ width:19px; height:19px; }

.slate-root .main{ min-width:0; display:flex; flex-direction:column; }

/* Header / topbar */
.slate-root .topbar{ display:flex; align-items:center; gap:var(--s4); padding:23px var(--s6); border-bottom:1px solid var(--border);
  background:var(--panel); position:sticky; top:var(--switcher-h); z-index:25; box-shadow:0 1px 0 var(--border), 0 6px 16px -12px rgba(18,20,32,.26); }
.slate-root .tb-title{ min-width:0; flex:1 1 auto; }
.slate-root .tb-title h1{ margin:0; font-size:24px; font-weight:700; letter-spacing:-.026em; }
.slate-root .tb-title p{ margin:2px 0 0; color:var(--muted); font-size:13px; }
.slate-root .topbar-right{ margin-left:auto; display:flex; align-items:center; gap:var(--s2); flex:none; }
.slate-root .topbar-right .quota-pill, .slate-root .topbar-right .userpill{ height:36px; }
.slate-root .topbar-right .iconbtn{ width:36px; height:36px; margin-left:var(--s1); }
.slate-root .userpill{ display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:var(--r-ctrl); border:1px solid var(--border-strong);
  background:var(--panel-2); font-size:12.5px; font-weight:640; color:var(--ink); cursor:pointer; }
.slate-root .userpill .av{ width:20px; height:20px; border-radius:50%; background:linear-gradient(160deg,var(--accent-2),var(--accent-ink)); color:#fff; display:grid; place-items:center; font-size:10px; font-weight:700; }
.slate-root .quota-pill{ display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:var(--r-ctrl); border:1px solid var(--border);
  background:var(--sunken); font-size:12px; color:var(--muted); }
.slate-root .quota-pill b{ color:var(--ink); } .slate-root .quota-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); }
.slate-root .sb-burger{ display:none; width:36px; height:36px; border-radius:8px; border:1px solid var(--border-strong); background:var(--panel);
  color:var(--ink); cursor:pointer; align-items:center; justify-content:center; flex:none; }
.slate-root .sb-burger svg{ width:19px; height:19px; }
.slate-root .sb-scrim{ display:none; position:fixed; inset:var(--switcher-h) 0 0 0; background:rgba(9,14,30,.44); z-index:44; opacity:0; transition:opacity var(--tr); }

.slate-root .canvas{ padding:var(--s6) var(--s6) var(--s8); display:flex; flex-direction:column; gap:var(--gap-section); max-width:2560px; width:100%; }

/* ===== Buttons ========================================================== */
.slate-root .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; border-radius:var(--r-ctrl);
  font:inherit; font-size:12.5px; font-weight:640; cursor:pointer; border:1px solid transparent; white-space:nowrap; font-family:inherit;
  transition:background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast), filter var(--tr-fast); }
.slate-root .btn svg{ width:15px; height:15px; }
.slate-root .btn:active{ transform:translateY(.5px); }
.slate-root .btn:disabled{ opacity:.5; cursor:not-allowed; }
.slate-root .btn-primary{ background:linear-gradient(180deg,var(--accent-2) 0%, #4650EE 55%, #3F49E8 100%); color:#fff; box-shadow:var(--sh-primary); }
.slate-root .btn-primary:hover:not(:disabled){ filter:brightness(1.05); box-shadow:0 1px 2px rgba(53,63,205,.32), 0 10px 24px -6px rgba(53,63,205,.62), 0 0 0 4px rgba(75,87,240,.12), inset 0 1px 0 rgba(255,255,255,.26); }
.slate-root .btn-primary:active:not(:disabled){ filter:brightness(.98); box-shadow:0 1px 2px rgba(53,63,205,.35), inset 0 1px 2px rgba(20,20,60,.18); }
.slate-root .btn-lg{ padding:12px 22px; font-size:14px; }
.slate-root .btn-sm{ padding:6px 11px; font-size:12px; }
.slate-root .btn-primary.btn-lg{ box-shadow:0 1px 2px rgba(53,63,205,.3), 0 8px 20px -5px rgba(53,63,205,.55), 0 0 0 4px rgba(75,87,240,.10), inset 0 1px 0 rgba(255,255,255,.26); }
.slate-root .btn-primary.btn-lg:hover:not(:disabled){ box-shadow:0 2px 4px rgba(53,63,205,.34), 0 14px 30px -6px rgba(53,63,205,.66), 0 0 0 5px rgba(75,87,240,.14), inset 0 1px 0 rgba(255,255,255,.30); }
.slate-root .btn-secondary{ background:var(--panel); color:var(--ink); border-color:var(--border-strong); box-shadow:var(--sh-sm); }
.slate-root .btn-secondary:hover:not(:disabled){ background:var(--sunken); border-color:var(--border-strong); }
.slate-root .btn-secondary:active:not(:disabled){ box-shadow:inset 0 1px 2px rgba(18,20,30,.06); }
.slate-root .btn-ghost{ background:transparent; color:var(--muted); border-color:var(--border-strong); }
.slate-root .btn-ghost:hover:not(:disabled){ background:var(--sunken); color:var(--ink); }
.slate-root .btn-danger{ background:var(--panel); color:var(--bad); border-color:var(--bad-border); box-shadow:var(--sh-sm); }
.slate-root .btn-danger:hover:not(:disabled){ background:var(--bad-soft); }
.slate-root .btn-accent-soft{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-border); }
.slate-root .btn-accent-soft:hover:not(:disabled){ filter:brightness(.99); background:#E5E8FE; }
.slate-root .btn-ok-soft{ background:var(--ok-soft); color:var(--ok); border-color:var(--ok-border); }
.slate-root .btn-ok-soft:hover:not(:disabled){ filter:brightness(.99); }

.slate-root .iconbtn{ width:30px; height:30px; display:grid; place-items:center; border-radius:var(--r-ctrl); border:1px solid var(--border-strong);
  background:var(--panel); color:var(--muted); cursor:pointer; transition:background var(--tr-fast),color var(--tr-fast); }
.slate-root .iconbtn:hover:not(:disabled){ background:var(--sunken); color:var(--ink); } .slate-root .iconbtn svg{ width:15px; height:15px; }
.slate-root .iconbtn:disabled{ opacity:.5; cursor:not-allowed; }

/* segmented control */
.slate-root .seg{ display:inline-flex; padding:3px; gap:2px; background:var(--sunken); border:1px solid var(--border); border-radius:var(--r-ctrl); }
.slate-root .seg button{ padding:6px 12px; border:0; background:transparent; border-radius:6px; font:inherit; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; transition:background var(--tr-fast),color var(--tr-fast); }
.slate-root .seg button[aria-pressed="true"]{ background:var(--panel); color:var(--ink); box-shadow:var(--sh-sm); }

/* ===== Menus (controlled dropdown) ====================================== */
.slate-root .menu-wrap{ position:relative; display:inline-block; }
.slate-root .menu{ position:absolute; top:calc(100% + 6px); min-width:214px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r-ctrl); box-shadow:var(--sh-pop); padding:5px; z-index:50;
  opacity:0; transform:translateY(-4px) scale(.98); pointer-events:none; transition:opacity var(--tr-fast), transform var(--tr-fast); }
.slate-root .menu.align-right{ right:0; transform-origin:top right; } .slate-root .menu.align-left{ left:0; transform-origin:top left; }
.slate-root .menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.slate-root .menu button.mi{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; border-radius:6px; border:0;
  background:transparent; font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer; transition:background var(--tr-fast); }
.slate-root .menu button.mi:hover:not(:disabled){ background:var(--sunken); } .slate-root .menu button.mi svg{ width:14px; height:14px; color:var(--muted); }
.slate-root .menu button.mi:disabled{ opacity:.5; cursor:not-allowed; }
.slate-root .menu button.mi.danger{ color:var(--bad); } .slate-root .menu button.mi.danger:hover:not(:disabled){ background:var(--bad-soft); }
.slate-root .menu button.mi.danger svg{ color:var(--bad); }
.slate-root .menu .ml{ padding:8px 10px 4px; } .slate-root .menu hr{ border:0; border-top:1px solid var(--border); margin:5px 2px; }
.slate-root .menu .mctrl{ padding:6px 10px; }

/* ===== Cards / panels =================================================== */
.slate-root .card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.slate-root .panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-panel); box-shadow:var(--sh-panel); overflow:hidden; }
.slate-root details.collapsible{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh-sm); }
.slate-root details.collapsible > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:13px var(--s5); font-size:13px; font-weight:640; color:var(--ink); }
.slate-root details.collapsible > summary::-webkit-details-marker{ display:none; }
.slate-root details.collapsible > summary .tw{ width:14px; height:14px; color:var(--faint); transition:transform var(--tr); }
.slate-root details.collapsible[open] > summary .tw{ transform:rotate(90deg); }
.slate-root details.collapsible .cbody{ padding:0 var(--s5) var(--s5); color:var(--muted); font-size:12.5px; }

/* ===== Stepper ========================================================== */
.slate-root .stepper{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.slate-root .step{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--faint); }
.slate-root .step b{ width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--sunken); color:var(--muted); border:1px solid var(--border); }
.slate-root .step.done{ color:var(--ink-2); } .slate-root .step.done b{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-border); }
.slate-root .step.cur{ color:var(--ink); font-weight:640; } .slate-root .step.cur b{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.slate-root .step-sep{ color:var(--faint); }

/* ===== Notice + owner selector + inputs ================================= */
.slate-root .notice{ display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:var(--r-ctrl);
  background:var(--info-soft); border:1px solid var(--info-border); color:var(--ink-2); font-size:12.5px; }
.slate-root .notice svg{ width:16px; height:16px; color:var(--info); flex:none; }
.slate-root .field-input{ font:inherit; font-size:13px; color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--r-ctrl);
  padding:9px 12px; background:var(--panel); width:100%; transition:border-color var(--tr-fast), box-shadow var(--tr-fast); }
.slate-root .field-input::-moz-placeholder{ color:var(--faint); }
.slate-root .field-input::placeholder{ color:var(--faint); }
.slate-root .field-input:focus{ outline:none; border-color:var(--accent-border); box-shadow:0 0 0 3px var(--accent-soft); }
.slate-root .field-input:disabled{ background:var(--sunken); color:var(--muted); cursor:not-allowed; }
.slate-root select.field-select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:32px; cursor:pointer; background:var(--panel-2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5F6A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; }

/* ===== Command Center (hero) ============================================ */
.slate-root .command{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-panel); box-shadow:var(--sh-card); overflow:hidden; }
.slate-root .cc-top{ display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); flex-wrap:wrap; }
.slate-root .cc-hint{ padding:0 var(--s5) var(--s5); font-size:12.5px; color:var(--muted); } .slate-root .cc-hint b{ color:var(--ink); font-weight:640; }
.slate-root .cc-actions{ display:flex; align-items:center; gap:var(--s3); padding:0 var(--s5) var(--s5); flex-wrap:wrap; }
.slate-root .cc-band{ display:flex; align-items:center; gap:var(--s4); padding:11px var(--s5); background:var(--sunken); border-top:1px solid var(--border); font-size:12px; color:var(--muted); flex-wrap:wrap; }
.slate-root .cc-metrics{ display:flex; gap:var(--s2); padding:2px var(--s5) var(--s5); flex-wrap:wrap; }
.slate-root .state-pill{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:var(--r-pill); font-size:12.5px; font-weight:680; margin-left:auto;
  color:var(--ok); background:var(--ok-soft); border:1px solid var(--ok-border); }
.slate-root .state-pill i{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(14,138,92,.14); }
/* R3 (Integrity cert badge) — tone modifiers from the frozen status tokens. `.bad` was already
   referenced by IntegrityDashboard (FAIL) but had no rule (rendered green); `.muted` is the new
   NOT_VERIFIED_NO_PROVIDER_SNAPSHOT state. Token-only, no new colors. */
.slate-root .state-pill.bad{ color:var(--bad); background:var(--bad-soft); border-color:var(--bad-border); }
.slate-root .state-pill.bad i{ background:var(--bad); box-shadow:0 0 0 3px rgba(198,54,46,.14); }
.slate-root .state-pill.muted{ color:var(--muted); background:var(--panel-2); border-color:var(--border); }
.slate-root .state-pill.muted i{ background:var(--faint); box-shadow:0 0 0 3px rgba(150,154,166,.14); }

/* KPI chip (command center) */
.slate-root .kchip{ display:flex; flex-direction:column; gap:2px; min-width:96px; padding:10px 14px; border-radius:var(--r-card); border:1px solid var(--border);
  background:var(--panel-2); transition:border-color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast); }
.slate-root .kchip:hover{ box-shadow:var(--sh-sm); transform:translateY(-1px); }
.slate-root .kchip .kl{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--muted); }
.slate-root .kchip .kl i{ width:7px; height:7px; border-radius:50%; background:var(--faint); }
.slate-root .kchip .kv{ font-size:20px; font-weight:750; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.slate-root .kchip.ok{ background:var(--ok-soft); border-color:var(--ok-border); } .slate-root .kchip.ok .kv{ color:var(--ok); } .slate-root .kchip.ok .kl{ color:var(--status-ok-text); } .slate-root .kchip.ok .kl i{ background:var(--ok); }
.slate-root .kchip.bad{ background:var(--bad-soft); border-color:var(--bad-border); } .slate-root .kchip.bad .kv, .slate-root .kchip.bad .kl{ color:var(--bad); } .slate-root .kchip.bad .kl i{ background:var(--bad); }
.slate-root .kchip.dup{ background:var(--dup-soft); border-color:var(--live-border); } .slate-root .kchip.dup .kv, .slate-root .kchip.dup .kl{ color:var(--dup); } .slate-root .kchip.dup .kl i{ background:var(--dup); }
.slate-root .kchip.warn{ background:var(--warn-soft); border-color:var(--warn-border); } .slate-root .kchip.warn .kv{ color:var(--warn); } .slate-root .kchip.warn .kl{ color:var(--status-warn-text); } .slate-root .kchip.warn .kl i{ background:var(--warn); }

/* ===== KPI tiles (My Listings) ========================================= */
.slate-root .kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:var(--s2); }
.slate-root .kpi{ position:relative; padding:9px 13px 10px; border-radius:9px; border:1px solid var(--border); background:var(--panel);
  box-shadow:var(--sh-sm); overflow:hidden; cursor:pointer; text-align:left; font:inherit; transition:border-color var(--tr), box-shadow var(--tr); }
.slate-root .kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tone,var(--faint)); opacity:0; transition:opacity var(--tr); }
.slate-root .kpi:hover{ box-shadow:var(--sh-card); } .slate-root .kpi:hover::before{ opacity:.9; }
.slate-root .kpi.sel{ border-color:var(--tone,var(--accent)); box-shadow:0 0 0 1px var(--tone,var(--accent)) inset, var(--sh-sm); } .slate-root .kpi.sel::before{ opacity:1; }
.slate-root .kpi .kt{ font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.slate-root .kpi .kn{ font-size:23px; font-weight:750; letter-spacing:-.025em; color:var(--tone,var(--ink)); margin:1px 0; line-height:1.12; font-variant-numeric:tabular-nums; }
.slate-root .kpi .kd{ font-size:10.5px; color:var(--faint); line-height:1.3; }
.slate-root .kpi.t-ink{ --tone:var(--ink); } .slate-root .kpi.t-ok{ --tone:var(--ok); } .slate-root .kpi.t-warn{ --tone:var(--warn); }
.slate-root .kpi.t-live{ --tone:var(--live); } .slate-root .kpi.t-info{ --tone:var(--info); } .slate-root .kpi.t-bad{ --tone:var(--bad); } .slate-root .kpi.t-muted{ --tone:var(--muted); }

/* ===== Toolbar (search + controls) ===================================== */
.slate-root .toolrow{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.slate-root .search{ flex:1; min-width:240px; display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:var(--r-ctrl);
  border:1px solid var(--border-strong); background:var(--panel); box-shadow:var(--sh-sm); transition:border-color var(--tr-fast), box-shadow var(--tr-fast); }
.slate-root .search:focus-within{ border-color:var(--accent-border); box-shadow:0 0 0 3px var(--accent-soft); }
.slate-root .search svg{ width:15px; height:15px; color:var(--faint); }
.slate-root .search input{ border:0; background:transparent; font:inherit; font-size:13px; color:var(--ink); outline:none; width:100%; }
.slate-root .bulk-row{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.slate-root .bulk-row .lab{ font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; margin-right:2px; }
.slate-root .selectall{ font-size:12.5px; font-weight:640; color:var(--accent-ink); background:none; border:0; cursor:pointer; padding:6px 4px; font-family:inherit; }

/* ===== Filter tabs + owner pills + readiness chips ===================== */
.slate-root .filterbar{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.slate-root .ftab{ padding:6px 13px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--panel); color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:background var(--tr-fast),color var(--tr-fast),border-color var(--tr-fast); }
.slate-root .ftab:hover{ border-color:var(--border-strong); color:var(--ink); }
.slate-root .ftab[aria-pressed="true"]{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:var(--sh-sm); }
.slate-root .fdiv{ width:1px; height:22px; background:var(--border); margin:0 var(--s2); }
.slate-root .opill{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--r-ctrl); border:1px solid var(--border-soft);
  background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:background var(--tr-fast),color var(--tr-fast),border-color var(--tr-fast); }
.slate-root .opill i{ width:6px; height:6px; border-radius:2px; opacity:.9; } .slate-root .opill .c{ color:var(--faint); font-weight:640; font-variant-numeric:tabular-nums; }
.slate-root .opill:hover{ background:var(--panel); border-color:var(--border-strong); color:var(--ink); }
.slate-root .opill[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); } .slate-root .opill[aria-pressed="true"] .c{ color:rgba(255,255,255,.65); } .slate-root .opill[aria-pressed="true"] i{ opacity:1; }
.slate-root .chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.slate-root .chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--r-chip); border:1px solid var(--border);
  background:var(--panel); color:var(--muted); font:inherit; font-size:12px; font-weight:640; cursor:pointer; transition:background var(--tr-fast),color var(--tr-fast),border-color var(--tr-fast); }
.slate-root .chip .c{ font-weight:720; } .slate-root .chip .dotc{ width:7px; height:7px; border-radius:50%; }
.slate-root .chip:hover{ border-color:var(--border-strong); }
.slate-root .chip[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.slate-root .chip.s-ready .dotc{ background:var(--ok);} .slate-root .chip.s-blocked .dotc{ background:var(--bad);} .slate-root .chip.s-warn .dotc{ background:var(--warn);} .slate-root .chip.s-dup .dotc{ background:var(--dup);}
.slate-root .chip.s-ready[aria-pressed="true"]{ background:var(--ok); border-color:var(--ok); color:#fff; }
.slate-root .chip.s-blocked[aria-pressed="true"]{ background:var(--bad); border-color:var(--bad); color:#fff; }
.slate-root .chip.s-warn[aria-pressed="true"]{ background:var(--warn); border-color:var(--warn); color:#fff; }
.slate-root .chip.s-dup[aria-pressed="true"]{ background:var(--dup); border-color:var(--dup); color:#fff; }
.slate-root .chip[aria-pressed="true"] .dotc{ background:currentColor; }

/* ===== Status badge / pill ============================================= */
.slate-root .status{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:66px; padding:2px 9px; border-radius:var(--r-badge); font-size:11px; font-weight:700; letter-spacing:-.005em; white-space:nowrap;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.slate-root .status.no-min{ min-width:0; }
.slate-root .status i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.slate-root .status.active, .slate-root .status.ready{ color:var(--status-ok-text); background:var(--ok-soft); }
.slate-root .status.live{ color:var(--live); background:var(--live-soft); }
.slate-root .status.demo, .slate-root .status.warn{ color:var(--status-warn-text); background:var(--warn-soft); }
.slate-root .status.submitted, .slate-root .status.info{ color:var(--info); background:var(--info-soft); }
.slate-root .status.inactive, .slate-root .status.muted{ color:var(--muted); background:var(--sunken); }
.slate-root .status.deleted, .slate-root .status.blocked, .slate-root .status.bad{ color:var(--bad); background:var(--bad-soft); }
.slate-root .status.dup{ color:var(--dup); background:var(--dup-soft); }

/* ===== Loading skeleton + empty ======================================== */
.slate-root .sk{ display:inline-block; height:11px; border-radius:5px; background:linear-gradient(90deg,var(--sunken) 25%,#EAECF1 37%,var(--sunken) 63%); background-size:400% 100%; animation:slate-shimmer 1.3s ease infinite; }
@keyframes slate-shimmer{ 0%{ background-position:100% 0;} 100%{ background-position:-100% 0;} }
.slate-root .empty{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:56px 20px; text-align:center; }
.slate-root .empty .eic{ width:44px; height:44px; border-radius:12px; background:var(--sunken); color:var(--faint); display:grid; place-items:center; }
.slate-root .empty .eic svg{ width:22px; height:22px; } .slate-root .empty h3{ margin:0; font-size:14px; font-weight:640; } .slate-root .empty p{ margin:0; font-size:12.5px; color:var(--muted); max-width:340px; }

/* ===== Workspace + Inspector =========================================== */
.slate-root .workspace{ display:grid; grid-template-columns:1fr var(--inspector-w); gap:var(--s4); align-items:start; }
.slate-root .inspector{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-panel); box-shadow:var(--sh-panel); position:sticky; top:96px; overflow:hidden; }
.slate-root .insp-head{ display:flex; align-items:center; gap:10px; padding:14px var(--s5); border-bottom:1px solid var(--border); background:var(--panel-2); }
.slate-root .insp-head .ic{ width:28px; height:28px; border-radius:8px; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; }
.slate-root .insp-head .ic svg{ width:15px; height:15px; } .slate-root .insp-head b{ font-size:13.5px; letter-spacing:-.01em; } .slate-root .insp-head .close{ margin-left:auto; }
.slate-root .insp-body{ padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4); }
.slate-root .insp-title{ font-size:17px; font-weight:700; letter-spacing:-.02em; }
.slate-root .insp-title small{ display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:3px; }
.slate-root .insp-sec{ display:flex; flex-direction:column; gap:10px; }
.slate-root .insp-sec > .st{ display:flex; align-items:center; gap:7px; } .slate-root .insp-sec > .st .eyebrow{ color:var(--muted); }
.slate-root .repair{ border:1px solid var(--bad-border); background:var(--bad-soft); border-radius:var(--r-card); padding:14px; display:flex; flex-direction:column; gap:11px; }
.slate-root .repair .rt{ display:flex; align-items:center; gap:7px; } .slate-root .repair .rt .eyebrow{ color:var(--bad); } .slate-root .repair .rt svg{ width:14px; height:14px; color:var(--bad); }
.slate-root .repair .issue{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink); }
.slate-root .warnbox{ border:1px solid var(--warn-border); background:var(--warn-soft); border-radius:var(--r-card); padding:11px 13px; font-size:12.5px; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start; }
.slate-root .warnbox svg{ width:15px; height:15px; color:var(--warn); flex:none; margin-top:1px; }
.slate-root .fields{ display:flex; flex-direction:column; }
.slate-root .field{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--row-sep); font-size:12.5px; }
.slate-root .field:last-child{ border-bottom:0; } .slate-root .field .k{ color:var(--muted); } .slate-root .field .v{ color:var(--ink); font-weight:640; text-align:right; } .slate-root .field .v.miss{ color:var(--bad); }
.slate-root .insp-foot{ display:flex; gap:var(--s2); padding:var(--s4) var(--s5); border-top:1px solid var(--border); background:var(--panel-2); }
.slate-root .insp-foot .btn{ flex:1; }

/* ===== Table =========================================================== */
.slate-root .tbl-head{ display:flex; align-items:center; justify-content:space-between; padding:12px var(--s5); border-bottom:1px solid var(--border); flex-wrap:wrap; gap:var(--s3); }
.slate-root .tbl-head .meta{ font-size:12.5px; color:var(--muted); } .slate-root .tbl-head .meta b{ color:var(--ink); }
.slate-root .perpage{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.slate-root .perpage select{ font:inherit; font-size:12px; border:1px solid var(--border-strong); border-radius:6px; padding:4px 24px 4px 8px; background:var(--panel-2); -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235C5F6A' stroke-width='2.6' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 7px center; cursor:pointer; }
.slate-root .pager{ display:flex; align-items:center; gap:5px; } .slate-root .pager .pmeta{ font-size:12.5px; color:var(--muted); margin-right:4px; }
.slate-root .pager button{ min-width:28px; height:28px; padding:0 7px; border-radius:var(--r-ctrl); border:1px solid var(--border-strong); background:var(--panel); color:var(--muted); cursor:pointer; font:inherit; font-size:12px; transition:background var(--tr-fast); }
.slate-root .pager button:hover:not(:disabled){ background:var(--sunken); } .slate-root .pager button.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.slate-root .pager button:disabled{ opacity:.45; cursor:not-allowed; }
.slate-root .tscroll{ overflow-x:auto; }
.slate-root table.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.slate-root .tbl thead th{ position:sticky; top:0; z-index:2; background:var(--sunken); text-align:left; padding:9px 16px;
  border-bottom:1px solid var(--border-strong); white-space:nowrap; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:680; }
.slate-root .tbl thead th:first-child{ padding-left:18px; }
.slate-root .tbl thead th .sort{ opacity:.5; margin-left:3px; }
.slate-root .tbl thead th.sortable{ cursor:pointer; -webkit-user-select:none; -moz-user-select:none; user-select:none; } .slate-root .tbl thead th.sortable:hover{ color:var(--ink); }
.slate-root .tbl tbody td{ padding:8px 16px; border-bottom:1px solid var(--row-sep); vertical-align:middle; }
.slate-root .tbl tbody td:first-child{ padding-left:18px; }
/* long-text hardening: an unbreakable >100-char value in the primary cell must wrap within its
   column, never force horizontal scroll (defensive — real data is short, but pasted URLs/tokens aren't) */
.slate-root .tbl tbody td.td-primary{ overflow-wrap:anywhere; word-break:break-word; }
.slate-root .tbl tbody tr{ cursor:pointer; transition:background var(--tr-fast); }
.slate-root .tbl tbody tr:nth-child(even){ background:var(--row-zebra); }
.slate-root .tbl tbody tr:hover{ background:var(--row-hover); }
.slate-root .tbl tbody tr.sel, .slate-root .tbl tbody tr.sel:nth-child(even){ background:var(--row-sel); box-shadow:inset 4px 0 0 var(--accent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.slate-root .tbl tbody tr.sel td{ background:transparent; }
.slate-root .tbl tbody tr.kbd-focus{ box-shadow:inset 0 0 0 2px var(--accent-border); }
.slate-root .tbl tbody tr.active, .slate-root .tbl tbody tr.active:nth-child(even){ box-shadow:inset 3px 0 0 var(--accent); }
.slate-root .tbl tbody tr:last-child td{ border-bottom:0; }
.slate-root .tbl tbody tr.expando td{ background:var(--panel-2); cursor:default; padding:0; }
.slate-root .tbl tbody tr.expando:hover{ background:var(--panel-2); }
.slate-root .expando-body{ padding:14px 18px; }
.slate-root .cc-check{ width:36px; } .slate-root .cc-check input{ width:15px; height:15px; accent-color:var(--accent); }
.slate-root .num-col{ text-align:right; font-variant-numeric:tabular-nums; }
.slate-root .rowact{ color:var(--faint); text-align:center; } .slate-root .rowact .iconbtn{ width:26px; height:26px; border-color:transparent; background:transparent; }
.slate-root .rowact .iconbtn:hover{ background:var(--sunken); border-color:var(--border-strong); }

/* ===== Mobile-native cards (My Listings on a phone) ==================== */
.slate-root .mcards{ display:none; padding:12px 14px; flex-direction:column; gap:10px; }
.slate-root .mcard{ display:flex; flex-direction:column; gap:7px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--panel);
  box-shadow:var(--sh-sm); text-align:left; font:inherit; cursor:pointer; width:100%; transition:background var(--tr-fast); }
.slate-root .mcard:active{ background:var(--sunken); }
.slate-root .mcard .mc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.slate-root .mcard .mc-name{ font-size:16.5px; font-weight:680; color:var(--ink); display:flex; align-items:center; gap:7px; line-height:1.22; letter-spacing:-.015em; }
.slate-root .mcard .mc-chev{ color:var(--faint); width:18px; height:18px; flex:none; margin-top:1px; }
.slate-root .mcard .mc-sub{ font-size:13px; color:var(--muted); }
.slate-root .mcard .mc-chips{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:1px; }

/* ===== FAB + Bottom sheet + Drawer ===================================== */
.slate-root .fab{ display:inline-flex; position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); width:54px; height:54px; border-radius:17px; border:0; z-index:47;
  background:linear-gradient(180deg,var(--accent-2),#4650EE); color:#fff; box-shadow:var(--sh-primary), 0 12px 26px -6px rgba(53,63,205,.5); cursor:pointer; align-items:center; justify-content:center; }
.slate-root .fab svg{ width:24px; height:24px; }
.slate-root .sheet-scrim, .slate-root .drawer-scrim{ position:fixed; inset:0; background:rgba(9,14,30,.5); z-index:48; opacity:0; pointer-events:none; transition:opacity 180ms ease-out; }
.slate-root .sheet-scrim.open, .slate-root .drawer-scrim.open{ opacity:1; pointer-events:auto; }
.slate-root .sheet{ position:fixed; left:0; right:0; bottom:0; z-index:49; background:var(--panel); border-radius:20px 20px 0 0;
  box-shadow:0 -14px 44px -10px rgba(0,0,0,.36); transform:translateY(100%); transition:transform 200ms ease-out; max-height:90vh; display:flex; flex-direction:column; }
.slate-root .sheet.open{ transform:translateY(0); }
.slate-root .sheet .grab{ width:40px; height:4px; border-radius:2px; background:var(--border-strong); margin:10px auto 2px; flex:none; }
.slate-root .sheet .sh-head{ padding:8px 18px 13px; border-bottom:1px solid var(--border); flex:none; }
.slate-root .sheet .sh-title{ font-size:19px; font-weight:700; letter-spacing:-.02em; }
.slate-root .sheet .sh-sub{ font-size:13px; color:var(--muted); margin-top:3px; }
.slate-root .sheet .sh-body{ padding:6px 18px 12px; overflow-y:auto; display:flex; flex-direction:column; }
.slate-root .sheet .sh-actions{ padding:12px 18px calc(16px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr; gap:9px; border-top:1px solid var(--border); flex:none; background:var(--panel); }
.slate-root .sheet .sh-actions .btn{ width:100%; min-height:46px; }
/* right-side drawer (tablet inspector / slide-over) */
.slate-root .drawer{ position:fixed; top:0; right:0; bottom:0; z-index:49; width:min(420px,92vw); background:var(--panel); border-left:1px solid var(--border);
  box-shadow:-14px 0 44px -10px rgba(0,0,0,.28); transform:translateX(100%); transition:transform 200ms ease-out; display:flex; flex-direction:column; }
.slate-root .drawer.open{ transform:translateX(0); }

/* ===== Modal =========================================================== */
.slate-root .modal-scrim{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(9,14,30,.5); }
.slate-root .modal{ width:100%; max-width:560px; max-height:90vh; overflow:hidden; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-panel); box-shadow:var(--sh-pop); }
.slate-root .modal .m-head{ display:flex; align-items:center; gap:10px; padding:16px var(--s5); border-bottom:1px solid var(--border); }
.slate-root .modal .m-head h3{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; } .slate-root .modal .m-head .close{ margin-left:auto; }
.slate-root .modal .m-body{ padding:var(--s5); overflow-y:auto; }
.slate-root .modal .m-foot{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--s2); padding:14px var(--s5); border-top:1px solid var(--border); background:var(--panel-2); }
.slate-root .topbar-right{ flex-wrap:wrap; justify-content:flex-end; }

/* ===== Toast =========================================================== */
.slate-root .toast-wrap{ position:fixed; top:16px; right:16px; z-index:80; display:flex; flex-direction:column; gap:10px; pointer-events:none; max-width:min(380px, calc(100vw - 32px)); }
.slate-root .toast{ pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--r-card); background:var(--panel); border:1px solid var(--border); box-shadow:var(--sh-pop); font-size:12.5px; color:var(--ink); }
.slate-root .toast .ti{ width:16px; height:16px; flex:none; margin-top:1px; }
.slate-root .toast.ok{ border-color:var(--ok-border); } .slate-root .toast.ok .ti{ color:var(--ok); }
.slate-root .toast.warn{ border-color:var(--warn-border); } .slate-root .toast.warn .ti{ color:var(--warn); }
.slate-root .toast.bad{ border-color:var(--bad-border); } .slate-root .toast.bad .ti{ color:var(--bad); }
.slate-root .toast.info .ti{ color:var(--info); }

/* ===== Collapse (icons-only rail) ====================================== */
.slate-root .app{ transition:grid-template-columns 260ms cubic-bezier(.2,.7,.2,1); }
.slate-root .brand-txt, .slate-root .nav a span, .slate-root .nav button.navitem span, .slate-root .side-foot > *{ transition:opacity 150ms ease; }
.slate-root[data-sidebar="collapsed"] .app{ grid-template-columns:62px 1fr; }
.slate-root[data-sidebar="collapsed"] .sidebar{ width:62px; }
.slate-root[data-sidebar="collapsed"] .brand{ flex-direction:column; gap:10px; padding:var(--s4) 0 var(--s3); }
.slate-root[data-sidebar="collapsed"] .brand-txt{ display:none; }
.slate-root[data-sidebar="collapsed"] .sb-toggle{ margin:0; }
.slate-root[data-sidebar="collapsed"] .sb-toggle svg{ transform:rotate(180deg); }
.slate-root[data-sidebar="collapsed"] .nav a span, .slate-root[data-sidebar="collapsed"] .nav button.navitem span{ display:none; }
.slate-root[data-sidebar="collapsed"] .nav a, .slate-root[data-sidebar="collapsed"] .nav button.navitem{ justify-content:center; gap:0; padding:10px 0; min-height:44px; }
.slate-root[data-sidebar="collapsed"] .nav .badge{ display:none; }
.slate-root[data-sidebar="collapsed"] .nav-group{ padding:12px 0 2px; }
.slate-root[data-sidebar="collapsed"] .nav-group .eyebrow{ display:none; }
.slate-root[data-sidebar="collapsed"] .side-foot{ padding:var(--s3) 10px; }
.slate-root[data-sidebar="collapsed"] .side-user, .slate-root[data-sidebar="collapsed"] .side-actions, .slate-root[data-sidebar="collapsed"] .side-status a{ display:none; }
.slate-root[data-sidebar="collapsed"] .side-status{ justify-content:center; }
.slate-root[data-sidebar="collapsed"] .side-status .conn span{ display:none; }
.slate-root[data-sidebar="collapsed"] .side-avatar{ display:grid; }
.slate-root .profile-pop{ position:absolute; left:calc(100% + 10px); bottom:8px; min-width:174px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--sh-pop); padding:6px; z-index:70; display:none; }
.slate-root .profile-pop.open{ display:block; }
.slate-root .profile-pop .pp-name{ padding:8px 10px 7px; font-size:12.5px; font-weight:660; color:var(--ink); border-bottom:1px solid var(--border); margin-bottom:4px; }
.slate-root .profile-pop .pp-name span{ color:var(--faint); font-weight:400; }
.slate-root .profile-pop button{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; border:0; background:transparent; border-radius:7px; font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer; }
.slate-root .profile-pop button svg{ width:15px; height:15px; flex:none; opacity:.8; }
.slate-root .profile-pop button:hover{ background:var(--sunken); } .slate-root .profile-pop button.danger{ color:var(--bad); } .slate-root .profile-pop button.danger:hover{ background:var(--bad-soft); }
.slate-root .navtip{ position:fixed; z-index:90; background:#14161C; color:#fff; font-size:12px; font-weight:600; padding:6px 10px; border-radius:7px;
  white-space:nowrap; opacity:0; pointer-events:none; transform:translateX(-4px); transition:opacity 120ms ease, transform 120ms ease; box-shadow:0 10px 24px -8px rgba(0,0,0,.4); }
.slate-root .navtip.show{ opacity:1; transform:translateX(0); }

/* ==========================================================================
   ADAPTIVE — phone layout (.is-mobile set by SlateRoot on a narrow viewport).
   Rule 3: ONE component adapts; there is no separate mobile component tree.
   ========================================================================== */
.slate-root.is-mobile .app{ grid-template-columns:1fr; }
.slate-root.is-mobile .sidebar{ position:fixed; top:var(--switcher-h); left:0; bottom:0; height:100dvh;
  width:min(86vw,300px); transform:translateX(-100%); overflow-y:auto; z-index:46; box-shadow:0 20px 50px -12px rgba(0,0,0,.5); transition:transform 180ms ease-out; }
.slate-root.is-mobile[data-drawer="open"] .sidebar{ transform:none; }
.slate-root.is-mobile[data-drawer="open"] .sb-scrim{ display:block; opacity:1; }
.slate-root.is-mobile .sb-burger{ display:inline-flex; }
.slate-root.is-mobile .nav a, .slate-root.is-mobile .nav button.navitem{ min-height:44px; }
.slate-root.is-mobile .topbar{ padding:var(--s3) var(--s4); gap:var(--s3); flex-wrap:nowrap; align-items:center; }
.slate-root.is-mobile .tb-title{ flex:1 1 auto; min-width:0; }
.slate-root.is-mobile .tb-title h1{ font-size:20px; font-weight:600; letter-spacing:-.02em; } .slate-root.is-mobile .tb-title p{ display:none; }
.slate-root.is-mobile .topbar-right{ width:auto; margin-left:auto; gap:var(--s2); }
.slate-root.is-mobile .topbar-right .quota-pill, .slate-root.is-mobile .topbar-right .userpill{ display:none; }
.slate-root.is-mobile .canvas{ padding:var(--s4) var(--s4) 76px; gap:var(--s4); }
.slate-root.is-mobile .kpi-grid{ display:flex; flex-wrap:wrap; grid-template-columns:none; gap:7px; }
.slate-root.is-mobile .kpi{ flex:0 0 auto; padding:7px 12px; border-radius:999px; display:flex; align-items:center; gap:7px; box-shadow:var(--sh-sm); }
.slate-root.is-mobile .kpi::before{ position:static; width:7px; height:7px; border-radius:50%; background:var(--tone,var(--faint)); opacity:1; }
.slate-root.is-mobile .kpi .kt{ order:1; font-size:11.5px; text-transform:none; letter-spacing:0; color:var(--muted); font-weight:600; }
.slate-root.is-mobile .kpi .kn{ order:2; font-size:14px; font-weight:730; margin:0; line-height:1; }
.slate-root.is-mobile .kpi .kd{ display:none; }
.slate-root.is-mobile .workspace{ grid-template-columns:1fr; } .slate-root.is-mobile .inspector{ position:static; }
.slate-root.is-mobile .cc-actions{ flex-direction:column; align-items:stretch; } .slate-root.is-mobile .cc-actions .btn{ width:100%; }
.slate-root.is-mobile .cc-top{ gap:8px; } .slate-root.is-mobile .state-pill{ margin-left:0; }
.slate-root.is-mobile .btn, .slate-root.is-mobile .ftab, .slate-root.is-mobile .opill, .slate-root.is-mobile .chip{ min-height:44px; }
.slate-root.is-mobile .iconbtn, .slate-root.is-mobile .sb-burger{ min-height:44px; min-width:44px; }
.slate-root.is-mobile .stepper{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
.slate-root.is-mobile .mobile-only{ display:block; } .slate-root .mobile-only{ display:none; }
.slate-root.is-mobile .desktop-only{ display:none; }
/* tables → labelled cards */
.slate-root.is-mobile table.tbl, .slate-root.is-mobile .tbl thead, .slate-root.is-mobile .tbl tbody, .slate-root.is-mobile .tbl tr, .slate-root.is-mobile .tbl td{ display:block; }
.slate-root.is-mobile .tbl thead{ display:none; }
.slate-root.is-mobile .tbl tbody tr{ position:relative; border:1px solid var(--border); border-radius:var(--r-card); background:var(--panel); box-shadow:var(--sh-sm); padding:12px 14px; margin:0 0 10px; }
.slate-root.is-mobile .tbl tbody tr:nth-child(even), .slate-root.is-mobile .tbl tbody tr:hover{ background:var(--panel); }
.slate-root.is-mobile .tbl tbody tr.sel, .slate-root.is-mobile .tbl tbody tr.sel:nth-child(even){ box-shadow:inset 4px 0 0 var(--accent), var(--sh-card); background:var(--panel); }
.slate-root.is-mobile .tbl tbody td{ padding:7px 0 !important; border:0 !important; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.slate-root.is-mobile .tbl tbody td::before{ content:attr(data-label); flex:none; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:650; }
.slate-root.is-mobile .tbl tbody td.td-primary{ display:block; padding:0 0 9px !important; margin:0 0 5px; border-bottom:1px solid var(--row-sep) !important; }
.slate-root.is-mobile .tbl tbody td.td-primary::before{ display:none; }
.slate-root.is-mobile .tbl tbody td.td-check, .slate-root.is-mobile .tbl tbody td.td-act{ display:none; }
.slate-root.is-mobile .mcards{ display:flex; }
/* phone: search goes full-width; status badges drop their desktop min-width; touch targets on footer */
.slate-root.is-mobile .toolrow .search{ min-width:0; flex:1 1 100%; }
.slate-root.is-mobile .status{ min-width:0; }
.slate-root.is-mobile .side-actions button{ min-height:44px; }
.slate-root.is-mobile .tbl-head{ flex-direction:column; align-items:stretch; gap:10px; }
/* long chip / owner rows scroll rather than pile up (never overlap) */
.slate-root.is-mobile .chips, .slate-root.is-mobile .filterbar, .slate-root.is-mobile .bulk-row{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:3px; }
.slate-root.is-mobile .chip, .slate-root.is-mobile .ftab, .slate-root.is-mobile .opill{ flex:none; }
/* touch-target floor on phones/tablets (≥40–44px) — WITHOUT reintroducing overflow:
   the hero CTAs may wrap to 2 lines, and the pager wraps rather than growing one long row. */
.slate-root.is-mobile .cc-actions .btn{ white-space:normal; text-align:center; }
.slate-root.is-mobile .kpi{ min-height:44px; }
.slate-root.is-mobile .seg button{ min-height:44px; }
.slate-root.is-mobile .menu button.mi{ min-height:44px; }
.slate-root.is-mobile .perpage select{ min-height:40px; }
.slate-root.is-mobile .pager{ flex-wrap:wrap; row-gap:6px; }
.slate-root.is-mobile .pager button{ min-height:40px; min-width:40px; }

/* ══════════════════════════════════════════════════════════════════════════
   Phase 3 — My Listings MOBILE workspace polish (mobile-only; desktop untouched).
   ══════════════════════════════════════════════════════════════════════════ */
/* #2 — KPI chips: one tidy horizontal scroll row (was a cluttered multi-row wrap) */
.slate-root.is-mobile .kpi-grid{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:5px; }
.slate-root.is-mobile .kpi{ flex:0 0 auto; scroll-snap-align:start; }
/* #3/#8 — density toggle is desktop-only clutter on a phone (bulk row + top pager use .desktop-only) */
.slate-root.is-mobile [aria-label="Table density"]{ display:none; }
/* #5/#9 — condense the listing cards + stronger name typography; drop the redundant Issues row
   (the Status chip already conveys blocked/issue state; full detail is one tap away in the drawer) */
.slate-root.is-mobile .tbl tbody tr{ padding:11px 13px; margin:0 0 9px; }
.slate-root.is-mobile .tbl tbody td{ padding:3px 0 !important; }
.slate-root.is-mobile .tbl tbody td.td-primary{ padding:0 0 7px !important; margin:0 0 5px; }
/* #9 — business NAME larger/bolder on phone (the desktop text-sm is intentionally overridden here only) */
.slate-root.is-mobile .tbl tbody td.td-primary .font-medium.text-sm{ font-size:16px; font-weight:600; line-height:1.25; }
.slate-root.is-mobile .tbl tbody td::before{ font-size:10px; }
.slate-root.is-mobile .tbl tbody td[data-label="Issues"]{ display:none; }
/* #6 — reserve bottom space (+ safe-area) so the FAB never overlaps the last card */
.slate-root.is-mobile{ padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
/* #7 — Filters render as a bottom sheet on a phone (toggled by the Filters button), 2-col grid */
.slate-root.is-mobile .mobile-filter-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:55; margin:0; border:0; border-top:1px solid var(--border);
  border-radius:18px 18px 0 0; background:var(--panel); box-shadow:0 -14px 44px -10px rgba(0,0,0,.32);
  max-height:80vh; overflow-y:auto; padding:16px 16px calc(18px + env(safe-area-inset-bottom)); }
.slate-root.is-mobile .mobile-filter-sheet > .grid{ grid-template-columns:1fr 1fr !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Phase-3 Slice #1 (operator-directed) — MOBILE POLISH PASS, My Listings first.
   Operator verdict on the phone: "a compressed desktop layout, not the approved
   mock." Every rule below is gated to .is-mobile — desktop is byte-identical.
   ══════════════════════════════════════════════════════════════════════════ */
/* #1 — compact header: ≤2-line title (clamp), tighter padding. The crowding
   header pills (API counter, Export) are hidden via .desktop-only in markup;
   the account switcher moved into the drawer (final pass block below), so the
   20px frozen-spec title keeps the full header width. */
.slate-root.is-mobile .topbar{ padding:10px 14px; }
.slate-root.is-mobile .tb-title h1{ font-size:20px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* #2/#7 — the KPI pill strip hugs its content (wrapper's desktop mb-6 is too tall on phone) */
.slate-root.is-mobile .kpi-wrap{ margin-bottom:10px; }
/* #3 — search/filter card: one ~44px row (search grows, Filters sits beside it), minimal chrome */
.slate-root.is-mobile .listings-tools{ padding:10px; margin-bottom:10px; }
.slate-root.is-mobile .listings-tools .toolrow{ margin-bottom:0; gap:8px; }
.slate-root.is-mobile .listings-tools .toolrow .search{ flex:1 1 auto; min-width:150px; min-height:44px; padding:6px 12px; }
/* #4/#5 — DENSE cards: fields pack into a two-column grid inside the card
   (label above value); name row stays the full-width title. Tighter paddings. */
.slate-root.is-mobile .tbl tbody tr{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 12px; padding:10px 12px; margin:0 0 8px; }
.slate-root.is-mobile .tbl tbody td{ flex:1 1 calc(50% - 6px); min-width:0; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; padding:3px 0 !important; }
.slate-root.is-mobile .tbl tbody td.td-primary{ flex:1 1 100%; padding:0 0 6px !important; margin:0 0 3px; }
.slate-root.is-mobile .tbl tbody td[colspan]{ flex:1 1 100%; display:block; }
/* #6/#7 — the dashboard content wrapper (Tailwind .p-6 under .main) tightens on phone AND
   reserves FAB clearance (+ iOS safe area) so the last card is never covered. The .main column
   is the single scroller (index.css Part F), so the padding must live HERE, not on the root. */
.slate-root.is-mobile .main > .p-6{ padding:12px 12px calc(86px + env(safe-area-inset-bottom)); }
/* native-app feel: a table panel drops its outer chrome on phones — the cards sit directly on
   the canvas (frozen phone frames) instead of "cards inside a white box". The bottom pagination
   bar becomes its own small card (!important needed: the page sets an inline border override). */
.slate-root.is-mobile .panel:has(> .tscroll){ background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible; }
.slate-root.is-mobile .panel:has(> .tscroll) > .tbl-head{ background:var(--panel); border:1px solid var(--border) !important; border-radius:var(--r-card); box-shadow:var(--sh-sm); }
.slate-root.is-mobile .tbl-head{ padding:10px 12px; }

/* ── Phase-3 Slice #1 FOLLOW-UP — cross-page sweep fixes @390 (all .is-mobile-gated;
      desktop byte-identical). Sweep numbering below matches the defect report. ── */
/* Sweep #2 — topbar title clipped ("Biz…Ac"): tabs with extra header buttons (e.g. Users'
   Add User) starved the h1 column to nothing, so the 2-line clamp ellipsized mid-string.
   Guarantee the title a real column, let long titles wrap INSIDE the clamp, and let the
   right cluster wrap onto a second header row instead of shoving the title out. */
.slate-root.is-mobile .tb-title{ min-width:9.5rem; }
.slate-root.is-mobile .tb-title h1{ overflow-wrap:anywhere; }
.slate-root.is-mobile .topbar-right{ flex:0 1 auto; min-width:0; flex-wrap:wrap; justify-content:flex-end; row-gap:6px; }
/* Sweep #1 — OPT-IN mobile actions row (.tbl.tbl-mobile-act): tables whose ONLY management
   surface is the actions cell (Users / BizHub Access, Sub-Resellers ⋯ menu) keep td.td-act on
   phones as a full-width wrap-friendly button row at the card bottom (≥44px targets). The
   default .tbl still hides td-act (My Listings has the drawer; staging/indexing are desktop
   flows). Handlers untouched — presentation only. */
.slate-root.is-mobile .tbl.tbl-mobile-act tbody td.td-act{ display:flex; flex:1 1 100%; align-items:stretch; padding:8px 0 0 !important; margin-top:5px; border-top:1px solid var(--row-sep) !important; }
.slate-root.is-mobile .tbl.tbl-mobile-act tbody td.td-act::before{ display:none; }
.slate-root.is-mobile .tbl.tbl-mobile-act tbody td.td-act > div{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; }
/* neutralize Tailwind space-x-* inside the row so wrapped lines align (gap does the spacing) */
.slate-root.is-mobile .tbl.tbl-mobile-act tbody td.td-act > div > :not([hidden]){ margin:0; }
.slate-root.is-mobile .tbl.tbl-mobile-act tbody td.td-act .btn,
.slate-root.is-mobile .tbl.tbl-mobile-act tbody td.td-act .iconbtn{ flex:1 1 auto; min-height:44px; }
/* Sweep #3a — Listing Integrity header actions (own SlateRoot; ig-actions marker div in
   IntegrityDashboard.tsx): stack the cluster under the title as a wrapping row — kills the
   263px header h-scroll. The long version badge may wrap too.
   Desktop: display:contents makes the marker div render-neutral (children stay direct
   flex items of .topbar-right — desktop pixels unchanged). */
.slate-root .ig-actions{ display:contents; }
.slate-root.is-mobile .topbar:has(.ig-actions){ flex-wrap:wrap; }
.slate-root.is-mobile .topbar-right:has(> .ig-actions){ flex:1 1 100%; margin-left:0; justify-content:flex-start; }
.slate-root.is-mobile .ig-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; min-width:0; }
.slate-root.is-mobile .ig-actions .status{ white-space:normal; }
/* Sweep #4 — Quick Entry toolbar rows (qe-actions marker): wrap instead of 38px page h-scroll */
.slate-root.is-mobile .qe-actions{ flex-wrap:wrap; gap:8px; }
.slate-root.is-mobile .qe-actions > :not([hidden]){ margin-left:0; }
/* Sweep #5 — Sub-Resellers page header (subres-head marker): title + action cluster wrap */
.slate-root.is-mobile .subres-head{ flex-wrap:wrap; gap:10px; }
.slate-root.is-mobile .subres-head > div{ flex-wrap:wrap; row-gap:8px; }
/* Sweep #6 — card VALUE text bumps: 10px inline values ("Not sent", ↗ cue) and 11px .status
   chips (sync badge etc.) read too small on phones → ≥12px. The 10px eyebrow LABELS
   (td::before) keep the established scale — pseudo-elements are untouched by these. */
.slate-root.is-mobile .tbl tbody td .text-\[10px\]{ font-size:12px; }
.slate-root.is-mobile .tbl tbody td .status{ font-size:12px; }

/* ── Phase-3 FINAL PASS (operator freeze) — account switcher out of the phone header ──
   The switcher now lives at the TOP of the sidebar drawer on phones (its dropdown opens
   downward, so the foot would push it off-screen). Two wrapper markers in
   BirdeyeDashboard.tsx, both rendering the SAME <AccountSwitcher/> (shared AccountContext):
   · .acct-slot — header instance: display:contents on desktop (render-neutral — children stay
     direct flex items of .topbar-right, and a null render leaves no phantom gap slot),
     hidden on phones. Desktop pixels unchanged.
   · .sb-acct — drawer instance: hidden on desktop; :empty guard removes the wrapper (and its
     3px nav flex-gap) when the switcher renders null (non-super-admin / single account).
   The drawer trigger goes full-width ≥44px; the dropdown (absolute w-72 = 288px) pins to the
   wrapper width because the drawer (min(86vw,300px), overflow clipping) + .nav
   (overflow-x:hidden) would otherwise cut its left edge. */
.slate-root .acct-slot{ display:contents; }
.slate-root.is-mobile .acct-slot{ display:none; }
.slate-root .sb-acct{ display:none; }
.slate-root.is-mobile .sb-acct{ display:block; padding:2px 2px 8px; }
.slate-root.is-mobile .sb-acct:empty{ display:none; }
.slate-root.is-mobile .sb-acct .acct-switch{ width:100%; max-width:none; min-height:44px; }
.slate-root.is-mobile .sb-acct .top-full{ left:0; right:0; width:auto; }
/* P3 ③ Slice B — the drawer-rendered switcher trigger adopts the navy sidebar tone (same
   translucent white-on-navy as .side-actions buttons); the Tailwind light-gray pill read wrong
   on the navy drawer. CSS-only + drawer-scoped: the desktop header instance keeps its current
   look, and the OPEN dropdown panel stays light (floating light panels on the navy shell are
   the frozen pattern). The amber impersonation state keeps its warning signal as translucent
   amber-on-navy (targeted via its own state class so the base rule can't flatten it). */
.slate-root.is-mobile .sb-acct .acct-switch{ background:rgba(255,255,255,.06); border-color:var(--sb-border); color:var(--sb-text); }
.slate-root.is-mobile .sb-acct .acct-switch:hover{ background:var(--sb-hover); color:#fff; }
.slate-root.is-mobile .sb-acct .acct-switch > span:last-child{ color:rgba(255,255,255,.55); }
.slate-root.is-mobile .sb-acct .acct-switch.bg-amber-50{ background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.45); color:#FCD34D; }
.slate-root.is-mobile .sb-acct .acct-switch.bg-amber-50:hover{ background:rgba(245,158,11,.26); color:#FDE68A; }

/* ===== Tablet / small-desktop (901–1440, not phone) ==================== */
/* The persistent side-by-side inspector needs room; below 1440 stack it under the table
   (the table always wins the width). Phones use the .is-mobile rules above instead. */
@media (max-width:1440px){
  .slate-root:not(.is-mobile) .workspace{ grid-template-columns:1fr; }
  .slate-root:not(.is-mobile) .inspector{ position:static; }
}

/* ===== P3 ③ Slice B — visual consistency ================================ */

/* Canonical single-line field metrics — every slate text field / select / search is EXACTLY
   38px tall with the 8px control radius (TOKENS-SPEC: control 8). Previously these primitives
   used vertical padding + "font:inherit", so the SAME primitive measured 38–40px depending on
   the inherited font/line-height of the page context (Verify's toolbar hit 40px). Scoped to
   input/select so multi-line textareas (also .field-input) keep their flowing padding.
   Horizontal padding is inherited from the base rules; mobile overrides (e.g. the 44px
   .listings-tools tap target) still win on specificity. */
.slate-root input.field-input, .slate-root select.field-select{ height:38px; padding-top:0; padding-bottom:0; }
.slate-root .search{ height:38px; padding-top:0; padding-bottom:0; }
/* Quick-Entry spreadsheet EXCEPTION (P3 Slice B QA fix): the grid's SlateInput cells are
   intentionally dense (~30px via their inline 4px 8px padding — W9 byte-preservation). The
   38px normalization above must not grow them; height:auto restores the intrinsic size.
   The QE category cell keeps its own compact variant; standalone searches stay 38px. */
.slate-root .qe-grid input.field-input{ height:auto; }

/* 4c.5 — Integrity double-header. IntegrityDashboard renders its own nested SlateRoot +
   PageHeader INSIDE the app shell, so phones showed TWO headers (shell topbar + inner topbar)
   and TWO burgers — the inner burger controls no drawer (nested root has no sidebar). The
   shell topbar now carries the "Listing Integrity" title/subtitle (per-tab map in
   BirdeyeDashboard), so the inner header keeps ONLY its actions cluster (version badge /
   Export CSV / Export JSON / Run Audit) on every breakpoint — hiding it on mobile only would
   have introduced a NEW desktop double-title next to the now-filled shell h1. */
.slate-root .ig-pagehead .sb-burger{ display:none; }
.slate-root .ig-pagehead .tb-title{ display:none; }

/* ===== Reduced motion ================================================== */
@media (prefers-reduced-motion:reduce){ .slate-root *{ transition:none !important; animation:none !important; } }

/* ==========================================================================
   DARK THEME (Rule 7) — token swap only. Navy shell stays navy. Proves the
   library is themeable; light is the default until a theme toggle ships.
   ========================================================================== */
.slate-root[data-theme="dark"]{
  --ground:#0E1017; --panel:#171A21; --panel-2:#1C2029; --sunken:#12151C;
  --border:#262A34; --border-soft:#20242E; --border-strong:#333846;
  --row-sep:#22262F; --row-zebra:#191D25; --row-hover:#20242E; --row-sel:#232746;
  --ink:#F2F4F8; --ink-2:#C9CDD8; --muted:#9AA0AE; --faint:#6B7180;
  --accent-soft:#20264A; --accent-border:#333B6B;
  --ok-soft:#12241C; --ok-border:#204734; --warn-soft:#241E0E; --warn-border:#463A1A;
  --bad-soft:#2A1614; --bad-border:#4A211D; --live-soft:#201430; --live-border:#3A2555; --dup-soft:#201430;
  --info-soft:#14203A; --info-border:#22345C;
  --sh-card:0 1px 2px rgba(0,0,0,.4), 0 3px 8px -6px rgba(0,0,0,.5);
  --sh-panel:0 1px 3px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.6);
  --sh-pop:0 12px 32px -8px rgba(0,0,0,.7), 0 0 0 1px var(--border);
  background:linear-gradient(180deg,#0E1017 0%, #0A0C12 100%);
}
/* Self-hosted Inter (variable) — Wave 3 Phase A. Loaded but NOT applied to the body yet;
   pages adopt it during Wave-4 migration (via the Tailwind `font-inter`/`font-slate` families or
   var(--bh-font-ui)). @font-face only fetches the woff2 when an element actually uses the family,
   so this is dormant + zero-cost until adopted. */
/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #6366f1; /* indigo-500 (brand) */
    outline-offset: 2px;
    border-radius: 0.375rem;
  }
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
@media (min-width: 1960px) {
  .container {
    max-width: 1960px;
  }
}
@media (min-width: 2600px) {
  .container {
    max-width: 2600px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-4 {
  top: 1rem;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[200\] {
  z-index: 200;
}
.z-\[60\] {
  z-index: 60;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-mb-px {
  margin-bottom: -1px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-20 {
  margin-left: 5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-px {
  margin-top: 1px;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-8 {
  height: 2rem;
}
.h-full {
  height: 100%;
}
.max-h-24 {
  max-height: 6rem;
}
.max-h-32 {
  max-height: 8rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[calc\(100vh-14rem\)\] {
  max-height: calc(100vh - 14rem);
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-96 {
  width: 24rem;
}
.w-\[calc\(100vw-2rem\)\] {
  width: calc(100vw - 2rem);
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[130px\] {
  min-width: 130px;
}
.min-w-\[13rem\] {
  min-width: 13rem;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-32 {
  max-width: 8rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-40 {
  max-width: 10rem;
}
.max-w-48 {
  max-width: 12rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-64 {
  max-width: 16rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[20rem\] {
  max-width: 20rem;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[2400px\] {
  max-width: 2400px;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-\[8rem\] {
  max-width: 8rem;
}
.max-w-\[90px\] {
  max-width: 90px;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.origin-top {
  transform-origin: top;
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-help {
  cursor: help;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize {
  resize: both;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-red-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-divide-opacity, 1));
}
.self-center {
  align-self: center;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-lg {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r-0 {
  border-right-width: 0px;
}
.border-t {
  border-top-width: 1px;
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-cyan-200 {
  --tw-border-opacity: 1;
  border-color: rgb(165 243 252 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-50 {
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-indigo-400 {
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.border-orange-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 237 213 / var(--tw-border-opacity, 1));
}
.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-orange-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}
.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-400 {
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}
.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-teal-200 {
  --tw-border-opacity: 1;
  border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
}
.border-teal-600 {
  --tw-border-opacity: 1;
  border-color: rgb(13 148 136 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-yellow-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}
.\!bg-yellow-100 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)) !important;
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/40 {
  background-color: rgb(255 251 235 / 0.4);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-cyan-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(165 243 252 / var(--tw-bg-opacity, 1));
}
.bg-cyan-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.bg-cyan-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50\/40 {
  background-color: rgb(238 242 255 / 0.4);
}
.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-50\/30 {
  background-color: rgb(255 247 237 / 0.3);
}
.bg-orange-50\/40 {
  background-color: rgb(255 247 237 / 0.4);
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/40 {
  background-color: rgb(254 242 242 / 0.4);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}
.bg-teal-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-zinc-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-super {
  vertical-align: super;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[7px\] {
  font-size: 7px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-800\/60 {
  color: rgb(146 64 14 / 0.6);
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-700\/50 {
  color: rgb(29 78 216 / 0.5);
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-cyan-600 {
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.text-cyan-700 {
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}
.text-cyan-800 {
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}
.text-teal-800 {
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-indigo-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity, 1));
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[writing-mode\:vertical-rl\] {
  writing-mode: vertical-rl;
}
/* P4 cosmetics #4 (A-9): a consistent branded focus-visible ring for KEYBOARD users, app-wide.
   :focus-visible only (never on mouse click). Low-specificity :where() so component focus styles
   can still override. Gives every interactive element a visible keyboard-focus indicator. */
/* Part F: single primary scroll container. The app shell is h-screen (100vh) with one internal
   scroller (.flex-1.overflow-y-auto); pin the height chain + hide body overflow so the browser
   does NOT add a second page scrollbar. */
html, body, #root {
  height: 100%;
  overflow: hidden; /* the single primary scroller is the in-app content area (.flex-1.overflow-y-auto) */
}
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
/* Google Places Autocomplete dropdown - fix z-index */
.pac-container {
  z-index: 99999 !important;
  pointer-events: auto !important;
}
.pac-item {
  cursor: pointer !important;
  pointer-events: auto !important;
}
.pac-item:hover {
  background-color: #f0f0f0;
}
/* ============================================================================
   V2 "Slate & Signal" design tokens — Wave 3 Phase A (DORMANT).
   CSS-variable layer for the frozen design system. Nothing consumes these yet;
   they are the single source of truth for Wave-4 page migration and set up
   dark-mode theming later (a future [data-theme="dark"] block re-declares them).
   Values mirror docs/design/TOKENS-SPEC.md + docs/design/DESIGN-PRINCIPLES.md.
   NOTE: prefixed --bh-* to avoid any collision with existing V1-cloned styles.
   ============================================================================ */
:root {
  /* type */
  --bh-font-ui: 'Inter Variable', Inter, ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bh-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  /* neutrals (cool graphite, biased toward the iris accent) */
  --bh-ground-top: #F7F9FD; --bh-ground-bottom: #F0F3F9;
  --bh-panel: #FFFFFF; --bh-panel-2: #FCFCFD; --bh-sunken: #F2F4F7;
  --bh-border: #E9EBF0; --bh-border-soft: #EFF0F4; --bh-border-strong: #DADDE4;
  --bh-row-sep: #E3E5EC; --bh-row-zebra: #FBFBFD; --bh-row-hover: #ECEEF4; --bh-row-sel: #E1E4FE;
  --bh-ink: #12141A; --bh-ink-2: #33363F; --bh-muted: #5C5F6A; --bh-faint: #969AA6;

  /* single "signal" accent — iris */
  --bh-accent: #4B57F0; --bh-accent-2: #5A66FF; --bh-accent-ink: #3A44D4;
  --bh-accent-soft: #EEF0FE; --bh-accent-border: #C9CEFB;

  /* semantic (separate from the accent) — solid / soft / border */
  --bh-ok: #0E8A5C; --bh-ok-soft: #E5F3EC; --bh-ok-border: #BEE3CF;
  --bh-warn: #996A00; --bh-warn-soft: #F8F0D8; --bh-warn-border: #E9D7A3;
  --bh-bad: #C6362E; --bh-bad-soft: #FBEAE8; --bh-bad-border: #F1C9C5;
  --bh-live: #7B3EC1; --bh-live-soft: #F2ECFB; --bh-live-border: #DEC9F0;
  --bh-info: #2563EB; --bh-info-soft: #EAF0FE; --bh-info-border: #C6D6FA;
  --bh-dup: #7B3EC1; --bh-dup-soft: #F2ECFB;

  /* navy shell */
  --bh-nav-top: #223A5A; --bh-nav-bottom: #1B2C48; --bh-nav-line: #14223A;
  --bh-nav-text: rgba(255,255,255,.82); --bh-nav-muted: rgba(255,255,255,.52);
  --bh-nav-icon: rgba(255,255,255,.70); --bh-nav-hover: rgba(255,255,255,.08); --bh-nav-border: rgba(255,255,255,.09);

  /* radius / shadow / motion */
  --bh-r-panel: 12px; --bh-r-card: 10px; --bh-r-ctrl: 8px; --bh-r-chip: 7px; --bh-r-badge: 6px; --bh-r-pill: 999px;
  --bh-sh-sm: 0 1px 2px rgba(18,20,30,.04);
  --bh-sh-card: 0 1px 2px rgba(18,20,30,.04), 0 3px 8px -6px rgba(18,20,30,.07);
  --bh-sh-panel: 0 1px 3px rgba(18,20,30,.04), 0 8px 22px -12px rgba(18,20,30,.12);
  --bh-sh-pop: 0 12px 32px -8px rgba(18,20,30,.22);
  --bh-sh-primary: 0 1px 2px rgba(53,63,205,.28), 0 6px 16px -6px rgba(53,63,205,.48), inset 0 1px 0 rgba(255,255,255,.22);
  --bh-tr: 150ms cubic-bezier(.2,.7,.2,1); --bh-tr-fast: 110ms cubic-bezier(.2,.7,.2,1);

  /* spacing scale (4/8/12/16/20/24/28/32) + layout constants */
  --bh-s1: 4px; --bh-s2: 8px; --bh-s3: 12px; --bh-s4: 16px; --bh-s5: 20px; --bh-s6: 24px; --bh-s7: 28px; --bh-s8: 32px;
  --bh-gap-section: 24px;
  --bh-sidebar-w: 198px; --bh-sidebar-collapsed: 62px; --bh-inspector-w: 372px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 116 144 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.hover\:bg-teal-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
.hover\:bg-teal-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-teal-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(161 98 7 / var(--tw-bg-opacity, 1));
}
.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.hover\:text-green-700:hover {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.hover\:text-purple-900:hover {
  --tw-text-opacity: 1;
  color: rgb(88 28 135 / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-600:hover {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:border-cyan-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}
.focus\:border-green-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.focus\:border-purple-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-cyan-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(6 182 212 / var(--tw-ring-opacity, 1));
}
.focus\:ring-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
.focus\:ring-purple-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}
.focus-visible\:bg-gray-100:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.focus-visible\:bg-red-50:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}
.focus-visible\:ring-indigo-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity, 1));
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-gray-100:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-gray-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-gray-400:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.disabled\:text-gray-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.disabled\:text-gray-500:disabled {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group\/quota[open] .group-open\/quota\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/addr:hover .group-hover\/addr\:text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media (min-width: 640px) {
  .sm\:max-w-\[440px\] {
    max-width: 440px;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:inline {
    display: inline;
  }
  .md\:flex {
    display: flex;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .lg\:inline {
    display: inline;
  }
  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {
  .\32xl\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1960px) {
  .min-\[1960px\]\:block {
    display: block;
  }
  .min-\[1960px\]\:flex {
    display: flex;
  }
  .min-\[1960px\]\:hidden {
    display: none;
  }
  .min-\[1960px\]\:w-\[420px\] {
    width: 420px;
  }
  .min-\[1960px\]\:min-w-0 {
    min-width: 0px;
  }
  .min-\[1960px\]\:flex-1 {
    flex: 1 1 0%;
  }
  .min-\[1960px\]\:shrink-0 {
    flex-shrink: 0;
  }
  .min-\[1960px\]\:items-start {
    align-items: flex-start;
  }
  .min-\[1960px\]\:gap-5 {
    gap: 1.25rem;
  }
}
@media (min-width: 2600px) {
  .min-\[2600px\]\:w-\[480px\] {
    width: 480px;
  }
  .min-\[2600px\]\:max-w-\[3400px\] {
    max-width: 3400px;
  }
}