/* ==========================================================================
   Masar — design system. Warm paper, one green, tabular numbers, logical properties (RTL/LTR).
   ========================================================================== */
:root {
  --bg: #F6F5F1; --surface: #FFFFFF; --surface-2: #F0EFEA; --surface-3: #E8E6DF;
  --line: #E2E0D8; --line-2: #CFCCC2;
  --ink: #1B1F1C; --ink-2: #454C48; --mut: #5B635C; --on-brand: #FFFFFF; /* muted text keeps ≥ 4.5:1 on every surface (WCAG AA) */
  --brand: #0C6E3F; --brand-2: #0A5F36; --brand-3: #094D2C; --brand-soft: #E4F2E9; --brand-ring: rgba(12,110,63,.28);
  --gold: #8F6512; --gold-soft: #FBF2DC;
  --ok: #1B7A3D; --ok-soft: #E4F2E9; --warn: #9A6210; --warn-soft: #FBF1DE; --err: #B42323; --err-soft: #FCE9E9; --info: #1D5FA8; --info-soft: #E7EFFA;
  --shadow: 0 1px 2px rgba(20,30,24,.06), 0 4px 14px rgba(20,30,24,.06); --shadow-lg: 0 12px 40px rgba(20,30,24,.18);
  --r-s: 6px; --r: 10px; --r-l: 14px;
  --font: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-d: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --side-w: 248px; --top-h: 64px; --mnav-h: 60px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #131714; --surface: #1B201D; --surface-2: #232925; --surface-3: #2B322D;
  --line: #2C332E; --line-2: #3B443D;
  --ink: #E9ECE8; --ink-2: #C0C7C1; --mut: #9AA39A; --on-brand: #0B1A10;
  --brand: #3DBC79; --brand-2: #5CCB90; --brand-3: #8FDDB3; --brand-soft: #173726; --brand-ring: rgba(61,188,121,.35);
  --gold: #E3B75A; --gold-soft: #3A2E12;
  --ok: #4FC57F; --ok-soft: #173726; --warn: #E2B15C; --warn-soft: #3A2E12; --err: #F07373; --err-soft: #3E1E1E; --info: #7FB3F2; --info-soft: #1B2B40;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.35); --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14.5px; line-height: 1.55; font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--font-d); font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: 0; hyphens: none; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 14.5px; } h4 { font-size: 13.5px; }
p { margin: 0 0 .6em; } p:last-child { margin-bottom: 0; }
a { color: var(--brand-2); text-decoration: none; } a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.mut { color: var(--mut); } .small { font-size: 12.5px; } .pre { white-space: pre-line; word-break: break-word; }
.grow { flex: 1; } .ta-end { text-align: end; } .danger { color: var(--err) !important; }
.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
[dir="ltr"] .flip { transform: scaleX(-1); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.tbl tbody tr:focus-visible, .lcard:focus-visible, .dcard:focus-visible, .pcard:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
#view:focus { outline: none; }
/* "skip to content" — visible only when it receives keyboard focus */
.skip { position: absolute; top: -60px; inset-inline-start: 12px; z-index: 200; background: var(--brand); color: var(--on-brand); padding: 8px 14px; border-radius: var(--r); font-weight: 600; text-decoration: none; transition: top .15s; }
.skip:focus { top: 12px; }
::selection { background: var(--brand-soft); }

/* ---------- Shell ---------- */
.boot { min-height: 100vh; display: grid; place-items: center; }
.shell { display: flex; min-height: 100vh; }
.side { width: var(--side-w); flex: none; background: var(--surface); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; }
.brand-mark, .brand-logo { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: contain; display: inline-block; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-txt { min-width: 0; line-height: 1.25; } .brand-txt b { display: block; font-family: var(--font-d); font-size: 17px; } .brand-txt small { color: var(--mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.brand .side-close { display: none; margin-inline-start: auto; }
.navwrap { flex: 1; overflow: auto; padding: 4px 10px 12px; }
.nav-grp { font-size: 11px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .08em; padding: 14px 10px 6px; }
.nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: var(--r); color: var(--ink-2); font-weight: 500; text-align: start; min-height: 40px; }
.nav-btn:hover { background: var(--surface-2); color: var(--ink); }
.nav-btn.on { background: var(--brand-soft); color: var(--brand-3); font-weight: 600; }
.nav-btn .ic { color: inherit; opacity: .85; }
.nav-btn .cnt { margin-inline-start: auto; background: var(--surface-3); color: var(--ink-2); border-radius: 999px; padding: 0 8px; font-size: 11.5px; min-width: 22px; text-align: center; line-height: 20px; }
.nav-btn .cnt.warn { background: var(--err-soft); color: var(--err); }
.nav-btn.on .cnt { background: var(--surface); }
.side-foot { border-top: 1px solid var(--line); padding: 12px 14px 14px; display: grid; gap: 10px; }
.org-switch { width: 100%; }
.userchip { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px; border-radius: var(--r); }
.userchip:hover { background: var(--surface-2); }
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: inline-grid; place-items: center; font-weight: 700; flex: none; }
.uc-t { min-width: 0; line-height: 1.2; } .un { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ur { color: var(--mut); font-size: 12px; }
.side-tools { display: flex; gap: 6px; }
.tbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.tbtn:hover { background: var(--surface-2); color: var(--ink); }
.side-ovl { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); min-height: var(--top-h); }
.tb-title { min-width: 0; flex: 1; } .tb-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-title .sub { color: var(--mut); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-btn { display: none; }
.searchwrap { position: relative; display: flex; align-items: center; width: 320px; max-width: 40vw; }
.searchwrap > .ic { position: absolute; inset-inline-start: 11px; color: var(--mut); pointer-events: none; }
.searchwrap input { width: 100%; padding-inline-start: 36px; height: 40px; }
.searchwrap.sm { width: 260px; max-width: 100%; } .searchwrap.sm input { height: 36px; }
.sugg { position: absolute; top: calc(100% + 6px); inset-inline: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); z-index: 40; overflow: hidden; }
.sg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: start; padding: 9px 12px; border: 0; background: none; border-bottom: 1px solid var(--line); }
.sg:hover { background: var(--surface-2); } .sg small { color: var(--mut); font-size: 12px; } .sg.all { flex-direction: row; align-items: center; gap: 8px; color: var(--brand-2); font-weight: 600; }
.view { padding: 22px 24px 40px; flex: 1; }
.tb-new span { display: inline; }
.mnav { display: none; }
#banner .banner { display: flex; align-items: center; gap: 10px; padding: 10px 24px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.banner.err { background: var(--err-soft); color: var(--err); } .banner.warn { background: var(--warn-soft); color: var(--warn); } .banner.info { background: var(--info-soft); color: var(--info); }
.banner span { flex: 1; } .banner .btn { flex: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: background .12s, border-color .12s, transform .05s; }
.btn:hover { background: var(--surface-2); border-color: var(--mut); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.pri { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .btn.pri:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line-2)); } .btn.danger:hover { background: var(--err-soft); }
.btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--surface-2); }
.btn.sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; gap: 5px; } .btn.sm .ic { width: 15px; height: 15px; }
.btn.lg { min-height: 46px; font-size: 15px; width: 100%; }
.xbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; border-radius: var(--r-s); color: var(--ink-2); }
.xbtn:hover { background: var(--surface-2); color: var(--ink); } .xbtn.sm { width: 30px; height: 30px; } .xbtn.sm .ic { width: 15px; height: 15px; } .xbtn:disabled { opacity: .35; cursor: not-allowed; }
.lnk { border: 0; background: none; color: var(--brand-2); font-weight: 600; padding: 0 4px; display: inline-flex; align-items: center; gap: 4px; font-size: inherit; } .lnk:hover { text-decoration: underline; } .lnk .ic { width: 15px; height: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.file-btn input { display: none; }
.spin { width: 18px; height: 18px; border: 2px solid var(--line-2); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; } .spin.sm { width: 14px; height: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; gap: 10px; color: var(--mut); padding: 24px; justify-content: center; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.seg button { border: 0; background: var(--surface); width: 36px; height: 32px; display: grid; place-items: center; color: var(--mut); } .seg button.on { background: var(--brand-soft); color: var(--brand-3); }

/* ---------- Forms ---------- */
input, select, textarea { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 8px 11px; min-height: 40px; width: 100%; transition: border-color .12s, box-shadow .12s; font-size: 14px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--mut); }
textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B736D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: left 10px center; padding-inline-end: 30px; }
[dir="ltr"] select { background-position: right 10px center; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--brand); margin: 0; }
input[type="date"], input[type="time"], input[type="number"] { font-variant-numeric: tabular-nums; }
input.code { letter-spacing: .3em; text-align: center; font-size: 18px; }
input.w-sm { width: 90px; } input.w-key { max-width: 120px; }
.frm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.frm .full, .fld.full { grid-column: 1 / -1; }
.frm.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .frm.inline input, .frm.inline select { width: auto; flex: 1; min-width: 120px; }
.fld { display: grid; gap: 5px; min-width: 0; }
.fld > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .fld small { color: var(--mut); font-size: 12px; } .fld .req { color: var(--err); }
.lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 8px 0 6px; }
.sw { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 6px 0; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw .track { flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; margin-top: 2px; }
.sw .track::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sw input:checked + .track { background: var(--brand); } .sw input:checked + .track::after { transform: translateX(18px); } [dir="rtl"] .sw input:checked + .track::after { transform: translateX(-18px); }
.sw input:focus-visible + .track { box-shadow: 0 0 0 3px var(--brand-ring); }
.sw .txt b { display: block; font-weight: 600; } .sw .txt small { color: var(--mut); display: block; font-size: 12px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
.chk { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; cursor: pointer; }
.chk:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-3); }
.radios { display: grid; gap: 8px; margin: 10px 0; }
.radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.radio:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.radio input { margin-top: 3px; } .radio b { display: block; } .radio small { color: var(--mut); display: block; }
.alert { padding: 10px 12px; border-radius: var(--r-s); font-size: 13.5px; margin-bottom: 12px; } .alert.err { background: var(--err-soft); color: var(--err); }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--info-soft); color: var(--info); font-size: 13.5px; margin: 0 0 14px; line-height: 1.5; }
.note .ic { flex: none; margin-top: 2px; } .note.warn { background: var(--warn-soft); color: var(--warn); } .note.err { background: var(--err-soft); color: var(--err); } .note.ok { background: var(--ok-soft); color: var(--ok); } .note.live { animation: pulse 1.4s ease-in-out infinite alternate; }
.note .pre { color: var(--ink); margin-top: 6px; }
@keyframes pulse { from { opacity: .6; } to { opacity: 1; } }

