/* ===================================================================
   ARICH 数字化手术室 · SDVoE + H.265 双引擎管控平台
   沿用 ARICH 官网 / NDIBOX / DualEngine 设计令牌
   本段之后追加医疗临床场景专属组件
   =================================================================== */
:root{
  --bg:#050A16; --bg2:#08101F; --panel:#0A1322; --panel2:#0B1424; --panel3:#0E1A2D;
  --stroke:rgba(255,255,255,.09); --stroke2:rgba(255,255,255,.055);
  --text:#E9F1FF; --text2:#B4C4DC; --muted:#7387A5; --faint:#4A5C77;
  --cyan:#35C8FF; --blue:#2EA7FF; --violet:#9381FF; --mint:#13DDC4;
  --red:#FF5C6C; --amber:#FFB547; --green:#39D98A;
  --accent:var(--cyan); --accent-soft:rgba(53,200,255,.12);
  --violet-soft:rgba(147,129,255,.12);
  --radius:12px; --radius-sm:8px;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,"SF Mono",monospace;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --shadow:0 18px 48px rgba(0,0,0,.42);
}
body.theme-light{
  --bg:#F2F6FC; --bg2:#E9F0F9; --panel:#FFFFFF; --panel2:#F7FAFE; --panel3:#EDF3FB;
  --stroke:rgba(15,38,70,.13); --stroke2:rgba(15,38,70,.08);
  --text:#0E2038; --text2:#3A5273; --muted:#647B99; --faint:#93A6BE;
  --cyan:#0A8FCB; --blue:#1677D2; --violet:#6E58DB; --mint:#0BAF9B;
  --red:#DC3F51; --amber:#C4800C; --green:#1F9E63;
  --accent-soft:rgba(10,143,203,.10); --violet-soft:rgba(110,88,219,.10);
  --shadow:0 16px 40px rgba(24,52,90,.13);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden;color-scheme:dark}
body.theme-light{color-scheme:light}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.hidden{display:none !important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------------- 通用 ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--radius-sm);border:1px solid var(--stroke);background:var(--panel2);color:var(--text2);font-weight:500;white-space:nowrap;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.btn:hover{background:var(--panel3);color:var(--text);border-color:var(--cyan)}
.btn svg{width:15px;height:15px}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--cyan));border-color:transparent;color:#041322;font-weight:700}
.btn-primary:hover{box-shadow:0 0 0 3px var(--accent-soft);color:#041322}
.btn-violet{background:linear-gradient(135deg,var(--violet),var(--blue));border-color:transparent;color:#0A0820;font-weight:700}
.btn-violet:hover{box-shadow:0 0 0 3px var(--violet-soft);color:#0A0820}
.btn-danger{color:var(--red);border-color:rgba(255,92,108,.35);background:rgba(255,92,108,.08)}
.btn-danger:hover{background:rgba(255,92,108,.16);border-color:var(--red)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--panel3);color:var(--text)}
.btn-sm{height:28px;padding:0 10px;font-size:12px;border-radius:6px;gap:5px}
.btn-sm svg{width:13px;height:13px}
.btn-xs{height:24px;padding:0 8px;font-size:11px;border-radius:5px;gap:4px}
.btn-xs svg{width:12px;height:12px}
.btn-block{width:100%;height:42px}
.btn:disabled,.btn.disabled{opacity:.4;pointer-events:none}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.icon-btn{width:34px;height:34px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);border:1px solid transparent;transition:.18s}
.icon-btn:hover{color:var(--cyan);background:var(--panel3);border-color:var(--stroke)}
.icon-btn svg{width:17px;height:17px}
.card{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:18px;position:relative;min-width:0}
.card.pad0{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:16px}
.card-head h3{margin:0;font-size:14px;font-weight:650;letter-spacing:.2px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.card-head h3 svg{width:16px;height:16px;color:var(--cyan)}
.card-head .sub{font-size:11.5px;color:var(--muted);font-weight:400}
.card-desc{color:var(--muted);font-size:12px;margin:-8px 0 16px;line-height:1.7}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.split12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.span2{grid-column:span 2}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sep{height:1px;background:var(--stroke2);margin:16px 0}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb12{margin-bottom:12px}
.muted{color:var(--muted)}.tiny{font-size:11px}
.text-cyan{color:var(--cyan)}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-amber{color:var(--amber)}.text-violet{color:var(--violet)}
.tag{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:5px;font-size:11px;font-weight:600;background:var(--panel3);color:var(--muted);border:1px solid var(--stroke2);white-space:nowrap}
.tag.ok{color:var(--green);background:rgba(57,217,138,.10);border-color:rgba(57,217,138,.25)}
.tag.warn{color:var(--amber);background:rgba(255,181,71,.10);border-color:rgba(255,181,71,.25)}
.tag.err{color:var(--red);background:rgba(255,92,108,.10);border-color:rgba(255,92,108,.25)}
.tag.info{color:var(--cyan);background:var(--accent-soft);border-color:rgba(53,200,255,.25)}
.tag.violet{color:var(--violet);background:var(--violet-soft);border-color:rgba(147,129,255,.28)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.dot-ok{background:var(--green);box-shadow:0 0 8px rgba(57,217,138,.6)}
.dot-err{background:var(--red);box-shadow:0 0 8px rgba(255,92,108,.6)}
.dot-warn{background:var(--amber)}
.dot-blue{background:var(--cyan)}
.dot-violet{background:var(--violet);box-shadow:0 0 8px rgba(147,129,255,.6)}

/* 表单 */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.form-grid.g1{grid-template-columns:1fr}
.form-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span,.field>.lbl{font-size:11.5px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
.field .hint{font-size:10.5px;color:var(--faint)}
.input,select.input,textarea.input{width:100%;height:34px;padding:0 11px;background:var(--bg2);border:1px solid var(--stroke);border-radius:var(--radius-sm);color:var(--text);caret-color:var(--cyan);outline:none;transition:.18s;font-size:12.5px;color-scheme:dark}
body.theme-light .input{background:#FBFDFF;color-scheme:light}
.input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--accent-soft)}
.input:disabled{opacity:.45;cursor:not-allowed}
.input::placeholder{color:var(--faint)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 14px,calc(100% - 10px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
select.input option{background:var(--panel);color:var(--text)}
textarea.input{height:auto;min-height:64px;padding:9px 11px;resize:vertical;line-height:1.6}
.input-mono{font-family:var(--mono);font-size:12px}
.field-with-btn{display:flex;gap:8px}.field-with-btn .input{flex:1}
.switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:21px;border-radius:20px;background:var(--panel3);border:1px solid var(--stroke);transition:.2s;flex:none;position:relative}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:.2s}
.switch input:checked+.track{background:linear-gradient(135deg,var(--blue),var(--cyan));border-color:transparent}
.switch input:checked+.track::after{left:19px;background:#fff}
.switch .sw-label{font-size:12px;color:var(--text2)}
.segmented{display:inline-flex;background:var(--bg2);border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:3px;gap:3px}
.segmented button{height:27px;padding:0 13px;border-radius:5px;font-size:12px;color:var(--muted);transition:.18s;white-space:nowrap}
.segmented button:hover{color:var(--text)}
.segmented button.active{background:linear-gradient(135deg,rgba(46,167,255,.22),rgba(53,200,255,.18));color:var(--cyan);font-weight:650;box-shadow:inset 0 0 0 1px rgba(53,200,255,.25)}
.segmented.violet button.active{background:linear-gradient(135deg,rgba(147,129,255,.24),rgba(46,167,255,.16));color:var(--violet);box-shadow:inset 0 0 0 1px rgba(147,129,255,.3)}
.range-row{display:flex;align-items:center;gap:12px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:4px;background:var(--panel3);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cyan);border:2px solid var(--bg);box-shadow:0 0 0 3px var(--accent-soft);cursor:pointer}
.range-val{min-width:74px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--cyan)}
.notice{display:flex;gap:9px;padding:11px 13px;border-radius:var(--radius-sm);background:var(--accent-soft);border:1px solid rgba(53,200,255,.18);color:var(--text2);font-size:11.5px;line-height:1.7}
.notice svg{width:15px;height:15px;color:var(--cyan);margin-top:2px}
.notice.warn{background:rgba(255,181,71,.08);border-color:rgba(255,181,71,.22)}
.notice.warn svg{color:var(--amber)}
.notice.violet{background:var(--violet-soft);border-color:rgba(147,129,255,.22)}
.notice.violet svg{color:var(--violet)}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--stroke2)}

