/* ─────────────────────────────────────────────────────────────
 * Design tokens — see anansi-shipment-tracking-tz.md §3
 * Semantic colour names are stable; values per theme.
 * ───────────────────────────────────────────────────────────── */
:root {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  /* Legacy aliases */
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* Radii */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition-flash: 1s ease-out;
  --transition-ui: 150ms ease-out;
  --transition-panel: 250ms ease-out;
}

/* Dark theme (current look — kept stable so existing screens don't jump) */
:root,
:root[data-theme="dark"] {
  --bg:     #1f2937; /* page */
  --bg-1:   var(--bg);
  --bg2:    #273141; /* surfaces, thead */
  --bg-2:   var(--bg2);
  --bg3:    #2d3749; /* raised elements, cards */
  --bg-3:   var(--bg3);
  --bg4:    #374151; /* hover */
  --bg-4:   var(--bg4);

  --border:  #374151;
  --border-1: var(--border);
  --border2: #475569;
  --border-2: var(--border2);

  --text:    #e5e7eb;
  --text-1:  var(--text);
  --muted2:  #9ca3af;
  --text-2:  var(--muted2);
  --muted:   #6b7280;
  --text-3:  var(--muted);

  --up:       #a3e635;
  --up-dim:   rgba(163,230,53,0.12);
  --up-bg:    var(--up-dim);
  /* Coral instead of pure red — softer on dark background, easier to read
     for long sessions. Used for losses, low opportunity, down-arrows. */
  --down:     #ff8a65;
  --down-dim: rgba(255,138,101,0.14);
  --down-bg:  var(--down-dim);
  --warn:     #fbbf24;
  --warn-dim: rgba(251,191,36,0.12);
  --warn-bg:  var(--warn-dim);
  --blue:     #60a5fa;
  --blue-dim: rgba(96,165,250,0.12);
  --info:     var(--blue);
  --info-bg:  var(--blue-dim);

  --brand:    var(--warn);

  /* On-color text (for filled buttons) */
  --on-up:    #1a2332;
  --on-bg:    var(--text);
}

/* Light theme */
:root[data-theme="light"] {
  --bg:     #f7f8fa;
  --bg-1:   var(--bg);
  --bg2:    #ffffff;
  --bg-2:   var(--bg2);
  --bg3:    #ffffff;
  --bg-3:   var(--bg3);
  --bg4:    #f0f2f5;
  --bg-4:   var(--bg4);

  --border:  #e4e7eb;
  --border-1: var(--border);
  --border2: #d1d5db;
  --border-2: var(--border2);

  --text:    #0b0e11;
  --text-1:  var(--text);
  --muted2:  #5f6670;
  --text-2:  var(--muted2);
  --muted:   #8a9099;
  --text-3:  var(--muted);

  --up:       #0a7050;
  --up-dim:   rgba(14,140,85,0.12);
  --up-bg:    var(--up-dim);
  --down:     #a12828;
  --down-dim: rgba(226,75,74,0.14);
  --down-bg:  var(--down-dim);
  --warn:     #8a5a0f;
  --warn-dim: rgba(240,159,39,0.16);
  --warn-bg:  var(--warn-dim);
  --blue:     #1a5dbf;
  --blue-dim: rgba(61,139,253,0.14);
  --info:     var(--blue);
  --info-bg:  var(--blue-dim);

  --brand:    #B8860B;

  --on-up:    #ffffff;
  --on-bg:    var(--text);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;line-height:1.5;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
body > *{flex-shrink:0}
body > .layout-main,body > .container{flex:1;min-height:0}
a{color:inherit;text-decoration:none}

/* TOP NAV (common across pages) */
.topnav{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:48px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.logo-wrap{display:flex;align-items:center;gap:20px}
.logo{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--brand);letter-spacing:0.02em}
.tabs{display:flex;gap:2px;align-items:center;height:100%}
.tab{padding:0 14px;height:48px;display:flex;align-items:center;font-size:14px;color:var(--muted2);cursor:pointer;border-bottom:2px solid transparent;transition:0.12s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab .tab-icon{margin-right:6px;font-size:14px;line-height:1}
/* Rainbow label for the 'Умный подбор' nav tab — keeps the emoji icon
   rendered in its native colour; only the text gets the gradient. */
.tab-rainbow{
  background:linear-gradient(90deg,#ff5f6d,#ffc371,#ffe76a,#82e896,#5cd6ff,#bf80ff,#ff5f6d);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:500;
  animation:tab-rainbow-shift 6s linear infinite;
}
@keyframes tab-rainbow-shift{
  0%{background-position:200% 0}
  100%{background-position:0% 0}
}
.tab.tab-rocket.active .tab-rainbow{filter:brightness(1.15)}
.nav-right{display:flex;align-items:center;gap:14px;font-size:12px}
.status-chip{display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--up-dim);border:1px solid var(--up);border-radius:3px;color:var(--up);font-family:var(--mono);font-size:12px}
.status-chip.degraded{background:var(--warn-dim);border-color:var(--warn);color:var(--warn)}
.status-chip.down{background:var(--down-dim);border-color:var(--down);color:var(--down)}
.status-dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:blink 2s infinite}
@keyframes blink{50%{opacity:0.4}}
.rate-chip{font-family:var(--mono);font-size:12px;color:var(--muted2);padding:3px 8px;border:1px solid var(--border);border-radius:3px;background:var(--bg3)}
.rate-chip .flat{color:var(--text);font-weight:600}
.user-btn{width:28px;height:28px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;cursor:pointer;user-select:none}
.user-btn:hover{background:var(--bg4)}
.user-menu{position:absolute;right:0;top:36px;background:var(--bg2);border:1px solid var(--border);border-radius:3px;min-width:180px;padding:6px 0;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,0.25)}
.user-menu-info{padding:8px 14px;font-size:12px;color:var(--muted2);border-bottom:1px solid var(--border);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
.user-menu a{display:block;padding:8px 14px;font-size:13px;color:var(--text);text-decoration:none}
.user-menu a:hover{background:var(--bg3)}

/* Theme toggle button */
.theme-toggle{display:flex;align-items:center;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:2px;cursor:pointer;height:26px;user-select:none}
.theme-toggle span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:2px;color:var(--muted);font-size:13px;transition:var(--transition-ui)}
.theme-toggle span:hover{color:var(--muted2)}
.theme-toggle.dark .t-dark,
.theme-toggle.light .t-light{background:var(--bg);color:var(--brand)}