/* ---------- Cards, KPIs, grids ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
.card.accent { border-color: var(--brand); } .card.accent-warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.chead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px 0; }
.chead .hint { color: var(--mut); font-size: 12.5px; } .ctools { margin-inline-start: auto; display: flex; gap: 6px; }
.cbody { padding: 14px 18px 18px; }
.cfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); margin-top: auto; }
.card { display: flex; flex-direction: column; } .cbody { flex: 1; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid2 > .card, .grid3 > .card { margin-bottom: 0; }
.grid2, .grid3 { margin-bottom: 16px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpis.small { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow); }
.kpi[role="button"] { cursor: pointer; } .kpi[role="button"]:hover { border-color: var(--brand); }
.kpi .lb { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 12px; font-weight: 600; } .kpi .lb .ic { width: 15px; height: 15px; }
.kpi .v { font-size: 24px; font-weight: 700; margin-top: 4px; line-height: 1.2; font-family: var(--font-d); } .kpi .v.small { font-size: 15px; font-family: var(--font); } .kpi .v small { font-size: 12px; color: var(--mut); font-weight: 500; font-family: var(--font); }
.kpi.ok .v { color: var(--ok); } .kpi.warn .v { color: var(--err); } .kpi.goldy .v { color: var(--gold); }
.mini-kpis { display: flex; gap: 18px; margin-bottom: 12px; } .mini-kpis div { display: grid; } .mini-kpis b { font-size: 20px; font-family: var(--font-d); } .mini-kpis span { color: var(--mut); font-size: 12px; }
.empty { text-align: center; padding: 36px 16px; color: var(--mut); display: grid; justify-items: center; gap: 10px; } .empty .ic { width: 36px; height: 36px; opacity: .5; } .empty p { max-width: 42ch; }
.res-line { display: flex; gap: 8px; align-items: center; color: var(--mut); font-size: 12.5px; margin: 6px 0 10px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--mut); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.tabs button.on { color: var(--brand-3); border-bottom-color: var(--brand); } .tabs button .cnt { background: var(--surface-3); border-radius: 999px; padding: 0 7px; font-size: 11px; line-height: 18px; color: var(--ink-2); }

/* ---------- Toolbar & filters ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.filter-toggle { display: none; }
.tb-l { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; } .tb-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar select, .filters select, .filters input { width: auto; min-height: 36px; padding: 6px 10px; font-size: 13px; max-width: 200px; }
.toolbar select { padding-inline-end: 28px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.bulkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; background: var(--brand-soft); border: 1px solid var(--brand); border-radius: var(--r); margin-bottom: 10px; }
.bulkbar select, .bulkbar input { width: auto; min-height: 34px; font-size: 13px; padding: 4px 10px; }

/* ---------- Chips, pills, meters ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; line-height: 20px; }
.chip .ic { width: 13px; height: 13px; }
.chip.prA { background: var(--gold-soft); color: var(--gold); } .chip.prB { background: var(--brand-soft); color: var(--brand-3); } .chip.prC { background: var(--surface-3); color: var(--mut); }
.chip.grp { background: var(--info-soft); color: var(--info); }
.chip.st { background: var(--surface-3); color: var(--ink-2); } .chip.st-won { background: var(--ok-soft); color: var(--ok); } .chip.st-hold { background: var(--surface-3); color: var(--mut); text-decoration: line-through; } .chip.st-new { background: var(--info-soft); color: var(--info); } .chip.st-nego, .chip.st-proposal { background: var(--warn-soft); color: var(--warn); }
.chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.warn { background: var(--warn-soft); color: var(--warn); } .chip.bad { background: var(--err-soft); color: var(--err); } .chip.soft { background: var(--surface-2); color: var(--mut); font-weight: 500; }
.chip.due-over { background: var(--err-soft); color: var(--err); } .chip.due-today { background: var(--warn-soft); color: var(--warn); } .chip.due-soon { background: var(--info-soft); color: var(--info); }
.chip.q-ok { background: var(--ok-soft); color: var(--ok); } .chip.q-warn { background: var(--warn-soft); color: var(--warn); } .chip.q-bad { background: var(--err-soft); color: var(--err); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink); max-width: 100%; }
.pill a { color: inherit; } .pill.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.vpill.ok { border-color: var(--ok); } .vpill.bad { border-color: var(--err); } .vpill.bad a { text-decoration: line-through; color: var(--mut); }
.vf { display: inline-flex; gap: 2px; margin-inline-start: 4px; } .vf button { border: 0; background: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--mut); } .vf button:hover { background: var(--surface-3); color: var(--ink); } .vf button.on { background: var(--ok-soft); color: var(--ok); } .vf button.on.bad { background: var(--err-soft); color: var(--err); } .vf .ic { width: 13px; height: 13px; }
.meter { display: inline-block; width: 64px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; vertical-align: middle; margin-inline-end: 6px; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--brand); } .meter i.mid { background: var(--warn); } .meter i.low { background: var(--err); }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; align-items: center; gap: 10px; font-size: 13px; } .bar[role="button"] { cursor: pointer; } .bar[role="button"]:hover .bl { color: var(--brand-2); }
.bar .bt { height: 10px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .bar .bt i { display: block; height: 100%; background: var(--brand); border-radius: 999px; } .bar .bv { min-width: 28px; text-align: end; font-weight: 600; }
.chart { width: 100%; height: auto; }
.usage { margin-bottom: 12px; } .u-l { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; } .usage .meter { width: 100%; height: 8px; }
.status-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.engine-strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); margin-bottom: 16px; background: var(--ok-soft); color: var(--ok); } .engine-strip.off { background: var(--warn-soft); color: var(--warn); }
.engine-strip > div { flex: 1; } .engine-strip b { display: block; } .engine-strip small { color: inherit; opacity: .85; }
.job-status { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); margin-bottom: 14px; } .job-status.on { background: var(--brand-soft); color: var(--brand-3); } .job-status > div { flex: 1; } .job-status b { display: block; } .job-status small { color: var(--mut); }
.log { background: var(--surface-2); border-radius: var(--r-s); padding: 10px 12px; max-height: 320px; overflow: auto; font-size: 13px; } .log-l { padding: 3px 0; border-bottom: 1px dashed var(--line); } .log-l:last-child { border: 0; }

/* ---------- Tables ---------- */
.tblwrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); } .tblwrap.short { max-height: 420px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: start; font-size: 12px; font-weight: 700; color: var(--mut); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); position: sticky; top: 0; white-space: nowrap; z-index: 1; }
.tbl th.sortable { cursor: pointer; } .tbl th.sortable:hover, .tbl th.on { color: var(--brand-3); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr[data-act] { cursor: pointer; } .tbl tbody tr[data-act]:hover { background: var(--surface-2); } .tbl tr.sel { background: var(--brand-soft); }
.tbl td.num, .tbl th.num { text-align: end; } .tbl .w0 { width: 34px; }
.tbl td small { display: block; color: var(--mut); font-size: 12px; }
.cell-name b { font-weight: 600; } .cell-contact span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; margin-inline-end: 2px; color: var(--ok); background: var(--ok-soft); } .cell-contact span.no { color: var(--mut); background: var(--surface-3); opacity: .6; } .cell-contact .ic { width: 13px; height: 13px; }
.tbl tr.ghead td { background: var(--surface-2); font-size: 13px; }
.tbl.map td select { min-height: 34px; padding: 4px 8px; font-size: 13px; }
.tgts { display: grid; gap: 4px; min-width: 150px; } .tgt { display: grid; grid-template-columns: 60px 1fr 42px; gap: 6px; align-items: center; font-size: 11.5px; } .tgt i { display: block; height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .tgt i b { display: block; height: 100%; background: var(--brand); }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 14px 0; color: var(--mut); font-size: 13px; }