/* 表格 */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--stroke)}
table.tbl{width:100%;border-collapse:collapse;font-size:12px;min-width:600px}
table.tbl th{text-align:left;padding:10px 12px;background:var(--panel2);color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.3px;border-bottom:1px solid var(--stroke);white-space:nowrap}
table.tbl td{padding:10px 12px;border-bottom:1px solid var(--stroke2);color:var(--text2);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--panel2)}
table.tbl td .mono{color:var(--text)}
.empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:12px}
.empty svg{width:28px;height:28px;opacity:.35;display:block;margin:0 auto 10px}

/* ---------------- 登录 ---------------- */
.login-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden}
.login-bg{position:absolute;inset:0;overflow:hidden}
.login-bg .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4}
.orb-a{width:620px;height:620px;left:-140px;top:-180px;background:radial-gradient(circle,#1B6EFF,transparent 68%)}
.orb-b{width:560px;height:560px;right:-120px;bottom:-200px;background:radial-gradient(circle,#13DDC4,transparent 68%);opacity:.26}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(120,190,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,190,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 78%)}
.ring{position:absolute;left:50%;top:50%;border:1px solid rgba(53,200,255,.10);border-radius:50%;transform:translate(-50%,-50%)}
.ring-1{width:660px;height:660px}.ring-2{width:960px;height:960px;border-color:rgba(147,129,255,.07)}
.login-box{position:relative;width:400px;max-width:calc(100vw - 40px);padding:32px;background:var(--panel);border:1px solid var(--stroke);border-radius:18px;box-shadow:var(--shadow);animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.brand-logo-img{width:104px;height:auto;display:block}
img.logo-on-light{display:none}body.theme-light img.logo-on-dark{display:none}body.theme-light img.logo-on-light{display:block}
.brand-divider{width:1px;height:36px;background:var(--stroke)}
.brand-name{font-family:"Chakra Petch",var(--sans);font-weight:700;font-size:19px;letter-spacing:1.5px;color:var(--text);line-height:1.2}
.brand-sub{font-size:10.5px;color:var(--muted);margin-top:3px;letter-spacing:.2px}
.login-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--cyan);background:var(--accent-soft);border:1px solid rgba(53,200,255,.22);padding:5px 10px;border-radius:20px;margin-bottom:14px}
.login-badge svg{width:13px;height:13px}
.login-box h1{font-size:22px;margin:0 0 6px;font-weight:700;letter-spacing:.5px}
.login-hint{font-size:11.5px;color:var(--muted);margin:0 0 22px}
#login-form{display:flex;flex-direction:column;gap:14px}
.login-error{font-size:11.5px;color:var(--red);min-height:0}
.login-meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:18px;padding-top:14px;border-top:1px solid var(--stroke2)}
.login-foot{position:absolute;bottom:18px;font-size:10.5px;color:var(--faint);letter-spacing:.2px}

/* ---------------- 外壳布局 ---------------- */
.app-shell{display:flex;height:100vh;overflow:hidden}
.sidebar{width:224px;flex:none;display:flex;flex-direction:column;background:var(--bg2);border-right:1px solid var(--stroke);transition:width .2s}
.app-shell.side-collapsed .sidebar{width:64px}
.side-brand{height:62px;flex:none;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--stroke);overflow:hidden}
.side-logo{width:76px;flex:none;display:block}
.app-shell.side-collapsed .side-brand{padding:0 12px}
.app-shell.side-collapsed .side-logo{width:40px}
.side-product{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.side-product b{font-family:"Chakra Petch",var(--sans);font-size:14px;letter-spacing:1px}
.side-product span{font-size:10px;color:var(--muted)}
.app-shell.side-collapsed .side-product{display:none}
.side-nav{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:3px}
.nav-group{font-size:10px;color:var(--faint);letter-spacing:1.2px;padding:14px 10px 6px;font-weight:600}
.app-shell.side-collapsed .nav-group{display:none}
.nav-item{display:flex;align-items:center;gap:11px;height:38px;padding:0 11px;border-radius:var(--radius-sm);color:var(--muted);font-size:12.5px;font-weight:500;white-space:nowrap;transition:.16s;position:relative}
.nav-item svg{width:17px;height:17px}
.nav-item:hover{background:var(--panel3);color:var(--text)}
.nav-item.active{background:linear-gradient(90deg,var(--accent-soft),transparent);color:var(--cyan);font-weight:650}
.nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--cyan)}
.nav-item .nav-badge{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--faint)}
.app-shell.side-collapsed .nav-item{justify-content:center;padding:0}
.app-shell.side-collapsed .nav-item span,.app-shell.side-collapsed .nav-item .nav-badge{display:none}
.side-bottom{padding:12px;border-top:1px solid var(--stroke)}
.side-health{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:11px 12px;margin-bottom:10px}
.app-shell.side-collapsed .side-health{display:none}
.side-health-head{display:flex;align-items:center;gap:7px;font-size:11.5px;margin-bottom:9px}
.side-health-row{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:4px}
.side-health-row b{color:var(--text2);font-weight:500}
.side-bar{height:4px;border-radius:4px;background:var(--panel3);margin-top:10px;overflow:hidden}
.side-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .5s}
.side-user{display:flex;align-items:center;gap:9px;width:100%;padding:8px;border-radius:var(--radius-sm);color:var(--text2);text-align:left;transition:.16s}
.side-user:hover{background:var(--panel3)}
.avatar{width:30px;height:30px;flex:none;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--violet));display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;font-family:var(--mono)}
.side-user-txt{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.side-user-txt b{font-size:11.5px}.side-user-txt small{font-size:10px;color:var(--muted)}
.side-user svg{width:15px;height:15px;color:var(--muted)}
.app-shell.side-collapsed .side-user{justify-content:center}.app-shell.side-collapsed .side-user-txt,.app-shell.side-collapsed .side-user>svg{display:none}

.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:62px;flex:none;display:flex;align-items:center;gap:14px;padding:0 24px;border-bottom:1px solid var(--stroke);background:var(--bg2)}
.menu-toggle{display:none}
.top-title{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.top-title h2{margin:0;font-size:16px;font-weight:650;letter-spacing:.3px}
.top-sub{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.top-chip{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border:1px solid var(--stroke);border-radius:7px;background:var(--panel);font-size:11px;color:var(--muted);white-space:nowrap}
.top-chip b{color:var(--cyan);font-size:11px;font-weight:600}
.top-chip.violet b{color:var(--violet)}
.top-clock{font-size:12px;color:var(--text2);padding:0 6px;letter-spacing:.5px}
/* 顶栏数据来源徽标：演示 / 实时 / 连接异常 */
.mode-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:7px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid var(--stroke);background:var(--panel);color:var(--muted)}
.mode-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mode-badge.mock{color:#9fb0c8}
.mode-badge.live{color:#13DDC4;border-color:rgba(19,221,196,.45);background:rgba(19,221,196,.08)}
.mode-badge.err{color:#ff8a8a;border-color:rgba(255,138,138,.45);background:rgba(255,138,138,.08)}
@media(max-width:980px){ .mode-badge{display:none} }
.view-wrap{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 24px 28px;background:radial-gradient(1100px 480px at 78% -8%,rgba(46,167,255,.055),transparent 70%),var(--bg)}
.view{max-width:1680px;margin:0 auto;animation:fade .25s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.statusbar{height:28px;flex:none;display:flex;align-items:center;gap:20px;padding:0 20px;border-top:1px solid var(--stroke);background:var(--bg2);font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
.statusbar b{color:var(--text2);font-weight:500}
.sb-spacer{flex:1}

/* ---------------- 页头 ---------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{margin:0;font-size:20px;font-weight:700;letter-spacing:.4px}
.page-head p{margin:4px 0 0;font-size:11.5px;color:var(--muted)}

/* ---------------- KPI ---------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:16px 17px;position:relative;overflow:hidden;min-height:112px}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--kpi-glow,rgba(53,200,255,.13)),transparent 70%);pointer-events:none}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-label{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
.kpi-ico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--cyan)}
.kpi-ico svg{width:15px;height:15px}
.kpi.v .kpi-ico{background:var(--violet-soft);color:var(--violet)}
.kpi.g .kpi-ico{background:rgba(57,217,138,.10);color:var(--green)}
.kpi.a .kpi-ico{background:rgba(255,181,71,.10);color:var(--amber)}
.kpi-val{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.25;margin-top:10px;color:var(--text)}
.kpi-val small{font-size:12px;font-weight:400;color:var(--muted);margin-left:5px;letter-spacing:0}
.kpi-foot{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted);margin-top:5px}
.kpi-trend{font-family:var(--mono);font-size:10.5px;color:var(--green)}
.kpi-trend.down{color:var(--red)}
.kpi-spark{position:absolute;right:14px;bottom:12px;width:92px;height:30px;opacity:.75}

/* ---------------- 拓扑图 ---------------- */
.topo{position:relative;height:236px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--stroke);border-radius:var(--radius-sm);overflow:hidden}
.topo svg{width:100%;height:100%;display:block}
.topo-legend{position:absolute;right:12px;bottom:10px;display:flex;gap:14px;font-size:10.5px;color:var(--muted);background:var(--panel);border:1px solid var(--stroke);padding:5px 9px;border-radius:6px}
.topo-legend i{display:inline-block;width:16px;height:0;border-top:2px solid var(--cyan);vertical-align:middle;margin-right:5px}
.topo-legend i.v{border-top:2px dashed var(--violet)}

/* ---------------- 图表 ---------------- */
.chart-box{position:relative;width:100%;height:200px}
.chart-box.tall{height:236px}
.chart-box canvas{width:100%;height:100%;display:block}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:10.5px;color:var(--muted);margin-top:8px}
.chart-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend-a{background:var(--cyan)}.legend-b{background:var(--violet)}.legend-c{background:var(--mint)}.legend-d{background:var(--amber)}
.gauge-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--stroke2)}
.gauge-row:last-child{border-bottom:0}
.gauge-name{width:96px;flex:none;font-size:11.5px;color:var(--text2)}
.gauge-track{flex:1;height:7px;border-radius:6px;background:var(--panel3);overflow:hidden}
.gauge-track i{display:block;height:100%;border-radius:6px;transition:width .5s}
.gauge-val{width:76px;text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--text)}

/* ---------------- 列表 ---------------- */
.list-row{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--stroke2)}
.list-row:last-child{border-bottom:0}
.list-ico{width:30px;height:30px;flex:none;border-radius:7px;background:var(--panel3);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.list-ico svg{width:15px;height:15px}
.list-main{flex:1;min-width:0}
.list-main b{font-size:12px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-main small{font-size:10.5px;color:var(--muted)}
.list-side{text-align:right;font-family:var(--mono);font-size:11px;color:var(--text2);white-space:nowrap}
.evt-row{display:flex;gap:11px;padding:9px 2px;border-bottom:1px solid var(--stroke2);font-size:11.5px}
.evt-row:last-child{border-bottom:0}
.evt-time{font-family:var(--mono);font-size:10.5px;color:var(--faint);width:66px;flex:none;padding-top:1px}
.evt-msg{flex:1;color:var(--text2);line-height:1.5}
.evt-msg b{color:var(--text);font-weight:600}
.evt-lv{width:44px;flex:none;text-align:center;height:18px;line-height:18px;border-radius:4px;font-size:10px;font-weight:650}
.evt-lv.info{background:var(--accent-soft);color:var(--cyan)}
.evt-lv.ok{background:rgba(57,217,138,.10);color:var(--green)}
.evt-lv.warn{background:rgba(255,181,71,.10);color:var(--amber)}
.evt-lv.err{background:rgba(255,92,108,.10);color:var(--red)}

/* ---------------- 引擎标签 ---------------- */
.eng{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:5px;font-size:10.5px;font-weight:700;font-family:var(--mono);letter-spacing:.2px;white-space:nowrap}
.eng.sdvoe{color:var(--cyan);background:var(--accent-soft);border:1px solid rgba(53,200,255,.28)}
.eng.h265{color:var(--violet);background:var(--violet-soft);border:1px solid rgba(147,129,255,.30)}
.eng.none{color:var(--faint);background:var(--panel3);border:1px solid var(--stroke2)}

/* ---------------- 信号矩阵 ---------------- */
.matrix-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:12px 14px;background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius)}
.mx-scroll{overflow:auto;border:1px solid var(--stroke);border-radius:var(--radius);background:var(--panel);max-width:100%}
table.mx{border-collapse:separate;border-spacing:0;width:100%;min-width:1120px;font-size:11.5px}
table.mx th,table.mx td{border-right:1px solid var(--stroke2);border-bottom:1px solid var(--stroke2);padding:0}
table.mx th:last-child,table.mx td:last-child{border-right:0}
table.mx tr:last-child td{border-bottom:0}
.mx-corner{position:sticky;left:0;top:0;z-index:5;min-width:186px;background:var(--panel2);padding:10px 12px;text-align:left;color:var(--muted);font-size:10.5px;font-weight:600;line-height:1.5}
.mx-corner b{color:var(--text2);font-size:11.5px;display:block}
.mx-col{position:sticky;top:0;z-index:4;min-width:112px;background:var(--panel2);padding:9px 8px;text-align:center;vertical-align:middle}
.mx-col .mx-col-id{font-family:var(--mono);font-size:10px;color:var(--cyan);letter-spacing:.5px}
.mx-col .mx-col-name{font-size:11px;font-weight:600;margin-top:2px;white-space:nowrap}
.mx-col .mx-col-sig{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:2px;white-space:nowrap}
.mx-col.off{opacity:.45}
.mx-row{position:sticky;left:0;z-index:3;min-width:186px;background:var(--panel2);padding:8px 12px;text-align:left}
.mx-row .mx-row-name{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap}
.mx-row .mx-row-meta{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap}
.mx-cell{height:52px;min-width:112px;text-align:center;vertical-align:middle;background:var(--panel);transition:background .15s}
.mx-cell button{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:16px;transition:.15s}
.mx-cell button:hover{background:var(--accent-soft);color:var(--cyan)}
.mx-cell.on{background:linear-gradient(135deg,rgba(53,200,255,.16),rgba(46,167,255,.07))}
.mx-cell.on.v{background:linear-gradient(135deg,rgba(147,129,255,.18),rgba(46,167,255,.06))}
.mx-cell.on button{color:transparent}
.mx-cell .crosspoint{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;width:100%;height:100%;justify-content:center}
.mx-cell .crosspoint .cp-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(53,200,255,.15)}
.mx-cell.on.v .cp-dot{background:var(--violet);box-shadow:0 0 0 4px rgba(147,129,255,.16)}
.mx-cell .crosspoint small{font-family:var(--mono);font-size:9.5px;color:var(--text2)}
.mx-cell:hover .crosspoint{filter:brightness(1.2)}

