/* DooVina · Phòng điều hành · CSS hệ thống
   Token theo hồ sơ xây dựng 4.1 (cùng tên với bản mẫu sống ux/live.css): --ok chạy/ổn · --human cần founder · --danger lỗi/sự cố
   · --ops bị chặn · --coo điều phối, vắng mặt · --dev thông tin, xu hướng việc · --biz doanh thu · --muted rảnh, chữ phụ.
   Lưới 4 px · bo góc 8–14 px · khoảng cách khối 10 px · chữ 13 px · dải trạng thái 19 px · số chỉ số 22 px. */
:root{
  --bg:#F1F4F5; --surface:#FFFFFF; --surface-2:#E7ECEF; --ink:#14212A; --muted:#566570; --line:#D2DAE0;
  --human:#D98A00; --human-ink:#8A5600; --on-human:#241600;
  --coo:#6B4FD0; --coo-ink:#5639B8;
  --biz:#0F9B83; --biz-ink:#0B6F5E;
  --dev:#2F64D0; --dev-ink:#2451AE;
  --ops:#C2477F; --ops-ink:#9E2F62;
  --danger:#C8382E; --danger-ink:#A92A21; --ok:#1F8A4C; --ok-ink:#176B3B;
  --on-solid:#FFFFFF; --tint:11%;
  --human-soft:color-mix(in srgb, var(--human) var(--tint), var(--surface));
  --coo-soft:color-mix(in srgb, var(--coo) var(--tint), var(--surface));
  --biz-soft:color-mix(in srgb, var(--biz) var(--tint), var(--surface));
  --dev-soft:color-mix(in srgb, var(--dev) var(--tint), var(--surface));
  --ops-soft:color-mix(in srgb, var(--ops) var(--tint), var(--surface));
  --danger-soft:color-mix(in srgb, var(--danger) var(--tint), var(--surface));
  --ok-soft:color-mix(in srgb, var(--ok) var(--tint), var(--surface));
  /* Latin-first: SF Pro / Segoe UI / Be Vietnam Pro đủ dấu tiếng Việt; font CJK không đứng đầu */
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Be Vietnam Pro", "Noto Sans", Roboto, "Liberation Sans", Arial, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-body:"Be Vietnam Pro", var(--sans);
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r:12px; --gap:10px; --top:48px; --nav:38px; --tabs:58px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1519; --surface:#172028; --surface-2:#1F2A33; --ink:#E8EEF2; --muted:#9AAAB6; --line:#2C3942;
    --human:#F2A51E; --human-ink:#F7C25E; --on-human:#241600;
    --coo:#9D86F0; --coo-ink:#B9A8F5; --biz:#2CC2A6; --biz-ink:#5ED9C3; --dev:#6C95F0; --dev-ink:#93B2F5;
    --ops:#E26BA3; --ops-ink:#F08FBD; --danger:#F06558; --danger-ink:#F58B81; --ok:#3DBA74; --ok-ink:#6FD39A; --tint:18%;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1519; --surface:#172028; --surface-2:#1F2A33; --ink:#E8EEF2; --muted:#9AAAB6; --line:#2C3942;
  --human:#F2A51E; --human-ink:#F7C25E; --on-human:#241600;
  --coo:#9D86F0; --coo-ink:#B9A8F5; --biz:#2CC2A6; --biz-ink:#5ED9C3; --dev:#6C95F0; --dev-ink:#93B2F5;
  --ops:#E26BA3; --ops-ink:#F08FBD; --danger:#F06558; --danger-ink:#F58B81; --ok:#3DBA74; --ok-ink:#6FD39A; --tint:18%;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:13px; line-height:1.4; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--coo); outline-offset:2px}
a{color:var(--dev-ink)}
.mono, .lp-t, code, kbd{font-family:var(--font-mono)}
.num, .lp-num{font-variant-numeric:tabular-nums}
.sr, .lp-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.muted{color:var(--muted)}
.right{text-align:right}
.hide{display:none !important}
h1,h2,h3,h4,h5{margin:0; font-weight:800; letter-spacing:-.01em}
h2{font-size:17px} h3{font-size:14px}
p{margin:0}
kbd{border:1px solid var(--line); border-radius:4px; padding:0 4px; font-size:10.5px; background:var(--surface-2)}

/* ---------- khung ứng dụng ---------- */
#app{min-height:100vh; display:flex; flex-direction:column}
#app.s-stop{box-shadow:inset 0 0 0 3px var(--danger)}
#app.s-away{box-shadow:inset 0 0 0 2px var(--coo)}
.lp-bar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--line); min-height:var(--top)}
.lp-brand{display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:-.01em; margin-right:auto; font-size:13.5px; border:0; background:none; padding:0}
.lp-brand i{width:9px; height:9px; border-radius:50%; background:var(--human); box-shadow:12px 0 0 var(--coo), 24px 0 0 var(--biz); margin-right:26px; display:inline-block}
.lp-brand small{font-weight:500; color:var(--muted); font-size:12px; white-space:nowrap}
@media (max-width:979px){ .lp-brand small{display:none} .lp-bell{white-space:nowrap} .lp-bar{flex-wrap:wrap; gap:6px 8px; row-gap:6px} .lp-mini{order:9; flex-basis:100%} }
.lp-chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12px; background:var(--surface); white-space:nowrap}
.lp-chip b{font-weight:700}
.lp-chip.sm{padding:1px 7px; font-size:11px}
.lp-mini{display:inline-flex; align-items:center; gap:7px; font-size:12px; white-space:nowrap; border:0; background:none; padding:0}
.lp-mini .lp-meter{width:84px}
.lp-kill{border:0; background:var(--danger); color:var(--on-solid); border-radius:8px; padding:6px 12px; font-weight:700; font-size:12.5px; min-height:32px}
.lp-kill.lp-runbtn{background:var(--ok)}
.lp-bell{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:5px 9px; font-size:12px; min-height:32px}
.lp-bell b{display:inline-grid; place-items:center; min-width:17px; height:17px; border-radius:9px; background:var(--danger); color:var(--on-solid); font-size:10.5px; margin-left:4px; padding:0 4px}
.lp-bell b.zero{background:var(--surface-2); color:var(--muted)}
.c1-clock{font-family:var(--font-mono); font-size:12px; color:var(--muted); white-space:nowrap}
.c1-clock b{color:var(--ink)}
.c1-sim{display:inline-flex; gap:4px; align-items:center}
.c1-sim button{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:2px 7px; font-size:11px; min-height:26px; color:var(--muted)}
.c1-sim button.on{background:var(--coo-soft); border-color:var(--coo); color:var(--coo-ink); font-weight:700}

