/* 18M Viewer Immersive UI - V26.8.6
   目标：前台 Viewer 独立视觉体系，区别于后台 Ant Design。 */
:root{
  --m18vu-bg: rgba(7,12,23,.68);
  --m18vu-bg-strong: rgba(7,12,23,.82);
  --m18vu-card: rgba(12,18,32,.78);
  --m18vu-line: rgba(255,255,255,.16);
  --m18vu-line-2: rgba(90,205,255,.28);
  --m18vu-text: #eef7ff;
  --m18vu-sub: rgba(238,247,255,.68);
  --m18vu-blue: #3b82ff;
  --m18vu-cyan: #25d7ff;
  --m18vu-green: #55f2c7;
  --m18vu-purple: #8b5cf6;
  --m18vu-shadow: 0 22px 80px rgba(0,0,0,.34);
}

.m18-vu6-root,
.m18-vu6-root *{box-sizing:border-box;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;}

.m18-vu6-root{position:fixed;inset:0;z-index:9200;pointer-events:none;color:var(--m18vu-text);}
.m18-vu6-topbar{position:fixed;left:16px;right:16px;top:14px;height:54px;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 14px 0 16px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:linear-gradient(135deg,rgba(12,18,32,.82),rgba(8,13,24,.64));box-shadow:0 18px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.m18-vu6-brand{display:flex;align-items:center;gap:12px;min-width:0;}
.m18-vu6-logo{width:32px;height:32px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--m18vu-blue),var(--m18vu-cyan));box-shadow:0 10px 28px rgba(37,215,255,.24);font-weight:900;font-size:13px;letter-spacing:-.04em;color:#fff;}
.m18-vu6-title{min-width:0;}
.m18-vu6-title strong{display:block;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:18px;font-weight:900;letter-spacing:.01em;}
.m18-vu6-title span{display:block;margin-top:2px;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--m18vu-sub);font-size:12px;}
.m18-vu6-tools{display:flex;align-items:center;gap:8px;}
.m18-vu6-chip,.m18-vu6-iconbtn{height:34px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.07);color:var(--m18vu-text);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;font-size:13px;font-weight:800;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;}
.m18-vu6-iconbtn{width:36px;padding:0;font-size:16px;}
.m18-vu6-chip:hover,.m18-vu6-iconbtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(80,210,255,.36);}
.m18-vu6-chip.primary{border:0;background:linear-gradient(135deg,var(--m18vu-blue),var(--m18vu-cyan));box-shadow:0 12px 32px rgba(37,215,255,.22);color:white;}

.m18-vu6-dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);pointer-events:auto;display:flex;align-items:center;gap:8px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(135deg,rgba(10,15,28,.84),rgba(7,10,18,.72));box-shadow:var(--m18vu-shadow),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.m18-vu6-dock button{width:66px;height:58px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.07);color:var(--m18vu-text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:all .18s ease;}
.m18-vu6-dock button:hover,.m18-vu6-dock button.active{background:linear-gradient(135deg,rgba(59,130,255,.28),rgba(37,215,255,.16));border-color:rgba(83,214,255,.34);transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.18);}
.m18-vu6-dock i{font-style:normal;font-size:18px;line-height:18px;}
.m18-vu6-dock span{font-size:12px;font-weight:800;}