/* ---------------- 设备卡片 ---------------- */
.dev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dev-card{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:15px;cursor:pointer;transition:.18s;position:relative;overflow:hidden}
.dev-card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.dev-card.off{opacity:.6}
.dev-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cyan)}
.dev-card.rx::before{background:var(--violet)}
.dev-card.off::before{background:var(--faint)}
.dev-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.dev-id{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.4px}
.dev-name{font-size:13px;font-weight:650;margin-top:3px;line-height:1.4}
.dev-loc{font-size:10.5px;color:var(--muted);margin-top:2px}
.dev-spec{margin-top:12px;padding-top:11px;border-top:1px solid var(--stroke2);display:flex;flex-direction:column;gap:5px}
.dev-spec div{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}
.dev-spec b{font-family:var(--mono);font-weight:500;color:var(--text2)}
.dev-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px}

/* ---------------- 引擎对比卡 ---------------- */
.engine-hero{border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;border:1px solid var(--stroke);min-height:210px}
.engine-hero.s{background:linear-gradient(145deg,rgba(46,167,255,.12),rgba(53,200,255,.03) 60%),var(--panel)}
.engine-hero.h{background:linear-gradient(145deg,rgba(147,129,255,.13),rgba(46,167,255,.03) 60%),var(--panel)}
.engine-hero::after{content:"";position:absolute;right:-50px;bottom:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(53,200,255,.10),transparent 68%);pointer-events:none}
.engine-hero.h::after{background:radial-gradient(circle,rgba(147,129,255,.12),transparent 68%)}
.eh-top{display:flex;align-items:center;gap:10px}
.eh-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--cyan)}
.engine-hero.h .eh-ico{background:var(--violet-soft);color:var(--violet)}
.eh-ico svg{width:20px;height:20px}
.eh-title{font-family:"Chakra Petch",var(--sans);font-size:19px;font-weight:700;letter-spacing:.6px}
.eh-sub{font-size:10.5px;color:var(--muted)}
.eh-desc{font-size:11.5px;color:var(--text2);line-height:1.75;margin:14px 0 16px;min-height:60px}
.eh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.eh-stat{background:rgba(255,255,255,.025);border:1px solid var(--stroke2);border-radius:7px;padding:9px 10px}
.eh-stat b{display:block;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--cyan)}
.engine-hero.h .eh-stat b{color:var(--violet)}
.eh-stat span{font-size:10px;color:var(--muted)}
.eh-foot{margin-top:14px;display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--muted)}

