/* ============================================================
   mask-overlay.css — 稳定版「更新遮挡」弹窗（1:1 复刻 KK 原版）
   仅作用于 .mko-* ，不影响面板其它皮肤
   ============================================================ */
.mko-mask{position:fixed;inset:0;z-index:2147482400;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);}
.mko-modal{display:flex;align-items:stretch;background:#0f1729;border:1px solid #22314d;border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(3,10,26,.85),0 0 0 1px rgba(80,140,255,.06);width:min(920px,94vw);height:min(700px,88vh);overflow:hidden;box-sizing:border-box}
.mko-left{flex:1 1 auto;min-width:0;height:100%;padding:20px;overflow-y:auto;box-sizing:border-box;display:flex;flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.mko-left::-webkit-scrollbar{width:8px}
.mko-left::-webkit-scrollbar-thumb{background:#22314d;border-radius:4px}
.mko-title{margin:0 0 12px;color:#e6eefc;font-size:16px;font-weight:600;line-height:1.4}
.mko-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.mko-tab{padding:4px 12px;border-radius:8px;font-size:12px;line-height:1.5;cursor:pointer;font-family:inherit;
  background:#0b1424;color:#8fa2c0;border:1px solid #22314d;transition:background .15s,color .15s}
.mko-tab:hover{color:#e6eefc}
.mko-tab.on{background:linear-gradient(180deg,#3b82f6,#2f6fed);color:#fff;border-color:#3d73e0;box-shadow:0 4px 12px -8px rgba(59,130,246,.9)}
.mko-form{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.mko-field{display:flex;flex-direction:column}
.mko-lb{display:block;color:#8fa2c0;font-size:12px;margin-bottom:4px;line-height:1.5}
.mko-mask .mko-in,.mko-mask .mko-sel,.mko-mask .mko-ta{width:100%;padding:8px 12px;border-radius:8px;
  border:1px solid #22314d !important;background:#0b1424 !important;background-color:#0b1424 !important;
  color:#e6eefc !important;-webkit-text-fill-color:#e6eefc;font-size:14px;line-height:1.5;outline:none;
  box-sizing:border-box;font-family:inherit;box-shadow:none !important}
.mko-mask .mko-in::placeholder,.mko-mask .mko-ta::placeholder{color:#5b6c8a !important;-webkit-text-fill-color:#5b6c8a}
.mko-mask .mko-in:focus,.mko-mask .mko-sel:focus,.mko-mask .mko-ta:focus{border-color:#6ea8ff !important}
.mko-ta{min-height:72px;resize:vertical}
.mko-sel{appearance:auto}
.mko-row{display:flex;gap:8px;align-items:center}
.mko-seg{display:flex;gap:8px}
.mko-sbtn{padding:4px 12px;border-radius:8px;font-size:12px;line-height:1.5;cursor:pointer;font-family:inherit;
  background:#0b1424;color:#8fa2c0;border:1px solid #22314d}
.mko-sbtn.on{background:linear-gradient(180deg,#3b82f6,#2f6fed);color:#fff;border-color:#3d73e0}
.mko-btn{padding:4px 12px;border-radius:8px;font-size:12px;line-height:1.5;cursor:pointer;font-family:inherit;border:1px solid transparent}
.mko-green{background:linear-gradient(180deg,#3b82f6,#2f6fed);color:#fff;border-color:#3d73e0;box-shadow:0 8px 18px -12px rgba(59,130,246,.95)}
.mko-green:hover{background:#3b7ff5}
.mko-green:disabled{opacity:.6;cursor:default}
.mko-ghost{background:#0b1424;color:#e6eefc;border-color:#22314d}
.mko-plain{background:transparent;color:#8fa2c0;border-color:transparent}
.mko-orange{background:transparent;color:#f0a24b;border-color:rgba(240,136,62,.4)}
.mko-orange:hover{background:rgba(240,136,62,.1)}
.mko-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:2px}
.mko-hint{color:#8fa2c0;font-size:12px;line-height:1.5;margin-top:6px}
.mko-vlist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.mko-vitem{padding:8px;border-radius:8px;border:1px solid #22314d;background:#0b1424}
.mko-vtext{color:#e6eefc;font-size:12px;line-height:1.5;word-break:break-all}
.mko-vbtns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.mko-vb{padding:4px 8px;border-radius:4px;font-size:12px;line-height:1.4;cursor:pointer;border:none;font-family:inherit}
.mko-vb-hear{background:#16233a;color:#e6eefc}
.mko-vb-play{background:#2f6fed;color:#fff}
.mko-vb-play.on{background:#d9534f}
.mko-vb-del{background:transparent;color:#8fa2c0}
.mko-url{color:#8fa2c0;font-size:11px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mko-right{flex:0 0 320px;width:320px;height:100%;background:#0b1424;border-left:1px solid #22314d;
  display:flex;align-items:center;justify-content:center}
.mko-phone{position:relative;width:270px;height:585px;flex:0 0 auto;border-radius:28px;border:8px solid #0a0f18 !important;
  box-sizing:border-box;overflow:hidden;background:#000}
.mko-screen{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;padding:28px 16px;box-sizing:border-box;overflow:hidden;text-align:center}
.mko-slot{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;text-align:center;box-sizing:border-box}
.mko-pv-title{color:#fff;font-size:15px;font-weight:600;text-align:center;line-height:1.35}
.mko-pv-sub{color:#c3d0e6;font-size:12px;text-align:center;line-height:1.4;margin-top:6px}
.mko-pv-img{width:96px;height:96px;object-fit:contain}
.mko-pv-svg{width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.mko-pv-svg svg{width:96px;height:96px}
/* 系统更新预览 */
.mko-up-title{color:#fff;font-size:14px;line-height:1.4}
.mko-up-sub{color:#93a4c0;font-size:12px;line-height:1.4}
.mko-up-bar{width:128px;height:2px;border-radius:4px;background:#4285f4;margin-top:4px}
.mko-up-pct{color:#fff;font-size:12px}
/* 人脸预览 */
.mko-face{position:relative;width:148px;height:148px}
.mko-face i{position:absolute;background:#39ff14;border-radius:1px}
.mko-face svg{position:absolute;left:31px;top:8px;width:86px;height:120px}
.mko-fc-title{color:#fff;font-size:14px;text-align:center}
.mko-fc-sub{color:#fff;font-size:12px;text-align:center}
/* 指纹预览 */
.mko-fp-title{color:#fff;font-size:15px;font-weight:600;margin-top:8px;text-align:center}
.mko-fp-sub{color:#c3d0e6;font-size:12px;text-align:center;line-height:1.4}
.mko-fp-line{height:1px;background:rgba(255,255,255,.28);width:72%;margin-top:10px}
.mko-fp-cancel{color:#fff;font-size:14px;padding:8px 0}
/* 语音预览 */
.mko-vo-text{color:#fff;font-size:15px;font-weight:600;text-align:center;line-height:1.4}
.mko-vo-sub{color:#c3d0e6;font-size:12px;text-align:center}
/* 面板按钮：完全沿用 .hb-act-btn 的皮肤（浅色/深色都由面板皮肤决定），
   只补最小必要约束，避免出现「灰掉/像禁用」的观感 */
.mko-act-btn{position:relative;z-index:1;pointer-events:auto;cursor:pointer}

.mko-act-btn svg{stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   浅色主题：面板没有 html.dark 时启用（与面板浅色皮肤同色系）
   手机预览区仍是黑屏，所以预览内文字颜色保持白色不动
   ============================================================ */
html:not(.dark) .mko-mask{background:rgba(15,23,42,.38)}
html:not(.dark) .mko-modal{background:#ffffff;border-color:#e2e8f4;
  box-shadow:0 30px 60px -24px rgba(15,23,42,.28),0 0 0 1px rgba(37,99,235,.05)}
html:not(.dark) .mko-left::-webkit-scrollbar-thumb{background:#dbe4f3}
html:not(.dark) .mko-title{color:#0f1a33}
html:not(.dark) .mko-tab{background:#f4f7fd;color:#64748b;border-color:#dfe8f6}
html:not(.dark) .mko-tab:hover{color:#1d4ed8;border-color:#bfd3ff;background:#eef5ff}
html:not(.dark) .mko-tab.on{background:linear-gradient(180deg,#3b82f6,#2f6fed);color:#fff;border-color:#3d73e0}
html:not(.dark) .mko-lb{color:#64748b}
html:not(.dark) .mko-mask .mko-in,html:not(.dark) .mko-mask .mko-sel,html:not(.dark) .mko-mask .mko-ta{
  background:#ffffff !important;background-color:#ffffff !important;border-color:#dfe8f6 !important;
  color:#0f1a33 !important;-webkit-text-fill-color:#0f1a33;box-shadow:0 1px 2px rgba(15,23,42,.04) !important}
html:not(.dark) .mko-mask .mko-in::placeholder,html:not(.dark) .mko-mask .mko-ta::placeholder{
  color:#9aa7bd !important;-webkit-text-fill-color:#9aa7bd}
html:not(.dark) .mko-mask .mko-in:focus,html:not(.dark) .mko-mask .mko-sel:focus,html:not(.dark) .mko-mask .mko-ta:focus{border-color:#3b82f6 !important}
html:not(.dark) .mko-sbtn{background:#f4f7fd;color:#64748b;border-color:#dfe8f6}
html:not(.dark) .mko-sbtn.on{background:linear-gradient(180deg,#3b82f6,#2f6fed);color:#fff;border-color:#3d73e0}
html:not(.dark) .mko-ghost{background:#f4f7fd;color:#334155;border-color:#dfe8f6}
html:not(.dark) .mko-ghost:hover{background:#eef5ff;border-color:#bfd3ff;color:#1d4ed8}
html:not(.dark) .mko-plain{color:#64748b}
html:not(.dark) .mko-hint{color:#64748b}
html:not(.dark) .mko-vitem{background:#f7faff;border-color:#e3eaf7}
html:not(.dark) .mko-vtext{color:#1f2a44}
html:not(.dark) .mko-vb-hear{background:#eaf1fb;color:#1f2a44}
html:not(.dark) .mko-vb-del{color:#64748b}
html:not(.dark) .mko-url{color:#7c8aa5}
html:not(.dark) .mko-right{background:#f4f7fd;border-left-color:#e6ecf7}
html:not(.dark) .mko-phone{border-color:#c9d4e6 !important;box-shadow:0 18px 36px -26px rgba(15,23,42,.55)}

@media (max-width:820px){
  .mko-modal{flex-direction:column;height:min(92vh,860px)}
  .mko-right{flex:0 0 300px;width:100%;border-left:0;border-top:1px solid #22314d}
  .mko-phone{transform:scale(.5);transform-origin:center}
}