/* Bottom status bar */
.botbar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--bg2);border-top:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--muted);height:28px}
.bot-group{display:flex;gap:18px;align-items:center}
.lang-switch a{color:var(--muted);text-decoration:none;padding:2px 4px;border-radius:2px;transition:0.12s}
.lang-switch a:hover{color:var(--text)}
.lang-switch a.active{color:var(--brand);font-weight:600}

/* Confirmation modal */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;z-index:500}
.confirm-box{background:var(--bg2);border:1px solid var(--border);border-radius:4px;min-width:340px;max-width:460px;padding:22px 22px 16px}
.confirm-msg{color:var(--text);font-size:14px;line-height:1.55;margin-bottom:18px}
.confirm-actions{display:flex;gap:8px;justify-content:flex-end}
.confirm-actions .btn{min-width:100px}
.btn-danger{background:var(--down);color:#fff}
.btn-danger:hover:not(:disabled){background:var(--down);filter:brightness(1.15)}

/* Semantic colors */
.up{color:var(--up)} .down{color:var(--down)} .warn{color:var(--warn)} .flat{color:var(--muted2)}

/* Buttons */
.btn{padding:10px;font-size:13px;font-weight:600;border:none;border-radius:3px;cursor:pointer;font-family:var(--sans);transition:0.12s}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-primary{background:var(--up);color:var(--on-up)}
.btn-primary:hover:not(:disabled){background:var(--up);filter:brightness(1.1)}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}
.btn-secondary:hover:not(:disabled){background:var(--bg4)}
.btn-ghost{background:transparent;color:var(--muted2);border:1px solid transparent}
.btn-ghost:hover:not(:disabled){color:var(--text);background:var(--bg3)}

/* Inputs */
.input{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:13px;padding:8px 10px;border-radius:3px}
.input:focus{outline:none;border-color:var(--brand)}