/* ---------------- 拼接墙 ---------------- */
.wall-stage{background:#03070F;border:1px solid var(--stroke);border-radius:var(--radius);padding:16px;position:relative;overflow:hidden}
.wall-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,190,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(120,190,255,.04) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.wall-grid{position:relative;display:grid;gap:8px;aspect-ratio:16/9}
.wall-cell{background:linear-gradient(145deg,#0A1626,#07101E);border:1px solid var(--stroke);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.18s;position:relative;overflow:hidden;color:var(--muted)}
.wall-cell:hover{border-color:var(--cyan);background:linear-gradient(145deg,#0D1D33,#081322)}
.wall-cell.filled{border-color:rgba(53,200,255,.4)}
.wall-cell .wc-id{position:absolute;left:8px;top:6px;font-family:var(--mono);font-size:9px;color:var(--faint)}
.wall-cell svg{width:22px;height:22px;opacity:.5}
.wall-cell b{font-size:12px;color:var(--text);font-weight:600}
.wall-cell small{font-size:10px;font-family:var(--mono)}
.wall-cell .wc-eng{position:absolute;right:7px;top:6px}
.preset-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--stroke);border-radius:var(--radius-sm);background:var(--panel2);margin-bottom:9px;transition:.16s}
.preset-item:hover{border-color:var(--cyan);background:var(--panel3)}
.preset-item.active{border-color:var(--cyan);background:var(--accent-soft)}
.preset-ico{width:32px;height:32px;flex:none;border-radius:7px;background:var(--panel3);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.preset-ico svg{width:16px;height:16px}
.preset-main{flex:1;min-width:0}
.preset-main b{font-size:12px;display:block}
.preset-main small{font-size:10.5px;color:var(--muted)}

/* ---------------- 拼接上墙：布局 / 场景 / 带宽 ---------------- */
.layout-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.layout-group{background:var(--panel2);border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:11px 12px}
.lg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.lg-head b{font-size:11.5px;color:var(--text)}
.lg-head .tiny{font-size:10px}
.layout-group .segmented{flex-wrap:wrap;width:100%}
.layout-group .segmented button{flex:1 1 auto;min-width:62px;height:25px;padding:0 9px;font-size:11px}
.wall-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid var(--stroke2)}
.wall-cell.big{border-color:rgba(53,200,255,.55);background:linear-gradient(145deg,#0C2036,#081626)}
.wall-cell.big::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(53,200,255,.12);border-radius:6px}
.wall-cell.small.eng-h265{border-color:rgba(147,129,255,.34);background:linear-gradient(145deg,#14122A,#0B0A1C)}
.wall-cell.eng-sdvoe.filled{box-shadow:inset 0 0 0 1px rgba(53,200,255,.08)}
.wall-cell .wc-role{position:absolute;left:8px;bottom:7px;font-size:9.5px;font-family:var(--mono);letter-spacing:.5px;color:var(--cyan);background:rgba(53,200,255,.12);border:1px solid rgba(53,200,255,.28);border-radius:4px;padding:1px 6px}
.wall-cell .wc-role.sub{color:var(--violet);background:rgba(147,129,255,.12);border-color:rgba(147,129,255,.28)}
.wall-cell.big b{font-size:14px}
.wall-cell.big svg{width:28px;height:28px}
.bw-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.6fr);gap:10px;margin-top:14px}
.bw-item{background:var(--panel2);border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:10px 12px}
.bw-item small{display:block;font-size:10px;color:var(--muted)}
.bw-item b{display:block;font-family:var(--mono);font-size:16px;color:var(--cyan);margin:3px 0;font-weight:600}
.bw-item span{font-size:10px;color:var(--muted)}
.bw-advice{display:flex;gap:9px;align-items:flex-start;background:var(--accent-soft);border:1px solid rgba(53,200,255,.18);border-radius:var(--radius-sm);padding:10px 12px;font-size:10.5px;line-height:1.75;color:var(--text2)}
.bw-advice svg{width:14px;height:14px;flex:none;color:var(--cyan);margin-top:2px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:13px}
.sc-card{border:1px solid var(--stroke);border-radius:var(--radius);background:var(--panel2);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.sc-card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.sc-card.active{border-color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(53,200,255,.18)}
.sc-thumb{position:relative;background:#03070F;padding:10px;border-bottom:1px solid var(--stroke)}
.sc-svg{display:block;width:100%;height:104px}
.sc-main{fill:rgba(53,200,255,.16);stroke:#35C8FF;stroke-width:1.5}
.sc-sub{fill:rgba(147,129,255,.11);stroke:#9381FF;stroke-width:1.1}
.sc-thumb-tag{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:10px;color:var(--cyan);background:rgba(3,7,15,.82);border:1px solid rgba(53,200,255,.3);border-radius:4px;padding:2px 7px}
.sc-body{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1}
.sc-body b{font-size:12.5px}
.sc-use{font-size:11px;line-height:1.75;color:var(--text2);margin:9px 0 11px;flex:1}
.sc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.sc-meta span{font-size:10px;font-family:var(--mono);color:var(--muted);background:var(--panel3);border:1px solid var(--stroke2);border-radius:4px;padding:3px 7px}
.sc-actions{display:flex;gap:8px}
.sc-actions .btn{flex:1}
.sc-detail-thumb{display:flex;align-items:center;gap:14px;background:#03070F;border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:10px}
.sc-detail-thumb .sc-svg{width:170px;height:96px;flex:none}
.sc-detail-thumb b{font-size:12.5px}
@media(max-width:1100px){.layout-picker{grid-template-columns:1fr}.bw-strip{grid-template-columns:repeat(3,1fr)}.bw-advice{grid-column:1/-1}}

/* ---------------- 设置 ---------------- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--stroke2)}
.set-row:last-child{border-bottom:0}
.set-row .set-info b{font-size:12px;font-weight:600;display:block}
.set-row .set-info small{font-size:10.5px;color:var(--muted);display:block;margin-top:2px}
.kv-list{display:flex;flex-direction:column;gap:9px}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;padding:7px 0;border-bottom:1px solid var(--stroke2)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}.kv b{font-family:var(--mono);font-weight:500;color:var(--text2);text-align:right}
.about-hero{display:flex;align-items:center;gap:18px;padding:18px;border-radius:var(--radius);background:linear-gradient(120deg,rgba(46,167,255,.10),rgba(147,129,255,.06)),var(--panel);border:1px solid var(--stroke);margin-bottom:16px}
.about-hero img{width:130px}
.about-hero h2{margin:0;font-size:18px;letter-spacing:.4px}
.about-hero p{margin:5px 0 0;font-size:11.5px;color:var(--muted);line-height:1.8}

/* ---------------- 浮层 ---------------- */
.mask{position:fixed;inset:0;background:rgba(2,6,14,.62);z-index:40;backdrop-filter:blur(2px);animation:fade .2s ease both}
.drawer{position:fixed;right:0;top:0;bottom:0;width:420px;max-width:92vw;background:var(--bg2);border-left:1px solid var(--stroke);z-index:50;box-shadow:var(--shadow);display:flex;flex-direction:column;animation:slidein .24s ease both}
@keyframes slidein{from{transform:translateX(30px);opacity:.5}to{transform:none;opacity:1}}
.drawer-head{height:60px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--stroke)}
.drawer-head h3{margin:0;font-size:14px}
.drawer-body{flex:1;overflow-y:auto;padding:18px}
.modal-mask{z-index:60;display:flex;align-items:center;justify-content:center}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:70;width:460px;max-width:92vw;max-height:86vh;overflow-y:auto;background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;animation:rise .22s ease both}
.modal h3{margin:0 0 6px;font-size:15px}
.modal p{margin:0 0 16px;font-size:11.5px;color:var(--muted);line-height:1.7}
.toast-stack{position:fixed;right:20px;top:74px;z-index:90;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:10px;min-width:258px;max-width:360px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--stroke);box-shadow:var(--shadow);font-size:12px;color:var(--text2);animation:toastin .24s ease both;pointer-events:auto}
@keyframes toastin{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.toast svg{width:16px;height:16px;margin-top:1px}
.toast.ok svg{color:var(--green)}.toast.info svg{color:var(--cyan)}.toast.warn svg{color:var(--amber)}.toast.err svg{color:var(--red)}
.toast b{display:block;color:var(--text);font-size:12px;font-weight:600;margin-bottom:2px}

/* ---------------- 无障碍 / 动效偏好 ---------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------------- 响应式 ---------------- */
@media(max-width:1400px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dev-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split21,.split12{grid-template-columns:1fr}
}
@media(max-width:1080px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-100%);transition:transform .22s}
  .app-shell.side-open .sidebar{transform:none}
  .app-shell.side-collapsed .sidebar{width:224px}
  .app-shell.side-collapsed .side-product,.app-shell.side-collapsed .nav-group,.app-shell.side-collapsed .side-health{display:flex}
  .app-shell.side-collapsed .side-health{display:block}
  .app-shell.side-collapsed .nav-item span,.app-shell.side-collapsed .nav-item .nav-badge{display:inline}
  .app-shell.side-collapsed .side-user-txt{display:flex}
  .menu-toggle{display:inline-flex}
  .top-chip{display:none}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .view-wrap{padding:14px}
  .topbar{padding:0 14px}
  .kpi-grid,.dev-grid,.g2,.g3,.g4,.form-grid,.form-grid.g3{grid-template-columns:1fr}
  .top-clock{display:none}
  .statusbar span:nth-child(n+4){display:none}
  .page-head h1{font-size:17px}
}

/* ===================================================================
   数字化手术室 · 临床场景专属组件
   =================================================================== */
.or-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
@media(max-width:1400px){.or-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1080px){.or-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.or-room{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden;transition:.18s;cursor:pointer;position:relative}
.or-room:hover{border-color:var(--cyan);transform:translateY(-2px)}
.or-room.active{border-color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(53,200,255,.22)}
.or-room::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--stroke)}
.or-room.running::before{background:linear-gradient(90deg,var(--cyan),var(--mint))}
.or-room.warn::before{background:var(--amber)}
.or-room-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:13px 14px 9px}
.or-room-id{font-family:var(--mono);font-size:10px;color:var(--cyan);letter-spacing:.6px}
.or-room-name{font-size:14px;font-weight:700;margin-top:2px}
.or-room-dept{font-size:10.5px;color:var(--muted);margin-top:1px}
.or-screen{position:relative;height:92px;margin:0 14px;border-radius:7px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#122A42,#050B16 72%);border:1px solid var(--stroke2)}
.or-screen::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,190,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,190,255,.045) 1px,transparent 1px);background-size:18px 18px}
.or-screen .scan{position:absolute;left:0;right:0;height:1px;top:30%;background:linear-gradient(90deg,transparent,rgba(53,200,255,.45),transparent);animation:scanmove 4.5s linear infinite}
@keyframes scanmove{0%{top:8%}100%{top:92%}}
.or-screen-label{position:absolute;left:9px;top:8px;font-family:var(--mono);font-size:9.5px;color:var(--cyan);background:rgba(3,7,15,.6);padding:2px 6px;border-radius:4px}
.or-screen-rec{position:absolute;right:9px;top:8px;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;color:var(--red)}
.or-screen-rec i{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.or-screen-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(233,241,255,.28)}
.or-screen-center svg{width:30px;height:30px}
.or-meta{padding:11px 14px 13px;display:flex;flex-direction:column;gap:6px}
.or-meta-row{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}
.or-meta-row b{font-family:var(--mono);font-weight:500;color:var(--text2)}
.or-eng-row{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.privacy-bar{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:7px;background:rgba(19,221,196,.07);border:1px solid rgba(19,221,196,.20);font-size:10.5px;color:var(--text2)}
.privacy-bar svg{width:14px;height:14px;color:var(--mint)}
.privacy-bar b{color:var(--mint);font-weight:650}

/* 双引擎分工流程 */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1.15fr) 46px minmax(0,1fr);align-items:stretch;gap:4px}
.flow-col{background:var(--panel2);border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:13px}
.flow-col h4{margin:0 0 10px;font-size:12px;display:flex;align-items:center;gap:7px}
.flow-col h4 svg{width:15px;height:15px;color:var(--cyan)}
.flow-chip{display:flex;align-items:center;gap:7px;padding:6px 8px;margin-bottom:6px;border:1px solid var(--stroke2);border-radius:6px;background:var(--panel);font-size:10.5px;color:var(--text2)}
.flow-chip:last-child{margin-bottom:0}
.flow-chip svg{width:13px;height:13px;color:var(--muted)}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:18px}
.flow-arrow.v{color:var(--violet)}
.flow-split{display:grid;grid-template-rows:1fr 1fr;gap:8px}
.flow-split>div{border-radius:7px;padding:11px 12px;border:1px solid var(--stroke)}
.flow-split .s{background:linear-gradient(135deg,rgba(46,167,255,.12),rgba(53,200,255,.03));border-color:rgba(53,200,255,.25)}
.flow-split .h{background:linear-gradient(135deg,rgba(147,129,255,.12),rgba(46,167,255,.03));border-color:rgba(147,129,255,.25)}
.flow-split b{font-size:11.5px;display:block;margin-bottom:4px}
.flow-split small{font-size:10px;color:var(--muted);line-height:1.6;display:block}
@media(max-width:1100px){.flow{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);height:22px}}