.lp-nav{position:sticky; top:var(--top); z-index:19; display:flex; gap:2px; padding:4px 8px; border-bottom:1px solid var(--line); background:var(--surface); overflow-x:auto; scrollbar-width:none}
.lp-nav::-webkit-scrollbar{display:none}
.lp-nav a{border:0; background:none; padding:5px 10px; border-radius:7px; font-size:12.5px; color:var(--muted); white-space:nowrap; min-height:30px; text-decoration:none; display:inline-flex; align-items:center; gap:5px}
.lp-nav a.on{background:var(--surface-2); color:var(--ink); font-weight:700}
.lp-nav a:hover{color:var(--ink)}
.lp-nav em, .lp-tabs em{font-style:normal; background:var(--human); color:var(--on-human); border-radius:8px; padding:0 5px; font-size:10px; font-weight:700}

#main{flex:1; padding:12px; display:grid; gap:var(--gap); align-content:start; max-width:1440px; width:100%; margin:0 auto}
.c1-page{display:grid; gap:var(--gap); min-width:0}
.c1-ph{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.c1-ph h2{margin-right:auto}
.c1-ph .lp-chip{font-size:11.5px}
.c1-grid2{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--gap); align-items:start}
.c1-grid3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); align-items:start}
.c1-grid4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); align-items:start}
.c1-grid2e{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); align-items:start}
.c1-stack{display:grid; gap:var(--gap); min-width:0}
.lp-tabs{display:none}

/* ---------- dải trạng thái công ty ---------- */
.lp-band{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:12px 14px; border-radius:12px; border:1px solid var(--c); background:color-mix(in srgb, var(--c) 10%, var(--surface))}
.lp-band .lp-ico{grid-row:span 2; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--c); color:var(--on-solid); font-size:21px; line-height:1}
.lp-band .lp-lv{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink); font-weight:700}
.lp-band h4{margin:0; font-size:19px; line-height:1.25; font-weight:800; letter-spacing:-.015em; text-wrap:balance; grid-column:2}
.lp-band .lp-sub{color:var(--muted); font-size:12.5px; grid-column:2}
.lp-band .lp-why{grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.lp-band .lp-why button{border:1px solid color-mix(in srgb, var(--c) 45%, var(--line)); background:var(--surface); border-radius:999px; padding:3px 10px; font-size:12px; min-height:28px}
.lp-band .lp-act{grid-row:1 / span 2; grid-column:3; display:grid; gap:6px; justify-items:end; text-align:right; align-content:center}
.lp-live{font-size:11.5px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.lp-live i{width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block}
.lp-live.on i{animation:lpPulse 1.6s ease-out infinite}
.lp-live.stale{color:var(--human-ink)} .lp-live.stale i{background:var(--human)}
.lp-s-ok{--c:var(--ok); --c-ink:var(--ok-ink)}
.lp-s-need{--c:var(--human); --c-ink:var(--human-ink)}
.lp-s-bad{--c:var(--danger); --c-ink:var(--danger-ink)}
.lp-s-stop{--c:var(--danger); --c-ink:var(--danger-ink)}
.lp-s-away{--c:var(--coo); --c-ink:var(--coo-ink)}
.lp-s-load{--c:var(--muted); --c-ink:var(--muted)}
.lp-band.lp-s-stop{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 16%, var(--surface)) 0 10px, color-mix(in srgb, var(--danger) 8%, var(--surface)) 10px 20px)}

/* ---------- chỉ số ---------- */
.lp-vitals{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px}
.lp-vt{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:9px 11px 8px; display:grid; gap:2px; min-width:0; text-align:left; align-content:start}
.lp-vt:hover{border-color:var(--ink)}
.lp-vt .lp-k{font-size:11.5px; color:var(--muted)}
.lp-vt .lp-v{font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap}
.lp-vt .lp-v small{font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:0}
.lp-vt .lp-d{font-size:11.5px; color:var(--muted); line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.lp-vt .lp-d.up{color:var(--ok-ink)} .lp-vt .lp-d.warn{color:var(--human-ink)} .lp-vt .lp-d.bad{color:var(--danger-ink)}
.lp-sw{position:relative; display:block; margin-top:2px}
.lp-sw svg{display:block; width:100%; height:26px}
.lp-vt .lp-stack{height:7px; margin:10px 0 9px}
.lp-vt .lp-meter{margin:10px 0 9px}
.lp-dots{display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 7px; min-height:12px}
.lp-dots i{width:11px; height:11px; border-radius:50%; background:color-mix(in srgb, var(--muted) 45%, var(--surface))}
.lp-dots i.o{background:var(--ok)} .lp-dots i.w{background:var(--human); border-radius:2px; transform:rotate(45deg) scale(.82)}
.lp-dots i.b{background:var(--danger); border-radius:0; clip-path:polygon(50% 0,100% 100%,0 100%)}
.lp-vt.lp-warn{border-color:var(--human)} .lp-vt.lp-bad{border-color:var(--danger)}
.lp-spark .ln{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.lp-spark .ar{stroke:none; opacity:.12}
.lp-spark .dt{stroke:var(--surface); stroke-width:2}
.c1-bars{display:block; width:100%; height:90px}
.c1-bars.tall{height:140px}

/* thước */
.lp-meter{height:7px; border-radius:4px; background:color-mix(in srgb, var(--ok) 16%, var(--surface-2)); overflow:hidden; position:relative}
.lp-meter i{display:block; height:100%; border-radius:4px; background:var(--ok)}
.lp-meter.w{background:color-mix(in srgb, var(--human) 18%, var(--surface-2))} .lp-meter.w i{background:var(--human)}
.lp-meter.b{background:color-mix(in srgb, var(--danger) 18%, var(--surface-2))} .lp-meter.b i{background:var(--danger)}
.lp-meter u{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink); opacity:.55}
.c1-meterrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; font-size:12.5px}
.c1-meterrow .lp-meter{grid-column:1 / -1}
.c1-meterrow b{font-variant-numeric:tabular-nums}