/* Tame native number-input spin buttons */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  opacity:0.25;cursor:pointer;margin:0;
}
:root[data-theme="dark"] input[type=number]::-webkit-inner-spin-button,
:root[data-theme="dark"] input[type=number]::-webkit-outer-spin-button,
:root:not([data-theme]) input[type=number]::-webkit-inner-spin-button,
:root:not([data-theme]) input[type=number]::-webkit-outer-spin-button{filter:invert(1)}
input[type=number]:hover::-webkit-inner-spin-button,
input[type=number]:hover::-webkit-outer-spin-button,
input[type=number]:focus::-webkit-inner-spin-button,
input[type=number]:focus::-webkit-outer-spin-button{opacity:0.55}

/* Shared badge */
.badge{display:inline-block;padding:1px 6px;border-radius:2px;font-size:10px;font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:0.03em;margin-right:4px}
.badge-hot{background:var(--down-dim);color:var(--down);border:1px solid var(--down)}
.badge-new{background:var(--warn-dim);color:var(--warn);border:1px solid var(--warn)}
.badge-grow{background:var(--up-dim);color:var(--up);border:1px solid var(--up)}
.badge-flag{background:var(--bg4);color:var(--muted2);border:1px solid var(--border2)}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}

/* ─────────────────────────────────────────────────────────────
 * Shared page chrome beyond topnav/botbar — taken from terminal.html
 * as the reference design. New pages should reuse these classes
 * rather than redefine them locally.
 * ───────────────────────────────────────────────────────────── */

/* Toolbar (filter row) */
.toolbar{display:flex;align-items:center;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--border);gap:8px;flex-wrap:wrap}
.toolbar-sep{width:1px;height:18px;background:var(--border);margin:0 4px}
.toolbar-group{display:flex;align-items:center;gap:4px}
.toolbar-label{font-size:12px;color:var(--muted);margin-right:4px}
.toolbar-spacer{flex:1}
.input-mini{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:12px;padding:4px 8px;border-radius:3px;width:70px}
.input-mini:focus{outline:none;border-color:var(--warn)}

