/* Compliance Monitoring by J23 — UI */
:root {
  --bg: #0A1628; --bg2: #0C1A2F; --panel: #0F1E35; --panel2: #132642; --line: #1C3152; --line2: #27426B;
  --ink: #E7EEF8; --ink2: #C3D0E3; --muted: #8CA0BD; --dim: #5D7393;
  --accent: #F97316; --accent2: #FB923C; --accentInk: #1A0E03;
  --good: #34D399; --warn: #FBBF24; --bad: #F87171; --info: #60A5FA; --violet: #A78BFA;
  --goodBg: rgba(52,211,153,.12); --warnBg: rgba(251,191,36,.12); --badBg: rgba(248,113,113,.13); --infoBg: rgba(96,165,250,.12);
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --field: #0B1830; --thead: #0E1C32; --row: #172B49; --hover: rgba(255,255,255,.03); --toast: #12233F; --tipBg: #091426; --avatar: #1E3A64; --scroll: #22385A; --line3: #3A5A88; --onSel: #fff;
  --r: 8px; --r2: 12px;
  --side: 252px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 13.5px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
a { color: var(--accent2); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(249,115,22,.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.muted { color: var(--muted); } .dim { color: var(--dim); }
.hidden { display: none !important; }
h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 650; letter-spacing: -.01em; }

/* ---------- shell */
#app { display: grid; grid-template-columns: var(--side) 1fr; grid-template-rows: 56px 1fr; height: 100vh; }
#app.collapsed { --side: 64px; }
.side { grid-row: 1 / 3; background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.brand { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; cursor: pointer; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-text { line-height: 1.1; white-space: nowrap; }
.brand-text b { font-family: var(--display); font-size: 14px; font-weight: 650; }
.brand-text span { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--accent); }
.collapsed .brand-text, .collapsed .nav-label, .collapsed .nav-group, .collapsed .side-foot .txt { display: none; }
.nav { flex: 1; overflow: auto; padding: 8px 8px 16px; }
.nav-group { font-size: 11px; color: var(--dim); padding: 14px 10px 4px; }
.nav a .nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 7px; color: var(--ink2); position: relative; white-space: nowrap; }
.nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav a.on { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 2%, transparent)); color: var(--onSel); }
.nav a.on::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav a.on svg { color: var(--accent); opacity: 1; }
.nav .count { margin-left: auto; font: 11px var(--mono); color: var(--bad); }
.side-foot { border-top: 1px solid var(--line); padding: 10px 14px; font-size: 11.5px; color: var(--dim); display: flex; gap: 8px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.on { background: var(--good); box-shadow: 0 0 8px var(--good); } .dot.off { background: var(--warn); }

.top { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); position: relative; z-index: 5; }
.icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink2); position: relative; flex: none; }
.icon-btn:hover { background: var(--panel); border-color: var(--line); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accentInk); font: 600 10px/16px var(--mono); text-align: center; }
.search { flex: 1; max-width: 460px; position: relative; }
.search input[type=search] { width: 100%; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); padding: 0 12px 0 34px; }
.search svg { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; color: var(--dim); }
.search-results { position: absolute; top: 40px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; max-height: 420px; overflow: auto; box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.search-results a { display: flex; gap: 10px; padding: 8px 12px; color: var(--ink); border-bottom: 1px solid var(--line); }
.search-results a:hover, .search-results a.sel { background: var(--panel2); }
.search-results small { color: var(--accent2); font-family: var(--mono); white-space: nowrap; min-width: 110px; }
.scope { display: flex; gap: 6px; }
.scope select { height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); padding: 0 8px; max-width: 170px; }
.scope select.set { border-color: var(--accent); }
.spacer { flex: 1; }
.me { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.me:hover { background: var(--panel); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--avatar); color: #fff; display: grid; place-items: center; font: 600 12px var(--display); flex: none; }
.me .who { line-height: 1.15; font-size: 12.5px; } .me .who small { display: block; color: var(--dim); font-size: 11px; }

main { overflow: auto; position: relative; }
.page { padding: 22px 26px 60px; max-width: 1560px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; }
.page-head p { margin: 3px 0 0; color: var(--muted); max-width: 72ch; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- controls */
.btn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 500; }
.btn:hover { border-color: var(--line3); background: var(--panel2); }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accentInk); font-weight: 600; }
.btn.primary:hover { background: var(--accent2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink2); }
.btn.ghost:hover { background: var(--panel); }
.btn.danger { color: var(--bad); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.busy { pointer-events: none; opacity: .7; }
.btn.busy::after { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 0 12px; height: 32px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--panel2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=number], input[type=date], input[type=month], input[type=time], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; height: 34px; border-radius: 7px; border: 1px solid var(--line2); background: var(--field); padding: 0 10px; color: var(--ink);
}
textarea { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.18); }
input[type=date], input[type=month], input[type=time], input[type=datetime-local] { color-scheme: dark; }
select { color-scheme: dark; }
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
label.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
label.field > span { font-size: 12px; color: var(--muted); }
label.field > span b { color: var(--accent); font-weight: 500; }
.help { font-size: 11.5px; color: var(--dim); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-group-title { grid-column: 1 / -1; font-size: 12px; color: var(--accent2); border-bottom: 1px solid var(--line); padding: 8px 0 4px; margin-top: 4px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line2); background: var(--bg2); font-size: 12px; cursor: pointer; user-select: none; }
.chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--onSel); }
.rating { display: inline-flex; gap: 4px; }
.rating button { width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--line2); background: var(--field); cursor: pointer; font-family: var(--mono); color: var(--muted); }
.rating button.on { color: #10131A; font-weight: 700; border-color: transparent; }
.calc-out { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 7px; background: var(--bg2); border: 1px dashed var(--line2); font-family: var(--mono); }

/* ---------- surfaces */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.card-h h3 { font-size: 14px; font-weight: 600; }
.card-h .r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card-b { padding: 14px 16px; }
.grid { display: grid; gap: 14px; }
.g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.empty { padding: 34px 20px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; font-family: var(--display); }
.empty .btn { margin-top: 12px; }

/* status pills */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 550; white-space: nowrap; background: var(--infoBg); color: var(--info); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.good { background: var(--goodBg); color: var(--good); }
.pill.warn { background: var(--warnBg); color: var(--warn); }
.pill.bad { background: var(--badBg); color: var(--bad); }
.pill.mute { background: rgba(140,160,189,.12); color: var(--muted); }
.pill.orange { background: rgba(249,115,22,.14); color: var(--accent2); }
.lvl { display: inline-block; padding: 1px 7px; border-radius: 4px; font: 600 11.5px var(--mono); color: #0B1220; }

/* ---------- tables */
.table-tools { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.table-tools .q { position: relative; width: 260px; }
.table-tools .q input[type=search] { padding-left: 30px; height: 32px; }
.table-tools .q svg { position: absolute; left: 9px; top: 8px; width: 15px; height: 15px; color: var(--dim); }
.table-tools select { width: auto; height: 32px; }
.tbl-wrap { overflow: auto; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { position: sticky; top: 0; background: var(--thead); text-align: left; font-weight: 550; font-size: 12px; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; z-index: 1; }
.tbl th.sorted { color: var(--ink); } .tbl th.sorted::after { content: " ▲"; font-size: 9px; color: var(--accent); } .tbl th.desc::after { content: " ▼"; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--row); vertical-align: top; max-width: 380px; }
.tbl td.wrap { white-space: normal; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.tbl .mono { white-space: nowrap; }
.tbl .clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tbl-foot { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--muted); font-size: 12px; }
.tbl-foot .r { margin-left: auto; display: flex; gap: 6px; }

/* ---------- drawer / modal / toast */
.scrim { position: fixed; inset: 0; background: rgba(4,10,20,.6); z-index: 40; animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 94vw); background: var(--bg2); border-left: 1px solid var(--line2); z-index: 41; display: flex; flex-direction: column; animation: slidein .2s cubic-bezier(.2,.8,.2,1); box-shadow: -30px 0 60px rgba(0,0,0,.4); }
.drawer.wide { width: min(1100px, 96vw); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.drawer-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-h h2 { font-size: 17px; } .drawer-h .sub { color: var(--muted); font-size: 12px; }
.drawer-b { flex: 1; overflow: auto; padding: 18px 20px 30px; }
.drawer-f { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.modal { position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); width: min(560px, 92vw); max-height: 76vh; display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line2); border-radius: 14px; z-index: 51; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: pop .16s ease; }
.modal.wide { width: min(900px, 94vw); }
@keyframes pop { from { transform: translate(-50%, 8px); opacity: 0; } }
.modal .drawer-b { padding: 16px 20px; }
.scrim.top { z-index: 50; }
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { min-width: 260px; max-width: 420px; padding: 10px 14px; border-radius: 9px; background: var(--toast); border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: pop2 .2s ease; display: flex; gap: 10px; }
.toast.err { border-color: rgba(248,113,113,.5); } .toast.ok { border-color: rgba(52,211,153,.45); }
@keyframes pop2 { from { transform: translateY(8px); opacity: 0; } }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 9px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--ink); border-color: var(--accent); }
.tabs button .n { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-left: 4px; }

/* ---------- KPI tiles & widgets */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { padding: 12px 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; position: relative; overflow: hidden; }
.kpi:hover { border-color: var(--line2); }
.kpi .v { font: 600 26px/1.1 var(--mono); letter-spacing: -.03em; }
.kpi .l { color: var(--muted); font-size: 12px; margin-top: 4px; }
.kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone, var(--info)); }
.kpi.good { --tone: var(--good); } .kpi.warn { --tone: var(--warn); } .kpi.bad { --tone: var(--bad); }
.kpi.bad.nz .v { color: var(--bad); } .kpi.warn.nz .v { color: var(--warn); }
.widget { grid-column: span var(--w, 6); min-width: 0; }
.widget .card-b { min-height: 120px; }
.dash-edit .widget { outline: 1px dashed var(--line2); outline-offset: 3px; }
.dash-edit .widget .card-h { cursor: grab; background: rgba(249,115,22,.06); }
.widget.drag { opacity: .4; }
.widget.over { outline: 2px solid var(--accent); }
.bar-row { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; }
.bar-row .track { height: 9px; border-radius: 5px; background: var(--row); overflow: hidden; position: relative; }
.bar-row .fill { height: 100%; border-radius: 5px; transform-origin: left; animation: grow .9s cubic-bezier(.2,.8,.2,1) both; }
.bar-row .tgt { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink2); opacity: .6; }
@keyframes grow { from { transform: scaleX(0); } }
.list-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--row); cursor: pointer; }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .s { font-size: 11.5px; color: var(--dim); }
.days { font: 600 12px var(--mono); min-width: 54px; text-align: right; }
.heat { max-width: 440px; margin: 0 auto; display: grid; grid-template-columns: 22px repeat(5, 1fr); gap: 3px; font: 11px var(--mono); }
.heat .c { aspect-ratio: 1.5; border-radius: 4px; display: grid; place-items: center; font-weight: 700; color: rgba(0,0,0,.75); cursor: default; transition: transform .12s; }
.heat .c:hover { transform: scale(1.06); }
.heat .ax { display: grid; place-items: center; color: var(--dim); }