/* ---------- Lead cards & directory cards ---------- */
/* merged directory: rows that come from the central directory and are not in the pipeline yet */
.tbl tbody tr.drow td { background: var(--surface-2); } .tbl tbody tr.drow[data-act]:hover td { background: var(--surface-3); } .tbl tbody tr.drow .cell-name b { font-weight: 500; }
.cell-dir { white-space: nowrap; } .cell-dir .btn { min-height: 26px; padding: 2px 8px; font-size: 12px; margin-inline-start: 6px; vertical-align: middle; }
.lcards, .dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.lcard, .dcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); display: grid; gap: 6px; }
.lcard { cursor: pointer; } .lcard:hover, .dcard:hover { border-color: var(--brand); } .lcard.sel, .dcard.sel { background: var(--brand-soft); border-color: var(--brand); } .dcard.taken { opacity: .75; }
.lc-sel, .dc-sel { position: absolute; top: 12px; inset-inline-end: 12px; }
.lc-h, .dc-h { display: flex; align-items: center; gap: 8px; } .lc-h b, .dc-h b { font-weight: 600; font-size: 15px; } .dc-h { cursor: pointer; flex-direction: column; align-items: flex-start; gap: 2px; padding-inline-end: 28px; } .dc-h small { color: var(--mut); }
.lc-en { color: var(--mut); font-size: 12.5px; } .lc-meta, .dc-meta { color: var(--mut); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; } .lc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-contact, .dc-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); } .lc-contact span, .dc-contact span { display: inline-flex; align-items: center; gap: 5px; } .dc-contact .no { color: var(--mut); opacity: .7; } .lc-contact .ic, .dc-contact .ic { width: 14px; height: 14px; }
.dc-biz { font-size: 13px; color: var(--ink-2); margin: 2px 0; } .dc-f { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.dir-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: var(--r-l); background: linear-gradient(135deg, var(--brand-3), var(--brand)); color: #fff; margin-bottom: 16px; }
.dir-hero h2 { font-size: 20px; color: #fff; } .dir-hero p { opacity: .9; margin: 4px 0 0; max-width: 60ch; }
.dir-stats { display: flex; gap: 22px; } .dir-stats div { display: grid; text-align: center; } .dir-stats b { font-size: 22px; font-family: var(--font-d); } .dir-stats span { font-size: 12px; opacity: .9; }
.lrows { display: grid; } .lrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 9px 4px; border: 0; background: none; border-bottom: 1px solid var(--line); } .lrow:last-of-type { border: 0; } .lrow:hover { background: var(--surface-2); }
.lr-n { flex: 1; min-width: 0; display: grid; } .lr-n b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lr-n small { color: var(--mut); font-size: 12px; }
.lnk.more { margin-top: 6px; }
.tips { padding-inline-start: 18px; margin: 10px 0 0; } .tips li { margin-bottom: 2px; }
.drop { display: grid; justify-items: center; gap: 6px; padding: 30px 16px; border: 2px dashed var(--line-2); border-radius: var(--r); text-align: center; cursor: pointer; color: var(--ink-2); background: var(--surface-2); } .drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-soft); } .drop .ic { width: 30px; height: 30px; color: var(--brand); }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--mut); font-size: 13px; margin-bottom: 14px; } .steps b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-3); font-size: 12px; }
.dup-row { display: grid; grid-template-columns: auto 1fr 1fr; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); } .dup-row:last-child { border: 0; }
.dup-cell { display: grid; gap: 2px; } .dup-cell b { font-weight: 600; } .dup-cell small { color: var(--mut); } .dup-tools { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.plain-list { padding-inline-start: 20px; display: grid; gap: 10px; } .plain-list li { padding-bottom: 8px; border-bottom: 1px solid var(--line); } .plain-list li:last-child { border: 0; }
.item-tools { display: flex; gap: 10px; margin-top: 8px; }
.acc { display: grid; gap: 8px; } .acc-i { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .acc-i summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; } .acc-i summary::-webkit-details-marker { display: none; } .acc-i summary b { flex: 1; } .acc-b { padding: 0 16px 14px; }
.stage-list { display: grid; gap: 6px; } .stage-row { display: flex; gap: 6px; align-items: center; } .stage-row input { min-height: 36px; padding: 6px 10px; }
.tpl-item { display: flex; gap: 12px; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); } .tpl-item:last-child { border: 0; }
.tpl-row { display: grid; gap: 4px; width: 100%; text-align: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 8px; } .tpl-row:hover { border-color: var(--brand); } .tpl-row span { color: var(--mut); font-size: 12.5px; }
.code-txt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; }

