/* =============================================================================
   Beacon — designer UI (translated from "Beacon UI - first delivery")
   Tokens below are the design's own variables, verbatim from Figma.
   ========================================================================== */
@font-face { font-family:'Inter'; font-weight:400; font-style:normal;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal;
  src:url('../fonts/inter-latin-700-normal.woff2') format('woff2'); font-display:swap; }

:root {
  /* Figma variables, verbatim */
  --accent:#4F46E5;            /* Brand accent */
  --white:#F2F3F5;             /* greyscale/text-icon/default (2nd delivery) */
  --grey:#9CA3AF;              /* UI basics/Secondary grey */
  --line:#333E52;              /* greyscale/border/default (2nd delivery) */
  --black:#090C12;             /* UI basics/Darkest black */
  /* Type ramp: Beacon/* text styles */
  --f-kpi:700 36px/1 'Inter',sans-serif;
  --f-h1:600 22px/1 'Inter',sans-serif;
  --f-body:400 16px/24px 'Inter',sans-serif;
  --f-body-b:600 16px/24px 'Inter',sans-serif;
  --f-small:400 13px/18px 'Inter',sans-serif;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--black); color:var(--white); font:var(--f-body); }

/* ---------- Login ---------- */
.login-page { min-height:100vh; display:flex; flex-direction:column; gap:32px;
  align-items:center; justify-content:center; padding:32px 64px; position:relative;
  overflow:hidden; }
.login-page::before {              /* the radial glow behind the logo (Figma ellipse) */
  content:""; position:absolute; width:1400px; height:1200px; left:50%; top:-208px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(79,70,229,.28), rgba(79,70,229,.10) 45%, transparent 72%); }
.brandmark { display:flex; flex-direction:column; gap:8px; align-items:center;
  position:relative; }
.brandmark .row { display:flex; gap:14px; align-items:center; }
.brandmark .logo { width:40px; height:40px; border-radius:31px; background:#fff;
  background-size:cover; background-position:center; }
.brandmark .name { font:var(--f-kpi); color:var(--white); }
.brandmark .powered { font:var(--f-body); color:var(--grey); }
.login-card { width:462px; max-width:94vw; background:var(--black);
  border:1px solid var(--accent); border-radius:24px; padding:60px 45px;
  display:flex; flex-direction:column; gap:30px; align-items:center;
  box-shadow:0 0 8px 0 rgba(34,45,61,.7); backdrop-filter:blur(3.75px);
  position:relative; }
.login-card h1 { margin:0; font:var(--f-h1); color:#fff; }
.login-fields { display:flex; flex-direction:column; gap:18px; width:100%; }
.field { display:flex; flex-direction:column; gap:6px; width:100%; }
.field label { font:var(--f-small); color:var(--white); }
.inputbox { display:flex; gap:8px; align-items:center; width:100%;
  border:1px solid var(--line); border-radius:8px; padding:10px 14px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.05)); background:transparent; }
.inputbox input { flex:1; min-width:1px; border:0; outline:0; background:transparent;
  color:var(--white); font:var(--f-body); padding:0; }
.inputbox:focus-within { border-color:var(--accent); }
.eye { width:20px; height:20px; border:0; background:none; padding:0; cursor:pointer;
  color:var(--grey); display:flex; align-items:center; }
.eye .i-eye { display:none; }
.eye.shown .i-eyeoff { display:none; }
.eye.shown .i-eye { display:block; }
.login-aux { display:flex; justify-content:flex-end; width:100%; }
.login-aux a { font:var(--f-small); color:var(--white); text-decoration:none;
  cursor:pointer; }
