/* =====================================================
 * simhub · 前台样式（源自 zp_browser_v2 + 顶栏扩展）
 * 屏幕区变量 --scr-l/t/w/h 由 front.php 按项目内联注入
 * ===================================================== */

*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;}
body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  background:radial-gradient(ellipse 62% 46% at 50% 36%, #223349 0%, #131c2b 46%, #0a0e16 78%, #06080d 100%);
  background-attachment:fixed;}
body::before{content:'';position:fixed;left:0;right:0;bottom:0;height:26vh;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(58,102,158,0) 0%, rgba(58,102,158,.10) 55%, rgba(70,120,180,.16) 100%);}
body::after{content:'';position:fixed;left:0;top:0;right:0;bottom:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%);}

/* ---------------- 顶部导航 header ---------------- */
:root{--head-h:56px;}
#topbar{position:fixed;left:0;right:0;top:0;height:var(--head-h);z-index:50;
  display:flex;align-items:center;gap:14px;padding:0 18px;
  background:rgba(10,15,24,.82);border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 22px rgba(0,0,0,.35);}
#topbar .logo{display:flex;align-items:center;gap:9px;color:#eef4fb;font-weight:700;font-size:15px;letter-spacing:1px;white-space:nowrap;}
#topbar .logo .dot{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0077BE,#7FE3FF);
  box-shadow:0 0 12px rgba(127,227,255,.8);}
#topbar .logo small{color:#8fa3ba;font-weight:400;font-size:11px;}
#topbar .tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;}
#topbar .tabs::-webkit-scrollbar{display:none;}
#topbar .tab{padding:7px 15px;border-radius:16px;font-size:13px;color:#a9bccf;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;text-decoration:none;transition:.15s;
  display:flex;align-items:center;gap:6px;}
#topbar .tab:hover{color:#fff;background:rgba(255,255,255,.08);}
#topbar .tab.on{color:#fff;font-weight:600;background:linear-gradient(135deg,rgba(0,119,190,.55),rgba(0,119,190,.25));
  border-color:rgba(127,227,255,.45);box-shadow:0 0 14px rgba(0,119,190,.35);}
#topbar .tab .cnt{font-size:10px;color:#8fa3ba;background:rgba(255,255,255,.07);border-radius:8px;padding:1px 6px;}
#topbar .tab.on .cnt{color:#cfeeff;background:rgba(255,255,255,.12);}
#topbar .spacer{flex:1;}
#topbar .acts{display:flex;gap:8px;align-items:center;white-space:nowrap;}
#topbar .btn{padding:7px 14px;border-radius:14px;font-size:12.5px;cursor:pointer;text-decoration:none;
  border:1px solid rgba(255,255,255,.18);color:#d9e6f3;background:rgba(255,255,255,.05);transition:.15s;
  display:inline-flex;align-items:center;gap:5px;}
#topbar .btn:hover{background:rgba(0,119,190,.75);border-color:#7FE3FF;color:#fff;}
#topbar .btn.primary{background:linear-gradient(135deg,#0077BE,#005f96);border-color:rgba(127,227,255,.4);color:#fff;font-weight:600;}
#topbar .btn.primary:hover{background:linear-gradient(135deg,#0a8fd6,#0a6bad);}
#topbar .btn[disabled],#topbar .btn.is-off{opacity:.38;cursor:not-allowed;pointer-events:none;}
@media (max-width:860px){
  :root{--head-h:50px;}
  #topbar{gap:8px;padding:0 10px;}
  #topbar .logo small{display:none;}
  #topbar .btn .txt{display:none;}
}

/* 铺满演示模式：隐藏顶栏，画面全屏 */
body.demo #topbar{display:none;}
body.demo #frame{top:0 !important;}

/* ---------------- 设备舞台 ---------------- */
#frame{position:absolute;left:0;right:0;top:var(--head-h);bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;}
#stage{position:relative;background:transparent;filter:drop-shadow(0 18px 46px rgba(0,0,0,.55));}
#devImg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;transition:opacity .4s ease;}

#screen{position:absolute;left:var(--scr-l);top:var(--scr-t);width:var(--scr-w);height:var(--scr-h);
  overflow:hidden;background:#000;border-radius:1.8% 1.8% 1.8% 1.8% / 3.2% 3.2% 3.2% 3.2%;
  box-shadow:0 0 2px 3px rgba(0,0,0,.85) inset;transition:border-radius .3s;}
#screen img.view{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;
  animation:fadeIn .18s ease-out;}
@keyframes fadeIn{from{opacity:.4;transform:scale(.995);}to{opacity:1;transform:none;}}

body.showoutline #screen{outline:2px dashed rgba(255,80,80,.95);outline-offset:-1px;z-index:40;}

body.demo #devImg{opacity:0;}
body.demo #stage{filter:none;}
body.demo #screen{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100vw, calc(100vh*16/9));height:min(100vh, calc(100vw*9/16));
  border-radius:8px;box-shadow:0 0 0 1px rgba(127,227,255,.14), 0 8px 60px 12px rgba(0,90,170,.35), 0 0 120px rgba(0,140,255,.12);}

/* ---------------- 热区 ---------------- */
.hot{position:absolute;border-radius:5px;cursor:pointer;z-index:5;
  transition:background .12s,border-color .12s,box-shadow .12s;}
.hot:hover{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 2px rgba(0,119,190,.65) inset, 0 4px 14px rgba(0,0,0,.4);}
.hot:active{background:rgba(0,119,190,.32);}
.hot::after{content:'';position:absolute;left:6%;top:5%;width:88%;height:90%;border-radius:4px;}
.hot.gn{border-radius:8px;}
.hot.gn:hover{background:rgba(127,227,255,.22);}

body.debug .hot{outline:1px dashed rgba(255,70,70,.85);background:rgba(255,70,70,.06);}
body.debug .hot.gn{outline:1px dashed rgba(80,200,120,.85);background:rgba(80,200,120,.05);}
body.debug .hot::before{content:attr(data-tip);position:absolute;left:2%;top:-3px;transform:translateY(-100%);
  font-size:9px;line-height:1.4;color:#fff;background:rgba(200,30,30,.9);padding:1px 5px;border-radius:3px;
  white-space:nowrap;z-index:9;}

/* ---------------- 虚拟遥控器 / 面包屑 / 翻页器 ---------------- */
#rc{position:fixed;left:18px;bottom:16px;z-index:60;display:flex;gap:9px;align-items:center;
  background:rgba(13,20,32,.78);border:1px solid rgba(255,255,255,.16);border-radius:22px;
  padding:9px 13px;backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.45);}
#rc .k{min-width:64px;text-align:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  color:#eef4fb;border-radius:16px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;
  transition:.14s;user-select:none;}
#rc .k:hover{background:rgba(0,119,190,.85);border-color:#7FE3FF;}
#rc .k:active{transform:scale(.94);}
#rc .ttl{color:#8fa3ba;font-size:11px;padding:0 4px 0 2px;line-height:1.3;}

#crumb{position:fixed;right:18px;bottom:16px;z-index:60;display:none;max-width:44vw;
  background:rgba(13,20,32,.68);border:1px solid rgba(255,255,255,.14);color:#cfe3f5;
  border-radius:18px;padding:7px 15px;font-size:12px;backdrop-filter:blur(6px);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
#crumb.show{display:block;}
#crumb b{color:#7FE3FF;font-weight:600;}

#pager{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:none;gap:9px;align-items:center;}
#pager.show{display:flex;}
#pager button{background:rgba(13,20,32,.82);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:20px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);}
#pager button:hover{background:rgba(0,119,190,.85);}
#pager .pi{color:#e8f0fa;font-size:12px;background:rgba(13,20,32,.7);border-radius:14px;padding:7px 14px;}

.scrollBtn{position:absolute;z-index:8;left:83.5%;width:13%;border-radius:8px;text-align:center;
  background:rgba(10,16,26,.55);color:#9fc3e2;font-size:11px;font-weight:700;letter-spacing:1px;
  padding:1.6% 0;cursor:pointer;border:1px solid rgba(159,195,226,.35);user-select:none;}
.scrollBtn:hover{background:rgba(0,119,190,.75);color:#fff;}

#toast{position:fixed;left:50%;bottom:13%;transform:translateX(-50%) translateY(8px);z-index:70;
  background:rgba(13,20,32,.88);color:#eaf3fd;border:1px solid rgba(127,227,255,.4);
  border-radius:22px;padding:10px 26px;font-size:14px;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;backdrop-filter:blur(6px);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast b{color:#7FE3FF;}

#bootTip{position:fixed;left:50%;top:calc(var(--head-h) + 12px);transform:translateX(-50%);z-index:80;
  background:rgba(13,20,32,.82);color:#fff;border-radius:22px;padding:9px 22px;font-size:13px;
  display:flex;gap:16px;align-items:center;transition:opacity .6s;backdrop-filter:blur(6px);white-space:nowrap;}
#bootTip.hide{opacity:0;pointer-events:none;}
#bootTip b{color:#7FE3FF;}
@media (max-width:860px){#bootTip{display:none;}}

#skipTip{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:9;display:none;
  background:rgba(13,20,32,.6);color:#cfe3f5;border:1px solid rgba(255,255,255,.2);
  padding:5px 18px;border-radius:16px;font-size:12px;backdrop-filter:blur(3px);}
#skipTip.show{display:block;}

/* 页脚备案（iswok.cn 规范） */
#footer{position:fixed;right:14px;bottom:2px;z-index:45;font-size:10px;color:rgba(143,163,186,.5);}
#footer a{color:rgba(143,163,186,.6);text-decoration:none;}
#footer a:hover{color:#7FE3FF;}
body.demo #footer{display:none;}