/* ---------- Board ---------- */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; min-height: 60vh; }
.col { flex: 0 0 272px; background: var(--surface-2); border-radius: var(--r); border: 1px solid var(--line); display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.col-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-2); border-radius: var(--r) var(--r) 0 0; } .col-h .cnt { background: var(--surface); border-radius: 999px; padding: 0 8px; font-size: 12px; line-height: 20px; }
.col-b { padding: 8px; display: grid; gap: 8px; overflow: auto; flex: 1; min-height: 80px; } .col-b.over { background: var(--brand-soft); }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; cursor: grab; box-shadow: var(--shadow); display: grid; gap: 4px; } .kcard:hover { border-color: var(--brand); } .kcard.dragging { opacity: .5; }
.k-h { display: flex; align-items: center; gap: 6px; } .k-h b { font-weight: 600; font-size: 13.5px; } .k-m { color: var(--mut); font-size: 12px; } .k-f { display: flex; gap: 6px; flex-wrap: wrap; }
.col-empty { color: var(--mut); font-size: 12.5px; text-align: center; padding: 18px 8px; border: 1px dashed var(--line-2); border-radius: var(--r-s); }
.plan-list { display: grid; gap: 8px; } .plan-row { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); } .plan-row:last-child { border: 0; }
.pr-main { display: flex; gap: 10px; align-items: center; cursor: pointer; } .pr-main small { display: block; color: var(--mut); font-size: 12px; }
.pr-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); } .pr-meta span { display: inline-flex; align-items: center; gap: 4px; } .pr-meta .ic { width: 14px; height: 14px; }
.pr-tools { display: flex; gap: 8px; align-items: center; } .pr-tools select { width: auto; min-height: 34px; padding: 4px 10px; font-size: 13px; }

/* ---------- Calendar ---------- */
.cal-title { font-family: var(--font-d); font-size: 16px; padding: 0 8px; }
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--line); } .cal-head span { padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--mut); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { min-height: 96px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; display: grid; align-content: start; gap: 3px; } .cal-cell.empty { background: var(--surface-2); } .cal-cell.today { background: var(--brand-soft); } .cal-cell.past .cal-it { opacity: .75; }
.cal-d { font-size: 12px; color: var(--mut); font-weight: 600; } .cal-cell.today .cal-d { color: var(--brand-3); }
.cal-it { border: 0; text-align: start; font-size: 11.5px; padding: 3px 6px; border-radius: 4px; background: var(--info-soft); color: var(--info); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .cal-it.task { background: var(--warn-soft); color: var(--warn); }

/* ---------- Drawer ---------- */
.dr-ovl { position: fixed; inset: 0; background: rgba(15,20,17,.45); z-index: 50; animation: fade .15s; }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(760px, 100%); background: var(--bg); z-index: 51; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: slide .2s ease-out; }
@keyframes fade { from { opacity: 0; } } @keyframes slide { from { transform: translateX(var(--slide-x, -30px)); opacity: 0; } } [dir="ltr"] .drawer { --slide-x: 30px; }
.dr-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 22px 0; }
.dr-row { display: flex; gap: 12px; align-items: flex-start; } .dr-name { flex: 1; min-width: 0; } .dr-name h2 { font-size: 19px; } .dr-name .en { color: var(--mut); font-size: 13px; } .dr-btns { display: flex; gap: 2px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.dr-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.qbtn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13px; text-decoration: none; } .qbtn:hover { border-color: var(--brand); color: var(--brand-3); text-decoration: none; }
.dr-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .dr-tabs button { border: 0; background: none; padding: 10px 12px; font-weight: 600; color: var(--mut); border-bottom: 2px solid transparent; white-space: nowrap; min-height: 44px; } .dr-tabs button.on { color: var(--brand-3); border-bottom-color: var(--brand); }
.dr-body { flex: 1; overflow: auto; padding: 18px 22px 40px; }
.kvs { display: grid; gap: 10px; margin: 0; } .kvs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px; margin: 0; align-items: start; } .kv dt { color: var(--mut); font-size: 12.5px; font-weight: 600; padding-top: 2px; } .kv dd { margin: 0; min-width: 0; word-break: break-word; } .kv dd.mut { color: var(--mut); }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .timeline li { display: flex; gap: 12px; } .tl-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); } .tl-ic .ic { width: 15px; height: 15px; } .tl-ic.call { background: var(--ok-soft); color: var(--ok); } .tl-ic.meet, .tl-ic.visit { background: var(--info-soft); color: var(--info); } .tl-ic.msg { background: var(--warn-soft); color: var(--warn); }
.tl-h { display: flex; gap: 8px; align-items: baseline; font-size: 13px; } .tl-t { white-space: pre-line; }
.tasks { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; } .tasks li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } .tasks li.done span { text-decoration: line-through; color: var(--mut); } .tasks .chk { border: 0; padding: 0; flex: 1; background: none; }
.files { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; } .files li { display: flex; align-items: center; gap: 8px; } .files a { flex: 1; }
.hist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; } .hist s { color: var(--mut); }
textarea.notes { width: 100%; }