.login-aux a:hover { color:#B8BCC6; }   /* design hover: dim, not accent */
.btn-primary { display:flex; gap:4px; height:44px; align-items:center;
  justify-content:center; padding:8px 18px; width:100%; border:0; border-radius:8px;
  background:var(--white); color:var(--black); font:var(--f-body-b); cursor:pointer; }
.btn-primary:hover { background:#fff; }
.login-note { font:var(--f-small); color:var(--red); margin:0; display:flex;
  gap:10px; align-items:center; justify-content:center; }
.login-note[hidden] { display:none; }
.login-note .i-info { flex:none; }


/* ---------- App shell (designer UI) ---------- */
:root { --panel:#111721; --green:#10B981; --red:#EF4444;
  --c-silver:#38BDF8; --c-gold:#F59E0B; --c-copper:#F43F5E;
  --f-card:600 20px/28px 'Inter',sans-serif; --f-xs:400 12px/18px 'Inter',sans-serif; }
.appbar { position:sticky; top:0; z-index:50; backdrop-filter:blur(18px);
  background:rgba(9,12,18,.5); border-bottom:1px solid var(--panel);
  padding:32px 64px 16px; }
.appbar .inner { display:flex; align-items:center; justify-content:space-between;
  height:54px; gap:16px; }
.appbrand { display:flex; flex-direction:column; gap:2px; }
.appbrand .row { display:flex; gap:14px; align-items:center; }
.logolink { display:flex; text-decoration:none; }
.appbrand .logo { width:28px; height:28px; border-radius:31px; background:#fff;
  background-size:cover;
  background-position:center; }
.appbrand .name { font:var(--f-h1); color:var(--white); }
.appbrand .namewrap, .brandmark .namewrap { display:flex; align-items:flex-start; gap:6px; }
.appbrand .beta, .brandmark .beta { font:italic 600 10px/1 'Inter',sans-serif; color:#fff;
  background:#1E2761; border-radius:4px; padding:3px 6px; margin-top:2px;
  letter-spacing:.02em; }
.appbrand .powered { font:var(--f-body); color:var(--grey); }
nav.tabs { display:flex; align-items:center; height:52px; }
nav.tabs a { display:flex; align-items:center; height:100%; padding:0 18px;
  font:var(--f-body); color:var(--grey); text-decoration:none; border-radius:30px; }
nav.tabs a.active { background:var(--panel); border-radius:8px; color:var(--white); }
nav.tabs a:hover { color:var(--white); }
.profile { position:relative; display:flex; align-items:center; gap:10px; }
.profile .chip { display:flex; gap:10px; align-items:center; height:54px;
  padding:0 10px 0 0; background:var(--panel); border-radius:8px; border:0;
  cursor:pointer; color:var(--white); }
.profile .face { width:54px; height:54px; border-radius:8px; overflow:hidden;
  background:#1d8242; display:flex; align-items:center; justify-content:center;
  font:600 22px/1 'Inter',sans-serif; color:#fff; }
.profile .face img { width:100%; height:100%; object-fit:cover; display:block; }
.profile .menu { position:absolute; right:0; top:60px; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; min-width:180px; padding:6px;
  display:none; }
.profile .menu.open { display:block; }
.profile .menu .who { padding:8px 10px; font:var(--f-small); color:var(--grey);
  border-bottom:1px solid var(--line); margin-bottom:4px; }
.profile .menu button { width:100%; text-align:left; background:none; border:0;
  color:var(--white); font:var(--f-body); padding:8px 10px; border-radius:6px;
  cursor:pointer; }
.profile .menu button:hover { background:rgba(79,70,229,.18); }
main.page { padding:24px 64px 32px; max-width:1440px; margin:0 auto; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:24px; flex-wrap:wrap; }
.pagehead .titles h1 { margin:0 0 4px; font:var(--f-h1); color:var(--white); }
.pagehead .titles .sub { font:var(--f-small); color:var(--grey); }
.pill { display:inline-flex; gap:10px; align-items:center; background:var(--panel);
  border-radius:24px; padding:5px 18px; margin-top:24px; }
.pill .dot { width:6px; height:6px; border-radius:50%; background:var(--green); }
.pill span { font:var(--f-small); color:var(--grey); }
.rangebar { display:flex; gap:16px; }
.selectbox { display:flex; flex-direction:column; gap:6px; width:232px; }
.selectbox label { font:var(--f-small); color:var(--grey); }
.selectbox select { appearance:none; -webkit-appearance:none; height:44px;
  background:var(--black) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 7.5L10 12.5L15 7.5' stroke='%239CA3AF' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center;
  border:1px solid var(--line); border-radius:8px; color:var(--white);
  font:var(--f-body); padding:0 44px 0 14px; cursor:pointer; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px; margin-bottom:24px; }
.kpi-card { background:var(--panel); border-radius:8px; padding:33px 40px;
  min-height:170px; display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit; }
.kpi-card:hover { outline:1px solid var(--line); }
.kpi-card .t { font:var(--f-body-b); color:var(--white); }
.kpi-card .v { font:var(--f-kpi); color:var(--white); }
.kpi-card .s { font:var(--f-small); color:var(--grey); }
.graphgrid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:1100px){ .graphgrid { grid-template-columns:1fr; } }
.graph-card { background:var(--panel); border-radius:4px; padding:20px 20px 26px 14px;
  min-height:345px; display:flex; flex-direction:column; gap:23px; }
.graph-card .head { display:flex; align-items:flex-start; justify-content:space-between;
  padding-left:20px; gap:10px; }
.graph-card .head h2 { margin:0; font:var(--f-card); color:var(--white); }
.graph-card .head .note { font:var(--f-xs); color:var(--grey); }
.iconbtn { width:34px; height:34px; border-radius:8px; background:var(--panel);
  border:0; color:var(--white); cursor:pointer; display:flex; align-items:center;
  justify-content:center; padding:0; }
.iconbtn svg { width:24px; height:24px; display:block; }
.graph-card .head .actions { display:flex; gap:4px; position:relative;
  flex:0 0 auto; }
.iconbtn:hover { color:var(--white); background:#1a2230; }
.graph-card .plot { position:relative; flex:1; min-height:220px; }
.graph-card .plot canvas { position:absolute; inset:0; }
.chart-toggle { display:flex; gap:8px; padding-left:20px; }
.chart-toggle button { font:var(--f-xs); color:var(--grey); background:none;
  border:1px solid var(--line); border-radius:6px; padding:3px 10px; cursor:pointer; }
.chart-toggle button.on { color:var(--white); border-color:var(--accent);
  background:rgba(79,70,229,.15); }
.appfooter { padding:32px 64px 40px; text-align:center; }
.appfooter .brandline { font:600 13px/1.4 'Inter',sans-serif; color:var(--white); }
.appfooter .brandline a { color:var(--white); }
.appfooter .legal { font:var(--f-small); color:var(--grey); max-width:1084px;
  margin:10px auto 0; }
.modal { position:fixed; inset:0; background:rgba(9,12,18,.8); display:none;
  align-items:center; justify-content:center; z-index:100; }
.modal.open { display:flex; }
.modal .box { background:var(--panel); border:1px solid var(--line); border-radius:8px;
  width:min(1100px,92vw); height:min(640px,86vh); padding:20px; display:flex;
  flex-direction:column; gap:14px; }
.modal .box .head { display:flex; justify-content:space-between; align-items:center; }
.modal .box .head h2 { margin:0; font:var(--f-card); color:var(--white); }
.modal .plot { position:relative; flex:1; }
.modal .plot canvas { position:absolute; inset:0; }
.modal .tablewrap { flex:1; overflow:auto; min-height:0; }
.modal .totalsline { margin:0; }

/* ---------- Ask Beacon (chat) ---------- */
.chatgrid { display:grid; grid-template-columns:var(--sidew,281px) 1fr;
  grid-template-rows:minmax(0,1fr); height:calc(100vh - 103px); position:relative; }
.vdivider { position:absolute; top:0; bottom:0; width:6px; cursor:col-resize;
  z-index:40; }
.vdivider:hover, .vdivider.active { background:var(--line); }
#sidedivider { left:calc(var(--sidew,281px) - 3px); }
.chatgrid.sidehidden #sidedivider { display:none; }
#paneldivider { display:none; right:calc(var(--panelw,460px) - 3px); }
.chatmain.split #paneldivider { display:block; }
body.coldrag { user-select:none; cursor:col-resize; }
.chatside { border-right:1px solid var(--panel); padding:30px 24px 12px 14px; display:flex;
  flex-direction:column; gap:8px; min-height:0; }
.iconbtn.ghost { background:none; }
.iconbtn.ghost:hover { background:var(--panel); }
.chatside .sidehead { display:flex; align-items:flex-start; justify-content:space-between; }
.chatside h2 { margin:0; font:var(--f-h1); color:var(--white); }
.chatside .sub { font:var(--f-small); color:var(--grey); margin-top:2px; }
.sideaction { display:flex; gap:10px; align-items:center; background:none; border:0;
  color:var(--white); font:var(--f-body); padding:5px 10px; cursor:pointer;
  border-radius:8px; text-align:left; width:100%; min-height:34px; }
.sideaction:hover { background:var(--panel); }
.sideaction svg { flex:0 0 auto; }
.histlabel { font:var(--f-small); color:var(--grey); margin:14px 6px 4px; }
.histlist { display:flex; flex-direction:column; gap:2px; overflow-y:auto;
  flex:1; min-height:0; }
.histitem { display:flex; gap:6px; align-items:center; padding:8px 8px 8px 10px;
  border-radius:8px; color:var(--white); font:var(--f-body); cursor:pointer;
  border:0; background:none; text-align:left; width:100%; }
.histitem:hover, .histitem.active { background:var(--panel); }
.histitem .t { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
/* her design: the star lives RIGHT of the title, appears on hover as an empty
   outline, fills when the chat is a favourite */
.histitem .starbtn { visibility:hidden; background:none; border:0; cursor:pointer;
  color:var(--grey); line-height:0; padding:0 2px; flex:0 0 auto; }
.histitem .starbtn.on svg path { fill:currentColor; }
.histitem:hover .starbtn { visibility:visible; }
.histitem .starbtn.on { visibility:visible; color:#F59E0B; }
.histitem .starbtn:hover { color:#F59E0B; }
.histitem .rowkebab { visibility:hidden; background:none; border:0; cursor:pointer;
  color:var(--grey); line-height:0; padding:0 2px; flex:0 0 auto; }
.histitem:hover .rowkebab { visibility:visible; }
.histitem .rowkebab:hover { color:var(--white); }
.histitem input.rename { flex:1; min-width:0; background:var(--black);
  border:1px solid var(--line); border-radius:6px; color:var(--white);
  font:var(--f-body); padding:4px 8px; }
.rowmenu { position:fixed; width:200px; background:var(--black);
  border:1px solid var(--line); border-radius:8px; padding:6px 0; z-index:80;
  box-shadow:0 0 8px rgba(34,45,61,.7); }
.rowmenu button { display:flex; gap:10px; align-items:center; width:100%;
  background:none; border:0; color:var(--white); font:var(--f-body);
  padding:8px 16px; cursor:pointer; }
.rowmenu button:hover { background:var(--panel); }
.rowmenu button.danger { color:#EF4444; }
.chatmain { display:flex; flex-direction:column; position:relative; min-height:0; }
.chatmain .kebabwrap { position:absolute; top:20px; right:28px; }
.chatmain.split .kebabwrap { right:calc(var(--panelw,460px) + 28px); }
.chatmain.nochat .kebabwrap { display:none; }
.kebab { width:34px; height:34px; border:0; background:none; color:var(--grey);
  cursor:pointer; border-radius:8px; display:flex; align-items:center;
  justify-content:center; }
.kebab svg { width:24px; height:24px; display:block; }
.kebab:hover { background:var(--panel); color:var(--white); }
.sideexpand { position:absolute; top:20px; left:20px; display:none; z-index:55; }
.chatgrid.sidehidden { grid-template-columns:1fr; }
.chatgrid.sidehidden .chatside { display:none; }
.chatgrid.sidehidden .sideexpand { display:block; }
.kebabmenu { position:absolute; right:0; top:40px; width:238px; background:var(--black);
  border:1px solid var(--line); border-radius:8px; padding:6px 0; display:none;
  z-index:60; box-shadow:0 0 8px rgba(34,45,61,.7); }
.kebabmenu.open { display:block; }
.kebabmenu button { display:flex; gap:10px; align-items:center; width:100%;
  background:none; border:0; color:var(--white); font:var(--f-body);
  padding:8px 18px; cursor:pointer; }
.kebabmenu button svg, .rowmenu button svg { flex:none; }
.kebabmenu .mstar { display:flex; }
.kebabmenu .mstar.on svg path { fill:currentColor; }
.kebabmenu button:hover { background:var(--panel); }
.kebabmenu button.danger { color:#EF4444; }
.chatscroll { flex:1; min-height:0; overflow-y:auto; padding:28px 12% 200px; display:flex;
  flex-direction:column; gap:22px; }
.empty { margin:auto; text-align:center; max-width:640px; }
.empty h1 { font:700 34px/1.2 'Inter'; color:var(--white); margin:0 0 14px; }
.empty .sub { font:var(--f-body); color:var(--grey); }
.qp { margin-top:28px; }
.qp .qphead { display:flex; gap:10px; align-items:center; justify-content:center;
  font:var(--f-body-b); color:var(--white); margin-bottom:14px; }
.qp .chips { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.qp .chips button, .entchips button { background:var(--panel); border:0;
  border-radius:8px; color:var(--white); font:var(--f-body); padding:8px 18px;
  height:34px; display:inline-flex; align-items:center; cursor:pointer; }
.qp .chips button:hover, .entchips button:hover { outline:1px solid var(--accent); }
.msg-user { align-self:flex-end; max-width:646px; background:var(--panel);
  border-radius:8px; padding:22px 28px; font:var(--f-body); color:var(--white);
  white-space:pre-wrap; }
.msg-bot { align-self:flex-start; max-width:88%; font:var(--f-body);
  color:var(--white); white-space:pre-wrap; }
.msg-bot .meta { font:var(--f-xs); color:var(--grey); margin-top:10px; }
.entchips { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.entchips button { font:var(--f-small); padding:4px 12px; }
.askdock { position:absolute; left:0; right:0; bottom:0; padding:78px 12% 40px;
  background:linear-gradient(rgba(5,7,12,0), var(--black) 39px); }
.askrow { display:flex; flex-direction:column; align-items:stretch; gap:14px;
  border:1px solid var(--line); border-radius:8px; background:var(--black);
  padding:12px 20px; }
.askinner { display:flex; gap:14px; align-items:center; }
.askrow .bolt { width:44px; height:44px; border-radius:8px; background:#0A0E15;
  border:0; color:var(--white); flex:0 0 auto; cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding:0; }
.ctxtag { display:inline-flex; gap:5px; align-items:center; align-self:flex-start;
  background:#002830; border-radius:6px; padding:0 6px; margin:0;
  font:var(--f-small); color:#06B6D4; }
.ctxtag[hidden] { display:none; }
.ctxtag button { background:none; border:0; color:var(--white); cursor:pointer;
  padding:0; line-height:0; }
.askrow input { flex:1; background:none; border:0; outline:0; color:var(--white);
  font:var(--f-body); }
.sendbtn { width:44px; height:44px; border-radius:8px; border:0;
  background:#333E52; color:var(--white); cursor:default; display:flex;
  align-items:center; justify-content:center; padding:0; }
.sendbtn.ready { background:var(--white); color:#090C12; cursor:pointer; }
.sendbtn.ready:hover { background:#E0E2E8; }
.askfoot { text-align:center; font:var(--f-xs); color:var(--grey); padding-top:14px; }
.renamebar { display:none; gap:8px; padding:10px 12%; }
.renamebar.open { display:flex; }
.renamebar input { flex:1; background:var(--black); border:1px solid var(--line);
  border-radius:8px; color:var(--white); font:var(--f-body); padding:8px 12px; }

/* ---------- Quick Prompts popover (Prompt 2 design) ---------- */
.promptpop { position:absolute; bottom:64px; left:0; width:260px; background:var(--black);
  border:1px solid var(--line); border-radius:8px; padding:0; display:none;
  z-index:70; box-shadow:0 0 8px rgba(34,45,61,.7); }
.promptpop.open { display:block; }
.promptpop .pphead { font:var(--f-small); color:var(--grey); padding:8px 18px;
  border-bottom:1px solid var(--line); }
.ppitem { display:flex; align-items:center; width:100%; }
.ppitem > button.use { flex:1; text-align:left; background:none; border:0;
  color:var(--white); font:var(--f-body); padding:10px 4px 10px 16px; cursor:pointer; }
.ppitem:hover { background:var(--panel); }
.ppitem .more { width:34px; height:38px; background:none; border:0; color:var(--grey);
  cursor:pointer; font:600 16px/1 'Inter'; }
.ppitem .more:hover { color:var(--white); }
.ppsub { position:absolute; width:190px; background:var(--black); border:1px solid var(--line);
  border-radius:8px; padding:6px 0; z-index:71; box-shadow:0 0 8px rgba(34,45,61,.7); }
.ppsub button { display:flex; gap:12px; align-items:center; width:100%; background:none;
  border:0; color:var(--white); font:var(--f-body); padding:9px 16px; cursor:pointer; }
.ppsub button:hover { background:var(--panel); }
.ppsub button.danger { color:#EF4444; }
.ppcreate { display:flex; gap:6px; align-items:center; width:100%; background:none;
  border:0; border-top:1px solid var(--line); color:var(--white); font:var(--f-body);
  padding:8px 17px; cursor:pointer; }
.ppcreate svg { flex:none; }
.ppcreate:hover { background:var(--panel); }
.ppform { padding:10px 14px 12px; border-top:1px solid var(--line); display:none;
  flex-direction:column; gap:8px; }
.ppform.open { display:flex; }
.ppform input { background:var(--black); border:1px solid var(--line); border-radius:8px;
  color:var(--white); font:var(--f-small); padding:8px 10px; }
.ppform .row { display:flex; gap:8px; justify-content:flex-end; }
.ppform .row button { font:var(--f-small); border-radius:8px; padding:6px 12px;
  cursor:pointer; border:0; }
.ppform .save { background:var(--white); color:var(--black); }
.ppform .cancel { background:none; color:var(--grey); }

/* ---------- Data pages (Stock / Sold / Arrivals - derived, no frames exist) ---------- */
.filterbar { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:20px; }
.unitseg { display:flex; margin-left:auto; height:44px; border:1px solid var(--line);
  border-radius:8px; overflow:hidden; }
.unitseg button { background:transparent; border:0; color:var(--grey);
  font:var(--f-body-b); padding:0 16px; cursor:pointer; }
.unitseg button + button { border-left:1px solid var(--line); }
.unitseg button.active { background:var(--white); color:#090C12; }
.unitbox { width:auto; }                      /* Dashboard: labelled unit switch */
.unitbox .unitseg { margin-left:0; }
.dt th[data-fin] { white-space:nowrap; }
.dt td.fin-amb { color:var(--grey); }
.filterbar .selectbox { width:200px; }
.filterbar .selectbox input[type=text], .filterbar .selectbox input[type=number] {
  height:44px; background:var(--black); border:1px solid var(--line); border-radius:8px;
  color:var(--white); font:var(--f-body); padding:0 14px; width:100%; }
.filterbar .selectbox input::-webkit-calendar-picker-indicator { display:none; }
.filterbar .apply { height:44px; padding:0 22px; border:0; border-radius:8px;
  background:var(--white); color:var(--black); font:var(--f-body-b); cursor:pointer; }
.filterbar .apply:hover { background:#fff; }
.filterbar .clearbtn { height:44px; padding:0 18px; border:1px solid var(--line);
  border-radius:8px; background:transparent; color:var(--white);
  font:var(--f-body); cursor:pointer; }
.filterbar .clearbtn:hover { background:var(--panel); }
/* ---------- Upload success tick (Figma: Status green circle) ---------- */
.tickwrap { display:flex; justify-content:center; margin:6px 0 16px; }
.tickcircle { width:84px; height:84px; border-radius:50%; background:#10B981;
  display:flex; align-items:center; justify-content:center; color:var(--white); }
.bigalert { display:flex; color:#F59E0B; }
.tickcircle.fail { background:var(--red); }

/* ---------- Header world clocks (two visible + panel; 2nd delivery Frame 174) ---------- */
.clockwrap { position:relative; }
.clockbtn { width:122px; height:54px; border:1px solid var(--line); border-radius:8px;
  background:transparent; cursor:pointer; display:flex; gap:7px; align-items:center;
  justify-content:center; padding:0; }
.clockbtn .hclock { width:46px; height:46px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#fff; }
.clockbtn .hcity { font:400 12px/1 'Inter',sans-serif; }
.clockbtn .htime { font:600 16px/24px 'Inter',sans-serif; font-variant-numeric:tabular-nums; }
.clockbtn .vdiv { width:1px; align-self:stretch; background:var(--line); }
.clockmenu { display:none; position:absolute; right:0; top:60px; width:176px;
  background:var(--black); border:1px solid var(--line); border-radius:8px;
  padding:6px; z-index:70; flex-direction:column; gap:3px; }
.clockmenu.open { display:flex; }
.clockitem { display:flex; align-items:center; justify-content:space-between;
  padding:0 6px; border-radius:6px; min-height:28px; }
.clockitem:hover { background:var(--panel); }
.clockitem .city { font:400 12px/1 'Inter',sans-serif; color:#fff; cursor:pointer; }
.clockitem .time { font:600 16px/24px 'Inter',sans-serif; color:#fff;
  font-variant-numeric:tabular-nums; }
.clockdiv { height:1px; background:var(--line); margin:0; }
.clockitem select { background:var(--black); border:1px solid var(--line);
  border-radius:6px; color:var(--white); font:var(--f-small); padding:3px 6px;
  max-width:130px; }

.totalsline { font:var(--f-small); color:var(--grey); margin:0 0 12px; }
.totalsline b { color:var(--white); font-weight:600; }
.tablecard { background:var(--panel); border-radius:8px; padding:0 0 2px;
  overflow:auto; max-height:68vh; }
table.dt { width:100%; border-collapse:collapse; }
table.dt th { position:sticky; top:0; background:var(--panel); z-index:2;
  text-align:left; font:var(--f-small); color:var(--grey); font-weight:600;
  padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.dt td { font:400 14px/20px 'Inter',sans-serif; color:var(--white);
  padding:11px 16px; border-bottom:1px solid rgba(34,45,61,.55); white-space:nowrap; }
table.dt tbody tr:hover { background:rgba(79,70,229,.07); }
table.dt td.num { font-variant-numeric:tabular-nums; }
.footnote { font:var(--f-xs); color:var(--grey); padding:12px 16px; }

/* ---------- Inventory: right-hand vertical subtabs ---------- */
.invgrid { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px;
  align-items:start; }
/* data tables earn width the marketing grid doesn't: let Inventory breathe */
body.wide main.page { max-width:min(96vw, 1720px); }
.invmenu { position:sticky; top:120px; display:flex; flex-direction:column; gap:6px;
  background:var(--panel); border-radius:8px; padding:10px; }
.invmenu button { text-align:left; background:none; border:0; color:var(--grey);
  font:var(--f-body); padding:10px 14px; border-radius:8px; cursor:pointer; }
.invmenu button.active { background:var(--black); color:var(--white);
  outline:1px solid var(--line); }
.invmenu button:hover { color:var(--white); }
@media (max-width:1000px){ .invgrid { grid-template-columns:1fr; }
  .invmenu { position:static; flex-direction:row; } }

/* ---------- Chat split view (design: two-panel AI Chat frame) ---------- */
.chatmain.split { display:grid; grid-template-columns:1fr var(--panelw,460px);
  grid-template-rows:minmax(0,1fr); }
.chatmain.split .askdock { right:var(--panelw,460px); }
.chatmain.split > .chatscroll, .chatmain.split > .askdock { grid-column:1; }
.splitpanel { grid-column:2; grid-row:1 / span 2; border-left:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0; background:var(--black); }
.splitpanel .phead { display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px 12px; gap:10px; }
.pheadbtns { display:flex; gap:8px; }
.splitpanel .phead h2 { margin:0; font:var(--f-small); color:var(--grey);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.splitpanel .pbody { flex:1; overflow:auto; padding:0 12px 12px; }
.splitpanel table.dt th { background:var(--black); }
.splitpanel .trunc { font:var(--f-xs); color:var(--grey); padding:10px 16px; }
.splitpanel.collapsed tr.xtra { display:none; }
.showmore { display:block; width:100%; background:none; border:0;
  border-top:1px solid var(--line); color:var(--grey); font:var(--f-small);
  padding:10px 12px; cursor:pointer; text-align:center; }
.showmore:hover { color:var(--white); }
.panelcard { display:flex; gap:24px; align-items:center; width:100%; margin-top:12px;
  background:var(--black); border:1px solid var(--line); border-radius:8px;
  padding:22px 28px; cursor:pointer; text-align:left; color:var(--white);
  box-shadow:0 0 8px rgba(34,45,61,.7); }
.panelcard:hover { border-color:var(--grey); }
.panelcard .pc-icon { width:88px; height:88px; border:1px solid var(--line);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  flex:none; color:#fff; }
.panelcard .pc-text { display:flex; flex-direction:column; gap:8px; flex:1;
  min-width:0; }
.panelcard .pc-t { font:var(--f-body); color:var(--white); }
.panelcard .pc-s { font:var(--f-small); color:var(--grey); }
.panelcard .pc-chev { flex:none; color:var(--white); line-height:0;
  margin-left:auto; }
@media (max-width:1100px){ .chatmain.split { grid-template-columns:1fr; }
  .splitpanel { display:none; }
  .chatmain.split #paneldivider { display:none; }
  .chatmain.split .kebabwrap { right:28px; }
  .chatmain.split .askdock { right:0; } }

/* keep the chat kebab clear of the split panel's close button */

/* chart card inside the chat column - her design: compact, right-aligned,
   travelling with the user's message; expandable in place */
.msg-chart { align-self:flex-end; width:272px; min-height:146px; padding:12px;
  gap:8px; cursor:default; }
.msg-chart.pending { align-self:center; width:508px; max-width:92%;
  min-height:272px; }
.msg-chart.pending .head h2 { font:600 14px/18px 'Inter',sans-serif; }
.chartref { align-self:center; font:var(--f-body); color:var(--grey);
  text-align:center; }
.msg-chart .head h2 { font:600 12px/16px 'Inter',sans-serif; }
.msg-chart .head .note { font:400 10px/14px 'Inter',sans-serif; }
.msg-chart .plot { min-height:120px; }
.msg-chart .iconbtn { width:26px; height:26px; font-size:13px; }
.msg-chart.expanded { align-self:flex-end; width:min(640px, 92%);
  min-height:320px; }
.msg-chart.expanded .head h2 { font:var(--f-card); }

/* the ask-chart dropdown: compact type */
.kebabmenu.chartmenu { width:193px; min-width:0; background:#0A0E15;  /* greyscale/surface/dark */
  border-radius:8px; padding:10px; }
.kebabmenu.chartmenu button { font:var(--f-body-b); padding:0; gap:4px;
  align-items:flex-start; white-space:normal; text-align:left; }
.kebabmenu.chartmenu button svg { flex:none; width:24px; height:24px; }

/* ---------- Document Upload (Documents + File categorisation frames) ---------- */
.docgrid { display:grid; grid-template-columns:1fr 420px; gap:24px; align-items:start; }
@media (max-width:1100px){ .docgrid { grid-template-columns:1fr; } }
.doccard { background:var(--panel); border-radius:8px; padding:30px 24px; }
.doccard h2 { margin:0 0 4px; font:var(--f-card); color:var(--white); text-align:center; }
.doccard .sub { font:var(--f-small); color:var(--grey); text-align:center;
  margin-bottom:20px; }
.dropzone { border:1px dashed var(--line); border-radius:8px; padding:34px 20px;
  background:var(--black); cursor:pointer; display:flex; flex-direction:column;
  gap:10px; align-items:center; justify-content:center; min-height:250px; }
.dropzone.drag { border-color:var(--accent); background:rgba(79,70,229,.08); }
.dzdisc { width:54px; height:54px; border-radius:50%; background:#333E52;
  display:flex; align-items:center; justify-content:center; color:var(--white); }
.dztitle, .dzor { font:var(--f-body-b); color:var(--white); }
.dzbrowse { width:143px; height:36px; padding:0; }
.doclist { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.docrow { background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:10px 20px; display:flex; gap:10px; align-items:center; cursor:pointer; }
.docrow.active { border-color:var(--accent); }
.docrow .fico { width:43px; height:43px; border-radius:50%; background:#333E52;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  color:var(--white); }
.docrow .body { flex:1; min-width:0; }
.docrow .name { font:var(--f-body); color:var(--white); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.docrow .meta1 { font:var(--f-small); color:var(--grey); margin-top:2px; }
.docrow .chip { display:inline-block; font:var(--f-xs); border-radius:5px;
  padding:1px 8px; margin-left:8px; }
.docrow .chip.ready { background:rgba(16,185,129,.15); color:var(--green); }
.docrow .chip.needs { background:rgba(245,158,11,.15); color:#F59E0B; }
.docrow .pen { background:none; border:0; color:var(--grey); cursor:pointer;
  line-height:0; padding:2px; }
.docrow .pen:hover { color:var(--white); }
.saveline { text-align:center; font:var(--f-small); color:var(--grey); margin:18px 0 0; }
.saveline .path { color:#38BDF8; }
.docactions { display:flex; gap:25px; justify-content:flex-end; margin-top:18px; }
.docactions .btn-ghost, .docactions .btn-primary { min-width:186px;
  justify-content:center; }
.btn-primary:disabled { background:#333E52; color:var(--grey); cursor:default; }
.btn-ghost { height:44px; padding:0 22px; border:1px solid var(--line);
  border-radius:8px; background:none; color:var(--white); font:var(--f-body-b);
  cursor:pointer; }
.btn-ghost:hover { border-color:var(--grey); }
.previewcard { background:var(--panel); border-radius:8px; padding:20px;
  min-height:420px; }
.previewcard h2 { margin:0 0 6px; font:var(--f-card); color:var(--white);
  text-align:center; }
.previewcard .sub { font:var(--f-xs); color:var(--grey); text-align:center;
  margin-bottom:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.previewcard object { width:100%; height:520px; border-radius:6px; background:#fff; }
.previewcard .noprev { color:var(--grey); font:var(--f-small); text-align:center;
  padding:0; min-height:340px; background:rgba(51,62,82,.5); border-radius:8px;
  display:flex; align-items:center; justify-content:center; }
.previewcard .prevdisc { width:60px; height:60px; border-radius:50%;
  background:var(--panel); display:flex; align-items:center; justify-content:center;
  color:var(--white); }
/* popup framework reuses .modal; doc popups sized to her 871px frames */
.docmodal { width:min(871px, 94vw); background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:30px 24px; }
.docmodal h2 { margin:0 0 6px; font:var(--f-card); color:var(--white);
  text-align:center; }
.docmodal .sub { font:var(--f-body); color:var(--grey); text-align:center;
  margin-bottom:22px; }
.docmodal .sub.subsmall { font:var(--f-small); }
.docmodal h2 .warn { color:#F59E0B; }
.filestrip { display:flex; gap:10px; align-items:center; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; padding:10px 20px;
  margin-bottom:20px; }
.filestrip .fico { width:43px; height:43px; border-radius:50%; background:#333E52;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  color:var(--white); }
.filestrip .nm { font:var(--f-body); color:var(--white); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.filestrip .st { font:var(--f-small); color:var(--grey); display:flex;
  justify-content:space-between; gap:10px; }
.filestrip .st .ok { color:var(--green); }
.filestrip .st .pctright { margin-left:auto; }
.progresswrap { height:8px; background:#1A2230; border-radius:8px;
  overflow:hidden; margin:8px 0 4px; }
.progressbar { height:100%; width:0%; background:#7C3AED; transition:width .2s;
  border-radius:8px; }
.catpanel { position:relative; background:#1A2230; border:1px solid var(--line);
  border-radius:8px; padding:24px 30px; overflow:hidden; }
.catgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.catgrid .selectbox { width:auto; }
.catgrid input { height:44px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; width:100%; }
.ailayer { position:absolute; inset:0; border-radius:8px; display:flex;
  flex-direction:column; gap:5px; align-items:center; justify-content:center;
  background:linear-gradient(90deg, rgba(79,70,229,.4) 0%, rgba(17,23,33,.4) 55%);
  backdrop-filter:blur(5px); }
.aistep { font:600 20px/28px 'Inter',sans-serif; color:var(--white); }
.aibar { width:504px; max-width:80%; height:8px; background:var(--panel);
  border-radius:8px; overflow:hidden; }
.aifill { width:30%; height:100%; background:#7C3AED; border-radius:8px;
  animation:aislide 1.4s ease-in-out infinite; }
@keyframes aislide { 0% { margin-left:-30%; } 100% { margin-left:100%; } }
.formgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:#1A2230; border:1px solid var(--line); border-radius:8px;
  padding:24px 30px; }
.formgrid .selectbox { width:auto; }
.formgrid input, .formgrid select { height:44px; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; color:var(--white);
  font:var(--f-body); padding:0 14px; width:100%; }
.docmodal .fileline { text-align:center; font:var(--f-small); color:var(--grey);
  margin:18px 0 0; }
.docmodal .fileline .path { color:#38BDF8; }
.docmodal .btnrow { display:flex; gap:25px; justify-content:flex-end; margin-top:22px; }
.docmodal .btnrow.split { justify-content:space-between; }
.docmodal .btnrow .btn-ghost, .docmodal .btnrow .btn-primary { min-width:186px;
  width:auto; justify-content:center; }
.warnbox { background:#351F00; border:1px solid #F59E0B; border-radius:8px;
  padding:14px 20px; font:var(--f-small); color:var(--white); margin-bottom:16px; }
.notebox { background:#1A2230; border-radius:8px; padding:14px 20px;
  font:var(--f-small); color:var(--white); margin-bottom:16px; }
.docmodal .btnrow.pair { gap:24px; justify-content:center; }
.docmodal.compact { width:min(576px, 94vw); }
.docmodal.compact h2 { font:600 22px/30px 'Inter',sans-serif; }
.docmodal.compact .btnrow { margin-top:58px; }

/* Duplicate File Detected - two comparison cards per the problem frame */
.dupgrid { display:grid; grid-template-columns:1fr 1fr; gap:25px; margin:6px 0 4px; }
.dupgrid .dupcol { min-width:0; }
.dupcard { min-width:0; }
.duptitle { text-align:center; font:var(--f-body-b); color:var(--white);
  margin-bottom:12px; }
.dupcard { background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:10px 20px; display:flex; gap:12px; font:var(--f-body); }
.dupcard .dl { display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  color:var(--grey); flex:0 0 auto; }
.dupcard .dv { display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  color:var(--white); flex:1; min-width:0; }
.dupcard .dv span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%; }
.dupcard .dv .hl { color:#F59E0B; }
.docrow .xbtn:hover { color:#EF4444; }
/* ---------- Narrow-viewport layout (phones / small tablets), 2nd-delivery
   follow-up. Engineering patch, NOT from the designer (no mobile frames exist);
   everything is scoped to <=900px, so desktop layout is untouched by
   construction. Removes forced horizontal overflow so iOS stops shrink-to-fit
   scaling the page (which also broke Chart.js tap hit-testing on bars). */
@media (max-width:900px) {
  .appbar { padding:16px 20px 12px; }
  .appbar .inner { flex-wrap:wrap; height:auto; row-gap:10px; }
  nav.tabs { order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  nav.tabs a { white-space:nowrap; }
  main.page { padding:16px 20px 24px; }
  .appfooter { padding:24px 20px 32px; }
  .pagehead { flex-direction:column; align-items:stretch; }
  .rangebar { width:100%; }
  .rangebar .selectbox { flex:1 1 0; width:auto; min-width:0; }
  .kpis { grid-template-columns:1fr; }
  .login-page { padding:24px 20px; }
}

/* Day 5: no-access page state (permission gates) */
.noaccess { max-width: 420px; margin: 12vh auto; padding: 32px;
  border: 1px solid #333E52; border-radius: 12px; text-align: center;
  color: #F2F3F5; }
.noaccess h1 { margin: 0 0 8px; font-size: 20px; }
.noaccess p { margin: 0; color: #9CA3AF; line-height: 1.5; }

/* Day 6: settings cards (component language, no frames) */
.setcard { border: 1px solid #333E52; border-radius: 12px; padding: 20px 24px;
  margin-top: 24px; }   /* Q2-A: cards stretch with the page, no cap */
.setcard h2 { margin: 0 0 12px; font-size: 16px; color: #F2F3F5; }
.setrow { display: flex; align-items: center; gap: 12px; margin: 10px 0;
  flex-wrap: wrap; }
.setrow label { min-width: 160px; color: #9CA3AF; }
.setrow input[type=text], .setrow input[type=password] {
  background: transparent; border: 1px solid #333E52; border-radius: 8px;
  color: #F2F3F5; padding: 8px 10px; min-width: 220px; }
.setmsg { color: #9CA3AF; }
.setmsg.ok { color: #10B981; }
.setmsg.err { color: #F43F8A; }
.face.big { width: 48px; height: 48px; font-size: 18px; border-radius: 8px;
  overflow: hidden; background: #1d8242; display: flex; align-items: center;
  justify-content: center; color: #fff; flex: 0 0 auto; }
.face.big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clocksrow select { background: transparent; border: 1px solid #333E52;
  border-radius: 8px; color: #F2F3F5; padding: 8px 10px; }

/* Day 7: column organiser */
#colseg { margin-left: 0; height: 38px; }
.colrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border: 1px solid #333E52; border-radius: 8px; margin: 6px 0; }
.colrow .cname { flex: 1; color: #F2F3F5; }
.colrow.hiddencol .cname { color: #6B7280; text-decoration: line-through; }
.colrow button { background: transparent; border: 1px solid #333E52;
  border-radius: 6px; color: #F2F3F5; padding: 4px 10px; cursor: pointer; }
.colrow button:disabled { opacity: .35; cursor: default; }
#col-target { background: transparent; border: 1px solid #333E52;
  border-radius: 8px; color: #F2F3F5; padding: 8px 10px; min-width: 220px; }
/* .setrow's display:flex outranks the UA rule behind the hidden attribute;
   without this, the picker row showed (empty) for every role. */
.setrow[hidden] { display: none; }

/* Day 8: users, roles, audit cards */
.setcard[hidden] { display: none; }   /* section gating must beat any display rule */
.permwrap { overflow-x: auto; margin: 8px 0; }
.permtable, .audittable { border-collapse: collapse; font: var(--f-small);
  color: #F2F3F5; min-width: 100%; }
.permtable th, .permtable td, .audittable th, .audittable td {
  border: 1px solid #333E52; padding: 6px 8px; text-align: left;
  white-space: nowrap; }
.permtable th.atom { font-size: 11px; color: #9CA3AF; }
.permtable td.c { text-align: center; }
.permtable .lock { color: #9CA3AF; font-size: 11px; margin-left: 6px; }
.permtable input[type=text] { background: transparent; border: 1px solid #333E52;
  border-radius: 6px; color: #F2F3F5; padding: 4px 8px; width: 120px; }
.rowmsg { color: #F43F8A; font: var(--f-small); }
.rowmsg.ok { color: #10B981; }
.usertable-actions button { margin-left: 6px; }
.audittable td.detail { max-width: 320px; overflow: hidden;
  text-overflow: ellipsis; }
#role-new-name { background: transparent; border: 1px solid #333E52;
  border-radius: 8px; color: #F2F3F5; padding: 8px 10px; }

/* Day 9: settings on narrow screens (<=900px) */
@media (max-width:900px) {
  .setcard { padding: 16px; }
  .setrow { gap: 8px; }
  .setrow label { min-width: 100%; }
  .setrow input[type=text], .setrow input[type=password] {
    min-width: 0; flex: 1 1 220px; }
  .clocksrow select { flex: 1 1 45%; min-width: 0; }
  .colrow { flex-wrap: nowrap; }
  .colrow .cname { min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .audittable td.detail { max-width: 160px; }
}

/* v0.11.0 restructure: inventory settings icon + chip menu guard */
.pagehead .headactions { margin-left: auto; display: flex; align-items: center;
  gap: 10px; }
.profile .menu button[hidden] { display: none; }   /* menu buttons are display:block */
#invmodalbox .setrow { margin: 10px 0; }
#invmodalbox #col-list { max-height: 46vh; overflow-y: auto;
  margin: 8px 0; padding: 2px 10px 2px 2px; }
  /* right padding: keeps row borders clear of the scroll clip edge */
@media (max-width:900px) { .pagehead .headactions { margin-left: 0; } }

/* v0.11.0 cosmetics: settings buttons on the design's Medium/Small scale
   (recipe from .filterbar .apply - the shipped Medium button) */
.setcard .apply, .docmodal .apply { height:44px; padding:0 22px; border:0;
  border-radius:8px; background:var(--white); color:var(--black);
  font:var(--f-body-b); cursor:pointer; }
.docmodal .clearbtn { height:44px; padding:0 18px;
  border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--white); font:var(--f-body); cursor:pointer; }
.setcard .clearbtn { height:36px; padding:0 14px;
  border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--white); font:600 13px/1 'Inter',sans-serif; cursor:pointer; }
.permtable .apply { height:36px; padding:0 14px; font:600 13px/1 'Inter',sans-serif; }
.permtable .clearbtn { height:36px; padding:0 14px; }
/* item 3: aligned label column (stacks full-width under 900px already) */
.setrow > label { flex: 0 0 180px; color:#9CA3AF; }
/* item 5: role name stays visible while the matrix scrolls */
.permtable th:first-child, .permtable td:first-child { position: sticky;
  left: 0; background: var(--black); z-index: 1; }
/* item 6: organiser rows - bigger, drag handle */
#invmodalbox .colrow { padding: 12px 14px; gap: 12px; }
#invmodalbox .colrow .cname { font: 400 15px/22px 'Inter',sans-serif; }
.draghandle { cursor: grab; touch-action: none; color:#9CA3AF; border:0;
  background:transparent; padding:4px; display:flex; align-items:center; }
.draghandle:active { cursor: grabbing; color:var(--white); }
.draghandle svg { width:20px; height:20px; }
.colrow { transition: transform .12s ease; }
.colrow.dragging { transition: none; position: relative; z-index: 5;
  border-color: #CADCFC; background: var(--black); }
#col-target { height:44px; font:400 15px/22px 'Inter',sans-serif;
  min-width:260px; appearance:none; -webkit-appearance:none;
  background-color:var(--panel);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  background-size:18px; padding-right:40px; }
#col-target option { background:var(--panel); color:var(--white); }
#invmodalbox h2 { font:600 22px/30px 'Inter',sans-serif; }