/* PVE Panel 的 VNC 控制台页面（TECH-DESIGN 8.2，照 share/P2-VNC-PREVIEW.html）。页面由代理机的 nginx 提供，
   CSP 只允许本站的脚本、样式，所以字体用系统自带的。 */
:root{--vc-bg:#111316;--vc-bar:#1c1f24;--vc-line:#2c3139;--vc-t1:#eef1f5;--vc-t2:#aeb6c1;--vc-t3:#7d8693;--vc-good:#3ecf8e;--vc-warn:#f2b441;--vc-crit:#ff6b5e;--vc-acc:#4ea1ff;
  --vc-font:"IBM Plex Sans","Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;--vc-mono:"JetBrains Mono","DejaVu Sans Mono",Consolas,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--vc-bg);color:var(--vc-t1);font:14px/1.45 var(--vc-font);overflow:hidden}
button{font:inherit}
.vc{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--vc-bg)}
.vc-bar{flex:none;display:flex;align-items:center;gap:10px;height:48px;padding:0 10px 0 14px;background:var(--vc-bar);border-bottom:1px solid var(--vc-line);min-width:0}
.vc-name{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto}
.vc-name .os{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:#3a414b;color:#fff;font:700 11px/1 var(--vc-font)}
.vc-name .os svg{width:16px;height:16px}
.vc-name b{font:600 13.5px/1.2 var(--vc-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vc-st{flex:none;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:12px;font-weight:600;background:#262a31;color:var(--vc-t2);white-space:nowrap}
.vc-st i{width:7px;height:7px;border-radius:50%;background:var(--vc-t3)}
.vc-st.is-on{color:var(--vc-good);background:rgba(62,207,142,.1)}.vc-st.is-on i{background:var(--vc-good);box-shadow:0 0 0 3px rgba(62,207,142,.18)}
.vc-st.is-wait{color:var(--vc-warn);background:rgba(242,180,65,.1)}.vc-st.is-wait i{background:var(--vc-warn)}
.vc-st.is-off{color:var(--vc-crit);background:rgba(255,107,94,.1)}.vc-st.is-off i{background:var(--vc-crit)}
.vc-time{flex:none;font:12px/1 var(--vc-mono);color:var(--vc-t3);white-space:nowrap}
.vc-acts{flex:none;display:flex;align-items:center;gap:4px}
.vc-btn{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--vc-t2);font-size:13px;cursor:pointer;white-space:nowrap}
.vc-btn:hover{background:#2a2f37;color:var(--vc-t1)}
.vc-btn:focus-visible{outline:2px solid var(--vc-acc);outline-offset:1px}
.vc-btn[disabled]{opacity:.4;cursor:not-allowed;background:transparent;color:var(--vc-t2)}
.vc-btn svg{width:16px;height:16px;flex:none}
.vc-btn.is-danger:hover{color:#ff8a80;background:rgba(255,107,94,.12)}
.vc-btn.is-primary{background:var(--vc-acc);color:#06121f;font-weight:600}
.vc-btn.is-primary:hover{background:#6db2ff;color:#06121f}
.vc-btn.is-line{border-color:#3a414b;color:var(--vc-t1)}
.vc-sep{width:1px;height:20px;background:var(--vc-line);margin:0 4px}
.vc-menu{position:relative}
.vc-drop{position:absolute;right:0;top:38px;z-index:5;min-width:190px;padding:5px;border-radius:9px;background:#23272e;border:1px solid var(--vc-line);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.vc-drop[hidden]{display:none}
.vc-drop button{display:flex;width:100%;align-items:center;gap:8px;height:32px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--vc-t1);font-size:13px;cursor:pointer;text-align:left}
.vc-drop button:hover{background:#2e343c}
.vc-drop button .ck{width:14px;color:var(--vc-acc);display:inline-flex}
.vc-main{position:relative;flex:1;min-height:0;background:#000}
/* noVNC 在这里面放它自己的一层（带滚动条）和画布 */
.vc-screen{position:absolute;inset:0}
.vc-over{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:rgba(10,12,15,.72);backdrop-filter:blur(2px)}
.vc-over[hidden]{display:none}
.vc-card{width:min(440px,100%);padding:22px 22px 18px;border-radius:14px;background:#1e2228;border:1px solid var(--vc-line);box-shadow:0 20px 50px rgba(0,0,0,.5);text-align:center}
.vc-card .ico{width:48px;height:48px;margin:0 auto 12px;border-radius:12px;display:grid;place-items:center;background:#262b33;color:var(--vc-t2)}
.vc-card .ico svg{width:24px;height:24px}
.vc-card .ico.t-crit{color:var(--vc-crit);background:rgba(255,107,94,.12)}
.vc-card .ico.t-warn{color:var(--vc-warn);background:rgba(242,180,65,.12)}
.vc-card h2{margin:0 0 6px;font-size:17px;font-weight:600}
.vc-card p{margin:0 0 14px;color:var(--vc-t2);font-size:13.5px}
.vc-card .code{display:inline-block;margin:0 0 14px;padding:2px 8px;border-radius:5px;background:#262b33;color:var(--vc-t3);font:12px/1.6 var(--vc-mono)}
.vc-card .row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.vc-steps{display:grid;gap:6px;margin:4px auto 14px;width:max-content;max-width:100%;text-align:left;font-size:13px;color:var(--vc-t3)}
.vc-steps div{display:flex;align-items:center;gap:8px}
.vc-steps svg{width:14px;height:14px;flex:none}
.vc-steps .ok{color:var(--vc-good)}.vc-steps .run{color:var(--vc-t1)}
.vc-spin{width:14px;height:14px;border-radius:50%;border:2px solid #3b424c;border-top-color:var(--vc-acc);animation:vcspin .8s linear infinite;flex:none}
.vc-card .vc-spin.big{width:30px;height:30px;border-width:3px;margin:4px auto 14px}
@keyframes vcspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vc-spin{animation-duration:2.4s}}
.vc-dlg{width:min(520px,100%);text-align:left}
.vc-dlg h2{font-size:16px}
.vc-dlg textarea{width:100%;height:150px;resize:vertical;border-radius:9px;border:1px solid #3a414b;background:#15181c;color:var(--vc-t1);padding:10px;font:13px/1.45 var(--vc-mono);outline:none}
.vc-dlg textarea:focus{border-color:var(--vc-acc)}
.vc-dlg .hint{margin:8px 0 14px;font-size:12.5px;color:var(--vc-t3)}
.vc-dlg .hint.is-bad{color:var(--vc-crit)}
.vc-dlg .row{justify-content:flex-end}
.vc-tip{position:absolute;z-index:4;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:9px;background:rgba(30,34,40,.92);border:1px solid var(--vc-line);color:var(--vc-t2);font-size:12.5px;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.vc-tip[hidden]{display:none}
.vc-tip kbd{font:11.5px/1 var(--vc-mono);padding:2px 5px;border-radius:4px;background:#2c323a;color:var(--vc-t1)}
.vc-tip button{border:0;background:transparent;color:var(--vc-t3);cursor:pointer;font-size:16px;line-height:1;padding:0 0 0 4px}
.vc-toast{position:absolute;z-index:6;right:14px;top:12px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;background:#23272e;border:1px solid var(--vc-line);color:var(--vc-t1);font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.vc-toast[hidden]{display:none}
.vc-toast button{border:0;background:transparent;color:var(--vc-t3);cursor:pointer;font-size:16px;line-height:1;padding:0}
.vc-noscript{position:fixed;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:var(--vc-t2)}
/* 窄屏（手机）：按钮只留图标，时间收起来 */
@media (max-width:760px){.vc-btn .t{display:none}.vc-btn{padding:0 8px}.vc-time{display:none}.vc-sep{display:none}}
@media (max-width:420px){.vc-name b{font-size:12.5px}.vc-st .t{display:none}.vc-st{padding:0 7px}.vc-bar{gap:6px;padding:0 6px 0 10px}}