/* ---------- Modal ---------- */
.ovl { position: fixed; inset: 0; background: rgba(15,20,17,.5); z-index: 60; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { width: min(640px, 100%); max-height: calc(100vh - 32px); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: pop .18s ease-out; }
.ovl.wide .modal { width: min(900px, 100%); } .ovl.narrow .modal { width: min(440px, 100%); }
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.m-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); } .m-head > div { flex: 1; min-width: 0; } .m-sub { color: var(--mut); font-size: 12.5px; }
.m-body { padding: 16px 20px; overflow: auto; flex: 1; } .m-text { font-size: 15px; }
.m-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.f-tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .f-tabs button { border: 0; background: none; padding: 10px 12px; font-weight: 600; color: var(--mut); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; min-height: 44px; } .f-tabs button.on { color: var(--brand-3); border-bottom-color: var(--brand); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 100; width: max-content; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); padding: 11px 14px; border-radius: var(--r); box-shadow: var(--shadow-lg); font-size: 13.5px; animation: pop .2s; } .toast .ic { color: var(--brand); flex: none; } .toast.err { background: var(--err); color: #fff; } .toast.err .ic { color: #fff; } .toast.out { opacity: 0; transition: opacity .3s; }

/* ---------- Settings ---------- */
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.set-nav { display: grid; gap: 2px; position: sticky; top: calc(var(--top-h) + 16px); }
.set-nav button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: var(--r-s); text-align: start; color: var(--ink-2); font-weight: 500; min-height: 40px; } .set-nav button:hover { background: var(--surface-2); } .set-nav button.on { background: var(--brand-soft); color: var(--brand-3); font-weight: 600; }
.set-head { margin-bottom: 14px; } .set-head h2 { font-size: 18px; }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
.auth-art { position: relative; background: linear-gradient(160deg, var(--brand-3) 0%, var(--brand) 100%); color: #fff; overflow: hidden; }
.auth-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-copy { position: relative; padding: 48px; max-width: 520px; display: grid; gap: 14px; height: 100%; align-content: end; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-d); font-size: 22px; font-weight: 700; } .auth-brand svg { width: 48px; height: 48px; border-radius: 12px; }
.auth-copy h2 { font-size: 30px; color: #fff; line-height: 1.25; } .auth-copy p { opacity: .9; font-size: 15px; max-width: 46ch; }
.auth-pane { display: grid; place-items: center; padding: 32px 24px; position: relative; }
.auth-lang { position: absolute; top: 16px; inset-inline-end: 16px; display: flex; gap: 6px; } .auth-lang .tbtn { flex: none; padding: 0 12px; }
.auth-card { width: min(420px, 100%); display: grid; gap: 14px; } .auth-card h1 { font-size: 24px; } .auth-sub { color: var(--mut); margin-top: -8px; }
.auth-note { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 12.5px; justify-content: center; }

/* ---------- Investor roadmap ---------- */
.road { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 20px; align-items: start; }
.rd-side { position: sticky; top: calc(var(--top-h) + 12px); max-height: calc(100vh - var(--top-h) - 24px); overflow: auto; display: grid; gap: 10px; scrollbar-width: thin; }
.rd-tools { display: grid; gap: 8px; } .rd-search { width: 100%; max-width: 100%; } .rd-search input { height: 38px; font-size: 13.5px; } .rd-tools .fld span { font-size: 12px; }
.rd-toc { display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px; }
.rd-toc-b { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: none; padding: 8px 10px; border-radius: var(--r-s); font-size: 13px; font-weight: 600; color: var(--ink-2); min-height: 36px; }
.rd-toc-b .ic { width: 16px; height: 16px; flex: none; color: var(--mut); } .rd-toc-b span:not(.cnt) { flex: 1; line-height: 1.25; } .rd-toc-b:hover { background: var(--surface-2); } .rd-toc-b.on { background: var(--brand-soft); color: var(--brand-3); } .rd-toc-b.on .ic { color: var(--brand-2); }
.rd-toc-b .cnt { background: var(--warn-soft); color: var(--warn); border-radius: 999px; padding: 0 7px; font-size: 11px; line-height: 18px; }
.rd-toc-g { font-size: 11px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; padding: 10px 10px 4px; }
.rd-meta { padding: 0 4px; line-height: 1.6; }
.rd-main { min-width: 0; }
.rd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .rd-head h2 { font-size: 20px; margin-bottom: 6px; } .rd-head .btn-row { margin: 0; }
.rd-intro .cbody { font-size: 15px; line-height: 1.7; }
.rd-body p { margin-bottom: .7em; } .rd-body h4 { margin: 14px 0 6px; } .rd-body h5 { margin: 12px 0 4px; font-size: 13px; }
.rd-ul, .rd-ol { margin: 4px 0 10px; padding-inline-start: 22px; display: grid; gap: 5px; } .rd-ul li, .rd-ol li { line-height: 1.6; } .rd-ul.small { font-size: 12.5px; color: var(--ink-2); }
.rd-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .rd-jump a { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); } .rd-jump a:hover { border-color: var(--brand); color: var(--brand-3); text-decoration: none; }
.rd-sec { scroll-margin-top: calc(var(--top-h) + 12px); } .rd-sec .chead h3 { font-size: 16px; }
.rd-h { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-size: 13.5px; color: var(--brand-3); } .rd-h .ic { width: 16px; height: 16px; } .rd-h small { font-weight: 500; }
.rd-steps { counter-reset: st; list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.rd-steps li { position: relative; padding: 10px 12px 10px; padding-inline-start: 46px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.rd-steps li::before { counter-increment: st; content: counter(st); position: absolute; inset-inline-start: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 12px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.rd-step-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; } .rd-step-h b { font-size: 14px; } .rd-steps p { font-size: 13.5px; color: var(--ink-2); margin: 4px 0; }
.rd-check { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; } .rd-check .chk { border-radius: var(--r-s); width: 100%; align-items: flex-start; font-size: 13.5px; line-height: 1.5; } .rd-check input { margin-top: 3px; }
.rd-tbl { font-size: 13px; } .rd-tbl td, .rd-tbl th { vertical-align: top; line-height: 1.5; } .rd-tbl th { white-space: nowrap; }
.rd-laws { display: grid; gap: 8px; margin: 12px 0; }
.rd-law { border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--gold-soft) 55%, var(--surface)); }
.rd-law > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 13.5px; flex-wrap: wrap; } .rd-law > summary::-webkit-details-marker { display: none; } .rd-law > summary .ic { width: 16px; height: 16px; color: var(--gold); flex: none; }
.rd-quote { margin: 0 14px 12px; padding: 12px 16px; border-inline-start: 3px solid var(--gold); background: var(--surface); border-radius: var(--r-s); font-size: 14px; line-height: 1.85; white-space: pre-line; } .rd-quote.alt { opacity: .92; font-size: 13.5px; }
.rd-law-alt { margin: 0 14px 12px; } .rd-law-alt > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--brand-2); padding: 4px 0; list-style: none; } .rd-law-alt > summary::-webkit-details-marker { display: none; } .rd-law-alt .rd-quote { margin: 8px 0 0; }
.rd-law p.mut { margin: 0 14px 12px; }
.rd-note { margin: 10px 0; } .rd-note > div:first-child { flex: none; } .rd-note > div:last-child { flex: 1; min-width: 0; } .rd-note b { display: block; margin-bottom: 4px; } .rd-note .rd-ul { margin-bottom: 0; color: inherit; } .rd-note .pills { margin-top: 6px; } .rd-note a { color: inherit; text-decoration: underline; }
.rd-src { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12.5px; } .rd-src .lbl { font-weight: 700; color: var(--mut); } .rd-src a { display: inline-flex; align-items: center; gap: 4px; } .rd-src .ic { width: 13px; height: 13px; }
.rd-path { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.rd-path a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); } .rd-path a:hover { border-color: var(--brand); text-decoration: none; }
.rd-path .n { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 700; flex: none; } .rd-path .txt { flex: 1; display: grid; } .rd-path .txt small { color: var(--mut); } .rd-path .ic { color: var(--mut); } [dir="rtl"] .rd-path .ic { transform: scaleX(-1); }
.rd-hit { display: block; padding: 12px 16px; color: var(--ink); } .rd-hit:hover { text-decoration: none; border-color: var(--brand); } .rd-hit b { display: block; } .rd-hit p { margin: 4px 0 0; color: var(--ink-2); }
.rd-gloss { margin: 0; display: grid; gap: 8px; } .rd-term { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; } .rd-term dt { font-weight: 700; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .rd-term dt small { font-weight: 500; } .rd-term dd { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }
.rd-disc { margin-top: 18px; font-size: 12.5px; }
.rd-find-h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 12px; } .rd-find p { margin: 6px 0; } .rd-find.dismissed { opacity: .65; }
.rd-print h2 { margin-top: 16px; } .rd-print h3 { margin-top: 12px; } .rd-print blockquote { border-inline-start: 3px solid #999; margin: 6px 0; padding: 4px 10px; white-space: pre-line; } .rd-print hr { border: 0; border-top: 1px solid #ccc; margin: 12px 0; } .rd-print table { width: 100%; border-collapse: collapse; font-size: 9.5pt; } .rd-print td, .rd-print th { border-bottom: 1px solid #bbb; padding: 3px 6px; text-align: start; vertical-align: top; }
@media (max-width: 1100px) { .road { grid-template-columns: 220px minmax(0, 1fr); gap: 14px; } }
@media (max-width: 860px) {
  .road { grid-template-columns: 1fr; } .rd-side { position: static; max-height: none; overflow: visible; }
  .rd-toc { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 6px; } .rd-toc-b { width: auto; white-space: nowrap; flex: none; } .rd-toc-g { display: none; }
  .rd-steps li { padding-inline-start: 40px; } .rd-quote { font-size: 13.5px; }
}

/* ---------- Print ---------- */
#print-root { display: none; }
@media print {
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; padding: 12mm; font-size: 11pt; color: #000; background: #fff; }
  .pr-head { display: flex; gap: 12px; align-items: center; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; } .pr-head img { width: 44px; height: 44px; object-fit: contain; } .pr-t { flex: 1; } .pr-title { font-size: 16pt; font-weight: 700; } .pr-sub { color: #444; } .pr-meta { text-align: end; font-size: 9.5pt; color: #444; }
  .pr-foot { margin-top: 14px; border-top: 1px solid #999; padding-top: 6px; font-size: 9pt; color: #555; }
  .tbl.print { width: 100%; border-collapse: collapse; font-size: 9.5pt; } .tbl.print th, .tbl.print td { border-bottom: 1px solid #bbb; padding: 4px 6px; text-align: start; vertical-align: top; } .tbl.print th { background: #eee; }
  @page { size: A4; margin: 10mm; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .searchwrap { width: 240px; }
}
@media (max-width: 860px) {
  .side { position: fixed; inset-inline-start: 0; top: 0; transform: translateX(var(--side-x, 100%)); transition: transform .2s; width: min(300px, 86vw); height: 100vh; box-shadow: var(--shadow-lg); } [dir="ltr"] .side { --side-x: -100%; }
  body.side-open .side { transform: none; }
  .brand .side-close { display: inline-grid; }
  .side-ovl { display: block; position: fixed; inset: 0; background: rgba(15,20,17,.45); z-index: 29; opacity: 0; pointer-events: none; transition: opacity .2s; } body.side-open .side-ovl { opacity: 1; pointer-events: auto; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 10px 16px; gap: 10px; } .tb-title .sub { display: none; } .tb-title h1 { font-size: 17px; }
  .topbar .searchwrap { width: 44px; max-width: 44px; } .topbar .searchwrap input { padding-inline-start: 0; opacity: 0; } .topbar .searchwrap:focus-within { width: 60vw; max-width: 60vw; position: absolute; inset-inline-start: 60px; z-index: 5; } .topbar .searchwrap:focus-within input { padding-inline-start: 36px; opacity: 1; }
  .toolbar.collapsible .tb-l > select, .toolbar.collapsible .tb-l > .btn:not(.filter-toggle) { display: none; } .toolbar.collapsible.open .tb-l > .btn { display: inline-flex; } .toolbar.collapsible.open .tb-l > select { display: block; width: calc(50% - 4px); max-width: none; } .toolbar.collapsible .filter-toggle { display: inline-flex; }
  .tb-new span { display: none; } .tb-new { padding: 0 12px; }
  .view { padding: 16px 16px calc(var(--mnav-h) + 24px); }
  .mnav { display: flex; position: fixed; bottom: 0; inset-inline: 0; height: var(--mnav-h); background: var(--surface); border-top: 1px solid var(--line); z-index: 28; padding-bottom: env(safe-area-inset-bottom); }
  .mnav a { flex: 1; display: grid; place-items: center; gap: 2px; font-size: 11px; color: var(--mut); text-decoration: none; font-weight: 600; } .mnav a.on { color: var(--brand-3); } .mnav .ic { width: 22px; height: 22px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .frm { grid-template-columns: 1fr; } .kvs.two { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .settings { grid-template-columns: minmax(0, 1fr); } #set-body { min-width: 0; max-width: 100%; } .set-nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 6px; scrollbar-width: none; } .set-nav button { white-space: nowrap; }
  .auth { grid-template-columns: 1fr; } .auth-art { min-height: 200px; } .auth-copy { padding: 24px; align-content: end; } .auth-copy h2 { font-size: 22px; } .auth-copy p { display: none; }
  .drawer { width: 100%; } .dr-head { padding: 12px 16px 0; } .dr-body { padding: 14px 16px 60px; }
  .toolbar select { max-width: 46vw; } .cal-cell { min-height: 64px; } .cal-it { font-size: 10px; }
  .dup-row { grid-template-columns: 1fr; } .board { min-height: 50vh; } .col { flex-basis: 84vw; }
  .dir-hero { padding: 18px; } .dir-stats { gap: 14px; }
  .bulkbar select, .bulkbar input { flex: 1; }
  .toasts { bottom: calc(var(--mnav-h) + 12px); }
  input, select, textarea { font-size: 16px; }
}
@media (max-width: 480px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi .v { font-size: 20px; }
  .lcards, .dcards { grid-template-columns: 1fr; }
  .m-foot .btn { flex: 1; }
}

/* ---------- AI assistant (panel, page, messages) ---------- */
.assist-fab { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 12px; height: 46px; border-radius: 999px; border: 0; background: var(--brand); color: var(--on-brand); font-weight: 700; box-shadow: var(--shadow-lg); }
.assist-fab .ic { width: 20px; height: 20px; } .assist-fab:hover { background: var(--brand-2); }
body.assist-open .assist-fab, body.locked .assist-fab, body:has(.view-chat) .assist-fab { display: none; }
.assist-panel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(460px, 100%); background: var(--bg); z-index: 45; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); border-inline-start: 1px solid var(--line); animation: slide .2s ease-out; }
.ap-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ap-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .ap-title .ic { width: 22px; height: 22px; color: var(--brand); flex: none; } .ap-title > div { min-width: 0; } .ap-title b { display: block; font-family: var(--font-d); } .ap-title small { display: block; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.ap-btns { display: flex; gap: 2px; flex: none; }
.ap-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ap-msgs { flex: 1; overflow: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 10px; max-width: 100%; }
.msg.user { justify-content: flex-end; } .msg.user .msg-body { background: var(--brand); color: var(--on-brand); border-radius: var(--r-l); border-end-end-radius: 4px; padding: 10px 14px; max-width: 85%; white-space: pre-wrap; word-break: break-word; }
.msg.bot .msg-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-3); display: grid; place-items: center; } .msg.bot .msg-av .ic { width: 16px; height: 16px; }
.msg-wrap { min-width: 0; flex: 1; }
.msg.bot .msg-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); border-start-start-radius: 4px; padding: 10px 14px; word-break: break-word; }
.msg.bot.err .msg-body { background: var(--err-soft); color: var(--err); border-color: transparent; }
.msg-body p { margin: 0 0 .5em; } .msg-body p:last-child { margin: 0; } .msg-body ul, .msg-body ol { margin: .3em 0 .5em; padding-inline-start: 1.3em; } .msg-body li { margin: .15em 0; } .msg-body h4 { margin: .6em 0 .3em; }
.msg-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; direction: ltr; unicode-bidi: embed; }
.msg-body pre.code { background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-s); overflow: auto; direction: ltr; text-align: left; font-size: 12.5px; margin: .4em 0; } .msg-body pre.code code { background: none; padding: 0; }
.msg-body blockquote { margin: .4em 0; padding-inline-start: 10px; border-inline-start: 3px solid var(--line-2); color: var(--ink-2); }
.msg-body .tblwrap.md { margin: .5em 0; box-shadow: none; } .msg-body .tbl th, .msg-body .tbl td { padding: 6px 10px; font-size: 13px; }
.lead-ref { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--brand-soft); background: var(--brand-soft); color: var(--brand-3); border-radius: 999px; padding: 0 8px; font-weight: 600; font-size: 12.5px; line-height: 22px; vertical-align: middle; font-family: inherit; }
.lead-ref small { color: var(--mut); font-weight: 500; font-size: 11px; } .lead-ref:hover { border-color: var(--brand); } .lead-ref.off { background: var(--surface-2); color: var(--mut); border-color: var(--line); } .lead-ref.dir { background: var(--info-soft); color: var(--info); border-color: transparent; } .lead-ref .ic { width: 13px; height: 13px; }
.msg.user .lead-ref { background: rgba(255,255,255,.2); color: inherit; border-color: transparent; }
.msg-tools { display: flex; gap: 4px; margin-top: 2px; opacity: 0; transition: opacity .15s; } .msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; } .msg-tools .lnk { color: var(--mut); }
.tools-used { font-size: 12px; color: var(--mut); margin-top: 4px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .tools-used .ic { width: 13px; height: 13px; }
.srcs { margin-top: 6px; font-size: 12.5px; } .srcs summary { cursor: pointer; color: var(--mut); display: flex; align-items: center; gap: 4px; list-style: none; } .srcs summary .ic { width: 13px; height: 13px; } .srcs ul { margin: 4px 0 0; padding-inline-start: 1.2em; } .srcs li { margin: 2px 0; }
.confirm-card { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); border-radius: var(--r); font-size: 13.5px; flex-wrap: wrap; }
.confirm-card > .ic { flex: none; margin-top: 2px; color: var(--warn); } .confirm-card > div:nth-child(2) { flex: 1; min-width: 160px; } .confirm-card.done { background: var(--surface-2); border-color: var(--line); } .confirm-card.done > .ic { color: var(--mut); } .confirm-card .btn-row { margin: 0; flex: none; }
.ap-status { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 12.5px; padding: 2px 4px; } .ap-status[hidden] { display: none; }
.ap-empty { text-align: center; padding: 30px 10px; margin: auto 0; } .ap-empty .ic { width: 40px; height: 40px; color: var(--brand); } .ap-empty h3 { margin: 10px 0 4px; }
.ap-sugg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.sg-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); text-align: start; } .sg-chip:hover { border-color: var(--brand); color: var(--brand-3); }
.ap-off { margin: 0 14px 8px; align-items: center; } .ap-off span { flex: 1; }
.ap-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line); }
.ap-input textarea { flex: 1; resize: none; min-height: 42px; max-height: 160px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); line-height: 1.45; font-size: 14px; }
.ap-input textarea:focus { outline: 2px solid var(--brand-ring); border-color: var(--brand); } .ap-input .btn { width: 44px; min-height: 42px; padding: 0; flex: none; }
.ap-foot { padding: 4px 14px 8px; background: var(--surface); text-align: center; }
.chat-page { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; height: calc(100vh - var(--top-h) - 62px); min-height: 480px; }
.chat-main { min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; } .chat-main .ap-body { height: 100%; } .chat-main .ap-msgs { background: var(--bg); }
.chat-list { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; } .cl-items { overflow: auto; display: grid; gap: 4px; align-content: start; min-width: 0; }
.cl-item { display: flex; align-items: center; gap: 2px; border-radius: var(--r-s); } .cl-item.on { background: var(--brand-soft); } .cl-item:hover { background: var(--surface-2); } .cl-item.on:hover { background: var(--brand-soft); }
.cl-open { flex: 1; min-width: 0; border: 0; background: none; text-align: start; padding: 8px 10px; display: grid; } .cl-open b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13.5px; } .cl-open small { color: var(--mut); font-size: 11.5px; }
.inrow { display: flex; gap: 6px; align-items: center; } .inrow input { flex: 1; min-width: 0; }
.as-pick { cursor: pointer; border: 0; margin: 2px 0; }
@media (max-width: 860px) {
  .assist-panel { width: 100%; }
  .assist-fab { bottom: calc(var(--mnav-h) + 14px); inset-inline-end: 14px; padding: 0; width: 50px; justify-content: center; } .assist-fab span { display: none; }
  .chat-page { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .chat-list { flex-direction: row; align-items: center; max-width: 100%; } .chat-list .cl-items { display: flex; overflow-x: auto; gap: 6px; flex: 1; min-width: 0; scrollbar-width: none; } .cl-item { flex: none; max-width: 200px; }
  .chat-main { height: calc(100vh - var(--top-h) - var(--mnav-h) - 130px); min-height: 420px; }
}

/* ---------- Legal & compliance ---------- */
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.legal-links a { color: var(--mut); text-decoration: none; } .legal-links a:hover { color: var(--brand); text-decoration: underline; }
.legal-links.auth-legal { justify-content: center; margin-top: 18px; } .legal-links.inline { margin: 10px 0 14px; }
.auth-terms { font-size: 12.5px; color: var(--mut); text-align: center; margin: 12px 0 0; }
.consent-chk { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; font-size: 13.5px; cursor: pointer; } .consent-chk input { margin-top: 3px; flex: none; }
.cookie-note { position: fixed; bottom: 16px; inset-inline: 16px; z-index: 150; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-l); box-shadow: var(--shadow-lg); font-size: 13.5px; }
.cookie-note span { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; } .cookie-note .ic { color: var(--brand); flex: none; } .cookie-note a { color: var(--brand); }
@media (min-width: 900px) { .cookie-note { inset-inline: auto 24px; max-width: 560px; } }
.legal-doc h1 { font-size: 20px; margin-bottom: 8px; } .legal-doc h2 { font-size: 15.5px; margin: 18px 0 6px; } .legal-doc h3 { font-size: 14px; margin: 12px 0 4px; }
.legal-doc p, .legal-doc li { font-size: 14px; line-height: 1.7; } .legal-doc ul { padding-inline-start: 20px; }
.legal-doc table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13.5px; } .legal-doc th, .legal-doc td { border: 1px solid var(--line); padding: 6px 10px; text-align: start; }
.pillbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .pillbar button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--ink-2); cursor: pointer; } .pillbar button.on { background: var(--brand-soft); color: var(--brand-3); border-color: var(--brand); }
.set-body #lg-text { width: 100%; font-size: 13px; line-height: 1.6; margin: 10px 0; }
/* v32: validation badges, board overflow, aggregate colours */
.chip.vbadge { margin-inline-start: 6px; font-size: 11px; padding: 1px 7px; vertical-align: middle; } .chip.vbadge .ic { width: 12px; height: 12px; margin-inline-end: 3px; }
.chip.vbadge.warn { background: var(--warn-soft); color: var(--warn); } .chip.vbadge.bad { background: var(--bad-soft, #fde8e8); color: var(--bad, #b42318); }
.cell-name .vbadge { display: inline-flex; align-items: center; } .lc-h .vbadge, .dc-h .vbadge { margin-inline-start: 4px; }
.col-more { width: 100%; justify-content: center; margin-top: 4px; }
.mini-kpis b.warn { color: var(--warn); } .mini-kpis b.bad { color: var(--bad, #b42318); }
.ta-c { text-align: center; padding: 8px; }
.res-line .warn { color: var(--warn); }

/* the storage notice must never cover the assistant's input (panel or full page) */
body.assist-open .cookie-note, body:has(.view-chat) .cookie-note { bottom: auto; top: 16px; }

/* ---------- Onboarding checklist ---------- */
.onboard { margin-bottom: 16px; border-color: var(--brand); } .onboard .chead { display: flex; align-items: center; gap: 10px; } .onboard .chead h3 { flex: 1; }
.ob-bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-bottom: 12px; } .ob-bar i { display: block; height: 100%; background: var(--brand); }
.ob-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-steps li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r); background: var(--surface-2); }
.ob-steps li > div { flex: 1; min-width: 0; } .ob-steps li small { display: block; color: var(--mut); font-size: 12.5px; }
.ob-steps li.done { opacity: .7; } .ob-steps li.done .ic { color: var(--ok); }
.ob-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-3); font-weight: 700; font-size: 12.5px; flex: none; }
kbd { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface-2); }

/* ---------- Detailed classification & visibility ---------- */
.chip.cls { background: var(--info-soft); color: var(--info); font-weight: 500; } .chip.cls-legal { background: var(--surface-3); color: var(--ink-2); } .chip.cls-bsize { background: var(--gold-soft); color: var(--gold); }
.cell-cls { white-space: nowrap; } .cell-cls .chip { margin-inline-end: 3px; }
.vis-box { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; background: var(--surface-2); }
.vis-sks summary { cursor: pointer; font-weight: 600; } .vis-sks input[type=search] { margin: 8px 0; width: 100%; }
.vis-list { max-height: 260px; overflow: auto; display: grid; gap: 8px; } .vis-grp b { display: block; font-size: 12.5px; color: var(--mut); margin-bottom: 4px; }
.vis-sk { display: inline-flex; align-items: center; gap: 5px; margin: 2px 10px 2px 0; font-size: 13px; cursor: pointer; }