/* 术式预案卡 */
.scene-hero{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--stroke);border-radius:var(--radius);background:linear-gradient(120deg,rgba(46,167,255,.09),rgba(147,129,255,.05)),var(--panel);margin-bottom:14px}
.scene-hero .sh-ico{width:42px;height:42px;flex:none;border-radius:10px;background:var(--accent-soft);color:var(--cyan);display:flex;align-items:center;justify-content:center}
.scene-hero .sh-ico svg{width:22px;height:22px}
.scene-hero h3{margin:0;font-size:15px}
.scene-hero p{margin:4px 0 0;font-size:11px;color:var(--muted);line-height:1.6}
.scene-hero .sh-side{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:5px}

/* 多画面墙（12×6 逻辑网格，slot 用 grid-column / grid-row 定位） */
.wall-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}
.wall-cell .wc-src{font-size:11px;color:var(--text2);font-weight:600;text-align:center;line-height:1.35;padding:0 4px}
.wall-cell .wc-eng-tag{position:absolute;right:7px;bottom:6px}
.wall-cell.main{background:linear-gradient(145deg,#0C2238,#071321)}

/* 录播 / 示教 */
.live-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:5px;font-size:10.5px;font-weight:700;background:rgba(255,92,108,.10);color:var(--red);border:1px solid rgba(255,92,108,.28)}
.live-badge i{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
.teach-stat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.teach-stat>div{background:var(--panel2);border:1px solid var(--stroke);border-radius:var(--radius-sm);padding:11px 13px}
.teach-stat small{display:block;font-size:10px;color:var(--muted)}
.teach-stat b{display:block;font-family:var(--mono);font-size:17px;margin-top:4px;font-weight:600}
@media(max-width:900px){.teach-stat{grid-template-columns:repeat(2,1fr)}}

/* 兼容性提示 / 工程备注 */
.compat-note{display:flex;gap:11px;padding:12px 14px;border-radius:var(--radius-sm);background:rgba(255,181,71,.07);border:1px solid rgba(255,181,71,.22);font-size:11px;line-height:1.8;color:var(--text2)}
.compat-note svg{width:16px;height:16px;color:var(--amber);flex:none;margin-top:2px}
.compat-note b{color:var(--amber)}
.engine-note{font-size:10.5px;color:var(--muted);line-height:1.75}

/* 告警 */
.alert-card{display:flex;gap:12px;padding:13px 14px;border:1px solid var(--stroke);border-radius:var(--radius-sm);background:var(--panel2);margin-bottom:10px}
.alert-card.acked{opacity:.62}
.alert-lv{width:34px;height:34px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center}
.alert-lv.warn{background:rgba(255,181,71,.12);color:var(--amber)}
.alert-lv.info{background:var(--accent-soft);color:var(--cyan)}
.alert-lv.ok{background:rgba(57,217,138,.10);color:var(--green)}
.alert-lv.err{background:rgba(255,92,108,.10);color:var(--red)}
.alert-lv svg{width:17px;height:17px}
.alert-main{flex:1;min-width:0}
.alert-main b{font-size:12.5px;display:block}
.alert-main p{margin:4px 0 0;font-size:11px;color:var(--muted);line-height:1.7}
.alert-meta{display:flex;gap:10px;margin-top:7px;font-size:10px;color:var(--faint);font-family:var(--mono);flex-wrap:wrap}

/* 设置：契约表 */
.api-method{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--cyan);background:var(--accent-soft);border-radius:4px;padding:2px 6px}
.api-method.post{color:var(--violet);background:var(--violet-soft)}
.api-path{font-family:var(--mono);font-size:11px;color:var(--text)}
.about-line{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--stroke2);font-size:11.5px}
.about-line:last-child{border-bottom:0}
.about-line span{color:var(--muted);width:88px;flex:none}
.about-line b{font-weight:500;color:var(--text2)}

