/* Shopleton admin dashboard — canonical stylesheet. Tokens per design/.
   design/ (style.css + elements.html + the reference HTML) is the source of
   truth; this file is mirrored verbatim to public/css/style.css.
   Clean Operations language: Inter, white cards on a soft gray ground,
   thin borders, one orange accent, quiet semantics. Numbers never wrap;
   no emojis. Light/dark via [data-theme]. */

:root{
  /* ground + surfaces */
  --parchment:#F7F8F8; /* app background */ --paper:#FFFFFF; /* card surface */
  --ink:#202124; --ink-strong:#17191C; --graphite:#6B7078; --muted:#8A8F98;

  /* accent */
  --accent:#F47A20; --accent-hover:#E06A12; --accent-soft:#F9A969;
  --on-accent:#FFFFFF;

  /* lines */
  --hairline:#E1E3E6;       /* cards, sidebar, topbar */
  --hairline-soft:#ECEDEF;  /* row dividers, soft rules */
  --control-border:#D9DCE1; /* inputs, buttons */

  /* semantics */
  --error:#D9414E; --success:#2FA77A; --warning:#F2A33A; --info:#4A78C2;
  --ok-soft:rgba(47,167,122,.09);  --ok-line:rgba(47,167,122,.25);  --ok-text:#1E7A57;
  --err-soft:rgba(217,65,78,.08);  --err-line:rgba(217,65,78,.22);  --err-text:#B23341;
  --warn-soft:rgba(242,163,58,.12);--warn-line:rgba(242,163,58,.3); --warn-text:#96691E;
  --info-soft:rgba(74,120,194,.08);--info-line:rgba(74,120,194,.22);--info-text:#3A619F;

  /* sidebar */
  --sidebar-bg:#F0F1F3; --sidebar-border:#E1E3E6; --sidebar-text:#34373C;
  --sidebar-muted:#73777E; --sidebar-hover:#E7E8EB; --sidebar-active:#DCDDE1;

  /* misc */
  --row-hover:#F8F9FA; --chip-bg:#EFF0F2; --scrollbar:#C9CDD3;
  --alarm-bg:#F2CFCB;

  /* shape + motion */
  --topbar-h:56px; --radius-card:10px; --radius-ctl:7px; --radius-sm:6px;
  --shadow-card:0 1px 2px rgba(16,18,20,.04);
  --focus-ring:0 0 0 2px rgba(244,122,32,.22); --focus-ring-soft:0 0 0 2px rgba(244,122,32,.12);
}
:root[data-theme="dark"]{
  --parchment:#131417; --paper:#1B1D21; --ink:#E8EAED; --ink-strong:#F1F2F4;
  --graphite:#9AA0A6; --muted:#6E7378;
  --accent:#F58A3C; --accent-hover:#FF9D57; --accent-soft:#B96A2E; --on-accent:#FFFFFF;
  --hairline:#33363C; --hairline-soft:#2A2C31; --control-border:#3D4046;
  --error:#E56570; --success:#4ABE8E; --warning:#F5B45E; --info:#6B95D6;
  --ok-soft:rgba(74,190,142,.12);  --ok-line:rgba(74,190,142,.28);  --ok-text:#7BD8AF;
  --err-soft:rgba(229,101,112,.12);--err-line:rgba(229,101,112,.3);  --err-text:#EE9AA1;
  --warn-soft:rgba(245,180,94,.12);--warn-line:rgba(245,180,94,.3);  --warn-text:#F0C088;
  --info-soft:rgba(107,149,214,.12);--info-line:rgba(107,149,214,.3);--info-text:#9FBBE8;
  --sidebar-bg:#17181B; --sidebar-border:#2A2C31; --sidebar-text:#DCDEE1;
  --sidebar-muted:#8A8F98; --sidebar-hover:#242629; --sidebar-active:#2F3134;
  --row-hover:#222428; --chip-bg:#26282C; --scrollbar:#3E4248;
  --alarm-bg:#4A1F1B;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overscroll-behavior:none}
body{
  background:var(--parchment); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--topbar-h);
}
::selection{background:rgba(244,122,32,.18)}
.num{font-variant-numeric:tabular-nums lining-nums; white-space:nowrap}
td.num,th.num{text-align:right}
.caps{font-size:12px; font-weight:500; letter-spacing:.01em}
h1{font-weight:600; font-size:26px; line-height:1.25; letter-spacing:-.01em; margin:0 0 4px; color:var(--ink-strong)}
h2{font-weight:600; font-size:16px; line-height:1.35; margin:0 0 16px; color:var(--ink-strong)}

