:root{--bg:#070b16;--panel:rgba(13,20,36,.78);--line:rgba(148,163,184,.25);--text:#e6edf8;--muted:#9aabc7;--primary:#21d4c4;--ok:#34d399;--warn:#fbbf24;--danger:#fb7185}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,"Noto Sans TC",sans-serif;color:var(--text);background:radial-gradient(1200px 900px at 10% 0%,#17233f,transparent 60%),radial-gradient(1000px 800px at 90% 10%,#103447,transparent 58%),var(--bg)}
.bg-glow{position:fixed;width:380px;height:380px;border-radius:50%;filter:blur(80px);z-index:0;pointer-events:none}.glow-1{background:rgba(33,212,196,.15);top:20%;left:-120px}.glow-2{background:rgba(83,119,255,.18);bottom:-120px;right:-120px}
.topbar,.layout{position:relative;z-index:1}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 28px 14px}.eyebrow{margin:0;color:var(--primary);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}h1{margin:6px 0 0;font-size:clamp(24px,2.8vw,36px)}.vtag{font-size:16px;color:#8ff5eb}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.mode-label{font-size:12px;color:var(--muted)}select{background:#0b1224;color:#dce8ff;border:1px solid var(--line);padding:6px 10px;border-radius:10px}
.badge{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#d5e3fb;border-radius:999px;padding:6px 11px;font-size:12px}.badge.live{color:#88f7c7;border-color:rgba(52,211,153,.45)}
.layout{padding:10px 24px 24px;display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 20px 35px rgba(0,0,0,.28)}.card-head h2{margin:0;font-size:18px}.card-head p{margin:6px 0 12px;color:var(--muted);font-size:13px}
.controls{grid-column:span 6}.kpi{grid-column:span 6}.status{grid-column:span 4}.pipeline{grid-column:span 8}.privacy{grid-column:span 4}.full{grid-column:1/-1}
.btn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}button{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--text);border-radius:12px;padding:10px;font-weight:600;cursor:pointer;transition:.2s}button:hover{transform:translateY(-1px);border-color:var(--primary);box-shadow:0 8px 20px rgba(33,212,196,.15)}button.danger{border-color:rgba(251,113,133,.5);color:#ffd6de}button.ghost{background:transparent}.scene-switch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.scene-switch span{font-size:12px;color:var(--muted)}.bg-btn{padding:7px 10px;font-size:12px;border-radius:999px}.bg-btn.active{border-color:rgba(33,212,196,.7);color:#9df8ef;box-shadow:0 0 0 2px rgba(33,212,196,.22)}button#btnAutoDemo{border-color:rgba(33,212,196,.55);color:#9df8ef;background:linear-gradient(180deg,rgba(33,212,196,.2),rgba(33,212,196,.08))}button#btnVoiceDemo{border-color:rgba(124,92,255,.55);color:#d9cdff;background:linear-gradient(180deg,rgba(124,92,255,.2),rgba(124,92,255,.08))}button#btnVoiceDemo.active{box-shadow:0 0 0 2px rgba(124,92,255,.35),0 8px 20px rgba(124,92,255,.22)}button#btnAudioTest{border-color:rgba(255,184,77,.55);color:#ffe4b8;background:linear-gradient(180deg,rgba(255,184,77,.2),rgba(255,184,77,.08))}.audio-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.audio-controls label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.audio-controls select{background:#0b1224;color:#dce8ff;border:1px solid var(--line);padding:5px 8px;border-radius:8px}.voice-alert{margin-top:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);font-size:12px}.voice-alert.info{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35);color:#bfdbfe}.voice-alert.warn{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.35);color:#fde68a}.voice-alert.error{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35);color:#fecaca}.voice-alert.hidden{display:none}.hint{margin:10px 2px 0;color:var(--muted);font-size:12px}
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi-item{border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(255,255,255,.02)}.kpi-item span{display:block;color:var(--muted);font-size:12px}.kpi-item strong{font-size:22px;margin-top:4px;display:block}
.sim-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.room{position:relative;min-height:220px;background-size:cover;background-position:center;border:1px solid var(--line);border-radius:14px;overflow:hidden}.room.bg-day{background-image:linear-gradient(180deg,rgba(7,15,29,.42),rgba(6,12,24,.58)),url('./assets/hospital-day.png')}.room.bg-night{background-image:linear-gradient(180deg,rgba(6,10,28,.62),rgba(3,6,22,.8)),url('./assets/hospital-night.png')}.room.bg-steam{background-image:linear-gradient(180deg,rgba(22,20,16,.45),rgba(18,16,14,.62)),url('./assets/bathroom-steam.png')}.bed{position:absolute;left:18px;bottom:18px;width:45%;height:58px;border-radius:10px;background:#3d5478;opacity:.35}.person{position:absolute;left:30%;bottom:54px;width:110px;height:170px;transition:.25s;background:url('./assets/elder-avatar.png') center bottom/contain no-repeat;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}.person .head,.person .body,.person .arm,.person .leg{display:none}.person.fall{transform:rotate(75deg) translateY(20px)}
.alert-ring{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;border:2px solid transparent;transform:translate(-50%,-50%)}.alert-ring.on{animation:pulse 1.1s infinite;border-color:rgba(251,113,133,.85)}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,113,133,.55)}100%{box-shadow:0 0 0 42px rgba(251,113,133,0)}}
.status-overlay{position:absolute;top:10px;right:10px;background:rgba(11,18,36,.8);border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-size:11px;color:#b8c9e8}
.dialogue{border:1px solid var(--line);border-radius:14px;background:rgba(5,12,24,.65);padding:10px;min-height:220px;display:flex;flex-direction:column;gap:8px}.bubble{padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45}.bubble.ai{background:rgba(33,212,196,.12);border:1px solid rgba(33,212,196,.35)}.bubble.user{background:rgba(255,255,255,.06);border:1px solid var(--line);align-self:flex-end}
.status-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.status-list li{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 10px}.chip{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-style:normal;font-size:12px}.chip.ok{background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.4);color:#9af0c8}.chip.warn{background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.4);color:#ffd88a}.chip.danger{background:rgba(251,113,133,.16);border-color:rgba(251,113,133,.4);color:#ffc0ca}.chip.muted{color:var(--muted)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:9px}.timeline li{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:5px;opacity:.86}.timeline li strong{color:#c4d4ef;font-size:13px}.timeline li span{color:#dfebff;font-size:14px}.timeline li.active{border-color:var(--primary);background:rgba(33,212,196,.18);opacity:1}.timeline li.done{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.1)}
.privacy-box{border:1px dashed rgba(148,163,184,.45);border-radius:12px;padding:10px;display:grid;gap:10px}.metric{border:1px solid var(--line);border-radius:10px;padding:10px;background:rgba(255,255,255,.02)}.metric span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.metric strong{font-size:16px}
.flow-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:8px;align-items:stretch}.flow-node{grid-column:span 2;border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(255,255,255,.03);transition:.2s}.flow-node h3{margin:2px 0 5px;font-size:14px}.flow-node p{margin:0;color:#dbe8ff;font-size:12px}.flow-node .tag{display:inline-block;font-size:10px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-bottom:6px}.flow-arrow{display:flex;align-items:center;justify-content:center;color:#6f86ad;font-size:18px;font-weight:700}.flow-node.active{border-color:var(--primary);box-shadow:0 0 0 1px rgba(33,212,196,.55),0 0 18px rgba(33,212,196,.2);background:rgba(33,212,196,.12)}.flow-node.done{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.12)}
.logs{min-height:190px;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:rgba(2,6,14,.65);padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.logline{margin:6px 0;color:#dce9ff}.logline.warn{color:#ffe08f}.logline.danger{color:#ffb1bf}.logline.ok{color:#8af2be}
@media (max-width:1100px){.controls,.kpi,.status,.pipeline,.privacy,.sim,.flowchart{grid-column:1/-1}.btn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sim-wrap{grid-template-columns:1fr}.flow-grid{grid-template-columns:1fr}.flow-node{grid-column:1/-1}.flow-arrow{transform:rotate(90deg)}}@media (max-width:680px){.topbar{flex-direction:column}.btn-grid,.kpi-grid{grid-template-columns:1fr}}