/* 侧栏分组小标 */
.nav-badge{color:var(--amber) !important}

/* ---------------- 多画面布局 · 自定义开窗编辑器 ---------------- */
.custom-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;border:1px solid var(--stroke);border-radius:var(--radius-sm);background:var(--panel2)}
.custom-tools .input{height:28px;padding:0 8px;font-size:11.5px;width:auto;min-width:128px}
.custom-tools .ct-label{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.custom-tools .ct-label svg{width:13px;height:13px;color:var(--cyan)}
.custom-tools .ct-sep{width:1px;height:20px;background:var(--stroke)}
.wg-cells{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:8px;cursor:crosshair}
.wg-cell{border:1px dashed var(--stroke);border-radius:4px;background:rgba(53,200,255,.012);transition:background .12s}
.wg-cell:hover{background:var(--accent-soft);border-color:var(--cyan)}
.wg-ghost{position:absolute;z-index:3;display:none;align-items:center;justify-content:center;pointer-events:none;border:2px dashed var(--cyan);border-radius:6px;background:var(--accent-soft);color:var(--cyan);font-family:var(--mono);font-size:11px}
.wall-grid.editing{user-select:none}
.wall-grid.editing .wall-cell{z-index:2}
.wall-grid.editing .wall-cell small{display:none}
.wall-cell.editable{cursor:move;user-select:none}
.wall-cell.selected{outline:2px solid var(--cyan);outline-offset:1px;box-shadow:0 0 0 4px var(--accent-soft)}
.wall-cell .wc-geom{position:absolute;left:8px;top:22px;font-size:9px;font-family:var(--mono);color:var(--cyan);opacity:.9}
.wall-cell .wc-del{position:absolute;right:6px;top:22px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:5px;color:var(--muted);background:var(--panel3);border:1px solid var(--stroke);z-index:4}
.wall-cell .wc-del:hover{color:var(--red);border-color:var(--red)}
.wall-cell .wc-del svg{width:12px;height:12px;opacity:1}
.wall-cell .wc-resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:5;opacity:.7;background:linear-gradient(135deg,transparent 46%,var(--cyan) 48%,transparent 54%,transparent 64%,var(--cyan) 66%,transparent 72%)}
.wall-cell .wc-resize:hover{opacity:1}