/* ---------- home hero */
.home { position: relative; min-height: 100%; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 26px 30px 10px; max-width: 1560px; margin: 0 auto; }
.hero-copy h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; max-width: 16ch; }
.hero-copy .greet { color: var(--muted); margin-bottom: 8px; }
.hero-copy .lead { color: var(--ink2); max-width: 54ch; margin: 14px 0 18px; font-size: 14.5px; }
.orbit-wrap { position: relative; aspect-ratio: 1; max-height: 520px; justify-self: center; width: 100%; max-width: 520px; }
.orbit-wrap svg { width: 100%; height: 100%; overflow: visible; }
.orbit-ring { cursor: pointer; transition: stroke-width .15s; }
.orbit-ring:hover { stroke-width: 15; }
.orbit-center { text-anchor: middle; }
.tip { position: fixed; z-index: 80; pointer-events: none; padding: 7px 10px; border-radius: 8px; background: var(--tipBg); border: 1px solid var(--line2); font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: 280px; }
.tip b { display: block; }
.hero-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin-top: 10px; }
.hero-legend a { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 12.5px; padding: 3px 0; }
.hero-legend .pct { margin-left: auto; font-family: var(--mono); }
.home-lower { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 8px 30px 40px; max-width: 1560px; margin: 0 auto; }
.radar-wrap svg { width: 100%; height: auto; display: block; }
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.module { padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.module:hover { border-color: var(--accent); }
.module svg { width: 20px; height: 20px; color: var(--accent); }
.module b { font-weight: 550; font-size: 13px; }
.module small { color: var(--dim); font-family: var(--mono); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- auth screens */
.auth { position: fixed; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bg); }
.auth-art { position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.auth-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-art .cap { position: absolute; left: 44px; bottom: 44px; right: 44px; }
.auth-art .cap h1 { font-size: 40px; line-height: 1.05; max-width: 14ch; letter-spacing: -.025em; }
.auth-art .cap p { color: var(--muted); max-width: 46ch; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 30px; overflow: auto; }
.auth-box { width: 100%; max-width: 440px; }
.auth-box h2 { font-size: 22px; margin-bottom: 4px; }
.auth-box .stack { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.wiz-steps { display: flex; gap: 6px; margin: 4px 0 18px; }
.wiz-steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.wiz-steps i.on { background: var(--accent); }
.choice { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; cursor: pointer; background: var(--panel); }
.choice.on { border-color: var(--accent); background: rgba(249,115,22,.08); }
.choice b { display: block; } .choice small { color: var(--muted); }
.err { color: var(--bad); font-size: 12.5px; min-height: 18px; }

/* ---------- compliance */
.std-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.std-card { padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; position: relative; }
.std-card:hover { border-color: var(--line2); }
.std-card.off { opacity: .55; }
.std-card h3 { font-size: 15px; } .std-card .ed { font-family: var(--mono); color: var(--muted); font-size: 12px; }
.std-card .mini { display: flex; gap: 10px; font: 11.5px var(--mono); color: var(--muted); margin-top: 6px; }
.clause-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.clause { display: grid; grid-template-columns: 62px 1fr 150px; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--row); cursor: pointer; }
.clause:hover, .clause.sel { background: var(--hover); }
.clause.sel { box-shadow: inset 3px 0 0 var(--accent); }
.clause.head { background: var(--thead); cursor: default; font-weight: 600; }
.clause .no { font-family: var(--mono); color: var(--accent2); }
.clause.head .no { color: var(--ink); }
.status-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.status-btns button { padding: 8px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2); cursor: pointer; text-align: left; color: var(--ink2); }
.status-btns button.on { border-color: currentColor; }
.sticky { position: sticky; top: 0; }

/* ---------- misc */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line2); cursor: pointer; max-width: 100%; }
.file-chip svg, .list-row > svg, .module svg { width: 18px; height: 18px; flex: none; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop { border: 1.5px dashed var(--line2); border-radius: 10px; padding: 16px; text-align: center; color: var(--muted); cursor: pointer; }
.drop.over { border-color: var(--accent); color: var(--ink); background: rgba(249,115,22,.06); }
.steps-ed { display: flex; flex-direction: column; gap: 8px; }
.step-row { display: grid; grid-template-columns: 30px 1fr 1.6fr 130px 30px; gap: 8px; align-items: start; }
.step-row .n { font: 600 13px/34px var(--mono); color: var(--accent2); text-align: center; }
.hz-row { display: grid; grid-template-columns: 1fr 1fr 1.6fr 54px 54px 54px 54px 30px; gap: 6px; align-items: start; }
.hz-row input[type=number] { padding: 0 6px; text-align: center; }
.preview-frame { width: 100%; height: 70vh; border: 1px solid var(--line2); border-radius: 10px; background: #fff; }
.chat { display: flex; flex-direction: column; height: calc(100vh - 56px - 130px); min-height: 400px; }
.chat-log { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 12px; white-space: pre-wrap; line-height: 1.5; }
.msg.user { align-self: flex-end; background: rgba(249,115,22,.14); border: 1px solid rgba(249,115,22,.3); }
.msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.chat-in { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-in textarea { min-height: 44px; height: 44px; }
.perm-tbl td, .perm-tbl th { text-align: center; } .perm-tbl td:first-child, .perm-tbl th:first-child { text-align: left; }
.perm-tbl select { width: 92px; height: 28px; font-size: 12px; }
.designer-field { display: grid; grid-template-columns: 22px 1.2fr 1.4fr 120px 1.6fr 60px 60px 30px; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--row); }
.handle { cursor: grab; color: var(--dim); text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.notice { padding: 10px 14px; border-radius: 9px; background: var(--infoBg); border: 1px solid rgba(96,165,250,.3); color: var(--ink2); font-size: 12.5px; }
.notice.warn { background: var(--warnBg); border-color: rgba(251,191,36,.35); }
.notice.bad { background: var(--badBg); border-color: rgba(248,113,113,.35); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.loading { padding: 40px; text-align: center; color: var(--muted); }
.loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; } .home-lower { grid-template-columns: 1fr; }
  .split, .clause-layout { grid-template-columns: 1fr; }
  .widget { grid-column: span 12 !important; }
  .scope select { max-width: 120px; }
}
@media (max-width: 860px) { #app { --side: 64px; } .brand-text, .nav-label, .nav-group { display: none; } .auth { grid-template-columns: 1fr; } .auth-art { display: none; } .form-grid { grid-template-columns: 1fr; } .scope { display: none; } }
@media print { .side, .top { display: none; } }

/* smart upload */
.drop-big { padding: 34px 20px; background: rgba(15,30,53,.6); }
.smart-list { display: flex; flex-direction: column; gap: 14px; }
.smart-card .card-h h3 { font-size: 14px; }
.smart-card .card-h > svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.text-preview { white-space: pre-wrap; max-height: 260px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: 11.5px/1.5 var(--mono); color: var(--ink2); margin: 8px 0 0; }
.drop-veil { position: fixed; inset: 0; z-index: 95; background: rgba(10,22,40,.72); border: 3px dashed var(--accent); display: grid; place-items: center; pointer-events: none; }
.drop-veil > div { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink2); }
.drop-veil svg { width: 42px; height: 42px; color: var(--accent); }
.drop-veil b { font-size: 20px; color: var(--ink); font-family: var(--display); }
.drawer ~ .drop-veil, .modal ~ .drop-veil { display: none; }

/* ======================= v1.2 integrated modules ======================= */
.stack { display: flex; flex-direction: column; gap: 14px; }
.btn.on { border-color: var(--accent); color: var(--accent2); background: rgba(249,115,22,.1); }
.seg.exp { border: 0; gap: 4px; overflow: visible; }
.sticky-foot { position: sticky; bottom: 0; background: rgba(10,22,40,.92); backdrop-filter: blur(6px); padding: 12px 4px; border-top: 1px solid var(--line); margin-top: 6px; z-index: 3; }
/* home pulse */
.pulse { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; padding: 8px 30px 6px; max-width: 1560px; margin: 0 auto; }
.pulse-card { cursor: pointer; overflow: hidden; transition: border-color .2s, transform .2s; }
.pulse-card:hover { border-color: var(--line2); transform: translateY(-2px); }
.pulse-card .card-h svg { width: 18px; height: 18px; color: var(--accent); }
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.mini-kpis.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk { background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; cursor: pointer; min-width: 0; }
.mk-v { font-size: 20px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.mk-v small { font-size: 11px; color: var(--muted); }
.mk-l { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-d { font-size: 11px; margin-top: 2px; white-space: nowrap; }
/* ESMS */
.trees-wrap { position: relative; }
.trees-cap { position: absolute; left: 16px; top: 10px; font-size: 12.5px; color: #BBF7D0; text-shadow: 0 1px 2px #000; }
.trees-cap b { font: 600 18px var(--mono); color: #fff; margin-right: 4px; }
.esms-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.esms-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; position: relative; overflow: hidden; }
.esms-kpi::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--c); }
.esms-kpi .l { color: var(--muted); font-size: 12px; }
.esms-kpi .v { font-size: 28px; font-weight: 600; margin: 4px 0; color: var(--c); }
.esms-kpi .v small { font-size: 12px; color: var(--muted); font-family: var(--sans); }
.esms-kpi .s { font-size: 12px; }
.esms-kpi .tg { margin-top: 8px; font-size: 11.5px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.esms-kpi .track { height: 6px; background: var(--row); border-radius: 4px; overflow: hidden; }
.esms-kpi .fill { height: 100%; border-radius: 4px; }
.heat-tbl td, .heat-tbl th { padding: 6px 8px; font-size: 12px; }
/* HSEQ performance */
.kpi-group { font-size: 17px; margin: 18px 0 4px; display: flex; align-items: baseline; }
.kpi-cat { font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent2); margin: 12px 0 8px; }
.hk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hk { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; position: relative; transition: transform .2s, border-color .2s; animation: fadeUp .5s both; }
.hk:hover { transform: translateY(-2px); border-color: var(--line2); }
.hk.on { box-shadow: inset 3px 0 0 var(--good); } .hk.attn { box-shadow: inset 3px 0 0 var(--warn); } .hk.risk { box-shadow: inset 3px 0 0 var(--bad); }
.hk-h { display: flex; align-items: center; gap: 8px; }
.hk-ic { width: 28px; height: 28px; border-radius: 50%; background: #1E2761; display: grid; place-items: center; flex: none; }
.hk-ic svg { width: 15px; height: 15px; color: #fff; }
.hk-l { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; line-height: 1.2; }
.hk-d { font: 600 11px var(--mono); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.hk-d.good { background: var(--goodBg); color: var(--good); } .hk-d.bad { background: var(--badBg); color: var(--bad); } .hk-d.flat { color: var(--dim); }
.hk-row { display: flex; align-items: flex-end; justify-content: space-between; margin: 10px 0 6px; gap: 10px; }
.hk-v { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.hk-v small { font-size: 11px; color: var(--muted); letter-spacing: 0; }
.hk-bars { display: flex; gap: 5px; align-items: flex-end; height: 62px; }
.hk-b { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 10px var(--mono); color: var(--dim); }
.hk-b i { display: block; width: 14px; border-radius: 3px 3px 0 0; background: var(--line2); transform-origin: bottom; animation: growY .8s both; }
.hk-b.cur i { background: var(--accent); } .hk-b.cur { color: var(--ink2); }
.hk-f { font-size: 11.5px; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.hk-bd { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hk-bd span { font-size: 10.5px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.stats-grid td, .stats-grid th { padding: 3px 4px; }
.stats-grid input { width: 74px; height: 26px; padding: 0 6px; font-size: 12px; text-align: right; }
.stats-grid input::placeholder { color: var(--dim); }
.stats-grid .sl { white-space: nowrap; font-size: 12px; min-width: 220px; position: sticky; left: 0; background: var(--panel); }
.stats-grid tr.grp td { background: var(--bg2); color: var(--accent2); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 8px; }
/* report studio */
.report-ed { display: grid; grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
.report-ed .preview-frame { height: calc(100vh - 230px); border-radius: 0 0 12px 12px; border: 0; display: block; }
.blk-list .blk { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--row); }
.blk-list .blk.off { opacity: .5; }
.blk-list .blk .n { width: 22px; color: var(--dim); font-size: 11px; text-align: right; }
.blk-list .blk .grow { flex: 1; min-width: 0; }
.blk-list .blk .s { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-list .icon-btn { width: 28px; height: 28px; }
.img-chip { display: flex; gap: 6px; align-items: center; width: 100%; }
/* investigations */
.inv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.inv-card:nth-child(1), .inv-card:nth-child(2), .inv-card:nth-child(6), .inv-card:nth-child(7), .inv-card:nth-child(8), .inv-card:nth-child(9) { grid-column: span 2; }
.inv-n { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accentInk); font: 600 12px/24px var(--mono); text-align: center; flex: none; }
.inv-tbl td { padding: 4px; } .inv-tbl input, .inv-tbl select { height: 30px; }
.cause-grp { font-size: 11.5px; color: var(--accent2); text-transform: uppercase; letter-spacing: 1px; margin: 10px 0 6px; }
.hoc { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hoc-l { width: var(--w); background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.hoc-l span { color: var(--muted); font-size: 12px; } .hoc-l ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
/* weather */
.wx-now { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.wx-now .big { font-size: 44px; font-weight: 600; color: var(--accent2); }
/* route studio */
.rsteps { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.rstep { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.rstep i { width: 20px; height: 20px; border-radius: 50%; background: var(--bg2); display: grid; place-items: center; font: 600 10.5px var(--mono); font-style: normal; }
.rstep.done { color: var(--ink2); } .rstep.done i { background: var(--good); color: #052e1a; }
.rstep.now { border-color: var(--accent); color: var(--ink); } .rstep.now i { background: var(--accent); color: var(--accentInk); }
.mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.mini-stats div { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.mini-stats b { display: block; font-size: 16px; } .mini-stats span { font-size: 11px; color: var(--muted); }
.route-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr); gap: 14px; align-items: start; }
.rmap-wrap { position: relative; }
.rmap { display: block; cursor: grab; touch-action: none; user-select: none; }
.rmap.pinning .m-stop { cursor: move; } .rmap.placing { cursor: crosshair; }
.rmap .m-area { fill: #3A5378; font-size: 10px; text-anchor: middle; pointer-events: none; }
.rmap .m-lab { fill: #C3D0E3; font-size: 11px; pointer-events: none; }
.rmap .m-num { fill: #0A1628; font: 700 8px var(--mono); text-anchor: middle; pointer-events: none; }
.rmap-legend { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; background: rgba(10,22,40,.85); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: 11px; color: var(--ink2); }
.rmap-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rmap-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rmap-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.rclock { font-size: 15px; color: var(--accent2); min-width: 46px; }
.findings { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.finding { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); }
.finding.crit { border-color: rgba(248,113,113,.45); } .finding .grow { flex: 1; min-width: 0; }
.finding .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.finding .tag { font-size: 11px; color: var(--dim); white-space: nowrap; }
.hz-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 99px; font-size: 11px; background: color-mix(in srgb, var(--c, #F97316) 18%, transparent); color: var(--c, #FB923C); border: 1px solid color-mix(in srgb, var(--c, #F97316) 45%, transparent); white-space: nowrap; }
.hz-chip.ban { --c: #F87171; }
.zones-box { margin-top: 14px; } .zones-box summary { cursor: pointer; color: var(--ink2); }
.seq-tbl tr.skipped td { opacity: .45; text-decoration: line-through; }
.seq-tbl .icon-btn { width: 26px; height: 26px; }
.mini-flag { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: var(--infoBg); color: var(--info); white-space: nowrap; }
.mini-flag.warn { background: var(--warnBg); color: var(--warn); } .mini-flag.bad { background: var(--badBg); color: var(--bad); }
.prec { font-size: 11px; color: var(--c); display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; }
.prec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sig-slot { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.sig-slot.signed { border-color: rgba(52,211,153,.45); }
.sig-pad { width: 100%; height: auto; border-radius: 8px; margin-top: 8px; touch-action: none; cursor: crosshair; display: block; }
@media (max-width: 1200px) { .route-top, .report-ed { grid-template-columns: 1fr; } .sig-grid { grid-template-columns: 1fr; } .inv { grid-template-columns: 1fr; } .inv-card { grid-column: auto !important; } }
.seg.exp button { border: 1px solid var(--line2); background: var(--panel); color: var(--ink); border-radius: 8px; height: 34px; padding: 0 12px; }
.seg.exp button:hover { border-color: var(--line3); background: var(--panel2); }

/* =====================================================================  v1.3 — themes */
:root[data-theme="light"] { --bg: #F3F6FA; --bg2: #FFFFFF; --panel: #FFFFFF; --panel2: #F1F5F9; --line: #E2E8F0; --line2: #CBD5E1; --line3: #94A3B8; --ink: #0F172A; --ink2: #334155; --muted: #64748B; --dim: #94A3B8; --accent: #EA580C; --accent2: #C2410C; --accentInk: #fff; --good: #059669; --warn: #B45309; --bad: #DC2626; --info: #2563EB; --violet: #7C3AED; --goodBg: rgba(5,150,105,.1); --warnBg: rgba(217,119,6,.12); --badBg: rgba(220,38,38,.1); --infoBg: rgba(37,99,235,.1); --field: #FFFFFF; --thead: #F1F5F9; --row: #EEF2F7; --hover: rgba(15,23,42,.035); --toast: #FFFFFF; --tipBg: #FFFFFF; --avatar: #1E3A64; --scroll: #CBD5E1; --onSel: #0F172A; }
:root[data-theme="teal"] { --bg: #051417; --bg2: #071B1F; --panel: #0A2428; --panel2: #0E2E33; --line: #133A40; --line2: #1D4E55; --line3: #2C6A72; --ink: #E6F4F2; --ink2: #BFDCD8; --muted: #7FA7A2; --dim: #557C78; --accent: #2DD4BF; --accent2: #5EEAD4; --accentInk: #042F2E; --field: #071D21; --thead: #0B2629; --row: #10333A; --hover: rgba(255,255,255,.03); --toast: #0C2A2F; --tipBg: #061A1D; --avatar: #115E59; --scroll: #1D4E55; }
:root[data-theme="sand"] { --bg: #F5EFE3; --bg2: #FBF7EE; --panel: #FFFDF8; --panel2: #F6EFE1; --line: #E7DCC6; --line2: #D6C6A6; --line3: #B9A47D; --ink: #2B2418; --ink2: #4A3F2C; --muted: #7C6C52; --dim: #A8977A; --accent: #B45309; --accent2: #92400E; --accentInk: #fff; --good: #15803D; --warn: #B45309; --bad: #B91C1C; --info: #1D4ED8; --goodBg: rgba(21,128,61,.1); --warnBg: rgba(180,83,9,.12); --badBg: rgba(185,28,28,.1); --infoBg: rgba(29,78,216,.1); --field: #FFFDF8; --thead: #F3EAD7; --row: #EFE6D3; --hover: rgba(120,90,40,.05); --toast: #FFFDF8; --tipBg: #FFFDF8; --avatar: #92400E; --scroll: #D6C6A6; --onSel: #2B2418; }
:root[data-theme="contrast"] { --bg: #000; --bg2: #000; --panel: #0A0A0A; --panel2: #161616; --line: #6B6B6B; --line2: #9A9A9A; --line3: #FFFFFF; --ink: #FFFFFF; --ink2: #FFFFFF; --muted: #E5E5E5; --dim: #C7C7C7; --accent: #FFD400; --accent2: #FFE45C; --accentInk: #000; --good: #00FF7F; --warn: #FFD400; --bad: #FF6B6B; --info: #5CC8FF; --field: #000; --thead: #161616; --row: #3A3A3A; --toast: #000; --tipBg: #000; --avatar: #333; --scroll: #9A9A9A; }
:root[data-theme="contrast"] .card, :root[data-theme="contrast"] .btn { border-width: 1.5px; }
:root[data-tone="light"] .tbl tr.overdue td { background: rgba(220,38,38,.06); }
:root[data-tone="light"] body { background: var(--bg); }
:root[data-tone="light"] .auth-art, :root[data-tone="light"] .rmap { color-scheme: dark; }
/* chart colours drawn as SVG attributes */
:root[data-tone="light"] main svg:not(.keep) [stroke="#172B49"], :root[data-tone="light"] main svg:not(.keep) [stroke="#14294A"], :root[data-tone="light"] main svg:not(.keep) [stroke="#13284A"], :root[data-tone="light"] main svg:not(.keep) [stroke="#102340"], :root[data-tone="light"] main svg:not(.keep) [stroke="#1C3152"] { stroke: var(--line); }
:root[data-tone="light"] main svg:not(.keep) [fill="#8CA0BD"], :root[data-tone="light"] main svg:not(.keep) [fill="#5D7393"], :root[data-tone="light"] main svg:not(.keep) [fill="#94A3B8"] { fill: var(--muted); }
:root[data-tone="light"] main svg:not(.keep) [fill="#E7EEF8"], :root[data-tone="light"] main svg:not(.keep) [fill="#C3D0E3"] { fill: var(--ink); }
:root[data-tone="light"] main svg:not(.keep) [stroke="#0A1628"] { stroke: var(--panel); }
:root[data-tone="light"] main svg:not(.keep) [fill="#0B1830"] { fill: var(--panel2); }
:root[data-tone="light"] .rmap svg [fill], :root[data-tone="light"] .rmap svg [stroke] { fill: revert-layer; stroke: revert-layer; }
:root[data-theme="teal"] main svg [stroke="#172B49"], :root[data-theme="teal"] main svg [stroke="#1C3152"] { stroke: var(--row); }
:root[data-theme="contrast"] main svg [stroke="#172B49"], :root[data-theme="contrast"] main svg [stroke="#1C3152"] { stroke: #444; }
:root[data-theme="contrast"] main svg [fill="#8CA0BD"], :root[data-theme="contrast"] main svg [fill="#5D7393"] { fill: #E5E5E5; }

.theme-pop { position: fixed; z-index: 70; top: 54px; right: 14px; width: 300px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); padding: 12px; animation: pop2 .18s ease; }
.theme-pop h4 { margin: 2px 4px 10px; font: 600 13px var(--display); }
.theme-opt { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.theme-opt:hover { background: var(--panel2); } .theme-opt.on { border-color: var(--accent); background: var(--panel2); }
.theme-sw { width: 54px; height: 34px; border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line2); flex: none; }
.theme-sw i { display: block; } .theme-opt b { display: block; font-size: 13px; } .theme-opt small { color: var(--muted); font-size: 11.5px; }

/* =====================================================================  robots */
.bot { overflow: visible; }
.bot .float { animation: botFloat 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
.bot .ant { animation: botGlow 1.8s ease-in-out infinite; }
.bot .lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: botBlink 5.2s infinite; }
.bot .arm-r { transform-box: fill-box; transform-origin: 20% 10%; }
.bot.wave .arm-r, .bot:hover .arm-r { animation: botWave .9s ease-in-out 2; }
.bot .mouth { transition: d .2s; }
.bot .chest { animation: botGlow 2.4s ease-in-out infinite; }
@keyframes botFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes botGlow { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes botBlink { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
@keyframes botWave { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-28deg); } 60% { transform: rotate(12deg); } }
.bot-dock { position: fixed; right: 22px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.bot-dock > * { pointer-events: auto; }
.bot-main { width: 104px; height: 118px; cursor: pointer; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.bot-bubble { width: min(380px, calc(100vw - 340px)); max-height: min(70vh, 560px); overflow: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 16px 16px 4px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.4); padding: 14px 16px; animation: pop2 .22s ease; position: relative; }
.bot-bubble h4 { margin: 0 26px 4px 0; font: 650 14.5px var(--display); }
.bot-bubble .x { position: absolute; top: 8px; right: 8px; }
.bot-bubble .bl { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--line); cursor: pointer; font-size: 12.8px; }
.bot-bubble .bl:hover { color: var(--accent2); }
.bot-bubble .bl i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.bot-bubble .ai { background: var(--panel2); border-radius: 10px; padding: 10px; margin-top: 8px; font-size: 12.8px; white-space: pre-wrap; }
.bot-bubble .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bot-bubble .ask { display: flex; gap: 6px; margin-top: 10px; } .bot-bubble .ask input { flex: 1; }
.bot-strip { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px 30px 8px; max-width: 1560px; margin: 0 auto; }
.mini-bot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.mini-bot:hover { transform: translateY(-3px); border-color: var(--c, var(--accent)); box-shadow: 0 10px 26px -14px var(--c, var(--accent)); }
.mini-bot svg { width: 46px; height: 52px; flex: none; }
.mini-bot b { display: block; font-size: 13px; } .mini-bot small { color: var(--muted); font-size: 11.5px; line-height: 1.25; display: block; }
.mini-bot:hover .bot .float { animation-duration: .9s; }

/* =====================================================================  home v1.3 */
.home-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 8px 30px 6px; max-width: 1560px; margin: 0 auto; }
@media (max-width: 1250px) { .home-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .home-row { grid-template-columns: 1fr; } .bot-bubble { width: calc(100vw - 60px); } }
.home-tools { position: relative; display: flex; gap: 8px; justify-content: flex-end; padding: 10px 30px 0; max-width: 1560px; margin: 0 auto; }
.wx { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; }
.wx-now { display: flex; align-items: center; gap: 10px; }
.wx-now svg { width: 52px; height: 52px; }
.wx-t { font: 600 34px var(--display); letter-spacing: -.02em; line-height: 1; }
.wx-t small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.wx-meta { color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wx-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.wx-day { text-align: center; padding: 6px 2px; border-radius: 10px; background: var(--panel2); font-size: 11.5px; }
.wx-day svg { width: 24px; height: 24px; display: block; margin: 3px auto; }
.wx-day b { font: 600 12px var(--mono); }
.wx-risks { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.wx-risk { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.lvl-chip { display: inline-block; padding: 1px 8px; border-radius: 99px; font: 600 11px var(--sans); }
.lvl-Low { background: var(--goodBg); color: var(--good); } .lvl-Medium { background: var(--warnBg); color: var(--warn); } .lvl-High, .lvl-Critical { background: var(--badBg); color: var(--bad); }
.hd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.hd-stats div { background: var(--panel2); border-radius: 10px; padding: 8px 10px; }
.hd-stats b { display: block; font: 600 20px var(--display); } .hd-stats span { font-size: 11.5px; color: var(--muted); }
.faq-q { margin-top: 8px; }
.layout-list .row-it { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--row); }
.layout-list .row-it .grow { flex: 1; }

/* =====================================================================  report studio */
.rtype-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rtype { border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, background .15s; }
.rtype:hover { border-color: var(--line3); } .rtype.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rtype small { color: var(--accent2); } .rtype span { color: var(--muted); font-size: 11.5px; }
.blk-text { color: var(--ink2) !important; font-style: italic; }
.kpi-ov { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin-top: 6px; }
.kpi-ov label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .kpi-ov label span { flex: 1; } .kpi-ov select { width: 150px; height: 30px; }

/* =====================================================================  inspections */
.insp-sec { margin-bottom: 14px; }
.insp-sec .card-h h3 { display: flex; gap: 10px; align-items: center; }
.insp-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--row); align-items: start; }
.insp-item .no { font: 600 12px var(--mono); color: var(--muted); padding-top: 6px; }
.insp-item .txt b { font-weight: 550; } .insp-item .txt .g { color: var(--muted); font-size: 12px; }
.insp-item.crit .txt b::after { content: "★ critical"; margin-left: 8px; font: 600 10.5px var(--sans); color: var(--bad); }
.ans { display: inline-flex; border: 1px solid var(--line2); border-radius: 9px; overflow: hidden; }
.ans button { border: 0; background: transparent; padding: 6px 10px; font: 600 12px var(--sans); cursor: pointer; color: var(--muted); border-right: 1px solid var(--line2); }
.ans button:last-child { border-right: 0; }
.ans button.on.C { background: var(--goodBg); color: var(--good); } .ans button.on.NC { background: var(--badBg); color: var(--bad); } .ans button.on.OBS { background: var(--warnBg); color: var(--warn); } .ans button.on.NA { background: var(--panel2); color: var(--ink2); }
.insp-detail { grid-column: 2 / 4; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; margin-top: 4px; }
@media (max-width: 1100px) { .insp-detail { grid-template-columns: 1fr 1fr; } }
.insp-head { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 10px 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.score-ring { width: 64px; height: 64px; }
.prog { flex: 1; min-width: 200px; } .prog .bar { height: 8px; border-radius: 6px; background: var(--row); overflow: hidden; } .prog .bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.tpl-sec { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.tpl-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 90px 30px; gap: 6px; align-items: center; margin-top: 6px; }
.sig-pad { width: 100%; height: 120px; border: 1px dashed var(--line2); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }

/* =====================================================================  help desk */
.tk-msgs { display: flex; flex-direction: column; gap: 10px; }
.tk-msg { max-width: 82%; padding: 10px 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); white-space: pre-wrap; }
.tk-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.tk-msg.internal { border-style: dashed; border-color: var(--warn); }
.tk-msg.event { align-self: center; background: transparent; border: 0; color: var(--muted); font-size: 12px; padding: 2px; }
.tk-msg .by { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.faq details { border-bottom: 1px solid var(--row); padding: 10px 2px; } .faq summary { cursor: pointer; font-weight: 550; } .faq p { margin: 8px 0 2px; color: var(--ink2); }

/* =====================================================================  AI profiles, insights, links, misc */
.prof { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.prof .pi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 700 12px var(--mono); background: var(--panel2); color: var(--accent2); }
.prof.off { opacity: .55; }
.ins-panel .rec { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--row); }
.ins-panel .rec .sev { width: 4px; border-radius: 3px; flex: none; }
.ins-panel .rec.high .sev { background: var(--bad); } .ins-panel .rec.medium .sev { background: var(--warn); } .ins-panel .rec.low .sev { background: var(--info); } .ins-panel .rec.good .sev { background: var(--good); }
.ins-panel .rec .a { color: var(--muted); font-size: 12px; margin-top: 2px; }
.ins-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .ins-stats span { background: var(--panel2); border-radius: 8px; padding: 3px 8px; font-size: 12px; } .ins-stats b { font-family: var(--mono); }
.links-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.link-it svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.link-it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--panel2); margin-bottom: 6px; font-size: 12.5px; cursor: pointer; }
.link-it:hover { outline: 1px solid var(--line3); } .link-it .k { color: var(--muted); font-size: 11px; } .link-it .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-box { border: 1px solid var(--warn); background: var(--warnBg); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; }
.dup-box a { cursor: pointer; }
.recent-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.recent-bar .chip { font-size: 11.5px; }
.auto-box { border: 1px solid var(--good); background: var(--goodBg); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 12.5px; }
.site-card { margin-bottom: 14px; } .site-card .card-h .r { gap: 6px; display: flex; }
.member { display: grid; grid-template-columns: 200px 180px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--row); align-items: start; font-size: 12.8px; }
.member .role { font-weight: 600; } .member .resp { color: var(--ink2); white-space: pre-wrap; }
@media (max-width: 1100px) { .member { grid-template-columns: 1fr 1fr; } }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.feat { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 12.8px; cursor: pointer; user-select: none; }
.feat .st { margin-left: auto; font: 600 11px var(--mono); padding: 1px 7px; border-radius: 6px; }
.feat .st.on { background: var(--goodBg); color: var(--good); } .feat .st.off { background: var(--badBg); color: var(--bad); } .feat .st.inh { background: var(--panel2); color: var(--muted); }
.rule { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--row); }
.rule .grow b { display: block; } .rule .grow span { color: var(--muted); font-size: 12.5px; }
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--line2); transition: background .2s; cursor: pointer; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + i { background: var(--accent); } .switch input:checked + i::after { transform: translateX(16px); }
.lic-box { max-width: 520px; }
.lic-id { font: 600 18px var(--mono); letter-spacing: .06em; background: var(--panel2); border: 1px dashed var(--line3); border-radius: 10px; padding: 10px 14px; text-align: center; margin: 8px 0 14px; user-select: all; }
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tut { cursor: pointer; transition: transform .2s, border-color .2s; } .tut:hover { transform: translateY(-2px); border-color: var(--line3); }
.tut .card-b { display: flex; gap: 12px; } .tut svg.ti { width: 30px; height: 30px; color: var(--accent); flex: none; }
.tut-steps { counter-reset: st; } .tut-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--row); }
.tut-step::before { counter-increment: st; content: counter(st); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accentInk); font-weight: 700; }
.tut-step b { display: block; margin-bottom: 2px; } .tut-step p { margin: 0; color: var(--ink2); }
.tut-progress { height: 6px; border-radius: 4px; background: var(--row); overflow: hidden; margin: 6px 0 14px; } .tut-progress i { display: block; height: 100%; background: var(--good); }
.spot { position: fixed; z-index: 95; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); pointer-events: none; transition: all .3s; }
.spot-tip { position: fixed; z-index: 96; width: 320px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.chart-pick { display: inline-flex; gap: 2px; background: var(--panel2); border-radius: 9px; padding: 2px; }
.chart-pick button { border: 0; background: transparent; color: var(--muted); padding: 4px 8px; border-radius: 7px; cursor: pointer; font-size: 12px; }
.chart-pick button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.kpi-chart { min-height: 160px; }
.kpi-chart svg .g-bar { transform-origin: bottom; transform-box: fill-box; animation: growY .8s cubic-bezier(.2,.8,.2,1) both; }
.kpi-chart svg .g-line { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawLine 1.2s ease forwards; }
.kpi-chart svg .g-pt { opacity: 0; animation: fadeIn .4s ease forwards; }
.kpi-chart svg .g-arc { transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes growY { from { transform: scaleY(0); } }

.card-h > svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.card-h .r .lvl-chip { white-space: nowrap; }
.tabs.admin-tabs { flex-wrap: wrap; row-gap: 2px; overflow: visible; }
.feat .st { white-space: nowrap; }
.kpi-chart svg { max-height: 300px; }

/* v1.4 — report workflow, review advisor, regulatory references, risk assessment, security, live weather */
.wf-bar { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; background: var(--panel2, rgba(255,255,255,.02)); }
.wf-bar > .row > svg { width: 16px; height: 16px; color: var(--accent); }
.wf-hist { margin-top: 8px; font-size: 12.5px; display: grid; gap: 4px; border-top: 1px dashed var(--line); padding-top: 8px; }
.adv { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.adv:first-of-type { border-top: 0; }
.adv .grow { flex: 1; min-width: 0; }
.adv .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink3, var(--muted)); }
.adv.done { opacity: .55; }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.reg { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer; transition: border-color .15s, transform .15s; }
.reg:hover { border-color: var(--accent); transform: translateY(-1px); }
.reg.ai { border-style: dashed; }
.ra-hz { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.ra-hz > .row input { flex: 1; min-width: 0; }
.ra-hz > .row select { width: 170px; }
.ra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.ra-grid .field { display: flex; flex-direction: column; gap: 4px; }
.ra-grid .field > span { font-size: 12px; color: var(--muted); }
.ra-grid select { min-width: 58px; }
.ra-pane .grid > .card { min-width: 0; }
@media (max-width: 900px) { .ra-pane .grid { grid-template-columns: 1fr !important; } }
.wx-live { margin-left: 8px; font-size: 11px; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: livePulse 1.6s infinite; vertical-align: middle; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pill.mute { opacity: .75; }

/* v1.4.1 — RiskForge-style risk assessment builder */
.rf-card { margin-bottom: 14px; background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.rf-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; }
.rf-h h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rf-n { min-width: 30px; height: 30px; padding: 0 6px; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 6px; font: 600 13px var(--mono); color: var(--accent); background: var(--bg2); }
.rf-b { padding: 8px 18px 18px; }
.rf-lbl { font: 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rf-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rf-f input, .rf-f select, .rf-f textarea { width: 100%; }
.rf-grid { display: grid; gap: 14px 18px; align-items: start; }
.rf-grid.g4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1fr); }
.rf-grid.g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.rf-grid.g2w { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rf-grid.rating { grid-template-columns: 150px 150px 200px minmax(0, 1fr); }
@media (max-width: 1100px) { .rf-grid.g4, .rf-grid.g2, .rf-grid.g2w, .rf-grid.rating { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .rf-grid.g4, .rf-grid.g2, .rf-grid.g2w, .rf-grid.rating { grid-template-columns: 1fr; } }
.rf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-chips.col { flex-direction: column; align-items: flex-start; }
.rf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg2); color: var(--ink2); cursor: pointer; font-size: 13px; user-select: none; transition: background .12s, border-color .12s; }
.rf-chip:hover { border-color: var(--accent); color: var(--ink); }
.rf-chip.on { background: #F5A524; border-color: #F5A524; color: #1A0E03; font-weight: 600; }
.rf-chip.add.on { background: rgba(52, 211, 153, .14); border-color: var(--good); color: var(--good); font-weight: 500; }
.rf-chip.ai { border-style: dashed; }
.rf-chip.ref { font-size: 12.5px; padding: 6px 12px; text-align: left; }
.rf-reg { font-size: 13px; color: var(--ink); line-height: 1.6; }
.rf-score { height: 44px; display: grid; place-items: center; border-radius: 8px; font: 600 19px var(--mono); border: 1px solid var(--line2); }
.rf-score.good { background: rgba(52, 211, 153, .12); color: var(--good); border-color: rgba(52, 211, 153, .5); }
.rf-score.warn { background: rgba(251, 191, 36, .12); color: #F5A524; border-color: rgba(251, 191, 36, .55); }
.rf-score.bad { background: rgba(249, 115, 22, .14); color: #FB923C; border-color: rgba(249, 115, 22, .55); }
.rf-score.crit { background: rgba(248, 113, 113, .14); color: var(--bad); border-color: rgba(248, 113, 113, .55); }
.rf-score.mute { color: var(--dim); }
.rf-matrix { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 6px; }
.rf-matrix .hd { font: 12px var(--mono); color: var(--muted); text-align: center; align-self: center; }
.rf-matrix .hd.p { text-align: left; }
.rf-matrix .cell { height: 36px; display: grid; place-items: center; border-radius: 4px; font: 13px var(--mono); cursor: pointer; border: 1px solid; transition: transform .1s; }
.rf-matrix .cell:hover { transform: scale(1.05); }
.rf-matrix .cell.good { background: rgba(52, 211, 153, .12); color: var(--good); border-color: rgba(52, 211, 153, .35); }
.rf-matrix .cell.warn { background: rgba(251, 191, 36, .1); color: #F5A524; border-color: rgba(251, 191, 36, .35); }
.rf-matrix .cell.bad { background: rgba(249, 115, 22, .1); color: #FB923C; border-color: rgba(249, 115, 22, .35); }
.rf-matrix .cell.crit { background: rgba(248, 113, 113, .12); color: var(--bad); border-color: rgba(248, 113, 113, .35); }
.rf-matrix .cell.sel { outline: 2px solid var(--ink); outline-offset: 1px; font-weight: 700; }
.rf-ctl-list { display: flex; flex-direction: column; gap: 8px; }
.rf-ctl { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2); font-size: 13.5px; }
.rf-ctl .tri { color: var(--accent); font-size: 10px; letter-spacing: 4px; }
.rf-ctl .grow { flex: 1; }
.rf-tier { font: 10.5px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.rf-add { display: flex; gap: 10px; }
.rf-add input { flex: 1; }
.rf-ai { align-self: flex-start; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.rf-rec { margin-top: 12px; border: 1px solid var(--line2); border-radius: 10px; padding: 14px 18px; background: var(--bg2); }
.rf-tier-row { margin-top: 12px; }
.rf-tier-row > b { display: block; margin-bottom: 8px; font-size: 13.5px; }
.rf-hint { font-style: italic; color: var(--muted); }
.rf-actions { margin: 4px 0 18px; gap: 12px; }
.rf-big, .rf-btn { font-family: var(--mono); letter-spacing: .08em; font-weight: 600; text-transform: uppercase; }
.rf-big { height: 44px; padding: 0 22px; }
.rf-reg-tools { gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rf-btn.danger-t { color: var(--bad); }
.rf-empty { border: 1px solid var(--line2); border-radius: 10px; padding: 50px 20px; text-align: center; color: var(--muted); }
.rf-empty b { display: block; font-size: 16px; color: var(--ink2); margin-bottom: 6px; }
.rf-tbl td { vertical-align: top; font-size: 12.5px; }
.rf-tbl .muted { font-size: 11.5px; }
.rf-ul { margin: 0; padding-left: 16px; }
.rf-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 11.5px var(--mono); white-space: nowrap; border: 1px solid; }
.rf-pill.good { color: var(--good); border-color: rgba(52, 211, 153, .5); }
.rf-pill.warn { color: #F5A524; border-color: rgba(251, 191, 36, .5); }
.rf-pill.bad { color: #FB923C; border-color: rgba(249, 115, 22, .5); }
.rf-pill.crit { color: var(--bad); border-color: rgba(248, 113, 113, .5); }
.rf-preview { border: 1px solid var(--line2); border-radius: 10px; background: #1B1B1B; min-height: 220px; overflow: hidden; }
.rf-preview .rf-empty { border: 0; }
.rf-iframe { width: 100%; height: 760px; border: 0; background: #fff; display: block; }
/* drill-down affordance */
.num-link { cursor: pointer; }
.num-link:hover { color: var(--accent2); text-decoration: underline; }
.num-link-h { cursor: pointer; }
.num-link-h:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.kpi { cursor: pointer; }
.rf-b input:not([type]), .rf-b input[type=text], .rf-b select { height: 42px; border-radius: 8px; font-size: 14px; }
.rf-add .btn { height: 42px; padding: 0 16px; font-family: var(--mono); font-weight: 600; letter-spacing: .06em; }
/* v1.4.2 — risk assessment document / Excel review, inspection evidence */
.ra-groups tbody tr.sel td { background: rgba(249, 115, 22, .10); }
.ra-groups tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ra-viewer { margin-top: 14px; }
.rf-seg .btn.on { background: var(--accent); color: var(--accentInk); border-color: var(--accent); }
.xl-wrap { overflow: auto; max-height: 620px; background: #fff; border-radius: 8px 8px 0 0; }
table.xl { border-collapse: collapse; font: 12px Calibri, "Segoe UI", Arial, sans-serif; color: #111827; background: #fff; }
table.xl th { position: sticky; top: 0; z-index: 2; background: #F1F3F4; color: #5F6368; font-weight: 500; border: 1px solid #DADCE0; padding: 3px 6px; text-align: center; }
table.xl td { border: 1px solid #E2E8F0; padding: 4px 6px; vertical-align: top; white-space: pre-wrap; max-width: 380px; }
table.xl td.rn, table.xl th.rn { background: #F1F3F4; color: #5F6368; text-align: center; min-width: 34px; position: sticky; left: 0; z-index: 1; border-color: #DADCE0; }
table.xl td.num { text-align: right; }
table.xl tr.xl-title td:not(.rn) { font-size: 16px; font-weight: 700; color: #0B1F3A; border-color: transparent; }
table.xl tr.xl-sub td:not(.rn) { font-style: italic; color: #64748B; border-color: transparent; }
table.xl tr.xl-head td:not(.rn) { background: #0B1F3A; color: #fff; font-weight: 700; }
.xl-tabs { display: flex; gap: 2px; background: #F1F3F4; padding: 4px 6px 0; border-radius: 0 0 8px 8px; }
.xl-tabs button { border: 0; background: transparent; padding: 6px 14px; font: 12px "Segoe UI", sans-serif; color: #3C4043; cursor: pointer; border-radius: 6px 6px 0 0; }
.xl-tabs button.on { background: #fff; color: #188038; font-weight: 600; box-shadow: inset 0 -2px 0 #188038; }
.ev-btn { padding: 2px 8px; font-size: 11.5px; color: var(--muted); }
.ev-btn svg { width: 14px; height: 14px; }
.ev-btn.req { color: var(--warn); }
.ev-strip { align-items: center; }
.ev-thumb img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line2); cursor: zoom-in; display: block; }

/* v1.4.4 — happy, interactive J23 robot */
.hb .eyes-happy, .hb .eyes-closed, .hb .m-open, .hb .m-think { display: none; }
.hb.mood-joy .eyes-open, .hb.mood-sleep .eyes-open { display: none; }
.hb.mood-joy .eyes-happy { display: inline; }
.hb.mood-sleep .eyes-closed { display: inline; }
.hb.mood-joy .m-smile, .hb.mood-talk .m-smile, .hb.mood-think .m-smile { display: none; }
.hb.mood-joy .m-open, .hb.mood-talk .m-open { display: inline; }
.hb.mood-think .m-think { display: inline; }
.hb.mood-joy .lid, .hb.mood-sleep .lid, .hb.mood-think .lid { animation: none; }
.hb .m-open { transform-box: fill-box; transform-origin: 50% 0; }
.hb.mood-talk .m-open { animation: botTalk .22s ease-in-out infinite alternate; }
.hb.mood-joy .cheek { opacity: 1; }
.hb.mood-think .float { animation: botTilt 1.8s ease-in-out infinite; transform-origin: 50% 80%; }
.hb.mood-think .ant { animation: botAntBlink .45s steps(2) infinite; }
.hb.mood-think .arm-r { animation: botChin 1.8s ease-in-out infinite; }
.hb.mood-sleep .float { animation: botFloat 6s ease-in-out infinite; }
.hb.mood-joy .arm-l, .hb.mood-joy .arm-r { animation: botCheer .35s ease-in-out 3; }
.hb .arm-l { transform-box: fill-box; transform-origin: 80% 10%; }
.hb .heart { transform-box: fill-box; transform-origin: 50% 50%; animation: botHeart 1.6s ease-in-out infinite; }
.hb-dock .bot-main { width: var(--bot-w, 108px); height: calc(var(--bot-w, 108px) * 1.11); position: relative; }
.hb-dock .bot-main svg.bot { width: 100%; height: 100%; }
.hb-dock .bot-main.jump svg.bot .jumper { animation: botJump .8s cubic-bezier(.28, 1.5, .5, 1); transform-box: view-box; transform-origin: 50% 95%; }
.hb-dock .bot-row { display: flex; align-items: flex-end; gap: 6px; }
.hb-dock.side-left { right: auto; left: 22px; align-items: flex-start; }
.hb-dock.side-left .bot-row { flex-direction: row-reverse; }
.hb-dock.side-left .bot-bubble { border-radius: 16px 16px 16px 4px; }
.hb-dock.no-motion .float, .hb-dock.no-motion .heart, .hb-dock.no-motion .ant { animation: none !important; }
.bot-say { max-width: 220px; background: #fff; color: #0F1E35; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 14px 14px 4px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); margin-bottom: calc(var(--bot-w, 108px) * .55); }
.side-left .bot-say { border-radius: 14px 14px 14px 4px; }
.bot-say.pop { animation: pop2 .25s ease; }
.bot-think { position: absolute; top: -8px; right: -4px; display: flex; gap: 4px; background: #fff; padding: 6px 9px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.3); z-index: 2; }
.bot-think::after { content: ''; position: absolute; bottom: -6px; left: 8px; width: 9px; height: 9px; background: #fff; border-radius: 50%; }
.bot-think span { width: 7px; height: 7px; border-radius: 50%; background: #64748B; animation: botDots 1s ease-in-out infinite; }
.bot-think span:nth-child(2) { animation-delay: .15s; } .bot-think span:nth-child(3) { animation-delay: .3s; }
.bot-spark { position: absolute; bottom: 60%; font-size: 16px; pointer-events: none; animation: botSpark 1.3s ease-out forwards; text-shadow: 0 2px 6px rgba(0,0,0,.3); }
.bot-answer { margin-top: 10px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; padding: 10px; font-size: 12.8px; }
.bot-answer .q { font-style: italic; color: var(--muted); margin-bottom: 6px; }
.bot-answer .ai { white-space: pre-wrap; margin-top: 6px; }
.bot-answer .fact { display: flex; gap: 6px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--line); cursor: pointer; }
.bot-answer .fact b { font: 700 15px var(--mono); color: var(--accent2); }
.bot-answer .fact .go { margin-left: auto; color: var(--accent2); font-size: 12px; }
.thinking-line { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.thinking-line .dots { display: inline-flex; gap: 3px; }
.thinking-line .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); animation: botDots 1s infinite; }
.thinking-line .dots i:nth-child(2) { animation-delay: .15s; } .thinking-line .dots i:nth-child(3) { animation-delay: .3s; }
.bot-cust { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.bot-preview { position: sticky; top: 0; display: grid; place-items: center; min-height: 220px; background: radial-gradient(circle at 50% 60%, var(--panel2), var(--bg2)); border: 1px solid var(--line2); border-radius: 16px; }
.bot-preview svg.bot { width: var(--bot-w, 108px); height: calc(var(--bot-w, 108px) * 1.11); }
.bot-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line2); cursor: pointer; }
.bot-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent); }
.bot-cust input[type=color] { width: 34px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.bot-cust .seg .btn.on { background: var(--accent); color: var(--accentInk); border-color: var(--accent); }
@media (max-width: 700px) { .bot-cust { grid-template-columns: 1fr; } }
@keyframes botJump { 0% { transform: translateY(0) scale(1, 1); } 14% { transform: translateY(2px) scale(1.1, .88); } 42% { transform: translateY(-30px) scale(.94, 1.07); } 64% { transform: translateY(0) scale(1.08, .92); } 80% { transform: translateY(-7px) scale(.98, 1.02); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes botTalk { from { transform: scaleY(.45); } to { transform: scaleY(1.05); } }
@keyframes botTilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(4deg) translateY(-2px); } }
@keyframes botAntBlink { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes botChin { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-140deg); } }
@keyframes botCheer { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-35deg); } }
@keyframes botHeart { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
@keyframes botDots { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes botSpark { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-70px) scale(1.3) rotate(25deg); opacity: 0; } }
/* v1.4.5 — history & facility */
.hist-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 14px; }
.hist-box > .row svg { width: 16px; height: 16px; color: var(--accent); }
.hist-box .k-lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0 2px; }
.hist-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 12.8px; }
.hist-row .grow { flex: 1; min-width: 0; }
.hist-row .t { font-weight: 600; }
.hist-row .s { color: var(--muted); font-size: 12px; }
.hist-row.cur { background: rgba(249, 115, 22, .06); border-radius: 6px; padding-left: 6px; }
.btn.on { border-color: var(--accent); color: var(--accent2); }
/* v1.4.6 — multi-user sync */
.sync-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink2); font-size: 12px; cursor: pointer; margin-right: 6px; }
.sync-chip svg { width: 15px; height: 15px; }
.sync-chip.good svg:first-child { color: var(--good); } .sync-chip.warn { border-color: rgba(251,191,36,.6); color: var(--warn); } .sync-chip.info svg:first-child { color: var(--info); }
.sync-chip .n { display: inline-flex; align-items: center; gap: 3px; padding-left: 6px; border-left: 1px solid var(--line2); }
.sync-chip .n svg { width: 13px; height: 13px; }
.sync-chip .cf { background: var(--bad); color: #fff; border-radius: 999px; padding: 0 6px; font-weight: 700; }
.presence-note { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.presence-note svg { width: 16px; height: 16px; flex: none; }
.remote-note { margin-bottom: 10px; }
.toast.act { align-items: center; } .toast.act .btn { margin-left: auto; }

/* ================================================================ v1.5.0 */
/* event explorer */
.ev-kpis, .ev-proj { margin-top: 8px; }
.ev-delta { display: block; font-size: 11.5px; margin-top: 3px; font-weight: 600; }
.ev-delta.good { color: var(--good); } .ev-delta.bad { color: var(--bad); } .ev-delta.dim { color: var(--dim); font-weight: 400; }
.ym-ctl { gap: 8px; margin-bottom: 12px; }
.ym-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ym-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.ym-leg i.prev { background: var(--line2); } .ym-leg i.cur { background: var(--accent); } .ym-leg i.amt { background: var(--violet); border-radius: 50%; }
.ym-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: 18px; align-items: stretch; }
.ym-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 230px; align-items: end; padding: 6px 4px 0; border-bottom: 1px solid var(--line); }
.ym-col { display: flex; flex-direction: column; align-items: center; height: 100%; border-radius: 8px; transition: background .3s; }
.ym-col.now { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ym-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; position: relative; padding: 0 4px; }
.ym-bars i { display: block; width: 42%; max-width: 22px; border-radius: 5px 5px 0 0; transition: height .55s cubic-bezier(.3, 1.4, .5, 1); }
.ym-bars i.prev { background: var(--line2); opacity: .8; } .ym-bars i.cur { background: linear-gradient(180deg, var(--accent2), var(--accent)); height: 0; }
.ym-n { font: 700 12px var(--mono); color: var(--accent2); min-height: 16px; }
.ym-m { font-size: 11px; color: var(--muted); padding: 4px 0; }
.fm-amt { position: absolute; left: 50%; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 25%, transparent); transition: bottom .55s ease, opacity .3s; opacity: 0; bottom: 0; }
.ym-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ym-big { font: 750 40px var(--display); color: var(--accent2); line-height: 1; }
.ym-amt { font-size: 18px; color: var(--violet); font-weight: 700; }
.ym-cap { font-size: 12.5px; color: var(--ink2); min-height: 18px; }
.ym-plist, .tb-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ym-p { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 30px; align-items: center; gap: 8px; font-size: 12.5px; }
.ym-p:has(.mono) { grid-template-columns: minmax(80px, 140px) 1fr 30px 92px; }
.ym-p .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.ym-p .bar { height: 10px; background: var(--panel2); border-radius: 6px; overflow: hidden; }
.ym-p .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 6px; transition: width .6s cubic-bezier(.3, 1.3, .5, 1); }
.ym-p b { font-family: var(--mono); text-align: right; }
.ym-p.clickable { cursor: pointer; border-radius: 6px; padding: 2px 4px; } .ym-p.clickable:hover, .ym-p.on { background: var(--hover); } .ym-p.on .nm { color: var(--accent2); font-weight: 650; }
.ym-ticker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-height: 34px; }
.ym-ev { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line2); font-size: 12px; cursor: pointer; animation: pop2 .35s ease both; max-width: 100%; }
.ym-ev b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.ym-ev:hover { border-color: var(--accent); }
@media (max-width: 900px) { .ym-main { grid-template-columns: 1fr; } }

/* severity truck cards */
.sev-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .sev-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sev-card { background: var(--panel2); border: 1px solid var(--line); border-top: 3px solid var(--tone); border-radius: 12px; padding: 12px; cursor: pointer; overflow: hidden; transition: transform .15s, border-color .15s; }
.sev-card:hover { transform: translateY(-2px); border-color: var(--tone); }
.sev-h { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; }
.sev-h .dot { width: 9px; height: 9px; border-radius: 50%; }
.sev-art { height: 104px; display: flex; align-items: center; justify-content: center; }
.ev-truck { width: 100%; max-width: 210px; height: auto; overflow: visible; }
.sev-n { font: 750 34px var(--display); line-height: 1.05; }
.sev-s { font-size: 12px; color: var(--muted); }
.sev-pct { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.sev-cards:not(.still) .ev-truck .drive { animation: evDrive 1s cubic-bezier(.2, .9, .3, 1) both; animation-delay: var(--d); }
.sev-cards:not(.still) .ev-truck .dm { animation: evDmg .5s ease both; animation-delay: calc(var(--d) + .85s); }
.sev-cards:not(.still) .sev-card .ev-truck { animation: evShake .35s ease; animation-delay: calc(var(--d) + .85s); }
.ev-truck .smoke circle { fill: #9CA3AF; opacity: .55; animation: evSmoke 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ev-truck .flame path { animation: evFlame .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes evDrive { from { transform: translateX(-120%); } }
@keyframes evDmg { from { opacity: 0; transform: scale(.6); } }
@keyframes evShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-1deg); } 75% { transform: translateX(4px) rotate(1deg); } }
@keyframes evSmoke { 0% { transform: translateY(0) scale(.8); opacity: .25; } 50% { opacity: .6; } 100% { transform: translateY(-14px) scale(1.25); opacity: 0; } }
@keyframes evFlame { from { transform: scaleY(.85); } to { transform: scaleY(1.12); } }

/* body map */
.bm { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .bm { grid-template-columns: 1fr; } }
.bm-svg { width: 100%; max-height: 480px; }
.bm-pin { cursor: pointer; animation: bmPop .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
.bm-pin:hover circle { filter: brightness(1.15); }
.bm-dot { animation: bmPulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bmPop { from { opacity: 0; transform: scale(.4); } }
@keyframes bmPulse { 50% { transform: scale(1.35); opacity: .7; } }
.bm-side h4 { margin: 0 0 8px; font: 650 14px var(--display); }
.bm-row { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); cursor: pointer; font-size: 12.5px; }
.bm-row b { text-transform: capitalize; min-width: 92px; } .bm-row:hover { color: var(--accent2); }
.bm-leg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.bm-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }

/* reconstruction */
.modal.rc-modal { width: min(1180px, 96vw); max-width: none; }
.rc { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .rc { grid-template-columns: 1fr; } }
.rc-left h3 { margin: 4px 0 2px; font-size: 16px; }
.rc-left .k-lbl { margin-top: 10px; }
.rc-desc { margin: 2px 0; font-size: 12.8px; color: var(--ink2); white-space: pre-wrap; }
.rc-acts { margin: 4px 0; padding-left: 18px; font-size: 12.8px; }
.rc-legend { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.rc-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rc-stage { border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: #000; }
.rc-svg { display: block; width: 100%; height: auto; }
.rc-cap { font: 650 14px var(--display); margin: 10px 0 6px; min-height: 20px; }
.rc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rc-step { display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: 11.8px; cursor: pointer; transition: all .2s; }
.rc-step b { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--line2); color: var(--ink); font-size: 11px; }
.rc-step.on { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, var(--panel2)); }
.rc-step.on b, .rc-step.done b { background: var(--accent); color: var(--accentInk); }
.rc-step.done { color: var(--ink2); }
.rc-ctl { gap: 8px; margin-top: 10px; }

/* traffic fines */
.fn-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fn-type { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; animation: pop2 .4s ease both; animation-delay: var(--d); transition: transform .15s, border-color .15s; }
.fn-type:hover { transform: translateY(-2px); border-color: var(--line3); }
.fn-type.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.fn-ic { font-size: 22px; }
.fn-t { font-size: 12.5px; color: var(--ink2); margin-top: 4px; min-height: 32px; }
.fn-n { font: 750 26px var(--display); color: var(--accent2); }
.fn-s { font-size: 11.5px; color: var(--muted); }

/* robot live alerts */
.bot-badge { position: absolute; top: 2px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--bad); color: #fff; font: 800 12px var(--sans); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg), 0 6px 14px rgba(0,0,0,.35); cursor: pointer; animation: badgePop .4s cubic-bezier(.3, 1.6, .5, 1); z-index: 2; }
.side-left .bot-badge { right: auto; left: 6px; }
@keyframes badgePop { from { transform: scale(0); } }
.al-stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: 340px; }
.side-left .al-stack { align-items: flex-start; }
.al-toast { width: 320px; background: var(--panel); border: 1px solid var(--line2); border-left: 4px solid var(--sev); border-radius: 12px; padding: 10px 12px; box-shadow: 0 14px 40px rgba(0,0,0,.4); cursor: pointer; animation: alIn .45s cubic-bezier(.3, 1.4, .5, 1) both; font-size: 12.5px; }
.al-toast.out { animation: alOut .4s ease forwards; }
.al-toast .al-t { font-weight: 650; margin-top: 4px; }
@keyframes alIn { from { opacity: 0; transform: translateX(40px) scale(.9); } }
@keyframes alOut { to { opacity: 0; transform: translateX(40px); } }
.al-sec { background: var(--panel2); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.al-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 6px; border-left: 3px solid var(--sev); border-radius: 0 8px 8px 0; margin: 4px 0; cursor: pointer; background: color-mix(in srgb, var(--sev) 7%, transparent); }
.al-row:hover { background: color-mix(in srgb, var(--sev) 14%, transparent); }
.al-row.seen { opacity: .62; }
.al-ic { font-size: 16px; line-height: 1.2; }
.al-t { font-weight: 600; font-size: 12.8px; }
.al-s { font-size: 12px; color: var(--muted); margin-top: 1px; }
.al-rec { font-size: 12px; color: var(--ink2); margin-top: 3px; }

/* assets */
.as-find { flex: 1; font-size: 14px; padding: 9px 12px; }
.as-hits { margin-top: 6px; }

/* industry focus */
.ind-card { margin: 14px 0; }
.ind-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-chips .chip:disabled { cursor: default; opacity: .7; }
.ind-res { margin-top: 10px; }
.ind-card select { width: auto; min-width: 240px; }

/* legal matrix */
.lm-apply { font-size: 11.8px; display: flex; flex-direction: column; gap: 2px; }

/* integrations */
.api-pre { background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; color: var(--ink2); max-height: 320px; overflow: auto; }
.api-key { font-size: 15px; padding: 12px; border-radius: 8px; background: var(--field); border: 1px dashed var(--accent); color: var(--accent2); word-break: break-all; user-select: all; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; }

/* smart upload templates */
.up-mode { margin-bottom: 14px; }
.tpl-cols input[type=text], .tpl-cols select { width: 100%; }
.tpl-sec-box { border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.tpl-sec { font-weight: 650; }

/* photo → description */
.ph-box { border: 1px dashed var(--accent); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ph-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accentInk); }
.ph-ic svg { width: 20px; height: 20px; }
.ph-out:not(:empty) { margin-top: 10px; }
.ph-card { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; animation: pop2 .3s ease; }
.ph-t { font: 650 14px var(--display); }
.ph-txt { font-size: 12.8px; color: var(--ink2); white-space: pre-wrap; }
.ph-thinking { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ph-thinking .dots i, .ph-thinking .dots i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin: 0 1px; animation: phDot 1s infinite; }
.ph-thinking .dots i:nth-child(2) { animation-delay: .15s; } .ph-thinking .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes phDot { 50% { transform: translateY(-4px); opacity: .4; } }
.cam-video { width: 100%; max-height: 60vh; border-radius: 10px; background: #000; }
@media (prefers-reduced-motion: reduce) { .sev-cards .ev-truck *, .bm-pin, .bm-dot, .al-toast, .fn-type, .ym-ev { animation: none !important; } }
.as-bar > svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.ph-box .row > .btn { flex: none; }
.al-row .grow, .al-toast .grow { flex: 1; min-width: 0; }

/* v1.5.1 — realistic explorer artwork */
.ev-truck .spin { transform-box: fill-box; transform-origin: center; }
.sev-cards:not(.still) .ev-truck .spin { animation: whSpin .32s linear 3; animation-delay: var(--d); }
.sev-cards:not(.still) .ev-truck .bounce { animation: vBounce .4s ease-out 1; animation-delay: calc(var(--d) + .8s); transform-box: fill-box; transform-origin: 50% 100%; }
.ev-truck .beacon { animation: beacon 1s steps(2) infinite; }
.ev-truck .debris path { opacity: 0; }
.sev-cards:not(.still) .ev-truck .debris path { animation: debris .9s ease-out 1 both; animation-delay: calc(var(--d) + .85s); }
.ev-truck .leak { transform-box: fill-box; transform-origin: center; }
.sev-cards:not(.still) .ev-truck .leak { animation: leak 2s ease-out both; animation-delay: calc(var(--d) + 1.2s); }
.ev-truck .crack { stroke-dasharray: 60; }
.sev-cards:not(.still) .ev-truck .crack { animation: crack .5s ease-out both; animation-delay: calc(var(--d) + .85s); }
.ev-truck .flame path { filter: drop-shadow(0 0 3px rgba(249,115,22,.8)); }
@keyframes whSpin { to { transform: rotate(360deg); } }
@keyframes vBounce { 0% { transform: translateX(0) rotate(0); } 30% { transform: translateX(3px) rotate(-1.5deg); } 60% { transform: translateX(-2px) rotate(1deg); } 100% { transform: none; } }
@keyframes beacon { 50% { fill: #FDE68A; filter: drop-shadow(0 0 3px #F59E0B); } }
@keyframes debris { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes leak { from { transform: scaleX(.05); opacity: 0; } }
@keyframes crack { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.pf-idle .pf-up { animation: pfBreath 3.6s ease-in-out infinite; transform-box: view-box; transform-origin: 260px 215px; }
.pf-idle .pf-eyes { animation: pfBlink 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pfBreath { 50% { transform: scale(1.012, 1.018); } }
@keyframes pfBlink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.gfx-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .gfx-grid { grid-template-columns: 1fr; } }
.gfx-prev { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.gfx-person svg { width: 100%; max-height: 62vh; display: block; touch-action: none; }
.gfx-pt circle { fill: #EF4444; stroke: #fff; stroke-width: 2; cursor: grab; }
.gfx-pt.on circle { fill: #F59E0B; }
.gfx-veh-big .ev-truck { width: 100%; max-width: none; }
.gfx-veh-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.gfx-veh-mini { text-align: center; font-size: 11.5px; color: var(--muted); background: var(--panel); border-radius: 8px; padding: 6px; }
.gfx-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.gfx-colors input[type=color] { width: 100%; height: 34px; padding: 2px; }
.gfx-own { border: 1px dashed var(--line2); border-radius: 10px; padding: 10px; margin-top: 4px; }
.sev-art { height: 120px; }
@media (prefers-reduced-motion: reduce) { .ev-truck *, .pf-idle * { animation: none !important; } }

/* ---------------------------------------------------------------- v1.7.0 document gap analysis & PESTEL */
.pill.info { background: var(--infoBg); color: var(--info); }
.pill.violet { background: rgba(167,139,250,.14); color: var(--violet); }
.gap-cell { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.gap-cell:hover .pill { outline: 1px solid currentColor; }
.gap-bar { position: relative; display: flex; align-items: center; gap: 8px; min-width: 110px; }
.gap-bar::before { content: ""; position: absolute; left: 0; right: 44px; height: 6px; border-radius: 3px; background: var(--row); }
.gap-bar i { position: relative; display: block; height: 6px; border-radius: 3px; max-width: calc(100% - 44px); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.gap-bar span { margin-left: auto; font-size: 12px; }
.gap-stdmini .gap-bar::before { right: 0; } .gap-stdmini .gap-bar i { max-width: 100%; }
.gap-stds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; min-width: 300px; flex: 1; }
.gap-stdmini { font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.gap-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.drop.busy { pointer-events: none; opacity: .75; border-color: var(--accent); animation: pulseB 1.2s ease-in-out infinite; }
@keyframes pulseB { 50% { background: rgba(249,115,22,.07); } }
.gap-how ol { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.gap-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.gap-split > .card { position: sticky; top: 0; }
.gap-doc { max-height: calc(100vh - 250px); min-height: 360px; overflow: auto; padding: 18px 22px; font-size: 13px; line-height: 1.6; }
.gap-p { margin: 0 0 7px; padding: 3px 8px; border-radius: 6px; border-left: 3px solid transparent; position: relative; white-space: pre-wrap; transition: background .3s; }
.gap-p.gh { font-weight: 650; color: var(--ink); margin-top: 12px; }
.gap-p.gh1 { font-size: 16px; } .gap-p.gh2 { font-size: 14.5px; } .gap-p.gh3 { font-size: 13.5px; }
.gap-p.marked.sev-high { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.gap-p.marked.sev-medium { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, transparent); }
.gap-p.marked.sev-low { border-left-color: var(--info); background: color-mix(in srgb, var(--info) 6%, transparent); }
.gap-p.flash { box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.gap-marks { float: right; display: inline-flex; flex-wrap: wrap; gap: 3px; margin: 0 0 2px 8px; max-width: 45%; justify-content: flex-end; }
.gap-mk { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font: 600 11px/20px var(--mono); text-align: center; cursor: pointer; background: var(--line2); color: var(--ink); }
.gap-mk.sev-high { background: var(--bad); color: #fff; } .gap-mk.sev-medium { background: var(--warn); color: var(--bg); } .gap-mk.sev-low { background: var(--info); color: var(--bg); }
.gap-mk:hover { transform: scale(1.12); }
.gap-pbody { max-height: calc(100vh - 300px); min-height: 320px; overflow: auto; padding-right: 4px; }
.gap-grp { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent2); margin: 12px 0 6px; }
.gap-f { border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 8px; padding: 9px 11px; margin-bottom: 8px; background: var(--bg2); cursor: pointer; font-size: 12.5px; transition: border-color .2s, box-shadow .2s; }
.gap-f:hover { border-color: var(--line2); }
.gap-f.on { box-shadow: 0 0 0 2px var(--accent); }
.gap-f.sev-high { border-left-color: var(--bad); } .gap-f.sev-medium { border-left-color: var(--warn); } .gap-f.sev-low { border-left-color: var(--info); } .gap-f.met { border-left-color: var(--good); }
.gap-f.met svg { color: var(--good); width: 15px; height: 15px; }
.gap-fh { display: flex; align-items: center; gap: 7px; }
.gap-fh b { font-weight: 600; }
.gap-n { font: 600 11px var(--mono); color: var(--dim); min-width: 18px; }
.gap-where { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.gap-where svg { width: 13px; height: 13px; } .gap-where span { color: var(--ink2, var(--ink)); }
.gap-c { margin-top: 5px; line-height: 1.5; color: var(--ink2, var(--ink)); }
.gap-q { margin-top: 5px; font-style: italic; color: var(--dim); font-size: 12px; }
.gap-refs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.gap-ref { font: 11px var(--mono); padding: 1px 6px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
.gap-std { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg2); }
.gap-cls { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.gap-cl { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: 6px; background: var(--panel); font-size: 12.5px; }
.gap-cl > .mono { min-width: 46px; color: var(--accent2); }
.gap-cl .s { font-size: 11.5px; color: var(--dim); margin-top: 2px; } .gap-cl .s.bad { color: var(--bad); } .gap-cl .s.warn { color: var(--warn); }
@media (max-width: 1100px) { .gap-split { grid-template-columns: 1fr; } .gap-split > .card { position: static; } }

.pe-board { display: grid; grid-template-columns: repeat(6, minmax(178px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.pe-col { background: var(--bg2); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pe-colh { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.pe-colh b { color: var(--c); }
.pe-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; font-size: 12.5px; cursor: pointer; transition: opacity .2s, box-shadow .3s; }
.pe-card:hover { border-color: var(--line2); }
.pe-card.off { opacity: .45; }
.pe-card.flash { box-shadow: 0 0 0 2px var(--accent); }
.pe-t { font-weight: 600; flex: 1; outline: none; border-radius: 4px; }
.pe-d { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.45; outline: none; border-radius: 4px; }
.pe-t[contenteditable]:focus, .pe-d[contenteditable]:focus { background: var(--field); box-shadow: 0 0 0 1px var(--accent); }
.pe-sel { width: auto !important; height: 24px !important; padding: 0 4px !important; font-size: 11.5px; }
.pe-mx { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: 1fr auto; gap: 4px; }
.pe-ylab { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; color: var(--muted); text-align: center; }
.pe-xlab { grid-column: 2; font-size: 11px; color: var(--muted); text-align: center; }
.pe-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.pe-c { min-height: 46px; border-radius: 5px; padding: 3px; display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.pe-c.lo { background: color-mix(in srgb, var(--good) 14%, transparent); } .pe-c.md { background: color-mix(in srgb, var(--warn) 16%, transparent); } .pe-c.hi { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.pe-dot { width: 18px; height: 18px; border-radius: 50%; font: 700 10px/18px var(--mono); text-align: center; color: #0a1628; cursor: pointer; }
.pe-dot:hover { transform: scale(1.2); }
.pe-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pe-sumc { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--c); }
.pe-sumc > b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #0a1628; }
.gap-sumrow { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(240px, 360px); gap: 20px; align-items: center; }
.gap-sumrow .gap-stds { min-width: 0; grid-template-columns: 1fr; gap: 6px; }
.gap-sumrow .gap-stdmini { padding: 6px 10px; }
@media (max-width: 1100px) { .gap-sumrow { grid-template-columns: auto 1fr; } .gap-sumrow .gap-stds { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.gap-panel .grow, .pe-col .grow, .gap-std .grow, .gap-cl .grow { flex: 1; min-width: 0; }
.gap-ring svg text, .gap-std svg text, .gap-check svg text { fill: var(--ink); }

/* ---------------------------------------------------------------- v1.8 */
/* upcoming deadlines fill the whole card */
.card.widget > .card-b:has(> .upc-list) { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: 8px; }
.card.widget:has(.upc-list) { display: flex; flex-direction: column; }
.upc-list { flex: 1 1 auto; height: 0; min-height: 330px; overflow: auto; }
/* custom text in drop-downs */
.sel-custom { display: flex; gap: 4px; align-items: center; }
.sel-custom > select, .sel-custom > input { flex: 1; min-width: 0; }
.chip-add { border-style: dashed; color: var(--accent2); }
.chip-input { width: 160px !important; height: 26px !important; border-radius: 99px !important; font-size: 12px; }
/* smart mapping card */
.sm-card .card-h .r { gap: 6px; }
.sm-top { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sm-top .field { min-width: 280px; }
.sm-stats { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; }
.sm-title { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: 10px; margin-bottom: 10px; background: var(--bg2); }
.sm-cols { max-height: 520px; overflow: auto; }
.sm-cols tr.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.sm-sample { font-size: 12px; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-fsel { min-width: 230px; }
.sm-fsel.set { border-color: color-mix(in srgb, var(--accent) 60%, var(--line2)); }
.sm-vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.sm-vbox .card-b { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.sm-vrow { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1.1fr); gap: 6px; align-items: center; font-size: 12.5px; }
.sm-vrow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-vrow svg { width: 14px; height: 14px; color: var(--dim); }
.sm-vrow select { height: 30px; }
.sm-vrow select.unset { border-color: var(--warn); }
.sm-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.sm-radio { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--bg2); }
.sm-radio:has(input:checked) { border-color: var(--accent); }
.sm-radio.off { opacity: .5; cursor: not-allowed; }
.sm-extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; max-height: 380px; overflow: auto; }
.sm-x { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); font-size: 12.5px; cursor: pointer; }
.sm-x.empty { opacity: .55; }
.sm-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.sm-rec { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg2); font-size: 12.5px; }
.sm-rec-h { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sm-rec dl { display: grid; grid-template-columns: 130px 1fr; gap: 2px 8px; margin: 0; }
.sm-rec dt { color: var(--muted); } .sm-rec dd { margin: 0; overflow-wrap: anywhere; }
.warn-t { color: var(--warn); font-size: 11.5px; margin-top: 6px; }
.sm-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
/* organisation sections */
.fx-list { display: flex; flex-direction: column; gap: 6px; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1.4fr) 32px; gap: 6px; align-items: center; }
/* background */
#app { position: relative; }
#app-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#app-bg > i { position: absolute; inset: -30px; }
#app-bg::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--bg-dim, .7); }
:root.has-bg:not(.bg-app) #app-bg { left: var(--side); top: 56px; }
:root.has-bg #app > main, :root.has-bg #app > .side { position: relative; z-index: 1; }
:root.has-bg body, :root.has-bg #app { background: transparent; }
:root.has-bg main { background: transparent; }
:root.has-bg.bg-app .side { background: color-mix(in srgb, var(--bg2) 72%, transparent); backdrop-filter: blur(10px); }
:root.has-bg.bg-app .top { background: color-mix(in srgb, var(--bg) 60%, transparent); }
:root.has-bg.bg-app body { background: var(--bg); }
:root.has-bg.bg-glass main .card, :root.has-bg.bg-glass main .kpi { background: color-mix(in srgb, var(--panel) 80%, transparent); backdrop-filter: blur(8px); }
.bg-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; }
.bg-prev { position: relative; height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); }
.bg-prev > i { position: absolute; inset: -10px; }
.bg-prev::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--dim, .7); }
.bg-prev-card { position: absolute; left: 22px; top: 60px; z-index: 1; padding: 14px 18px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 80%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.bg-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.bg-sw { height: 54px; border-radius: 8px; border: 1px solid var(--line2); cursor: pointer; display: flex; align-items: flex-end; padding: 4px 6px; font-size: 10.5px; color: #fff; text-shadow: 0 1px 2px #0008; }
.bg-sw.none { background: var(--bg2); color: var(--muted); text-shadow: none; align-items: center; justify-content: center; }
.bg-sw:hover { outline: 2px solid var(--accent); }
@media (max-width: 900px) { .bg-ed { grid-template-columns: 1fr; } }
/* v1.8.1 — robot pop-up with new notifications (in the app) */
.ia-bot { position: fixed; right: 18px; bottom: 14px; z-index: 120; display: flex; align-items: flex-end; gap: 6px; animation: iaIn .55s cubic-bezier(.2,1.4,.4,1) both; }
.ia-bot.left { right: auto; left: 18px; flex-direction: row-reverse; }
.ia-bot.out { animation: iaOut .45s ease-in forwards; }
@keyframes iaIn { from { transform: translateY(140%); opacity: 0; } }
@keyframes iaOut { to { transform: translateY(140%); opacity: 0; } }
.ia-robot { position: relative; cursor: pointer; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.ia-robot .ia-body { animation: iaBob 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.ia-robot .ia-arm { transform-origin: 78px 74px; animation: iaWave 1s ease-in-out 3; }
@keyframes iaBob { 50% { transform: translateY(-5px); } }
@keyframes iaWave { 50% { transform: rotate(-38deg); } }
.ia-badge { position: absolute; top: 2px; right: -2px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #DC2626; color: #fff; font: 700 12px/22px var(--sans); text-align: center; border: 2px solid #fff; box-sizing: border-box; animation: iaPop .5s .4s both; }
@keyframes iaPop { from { transform: scale(0); } 70% { transform: scale(1.25); } }
.ia-bubble { width: 320px; max-height: 360px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); margin-bottom: 46px; animation: iaBub .35s .35s cubic-bezier(.2,1.3,.4,1) both; transform-origin: 100% 100%; }
@keyframes iaBub { from { transform: scale(.85); opacity: 0; } }
.ia-h { display: flex; gap: 8px; align-items: flex-start; padding: 10px 10px 6px 12px; }
.ia-h small { display: block; color: var(--muted); font-size: 11.5px; }
.ia-h .grow { flex: 1; }
.ia-list { overflow: auto; padding: 0 6px; }
.ia-it { display: flex; gap: 8px; align-items: flex-start; padding: 7px 6px; border-radius: 8px; cursor: pointer; transition: opacity .3s; }
.ia-it:hover { background: var(--panel2); }
.ia-it .grow { flex: 1; min-width: 0; }
.ia-it b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-it span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 11.5px; }
.ia-it.gone { opacity: 0; }
.ia-it .icon-btn { opacity: 0; color: var(--good); } .ia-it:hover .icon-btn { opacity: 1; }
.ia-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--info); }
.ia-dot.bad { background: var(--bad); } .ia-dot.warn { background: var(--warn); }
.ia-f { display: flex; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.ia-set { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 10px; margin-bottom: 10px; border: 1px dashed var(--line2); border-radius: 10px; font-size: 12.5px; }
/* v1.9 — management review draft & generate-from-records */
.mrm-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.mrm-grid textarea { width: 100%; }
@media (max-width: 1100px) { .mrm-grid { grid-template-columns: 1fr; } }
.sm-opts { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2); }
.rag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 10px; }
.rag-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; transition: opacity .2s; }
.rag-card.off { opacity: .5; }
.rag-h { display: flex; gap: 8px; align-items: flex-start; }
.rag-h .grow { flex: 1; min-width: 0; }
.rag-ev { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); }
.rag-f { gap: 8px 10px; }
.rag-f textarea { min-height: 44px; font-size: 12.5px; }
.rag-f input { font-size: 12.5px; }
.rag-rates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rag-rates label { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.rag-rates select { width: 54px; height: 28px; padding: 0 4px; }
.rag-score { display: flex; gap: 6px; margin-left: auto; }
.mrm-plus .row > svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
/* v1.9.1 — compact icons in Smart upload notices and drop zones */
.notice > svg, .notice svg { width: 16px; height: 16px; flex: none; vertical-align: -3px; color: var(--accent); }
.drop-big { padding: 18px 20px !important; }
.drop-big > svg { width: 20px !important; height: 20px !important; }
.drop > svg { width: 18px !important; height: 18px !important; }

/* v1.10 — on-page data filter bar */
.scope-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(6px); }
.scope-bar.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.scope-bar .sb-t { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.scope-bar .sb-t svg { width: 15px; height: 15px; }
.scope-bar .sb-f { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.scope-bar .sb-f > span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.scope-bar select { height: 32px; width: auto; min-width: 120px; max-width: 190px; border-radius: 8px; padding: 0 8px; }
.scope-bar .sb-f.set select { border-color: var(--accent); }
.scope-bar .sb-s { font-size: 11.5px; color: var(--muted); }
.scope-bar .pill svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.scope-bar .btn svg { width: 14px; height: 14px; }
.sf-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.sf-pages .sf-g { grid-column: 1 / -1; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 8px; }
@media (max-width: 860px) { .scope-bar select { min-width: 0; max-width: 46vw; } .scope-bar .sb-s { display: none; } }
.scope-bar .sb-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.top .search { min-width: 150px; flex: 1 1 200px; }
.top .scope { flex: 0 1 auto; min-width: 0; }
.top .scope select { max-width: 150px; min-width: 0; }
@media (max-width: 1280px) { .top .scope select { max-width: 120px; } }
@media (max-width: 1600px) { .scope-bar .sb-f > span { display: none; } }

/* v1.11 — terms, subscription, developer console, system map */
.terms-doc section { margin-bottom: 14px; }
.terms-doc h3 { font-size: 14px; margin: 14px 0 6px; }
.terms-doc p, .terms-doc li { font-size: 13px; line-height: 1.55; color: var(--ink2, var(--ink)); }
.terms-doc ul { margin: 4px 0 8px 18px; padding: 0; }
.terms-meta { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.terms-meta span { font-size: 12px; color: var(--muted); }
.terms-box { max-width: 760px; width: 100%; }
.terms-scroll { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; background: var(--panel); }
.terms-box .check { align-items: flex-start; font-size: 13px; }
.terms-box .check input { margin-top: 3px; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.kv-grid > div { display: flex; flex-direction: column; gap: 2px; }
.kv-grid small { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.plan { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--panel); transition: border-color .15s, transform .15s; }
.plan:hover { transform: translateY(-2px); }
.plan.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.plan h3 { margin: 0 0 6px; }
.plan .price { font-size: 22px; font-weight: 700; font-family: var(--mono); }
.plan .price small { font-size: 12px; font-weight: 500; color: var(--muted); font-family: inherit; }
.plan ul { margin: 8px 0 6px 16px; padding: 0; font-size: 12.5px; color: var(--ink2, var(--ink)); }
.plan-tag { position: absolute; top: 10px; right: 10px; }
.quote-tbl td.r, .tbl .r { text-align: right; }
.quote-tbl tr.tot td, .invoice-doc tr.tot td { font-weight: 700; font-size: 15px; }
.invoice-doc { padding: 6px 2px; }
.sub-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sub-banner svg { width: 16px; height: 16px; }
.sub-banner .btn { margin-left: auto; }
.dev-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 99px; border: 1px dashed #A78BFA; background: color-mix(in srgb, #A78BFA 14%, transparent); color: #C4B5FD; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dev-chip svg { width: 14px; height: 14px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.kpi-tile { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); display: flex; flex-direction: column; gap: 2px; }
.kpi-tile small { color: var(--muted); font-size: 11.5px; }
.kpi-tile b { font-size: 20px; font-family: var(--mono); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.be-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 12px; align-items: start; }
.be-tables { border: 1px solid var(--line); border-radius: 10px; max-height: 70vh; overflow: auto; background: var(--panel); }
.be-t { display: flex; justify-content: space-between; padding: 6px 10px; cursor: pointer; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.be-t:hover, .be-t.on { background: var(--panel2, var(--row)); }
.be-t.on { box-shadow: inset 3px 0 0 var(--accent); }
.be-rows { min-width: 0; }
.tbl-scroll { overflow: auto; max-height: 60vh; border: 1px solid var(--line); border-radius: 10px; }
.mono-tbl td, .mono-tbl th { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.json-view { max-height: 65vh; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all; margin: 0; }
.sub-tabs { margin-bottom: 12px; }
.terms-sec { margin-bottom: 8px; }
.terms-sec summary { padding: 10px 14px; cursor: pointer; }
.terms-sec textarea { min-height: 110px; }
.flow-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.flow-holder { min-width: 0; }
.flow-holder svg { display: block; border-radius: 12px; }
.flow-side { position: sticky; top: 10px; max-height: calc(100vh - 120px); overflow: auto; }
.flow-side h4 { margin: 12px 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.flow-side ul, .flow-side ol { margin: 0 0 0 18px; padding: 0; font-size: 12.5px; line-height: 1.6; }
.flow-node:hover rect:first-child { stroke-width: 2.4; }
.flow-btn svg { width: 15px; height: 15px; }
@media (max-width: 1100px) { .flow-layout { grid-template-columns: 1fr; } .be-wrap { grid-template-columns: 1fr; } .flow-side { position: static; } }
@media print { .side, .top, .page-head .actions, .notice, .card-h { display: none !important; } }

/* v1.12 — update offer, online demo */
.upd-card { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 330px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 18px 40px rgba(0,0,0,.45); animation: fadeUp .35s ease both; }
.upd-card p { margin: 8px 0 10px; font-size: 12.5px; color: var(--muted); }
.upd-card svg { width: 16px; height: 16px; }
.demo-cta { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.demo-cta > div { flex: 1; }
.demo-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.demo-banner svg { width: 16px; height: 16px; }
.demo-banner .btn { margin-left: auto; }

/* v1.13 — live updates, developer help desk */
.live-chip { position: fixed; left: 50%; top: 66px; transform: translateX(-50%); z-index: 55; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--accent); background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.live-chip svg { width: 14px; height: 14px; }
.dev-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #F97316; color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.dev-badge.hidden { display: none; }
.hd-thread { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.hd-msg { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--panel); max-width: 86%; }
.hd-msg.me { align-self: flex-end; border-color: color-mix(in srgb, #A78BFA 60%, var(--line)); background: color-mix(in srgb, #A78BFA 10%, var(--panel)); }
.hd-msg.int { border-style: dashed; opacity: .85; }
.hd-msg.ev { align-self: center; background: transparent; border: 0; font-size: 12px; color: var(--muted); }

/* v1.14 — payment QR codes, gateways */
.pay-qr { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pay-qr img { width: 170px; height: 170px; object-fit: contain; background: #fff; border-radius: 10px; padding: 6px; }
.qr-prev { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; }
.qr-prev img { width: 140px; height: 140px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; }
.gw-box { margin-top: 12px; border-color: color-mix(in srgb, var(--good, #34D399) 50%, var(--line)); }

/* v1.16 — payment methods, pay-now button, mobile apps */
.pay-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.pay-methods .pm { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); cursor: pointer; }
.pay-methods .pm.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pay-methods .pm input { margin: 0; }
.pay-methods .pm-ic svg { width: 20px; height: 20px; color: var(--accent); }
.pay-methods .pm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pay-methods .pm-t small { color: var(--muted); font-size: 11.5px; }
.pay-methods .pm-t .pill { align-self: flex-start; margin-top: 4px; }
.btn.big.pay-now { font-size: 15px; padding: 10px 18px; }
.mob-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.mob-card .card-h svg { width: 20px; height: 20px; color: var(--accent); }
.mob-b { display: flex; gap: 14px; align-items: flex-start; }
.mob-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.mob-qr img { width: 132px; height: 132px; background: #fff; padding: 6px; border-radius: 8px; image-rendering: pixelated; }
.mob-qr small { color: var(--muted); font-size: 11px; }
.mob-t { flex: 1; min-width: 0; }
.mob-steps { margin: 10px 0 0; padding-left: 18px; color: var(--ink2); font-size: 12.5px; line-height: 1.6; }
@media (max-width: 560px) { .mob-b { flex-direction: column; align-items: center; } }
/* v1.39.4 Apps page: the same layout in every card — buttons on top, then QR code and steps; two cards per row */
.apps-page .mob-grid { grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1000px) { .apps-page .mob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mob-card { display: flex; flex-direction: column; }
.mob-card > .card-b { flex: 1; }
.mob-b2 { display: flex; flex-direction: column; gap: 14px; }
.mob-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mob-acts > * { margin: 0 !important; }
.mob-row { display: flex; gap: 16px; align-items: flex-start; }
.mob-row .mob-steps { margin-top: 0; }
.mob-row .mob-qr img { width: 116px; height: 116px; }
@media (max-width: 480px) { .mob-row { flex-direction: column; align-items: center; } .mob-acts > .btn { flex: 1 1 100%; justify-content: center; } }

/* v1.17 — user manual & blueprint */
.man-search { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.man-search svg { width: 16px; height: 16px; color: var(--muted); }
.man-search input { flex: 1; border: 0; background: transparent; outline: none; }
.man-grid, .bp-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.man-toc, .bp-list { position: sticky; top: 8px; max-height: calc(100vh - 140px); overflow: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 6px; }
.man-toc a, .bp-list a { display: flex; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 6px; color: var(--ink2); font-size: 12.5px; text-decoration: none; }
.man-toc a:hover, .bp-list a:hover { background: var(--panel2); }
.bp-list a.on { background: var(--panel2); color: var(--accent); font-weight: 600; }
.bp-list a small { color: var(--muted); }
.man-g { margin: 10px 0 3px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.man-gh { font-size: 15px; margin: 18px 0 8px; color: var(--accent); }
.man-ch { margin-bottom: 12px; scroll-margin-top: 10px; }
.man-p { margin-top: 0; }
.man-steps, .man-tips { margin: 4px 0 10px; padding-left: 20px; line-height: 1.6; font-size: 13px; }
.man-con { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.bp-flow { overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--panel2); color: var(--ink); }
.bp-svg { width: 100%; min-width: 760px; height: auto; display: block; }
.bp-files { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.bp-code { max-height: 65vh; overflow: auto; background: #0b1220; color: #dbe7f5; border-radius: 8px; padding: 8px 0; font: 12px/1.5 Consolas, 'Cascadia Code', Menlo, monospace; }
.bp-ln { display: flex; white-space: pre; padding: 0 10px; }
.bp-ln .n { width: 52px; flex: none; color: #5b6b82; text-align: right; padding-right: 12px; user-select: none; }
.bp-ln.hit { background: rgba(249,115,22,.22); }
.bp-ln.find { background: rgba(250,204,21,.18); }
@media (max-width: 900px) { .man-grid, .bp-grid { grid-template-columns: 1fr; } .man-toc, .bp-list { position: static; max-height: 260px; } }

/* v1.18 — watermark "Compliance Monitoring by J23" over manual, blueprint and code */
.wm-area { position: relative; }
.wm-area::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='220'><text x='10' y='140' transform='rotate(-24 210 110)' font-family='Segoe UI, Arial' font-size='22' font-weight='700' fill='%23F97316'>Compliance Monitoring by J23</text></svg>");
  background-repeat: repeat; }
.owner-card .pill.mono { letter-spacing: .03em; }

/* v1.19 — pay first, then proof of payment */
.pf-steps { display: flex; gap: 10px; margin-bottom: 14px; }
.pf-step { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 13px; }
.pf-step span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); font-size: 12px; }
.pf-step.on { border-color: var(--accent); color: var(--ink); }
.pf-step.on span { background: var(--accent); color: #111; }
.pf-step.done span { background: var(--good, #34D399); color: #111; }
.pf-amount { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); margin-bottom: 12px; }
.pf-amount small { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.pf-amount b { font-size: 28px; font-family: var(--mono, Consolas, monospace); }
.pf-block { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.pf-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.pf-row:last-of-type { border-bottom: 0; }
.pf-k { color: var(--muted); font-size: 12.5px; }
.pf-v { word-break: break-all; }
.pf-v.big { font-size: 15px; color: var(--accent); }
.btn.disabled { opacity: .5; }
@media (max-width: 600px) { .pf-row { grid-template-columns: 1fr auto; } .pf-k { grid-column: 1 / -1; } }

/* ---- v1.20 inspection focus, coverage reminders, community, quick report */
.focus-card > summary { list-style: none; cursor: pointer; }
.focus-card > summary::-webkit-details-marker { display: none; }
.focus-card { margin: 12px 0; }
.focus-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.focus-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel2); }
.focus-n { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--accentInk); font: 700 13px var(--display); }
.focus-checks { margin: 6px 0 0; padding-left: 18px; color: var(--ink2); font-size: 12.5px; }
.focus-checks li { margin: 1px 0; }
.cov-list { display: flex; flex-direction: column; gap: 8px; }
.cov-gap { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r); background: var(--panel2); flex-wrap: wrap; }
.cov-gap .grow { min-width: 220px; }
.cm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cm-main { max-width: 720px; width: 100%; }
.cm-side { position: sticky; top: 0; }
.cm-compose textarea { width: 100%; resize: vertical; min-height: 70px; border: 0; background: transparent; font-size: 15px; padding: 6px 0; }
.cm-compose textarea:focus { outline: none; box-shadow: none; }
.cm-tools { gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; flex-wrap: wrap; }
.cm-tools select { width: auto; max-width: 240px; height: 30px; }
.cm-feed { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); overflow: hidden; }
.cm-feed:empty { display: none; }
.cm-feed > .empty, .cm-feed > .notice { margin: 14px; }
.cm-post { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cm-post:last-child { border-bottom: 0; }
.cm-post:hover { background: var(--hover); }
.cm-post.pinned { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cm-post.hidden-post { opacity: .55; }
.cm-post .avatar { width: 40px; height: 40px; font-size: 14px; }
.cm-meta { font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; }
.cm-body { margin-top: 3px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-tag { color: var(--info); text-decoration: none; } .cm-tag:hover { text-decoration: underline; }
.cm-at { color: var(--accent2); font-weight: 600; }
.cm-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.cm-act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 99px; border: 0; background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.cm-act:hover { background: var(--row); color: var(--ink); }
.cm-act.on { color: #F43F5E; }
.cm-act.on svg path { fill: currentColor; }
.cm-rec { margin-top: 8px; border: 1px solid var(--line2); border-radius: var(--r2); padding: 10px 12px; background: var(--panel2); cursor: pointer; }
.cm-rec.sum { border-color: color-mix(in srgb, var(--info) 45%, var(--line2)); }
.cm-rec:hover { border-color: var(--line3); }
.cm-rec-t { margin-top: 4px; font-weight: 600; }
.cm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 12px; margin-top: 8px; }
.cm-facts.col { grid-template-columns: 1fr 1fr; }
.cm-facts small { display: block; color: var(--muted); font-size: 11px; }
.cm-facts b { font-size: 14px; }
.cm-prev { position: relative; } .cm-prev .icon-btn { position: absolute; top: 12px; right: 6px; }
.cm-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cm-thread { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r2); margin-bottom: 10px; }
.cm-thread .cm-post:first-child { background: var(--panel2); }
.cm-reply textarea { width: 100%; }
.cm-pick { max-height: 360px; overflow: auto; }
.qc-btn { position: relative; margin-right: 6px; }
.qc-btn .badge { top: -6px; right: -6px; }
.qc-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qc-kinds button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--panel2); color: var(--ink2); font-weight: 600; cursor: pointer; }
.qc-kinds button svg { width: 22px; height: 22px; }
.qc-kinds button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--onSel); }
.qc textarea { font-size: 15px; }
.qc-hint { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.qc-photo { position: relative; } .qc-photo img { max-width: 100%; max-height: 220px; border-radius: var(--r); display: block; }
.qc-photo .icon-btn { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); }
.qc select { width: auto; min-width: 160px; }
@media (max-width: 1000px) { .cm-grid { grid-template-columns: 1fr; } .cm-side { position: static; } }
@media (max-width: 640px) { .qc-btn .qc-lbl { display: none; } }
.focus-card input, .drawer .focus-list + * input, .field.full .grow input { width: 100%; }
.focus-card .grow > input { width: 100%; }

/* ---- v1.21 sidebar counters, community photos & comments */
.nav a { position: relative; }
.nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--info); color: #06121F; font: 700 10.5px/18px var(--mono); text-align: center; flex: none; }
.nav-badge.over { background: var(--bad); color: #fff; }
.nav-group { display: flex; align-items: center; }
.nav-badge.grp { background: transparent; color: var(--muted); border: 1px solid var(--line2); height: 16px; line-height: 14px; font-size: 10px; margin-right: 10px; }
#app.collapsed .nav-badge { position: absolute; top: 2px; right: 4px; margin: 0; min-width: 14px; height: 14px; line-height: 14px; font-size: 9px; padding: 0 3px; }
#app.collapsed .nav-badge.grp { display: none; }
.cm-media { display: grid; gap: 4px; margin-top: 8px; border-radius: var(--r2); overflow: hidden; max-width: 560px; }
.cm-media.n1 { grid-template-columns: 1fr; } .cm-media.n2 { grid-template-columns: 1fr 1fr; } .cm-media.n3, .cm-media.n4 { grid-template-columns: 1fr 1fr; }
.cm-media.n3 .cm-ph:first-child { grid-row: span 2; }
.cm-ph { padding: 0; border: 0; background: var(--panel2); cursor: zoom-in; display: block; overflow: hidden; min-height: 80px; }
.cm-ph img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.cm-media.n1 .cm-ph img { object-fit: contain; max-height: 460px; background: #000; }
.cm-lightbox { display: grid; place-items: center; background: #000; border-radius: var(--r); min-height: 200px; }
.cm-lightbox img { max-width: 100%; max-height: 70vh; display: block; }
.cm-comments { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cm-comments.empty .cm-cmt-new { display: none; }
.cm-comments.empty { border-top: 0; padding-top: 0; margin-top: 0; }
.cm-cmt-list { display: flex; flex-direction: column; gap: 6px; }
.cm-cmt, .cm-cmt-new { display: flex; gap: 8px; align-items: flex-start; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.cm-bubble { display: inline-block; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 6px 11px; font-size: 13.5px; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
.cm-bubble b { display: block; font-size: 12.5px; }
.cm-bubble .cm-media { max-width: 320px; }
.cm-cmt-meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--muted); margin: 2px 0 0 10px; align-items: center; }
.linkish { border: 0; background: none; padding: 0; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.linkish:hover { color: var(--ink); text-decoration: underline; } .linkish.on { color: #F43F5E; }
.cm-more { align-self: flex-start; font-size: 12.5px; }
.cm-cmt-in { display: flex; align-items: flex-end; gap: 2px; background: var(--field); border: 1px solid var(--line2); border-radius: 18px; padding: 2px 4px 2px 12px; }
.cm-cmt-in textarea { flex: 1; border: 0; background: transparent; resize: none; min-height: 30px; padding: 6px 0; font-size: 13.5px; box-shadow: none !important; }
.cm-cmt-in textarea:focus { outline: none; }
.cm-cmt-pv { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cm-pv-it { position: relative; display: inline-flex; }
.cm-pv-it img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.cm-pv-it .icon-btn { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; background: var(--panel); border: 1px solid var(--line2); border-radius: 50%; }
.cm-cmt.sending { opacity: .55; }
.cm-post.fresh { animation: cmFresh 2.4s ease-out; }
@keyframes cmFresh { from { background: color-mix(in srgb, var(--info) 16%, transparent); } to { background: transparent; } }

/* ---- v1.22 community post types, teams, people */
.cm-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-kinds button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line2); background: var(--panel2); color: var(--ink2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cm-kinds button svg { width: 14px; height: 14px; }
.cm-kinds button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--onSel); }
.cm-tagbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.cm-tagbox:empty { display: none; }
.pill.cm-kind { display: inline-flex; align-items: center; gap: 4px; background: var(--infoBg); color: var(--info); }
.pill.cm-kind svg { width: 12px; height: 12px; }
.cm-post.k-announcement { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%); border-left: 3px solid var(--accent); }
.cm-post.k-announcement .cm-body { font-size: 15.5px; font-weight: 600; }
.cm-post.k-kudos { background: linear-gradient(90deg, rgba(250,204,21,.08), transparent 60%); }
.cm-ann-f { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.cm-kudos { margin-top: 8px; padding: 10px 12px; border-radius: var(--r2); background: rgba(250,204,21,.10); border: 1px solid rgba(250,204,21,.35); font-size: 14px; }
.cm-with { margin-top: 4px; }
.cm-poll { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.cm-opt { position: relative; display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel2); color: var(--ink); cursor: pointer; overflow: hidden; font: inherit; }
.cm-opt i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--info) 22%, transparent); transition: width .4s; }
.cm-opt.on { border-color: var(--info); }
.cm-opt.on i { background: color-mix(in srgb, var(--info) 34%, transparent); }
.cm-opt span, .cm-opt b { position: relative; }
.cm-opt .cm-opt-t { flex: 1; }
.cm-opt:disabled { cursor: default; }
.cm-poll-f { display: flex; gap: 10px; font-size: 12px; color: var(--muted); align-items: center; }
.cm-req { margin-top: 8px; padding: 10px 12px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--panel2); max-width: 620px; }
.cm-req-approval { border-left: 3px solid var(--warn); } .cm-req-action { border-left: 3px solid var(--accent); } .cm-req-event { border-left: 3px solid var(--info); }
.cm-ev { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.cm-ev-d { width: 46px; height: 50px; border-radius: 10px; background: var(--info); color: #06121F; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.cm-ev-d b { font-size: 20px; } .cm-ev-d small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.cm-people { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; max-width: 100%; }
.cm-person .avatar.sm { width: 22px; height: 22px; font-size: 9.5px; }
.cm-note { font-size: 11.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; margin-right: 8px; }
.cm-pp { cursor: pointer; gap: 10px; }
.cm-tabs button { font-size: 12.5px; }
.cm-team-sel { width: auto; height: 32px; }
.cm-page.compact .cm-ph img { max-height: 200px; }
.cm-page.compact .cm-media { max-width: 360px; }

/* ---- v1.23 popups: every button visible (they wrap to a new row instead of running off the screen) */
.drawer-h, .drawer-f { flex: none; }
.drawer-b { min-height: 0; }
.drawer-f { flex-wrap: wrap; row-gap: 8px; align-items: center; max-height: 45vh; overflow-y: auto; }
.drawer-f > .btn, .drawer-f > button { flex: none; white-space: nowrap; }
.drawer-f > .spacer { flex: 1 1 0; min-width: 0; }
.modal { max-height: 86vh; top: 7vh; }
@media (max-height: 760px) { .modal { top: 2vh; max-height: 96vh; } }
@media (max-width: 700px) { .drawer-f { padding: 10px 12px; } .drawer-f > .btn { padding-left: 10px; padding-right: 10px; } }
.ca-wrap { overflow-x: auto; }
.ca-tbl { min-width: 720px; }
.ca-tbl td { padding: 4px 6px; vertical-align: middle; }
.ca-tbl td input, .ca-tbl td select { width: 100%; min-width: 0; }
.ca-tbl td:nth-child(2) { width: 38%; }
.ca-tbl .ca-n { width: 26px; color: var(--muted); font-family: var(--mono); }
.ca-tbl .ca-st { width: 86px; text-align: right; }
.ca-tbl .need { border-color: var(--warn) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.inv-tbl td select, .inv-tbl td input { min-width: 120px; }

/* ---- v1.25 phone layout (apps, phones, narrow windows) */
.mob-tabbar, .mob-scrim { display: none; }
body.is-mobile #app { grid-template-columns: 1fr !important; grid-template-rows: 52px 1fr; height: 100dvh; }
body.is-mobile .side { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 70; transform: translateX(-104%); transition: transform .22s ease; grid-row: auto; box-shadow: 0 0 40px rgba(0,0,0,.5); }
body.is-mobile.nav-open .side { transform: none; }
body.is-mobile.nav-open .mob-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; }
body.is-mobile .brand-text, body.is-mobile .nav-label { display: inline !important; }
body.is-mobile .nav-group { display: flex !important; }
body.is-mobile .nav a { padding-top: 11px; padding-bottom: 11px; }
body.is-mobile .top { padding: 0 8px; gap: 6px; padding-top: env(safe-area-inset-top); }
body.is-mobile .top .search { flex: 1; min-width: 0; max-width: none; }
body.is-mobile .top .search input { min-width: 0; font-size: 14px; }
body.is-mobile .top .scope, body.is-mobile #themeBtn, body.is-mobile #helpBtn, body.is-mobile .top .me .who, body.is-mobile .dev-chip span:not(.dev-badge) { display: none !important; }
body.is-mobile .qc-btn .qc-lbl { display: none; }
body.is-mobile #app > main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
body.is-mobile .page { padding: 12px 10px 24px; }
body.is-mobile .page-head { align-items: flex-start; }
body.is-mobile .page-head h1 { font-size: 20px; }
body.is-mobile .page-head .actions { margin-left: 0; width: 100%; }
body.is-mobile .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }
body.is-mobile .form-grid, body.is-mobile .grid, body.is-mobile .split, body.is-mobile .home-row, body.is-mobile .cm-grid { grid-template-columns: 1fr !important; }
body.is-mobile .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.is-mobile table.tbl, body.is-mobile .dt table { display: block; overflow-x: auto; max-width: 100%; }
body.is-mobile .card-b { overflow-x: auto; }
body.is-mobile .drawer, body.is-mobile .drawer.wide { width: 100vw; border-left: 0; }
body.is-mobile .modal, body.is-mobile .modal.wide { width: 96vw; top: 2vh; max-height: 94vh; }
body.is-mobile .drawer-b { padding: 14px 12px 24px; }
body.is-mobile .tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
body.is-mobile .seg { overflow-x: auto; max-width: 100%; }
body.is-mobile .scope-bar { flex-wrap: wrap; }
body.is-mobile .bot-fab, body.is-mobile .robot-fab { bottom: 76px !important; }
body.is-mobile .mob-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--bg2); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
.mob-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--muted); font-size: 10.5px; padding: 6px 0; cursor: pointer; }
.mob-tab svg { width: 20px !important; height: 20px !important; }
.mob-tab:active, .mob-tab:focus { color: var(--accent2); }
body.is-mobile input, body.is-mobile select, body.is-mobile textarea { font-size: 16px; }
body.is-mobile .auth { grid-template-columns: 1fr; } body.is-mobile .auth-art { display: none; }
body.is-mobile .toast { left: 8px; right: 8px; bottom: 76px; }

/* ---- v1.25 pages */
.fv { display: grid; place-items: center; background: #000; border-radius: var(--r); min-height: 200px; }
.fv-img { max-width: 100%; max-height: 72vh; display: block; }
.fv-pdf { width: 100%; height: 72vh; border: 0; background: #fff; }
.fv-txt { width: 100%; max-height: 72vh; overflow: auto; background: var(--bg); color: var(--ink); margin: 0; padding: 12px; white-space: pre-wrap; }
.st-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.st-opt { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 12px; border: 1px solid var(--line2); border-radius: var(--r2); background: var(--panel2); color: var(--ink); font: inherit; }
button.st-opt { cursor: pointer; } button.st-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.st-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel2); }
.sc-t > summary { list-style: none; cursor: pointer; } .sc-t > summary::-webkit-details-marker { display: none; }
.sc-t { margin-bottom: 8px; } .sc-t td input { min-width: 160px; }
.dg { border-bottom: 1px solid var(--line); padding: 8px 0; } .dg summary { cursor: pointer; } .dg li { margin: 3px 0; }

/* ---- v1.25 phone: robot and its notification pop-up stay on screen, above the bottom bar */
body.is-mobile .bot-dock { bottom: calc(70px + env(safe-area-inset-bottom)) !important; right: 6px !important; }
body.is-mobile .bot-dock .bot-main { width: 64px; }
body.is-mobile .ia-bot { left: 8px !important; right: 8px !important; bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
body.is-mobile .ia-bot.left { flex-direction: row; }
body.is-mobile .ia-bubble { width: auto; flex: 1 1 auto; min-width: 0; max-height: 52vh; margin-bottom: 34px; }
body.is-mobile .ia-robot { transform: scale(.8); transform-origin: 100% 100%; flex: none; }
body.is-mobile .live-chip { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); }
body.is-mobile .bot-bubble { width: calc(100vw - 24px); max-height: 55vh; }
body.is-mobile .hero h1, body.is-mobile .hero-copy h1 { font-size: 30px !important; line-height: 1.12 !important; }
body.is-mobile .hero { grid-template-columns: 1fr !important; }
/* phone: the robot's alert cards are not shown over the page (they stay in the robot / bell) */
body.is-mobile .al-stack { display: none !important; }
body.is-mobile .bot-say { max-width: calc(100vw - 120px); }

/* ---- v1.25.2 phone: all modules on one screen; menu drawer scrolls reliably */
.am-page { padding-bottom: 30px; }
.am-head { display: flex; gap: 12px; align-items: center; padding: 6px 2px 12px; }
.am-search { display: flex; align-items: center; gap: 8px; background: var(--field); border: 1px solid var(--line2); border-radius: 12px; padding: 0 12px; margin-bottom: 6px; position: sticky; top: 0; z-index: 2; }
.am-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; height: 44px; flex: 1; min-width: 0; }
.am-group { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 16px 2px 8px; }
.am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.am-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; padding: 14px 6px 12px; min-height: 92px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; text-align: center; }
.am-tile:active { background: var(--panel2); border-color: var(--accent); }
.am-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent2); }
.am-ic svg { width: 20px; height: 20px; }
.am-l { font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; }
.am-b { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--info); color: #06121F; font: 700 10.5px/18px var(--mono); }
.am-b.over { background: var(--bad); color: #fff; }
.am-foot { margin-top: 22px; display: flex; justify-content: center; }
body.is-mobile .side { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
body.is-mobile .side .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
body.is-mobile #app { height: 100vh; height: 100dvh; }
/* v1.26 duplicate prompt */
.dup-opts{display:flex;flex-direction:column;gap:6px}
.dup-opt{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.dup-opt:has(input:checked){border-color:var(--accent,#F97316);background:var(--soft,#FFF7ED)}

/* ================================================================ v1.26 */
.bot-guide { white-space: normal !important; line-height: 1.3; font-size: 11px; }
.myview .card-h, .insights .card-h { flex-wrap: wrap; }
.mv-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.mv-filters select, .mv-filters input { width: auto; font-size: 12.5px; padding: 4px 8px; }
.mv-h { margin: 14px 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mv-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.mv-heat td.hm { font-family: var(--mono); font-size: 12px; min-width: 52px; }
.ins-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ins { display: block; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--info); background: var(--bg2); cursor: pointer; color: inherit; text-decoration: none; }
.ins:hover { border-color: var(--line2); }
.ins b { display: block; margin: 2px 0 4px; }
.ins .muted { font-size: 12.5px; line-height: 1.4; }
.ins.bad { border-left-color: var(--bad); } .ins.warn { border-left-color: var(--warn); } .ins.good { border-left-color: var(--good); }
.ins-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mh-tbl td, .mh-tbl th { white-space: nowrap; }
.mh-tbl tr.tot td { border-top: 2px solid var(--line2); }
input.inl, select.inl { padding: 3px 6px; font-size: 12.5px; min-width: 70px; max-width: 130px; background: transparent; border: 1px solid transparent; border-radius: 6px; }
input.inl:hover, input.inl:focus, select.inl:hover, select.inl:focus { border-color: var(--line2); background: var(--bg); }
.di-sum ul, .di-sec ul { margin: 4px 0 10px; padding-left: 18px; line-height: 1.5; }
.di-sum h4, .di-sec h4 { margin: 10px 0 4px; }
.di-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.di-map { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.di-map input[type=text], .di-map input:not([type]) { width: 100%; }
.hv-p { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 6px; }
.hv-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hv-g { display: flex; flex-direction: column; gap: 4px; }
.hv-multi { min-width: 130px; max-width: 200px; height: 30px; }
.hv-multi:focus { height: 120px; position: relative; z-index: 3; }
.db-grid td { font-size: 11.5px; cursor: text; }
html.lite #field, html.lite .particles, html.lite canvas#field { display: none !important; }
html.lite .hero-art *, html.lite .bot-strip svg * { animation: none !important; }
.mob-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--bad, #DC2626); color: #fff; font: 700 10px/16px var(--sans, system-ui); text-align: center; }

/* phone app: status bar, solid menu, drawers that fit */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
body.is-mobile .top { padding-top: var(--sat); height: auto; min-height: calc(52px + var(--sat)); }
body.is-mobile #app { grid-template-rows: calc(52px + var(--sat)) 1fr; }
body.is-mobile .side { background-color: var(--bg, #0A1628); background-image: linear-gradient(var(--bg2), var(--bg2)); padding-top: var(--sat); backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; }
body.is-mobile .drawer { top: 0; height: 100dvh; padding-top: var(--sat); background-color: var(--bg, #0A1628); background-image: linear-gradient(var(--bg2), var(--bg2)); }
body.is-mobile .drawer-f { padding-bottom: calc(10px + var(--sab)); }
body.is-mobile .modal { top: calc(var(--sat) + 8px); max-height: calc(100dvh - var(--sat) - var(--sab) - 16px); }
body.is-mobile .notif-pop, body.is-mobile .notif-panel, body.is-mobile .bell-pop { top: calc(var(--sat) + 56px) !important; }
body.is-mobile .mob-tabbar { padding-bottom: calc(4px + var(--sab)); }
body.is-mobile .mob-tab { position: relative; }
body.is-mobile .mv-cols { grid-template-columns: 1fr; }
body.is-mobile .mv-filters { width: 100%; }
body.is-mobile .ins-list { grid-template-columns: 1fr; }
body.is-mobile .hv-p { flex-direction: column; align-items: stretch; }
body.is-mobile .kpi .v { font-size: 21px; }
body.is-mobile .myview .card-b, body.is-mobile .insights .card-b { padding: 10px; }
html.in-app body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html.in-app input, html.in-app textarea, html.in-app [contenteditable] { user-select: text; -webkit-user-select: text; }
.ins-short .ins:nth-child(n+4) { display: none; }
.ins-more { margin: 0 12px 12px; }
body.is-mobile .home-tools { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }

/* ================================================================ v1.27 */
.back-btn { margin-right: 6px; align-self: flex-start; }
.page-head > .back-btn { order: -1; }
.nav-cats { display: flex; gap: 4px; padding: 6px 10px 2px; flex-wrap: wrap; }
.nav-cats button { font-size: 11px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.nav-cats button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#app.collapsed .nav-cats { display: none; }
.nav-badge { cursor: pointer; }
.bdg-pop { position: fixed; z-index: 90; width: min(360px, calc(100vw - 16px)); max-height: 60vh; overflow: auto; background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.45); padding: 6px; }
.bdg-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; }
.bdg-i { display: flex; gap: 8px; align-items: flex-start; padding: 7px 6px; border-radius: 7px; cursor: pointer; color: inherit; text-decoration: none; }
.bdg-i:hover { background: var(--bg); }
.bdg-i .t { font-weight: 600; font-size: 12.5px; } .bdg-i .s { font-size: 11.5px; color: var(--muted); }
.bdg-all { display: block; text-align: center; padding: 8px; font-size: 12px; cursor: pointer; }
.flt-chip { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 0 0 10px; border: 1px dashed var(--accent); border-radius: 8px; font-size: 12.5px; }
.fv-tbl { max-height: 65vh; overflow: auto; } .fv-tbl td { white-space: nowrap; font-size: 12px; } .fv-tbl tr.fv-h td { font-weight: 700; background: var(--bg); position: sticky; top: 0; }
.hb { display: flex; flex-direction: column; gap: 6px; }
.hb-r { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
.hb-r.click { cursor: pointer; border-radius: 6px; } .hb-r.click:hover { background: var(--bg); }
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-t { height: 10px; background: rgba(148,163,184,.15); border-radius: 6px; overflow: hidden; }
.hb-f { display: block; height: 100%; border-radius: 6px; }
.hb-v { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }
.grid2 > .card { margin-bottom: 0 !important; }
.pb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.pb select, .pb input { width: auto; height: 30px; font-size: 12.5px; }
.pb-l { font-size: 11.5px; }
.reg-pb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.hc-days { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding: 6px 0; }
.hc-d { flex: 1; height: 100%; display: flex; align-items: flex-end; } .hc-d span { display: block; width: 100%; background: var(--info); border-radius: 3px 3px 0 0; min-height: 3px; }
.vw { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px; border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: 8px; }
.vw.good { border-left-color: var(--good); } .vw.bad { border-left-color: var(--bad); } .vw.warn { border-left-color: var(--warn); }
.vw .s { font-size: 12px; color: var(--muted); }
.inc-bar .inc-hint { flex: 1 1 260px; }
.ns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ns { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: inherit; cursor: pointer; text-align: left; }
.ns:hover { border-color: var(--accent); } .ns small { color: var(--muted); font-size: 11.5px; } .ns svg { color: var(--accent); }
.ph-grid { display: grid; grid-template-columns: minmax(200px, 40%) 1fr; gap: 14px; align-items: start; }
.ph-img { width: 100%; border-radius: 8px; }
.sk-canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lay-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); cursor: pointer; color: inherit; text-decoration: none; }
.lay-card img, .lay-ph { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; }
.lay-wrap { display: grid; grid-template-columns: 170px 1fr 260px; gap: 10px; align-items: start; }
.lay-tools { display: flex; flex-direction: column; gap: 3px; max-height: 70vh; overflow: auto; }
.lt { display: flex; align-items: center; gap: 6px; padding: 5px 7px; font-size: 12px; text-align: left; border: 1px solid var(--line); border-radius: 7px; background: var(--bg2); color: inherit; cursor: pointer; }
.lt.on { border-color: var(--accent); background: rgba(249,115,22,.12); }
.lt-sym { display: inline-flex; }
.lay-canvas { background: #fff; border: 1px solid var(--line2); border-radius: 8px; overflow: auto; }
.lay-svg { width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; user-select: none; }
.lay-svg .li { cursor: move; }
.lay-sel { fill: none; stroke: #2563EB; stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.lay-side { display: flex; flex-direction: column; gap: 10px; }
.lay-props { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); display: flex; flex-direction: column; gap: 8px; }
.lay-exp { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.gm-row { display: flex; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.gm-row .s { font-size: 11.5px; color: var(--muted); }
body.is-mobile .grid2 { grid-template-columns: 1fr; }
body.is-mobile .lay-wrap { grid-template-columns: 1fr; }
body.is-mobile .lay-tools { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none; }
body.is-mobile .lt { white-space: nowrap; }
body.is-mobile .ph-grid { grid-template-columns: 1fr; }
body.is-mobile .hb-r { grid-template-columns: minmax(80px, 40%) 1fr auto; }
.lay-top select { width: auto; max-width: 240px; }
.ctl-row > select, .ctl-row > input { width: auto; max-width: 280px; }

/* ================================================================ v1.28 */
.hse-sum .card-h { flex-wrap: wrap; }
.hs-dates { display: flex; gap: 6px; align-items: center; }
.hs-dates input { width: auto; height: 30px; font-size: 12.5px; }
.hs-wf { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.hs-wf-c { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); cursor: pointer; }
.hs-wf-c:hover { border-color: var(--accent); }
.hs-wf-h { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.hs-split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.hs-split .ok { background: var(--good); } .hs-split .no { background: var(--bad); }
.hs-wf-n { display: flex; gap: 14px; margin-top: 6px; font-size: 12.5px; flex-wrap: wrap; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hs-c { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); min-width: 0; }
.hs-t { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.hs-t svg { width: 15px; height: 15px; color: var(--accent); }
.hs-seg button { font-size: 12px; }
body.is-mobile .hs-grid, body.is-mobile .hs-wf { grid-template-columns: 1fr; }

/* ================================================================ v1.29 — preliminary incident report */
.ip-page { max-width: 1100px; }
.ip-sec { border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); margin-bottom: 14px; overflow: hidden; }
.ip-sec-h { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ip-sec-h h3 { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.ip-sec-h small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ip-n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: none; }
.ip-sec-b { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ip-sec-b h4 { margin: 4px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 12px; }
.ip-grid > label.field.hidden { display: flex !important; }
.ip-full { width: 100%; }
.ip-chips .chip { cursor: pointer; }
.ip-add { display: flex; gap: 6px; margin-top: 6px; }
.ip-add input { flex: 1; min-width: 0; }
.ip-list { display: flex; flex-direction: column; gap: 6px; }
.ip-li { display: flex; gap: 6px; align-items: center; }
.ip-li input { flex: 1; min-width: 0; }
.ip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.ip-empty { font-size: 12px; padding: 4px 0; }
.ip-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ip-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.ip-th { position: relative; width: 150px; height: 112px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.ip-th img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.ip-th .icon-btn { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); color: #fff; }
.ip-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ip-up { width: 150px; height: 112px; border: 2px dashed var(--line); border-radius: 10px; background: transparent; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.ip-up:hover { border-color: var(--accent); }
.ip-up small { color: var(--muted); font-size: 10.5px; text-align: center; padding: 0 6px; }
.ip-ainote { min-height: 16px; }
.ip-foot { gap: 8px; margin: 6px 0 30px; }
.ip-docs { margin-bottom: 14px; }
.ip-gen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ip-g { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; justify-content: space-between; background: var(--bg2); }
.ip-gh { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; }
.ip-gh small { grid-column: 2; color: var(--muted); font-size: 11.5px; }
.ip-logo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ip-logo-v { width: 180px; height: 70px; border: 1px dashed var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fff; }
.ip-logo-v img { max-width: 170px; max-height: 62px; }
body.is-mobile .ip-two { grid-template-columns: 1fr; }
@media (max-width: 720px) { .ip-two { grid-template-columns: 1fr; } }

/* v1.30 — smart drill-down */
.hs-lnk { cursor: pointer; color: inherit; border-radius: 6px; padding: 1px 4px; margin: -1px -4px; }
.hs-lnk:hover { background: var(--bg); text-decoration: underline; }
.hs-split > span { cursor: pointer; }
.hs-split > span:hover { filter: brightness(1.15); }
.hs-list { margin-top: 12px; }
.hs-list .hs-t .spacer { flex: 1; }
.hs-tbl td { vertical-align: top; font-size: 12.5px; }
.hs-tbl .pill { white-space: nowrap; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--bg); }
.drill-page .kpi .l.clip { max-width: 180px; }

/* v1.31 — firewall details, tenant logs, developer console section bar */
.fw-k { cursor: pointer; transition: border-color .15s, transform .15s; }
.fw-k:hover { border-color: var(--accent); transform: translateY(-1px); }
.fw-ip { cursor: pointer; color: var(--accent); }
.fw-ip:hover { text-decoration: underline; }
.fw-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.fw-chips .chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); cursor: pointer; font-size: 12px; }
.fw-chips .chip:hover { border-color: var(--accent); }
.fw-chips .chip.me { border-color: var(--good); }
.fw-act { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
body:not(.is-mobile) .dev-page > .tabs { flex-wrap: wrap; overflow: visible; row-gap: 2px; }

/* v1.34 — phone: drawers and pop-ups open above the bottom tab bar, so their Save / Close buttons are reachable */
body.is-mobile .scrim { z-index: 61; }
body.is-mobile .drawer { z-index: 62; }
body.is-mobile .scrim.top { z-index: 63; }
body.is-mobile .modal { z-index: 64; }

/* v1.36.1 — phone with a background picture: the menu stays a slide-in panel (it was pushed into the page) */
:root.has-bg body.is-mobile #app > .side { position: fixed; z-index: 70; background: var(--bg2); backdrop-filter: none; }
:root.has-bg body.is-mobile #app > main { z-index: 1; }
:root.has-bg body.is-mobile #app-bg { left: 0 !important; top: 0 !important; }
:root.has-bg body.is-mobile .top { position: relative; z-index: 2; }

/* v1.40.3 community: call the author */
.cm-call { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 6px; border-radius: 50%; background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); vertical-align: middle; text-decoration: none; }
.cm-call svg { width: 14px; height: 14px; }
.cm-call:hover { background: color-mix(in srgb, var(--good) 30%, transparent); }
body.is-mobile .cm-call { width: 32px; height: 32px; }

/* v1.40.3 — every screen fits the width of the phone / window: the main area may not grow to its widest content
   (it did: the inspection checklist made the whole page 640 px wide on a 412 px phone, cutting the right side). */
#app > main { min-width: 0; }
body.is-mobile #app { grid-template-columns: minmax(0, 1fr) !important; }
body.is-mobile #app > main .page { max-width: 100%; }
body.is-mobile .insp-item { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 12px; }
body.is-mobile .insp-item > :nth-child(3) { grid-column: 2 / -1; justify-self: start; max-width: 100%; }
body.is-mobile .insp-head { flex-wrap: wrap; }
body.is-mobile .md-toggle, body.is-mobile .sb-t { min-width: 0; }
body.is-mobile .md-toggle span, body.is-mobile .sb-t { overflow: hidden; text-overflow: ellipsis; }
body.is-mobile main img, body.is-mobile main canvas, body.is-mobile main video, body.is-mobile main iframe { max-width: 100%; }
body.is-mobile main pre, body.is-mobile main code { white-space: pre-wrap; word-break: break-word; }
body.is-mobile main select, body.is-mobile main input, body.is-mobile main textarea { max-width: 100%; min-width: 0; }
body.is-mobile main .card, body.is-mobile main .card-h, body.is-mobile main .card-b { max-width: 100%; min-width: 0; }
body.is-mobile main .seg, body.is-mobile main .tabs, body.is-mobile main .cm-kinds { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cm-grid > * { min-width: 0; }
body.is-mobile .cm-grid { grid-template-columns: minmax(0, 1fr) !important; }