/* Top bar — fixed; body is offset --topbar-h so content clears it. */
.topbar{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; gap:16px; height:var(--topbar-h); padding:0 24px; border-bottom:1px solid var(--hairline); background:var(--parchment)}
.wordmark{font-weight:600; font-size:15px; letter-spacing:-.01em}
.wordmark .dot{color:var(--accent)}

a.wordmark{color:inherit; text-decoration:none}

/* Selected-manufacturer indicator — sits in the topbar next to the wordmark
   (switching happens on the manufacturers picker page). */
.scope-now{display:inline-flex; align-items:baseline; gap:8px; margin-left:12px; padding-left:12px; border-left:1px solid var(--hairline)}
.scope-now .caps{font-size:10px; letter-spacing:.08em}
.scope-now strong{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px}
.topbar .spacer{flex:1}
.role{display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--radius-sm); background:var(--chip-bg); color:#5F646C; font-size:12px; font-weight:500}
.user{color:var(--ink); font-size:13px; text-overflow:ellipsis; display:inline-flex; align-items:center; gap:6px}
.user svg{color:var(--graphite)}

/* Buyer session topbar — the lead dropdown (no user chip: larger name,
   menu panel). The powered-by block reuses .scope-now above. */
/* Plain link — inherits surrounding color, no underline/UA blue. */
.plain{color:inherit; text-decoration:none}

.menu{position:relative; display:inline-flex}
.menu summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--ink); padding:6px 10px; border-radius:var(--radius-ctl); border:1px solid transparent; white-space:nowrap}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--control-border); background:var(--paper)}
.menu-panel{position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:200px; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:6px}
.menu-item{display:flex; align-items:center; width:100%; min-height:36px; padding:0 10px; border-radius:var(--radius-sm); font:inherit; font-size:13px; color:var(--ink); background:none; border:none; cursor:pointer; text-align:left; text-decoration:none; white-space:nowrap}
.menu-item:hover{background:var(--chip-bg)}


