/* DooVina · Concept C “Đài chỉ huy” (founder chốt 11/10/2026) — hệ thiết kế nạp SAU app.css.
   1) Token tối ánh xạ lên tên biến cũ (--bg, --surface, --ink, --human, --danger…) để mọi màn cũ đổi theo.
   2) Khung: thanh icon trái (#rail), thanh trên có dải đèn 5 mức, thanh tab dưới cho điện thoại.
   3) Thành phần mới: dải đèn, chòm sao 31 agent, đường ống 9 trạng thái, ô số mono, dòng sự kiện, nút giữ 2 giây.
   Màu trạng thái: chạy --ok · chờ --info · bị chặn --need · lỗi --bad · tạm dừng --pause · rảnh --idle · tắt --off.
   Chữ Be Vietnam Pro; số và giờ JetBrains Mono. Latin-first, font CJK đứng cuối stack. */
:root, :root[data-theme="dark"]{
  --page:#090B0F; --bg:#0E1116; --panel:#161B22; --panel2:#1C222B; --rail:#0B0E12;
  --line:#262C36; --line2:#323A46; --tx:#E6EAF0; --tx2:#A9B3C1; --tx3:#8D97A5;
  --acc:#8B7CFF; --acc2:#A79BFF; --accbg:rgba(139,124,255,.14);
  --ok:#3DD68C; --need:#F5A524; --bad:#FF5C5C; --info:#4EA8FF; --pause:#A9B3C1; --idle:#8D97A5; --off:#5E6875;
  /* ánh xạ sang token cũ */
  --surface:var(--panel); --surface-2:var(--panel2); --ink:var(--tx); --muted:var(--tx2);
  --human:var(--need); --human-ink:#F7BA52; --on-human:#1A1200;
  --coo:var(--acc); --coo-ink:var(--acc2);
  --biz:#2CC2A6; --biz-ink:#5ED9C3;
  --dev:var(--info); --dev-ink:#7CBEFF;
  --ops:var(--need); --ops-ink:#F7BA52;
  --danger:var(--bad); --danger-ink:#FF8A8A; --ok-ink:#6BE3A8;
  --on-solid:#0E1116; --tint:14%;
  --sans:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Noto Sans", Roboto, Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-body:var(--sans);
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --r:12px; --gap:16px; --top:64px; --railw:64px; --tabs:60px;
  color-scheme:dark;
}
/* bản ngày (Cài đặt › Giao diện › Sáng): giữ ngôn ngữ C, nền sáng cho lúc ngoài trời */
:root[data-theme="light"]{
  --page:#E9ECF1; --bg:#F3F5F8; --panel:#FFFFFF; --panel2:#EEF1F5; --rail:#E3E7ED;
  --line:#D5DBE3; --line2:#C3CBD6; --tx:#10141A; --tx2:#4A5463; --tx3:#5E6875;
  --acc:#5B4BE0; --acc2:#4A3BCB; --accbg:rgba(91,75,224,.10);
  --ok:#14834D; --need:#A86800; --bad:#C8302B; --info:#1D67C2; --pause:#5E6875; --idle:#6B7482; --off:#8B93A0;
  --human-ink:#8A5600; --on-human:#FFFFFF; --biz:#0F8A73; --biz-ink:#0B6F5E; --dev-ink:#1A5BAD; --ops-ink:#8A5600;
  --danger-ink:#A92A21; --ok-ink:#176B3B; --on-solid:#FFFFFF; --tint:10%;
  color-scheme:light;
}
html{background:var(--page)}
body{background:var(--bg); color:var(--tx); font-family:var(--sans); font-size:13.5px; line-height:1.45}
.mono, .num, .lp-num, .lp-t, code, kbd, time{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
a{color:var(--acc2)}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--acc2); outline-offset:2px}
::selection{background:var(--accbg)}
.c-sub, .c-eyebrow{font:500 11px/1.3 var(--font-mono); color:var(--tx3); letter-spacing:.06em; text-transform:uppercase}
.c-ok{color:var(--ok)} .c-need{color:var(--need)} .c-bad{color:var(--bad)} .c-info{color:var(--info)} .c-acc{color:var(--acc2)} .c-tx2{color:var(--tx2)} .c-tx3{color:var(--tx3)}
.c-ico{width:20px; height:20px; flex:none; display:block}
.c-ico.sm{width:16px; height:16px} .c-ico.xs{width:12px; height:12px}