/* ---------- thẻ, tiêu đề khối ---------- */
.lp-main{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:var(--gap); align-items:start}
.lp-col{display:grid; gap:var(--gap); min-width:0}
.lp-card{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:10px 12px; min-width:0}
.lp-card.lp-hl{box-shadow:0 0 0 3px color-mix(in srgb, var(--coo) 45%, transparent)}
.lp-card.warn{border-color:var(--human)} .lp-card.bad{border-color:var(--danger)}
.lp-h{display:flex; align-items:baseline; gap:8px; margin:0 0 8px; flex-wrap:wrap}
.lp-h b{font-size:13.5px; font-weight:800}
.lp-h small{color:var(--muted); font-size:11.5px}
.lp-h .lp-r{margin-left:auto; display:flex; gap:6px; align-items:center}
.lp-empty{font-size:12px; color:var(--muted); padding:6px 2px}

/* ---------- trạng thái agent ---------- */
.lp-g{display:inline-grid; place-items:center; width:15px; height:15px; font-size:11px; line-height:1; flex:none; position:relative; font-style:normal}
.lps-run .lp-g, .lp-g.lps-run{color:var(--ok)} .lps-idle .lp-g, .lp-g.lps-idle{color:var(--muted)} .lps-wait .lp-g, .lp-g.lps-wait{color:var(--human)}
.lps-block .lp-g, .lp-g.lps-block{color:var(--ops)} .lps-err .lp-g, .lp-g.lps-err{color:var(--danger)} .lps-pause .lp-g, .lp-g.lps-pause{color:var(--muted)} .lps-off .lp-g, .lp-g.lps-off{color:var(--muted); opacity:.7}
.lps-run .lp-g::after{content:""; position:absolute; inset:2px; border-radius:50%; border:2px solid var(--ok); opacity:0}
.anim .lps-run .lp-g::after{animation:lpRing 2.2s ease-out infinite}
@keyframes lpRing{0%{transform:scale(.6); opacity:.7} 100%{transform:scale(1.9); opacity:0}}
@keyframes lpPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent)} 100%{box-shadow:0 0 0 7px transparent}}
.lp-legend{display:flex; flex-wrap:wrap; gap:2px 4px; font-size:11.5px; color:var(--muted); margin:-2px 0 8px}
.lp-legend button{display:inline-flex; align-items:center; gap:4px; white-space:nowrap; border:1px solid transparent; background:none; border-radius:999px; padding:2px 8px 2px 5px; font-size:11.5px; color:var(--muted); min-height:26px}
.lp-legend button:hover{border-color:var(--line)}
.lp-legend button.on{border-color:var(--coo); background:var(--coo-soft); color:var(--coo-ink)}
.lp-clr{border:1px solid var(--coo); background:var(--coo-soft); color:var(--coo-ink); border-radius:999px; padding:2px 9px; font-size:11.5px; min-height:26px}
.lp-legend b{color:var(--ink); font-variant-numeric:tabular-nums}