/* Language / theme switcher — quiet segmented control on white. */
.lang{display:inline-flex; border:1px solid var(--control-border); border-radius:var(--radius-ctl); overflow:hidden; background:var(--paper)}
.lang button,.lang a{font:inherit; background:transparent; border:0; padding:6px 10px; min-height:30px; color:var(--graphite); cursor:pointer; font-size:12px; font-weight:500; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:background-color .12s,color .12s}
.lang button:hover,.lang a:hover{background:var(--row-hover); color:var(--ink)}
.lang button[aria-pressed="true"],.lang a[aria-pressed="true"]{background:var(--sidebar-active); color:var(--ink-strong)}
.lang button + button,.lang a + a{border-left:1px solid var(--hairline-soft)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--control-border); background:var(--paper); color:var(--ink); height:36px; padding:0 14px; border-radius:var(--radius-ctl); white-space:nowrap; text-decoration:none; transition:background-color .12s,border-color .12s,color .12s}
.btn:hover{background:var(--row-hover); border-color:#C6CBD1}
:root[data-theme="dark"] .btn:hover{border-color:#4A4E55}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent)}
.topbar .btn{height:32px; padding:0 10px}
.btn-icon{width:32px; height:32px; padding:0}

/* Shell — grey sidebar rail + white workspace. */
.shell{display:grid; grid-template-columns:260px minmax(0,1fr); min-height:calc(100vh - var(--topbar-h))}
.rail{background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border); padding:20px 12px; position:sticky; top:var(--topbar-h); align-self:start; height:calc(100vh - var(--topbar-h)); overflow:auto}
.rail .group h3{margin:20px 0 6px; padding:0 12px; font-size:12px; font-weight:600; color:var(--sidebar-muted); opacity:.5}
.rail .group:first-child h3{margin-top:0}
.rail a{display:flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; border-radius:var(--radius-ctl); color:var(--sidebar-muted); text-decoration:none; font-size:13px; transition:background-color .12s,color .12s}
.rail a:hover{background:var(--sidebar-hover); color:var(--sidebar-text)}
.rail a.active{background:var(--sidebar-active); color:var(--sidebar-text); font-weight:500}

.main{padding:24px 32px 64px; min-width:0; max-width:1600px}

/* Telemetry strip — three quiet cards. */
.telemetry{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px}
.dag{background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:16px; box-shadow:var(--shadow-card)}
.dag-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.dag-name{font-size:14px; font-weight:600; color:var(--ink-strong)}
.dag-meta{display:grid; grid-template-columns:repeat(2,1fr); gap:4px 16px; font-size:13px; color:var(--graphite)}
.dag-meta .k{color:var(--muted)}
.dag-tasks{margin-top:10px; display:flex; gap:6px; flex-wrap:wrap}

.dot{display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle}
.dot.running{background:var(--accent)} .dot.success{background:var(--success)}
.dot.failed{background:var(--error)} .dot.warning{background:var(--warning)} .dot.idle{background:var(--muted)}
.badge{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--radius-sm); background:var(--chip-bg); color:#4E535B; font-size:12px; font-weight:500; white-space:nowrap}
:root[data-theme="dark"] .badge{color:#B9BDC4}

/* KPI grid — metric cards. */
.kpis{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:16px; margin-bottom:24px}
.kpi{background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:20px; box-shadow:var(--shadow-card)}
.kpi .label{color:var(--graphite); font-size:13px; font-weight:500; margin-bottom:8px}
.kpi .val{font-size:32px; font-weight:600; line-height:1.1; color:var(--ink-strong); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums}
.kpi .delta{color:var(--muted); font-size:12.5px; margin-top:6px}
a.kpi{color:inherit; text-decoration:none; transition:border-color .12s}
a.kpi:hover{border-color:#C6CBD1}
:root[data-theme="dark"] a.kpi:hover{border-color:#4A4E55}

/* Cards / tables */
.card{background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:20px; margin-bottom:24px; overflow-x:auto; box-shadow:var(--shadow-card)}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px}
.card-head h2{margin:0}
table{width:100%; max-width:100%; border-collapse:collapse; font-size:13px}
th{font-size:12px; font-weight:500; color:var(--graphite); background:var(--row-hover); text-align:left; padding:10px 12px; border-bottom:1px solid var(--hairline-soft); white-space:nowrap}
td{padding:13px 12px; border-bottom:1px solid var(--hairline-soft); vertical-align:middle; white-space:nowrap; font-variant-numeric:tabular-nums}
td small{white-space:normal; display:block; min-width:200px; color:var(--muted); font-size:12px; margin-top:2px}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--row-hover)}
td.r,th.r{text-align:right}
.card > table th:first-child,.card > table td:first-child{padding-left:20px}
.card > table th:last-child,.card > table td:last-child{padding-right:20px}
.muted{color:var(--muted)} .graphite{color:var(--graphite)}
.slug{color:var(--graphite); font-size:12.5px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px}

/* Pipeline table — sticky header row + sticky first column; 7-day delta chips. */
.pipe-wrap{overflow:auto; border-top:1px solid var(--hairline-soft)}
.pipe{border-collapse:separate; border-spacing:0; width:100%; min-width:880px}
.pipe thead th{position:sticky; top:0; z-index:2; background:var(--paper)}
.pipe th,.pipe td{padding:12px 14px; border-bottom:1px solid var(--hairline-soft); white-space:nowrap; text-align:left}
.pipe th.r,.pipe td.r{text-align:right}
.pipe tbody tr:hover{background:var(--row-hover)}
.pipe td.name,.pipe th.name{position:sticky; left:0; z-index:1; background:var(--paper)}
.pipe thead th.name{z-index:3}
.pipe tbody tr:hover td.name{background:var(--row-hover)}
.mfg{color:var(--ink-strong); text-decoration:none; font-weight:500}
.mfg:hover{color:var(--accent)}
.d{font-size:12px; font-weight:500; margin-left:6px; font-variant-numeric:tabular-nums}
.d.pos{color:var(--success)} .d.neg{color:var(--error)} .d.zero{color:var(--muted)}
.hint{color:var(--graphite); font-size:14px; margin:0 0 20px}

/* Collapsible nav */
.menu-toggle{display:none; align-items:center; justify-content:center; width:32px; height:32px; padding:0; background:transparent; border:1px solid var(--control-border); border-radius:var(--radius-ctl); color:var(--ink); cursor:pointer}
.menu-toggle svg{display:block}
.rail-tools{display:none}
@media(max-width:1024px){
  .menu-toggle{display:inline-flex}
  .shell{grid-template-columns:1fr}
  .rail{display:none; position:fixed; top:var(--topbar-h); left:0; right:0; z-index:30; max-height:calc(100vh - var(--topbar-h)); overflow:auto; background:var(--sidebar-bg); border-right:0; border-bottom:1px solid var(--sidebar-border); padding:8px 12px 16px}
  .rail.open{display:block}
  .rail .group h3{padding:0}
}
@media(max-width:720px){
  .telemetry{grid-template-columns:1fr}
  .kpis{grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .topbar .user,.topbar .lang{display:none}
  .rail-tools{display:block; margin-top:16px; padding-top:16px; border-top:1px solid var(--sidebar-border)}
  .rail-tools .lang{display:flex; width:100%}
  .rail-tools .lang button,.rail-tools .lang a{flex:1}
}

/* Auth / forms — .auth centers a short card in the region below the
   topbar (vertically + horizontally); .centered is the general case where
   the child sets its own max-width. margin:auto on the flex child keeps tall
   content scrollable without clipping the top. */
.auth{min-height:calc(100vh - var(--topbar-h)); display:flex; padding:40px 24px}
.auth > .card{margin:auto; width:100%; max-width:400px; padding:28px}
.centered{min-height:calc(100vh - var(--topbar-h)); display:flex; padding:40px 24px}
.centered > *{margin:auto; width:100%}
.auth-avatar{width:48px; height:48px; border-radius:50%; background:var(--chip-bg); color:var(--graphite); display:flex; align-items:center; justify-content:center; margin:0 auto 16px}
.auth-avatar svg{width:24px; height:24px}
.auth h1{text-align:center; margin:0 0 4px}
.auth .sub{text-align:center; color:var(--graphite); margin:0 0 24px; font-size:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field + .field{margin-top:16px}
.field + .btn,
.form-grid2 + .btn{margin-top:16px}
.field label{color:var(--graphite); font-size:13px; font-weight:500}
.input{font:inherit; font-size:14px; background:var(--paper); color:var(--ink); border:1px solid var(--control-border); border-radius:var(--radius-ctl); padding:0 12px; width:100%; height:38px; transition:border-color .12s,box-shadow .12s}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus-ring-soft)}
/* unified focus ring — kill the browser blue outline on every focusable
   element (mouse or keyboard); show a soft accent halo for keyboard focus
   only (:focus-visible). */
:focus{outline:none}
:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.btn-block{display:flex; width:100%; text-align:center; margin-top:24px}
.form-foot{text-align:center; margin-top:16px; font-size:13px}
.link{color:var(--info); text-decoration:none; white-space:nowrap}
.link:hover{text-decoration:underline}

/* --- app states: flashes, empty, divider --- */
.flash-error{background:var(--err-soft); border:1px solid var(--err-line); color:var(--err-text); border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:13px}
.flash-ok{background:var(--ok-soft); border:1px solid var(--ok-line); color:var(--ok-text); border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:13px}
.empty{color:var(--muted); padding:40px 24px; text-align:center}
.topbar form{margin:0}
.divider{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:12px; letter-spacing:.04em}
.divider::before,.divider::after{content:""; height:1px; background:var(--hairline-soft); flex:1}

/* --- form additions: textarea, field help/error, disabled/readonly, choices --- */
.form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field + .form-grid2,
.form-grid2 + .field,
.form-grid2 + .form-grid2{margin-top:16px}
.form-grid2 .field + .field{margin-top:0}
.form-grid2 .field{overflow:auto}
.kpis.cols-auto{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:720px){ .form-grid2{grid-template-columns:1fr} .form-grid2 .field + .field{margin-top:16px} }
textarea.input{resize:vertical; min-height:84px; line-height:1.5; padding:10px 12px; height:auto}
.field .help{color:var(--muted); font-size:12px}
.field .err{color:var(--error); font-size:12px; font-weight:500}
.field.has-error .input{border-color:var(--error)}
.field.has-error .input:focus{box-shadow:0 0 0 2px rgba(217,65,78,.12)}
.input:disabled,.input[readonly]{opacity:.55; cursor:not-allowed}
.checks{display:flex; flex-direction:column; gap:8px}
.check-row{display:flex; gap:24px; flex-wrap:wrap}
.check{display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:13px}
input[type="checkbox"],input[type="radio"]{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin:0; flex:0 0 auto;
  border:1px solid var(--control-border); background:var(--paper); cursor:pointer;
  transition:background-color .12s,border-color .12s;
}
input[type="checkbox"]{ border-radius:4px }
input[type="radio"]{ border-radius:50% }
input[type="checkbox"]:checked{
  border-color:var(--accent);
  background-color:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 9 17 20 6'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:11px 11px;
}
input[type="radio"]:checked{
  border-color:var(--accent);
  background-image:radial-gradient(circle at center, var(--accent) 0 4px, transparent 4px);
}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{ outline:none; box-shadow:var(--focus-ring) }
input[type="checkbox"]:disabled,input[type="radio"]:disabled{ opacity:.5; cursor:not-allowed }

/* --- account list (lead-search Accounts tab) --- */
.accountList > span{ display:block; margin:5px 0 }
.accountList > span > input[type="checkbox"]{ vertical-align:middle; margin-bottom:2px }

/* --- system alarm — full-page warning flash. Toggle .alarm on <body>. --- */
body.alarm{background:var(--alarm-bg); animation:alarm-flash 0.9s ease-out infinite}
@keyframes alarm-flash{0%,100%{background:var(--alarm-bg)}50%{background:var(--parchment)}}
@media (prefers-reduced-motion:reduce){body.alarm{animation:none}}

/* --- components: scrollbars, overlay/dialog, progress, spinner, gallery +
     lightbox, toast, pagination, truncation, alerts, map, tabs. All reuse the
     tokens; each motion control respects prefers-reduced-motion. --- */

/* quiet scrollbars — thin, rounded, barely there. */
*{scrollbar-width:thin; scrollbar-color:var(--scrollbar) transparent}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--scrollbar); border-radius:999px; border:3px solid transparent; background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--accent-soft); border:3px solid transparent; background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}
.scroll-micro{scrollbar-width:thin; scrollbar-color:var(--scrollbar) transparent}