/* ---------- khung ---------- */
#app{min-height:100vh; display:grid; grid-template-columns:var(--railw) minmax(0,1fr); grid-template-rows:var(--top) auto 1fr; grid-template-areas:"rail top" "rail ban" "rail main"; background:var(--bg)}
#app.s-stop{box-shadow:none}
#app.s-stop #topbar{box-shadow:inset 0 -2px 0 var(--bad)}
#app.s-away{box-shadow:none}
#rail{grid-area:rail; position:sticky; top:0; height:100vh; background:var(--rail); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:6px; z-index:30}
#topbar{grid-area:top; position:sticky; top:0; z-index:25; height:var(--top); display:flex; align-items:center; gap:16px; padding:0 20px; border-bottom:1px solid var(--line); background:var(--bg)}
#banners{grid-area:ban; padding:0 20px; display:grid; gap:8px}
#banners:not(:empty){padding-top:12px}
#main{grid-area:main; padding:20px; max-width:1600px; width:100%; margin:0; gap:var(--gap)}
#tabs{display:none}
.c-logo{width:32px; height:32px; margin-bottom:12px; display:grid; place-items:center; border:0; background:none; padding:0}
.c-logo svg{width:32px; height:32px}
.c-ri{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:var(--tx3); position:relative; border:0; background:none; text-decoration:none}
.c-ri:hover{color:var(--tx); background:var(--panel)}
.c-ri.on{background:var(--accbg); color:var(--acc2)}
.c-ri.on::before{content:""; position:absolute; left:-12px; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--acc)}
.c-ri .c-rb{position:absolute; top:1px; right:-1px; min-width:16px; height:16px; border-radius:8px; background:var(--need); color:#1A1200; font:700 10.5px/16px var(--font-mono); text-align:center; padding:0 4px}
.c-ri .c-rb.bad{background:var(--bad); color:#1E0B0B}
.c-ri[data-tip]:hover::after, .c-ri[data-tip]:focus-visible::after{content:attr(data-tip); position:absolute; left:52px; top:50%; transform:translateY(-50%); background:var(--panel2); border:1px solid var(--line2); color:var(--tx); font:500 12px/1 var(--sans); padding:7px 9px; border-radius:7px; white-space:nowrap; z-index:60; pointer-events:none}
.c-rsp{flex:1}
.c-more{position:fixed; z-index:70; left:68px; bottom:12px; width:300px; max-height:calc(100vh - 24px); overflow:auto; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:8px; box-shadow:0 18px 40px rgba(0,0,0,.45)}
.c-more h6{margin:8px 8px 4px; font:600 11px var(--font-mono); color:var(--tx3); letter-spacing:.06em; text-transform:uppercase}
.c-more a{display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; color:var(--tx); text-decoration:none; font-size:13px}
.c-more a:hover, .c-more a.on{background:var(--accbg)}
.c-more a .c-ico{color:var(--tx3)}
.c-more a small{margin-left:auto; font:500 11px var(--font-mono); color:var(--tx3)}

/* thanh trên */
.c-lights{display:flex; gap:8px; border:0; background:none; padding:0; text-align:left}
.c-lt{width:112px}
.c-lt i{display:block; height:6px; border-radius:3px; background:var(--c); opacity:.22}
.c-lt span{display:flex; align-items:center; gap:6px; margin-top:7px; font:500 10.5px/1 var(--font-mono); color:var(--tx3); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
.c-lt.on i{opacity:1; box-shadow:0 0 12px var(--c)}
.c-lt.on span{color:var(--c); font-weight:700}
.l-stop{--c:var(--bad)} .l-bad{--c:var(--bad)} .l-away{--c:var(--info)} .l-need{--c:var(--need)} .l-ok{--c:var(--ok)} .l-load{--c:var(--tx3)}
.c-tsp{flex:1}
.c-clock{display:flex; align-items:center; gap:8px; font:500 13px var(--font-mono); color:var(--tx2); white-space:nowrap}
.c-clock b{color:var(--tx); font-weight:600}
.c-livedot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); flex:none}
.anim .c-livedot{animation:cBlink 2.4s ease-in-out infinite}
.c-livedot.paused{background:var(--tx3); box-shadow:none; animation:none}
.c-speed{display:inline-flex; border:1px solid var(--line2); border-radius:8px; overflow:hidden}
.c-speed button{border:0; background:none; color:var(--tx3); font:600 11.5px var(--font-mono); padding:0 8px; height:30px; min-width:34px}
.c-speed button + button{border-left:1px solid var(--line)}
.c-speed button.on{background:var(--accbg); color:var(--acc2)}
.c-tg{display:inline-flex; align-items:center; gap:8px; font:500 13px var(--sans); color:var(--tx2); height:32px; padding:0 4px; border:0; background:none; white-space:nowrap}
.c-tg .c-sw{width:32px; height:18px; border-radius:9px; background:var(--line2); position:relative; transition:background .2s; display:block; flex:none}
.c-tg .c-sw::after{content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--tx2); transition:transform .2s}
.c-tg[aria-pressed="true"]{color:var(--tx)}
.c-tg[aria-pressed="true"] .c-sw{background:var(--acc)}
.c-tg[aria-pressed="true"] .c-sw::after{transform:translateX(14px); background:var(--bg)}
.c-cost{display:inline-flex; flex-direction:column; gap:4px; border:0; background:none; padding:0; text-align:left; color:var(--tx2); font:500 11px var(--font-mono); white-space:nowrap}
.c-cost b{color:var(--tx); font-size:12.5px}
.c-cost .c-bar{width:110px}
.c-btn, .lp-b{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:0 12px; border-radius:8px; font:600 13px var(--sans); border:1px solid var(--line2); background:var(--panel2); color:var(--tx); white-space:nowrap; text-decoration:none; cursor:pointer}
.c-btn:hover, .lp-b:hover{border-color:var(--tx3)}
.c-btn.pri, .lp-b.pri{background:var(--acc); border-color:var(--acc); color:var(--on-solid)}
.c-btn.pri:hover, .lp-b.pri:hover{background:var(--acc2); border-color:var(--acc2)}
.c-btn.danger, .lp-b.dgo{background:transparent; border-color:color-mix(in srgb, var(--bad) 60%, transparent); color:var(--bad)}
.c-btn.solid-danger, .lp-b.dg{background:var(--bad); border-color:var(--bad); color:#1E0B0B}
.lp-b.ok{background:var(--ok); border-color:var(--ok); color:#06150D}
.c-btn.sm, .lp-b.sm{min-height:28px; padding:0 10px; font-size:12px}
.c-btn.lg{min-height:44px; padding:0 16px; font-size:14px}
.lp-b.on{background:var(--accbg); border-color:var(--acc); color:var(--acc2)}
.c-btn:disabled, .lp-b:disabled{opacity:.45; cursor:not-allowed}
.c-kill{min-height:34px}
.c-kill.run{border-color:color-mix(in srgb, var(--ok) 60%, transparent); color:var(--ok)}

/* điện thoại: thanh trên gọn + tab dưới */
@media (max-width:899px){
  #app{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr auto; grid-template-areas:"top" "ban" "main" "tabs"}
  #rail{display:none}
  #topbar{height:auto; min-height:56px; padding:8px 12px; gap:10px; flex-wrap:wrap}
  #topbar .c-lights{order:9; flex-basis:100%; gap:4px}
  #topbar .c-lt{flex:1; width:auto}
  #topbar .c-lt span{display:none}
  #topbar .c-lt.on span{display:flex; position:absolute; left:-9999px}
  #topbar .c-speed, #topbar .c-tg, #topbar .c-cost{display:none}
  #banners{padding:0 12px}
  #main{padding:12px 12px calc(var(--tabs) + 16px + env(safe-area-inset-bottom))}
  #tabs{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--rail); border-top:1px solid var(--line); padding:4px 4px calc(4px + env(safe-area-inset-bottom)); height:auto}
  #tabs a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; color:var(--tx3); text-decoration:none; font:500 11px var(--sans); position:relative; border-radius:10px}
  #tabs a.on{color:var(--acc2); background:var(--accbg)}
  #tabs a .c-rb{position:absolute; top:4px; left:calc(50% + 6px); min-width:16px; height:16px; border-radius:8px; background:var(--need); color:#1A1200; font:700 10.5px/16px var(--font-mono); text-align:center; padding:0 4px}
  #tabs a .c-rb.bad{background:var(--bad)}
  .c-mlevel{display:flex; align-items:center; gap:8px; font:600 13px var(--sans); color:var(--c); flex:1; min-width:0}
  .c-mlevel span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}
@media (min-width:900px){ .c-mlevel{display:none} }
@media (min-width:900px) and (max-width:1279px){ .c-lt{width:84px} .c-lt span{font-size:9.5px; letter-spacing:0} .c-cost{display:none} }

/* ---------- thẻ, panel, đầu trang ---------- */
.lp-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; min-width:0}
.lp-card > .lp-h{display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; margin:-12px -16px 12px; border-bottom:1px solid var(--line)}
.lp-card > .lp-h b{font:600 13px var(--sans)}
.lp-card > .lp-h small{font:500 11px var(--font-mono); color:var(--tx3); letter-spacing:.04em}
.lp-card > .c1-tblwrap:last-child{margin:0 -16px -12px}
.lp-card > .c1-tblwrap{margin-left:-16px; margin-right:-16px}
.lp-card.warn{border-color:color-mix(in srgb, var(--need) 55%, var(--line))}
.lp-card.bad{border-color:color-mix(in srgb, var(--bad) 55%, var(--line))}
.lp-card.lp-hl{box-shadow:0 0 0 2px var(--acc)}
.c1-ph{gap:12px; align-items:baseline}
.c1-ph h2, .c-head h1{font:600 24px/32px var(--sans); letter-spacing:-.01em}
.c-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.c-head .c-sub{margin-left:4px}
.c-head .c-hsp{flex:1}
.pn{background:var(--panel); border:1px solid var(--line); border-radius:12px; min-width:0; overflow:hidden}
.pn-h{display:flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-bottom:1px solid var(--line)}
.pn-h h3{font:600 13px var(--sans); white-space:nowrap}
.pn-h .meta{font:500 11px var(--font-mono); color:var(--tx3); letter-spacing:.04em; white-space:nowrap}
.pn-h .sp{flex:1}
.pn-b{padding:12px 16px}
.c-lnk{display:inline-flex; align-items:center; gap:4px; color:var(--acc2); font:500 13px var(--sans); white-space:nowrap; text-decoration:none; border:0; background:none; padding:0}

/* bảng, nhãn, ô nhập */
.c1-tbl{font-size:13px}
.c1-tbl th{font:600 10.5px var(--font-mono); color:var(--tx3); letter-spacing:.06em; background:var(--panel)}
.c1-tbl th, .c1-tbl td{border-bottom-color:var(--line); padding:8px 12px}
.c1-tbl td.num{font-family:var(--font-mono)}
.c1-tbl tr.click:hover td{background:var(--panel2)}
.c1-tbl tr.sel td{background:var(--accbg)}
.c1-pill{font:600 11px var(--font-mono); border:1px solid var(--line2); background:transparent; color:var(--tx2); padding:1px 8px}
.c1-pill.ok{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent); background:color-mix(in srgb, var(--ok) 8%, transparent)}
.c1-pill.warn{color:var(--need); border-color:color-mix(in srgb, var(--need) 45%, transparent); background:color-mix(in srgb, var(--need) 8%, transparent)}
.c1-pill.bad{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent); background:color-mix(in srgb, var(--bad) 8%, transparent)}
.lp-lvl{font-family:var(--font-mono); border-width:1px}
.lp-lvl.L2{color:var(--need); border-color:color-mix(in srgb, var(--need) 55%, transparent); background:transparent}
.lp-lvl.L3{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 55%, transparent); background:transparent}
.lp-lvl.L1{color:var(--info); border-color:color-mix(in srgb, var(--info) 50%, transparent); background:transparent}
.lp-lvl.L0{color:var(--tx3); border-color:var(--line2); background:transparent}
.lp-lvl.G{color:var(--acc2); border-color:color-mix(in srgb, var(--acc) 55%, transparent); background:transparent}
.lp-in{background:var(--bg); border-color:var(--line2); color:var(--tx); border-radius:8px}
.lp-kv dt{color:var(--tx3)} .lp-kv dd{font-family:var(--font-mono); font-weight:600}
.c1-banner{border-radius:10px; background:color-mix(in srgb, var(--need) 9%, var(--panel)); border-color:color-mix(in srgb, var(--need) 50%, transparent)}
.c1-banner.coo{background:color-mix(in srgb, var(--info) 9%, var(--panel)); border-color:color-mix(in srgb, var(--info) 50%, transparent)}
.c1-banner.bad{background:color-mix(in srgb, var(--bad) 10%, var(--panel)); border-color:color-mix(in srgb, var(--bad) 55%, transparent)}
.lp-toast{background:var(--panel2); color:var(--tx); border:1px solid var(--line2); box-shadow:0 12px 30px rgba(0,0,0,.4)}
kbd{background:var(--panel2); border-color:var(--line2); color:var(--tx2)}