/* Filter chips — warn is the default active state */
.filter-chip{font-family:var(--mono);font-size:12px;padding:5px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:3px;color:var(--muted2);cursor:pointer;transition:0.12s;white-space:nowrap;user-select:none}
.filter-chip:hover{background:var(--bg4);color:var(--text)}
.filter-chip.active{background:var(--warn-dim);border-color:var(--warn);color:var(--warn)}
/* Per-kind tint — used on Match and Signals toolbars (if re-added as chips) */
.filter-chip[data-match="exact"].active{background:var(--up-dim);border-color:var(--up);color:var(--up)}
.filter-chip[data-match="alt"].active{background:rgba(167,139,250,0.15);border-color:#a78bfa;color:#a78bfa}
.filter-chip[data-match="manual"].active{background:rgba(96,165,250,0.15);border-color:var(--blue);color:var(--blue)}
.filter-chip[data-signals="only_green"].active{background:var(--up-dim);border-color:var(--up);color:var(--up)}
.filter-chip[data-signals="exclude_blockers"].active{background:#3d2020;border-color:#a04848;color:#E89090}

/* Multi-select dropdown (category) — also reused for Match / Signals singles */
.cat-wrap{position:relative}
.cat-btn{font-family:var(--mono);font-size:12px;padding:5px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:3px;color:var(--muted2);cursor:pointer;white-space:nowrap;user-select:none;display:inline-flex;align-items:center;gap:6px}
.cat-btn:hover{background:var(--bg4);color:var(--text)}
.cat-btn.active{background:var(--warn-dim);border-color:var(--warn);color:var(--warn)}
.cat-btn::after{content:'▾';font-size:10px}
.cat-pop{position:absolute;top:calc(100% + 4px);left:0;background:var(--bg2);border:1px solid var(--border);border-radius:3px;min-width:220px;max-height:360px;overflow-y:auto;z-index:50;box-shadow:0 6px 18px rgba(0,0,0,.35);display:none}
.cat-wrap.open .cat-pop{display:block}
.cat-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;font-family:var(--mono);color:var(--text);cursor:pointer;user-select:none}
.cat-item:hover{background:var(--bg3)}
.cat-item.active{color:var(--warn)}
.cat-item input{margin:0;cursor:pointer}
.cat-item .cat-n{margin-left:auto;color:var(--muted);font-size:11px}
.cat-head{padding:6px 12px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:0.06em}
.cat-head a{color:var(--blue);font-family:var(--mono);text-transform:none;cursor:pointer}

/* Preset dropdown — single-select variant with a wider trigger */
.preset-wrap{position:relative}
.preset-btn{font-family:var(--mono);font-size:12px;padding:5px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:3px;color:var(--text);cursor:pointer;white-space:nowrap;user-select:none;display:inline-flex;align-items:center;gap:6px;min-width:180px;justify-content:space-between}
.preset-btn:hover{background:var(--bg4)}
.preset-btn.active{border-color:var(--warn);color:var(--warn)}
.preset-pop{position:absolute;top:100%;left:0;margin-top:4px;background:var(--bg2);border:1px solid var(--border);border-radius:3px;min-width:260px;max-height:320px;overflow-y:auto;z-index:50;display:none;padding:4px 0}
.preset-wrap.open .preset-pop{display:block}
.preset-item{padding:7px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;font-size:12px;font-family:var(--mono)}
.preset-item:hover{background:var(--bg3)}
.preset-item.active{color:var(--warn)}
.preset-n{color:var(--muted2)}

/* Pager + result count (below table / toolbar) */
.result-count{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;align-items:center;gap:10px}
.pager{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px}
.pager button{background:var(--bg3);border:1px solid var(--border);color:var(--muted2);font-family:var(--mono);font-size:12px;padding:3px 9px;border-radius:3px;cursor:pointer;transition:0.12s}
.pager button:hover:not(:disabled){background:var(--bg4);color:var(--text)}
.pager button:disabled{opacity:0.35;cursor:not-allowed}
.pager-info{color:var(--muted);padding:0 4px}
.pager-info b{color:var(--text)}

/* Ticker — N-card header strip. Page picks grid-template-columns inline. */
.ticker{display:grid;gap:1px;background:var(--border);border-bottom:1px solid var(--border)}
.ticker-cell{background:var(--bg2);padding:10px 14px;min-height:72px;display:flex;flex-direction:column;justify-content:space-between}
.ticker-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.ticker-label .tk-sub{font-size:10px;color:var(--muted2);text-transform:lowercase;letter-spacing:0}
.ticker-label .tk-tag{font-size:9px;color:var(--warn);background:var(--warn-dim);padding:1px 5px;border-radius:2px;letter-spacing:0.04em}
.ticker-value{font-family:var(--mono);font-size:15px;font-weight:500}
.ticker-delta{font-size:11px;font-family:var(--mono);margin-left:5px}
.tk-product{font-size:13px;color:var(--text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.tk-stat{font-family:var(--mono);font-size:11px;color:var(--muted2);display:flex;gap:8px;flex-wrap:wrap}
.tk-stat .up{color:var(--up)} .tk-stat .warn{color:var(--warn)}
/* Container-card variant — used on the Terminal shipment card */
.tk-container-val{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--warn);margin-bottom:4px;display:flex;align-items:baseline;gap:8px}
.tk-container-val small{font-size:11px;font-weight:400;color:var(--muted2);font-family:var(--mono)}
.tk-container-bar{height:2px;background:var(--bg4);border-radius:1px;overflow:hidden;margin-bottom:5px}
.tk-container-bar-fill{height:100%;background:var(--warn)}
.tk-container-card.state-early{background:#1f2933}
.tk-container-card.state-early .tk-tag{color:var(--muted);background:transparent;border:1px solid var(--border2)}
.tk-container-card.state-early .tk-container-val{color:var(--muted2)}
.tk-container-card.state-early .tk-container-bar-fill{background:var(--muted2)}
.tk-container-card.state-filling{background:#2e2815}
.tk-container-card.state-filling .tk-tag{color:var(--warn);background:var(--warn-dim)}
.tk-container-card.state-filling .tk-container-val{color:var(--warn)}
.tk-container-card.state-filling .tk-container-bar-fill{background:var(--warn)}
.tk-container-card.state-closing{background:#31181c}
.tk-container-card.state-closing .tk-tag{color:#E89090;background:rgba(232,144,144,0.15)}
.tk-container-card.state-closing .tk-container-val{color:#E89090}
.tk-container-card.state-closing .tk-container-bar-fill{background:#E89090}

/* Table chrome — sticky thead, hover row, sort indicator, empty state */
.table-wrap{overflow:auto;background:var(--bg);position:relative}
.table-wrap .tbody-host{transition:opacity 0.12s,filter 0.12s}
.table-wrap.loading .tbody-host,
.table-wrap.loading tbody{opacity:0.45;filter:blur(1px);pointer-events:none}
.table-wrap table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.table-wrap thead{position:sticky;top:0;background:var(--bg2);z-index:10}
.table-wrap th{text-align:left;padding:8px 10px;font-weight:500;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none}
.table-wrap th:hover{color:var(--text)}
.table-wrap th.sorted{color:var(--warn)}
.table-wrap th .sort-arrow{display:inline-block;margin-left:3px;font-size:9px}
.table-wrap th.num,.table-wrap td.num{text-align:right;font-family:var(--mono)}
.table-wrap tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.08s}
.table-wrap tbody tr:hover{background:var(--bg2)}
.table-wrap tbody tr.selected{background:var(--bg3)}
.table-wrap td{padding:9px 10px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-wrap th:last-child,.table-wrap td:last-child{padding-right:18px}
.table-wrap tr.row-dimmed{opacity:0.5}
.empty-state{padding:60px 20px;text-align:center;color:var(--muted);font-size:14px}

/* Loading spinner — centre-of-parent, outer layer centres, inner rotates */
.table-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;opacity:0;pointer-events:none;transition:opacity 0.12s;z-index:5}
.table-spinner::before{content:'';display:block;width:100%;height:100%;border:3px solid var(--border2);border-top-color:var(--warn);border-radius:50%;animation:spin 0.9s linear infinite}
.table-wrap.loading .table-spinner{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* Risk / signal badges — spec §3.1 three-type system */
.risk-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:1px;font-size:11px;font-family:var(--mono);white-space:nowrap;line-height:1.3;cursor:default}
.risk-badge.stable{color:var(--muted2);background:var(--bg4)}
.risk-badge.warn{color:var(--warn);background:var(--warn-dim)}
.risk-badge.down{color:var(--down);background:var(--down-dim)}
.risk-badge.positive,
.risk-badge.risk,
.risk-badge.blocker,
.risk-badge.neutral,
.risk-badge.muted{cursor:help;text-transform:lowercase;font-weight:normal}
.risk-badge.positive{background:var(--up-dim);color:var(--up);border:1px solid transparent}
.risk-badge.risk{background:#3d3520;color:#EFC368;border:1px solid rgba(239,195,104,0.45)}
.risk-badge.blocker{background:#3d2020;color:#E89090;border:1px solid rgba(232,144,144,0.45)}
.risk-badge.neutral{background:var(--bg4);color:var(--muted2);border:1px solid var(--border)}
.risk-badge.muted{background:var(--bg3);color:var(--muted);border:1px solid var(--border);opacity:0.7}
.risk-badge.positive:hover,
.risk-badge.risk:hover,
.risk-badge.blocker:hover,
.risk-badge.neutral:hover{filter:brightness(1.15)}
.risk-badge.positive:not(.no-icon)::after{content:'✓';font-size:10px;margin-left:2px;opacity:0.9}
.risk-badge.risk:not(.no-icon)::after{content:'ⓘ';font-size:10px;margin-left:2px;opacity:0.9}
.risk-badge.blocker:not(.no-icon)::after{content:'✕';font-size:10px;margin-left:2px;opacity:0.9}
.risk-badge.no-border{border-color:transparent}
.risk-badge.overflow{background:var(--bg4);color:var(--muted2);cursor:help;text-transform:lowercase;font-weight:normal}
.risk-badge.overflow.has-blocker{background:#3d2020;color:#E89090}
.risk-badge.overflow.has-risk{background:#3d3520;color:#EFC368}
.badges-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}

/* Risk disclaimer + risk-row (used in deal panel) */
.risk-disclaimer{padding:8px 14px;font-size:11px;color:var(--muted);border-top:1px solid var(--border);background:var(--bg2);text-align:center;font-style:italic}
.risk-row{display:flex;gap:6px;flex-wrap:wrap}
.risk-row.deal-risks-top{margin-bottom:6px}

/* Hover modal for risk badges — spec §3.3 */
.risk-modal{position:absolute;z-index:1000;background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:14px 16px;width:360px;max-width:90vw;box-shadow:0 8px 22px rgba(0,0,0,0.55);font-size:12px;line-height:1.55;color:var(--text);pointer-events:auto}
.risk-modal.loading{color:var(--muted);font-style:italic}
.risk-modal .rm-title{font-size:13px;font-weight:600;margin-bottom:2px;color:var(--text)}
.risk-modal .rm-subtitle{font-size:11px;color:var(--muted);margin-bottom:10px;font-family:var(--mono)}
.risk-modal .rm-section{margin-bottom:9px}
.risk-modal .rm-section:last-child{margin-bottom:0}
.risk-modal .rm-lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted2);margin-bottom:3px;font-family:var(--mono)}
.risk-modal .rm-body{font-size:12px;color:var(--text);line-height:1.5}

/* Match indicators — dots on rows, tags inside deal panel */
.match-tag{font-size:11px;padding:1px 6px;border-radius:2px;font-family:var(--mono)}
.match-exact{background:var(--up-dim);color:var(--up)}
.match-alt{background:rgba(167,139,250,0.15);color:#a78bfa}
.match-copy{background:var(--warn-dim);color:var(--warn)}
.match-manual{background:rgba(96,165,250,0.15);color:var(--blue);border:1px solid rgba(96,165,250,0.35)}
.match-none{color:var(--muted);font-family:var(--mono);font-size:12px}
.match-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:6px;cursor:help;flex-shrink:0}
.match-dot.exact{background:var(--up)}
.match-dot.alt{background:#a78bfa}
.match-dot.copy{background:var(--warn)}
.match-dot.manual{background:var(--blue)}
.match-type-lbl{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.06em;padding:2px 6px;border-radius:2px;display:inline-flex;align-items:center;gap:6px}
.match-type-lbl::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor}
.m-exact{background:var(--up-dim);color:var(--up)}
.m-alt{background:rgba(167,139,250,0.15);color:#a78bfa}
.m-knock{background:var(--warn-dim);color:var(--warn)}
.m-manual{background:rgba(96,165,250,0.15);color:var(--blue)}

/* Signal / metric micro-widgets used in tables + cards */
.opp-chip{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;padding:0 2px}
.opp-chip.low{color:var(--down)} .opp-chip.mid{color:var(--warn)} .opp-chip.high{color:var(--up)} .opp-chip.none{color:var(--muted2)}
.mom-arrow{font-size:11px;font-family:var(--mono);margin-left:3px}
.mom-arrow.up{color:var(--up)} .mom-arrow.flat{color:var(--muted)} .mom-arrow.down{color:var(--down)}
.conf-dots{display:inline-flex;gap:1.5px;margin-left:4px;vertical-align:middle;cursor:help}
.conf-dots.vertical{flex-direction:column-reverse;gap:2px;margin-left:0;align-items:center}
.conf-dot{width:4px;height:4px;border-radius:50%;background:var(--border2)}
.conf-dot.on{background:var(--blue)}
.conf-dots.vertical .conf-dot{width:3px;height:3px;background:var(--border2)}
.conf-dots.vertical .conf-dot.on{background:var(--text)}

/* ML-signal chips (ofertas / bestseller flags on product titles) */
.ml-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:10px;font-size:10px;font-family:var(--mono);margin-left:6px;vertical-align:middle}
.ml-chip.ofertas{background:rgba(248,138,101,0.15);color:var(--down)}
.ml-chip.bestseller{background:var(--warn-dim);color:var(--warn)}

/* Floating tooltips / previews (anchored in <body>) */
.preview-pop{position:fixed;z-index:9999;background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,0.5);pointer-events:none}
.preview-pop img{display:block;width:200px;height:200px;object-fit:contain;background:var(--bg3);border-radius:3px}
.tip-floating{position:fixed;z-index:9999;width:280px;background:var(--bg3);border:1px solid var(--border2);border-radius:4px;padding:10px 12px;color:var(--text);font-family:var(--sans);font-size:12px;line-height:1.5;letter-spacing:normal;text-transform:none;font-weight:400;white-space:normal;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,0.35);pointer-events:none}

/* Legacy dynamic risk chip used in older pages — keep available for parity */
.risk-chip{font-size:11px;padding:3px 8px;border-radius:2px;font-family:var(--mono);border:1px solid}
.risk-chip[data-tip]{cursor:help}
.risk-ok{background:var(--up-dim);color:var(--up);border-color:rgba(163,230,53,0.3)}
.risk-warn{background:var(--warn-dim);color:var(--warn);border-color:rgba(251,191,36,0.3)}
.risk-danger{background:var(--down-dim);color:var(--down);border-color:rgba(248,113,113,0.3)}

/* ─────────────────────────────────────────────────────────────
 * Layout primitives — card / metric-row / progress / stage-bar /
 * cargo-tabs / action-chip. Used by /cargo and any future page.
 * ───────────────────────────────────────────────────────────── */

/* Surfaces — flat, no radius, thin borders. Matches Terminal's deal-panel
 * look: one column is a .stack (container), containing many .section
 * blocks separated by border-bottom. No rounded cards.
 * (.card kept as a legacy alias for .stack/.section when a standalone
 *  boxed callout is genuinely needed — e.g. the warn/success headline.) */
.stack{background:var(--bg2);border:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
.section{padding:14px 16px;border-bottom:1px solid var(--border)}
.section:last-child{border-bottom:none}
.section-sm{padding:10px 14px}
.section-head{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:8px}
.section-head .section-sub{text-transform:none;font-size:11px;color:var(--muted2);letter-spacing:0;font-weight:400}
/* Colour variants — a .section can carry its own background for a callout. */
.section-warn{background:rgba(251,191,36,0.08);border-color:rgba(251,191,36,0.35)}
.section-warn .section-head{color:var(--warn);opacity:0.9}
.section-warn .progress{background:rgba(255,255,255,0.12)}
.section-warn .progress-fill{background:var(--warn)}
.section-success{background:var(--up-dim);border-color:rgba(163,230,53,0.35)}
.section-success .section-head{color:var(--up);opacity:0.9}
.section-danger{background:var(--down-dim);border-color:rgba(248,113,113,0.35)}
.section-danger .section-head{color:var(--down);opacity:0.9}

/* Legacy .card aliases — keep until all pages move to .stack/.section.
 * Overrides common.css v1 radius-lg boxed look with the flat Terminal style. */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:1px;padding:14px 16px}
.card > .card-head{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card > .card-head .card-sub{text-transform:none;font-size:11px;color:var(--muted2);letter-spacing:0;font-weight:400}
.card-warn{background:rgba(251,191,36,0.08);border-color:rgba(251,191,36,0.35);color:var(--warn)}
.card-warn .card-head{color:var(--warn);opacity:0.9}
.card-warn .progress{background:rgba(255,255,255,0.12)}
.card-warn .progress-fill{background:var(--warn)}
.card-success{background:var(--up-dim);border-color:rgba(163,230,53,0.35);color:var(--up)}
.card-success .card-head{color:var(--up);opacity:0.9}
.card-danger{background:var(--down-dim);border-color:rgba(248,113,113,0.35);color:var(--down)}
.card-danger .card-head{color:var(--down);opacity:0.9}

/* Label-left + value-right row with tabular numerals. */
.metric-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:13px}
.metric-row .metric-lbl{color:var(--muted2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.metric-row .metric-val{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--text)}
.metric-row.main{border-top:1px solid var(--border2);padding-top:8px;margin-top:4px;font-weight:600}
.metric-row.total{border-top:2px solid var(--border2);padding-top:8px;margin-top:6px;font-size:14px;font-weight:600}
.metric-row.profit{color:var(--up)}
.metric-row.profit .metric-val,.metric-row.profit .metric-lbl{color:var(--up);font-weight:600}
.metric-row.loss{color:var(--down)}
.metric-row.loss .metric-val,.metric-row.loss .metric-lbl{color:var(--down)}

/* Thin progress bar. Default 4px, .progress-thin → 2px, .progress-thick → 6px. */
.progress{height:4px;background:var(--bg4);border-radius:1px;overflow:hidden;width:100%}
.progress-thin{height:2px}
.progress-thick{height:6px}
.progress-fill{height:100%;background:var(--up);transition:width 0.2s}
.progress-fill.warn{background:var(--warn)}
.progress-fill.down{background:var(--down)}
.progress-fill.info{background:var(--blue)}
/* Label-above-bar combo: name left, 'value / threshold' right. */
.progress-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.progress-row .progress-lbls{display:flex;justify-content:space-between;font-size:11px;color:var(--muted2);font-family:var(--mono);font-variant-numeric:tabular-nums}
.progress-row .progress-lbls .progress-name{color:var(--muted2)}
.progress-row .progress-lbls .progress-val{color:var(--text)}

/* Stage-bar wrapper was originally a rounded card; flatten to match the
 * Terminal flat/dense look. No outer radius. */
/* Stage-bar — horizontal progress indicator with N stages.
 * Colour classes on the .stage element drive both line + label:
 *   (none)       → future stage, grey neutral
 *   .done        → past stage, green
 *   .warn        → current stage, action required (yellow)
 *   .info        → current stage, in-progress (blue)
 *   .success     → current stage, final success (green)
 *   .danger      → current stage, error / block (red)
 * Add .active to bold the label on top of any colour variant. */
.stage-bar{background:var(--bg2);border:1px solid var(--border);padding:14px 16px;display:grid;gap:6px}
.stage-bar .stage{display:flex;flex-direction:column;gap:4px;min-width:0}
.stage-bar .stage-line{height:3px;background:var(--border2);border-radius:1px;transition:background 0.2s}
.stage-bar .stage.done .stage-line{background:var(--up)}
.stage-bar .stage.warn .stage-line{background:var(--warn)}
.stage-bar .stage.info .stage-line{background:var(--blue)}
.stage-bar .stage.success .stage-line{background:var(--up)}
.stage-bar .stage.danger .stage-line{background:var(--down)}
.stage-bar .stage-lbl{font-size:10px;color:var(--muted);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-bar .stage.done .stage-lbl{color:var(--up)}
.stage-bar .stage.warn .stage-lbl{color:var(--warn)}
.stage-bar .stage.info .stage-lbl{color:var(--blue)}
.stage-bar .stage.success .stage-lbl{color:var(--up)}
.stage-bar .stage.danger .stage-lbl{color:var(--down)}
.stage-bar .stage.active .stage-lbl{font-weight:500}

/* Cargo tabs — per-shipment row of tabs with dot+meta. */
.cargo-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:0 16px;border-bottom:1px solid var(--border);background:var(--bg)}
.cargo-tab{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;color:var(--muted2);font-size:13px;user-select:none;transition:0.12s;opacity:0.7}
.cargo-tab:hover{color:var(--text);opacity:1}
.cargo-tab.active{color:var(--text);opacity:1}
.cargo-tab.active.warn{border-bottom-color:var(--warn)}
.cargo-tab.active.info{border-bottom-color:var(--blue)}
.cargo-tab.active.success{border-bottom-color:var(--up)}
.cargo-tab .cargo-tab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cargo-tab.warn .cargo-tab-dot{background:var(--warn)}
.cargo-tab.info .cargo-tab-dot{background:var(--blue)}
.cargo-tab.success .cargo-tab-dot{background:var(--up)}
.cargo-tab .cargo-tab-id{font-weight:500}
.cargo-tab .cargo-tab-meta{font-size:11px;color:var(--muted);font-family:var(--mono)}
.cargo-tab .cargo-tab-meta::before{content:'·';margin:0 4px;color:var(--border2)}

/* Action chip — semi-transparent link-like button used inside card-warn. */
.action-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;font-size:11px;font-family:var(--mono);border:1px solid currentColor;border-radius:3px;background:rgba(0,0,0,0.15);color:inherit;cursor:pointer;white-space:nowrap;user-select:none;transition:0.12s}
.action-chip:hover{filter:brightness(1.15);background:rgba(0,0,0,0.25)}
.action-chip-stack{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:12px}

/* Page-level primitives — headline + h1 + muted helper text. */
.page-header{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px;flex-wrap:wrap}
.page-header h1{font-size:18px;font-weight:600;color:var(--text);margin:0}
.page-header .page-actions{display:flex;gap:8px}

/* Drawer — slide-in panel from the right. Used for contextual pickers
   (e.g. 'add from recommender') that shouldn't take the user off the page.
   Open/close via toggling .open on both the overlay and the drawer. */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:450;opacity:0;pointer-events:none;transition:opacity 0.2s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:var(--bg2);border-left:1px solid var(--border);transform:translateX(100%);transition:transform 0.2s;z-index:500;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0}
.drawer-head .drawer-title{font-size:13px;font-weight:500;color:var(--text)}
.drawer-head .drawer-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px 8px;line-height:1}
.drawer-head .drawer-close:hover{color:var(--text)}
.drawer-body{flex:1;overflow-y:auto}