/* overlay + dialog — .overlay is the scrim; nest a .card to build a dialog.
   Closes on backdrop click, [data-dialog-close], or Esc. */
.overlay{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(16,18,20,.45)}
:root[data-theme="dark"] .overlay{background:rgba(0,0,0,.6)}
.overlay[hidden]{display:none}
.overlay .card{max-width:440px; width:100%; margin:0}
.dialog-body{color:var(--graphite); margin:0 0 4px}
.dialog-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:24px}

/* progress — slim rounded track. Determinate: set width on the inner span.
   .indeterminate slides a 40% block. */
.progress{display:block; height:8px; border-radius:999px; background:var(--hairline-soft); overflow:hidden}
.progress > span{display:block; height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .2s ease}
.progress.indeterminate > span{width:40%; animation:progress-slide 1.2s ease-in-out infinite}
@keyframes progress-slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){.progress.indeterminate > span{animation:none; width:100%; opacity:.5}}

/* spinner — quiet ring. Sizing via sm/lg/xl. Inherits text color, so it is
   visible on .btn and .btn-primary alike. */
.spinner-dots{display:inline-block; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; color:var(--accent); animation:spinner-rotate .7s linear infinite}
.spinner-dots.sm{width:14px; height:14px; border-width:2px}
.spinner-dots.lg{width:24px; height:24px; border-width:2.5px}
.spinner-dots.xl{width:32px; height:32px; border-width:3px}
@keyframes spinner-rotate{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner-dots{animation:none; opacity:.55}}
.spinner-dots.btn-spinner{color:inherit; border-color:currentColor; border-right-color:transparent}