/* thước: tím như bản mẫu, vàng ≥ 80 %, đỏ ≥ 100 % */
.lp-meter, .c-bar{height:4px; border-radius:2px; background:var(--line2); overflow:hidden; position:relative; display:block}
.lp-meter i, .c-bar i{display:block; height:100%; border-radius:2px; background:var(--acc)}
.lp-meter.w, .c-bar.w{background:var(--line2)} .lp-meter.w i, .c-bar.w i{background:var(--need)}
.lp-meter.b, .c-bar.b{background:var(--line2)} .lp-meter.b i, .c-bar.b i{background:var(--bad)}
.lp-meter u{background:var(--tx)}

/* trạng thái agent (glyph + màu) */
.lps-run .lp-g, .lp-g.lps-run{color:var(--ok)} .lps-wait .lp-g, .lp-g.lps-wait{color:var(--info)} .lps-block .lp-g, .lp-g.lps-block{color:var(--need)}
.lps-err .lp-g, .lp-g.lps-err{color:var(--bad)} .lps-pause .lp-g, .lp-g.lps-pause{color:var(--pause)} .lps-idle .lp-g, .lp-g.lps-idle{color:var(--idle)} .lps-off .lp-g, .lp-g.lps-off{color:var(--off)}
.lp-node{background:var(--bg)} .lp-node.lps-wait{--sc:var(--info); background:color-mix(in srgb, var(--info) 7%, var(--bg))} .lp-node.lps-block{--sc:var(--need)}
.lp-stack i.lps-wait{background:var(--info)} .lp-stack i.lps-block{background:var(--need)} .lp-stack i.lps-run{background:var(--ok)} .lp-stack i.lps-err{background:var(--bad)}
.lp-now.lps-wait{--sc:var(--info)} .lp-now.lps-block{--sc:var(--need)}