/* ---------------- 术式预案库 · 按科室扩展 ---------------- */
/* --tone 由各科室以 style="--tone:var(--cyan)" 注入，仅允许设计令牌白名单 */
.dept-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dept-tab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--stroke);background:var(--panel2);color:var(--text2);font-size:11.5px;transition:.18s}
.dept-tab svg{width:13px;height:13px;color:var(--tone,var(--cyan))}
.dept-tab b{font-weight:600}
.dept-tab .dt-count{font-family:var(--mono);font-size:10px;color:var(--faint);background:var(--panel3);border-radius:4px;padding:1px 5px}
.dept-tab:hover{border-color:var(--tone,var(--cyan));color:var(--text)}
.dept-tab.active{color:var(--text);background:var(--panel3);border-color:var(--tone,var(--cyan));box-shadow:inset 0 0 0 1px var(--tone,var(--cyan))}
.dept-tab.active .dt-count{color:var(--tone,var(--cyan))}

.scene-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--stroke2)}
.scene-toolbar .segmented{flex:none}
.scene-toolbar .segmented button{height:25px;padding:0 10px;font-size:11px}
.search-box{position:relative;display:flex;align-items:center;min-width:210px;flex:0 1 290px}
.search-box svg{position:absolute;left:10px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.search-box .input{height:30px;padding-left:32px;font-size:11.5px}
.scene-hint{display:flex;gap:7px;align-items:flex-start;margin-top:11px;font-size:10.5px;color:var(--muted);line-height:1.75}
.scene-hint svg{width:13px;height:13px;color:var(--cyan);flex:none;margin-top:2px}

.dept-section{margin-bottom:20px;padding-left:12px;border-left:2px solid var(--tone,var(--cyan))}
.dept-section:last-child{margin-bottom:0}
.dept-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.dept-head .dh-bar{width:3px;height:17px;border-radius:2px;background:var(--tone,var(--cyan));flex:none}
.dept-head svg{width:15px;height:15px;color:var(--tone,var(--cyan))}
.dept-head b{font-size:12.5px}
.dept-head .dh-count{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--tone,var(--cyan));border:1px solid var(--stroke);border-radius:5px;padding:2px 8px}

