:root{
  --bg:#f5f6f8; --card:#fff; --line:#e4e7ec; --txt:#222; --muted:#6b7280;
  --brand:#2563eb; --brand2:#1d4ed8;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);line-height:1.5}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.topbar{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar h1{font-size:18px;margin:0;flex:1}
.topbar .back{font-weight:600}
.btn{background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px;font-weight:600;font-size:14px}
.btn:hover{background:var(--brand2);text-decoration:none}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 22px 0}
.fsearch,.filters select{padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-family:inherit;background:var(--card);color:var(--txt);height:38px}
.fsearch{min-width:200px;flex:1;max-width:280px}
.filters select{max-width:190px}
.fsearch:focus,.filters select:focus{outline:none;border-color:var(--brand)}
.fclear{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;height:38px;font-size:13px;color:var(--muted);cursor:pointer;font-family:inherit}
.fclear:hover{border-color:var(--brand);color:var(--brand)}
.fcount{padding:12px 22px 0;color:var(--muted);font-size:13px}

/* nav grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;padding:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 6px 22px rgba(0,0,0,.10);transform:translateY(-2px);text-decoration:none}
.card-img{width:100%;height:170px;object-fit:cover;display:block;background:#eef0f3}
.card-body{padding:12px 14px}
.card-body h3{margin:0 0 8px;font-size:16px;color:var(--txt)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:#eef2ff;color:var(--brand2);font-size:12px;padding:3px 8px;border-radius:999px;white-space:nowrap}
.empty{padding:40px;text-align:center;color:var(--muted)}
.foot{text-align:center;color:var(--muted);font-size:13px;padding:20px}

/* scene page */
.scene-top{position:absolute;top:0;left:0;right:0;z-index:21;background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0));border-bottom:none;padding:12px 16px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.scene-top h1{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.scene-top .back{color:#fff;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.7);margin-right:6px}
#panorama{width:100%;height:100%;background:#111}
.scene-overlay{position:absolute;left:0;right:0;bottom:14px;z-index:21;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 76px;pointer-events:none}
.scene-overlay>*{pointer-events:auto}
.desc{background:rgba(0,0,0,.42);color:#fff;border-radius:10px;padding:8px 14px;font-size:13px;max-width:min(92vw,560px);text-align:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.desc-title{display:block;font-size:14px;font-weight:700;margin-bottom:2px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.desc-text{display:block;color:rgba(255,255,255,.85);font-size:12px;white-space:pre-wrap}
.navbtns{display:grid;grid-template-columns:repeat(3,auto);gap:8px;justify-content:center;max-width:min(92vw,520px)}
.navbtn{background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 15px;font-size:13px;cursor:pointer;color:#fff;font-family:inherit;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.navbtn:hover{border-color:rgba(255,255,255,.55)}
.navbtn.active{background:#fff;color:#111;border-color:#fff;text-shadow:none}

/* hide pannellum built-in controls (zoom / fullscreen / autorotate) */
.pnlm-controls,.pnlm-controls-container,.pnlm-zoom-controls,
.pnlm-fullscreen-toggle-button,.pnlm-orientation-button,
.pnlm-hot-spot-debug-indicator{display:none !important}

/* view modes：右侧偏下，仿大疆 App（图标 + 英文 + 中文） */
.pano-wrap{position:relative;height:100vh;height:100dvh;overflow:hidden}
.viewmodes{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:10px}
.vmode{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:58px;padding:8px 4px;border-radius:14px;background:rgba(0,0,0,.42);color:#fff;border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.vmode:hover{background:rgba(0,0,0,.62)}
.vmode .vm-ico{display:block;width:24px;height:24px}
.vmode .vm-ico svg{width:24px;height:24px;display:block}
.vmode .vm-en{font-size:9px;font-weight:700;letter-spacing:.6px;opacity:.95}
.vmode .vm-cn{font-size:12px;font-weight:600;line-height:1.2}
.vmode.active{background:#fff;color:#111;border-color:#fff}
.vmode.active:hover{background:#fff}
.setview-toggle{background:rgba(255,193,7,.16);color:#ffd66b;border-color:rgba(255,193,7,.5)}
.setview-toggle:hover{background:rgba(255,193,7,.30)}
.setview-toggle.busy{opacity:.6;pointer-events:none}
.toast{position:fixed;left:50%;bottom:56px;transform:translateX(-50%) translateY(20px);background:rgba(0,0,0,.85);color:#fff;padding:11px 20px;border-radius:12px;font-size:14px;z-index:100000;opacity:0;transition:opacity .28s ease,transform .28s ease;pointer-events:none;max-width:80vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 首次打开手势操作提示（仅设备首次，3 秒后自动淡出） ---------- */
.gesture-hint{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;pointer-events:none}
.gesture-hint .gh-card{background:rgba(17,17,17,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:18px 24px;color:#fff;max-width:84vw;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .4s ease,transform .4s ease;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.gesture-hint.show .gh-card{opacity:1;transform:translateY(0) scale(1)}
.gesture-hint.hide .gh-card{opacity:0;transform:translateY(0) scale(.96)}
.gesture-hint .gh-title{font-size:14px;font-weight:600;letter-spacing:.05em;margin-bottom:12px;opacity:.92;text-align:center}
.gesture-hint .gh-row{display:flex;align-items:center;gap:12px;margin:10px 0}
.gesture-hint .gh-ico{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.gesture-hint .gh-ico svg{width:24px;height:24px;display:block}
.gesture-hint .gh-txt{font-size:14px;line-height:1.4;opacity:.95}
@media (max-width:520px){
  .gesture-hint .gh-card{padding:15px 18px;border-radius:12px}
  .gesture-hint .gh-txt{font-size:13px}
}
  .viewmodes{right:10px;top:50%;transform:translateY(-50%);gap:8px}
  .vmode{width:50px;padding:6px 3px}
  .vmode .vm-ico,.vmode .vm-ico svg{width:21px;height:21px}
  .vmode .vm-cn{font-size:11px}
  .scene-overlay{padding:0 62px;bottom:10px;gap:6px}
  .navbtn{padding:7px 12px;font-size:12px}
  .desc{font-size:12px;padding:6px 12px}
  .filters{padding:12px 16px 0;gap:8px}
  .fsearch{max-width:none;flex:1 1 100%}
  .filters select{flex:1 1 calc(50% - 4px);max-width:none}
  .fcount{padding:10px 16px 0}
  .grid{padding:16px}
}

/* ---------- 横屏观看模式 ---------- */
/* 横屏按钮：与视角按钮同款样式，用品牌蓝做区分 */
.land-toggle{background:rgba(37,99,235,.62);border-color:rgba(255,255,255,.35)}
.land-toggle:hover{background:rgba(37,99,235,.78)}
.land-toggle.active{background:#fff;color:#111;border-color:#fff}

/* 进入横屏：全景铺满全屏，隐藏顶栏与参数区，画面更开阔 */
html.is-landscape body{overflow:hidden;background:#000}
html.is-landscape .pano-wrap{position:fixed;inset:0;z-index:9999;background:#000}
html.is-landscape #panorama{width:100%;height:100%}
html.is-landscape .scene-top{display:none}
html.is-landscape .viewmodes{z-index:10000}

/* 竖屏时点了横屏但系统无法锁定方向（如 iOS）：提示用户把手机横过来 */
.rotate-hint{display:none}
@media (orientation:portrait){
  html.is-landscape .rotate-hint{
    display:flex;align-items:center;justify-content:center;gap:8px;
    position:fixed;top:0;left:0;right:0;z-index:10001;
    padding:11px 14px;background:rgba(0,0,0,.72);color:#fff;
    font-size:13px;text-align:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)
  }
}