/* ngăn chi tiết, hộp thoại */
.lp-scrim{background:rgba(5,7,10,.62); backdrop-filter:blur(2px)}
.lp-drawer{background:var(--panel); border-left:1px solid var(--line); width:min(448px, 100%); padding:20px 24px; box-shadow:-20px 0 40px rgba(0,0,0,.35)}
.lp-x{background:var(--panel2); border-color:var(--line2); color:var(--tx2)}
.lp-dlg{background:var(--panel); border:1px solid var(--line2); border-radius:14px; box-shadow:0 30px 60px rgba(0,0,0,.5)}
.lp-dlg.dg{border-top:3px solid var(--bad)}
.lp-dlg footer{border-top-color:var(--line)}

/* dải mức công ty kiểu cũ (màn chưa đổi) */
.lp-band{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--c)}
.lp-band .lp-ico{background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--c)}
.lp-band.lp-s-stop{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--bad) 12%, var(--panel)) 0 10px, var(--panel) 10px 20px)}
.lp-s-away{--c:var(--info); --c-ink:var(--dev-ink)}
.lp-vt{background:var(--panel); border-color:var(--line)}
.lp-vt .lp-v{font-family:var(--font-mono); font-weight:700; letter-spacing:-.01em}
.lp-vt .lp-k{font:500 10.5px var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--tx3)}
.lp-stg, .lp-dept, .lp-ap, .lp-al{background:var(--bg)}
.lp-stg .lp-n{font-family:var(--font-mono); font-weight:700}
.lp-pl{background:var(--bg)}

/* ---------- ô số (tile) ---------- */
.c-tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap)}
.c-tile{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; display:flex; flex-direction:column; gap:6px; min-width:0; text-align:left; color:inherit; text-decoration:none}
button.c-tile, a.c-tile{cursor:pointer} button.c-tile:hover, a.c-tile:hover{border-color:var(--line2)}
.c-tile .k{font:500 10.5px var(--font-mono); color:var(--tx3); text-transform:uppercase; letter-spacing:.06em}
.c-tile .v{font:700 24px/28px var(--font-mono); white-space:nowrap}
.c-tile .v small{font-size:11px; font-weight:500; color:var(--tx3)}
.c-tile .s{display:flex; align-items:center; gap:8px; font:500 11px var(--font-mono); color:var(--tx2); white-space:nowrap; overflow:hidden}
.c-tile .s .c-bar{flex:1}
@media (max-width:1100px){ .c-tiles{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* ---------- chòm sao ---------- */
.c-cons{display:block; width:100%; height:auto}
.c-cons .orbit{fill:none; stroke:var(--line2); stroke-width:1}
.c-cons .hub{stroke:var(--acc); stroke-opacity:.45; stroke-width:1; stroke-dasharray:3 5}
.c-cons .clab{font:600 11px var(--font-mono); fill:var(--tx2); letter-spacing:.06em; text-anchor:middle; paint-order:stroke; stroke:var(--panel); stroke-width:5px; stroke-linejoin:round}
.c-cons.on-bg .clab{stroke:var(--bg)}
.c-cons .ratio{font:700 22px var(--font-mono); fill:var(--tx); text-anchor:middle}
.c-cons .ratio tspan.sm{font-size:12px; fill:var(--tx3); font-weight:500}
.c-cons .rlab{font:500 10.5px var(--font-mono); fill:var(--tx3); letter-spacing:.06em; text-anchor:middle}
.ag{--c:var(--ok); cursor:pointer; outline:none}
.ag.s-wait{--c:var(--info)} .ag.s-block{--c:var(--need)} .ag.s-err{--c:var(--bad)} .ag.s-pause{--c:var(--pause)} .ag.s-idle{--c:var(--idle)} .ag.s-off{--c:var(--off)}
.ag .core{fill:var(--bg); stroke:var(--c); stroke-width:2; transition:stroke-width .15s}
.ag.s-run .core{fill:color-mix(in srgb, var(--ok) 10%, var(--bg))}
.ag.s-wait .core{stroke-dasharray:4 2.5}
.ag.s-block .core, .ag.s-err .core{stroke-width:3}
.ag.s-err .core{fill:color-mix(in srgb, var(--bad) 16%, var(--bg))}
.ag.s-block .core{fill:color-mix(in srgb, var(--need) 14%, var(--bg))}
.ag.s-idle .core{fill:none; stroke-width:1.5}
.ag.s-off .core{fill:none; stroke-width:1.5; stroke-dasharray:2 3}
.ag .num{font:700 11px var(--font-mono); fill:var(--tx); text-anchor:middle; pointer-events:none}
.ag.s-idle .num, .ag.s-off .num, .ag.s-pause .num{fill:var(--tx3); font-weight:500}
.ag .bdg-bg{fill:var(--bg)} .ag .bdg{fill:var(--c); font:700 9px var(--sans); text-anchor:middle; pointer-events:none}
.ag:hover .core, .ag:focus-visible .core{stroke-width:3.5}
.ag:focus-visible .core{stroke:var(--acc2)}
.ag .halo{fill:none; stroke:var(--c); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center}
.anim .ag.s-run .halo{animation:cBreathe 3.2s ease-in-out infinite}
.anim .ag.s-err .halo{stroke-width:2.5; animation:cBreathe 1.6s ease-in-out infinite}
.c-cons .selring{fill:none; stroke:var(--acc); stroke-width:2}
.c-cons .selglow{fill:var(--acc); opacity:.14}
.c-cons .tl{stroke-width:1.2; stroke-dasharray:3 3; fill:none}
.anim .c-cons .tl{animation:cDash 1.4s linear infinite}
.c-cons .tl.k-bad{stroke:var(--bad)} .c-cons .tl.k-need{stroke:var(--need)} .c-cons .tl.k-info{stroke:var(--info)}
.c-cons .chip rect{fill:var(--bg); stroke:var(--line2)} .c-cons .chip text{font:500 10.5px var(--font-mono); fill:var(--tx2)}
.c-cons .chip.k-bad rect{stroke:var(--bad); fill:color-mix(in srgb, var(--bad) 10%, var(--bg))} .c-cons .chip.k-bad text{fill:var(--bad)}
.c-cons .chip.k-need rect{stroke:var(--need); fill:color-mix(in srgb, var(--need) 10%, var(--bg))} .c-cons .chip.k-need text{fill:var(--need)}
.c-cons .chip.k-info rect{stroke:color-mix(in srgb, var(--info) 60%, transparent)} .c-cons .chip.k-info text{fill:var(--info)}
.c-cons .chip{cursor:pointer}
.c-legend{display:flex; flex-wrap:wrap; gap:4px 12px; font:500 11px var(--sans); color:var(--tx3); white-space:nowrap}
.c-legend span, .c-legend button{display:inline-flex; align-items:center; gap:5px; border:0; background:none; padding:0; color:inherit; font:inherit}
.c-legend b{color:var(--tx); font-weight:700; font-family:var(--font-mono)}
.c-legend .lp-g{width:12px; height:12px; font-size:10px}

/* ---------- đường ống 9 trạng thái ---------- */
.c-pipe{display:block; width:100%; height:auto}
.c-pipe .ph{font:600 10.5px var(--font-mono); fill:var(--tx3); letter-spacing:.06em}
.c-pipe .trk{stroke:var(--line2); stroke-width:2}
.c-pipe .trk.exc{stroke-dasharray:4 4}
.c-pipe .pt{fill:var(--acc2)}
.anim .c-pipe .pt{animation:cFlow 7.2s linear infinite}
.c-pipe .st{--c:var(--tx3); cursor:pointer}
.c-pipe .st circle{fill:var(--panel); stroke:var(--c); stroke-width:2}
.c-pipe .k-ready{--c:var(--tx2)} .c-pipe .k-doing{--c:var(--ok)} .c-pipe .k-verify{--c:var(--info)} .c-pipe .k-approval{--c:var(--need)}
.c-pipe .k-done{--c:var(--ok)} .c-pipe .k-blocked{--c:var(--need)} .c-pipe .k-escalated{--c:var(--bad)} .c-pipe .k-cancelled{--c:var(--off)}
.c-pipe .k-done circle{fill:var(--ok)} .c-pipe .k-done .sn{fill:var(--bg)}
.c-pipe .k-cancelled circle{stroke-dasharray:3 3}
.c-pipe .sn{font:700 15px var(--font-mono); fill:var(--tx); text-anchor:middle; pointer-events:none}
.c-pipe .sl{font:500 12px var(--sans); fill:var(--tx2); text-anchor:middle; pointer-events:none}
.c-pipe .k-approval .sl{fill:var(--need); font-weight:600}
.c-pipe .st-sel{fill:none; stroke:var(--acc); stroke-width:2}
.c-pipe .st:hover circle, .c-pipe .st:focus-visible circle{stroke-width:3}
.c-pipe .neck{font:600 10px var(--font-mono); fill:var(--need); text-anchor:middle}

/* ---------- dòng sự kiện ---------- */
.c-stream{list-style:none; margin:0; padding:6px 0}
.c-stream li{display:grid; grid-template-columns:40px 14px 44px minmax(0,1fr); gap:8px; align-items:center; min-height:30px; padding:0 16px; font:500 11.5px var(--font-mono); color:var(--tx); white-space:nowrap}
.c-stream li time{color:var(--tx3)}
.c-stream li b{color:var(--tx2); font-weight:600}
.c-stream li span{overflow:hidden; text-overflow:ellipsis; font-family:var(--sans); font-size:12px}
.c-stream li.k-bad span{color:var(--bad)} .c-stream li.k-need span{color:var(--need)}
.anim .c-stream li.new{animation:cIn .8s ease-out}
.c-focus-off{display:none; align-items:center; justify-content:center; gap:8px; min-height:120px; border:1px dashed var(--line2); border-radius:12px; color:var(--tx3); font-size:13px}
body.c-focus .c-stream-host{display:none}
body.c-focus .c-focus-off{display:flex}
body.c-focus .ag.s-run, body.c-focus .ag.s-idle, body.c-focus .c-cons .hub{opacity:.28}
body.c-focus .ag .halo{animation:none !important; opacity:0}

/* ---------- thẻ duyệt gọn ---------- */
.c-apc{display:block; width:100%; text-align:left; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg); color:inherit; font:inherit}
.c-apc + .c-apc{margin-top:8px}
.c-apc:hover{border-color:var(--line2)}
.c-apc .r1{display:flex; justify-content:space-between; align-items:center; gap:8px; font:500 11px var(--font-mono); color:var(--tx3)}
.c-apc .r1 span{display:inline-flex; align-items:center; gap:6px}
.c-apc .r2{display:flex; align-items:center; gap:12px; margin-top:4px}
.c-apc .w{flex:1; min-width:0}
.c-apc .t{font:600 13px/20px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.c-apc .n{font:500 11px/16px var(--font-mono); color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.c-apc.urg{border-color:color-mix(in srgb, var(--need) 55%, var(--line))}

/* ---------- nút giữ để xác nhận ---------- */
.c-hold{position:relative; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none}
.c-hold::before{content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--bad) 28%, transparent); transform-origin:left; transform:scaleX(var(--p, 0)); pointer-events:none}
.c-hold > *{position:relative}
.c-hold.done{background:var(--bad); color:#1E0B0B}

/* ---------- popover lý do mức công ty ---------- */
.c-why{position:fixed; z-index:70; top:68px; width:min(420px, calc(100vw - 24px)); background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:12px; box-shadow:0 18px 40px rgba(0,0,0,.45); display:grid; gap:8px}
.c-why h6{margin:0; font:600 14px var(--sans)}
.c-why button{display:flex; gap:8px; align-items:center; text-align:left; border:1px solid var(--line); background:var(--bg); color:var(--tx); border-radius:8px; padding:8px 10px; font:500 12.5px var(--sans)}
.c-why button:hover{border-color:var(--acc)}

/* ---------- chuyển động ---------- */
@keyframes cBlink{0%,100%{opacity:1} 50%{opacity:.35}}
@keyframes cBreathe{0%{opacity:.55; transform:scale(1)} 70%{opacity:0; transform:scale(1.55)} 100%{opacity:0; transform:scale(1.55)}}
@keyframes cDash{to{stroke-dashoffset:-12}}
@keyframes cFlow{from{offset-distance:0%} to{offset-distance:100%}}
@keyframes cIn{from{background:var(--accbg)} to{background:transparent}}
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation:none !important; transition:none !important} }