.m18-vu6-panel{position:fixed;right:18px;top:84px;width:min(390px,calc(100vw - 36px));max-height:calc(100vh - 178px);pointer-events:auto;border:1px solid var(--m18vu-line);border-radius:24px;background:linear-gradient(145deg,rgba(10,16,30,.88),rgba(6,10,18,.76));box-shadow:var(--m18vu-shadow),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);overflow:hidden;display:none;}
.m18-vu6-panel.show{display:block;animation:m18vuPanel .2s cubic-bezier(.2,.8,.2,1);}
@keyframes m18vuPanel{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.m18-vu6-panel-head{height:62px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.10);background:radial-gradient(circle at 20% 0,rgba(37,215,255,.18),transparent 34%);}
.m18-vu6-panel-head strong{font-size:16px;font-weight:900;}
.m18-vu6-panel-head small{display:block;margin-top:3px;color:var(--m18vu-sub);font-size:12px;}
.m18-vu6-close{width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;font-size:18px;}
.m18-vu6-panel-body{padding:14px;overflow:auto;max-height:calc(100vh - 240px);}
.m18-vu6-empty{padding:20px;border:1px dashed rgba(255,255,255,.16);border-radius:18px;color:var(--m18vu-sub);line-height:1.7;font-size:13px;background:rgba(255,255,255,.04);}
.m18-vu6-list{display:grid;gap:10px;}
.m18-vu6-item{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.06);padding:12px;cursor:pointer;transition:all .18s ease;}
.m18-vu6-item:hover{background:rgba(255,255,255,.10);border-color:rgba(64,200,255,.30);transform:translateY(-1px);}
.m18-vu6-item-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:900;font-size:14px;}
.m18-vu6-tag{flex:0 0 auto;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:900;color:#dff7ff;background:rgba(37,215,255,.13);border:1px solid rgba(37,215,255,.18);}
.m18-vu6-item p{margin:8px 0 0;color:var(--m18vu-sub);font-size:12px;line-height:1.65;}
.m18-vu6-scene-card{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;}
.m18-vu6-thumb{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(59,130,255,.36),rgba(37,215,255,.18));border:1px solid rgba(255,255,255,.12);font-weight:900;color:#fff;}
.m18-vu6-input{width:100%;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.07);color:var(--m18vu-text);padding:0 12px;outline:none;}
.m18-vu6-row{display:flex;gap:8px;margin-top:10px;}
.m18-vu6-row .m18-vu6-chip{flex:1;}
.m18-vu6-toast{position:fixed;left:50%;bottom:102px;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;z-index:9300;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(8,13,24,.80);color:#fff;padding:10px 14px;font-size:13px;font-weight:800;box-shadow:0 16px 44px rgba(0,0,0,.24);backdrop-filter:blur(16px);transition:all .2s ease;}
.m18-vu6-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* 接管旧版热点面板入口，避免界面重复；原生热点本体保留 */
.m18-vu6-active .m18-vh-fab{display:none!important;}
.m18-vu6-active .m18-vh-panel{display:none!important;}

/* 原生 krpano 热点视觉统一：小一点、高级一点，避免像调试标签 */
.m18-kh-dot{height:31px!important;padding:0 10px!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(53,132,255,.95),rgba(37,215,255,.88))!important;border:1px solid rgba(255,255,255,.30)!important;color:white!important;box-shadow:0 12px 30px rgba(0,0,0,.24),0 0 0 1px rgba(37,215,255,.10),inset 0 1px 0 rgba(255,255,255,.30)!important;font-size:12px!important;font-weight:900!important;letter-spacing:.01em!important;gap:7px!important;transition:transform .18s ease,filter .18s ease!important;}
.m18-kh-dot:hover{transform:scale(1.05);filter:brightness(1.08);}
.m18-kh-dot:before{width:16px!important;height:16px!important;border-radius:50%!important;background:radial-gradient(circle at 50% 50%,#fff 0 28%,rgba(255,255,255,.45) 30% 52%,transparent 54%)!important;box-shadow:0 0 0 5px rgba(255,255,255,.14)!important;content:""!important;}
.m18-kh-dot.info{background:linear-gradient(135deg,rgba(139,92,246,.96),rgba(59,130,246,.90))!important;}
.m18-kh-dot.link{background:linear-gradient(135deg,rgba(245,158,11,.95),rgba(239,68,68,.90))!important;}

/* 旧覆盖层热点也统一一下，原生不可用时不显廉价 */
.m18-vh-dot{height:31px!important;min-width:31px!important;padding:0 10px!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(53,132,255,.95),rgba(37,215,255,.88))!important;font-size:12px!important;box-shadow:0 12px 30px rgba(0,0,0,.24)!important;}
.m18-vh-dot:before{width:16px!important;height:16px!important;background:radial-gradient(circle at 50% 50%,#fff 0 28%,rgba(255,255,255,.45) 30% 52%,transparent 54%)!important;box-shadow:0 0 0 5px rgba(255,255,255,.14)!important;}

@media(max-width:720px){
  .m18-vu6-topbar{left:10px;right:10px;top:10px;height:50px;border-radius:18px;padding-left:12px;}
  .m18-vu6-logo{width:28px;height:28px;border-radius:10px;font-size:12px;}
  .m18-vu6-title strong{max-width:42vw;font-size:14px;}
  .m18-vu6-title span{max-width:42vw;}
  .m18-vu6-tools .m18-vu6-chip:not(.primary){display:none;}
  .m18-vu6-dock{left:10px;right:10px;bottom:12px;transform:none;justify-content:space-between;border-radius:22px;padding:8px;}
  .m18-vu6-dock button{width:auto;flex:1;height:54px;border-radius:16px;}
  .m18-vu6-panel{left:10px;right:10px;top:auto;bottom:82px;width:auto;max-height:54vh;border-radius:22px;}
  .m18-vu6-panel-body{max-height:calc(54vh - 62px);}
  .m18-vu6-toast{bottom:88px;}
}