/* bản đồ đội */
.lp-depts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.lp-dept{border:1px solid var(--line); border-radius:10px; padding:7px; background:var(--bg); min-width:0; display:grid; gap:5px; align-content:start}
.lp-dept.span2{grid-column:span 2}
.lp-dept.lp-full{grid-column:1 / -1}
.lp-dept.lp-full .lp-nodes{grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr))}
.lp-dh{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700}
.lp-dh i{width:8px; height:8px; border-radius:2px; background:var(--dc); flex:none}
.lp-dh small{margin-left:auto; color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums}
.lp-stack{display:flex; height:5px; border-radius:3px; overflow:hidden; gap:2px; background:var(--surface-2)}
.lp-stack i{display:block; height:100%}
.lp-stack i.lps-run{background:var(--ok)} .lp-stack i.lps-idle{background:color-mix(in srgb, var(--muted) 35%, var(--surface))} .lp-stack i.lps-wait{background:var(--human)}
.lp-stack i.lps-block{background:var(--ops)} .lp-stack i.lps-err{background:var(--danger)} .lp-stack i.lps-pause{background:var(--muted)} .lp-stack i.lps-off{background:var(--line)}
.lp-nodes{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); gap:5px}
.lp-node{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:0 5px; align-items:center; text-align:left; border:1px solid var(--line); border-left:3px solid var(--sc, var(--line)); border-radius:8px; padding:4px 6px 5px; background:var(--surface); min-width:0; min-height:44px}
.lp-node:hover{border-color:var(--ink)}
.lp-node b{font-family:var(--font-mono); font-size:11px}
.lp-node .lp-usd{font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.lp-node .lp-tk{grid-column:1 / -1; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lp-node.lps-run{--sc:var(--ok)} .lp-node.lps-wait{--sc:var(--human)} .lp-node.lps-block{--sc:var(--ops)} .lp-node.lps-err{--sc:var(--danger)} .lp-node.lps-pause{--sc:var(--muted)} .lp-node.lps-off{--sc:var(--line); border-style:dashed}
.lp-node.lps-err{background:color-mix(in srgb, var(--danger) 7%, var(--surface))}
.lp-node.lps-wait{background:color-mix(in srgb, var(--human) 7%, var(--surface))}
.lp-node.lp-dim{opacity:.35}
.lp-node.lp-sel{box-shadow:0 0 0 2px var(--coo)}
.anim .lp-node.lp-flash{animation:lpFlash .9s ease-out}
@keyframes lpFlash{from{background:color-mix(in srgb, var(--coo) 22%, var(--surface))} to{background:var(--surface)}}

/* dòng chảy việc */
.lp-flow{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; position:relative}
.lp-stg{position:relative; border:1px solid var(--line); background:var(--bg); border-radius:9px; padding:7px 8px 6px; text-align:left; min-width:0; display:grid; gap:1px}
.lp-stg:not(:last-child)::after{content:"›"; position:absolute; right:-8px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px; z-index:1; background:var(--surface); line-height:1}
.lp-stg .lp-n{font-size:20px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums}
.lp-stg .lp-sl{font-size:11px; color:var(--muted)}
.lp-stg .lp-age{font-size:10.5px; color:var(--muted); font-family:var(--font-mono)}
.lp-stg.lp-neck{border-color:var(--human); background:color-mix(in srgb, var(--human) 10%, var(--surface))}
.lp-stg.lp-neck .lp-age{color:var(--human-ink); font-weight:700}
.lp-stg.lp-done .lp-n{color:var(--ok)}
.lp-stg.lp-on{box-shadow:0 0 0 2px var(--coo)}
.lp-side{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; align-items:center; font-size:11.5px; color:var(--muted)}
.lp-side button{border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:2px 9px; font-size:11.5px; min-height:26px}
.lp-side button.lps-block{border-color:var(--ops)} .lp-side button.lps-err{border-color:var(--danger)}
.lp-side button.lp-on{box-shadow:0 0 0 2px var(--coo)}
.lp-nk{color:var(--human-ink); font-weight:700}
.lp-thru{display:flex; align-items:center; gap:8px; margin-left:auto}
.lp-thru small{color:var(--muted); font-size:11px}
.lp-thru .lp-sw{width:90px; margin:0}
.lp-thru .lp-sw svg{height:20px}

/* cột phải */
.lp-q{display:grid; gap:6px}
.lp-ap{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 8px; align-items:center; text-align:left; border:1px solid var(--line); background:var(--bg); border-radius:9px; padding:6px 8px; width:100%}
.lp-ap:hover{border-color:var(--ink)}
.lp-lvl{font-family:var(--font-mono); font-size:10.5px; font-weight:700; border-radius:5px; padding:1px 5px; border:1.5px solid; white-space:nowrap}
.lp-lvl.L0{color:var(--muted); border-color:var(--line); background:var(--surface-2)}
.lp-lvl.L1{color:var(--dev-ink); border-color:var(--dev); background:var(--dev-soft)}
.lp-lvl.L2{color:var(--human-ink); border-color:var(--human); background:var(--human-soft)}
.lp-lvl.L3{color:var(--danger-ink); border-color:var(--danger); background:var(--danger-soft)}
.lp-lvl.G{color:var(--coo-ink); border-color:var(--coo); background:var(--coo-soft)}
.lp-ap .lp-at{font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lp-ap .lp-aw{grid-column:2 / -1; font-size:11px; color:var(--muted)}
.lp-ap.lp-urg{border-color:var(--human); background:color-mix(in srgb, var(--human) 7%, var(--bg))}
.lp-ap.lp-sel{box-shadow:0 0 0 2px var(--coo)}
.lp-ap.lp-gone{opacity:.5}
.lp-ring{grid-row:span 2; width:30px; height:30px}
.lp-ring .tr{fill:none; stroke:var(--surface-2); stroke-width:4}
.lp-ring .fg{fill:none; stroke-width:4; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%}
.lp-ring text{font-size:9.5px; font-weight:700; fill:var(--ink); font-family:var(--font-mono)}
.lp-al{display:grid; grid-template-columns:4px minmax(0,1fr); gap:0 8px; border:1px solid var(--line); border-radius:9px; background:var(--bg); padding:6px 8px 6px 0; overflow:hidden; text-align:left; width:100%}
.lp-al::before{content:""; grid-row:span 4; background:var(--sv); border-radius:0 3px 3px 0}
.lp-al.crit{--sv:var(--danger)} .lp-al.warn{--sv:var(--human)} .lp-al.info{--sv:var(--dev)}
.lp-al b{font-size:12px} .lp-al small{color:var(--muted); font-size:11px}
.lp-al .lp-sev{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase}
.lp-al.crit .lp-sev{color:var(--danger-ink)} .lp-al.warn .lp-sev{color:var(--human-ink)} .lp-al.info .lp-sev{color:var(--dev-ink)}
.lp-al.ack{opacity:.6}
.lp-al .c1-alb{display:flex; gap:6px; margin-top:4px; flex-wrap:wrap}
.lp-feed{list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:11.5px}
.lp-feed li{display:grid; grid-template-columns:38px auto minmax(0,1fr); gap:6px; align-items:baseline}
.lp-feed li > span:first-child{font-family:var(--font-mono); color:var(--muted); font-size:10.5px}
.lp-feed .lp-et{font-family:var(--font-mono); font-size:10px; border-radius:4px; padding:0 4px; background:var(--surface-2); white-space:nowrap}
.lp-feed .lp-et.ok{background:color-mix(in srgb, var(--ok) 16%, var(--surface))} .lp-feed .lp-et.wait{background:var(--human-soft)} .lp-feed .lp-et.bad{background:var(--danger-soft)} .lp-feed .lp-et.coo{background:var(--coo-soft)}
.anim .lp-feed li.lp-new{animation:lpIn .6s ease-out}
@keyframes lpIn{from{background:color-mix(in srgb, var(--coo) 18%, transparent)} to{background:transparent}}

/* nền tảng */
.lp-plat{display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:6px}
.lp-pl{border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:6px 8px; min-width:0; text-align:left; display:grid; gap:1px}
.lp-pl b{font-size:11.5px; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lp-pl b i{width:8px; height:8px; border-radius:50%; flex:none; background:var(--ok); font-style:normal}
.lp-pl small{font-size:10.5px; color:var(--muted); line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.lp-pl.warn{border-color:var(--human)} .lp-pl.warn b i{background:var(--human); border-radius:1px; transform:rotate(45deg)}
.lp-pl.bad{border-color:var(--danger); background:color-mix(in srgb, var(--danger) 8%, var(--surface))} .lp-pl.bad b i{background:var(--danger); border-radius:0; clip-path:polygon(50% 0,100% 100%,0 100%)}
.lp-pl.bad small{color:var(--danger-ink)}
.lp-pl.gray b i{background:var(--muted)}
.lp-pl.lp-sel{box-shadow:0 0 0 2px var(--coo)}
.lp-pli{width:11px; height:11px; border-radius:50%; background:var(--ok); display:inline-block; flex:none}
.lp-pli.warn{background:var(--human); border-radius:2px; transform:rotate(45deg) scale(.85)} .lp-pli.bad{background:var(--danger); border-radius:0; clip-path:polygon(50% 0,100% 100%,0 100%)} .lp-pli.gray{background:var(--muted)}

/* ---------- ngăn chi tiết, hộp thoại ---------- */
.lp-scrim{position:fixed; inset:0; background:color-mix(in srgb, var(--ink) 30%, transparent); z-index:40}
.lp-drawer{position:fixed; top:0; right:0; bottom:0; width:min(400px, 100%); background:var(--surface); border-left:1px solid var(--line); z-index:41; overflow:auto; padding:14px; display:grid; gap:10px; align-content:start; box-shadow:-18px 0 40px -24px color-mix(in srgb, var(--ink) 60%, transparent)}
.lp-x{position:absolute; top:10px; right:10px; border:1px solid var(--line); background:var(--surface); border-radius:8px; width:32px; height:32px; z-index:2}
.lp-drawer h5{margin:0; font-size:16px; padding-right:40px; display:flex; align-items:center; gap:6px}
.lp-drawer .lp-meta, .c1-meta{color:var(--muted); font-size:12px}
.c1-crumb{display:flex; flex-wrap:wrap; gap:4px; font-size:11.5px; color:var(--muted); align-items:center}
.c1-crumb button{border:0; background:none; padding:2px 4px; color:var(--dev-ink); text-decoration:underline; min-height:26px}
.c1-crumb b{color:var(--ink)}
.lp-ladder{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:3px}
.lp-ladder > *{font-size:11px; text-align:center; padding:5px 2px; border-radius:6px; background:var(--surface-2); color:var(--muted); border:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:28px}
.lp-ladder > .on{background:var(--coo); color:var(--on-solid); font-weight:700}
.lp-now{border-radius:8px; padding:7px 10px; font-size:12.5px; background:var(--surface-2); border-left:3px solid var(--sc, var(--line))}
.lp-now.lps-run{--sc:var(--ok)} .lp-now.lps-wait{--sc:var(--human)} .lp-now.lps-block{--sc:var(--ops)} .lp-now.lps-err{--sc:var(--danger)} .lp-now.lps-pause{--sc:var(--muted)}
.lp-sh{display:block; font-size:12px; margin-bottom:6px; font-weight:700}
.lp-steps{list-style:none; margin:0; padding:0; display:grid; gap:0}
.lp-steps li{display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:8px; align-items:start; font-size:12.5px; position:relative; padding-bottom:9px}
.lp-steps li:not(:last-child)::before{content:""; position:absolute; left:8px; top:16px; bottom:0; width:2px; background:var(--line)}
.lp-steps li i{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-style:normal; border:2px solid var(--line); background:var(--surface); z-index:1}
.lp-steps li.ok i{border-color:var(--ok); background:var(--ok); color:var(--on-solid)} .lp-steps li.now i{border-color:var(--ok); color:var(--ok)}
.lp-steps li.err i{border-color:var(--danger); color:var(--danger)} .lp-steps li.blk i{border-color:var(--ops); color:var(--ops)} .lp-steps li.pz i{border-color:var(--muted); color:var(--muted)}
.lp-steps li.now span, .lp-steps li.err span, .lp-steps li.blk span, .lp-steps li.pz span{font-weight:600}
.lp-steps li small{color:var(--muted); font-family:var(--font-mono); font-size:10.5px}
.lp-kv{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; font-size:12.5px; margin:0}
.lp-kv dt{color:var(--muted)} .lp-kv dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; min-width:0}
.lp-btns{display:flex; flex-wrap:wrap; gap:6px}
.lp-b{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 11px; font-weight:600; font-size:12.5px; min-height:34px; display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:inherit}
.lp-b.pri{background:var(--coo); border-color:var(--coo); color:var(--on-solid)}
.lp-b.ok{background:var(--ok); border-color:var(--ok); color:var(--on-solid)}
.lp-b.dg{background:var(--danger); border-color:var(--danger); color:var(--on-solid)}
.lp-b.dgo{border-color:var(--danger); color:var(--danger-ink)}
.lp-b.sm{padding:3px 8px; min-height:28px; font-size:11.5px}
.lp-b:disabled{opacity:.45; cursor:not-allowed}
.lp-b.on{background:var(--coo-soft); border-color:var(--coo); color:var(--coo-ink)}
.c1-seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.c1-seg button{border:0; background:var(--surface); padding:5px 10px; font-size:12px; min-height:32px; color:var(--muted)}
.c1-seg button + button{border-left:1px solid var(--line)}
.c1-seg button.on, .c1-seg button[aria-pressed="true"]{background:var(--coo-soft); color:var(--coo-ink); font-weight:700}

.lp-dlg{position:fixed; left:50%; top:max(16px, 8vh); transform:translateX(-50%); width:min(480px, calc(100% - 24px)); max-height:calc(100vh - 32px); background:var(--surface); border:1px solid var(--line); border-radius:14px; z-index:42; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; box-shadow:0 24px 60px -20px color-mix(in srgb, var(--ink) 70%, transparent)}
.lp-dlg.dg{border-top:4px solid var(--danger)}
.lp-dlg.wide{width:min(640px, calc(100% - 24px))}
.lp-dlg header{padding:13px 14px 4px; padding-right:48px} .lp-dlg header b{font-size:15px; display:block} .lp-dlg header small{color:var(--muted); font-size:12px}
.lp-dlg .lp-db{padding:6px 14px 12px; display:grid; gap:8px; font-size:12.5px; overflow:auto}
.lp-dlg footer{display:flex; justify-content:flex-end; gap:6px; padding:10px 14px; border-top:1px solid var(--line); flex-wrap:wrap}
.lp-dlg footer .left{margin-right:auto}
.lp-seg{border:1px solid var(--line); border-radius:8px; padding:6px 10px 8px; margin:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px}
.lp-seg legend{font-weight:600; font-size:12px; padding:0 4px}
.lp-seg label{display:inline-flex; gap:6px; align-items:center; min-height:28px}
.lp-seg input{accent-color:var(--coo)}
.lp-lbl{font-weight:600; font-size:12px; display:grid; gap:4px}
.lp-lbl small{font-weight:400; color:var(--muted)}
.lp-lbl .cnt{font-weight:400; color:var(--muted); font-family:var(--font-mono); font-size:10.5px; justify-self:end}
.lp-in{border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:var(--bg); color:var(--ink); font:inherit; width:100%; min-height:34px}
.lp-in:focus{outline:2px solid var(--coo); outline-offset:1px}
.lp-in[aria-invalid="true"]{border-color:var(--danger)}
textarea.lp-in{min-height:64px; resize:vertical}
.lp-diff{font-family:var(--font-mono); font-size:11.5px; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.lp-diff div{padding:3px 8px} .lp-diff .m{background:var(--danger-soft)} .lp-diff .p{background:color-mix(in srgb, var(--ok) 14%, var(--surface))}
.lp-note{border-radius:8px; padding:6px 9px; font-size:12px; background:var(--surface-2)} .lp-note.w{background:var(--human-soft)} .lp-note.b{background:var(--danger-soft)} .lp-note.g{background:var(--ok-soft)} .lp-note.c{background:var(--coo-soft)}
.lp-prog{height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden} .lp-prog i{display:block; height:100%; background:var(--danger); transition:width .25s}
.lp-prog.ok i{background:var(--ok)} .lp-prog.coo i{background:var(--coo)}
.lp-chk{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; min-height:28px}
.lp-chk input{margin-top:2px; accent-color:var(--coo); width:16px; height:16px}
.c1-cond{display:grid; gap:3px; font-size:12.5px}
.c1-cond li{list-style:none; display:flex; gap:6px; align-items:center}
.c1-cond .ok{color:var(--ok-ink)} .c1-cond .no{color:var(--danger-ink)}
.lp-toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); background:var(--ink); color:var(--bg); border-radius:10px; padding:8px 14px; font-size:12.5px; z-index:50; max-width:calc(100% - 24px); display:flex; gap:10px; align-items:center}
.lp-toast button{border:1px solid color-mix(in srgb, var(--bg) 40%, transparent); background:none; color:inherit; border-radius:6px; padding:2px 8px; min-height:26px}
.c1-banner{display:flex; gap:10px; align-items:center; padding:8px 12px; border-radius:10px; border:1px solid var(--human); background:var(--human-soft); font-size:12.5px; flex-wrap:wrap}
.c1-banner.coo{border-color:var(--coo); background:var(--coo-soft)}
.c1-banner.bad{border-color:var(--danger); background:var(--danger-soft)}
.c1-banner .lp-b{margin-left:auto}

/* ---------- bảng, danh sách ---------- */
.c1-tbl{width:100%; border-collapse:collapse; font-size:12.5px}
.c1-tbl th, .c1-tbl td{padding:6px 8px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.c1-tbl th{font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
.c1-tbl td.num, .c1-tbl th.num{text-align:right; font-variant-numeric:tabular-nums}
.c1-tbl tr.sel td{background:var(--coo-soft)}
.c1-tbl tr.click{cursor:pointer} .c1-tbl tr.click:hover td{background:var(--surface-2)}
.c1-tbl td .mono{font-size:11.5px}
.c1-tblwrap{overflow:auto; max-width:100%}
.c1-pill{display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:1px 8px; font-size:11px; background:var(--surface-2); color:var(--muted); white-space:nowrap}
.c1-pill.ok{background:var(--ok-soft); color:var(--ok-ink)} .c1-pill.warn{background:var(--human-soft); color:var(--human-ink)} .c1-pill.bad{background:var(--danger-soft); color:var(--danger-ink)} .c1-pill.coo{background:var(--coo-soft); color:var(--coo-ink)} .c1-pill.dev{background:var(--dev-soft); color:var(--dev-ink)} .c1-pill.biz{background:var(--biz-soft); color:var(--biz-ink)} .c1-pill.ops{background:var(--ops-soft); color:var(--ops-ink)}
.c1-filters{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.c1-filters select, .c1-filters input{min-height:32px; width:auto}
.c1-list{display:grid; gap:6px}
.c1-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 8px; align-items:center; border:1px solid var(--line); border-radius:9px; background:var(--bg); padding:6px 8px; text-align:left; width:100%}
.c1-row:hover{border-color:var(--ink)}
.c1-row .t{font-weight:600; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.c1-row .s{grid-column:2 / -1; font-size:11px; color:var(--muted)}
.c1-row.sel{box-shadow:0 0 0 2px var(--coo)}
.c1-row.dim{opacity:.55}
.c1-tl{list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:12px}
.c1-tl li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; align-items:baseline}
.c1-tl li span:first-child{font-family:var(--font-mono); color:var(--muted); font-size:10.5px}
.c1-9{display:flex; gap:3px; flex-wrap:wrap}
.c1-9 span{border:1px solid var(--line); border-radius:6px; padding:2px 7px; font-size:11px; color:var(--muted); background:var(--bg)}
.c1-9 span.done{border-color:var(--ok); color:var(--ok-ink); background:var(--ok-soft)}
.c1-9 span.now{border-color:var(--coo); color:var(--coo-ink); background:var(--coo-soft); font-weight:700}
.c1-9 span.bad{border-color:var(--danger); color:var(--danger-ink)}

/* bảng kanban dòng chảy */
.c1-kanban{display:grid; grid-template-columns:repeat(9, minmax(150px, 1fr)); gap:6px; overflow-x:auto; padding-bottom:4px}
.c1-kcol{border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:6px; display:grid; gap:5px; align-content:start; min-width:0}
.c1-kcol.neck{border-color:var(--human); background:color-mix(in srgb, var(--human) 8%, var(--surface))}
.c1-kh{display:grid; gap:1px; font-size:11.5px; padding:2px 2px 4px}
.c1-kh b{font-size:13px} .c1-kh small{color:var(--muted); font-family:var(--font-mono); font-size:10.5px}
.c1-kc{border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:5px 7px; text-align:left; width:100%; display:grid; gap:1px; min-height:44px}
.c1-kc:hover{border-color:var(--ink)}
.c1-kc b{font-family:var(--font-mono); font-size:11px}
.c1-kc span{font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.c1-kc small{color:var(--muted); font-size:10.5px}
.c1-kc.sel{box-shadow:0 0 0 2px var(--coo)}
.c1-kc.old{border-color:var(--human)}

/* hộp thư Telegram */
.c1-tg{display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:min(720px, calc(100vh - 140px)); border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden}
.c1-tghd{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.c1-tghd b{font-size:13.5px}
.c1-tgav{width:34px; height:34px; border-radius:50%; background:var(--coo); color:var(--on-solid); display:grid; place-items:center; font-weight:800}
.c1-tgbody{overflow:auto; padding:12px; display:grid; gap:8px; align-content:start; background:color-mix(in srgb, var(--coo) 6%, var(--bg))}
.c1-msg{max-width:min(92%, 420px); border-radius:14px; padding:8px 11px; font-size:12.5px; background:var(--surface); border:1px solid var(--line); display:grid; gap:5px; justify-self:start}
.c1-msg.me{justify-self:end; background:var(--coo-soft); border-color:color-mix(in srgb, var(--coo) 40%, var(--line))}
.c1-msg .tm{font-size:10.5px; color:var(--muted); font-family:var(--font-mono); justify-self:end}
.c1-msg .kb{display:flex; flex-wrap:wrap; gap:4px}
.c1-msg .kb button{border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:4px 9px; font-size:12px; min-height:30px}
.c1-msg .kb button:disabled{opacity:.5}
.c1-msg pre{margin:0; white-space:pre-wrap; font:inherit}
.c1-tgin{display:flex; gap:6px; padding:8px; border-top:1px solid var(--line)}
.c1-tgin input{flex:1}

/* đăng nhập */
.c1-login{min-height:100vh; display:grid; place-items:center; padding:16px}
.c1-lbox{width:min(380px, 100%); border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:22px; display:grid; gap:12px}
.c1-lbox h1{font-size:20px} .c1-lbox .lp-brand{margin:0}

/* cài đặt, khối cấu hình */
.c1-sect{display:grid; gap:8px}
.c1-sect h3{display:flex; align-items:center; gap:8px}
.c1-sect h3 small{color:var(--muted); font-weight:500; font-size:11.5px}
.c1-pre{font-family:var(--font-mono); font-size:11px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px; max-height:280px; overflow:auto; white-space:pre-wrap; margin:0}
.c1-stat{display:grid; gap:2px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--bg)}
.c1-stat b{font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.c1-stat small{color:var(--muted); font-size:11.5px}
.c1-stat.warn{border-color:var(--human)} .c1-stat.bad{border-color:var(--danger)}
.c1-skel{background:linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size:200% 100%; border-radius:8px; min-height:14px}
.anim .c1-skel{animation:sk 1.4s linear infinite}
@keyframes sk{from{background-position:200% 0} to{background-position:-200% 0}}
.c1-6step{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; font-size:11px}
.c1-6step > div{border:1px solid var(--line); border-radius:8px; padding:5px 6px; background:var(--bg); display:grid; gap:1px}
.c1-6step > div.ok{border-color:var(--ok)} .c1-6step > div.now{border-color:var(--coo); background:var(--coo-soft)} .c1-6step > div.late{border-color:var(--danger)}
.c1-6step b{font-size:11px} .c1-6step small{color:var(--muted); font-family:var(--font-mono); font-size:10px}
.c1-week{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:3px}
.c1-week > div{border:1px solid var(--line); border-radius:6px; padding:4px; font-size:10.5px; text-align:center; background:var(--bg)}
.c1-week b{display:block; font-size:12px}

/* ---------- đáp ứng ---------- */
@media (max-width:979px){
  .lp-vitals{grid-template-columns:repeat(3, minmax(0,1fr))}
  .lp-main, .c1-grid2, .c1-grid3, .c1-grid4{grid-template-columns:1fr}
  .c1-grid4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .lp-plat{grid-template-columns:repeat(4, minmax(0,1fr))}
  .c1-6step{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width:639px){
  #main{padding:10px 10px calc(var(--tabs) + 10px)}
  .lp-nav{display:none}
  .lp-tabs{display:grid; position:fixed; left:0; right:0; bottom:0; z-index:30; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line); background:var(--surface); padding:6px 0 max(10px, env(safe-area-inset-bottom)); min-height:var(--tabs)}
  .lp-tabs > a{text-align:center; font-size:11px; color:var(--muted); display:grid; gap:1px; justify-items:center; border:0; background:none; min-height:44px; align-content:center; text-decoration:none}
  .lp-tabs > a b{font-size:14px; font-weight:400}
  .lp-tabs > a.on{color:var(--coo-ink); font-weight:700}
  .lp-bar{padding:8px 10px; gap:6px}
  .lp-brand small, .c1-clock .date, .lp-mini{display:none}
  .lp-depts{grid-template-columns:1fr}
  .lp-dept.span2{grid-column:auto}
  .lp-vitals, .c1-grid2e, .c1-grid4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .lp-flow{grid-template-columns:repeat(3, minmax(0,1fr))}
  .lp-stg:nth-child(3)::after{display:none}
  .lp-plat{grid-template-columns:repeat(2, minmax(0,1fr))}
  .lp-band{grid-template-columns:auto minmax(0,1fr); padding:10px}
  .lp-band .lp-ico{grid-row:span 1; width:38px; height:38px; font-size:17px}
  .lp-band .lp-act{grid-column:1 / -1; grid-row:auto; order:5; justify-items:start; text-align:left; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
  .lp-band h4, .lp-band .lp-sub, .lp-band .lp-why{grid-column:1 / -1}
  .lp-band h4{font-size:16px}
  .lp-drawer{top:auto; left:0; width:100%; max-height:82%; border-left:0; border-top:1px solid var(--line); border-radius:16px 16px 0 0}
  .lp-dlg{top:0; left:0; right:0; bottom:0; transform:none; width:100%; max-height:100vh; border-radius:0; border:0}
  .c1-kanban{grid-template-columns:1fr}
  .c1-kcol{grid-template-columns:1fr}
  .c1-6step{grid-template-columns:repeat(2, minmax(0,1fr))}
  .c1-tg{height:calc(100vh - 150px)}
  .lp-vt .lp-v{font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  *, *::after, *::before{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
@media print{
  .lp-bar, .lp-nav, .lp-tabs, .lp-kill{display:none !important}
}

/* views-health */
.lp-b.c1-b32{min-height:32px}
.c1-inl{width:auto; display:inline-block; min-height:32px; padding:4px 8px; font-size:12px}
.c1-thb{border:0; background:none; padding:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; min-height:32px; cursor:pointer}
.c1-thb.on{color:var(--ink)}
.c1-dot{display:inline-block; width:9px; height:9px; border-radius:2px; background:var(--c, var(--muted)); vertical-align:-1px; margin-right:3px}
.c1-svg{display:block; width:100%; height:auto}
.c1-axis{display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); font-family:var(--font-mono); margin-top:2px}
.c1-legend{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; color:var(--muted); margin-top:6px}
.c1-legend i{display:inline-block; width:9px; height:9px; border-radius:2px; background:var(--c, var(--muted)); margin-right:4px; vertical-align:-1px}
.c1-legend b{color:var(--ink)}
.c1-hbar{height:8px; border-radius:4px; background:var(--surface-2); min-width:90px; overflow:hidden}
.c1-hbar i{display:block; height:100%; border-radius:4px; background:var(--c, var(--dev))}
.c1-hl{box-shadow:0 0 0 3px color-mix(in srgb, var(--coo) 45%, transparent); border-radius:10px}
.c1-alw{display:grid}
.c1-thr{flex-basis:100%; color:var(--muted); font-size:11px}
.c1-hc{cursor:pointer; display:grid; gap:4px; align-content:start}
.c1-hc:hover{border-color:var(--ink)}
.c1-hc.gray{border-style:dashed}
.c1-hc .c1-m{font-size:15px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.c1-hc .c1-thl{font-size:11.5px; color:var(--muted); display:grid; gap:1px}
.c1-hc .lp-btns .lp-b{padding:4px 9px; font-size:12px}
.c1-route{display:flex; flex-wrap:wrap; gap:6px}
.c1-route span{border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:12px; background:var(--bg)}
.c1-route span.on{border-color:var(--ok); background:var(--ok-soft); color:var(--ok-ink); font-weight:700}
.c1-route span.cool{border-color:var(--human); background:var(--human-soft); color:var(--human-ink)}
.c1-caseok{color:var(--ok-ink); font-weight:700} .c1-casebad{color:var(--danger-ink); font-weight:700}
.c1-fails{display:inline-flex; flex-wrap:wrap; gap:4px; vertical-align:middle}
.c1-det summary{cursor:pointer; font-size:12.5px; font-weight:600; min-height:32px; display:flex; align-items:center}
.c1-detail .lp-sh{margin-top:8px}
.c1-6step > div.late b{color:var(--danger-ink)}

/* views-work */
.c1-fl{display:inline-flex; align-items:center; gap:5px; font-size:12px}
.c1-fl select.lp-in, .c1-fl input.lp-in{width:auto; min-height:32px; padding:4px 8px}
.c1-kvl{grid-template-columns:auto minmax(0,1fr)} .c1-kvl dt{white-space:nowrap} .c1-kvl dd{text-align:left; font-weight:500; overflow-wrap:anywhere}
.c1-row .c1-rb{font-style:normal; display:inline-flex; align-items:center; min-width:14px; justify-content:center}
.c1-apmeta{display:flex; gap:10px; align-items:center; margin:6px 0 10px; font-size:12.5px} .c1-apmeta .lp-ring{flex:0 0 30px}
.c1-apd{display:grid; gap:2px} .c1-apl{font-size:11px; color:var(--muted); padding-left:40px}
.c1-apbtns{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
button.c1-kh{border:0; background:none; text-align:left; width:100%; color:inherit; font:inherit; cursor:pointer; border-radius:6px}
button.c1-kh:focus-visible{outline:2px solid var(--coo)}
.c1-kwhy{color:var(--human-ink); white-space:normal; font-family:inherit !important}
.c1-kcards{display:grid; gap:5px}
.c1-kmore{justify-self:start}
.c1-axis{display:flex; justify-content:space-between; font-size:10.5px; margin-top:2px}
.c1-acc{border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:0 12px 10px; min-width:0}
.c1-acc > summary{cursor:pointer; list-style:none; padding:10px 0 8px; font-weight:800; font-size:13.5px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.c1-acc > summary::-webkit-details-marker{display:none}
.c1-acc > summary::before{content:"▸"; color:var(--muted); font-size:11px} .c1-acc[open] > summary::before{content:"▾"}
.c1-acc > summary small{color:var(--muted); font-weight:500; font-size:11.5px}
.c1-acc:not([open]){padding-bottom:0}
.c1-att{border:1px solid var(--line); border-radius:9px; padding:8px 10px; background:var(--bg); display:grid; gap:6px} .c1-att + .c1-att{margin-top:6px}
.c1-files{margin:0; padding-left:16px; font-size:12px}
.lp-chip.c1-bad{border-color:var(--danger); color:var(--danger-ink)}
.c1-nums .c1-stat b small{font-size:11px; color:var(--muted); font-weight:500}
.c1-tbtns{padding:4px 0 8px}
@media (max-width:639px){
  .c1-kcol .c1-kcards, .c1-kcol .c1-kmore{display:none}
  .c1-kcol.open .c1-kcards{display:grid} .c1-kcol.open .c1-kmore{display:inline-flex}
  button.c1-kh{display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline}
  button.c1-kh b{flex-basis:100%}
  .c1-apbtns{position:sticky; bottom:calc(var(--tabs) + 6px); background:var(--surface); padding:8px 0 2px; z-index:5}
  .c1-apbtns .lp-b{flex:1; justify-content:center}
  .c1-tbtns{position:sticky; bottom:calc(var(--tabs) + 6px); background:var(--surface); padding:8px 0; z-index:5}
}

/* views-admin */
.c1-cfg{display:grid; gap:6px}
.c1-cfg details{border:1px solid var(--line); border-radius:8px; padding:4px 10px; background:var(--bg); min-width:0}
.c1-cfg summary{cursor:pointer; font-weight:600; font-size:12.5px; min-height:30px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.c1-cfg details[open] summary{margin-bottom:6px}
.c1-week > div.bad{border-color:var(--danger)}
.c1-filters .lp-lbl{display:inline-grid} .c1-filters .lp-lbl .lp-in{width:auto}
.c1-page .lp-btns{align-items:center}
.c1-page .lp-btns .lp-note{padding:4px 8px}