/* đăng nhập: không có thanh dọc */
#app.c-login{grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "ban" "main"}
#app.c-login #rail, #app.c-login #topbar, #app.c-login #tabs{display:none}
#topbar > *{flex:none}
#topbar > .c-tsp{flex:1}
#topbar > .c-mlevel{flex:1 1 auto; min-width:0}
/* thanh trên vừa 1280–1599 px: đèn hẹp hơn, bỏ ngày, giữ nút Dừng khẩn luôn thấy */
@media (min-width:900px) and (max-width:1599px){
  #topbar{gap:12px; padding:0 16px}
  .c-lt{width:92px}
  .c-lt span{font-size:9.5px; letter-spacing:.02em}
  .c-clock .date{display:none}
  .c-cost .c-bar{width:84px}
}
@media (min-width:900px) and (max-width:1279px){ .c-lt{width:64px} .c-lt span{display:none} .c-lt.on span{display:flex} .c-lt.on{width:auto; min-width:96px} }
/* sửa theo góp ý của các màn (11/10) */
.c-topcost{display:inline-flex; flex-direction:column; gap:4px; border:0; background:none; padding:0; text-align:left; color:var(--tx2); font:500 11px var(--font-mono); white-space:nowrap}
.c-topcost b{color:var(--tx); font-size:12.5px}
.c-topcost .c-bar{width:110px}
@media (max-width:1279px){ .c-topcost{display:none} }
@media (max-width:899px){ .c-mlevel{border:0; background:none; padding:0; text-align:left} #topbar .c-topcost{display:none} }
.c-apc .w{display:block; min-width:0} .c-apc .t, .c-apc .n{display:block}
.pn, .lp-card{overflow:clip}
#live{position:fixed}
.lp-mscrim{z-index:55} .lp-dlg{z-index:56}
.ag.s-pause .bdg{fill:var(--pause)}
@media (min-width:900px) and (max-width:1100px){ #topbar .c-speed{display:none} }
/* điện thoại: một hàng mức · giờ · Dừng khẩn, dải đèn ở hàng dưới */
@media (max-width:899px){
  #topbar .c-clock .date{display:none}
  #topbar .c-kill{min-height:36px; padding:0 10px}
}