/* gallery + lightbox. Square cover-fit thumbnails; click opens full view. */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px}
.thumb{display:block; width:100%; aspect-ratio:1/1; padding:0; border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--paper); overflow:hidden; cursor:pointer}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb:hover{border-color:var(--accent)}
.lightbox{margin:0; max-width:min(90vw,960px); display:flex; flex-direction:column; gap:10px; align-items:center}
.lightbox img{display:block; max-width:100%; max-height:78vh; border-radius:var(--radius-sm)}
.lightbox figcaption{color:rgba(255,255,255,.8); text-align:center; font-size:13px}
.lightbox-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%}
.lightbox-bar .caps{color:rgba(255,255,255,.8)}
.lightbox-bar button{background:transparent; border:0; padding:0; color:rgba(255,255,255,.8); cursor:pointer}
.lightbox-bar button:hover{color:#FFFFFF}
.lightbox-nav{display:flex; align-items:center; gap:12px}

/* toast — stacked bottom-right, auto-dismiss. Variants tint the icon. */
.toast-wrap{position:fixed; right:24px; bottom:24px; z-index:60; display:flex; flex-direction:column; gap:8px; max-width:340px}
.toast{display:flex; gap:10px; align-items:flex-start; background:var(--paper); border:1px solid var(--hairline); border-radius:8px; box-shadow:0 4px 16px rgba(16,18,20,.08); padding:12px 14px; animation:toast-in .16s ease-out}
.toast .toast-icon{flex:0 0 auto; display:flex}
.toast .toast-body{flex:1; min-width:0}
.toast .toast-title{font-weight:600; font-size:13px; margin-bottom:2px}
.toast .toast-msg{color:var(--graphite); font-size:13px}
.toast .toast-close{flex:0 0 auto; background:transparent; border:0; padding:0; color:var(--graphite); cursor:pointer}
.toast .toast-close:hover{color:var(--ink)}
.toast.t-error .toast-icon{color:var(--error)}
.toast.t-success .toast-icon{color:var(--success)}
.toast.t-warning .toast-icon{color:var(--warning)}
.toast.t-info .toast-icon{color:var(--info)}
@keyframes toast-in{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* pagination — segmented control. aria-current="page" marks the active page;
   [disabled] for the dead prev/next ends. */
.pagination{display:inline-flex; border:1px solid var(--control-border); border-radius:var(--radius-ctl); overflow:hidden; background:var(--paper); flex-wrap:wrap}
.pagination button,.pagination .ellipsis{font:inherit; background:transparent; border:0; padding:6px 10px; min-height:30px; min-width:34px; color:var(--graphite); cursor:pointer; font-size:12.5px; font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; justify-content:center; transition:background-color .12s,color .12s}
.pagination .ellipsis{cursor:default; letter-spacing:.1em}
.pagination button:hover:not([disabled]):not([aria-current="page"]){background:var(--row-hover); color:var(--ink)}
.pagination button[aria-current="page"]{background:var(--sidebar-active); color:var(--ink-strong); font-weight:500}
.pagination button[disabled]{opacity:.4; cursor:not-allowed}
.pagination button + button,.pagination .ellipsis + button,.pagination button + .ellipsis{border-left:1px solid var(--hairline-soft)}

/* truncation — block that takes its parent's width and ellipsizes overflow. */
.truncate{display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* alerts — full-width banners that live OUTSIDE cards (page/region top).
   The 3px left rail carries severity; .flash-* is the in-card variant. */
.alert{display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border:1px solid var(--hairline); border-left-width:3px; border-radius:8px; margin-bottom:16px; background:var(--paper)}
.alert[hidden]{display:none}
.alert .alert-icon{flex:0 0 auto; display:flex; color:var(--muted)}
.alert .alert-body{flex:1; min-width:0}
.alert .alert-title{font-weight:600; font-size:13px; margin-bottom:2px}
.alert .alert-msg{color:var(--graphite); margin:0; font-size:13px}
.alert .alert-close{flex:0 0 auto; background:transparent; border:0; padding:0; color:var(--graphite); cursor:pointer}
.alert .alert-close:hover{color:var(--ink)}
.alert.a-info{border-left-color:var(--info); background:var(--info-soft)} .alert.a-info .alert-icon{color:var(--info)}
.alert.a-success{border-left-color:var(--success); background:var(--ok-soft)} .alert.a-success .alert-icon{color:var(--success)}
.alert.a-warning{border-left-color:var(--warning); background:var(--warn-soft)} .alert.a-warning .alert-icon{color:var(--warning)}
.alert.a-error{border-left-color:var(--error); background:var(--err-soft)} .alert.a-error .alert-icon{color:var(--error)}

/* --- map — Leaflet restyled. Tiles keep natural color; zoom controls +
     attribution follow the quiet language. Markers use circleMarker so they
     pick up --accent instead of the default blue pin. --- */
.map{height:360px; border:1px solid var(--hairline); border-radius:var(--radius-card); overflow:hidden; background:var(--parchment)}
.leaflet-container{position:relative; z-index:0; background:var(--parchment); font:inherit}
.leaflet-bar{border:1px solid var(--control-border)!important; border-radius:var(--radius-sm)!important; box-shadow:0 1px 2px rgba(16,18,20,.08)!important}
.leaflet-bar a{background:var(--paper)!important; color:var(--ink)!important; border-bottom:1px solid var(--hairline-soft)!important; width:28px!important; height:28px!important; line-height:26px!important; font-family:inherit!important; font-size:15px!important; font-weight:500!important}
.leaflet-bar a:hover{background:var(--row-hover)!important; color:var(--ink)!important}
.leaflet-bar a:last-child{border-bottom:0!important}
.leaflet-control-attribution{background:var(--paper)!important; color:var(--muted)!important; font-size:9px!important; padding:1px 5px!important}
.leaflet-control-attribution a{color:var(--graphite)!important}
.leaflet-container a:focus-visible,.leaflet-bar a:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.map-readout{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px; padding:10px 12px; border:1px solid var(--hairline-soft); border-radius:8px; font-size:13px}

/* tabs — lightweight nav with a 2px accent indicator on the bottom edge.
   JS toggles aria-selected on the buttons and [hidden] on the panels. */
.tabs-nav{display:flex; gap:4px; border-bottom:1px solid var(--hairline); margin-bottom:20px; flex-wrap:wrap}
.tabs-nav button{font:inherit; font-size:13px; font-weight:400; background:transparent; border:0; border-bottom:2px solid transparent; padding:10px 14px; margin-bottom:-1px; color:var(--graphite); cursor:pointer; white-space:nowrap; transition:color .12s}
.tabs-nav button:hover{color:var(--ink)}
.tabs-nav button[aria-selected="true"]{color:var(--ink-strong); font-weight:500; border-bottom-color:var(--accent)}
.tab-panel[hidden]{display:none}
@media(max-width:720px){.tabs-nav{overflow-x:auto; flex-wrap:nowrap; white-space:nowrap}}

/* Airflow topbar indicator + pipelines page */
.af-indicator{display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 10px; border:1px solid var(--control-border); border-radius:var(--radius-ctl); background:var(--paper); color:var(--graphite); font-size:12px; font-weight:500}
.af-indicator .af-ic{display:none}
.af-indicator[data-state="running"]{background:var(--accent); border-color:var(--accent); color:#FFFFFF}
.af-indicator[data-state="running"] .af-ic-running{display:inline-block}
.af-indicator[data-state="paused"] .af-ic-paused{display:inline-block}
.af-indicator[data-state="failed"]{color:var(--error)}
.af-indicator[data-state="failed"] .af-ic-failed{display:inline-block}
.af-indicator[data-state="warning"]{color:var(--warning)}
.af-indicator[data-state="warning"] .af-ic-warning{display:inline-block}
.kpi-status .af-glyph{width:30px; height:30px; display:block}
.kpi-status[data-state="running"] .af-glyph,.kpi-status[data-state="running"] .delta{color:var(--accent)}
.kpi-status[data-state="paused"] .af-glyph,.kpi-status[data-state="paused"] .delta{color:var(--graphite)}
.kpi-status[data-state="failed"] .af-glyph,.kpi-status[data-state="failed"] .delta{color:var(--error)}
.kpi-status[data-state="warning"] .af-glyph,.kpi-status[data-state="warning"] .delta{color:var(--warning)}
.af-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--hairline-soft)}
.af-row:first-of-type{border-top:0}
.af-meta{color:var(--graphite); font-size:13px; margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.af-actions{display:flex; gap:8px; flex-shrink:0}
.af-msg{padding:16px 0; color:var(--graphite)}
#af-body{padding:0 20px 16px; max-height:60vh; overflow:auto}

/* Markdown-rendered long text (manufacturer description) */
.md p{margin:0 0 10px}
.md p:last-child{margin-bottom:0}
.md ul,.md ol{margin:0 0 10px; padding-left:22px}
.md li{margin:3px 0}
.md a{color:var(--accent)}
.md code{font-family:var(--mono); font-size:12px; background:var(--chip-bg); padding:1px 5px; border-radius:4px}
.md h3,.md h4{font-weight:600; margin:12px 0 6px; color:var(--ink-strong)}
.md blockquote{margin:0 0 10px; padding:2px 0 2px 12px; border-left:2px solid var(--hairline); color:var(--graphite)}
.rich-json,.rich-md{margin:4px 0; padding:10px 12px; background:var(--chip-bg); border:1px solid var(--hairline); border-radius:6px; overflow-x:auto}
.rich-json{font-size:12px; white-space:pre-wrap; word-break:break-word}
.rich-md table{margin:8px 0}
.rich-md th,.rich-md td{white-space:normal}
/* Manufacturer picker cards (workspace entry page). */
.mfr-cards{display:grid; grid-template-columns:1fr; gap:16px}
a.kpi.mfr-card{display:flex; flex-direction:column; gap:14px; text-decoration:none; color:inherit}
a.kpi.mfr-card:hover{border-color:var(--accent); background:#FCFCFD}
:root[data-theme="dark"] a.kpi.mfr-card:hover{border-color:var(--accent); background:#17181C}
.mfr-card .label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-strong); font-size:15px; font-weight:600}
.mfr-figs{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px}
.mfr-fig{text-align:right}
.mfr-fig .n{font-size:24px; font-weight:600; color:var(--ink-strong); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums}
.prod-name{background:none; border:0; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:var(--hairline); text-underline-offset:3px}
.prod-name:hover{color:var(--accent); text-decoration-color:currentColor}