:root{color-scheme:light}body{margin:0}[hidden]{display:none!important}
#gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.gbox{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--orange);padding:24px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.gbox h1{font-size:20px}
.gerr{color:var(--bad);min-height:1.2em;font-size:13px}
.me{font-size:12.5px;color:var(--muted)}
.linkbox{display:flex;gap:6px}.linkbox input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);padding:6px 8px;font-family:var(--mono);font-size:12px}
table.us{border-collapse:collapse;width:100%;font-size:12.5px}table.us td,table.us th{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.us th{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:500;text-transform:uppercase}


/* Bố cục: thanh công cụ trên cùng, bên trái là sơ đồ kéo thả được, bên phải là bảng chi tiết / hoạt động / thay đổi.
   Màu theo chuẩn Starker: cam Pantone 1585C, xám 425C. Hình dạng và nét vẽ cũng mang nghĩa, không chỉ màu. */
:root{
  --bg:#F6F7F7; --surface:#FFFFFF; --fg:#1D2023; --muted:#5C6166; --line:#D5D9DC;
  --gray:#54585A; --orange:#FF6A13; --accent:#C74A00; --accent-soft:#FFF0E6; --ok:#1F7A4D; --warn:#A8620A; --bad:#B3261E;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121417; --surface:#1B1E22; --fg:#E7E9EB; --muted:#9BA1A6; --line:#31363B;
  --gray:#A7ADB1; --orange:#FF8A4D; --accent:#FF8A4D; --accent-soft:#2B1E15; --ok:#5CC48F; --warn:#E0A34F; --bad:#FF8A80; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121417; --surface:#1B1E22; --fg:#E7E9EB; --muted:#9BA1A6; --line:#31363B;
  --gray:#A7ADB1; --orange:#FF8A4D; --accent:#FF8A4D; --accent-soft:#2B1E15; --ok:#5CC48F; --warn:#E0A34F; --bad:#FF8A80; color-scheme:dark}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.55;
  padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main{max-width:1560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
h1{font-size:clamp(22px,4vw,30px);font-weight:700;margin:0;letter-spacing:-.01em}
h2{font-size:15px;margin:0 0 8px;font-weight:700}
.sub{color:var(--muted);max-width:90ch}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button,select,input,textarea{font:inherit;color:var(--fg)}
.btn{background:var(--surface);border:1px solid var(--gray);padding:6px 12px;cursor:pointer;min-height:34px}
.btn:hover:not(:disabled){border-color:var(--orange);color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pri{background:var(--orange);border-color:var(--orange);color:#1D2023;font-weight:600}
.btn.on{background:var(--accent-soft);border-color:var(--orange);color:var(--accent)}
.btn.bad{border-color:var(--bad);color:var(--bad)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
#q{background:var(--surface);border:1px solid var(--line);padding:6px 10px;min-height:34px;min-width:200px;flex:1;max-width:320px}
.status{font-family:var(--mono);font-size:12px;color:var(--muted)}
.hint{background:var(--accent-soft);border:1px solid var(--orange);padding:6px 12px;color:var(--fg)}
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;align-items:start}
@media (max-width:1000px){.wrap{grid-template-columns:minmax(0,1fr)}}
.canvas{border:1px solid var(--line);background:var(--surface);overflow:auto;max-height:82vh;position:relative}
.canvas svg{display:block;min-width:1000px;width:100%;height:auto;color:var(--fg);font-family:var(--sans);touch-action:none;user-select:none}
.empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--surface);color:var(--muted)}
.panel{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-width:0}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:none;border:0;border-bottom:3px solid transparent;padding:10px 6px;cursor:pointer;font-weight:600;color:var(--muted)}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--orange)}
.pane{padding:14px;display:flex;flex-direction:column;gap:10px;max-height:72vh;overflow:auto}
label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);font-weight:600}
label input,label select,label textarea{background:var(--bg);border:1px solid var(--line);padding:6px 8px;font-weight:400;font-size:13.5px;width:100%;color:var(--fg)}
label textarea{min-height:64px;resize:vertical;line-height:1.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sec-t{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.rel{display:flex;flex-direction:column;border:1px solid var(--line)}
.rel button{display:flex;gap:8px;align-items:baseline;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:6px 8px;cursor:pointer}
.rel button:last-child{border-bottom:0}
.rel button:hover{background:var(--accent-soft)}
.rel .dir{font-family:var(--mono);color:var(--accent);min-width:18px}
.rel .k{color:var(--muted);font-size:12px}
.tag{font-family:var(--mono);font-size:11px;padding:1px 6px;border:1px solid currentColor;white-space:nowrap}
.tag.chay{color:var(--ok)} .tag.chua_kiem{color:var(--warn)} .tag.de_xuat{color:var(--accent)}
.feed{display:flex;flex-direction:column;border:1px solid var(--line)}
.feed button{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:7px 9px;cursor:pointer}
.feed button:last-child{border-bottom:0}
.feed button:hover,.feed button.cur{background:var(--accent-soft)}
.feed .t{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.feed .m{font-size:13px}
.feed .c{grid-column:2;font-size:12px;color:var(--muted)}
.feed .new{color:var(--accent);font-family:var(--mono);font-size:10.5px;margin-left:6px}
table.st{border-collapse:collapse;width:100%;font-size:12.5px}
table.st th,table.st td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
table.st th{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:500;text-transform:uppercase}
.note{font-size:12.5px;color:var(--muted)}
.edit{border:1px solid var(--line);padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.edit.xong{opacity:.55}
.edit .ch{font-size:12.5px;color:var(--muted);word-break:break-word}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:8px 16px;z-index:50;max-width:90vw}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;gap:6px;align-items:center}
.legend svg{width:34px;height:10px;color:var(--fg)}
/* sơ đồ */
.n{cursor:grab} .n:active{cursor:grabbing}
.n .shape{fill:var(--surface);stroke:var(--gray);stroke-width:1.4}
.n-agent_sep .shape{stroke:var(--accent);stroke-width:2.2}
.n-nguoi .shape{fill:var(--bg)}
.n-nen .shape,.n-chua_ro .shape{stroke-dasharray:5 3}
.n-phong .shape{fill:var(--bg);stroke:var(--muted)}
.n-he_thong .shape{fill:var(--accent-soft)}
.n-tham_dinh .shape{stroke:var(--ok);stroke-width:1.8}
.n.on .shape,.n.hit .shape{stroke:var(--orange);stroke-width:3.6}
.n.dim,.e.dim,.lbl.dim{opacity:.13}
text.nm{font-size:13px;font-weight:600;fill:var(--fg);pointer-events:none}
text.tg{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;pointer-events:none;fill:var(--muted)}
text.tg.chay{fill:var(--ok)} text.tg.chua_kiem{fill:var(--warn)} text.tg.de_xuat{fill:var(--accent)}
text.lbl{font-size:12px;fill:var(--fg);paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.e{fill:none;stroke:var(--gray);stroke-width:1.3;opacity:.8}
.e-gui{stroke:var(--accent);stroke-width:1.9;opacity:1}
.e-goi{stroke-dasharray:6 4}
.e-duyet{stroke:var(--accent);stroke-dasharray:2 4;stroke-width:2.3}
.e-chuyen{stroke-dasharray:1 5;stroke-linecap:round;stroke-width:2.2}
.e-tra{stroke:var(--muted);stroke-dasharray:8 3 2 3}
.e-co{stroke:var(--line);stroke-width:1.1}
.e-chu{stroke-width:2.2}
.e-ghi{stroke:var(--ok);stroke-width:1.8}
.e.on{stroke-width:3.6;opacity:1}
.hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.ping .shape{animation:ping 1s ease-out}
@keyframes ping{0%{stroke:var(--orange);stroke-width:8}100%{stroke-width:1.4}}
.dot{fill:var(--orange);stroke:var(--surface);stroke-width:2}
@media (prefers-reduced-motion:reduce){.ping .shape{animation:none}}

.warn2{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tabs{flex-wrap:wrap}
.tabs button{flex:1 1 auto;white-space:nowrap;padding:10px 8px}

.qrbox{background:#fff;padding:6px;display:inline-block;width:min(240px,100%);line-height:0;border:1px solid var(--line)}
.qrbox svg{width:100%;height:auto;display:block}
details summary{cursor:pointer;color:var(--accent);margin:8px 0}

.lane{fill:var(--bg)}
.lane-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;fill:var(--muted);pointer-events:none}