.sc-card.is-custom{border-style:dashed;border-color:rgba(147,129,255,.34)}
.sc-card.is-custom.active{border-style:solid;border-color:var(--cyan)}
.sc-thumb-dept{position:absolute;left:14px;top:12px;font-size:10px;font-weight:600;color:#DCEBFF;background:rgba(3,7,15,.82);border:1px solid var(--tone,var(--cyan));border-radius:4px;padding:2px 7px}
.sc-badge-custom{position:absolute;right:14px;top:12px;display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#B9AEFF;background:rgba(3,7,15,.82);border:1px solid rgba(147,129,255,.45);border-radius:4px;padding:2px 7px}
.sc-badge-custom svg{width:11px;height:11px}
.sc-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.sc-tags span{font-size:10px;color:var(--muted);background:var(--panel3);border:1px solid var(--stroke2);border-radius:4px;padding:2px 6px}
.sc-actions{flex-wrap:wrap;gap:6px}
.sc-actions .btn{flex:1 1 56px}

/* 预案编辑器：复选矩阵 */
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.check{display:flex;align-items:center;gap:7px;min-width:0;padding:6px 9px;border:1px solid var(--stroke);border-radius:6px;background:var(--panel2);font-size:11px;color:var(--text2);cursor:pointer;transition:.15s}
.check:hover{border-color:var(--cyan)}
.check input{accent-color:var(--cyan);width:13px;height:13px;flex:none;margin:0}
.check span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb8{margin-bottom:8px}
.drawer .form-grid{grid-template-columns:1fr;gap:12px}
.drawer .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){
  .check-grid,.drawer .check-grid{grid-template-columns:1fr}
  .search-box{flex:1 1 100%}
  .dept-head .tiny{display:none}
}
@media(max-width:1100px){.custom-tools{gap:7px}.custom-tools .ct-sep{display:none}}

/* ===================================================================
   语言切换器 (i18n) · 国旗 · RTL
   =================================================================== */
.lang-wrap{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 9px;border-radius:7px;border:1px solid var(--stroke);background:var(--panel);color:var(--text2);font-size:11px;transition:.18s;white-space:nowrap}
.lang-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.lang-btn .lang-caret{width:11px;height:11px;color:var(--muted);transform:rotate(90deg)}
.lang-btn #lang-current{font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--text)}
.lang-flag{display:inline-flex;align-items:center;justify-content:center;width:22px;height:16px;flex:none}
.lang-flag svg{width:22px;height:16px;display:block;border-radius:2px;border:1px solid rgba(128,150,180,.42);background:#fff}
.lang-flag .flag-globe{width:15px;height:15px;border-radius:50%;border:1px solid var(--stroke);background:var(--accent-soft);color:var(--cyan);padding:1.5px}
.lang-menu{position:absolute;right:0;top:calc(100% + 9px);width:268px;max-height:min(560px,calc(100vh - 96px));overflow-y:auto;padding:7px;background:var(--panel);border:1px solid var(--stroke);border-radius:10px;box-shadow:var(--shadow);z-index:80}
.lang-menu::before{content:"";position:absolute;top:-5px;right:18px;width:9px;height:9px;transform:rotate(45deg);background:var(--panel);border-left:1px solid var(--stroke);border-top:1px solid var(--stroke)}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border-radius:7px;color:var(--text2);text-align:left;transition:.15s}
.lang-opt:hover{background:var(--panel3);color:var(--text)}
.lang-opt.active{background:var(--accent-soft);color:var(--cyan)}
.lang-opt-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.lang-opt-txt b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-opt-txt small{font-size:10px;color:var(--muted);margin-top:2px}
.lang-opt-tick{color:var(--cyan);display:flex}
.lang-opt-tick svg{width:14px;height:14px}
.lang-sep{height:1px;background:var(--stroke2);margin:6px 4px}

/* 阿拉伯语 RTL：正文随向，技术组件锁 LTR */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .view-wrap{direction:rtl}
html[dir="rtl"] .topbar,html[dir="rtl"] .statusbar,html[dir="rtl"] .sidebar,html[dir="rtl"] .login-box{direction:ltr}
html[dir="rtl"] .top-title,html[dir="rtl"] .side-product,html[dir="rtl"] .side-health,html[dir="rtl"] .side-user,html[dir="rtl"] .login-brand{text-align:left}
html[dir="rtl"] .mono,html[dir="rtl"] table,html[dir="rtl"] .crosspoint,html[dir="rtl"] .rt-grid,html[dir="rtl"] .matrix,html[dir="rtl"] .wall-grid,html[dir="rtl"] .wg-ghost,html[dir="rtl"] .kpi-val,html[dir="rtl"] .kpi-spark,html[dir="rtl"] .bw-strip,html[dir="rtl"] .chart-box,html[dir="rtl"] .sc-svg,html[dir="rtl"] .segmented,html[dir="rtl"] .top-clock,html[dir="rtl"] .gauge,html[dir="rtl"] .api-path,html[dir="rtl"] .eng,html[dir="rtl"] .top-chip,html[dir="rtl"] .mode-badge,html[dir="rtl"] .lang-btn,html[dir="rtl"] .side-health-row,html[dir="rtl"] .or-room .mono,html[dir="rtl"] .cp-dot{direction:ltr}
html[dir="rtl"] .drawer{right:auto;left:0;border-left:0;border-right:1px solid var(--stroke);animation:slidein-rtl .24s ease both}
@keyframes slidein-rtl{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
html[dir="rtl"] .lang-menu{right:auto;left:0}
html[dir="rtl"] .lang-menu::before{right:auto;left:18px;border-left:0;border-right:1px solid var(--stroke);border-top:1px solid var(--stroke);border-left:none}
html[dir="rtl"] .lang-opt{text-align:right;flex-direction:row-reverse}
html[dir="rtl"] .lang-opt-tick{margin-left:0;margin-right:auto}
html[dir="rtl"] .toast{direction:rtl;text-align:right}
@media(max-width:900px){ .lang-menu{max-height:min(440px,calc(100vh - 90px))} }
@media(max-width:1080px){ .lang-btn #lang-current{display:none} }