:root { color-scheme: dark; --accent: #c8e5a6; --muted: #b4bfb7; --panel: rgba(22, 30, 27, .90); }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; color: #fff; background: #171d1c; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.read-only #editor, .read-only #edit-toggle { display: none !important; }
#tour, #panorama { position: absolute; inset: 0; }
#panorama { background: #26342b url('assets/preview.jpg') center / cover; outline: none; }
.pnlm-container, .pnlm-container * { box-sizing: border-box; }
.pnlm-load-box, .pnlm-panorama-info { display: none !important; }
.vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(8, 17, 12, .52), transparent 27%, transparent 60%, rgba(9, 16, 13, .76)); }
.topbar { position: absolute; z-index: 5; inset: 26px 32px auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; text-shadow: 0 2px 14px #0008; }
.brand-mark { font-size: 31px; color: var(--accent); }
.brand h1 { font-size: 18px; font-weight: 600; margin: 0 0 5px; letter-spacing: 2px; }
.brand p { margin: 0; font-size: 10px; letter-spacing: 2px; color: #e0e6da; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.local-badge { display: flex; align-items: center; gap: 7px; font-size: 11px; text-shadow: 0 1px 5px #000; margin-right: 6px; }
.local-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px #c8e5a688; }
.glass-button, .icon-button { background: #17211d6b; backdrop-filter: blur(16px); border: 1px solid #ffffff26; transition: background .2s; }
.glass-button { border-radius: 7px; padding: 10px 17px; font-size: 12px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; font-size: 23px; }
.glass-button:hover, .icon-button:hover { background: #405247a6; }
.icon-button[aria-pressed="true"] { color: var(--accent); background: #546749aa; }
.scene-heading { position: absolute; z-index: 3; top: 108px; left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 2px 12px #0009; pointer-events: none; white-space: nowrap; }
.scene-heading > span { font-size: 10px; letter-spacing: 3px; color: #ffffffbd; }
.scene-heading h2 { font-size: 25px; font-weight: 500; letter-spacing: 4px; margin: 10px 0 9px; }
.scene-heading p { font-size: 11px; letter-spacing: 1px; margin: 0; color: #fff; background: #15201966; border: 1px solid #ffffff1a; border-radius: 20px; padding: 6px 13px; }
.view-tools { position: absolute; z-index: 5; right: 30px; top: 46%; display: flex; flex-direction: column; gap: 7px; }
.tool-divider { height: 5px; }
#panorama-quality { padding: 9px 5px; font-size: 10px; width: 58px; align-self: center; }
.tour-footer { position: absolute; z-index: 5; bottom: max(15px, env(safe-area-inset-bottom)); left: 32px; right: 32px; pointer-events: none; }
.navigation-line { display: flex; align-items: center; justify-content: space-between; margin: 0 0 15px; }
.keyboard-hint { position: absolute; bottom: 0; left: 0; font-size: 11px; color: #fff; text-shadow: 0 2px 5px #000; display: flex; align-items: center; gap: 7px; }
.keyboard-hint > span { color: #ffffff77; margin: 0 3px; }
kbd { display: inline-flex; min-width: 20px; height: 21px; align-items: center; justify-content: center; font: 11px inherit; border: 1px solid #ffffff55; border-radius: 4px; background: #18201966; }
.step-controls { display: flex; gap: 6px; pointer-events: auto; margin-left: auto; }
.step-controls button { border: 1px solid #ffffff30; background: #16201a77; padding: 8px 13px; border-radius: 5px; font-size: 15px; backdrop-filter: blur(10px); }
.step-controls span { font-size: 11px; margin: 0 3px; }
.step-controls button:hover { background: #384c3b; }
.scene-dock { pointer-events: auto; width: fit-content; max-width: 100%; min-width: 480px; margin: 0 auto; border: 1px solid #ffffff26; border-radius: 12px; padding: 11px 14px 13px; background: #18211f99; box-shadow: 0 12px 30px #0002; backdrop-filter: blur(20px); }
.dock-title { display: flex; align-items: center; padding: 0 1px 10px; gap: 10px; font-size: 11px; letter-spacing: 1px; }
.dock-title small { color: #bfc9c1; font-size: 9px; }
.dock-title button { margin-left: auto; background: transparent; width: 24px; height: 18px; font-size: 19px; line-height: 10px; }
#scene-list { display: flex; gap: 10px; overflow-x: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: #c8e5a66b transparent; max-width: min(850px, calc(100vw - 100px)); }
.scene-card { flex-shrink: 0; position: relative; width: 146px; height: 82px; padding: 0; background: #28372a; border: 1px solid #ffffff33; border-radius: 6px; overflow: hidden; transition: border-color .2s; text-align: left; }
.scene-card img { width: 100%; height: 100%; object-fit: cover; opacity: .77; transition: opacity .2s, transform .3s; }
.scene-card:hover img { opacity: 1; transform: scale(1.04); }
.scene-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, #0c170ddb); pointer-events: none; }
.scene-card[aria-current="true"] { border: 2px solid var(--accent); }
.scene-card[aria-current="true"] img { opacity: 1; }
.scene-card .card-name { position: absolute; z-index: 1; bottom: 8px; left: 10px; right: 8px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-card .card-number { position: absolute; z-index: 1; top: 7px; left: 8px; font-size: 9px; color: #fff; text-shadow: 0 1px 4px #000; }
.scene-card .current-dot { display: none; position: absolute; z-index: 1; right: 8px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.scene-card[aria-current="true"] .current-dot { display: block; }
.footer-meta { display: flex; justify-content: space-between; color: #ffffff85; font-size: 9px; letter-spacing: 1px; margin-top: 14px; }
.footer-meta > span:first-child { visibility: hidden; }
.dock-collapsed #scene-list { display: none; }
.dock-collapsed .scene-dock { min-width: 190px; padding-bottom: 2px; }
.nav-hotspot { width: 104px; height: 86px; background: none; }
.hotspot-button { position: relative; width: 104px; min-height: 86px; padding: 0; border: 0; background: transparent; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; filter: drop-shadow(0 3px 4px #0008); }
.hotspot-button svg { width: 70px; height: 61px; overflow: visible; transition: transform .25s; }
.hotspot-button:hover svg { transform: translateY(-5px) scale(1.1); }
.hotspot-button .hotspot-label { background: #17231cc7; padding: 6px 10px; border: 1px solid #ffffff44; border-radius: 5px; font-size: 11px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(8px); }
.hotspot-button:hover .hotspot-label { background: #334b32ee; border-color: var(--accent); }
.hotspot-button .chevron-top { animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: translateY(-3px); } }
#loading { z-index: 9; position: absolute; inset: 0; background: #152119e8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; }
#loading strong { font-size: 17px; font-weight: 400; letter-spacing: 4px; }
#loading span { font-size: 11px; color: var(--muted); letter-spacing: 2px; }
.spinner { width: 30px; height: 30px; border: 2px solid #c8e5a62b; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
#transition-label, #toast { position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); background: #16231be8; border: 1px solid #ffffff30; border-radius: 8px; padding: 12px 20px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s; text-align: center; max-width: calc(100% - 32px); }
#transition-label { top: 48%; }
#toast { bottom: 225px; white-space: nowrap; }
#transition-label.visible, #toast.visible { opacity: 1; }
#placement-hint { position: absolute; z-index: 12; top: 85px; left: 50%; transform: translateX(-50%); font-size: 13px; background: var(--accent); color: #1e311d; border-radius: 6px; padding: 12px 22px; box-shadow: 0 6px 24px #0003; }
.placing #panorama, .placing .pnlm-dragfix { cursor: crosshair !important; }
.placing .nav-hotspot { pointer-events: none; }
#editor { position: absolute; z-index: 10; top: 83px; right: 24px; bottom: 22px; width: 340px; display: flex; flex-direction: column; background: #17201cf5; border: 1px solid #ffffff29; border-radius: 12px; box-shadow: 0 10px 60px #0005; backdrop-filter: blur(24px); }
.editor-heading { display: flex; justify-content: space-between; align-items: center; padding: 20px 18px 16px; border-bottom: 1px solid #ffffff16; }
.editor-heading h2 { font-size: 17px; letter-spacing: 1px; margin: 0 0 5px; font-weight: 500; }
.editor-heading p { margin: 0; font-size: 11px; color: var(--muted); }
.editor-heading .icon-button { background: transparent; border: 0; }
.editor-body { overflow-y: auto; flex: 1; padding: 0 18px; scrollbar-width: thin; scrollbar-color: #60715e transparent; }
.editor-body section { padding: 18px 0; border-bottom: 1px solid #ffffff16; }
.editor-body h3 { margin: 0 0 15px; font-size: 12px; font-weight: 500; color: var(--accent); }
.editor-body label { display: block; font-size: 11px; margin-bottom: 7px; color: #c6cfc7; }
.editor-body input:not([type=file]), .editor-body select { width: 100%; min-width: 0; padding: 9px 10px; background: #0c140f80; border: 1px solid #ffffff26; border-radius: 5px; color: #fff; font-size: 12px; }
.input-row { display: flex; gap: 6px; margin-bottom: 10px; }
.input-row button { background: #455c3c; border-radius: 5px; font-size: 12px; padding: 0 14px; white-space: nowrap; }
.wide-button, .editor-body .file-button { width: 100%; text-align: center; padding: 10px; margin: 8px 0 0; background: #ffffff0b; border: 1px solid #ffffff25; border-radius: 5px; font-size: 12px; cursor: pointer; color: #fff; }
.file-button input { display: none; }
.field-note { color: #9faa9f; font-size: 10px; line-height: 1.8; margin: 9px 0 0; }
.two-columns { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 12px; }
.accent-button { background: var(--accent); color: #20321d; border: 0; font-weight: 600; }
.wide-button.accent-button { margin-top: 13px; background: var(--accent); color: #20321d; }
.editor-bottom { display: flex; padding: 15px 18px; align-items: center; justify-content: space-between; border-top: 1px solid #ffffff16; gap: 10px; }
.editor-bottom span { color: var(--muted); font-size: 10px; }
.editor-bottom button { border-radius: 5px; padding: 10px 14px; white-space: nowrap; font-size: 12px; }
.link-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 11px; padding: 10px 0; border-bottom: 1px solid #ffffff12; }
.link-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row button, .danger-button { font-size: 11px; color: #e1a89c; background: transparent; padding: 5px; flex-shrink: 0; }
.editor-open .view-tools { right: 385px; }
.editor-open .step-controls { visibility: hidden; }
.editor-open .scene-dock { margin-left: 0; max-width: calc(100% - 355px); min-width: 0; }
.editor-open #scene-list { max-width: 100%; }
#model-overlay { position: absolute; z-index: 7; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(var(--media-width, calc(100vw - 48px)), calc(100vw - 24px)); height: min(max(180px, var(--media-height, calc(100dvh - 320px))), calc(100dvh - 220px)); pointer-events: none; background: transparent; color-scheme: normal; }
.model-toolbar { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; width: max-content; padding: 7px 9px 7px 15px; max-width: calc(100vw - 24px); border: 1px solid #ffffff38; border-radius: 9px; background: #15231ddd; color: white; pointer-events: auto; }
.model-toolbar > div { min-width: 0; }
.model-toolbar strong { display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px; max-width: 250px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.model-toolbar small { display: block; font-size: 10px; color: #c6d4c3; }
.model-toolbar .glass-button { white-space: nowrap; }
.model-toolbar .icon-button { flex-shrink: 0; }
#model-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent !important; color-scheme: normal; pointer-events: auto; }
#model-overlay.passthrough #model-frame { pointer-events: none; }
.model-open .scene-heading { visibility: hidden; }
.model-open .model-hotspot { opacity: 0; pointer-events: none; }
.editor-body .spaced-label { margin-top: 12px; }
.selected-media { color: var(--accent); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; padding: 10px; background: #ffffff08; border-radius: 5px; }
#media-upload { width: 100%; font-size: 11px; color: var(--muted); }
#media-upload::file-selector-button { background: #435d3a; color: white; border: 0; border-radius: 5px; padding: 9px; margin-right: 8px; cursor: pointer; }
#model-rotate[aria-pressed="true"] { color: #17251a; background: var(--accent); }
#model-dimensions { opacity: .7; margin-top: 3px; }
@media (max-width: 700px) {
  .topbar { inset: 18px 16px auto; gap: 8px; }
  .brand { gap: 8px; } .brand h1 { font-size: 14px; letter-spacing: 1px; } .brand p { font-size: 9px; letter-spacing: 1px; } .brand-mark { font-size: 24px; }
  .local-badge { display: none; } .top-actions { gap: 7px; } .glass-button { font-size: 11px; padding: 9px 12px; }
  .scene-heading { top: 93px; } .scene-heading h2 { font-size: 21px; }
  .view-tools { right: 14px; top: 36%; } .icon-button { width: 34px; height: 34px; }
  .tour-footer { left: 14px; right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .keyboard-hint { font-size: 0; gap: 0; } .keyboard-hint > span, .keyboard-hint kbd { display: none; } .keyboard-hint::after { content: '拖拽环顾 · 双指缩放'; font-size: 10px; }
  .navigation-line { margin-bottom: 10px; }
  .scene-dock { min-width: 0; width: 100%; padding: 10px; border-radius: 9px; }
  #scene-list { max-width: 100%; gap: 8px; } .scene-card { width: 122px; height: 73px; }
  .footer-meta { font-size: 8px; letter-spacing: 0; margin-top: 10px; } .footer-meta span:last-child { max-width: 55%; text-align: right; }
  #editor { right: 10px; left: 10px; width: auto; top: 72px; bottom: 14px; }
  .editor-open .scene-dock, .editor-open .keyboard-hint, .editor-open .view-tools { visibility: hidden; }
  .placing #editor { display: none; } #placement-hint { top: 75px; white-space: nowrap; padding: 11px 14px; font-size: 11px; }
  #toast { white-space: normal; width: max-content; bottom: 200px; }
  .model-toolbar { gap: 6px; padding: 6px 8px; }
  .model-toolbar > div { flex-basis: 100%; text-align: center; }
  .model-toolbar strong { max-width: none; }
  .model-toolbar small { font-size: 9px; }
  .model-toolbar .glass-button { padding: 8px; }
  .top-actions { gap: 5px; } .top-actions .glass-button { padding: 8px; }
  .topbar .brand p { letter-spacing: 0; } .topbar .brand h1 { font-size: 12px; }
}
@media (max-height: 600px) and (min-width: 701px) { .scene-heading { top: 82px; } .scene-heading h2 { font-size: 19px; margin: 5px; } .scene-card { height: 62px; } .view-tools { top: 25%; } .topbar { top: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }