:root {
    --bg: #0a0a0f;
    --bg-card: #12121a;
    --bg-input: #1a1a25;
    --bg-hover: #1e1e2a;
    --border: #2a2a3a;
    --text: #e8e8f0;
    --text-dim: #8888a0;
    --accent: #4f8fff;
    --accent-hover: #3a7aee;
    --accent-glow: rgba(79,143,255,0.3);
    --danger: #ff4f6f;
    --success: #4fff8f;
    --warning: #ffc04f;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 4px 24px rgba(0,0,0,0.4);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
a { color:var(--accent); text-decoration:none; }

.navbar { position:fixed; top:0; left:0; right:0; height:60px; background:rgba(10,10,15,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; z-index:1000; }
.navbar-logo { font-size:20px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px; }
.navbar-logo span { color:var(--accent); }
.navbar-links { display:flex; align-items:center; gap:8px; }

.btn { display:inline-flex; align-items:center; justify-content:center; padding:8px 20px; border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s; gap:6px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); box-shadow:0 0 20px var(--accent-glow); }
.btn-ghost { background:transparent; color:var(--text-dim); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--text); border-color:var(--text-dim); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:6px 14px; font-size:13px; }
.btn-lg { padding:12px 28px; font-size:16px; }
.btn-block { width:100%; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

#app { padding-top:60px; min-height:100vh; }

.globe-section { width:100%; height:70vh; min-height:400px; position:relative; overflow:hidden; }
#globe-canvas { width:100%; height:100%; display:block; }
.globe-overlay { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); text-align:center; color:var(--text-dim); font-size:13px; pointer-events:none; }
.globe-preview { position:absolute; right:20px; top:50%; transform:translateY(-50%); width:300px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:none; box-shadow:var(--shadow); z-index:10; }
.globe-preview.active { display:block; }
.globe-preview img { width:100%; height:150px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:12px; }

.content-section { max-width:1400px; margin:0 auto; padding:32px 40px; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.section-header h2 { font-size:22px; }

.filter-bar { display:flex; gap:8px; flex-wrap:wrap; }
.filter-chip { padding:6px 16px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--text-dim); font-size:13px; cursor:pointer; transition:all 0.2s; }
.filter-chip:hover,.filter-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }

.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.project-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:all 0.2s; }
.project-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.project-card-thumb { width:100%; height:180px; object-fit:cover; background:var(--bg-input); display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:32px; }
.project-card-body { padding:16px; }
.project-card-title { font-size:16px; font-weight:600; margin-bottom:6px; }
.project-card-meta { font-size:13px; color:var(--text-dim); display:flex; gap:12px; }

.auth-page { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 60px); padding:24px; }
.auth-box { width:100%; max-width:420px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:40px 32px; }
.auth-box h2 { font-size:24px; margin-bottom:8px; }
.auth-box .subtitle { color:var(--text-dim); margin-bottom:24px; font-size:14px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.form-input { width:100%; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:14px; outline:none; transition:border-color 0.2s; }
.form-input:focus { border-color:var(--accent); }
.form-input::placeholder { color:var(--text-dim); }
.form-error { color:var(--danger); font-size:13px; margin-top:8px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-dim); font-size:13px; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.btn-oauth { width:100%; padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-input); color:var(--text); font-size:14px; cursor:pointer; margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:8px; transition:border-color 0.2s; }
.btn-oauth:hover { border-color:var(--text-dim); }
.auth-footer { text-align:center; margin-top:20px; font-size:14px; color:var(--text-dim); }

.dashboard { display:flex; min-height:calc(100vh - 60px); }
.sidebar { width:240px; background:var(--bg-card); border-right:1px solid var(--border); padding:24px 0; flex-shrink:0; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:10px 24px; color:var(--text-dim); font-size:14px; cursor:pointer; transition:all 0.2s; }
.sidebar-item:hover,.sidebar-item.active { color:var(--text); background:var(--bg-hover); }
.sidebar-stats { padding:20px 24px; border-top:1px solid var(--border); margin-top:20px; }
.stat-label { font-size:12px; color:var(--text-dim); margin-bottom:4px; }
.stat-value { font-size:18px; font-weight:600; margin-bottom:12px; }
.progress-bar { width:100%; height:6px; background:var(--bg-input); border-radius:3px; overflow:hidden; margin-top:4px; }
.progress-bar-fill { height:100%; background:var(--accent); border-radius:3px; transition:width 0.3s; }
.dashboard-main { flex:1; padding:24px 32px; overflow-y:auto; }
.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.dashboard-header h1 { font-size:24px; }

.project-list-item { display:flex; align-items:center; gap:16px; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; transition:border-color 0.2s; }
.project-list-item:hover { border-color:var(--accent); }
.project-list-item.converting { border-color:var(--accent); animation:convert-glow 1.5s ease-in-out infinite; }
@keyframes convert-glow { 0%,100% { box-shadow:0 0 4px rgba(79,143,255,0.4); } 50% { box-shadow:0 0 18px rgba(79,143,255,0.95); } }
.project-list-thumb { width:100px; height:70px; object-fit:cover; border-radius:var(--radius-sm); background:var(--bg-input); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text-dim); }
.project-list-info { flex:1; }
.project-list-title { font-weight:600; margin-bottom:4px; }
.project-list-meta { font-size:13px; color:var(--text-dim); display:flex; gap:12px; }
.project-list-actions { display:flex; gap:8px; }

.badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:12px; font-weight:500; }
.badge-public { background:rgba(79,255,143,0.15); color:var(--success); }
.badge-private { background:rgba(255,79,111,0.15); color:var(--danger); }
.badge-draft { background:rgba(255,192,79,0.15); color:var(--warning); }
.badge-published { background:rgba(79,143,255,0.15); color:var(--accent); }

.toast { position:fixed; bottom:24px; right:24px; padding:12px 24px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; z-index:9999; transform:translateY(100px); opacity:0; transition:all 0.3s; }
.toast.show { transform:translateY(0); opacity:1; }
.toast-success { border-color:var(--success); }
.toast-error { border-color:var(--danger); }

.loading { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--text-dim); }
.spinner { width:24px; height:24px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.6s linear infinite; margin-right:8px; }
@keyframes spin { to { transform:rotate(360deg); } }

.empty-state { text-align:center; padding:60px 24px; color:var(--text-dim); }
.empty-state-icon { font-size:48px; margin-bottom:12px; }

.slim-slider::-webkit-slider-runnable-track { height:2px; background:rgba(255,255,255,0.4); border-radius:1px; }
.slim-slider::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#4f8fff; margin-top:-5px; cursor:pointer; box-shadow:0 0 6px rgba(79,143,255,0.5); }
.slim-slider::-webkit-slider-thumb:hover { background:#6fa3ff; transform:scale(1.2); box-shadow:0 0 12px rgba(79,143,255,0.8); }
.slim-slider::-moz-range-track { height:2px; background:rgba(255,255,255,0.4); border-radius:1px; border:none; }
.slim-slider::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#4f8fff; border:none; cursor:pointer; }

@media (max-width:768px) {
    .navbar { padding:0 16px; }
    .sidebar { display:none; }
    .dashboard { flex-direction:column; }
    .dashboard-main { padding:16px; }
    .globe-section { height:50vh; min-height:300px; }
    .content-section { padding:24px 16px; }
    .card-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
    .auth-box { padding:28px 20px; }
    .project-list-item { flex-direction:column; align-items:flex-start; }
    .project-list-thumb { width:100%; height:150px; }
    .globe-preview { display:none !important; }
    .section-header { flex-direction:column; gap:12px; align-items:flex-start; }
}
@media (max-width:480px) {
    .card-grid { grid-template-columns:1fr; }
}

.mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:56px; background:rgba(10,10,15,0.95); backdrop-filter:blur(20px); border-top:1px solid var(--border); z-index:1000; justify-content:space-around; align-items:center; }
.mobile-nav-item { display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-dim); font-size:10px; cursor:pointer; padding:6px 12px; transition:color 0.2s; }
.mobile-nav-item:hover,.mobile-nav-item.active { color:var(--accent); }
.mobile-nav-item svg { width:20px; height:20px; }
@media (max-width:768px) { .mobile-nav { display:flex; } #app { padding-bottom:56px; } }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); z-index:2000; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.active { display:flex; }
.modal { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; width:420px; max-width:100%; max-height:90vh; overflow-y:auto; }

.hs-chips { display:flex; gap:6px; }
.hs-chip { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font-size:11px; color:var(--text-dim); transition:all 0.15s; }
.hs-chip:hover { border-color:var(--accent); }
.hs-chip.active { border-color:var(--accent); background:rgba(79,143,255,0.12); color:var(--text); }
.hs-drop { border:2px dashed var(--border); border-radius:var(--radius-sm); padding:18px 12px; text-align:center; font-size:12px; color:var(--text-dim); cursor:pointer; transition:all 0.15s; }
.hs-drop:hover,.hs-drop.over { border-color:var(--accent); background:rgba(79,143,255,0.05); }
.hs-thumbs { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.hs-thumb { position:relative; width:60px; height:60px; border-radius:4px; overflow:hidden; }
.hs-thumb img { width:100%; height:100%; object-fit:cover; }
.hs-thumb-x { position:absolute; top:2px; right:2px; width:16px; height:16px; line-height:16px; text-align:center; background:rgba(0,0,0,0.6); color:#fff; border-radius:50%; font-size:11px; cursor:pointer; }

.hs-marker { position:absolute; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:rgba(10,10,15,0.7); border:2px solid currentColor; display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto; backdrop-filter:blur(4px); transition:transform 0.12s; }
.hs-marker:hover { transform:translate(-50%,-50%) scale(1.18); }
.hs-marker svg { stroke:currentColor; display:block; }
.hs-marker-num { position:absolute; top:-6px; right:-6px; min-width:15px; height:15px; line-height:15px; padding:0 3px; border-radius:8px; background:currentColor; color:#000; font-size:10px; font-weight:700; text-align:center; }

#hotspot-bar { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; gap:8px; max-width:80%; overflow-x:auto; padding:8px; background:rgba(10,10,15,0.7); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:12px; z-index:11; }
.hs-bar-item { flex:0 0 auto; width:60px; cursor:pointer; text-align:center; }
.hs-bar-item img,.hs-bar-icon { width:60px; height:46px; border-radius:6px; object-fit:cover; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); border:1px solid var(--border); }
.hs-bar-item img { display:block; }
.hs-bar-item:hover img,.hs-bar-item:hover .hs-bar-icon { border-color:var(--accent); }
.hs-bar-label { display:block; font-size:10px; color:var(--text-dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hs-portal { position:absolute; transform:translate(-50%,-94%); width:44px; height:44px; pointer-events:auto; cursor:pointer; z-index:1; transition:transform 0.5s cubic-bezier(0.34,1.45,0.45,1); }
.hs-portal:hover { transform:translate(-50%,-94%) scale(1.73,2.27); z-index:2; }
.hs-portal-glow { position:absolute; inset:-11px; border-radius:50%; background:linear-gradient(135deg,#ff9a2e,#ff5e3a,#ffd45e,#ff9a2e); background-size:280% 280%; filter:blur(12px); opacity:0.75; animation:portalFlow 2.6s linear infinite; }
.hs-portal:hover .hs-portal-glow { opacity:1; filter:blur(16px); }
.hs-portal-ring { position:absolute; inset:-4px; border-radius:50%; border:1px solid rgba(255,190,90,0.95); box-shadow:0 0 10px rgba(255,150,50,0.9), 0 0 26px rgba(255,110,40,0.55), inset 0 0 14px rgba(255,180,80,0.8); animation:portalRing 1.3s ease-in-out infinite; pointer-events:none; }
.hs-portal-inner { position:absolute; inset:-4px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 55%, #1a0d04 0%, #000 70%); }
.hs-portal-inner img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.3); transition:opacity 0.7s ease, transform 1.8s ease; }
.hs-portal:hover .hs-portal-inner img { opacity:1; transform:scale(1.0); }
.hs-portal-sparks { position:absolute; left:-50%; top:-50%; width:200%; height:200%; pointer-events:none; }
.hs-portal-label { position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); font-size:11px; font-weight:600; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.9); white-space:nowrap; }
@keyframes portalFlow { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes portalRing { 0%,100% { box-shadow:0 0 10px rgba(255,150,50,0.9), 0 0 26px rgba(255,110,40,0.55), inset 0 0 14px rgba(255,180,80,0.8); } 50% { box-shadow:0 0 18px rgba(255,180,70,1), 0 0 44px rgba(255,130,50,0.85), inset 0 0 24px rgba(255,210,110,1); } }
#portal-warp { position:fixed; left:50%; top:50%; width:240vmax; height:240vmax; transform:translate(-50%,-50%); border-radius:50%; background:transparent; box-shadow:0 0 0 9999px #000, inset 0 0 22vmax 8vmax #000; pointer-events:none; z-index:9999; animation:portalWarpIn 0.7s cubic-bezier(0.6,0,0.85,0.4) forwards; }
#portal-warp.out { width:0; height:0; animation:portalWarpOut 1.5s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes portalWarpIn { from { width:240vmax; height:240vmax; } to { width:0; height:0; } }
@keyframes portalWarpOut { from { opacity:1; } to { opacity:0; } }

#viewer-wrap.sf-winter #sog-canvas, #viewer-wrap.sf-winter #walk-canvas { filter:brightness(1.5) saturate(0.3) contrast(0.92); }
#filter-menu .filter-opt { padding:8px 12px; border-radius:6px; font-size:13px; color:var(--text); cursor:pointer; }
#filter-menu .filter-opt:hover { background:var(--bg-hover); }
#filter-menu .filter-opt.active { background:var(--accent); color:#fff; }

.hs-popup { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); width:420px; max-width:94vw; max-height:88vh; overflow:hidden; display:flex; flex-direction:column; }
.hs-popup.wide { width:760px; }
.hs-popup-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); }
.hs-popup-head h3 { margin:0; font-size:16px; }
.hs-popup-x { cursor:pointer; font-size:22px; color:var(--text-dim); line-height:1; }
.hs-popup-body { padding:16px; overflow:auto; }
.hs-video { position:relative; width:100%; aspect-ratio:16/9; }
.hs-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:8px; }
.hs-gallery { position:relative; display:flex; align-items:center; justify-content:center; height:70vh; }
.hs-gallery img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; display:block; }
.hs-gal-nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:none; background:rgba(0,0,0,0.5); color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hs-gal-nav.prev { left:8px; }
.hs-gal-nav.next { right:8px; }
.hs-gal-count { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.5); color:#fff; font-size:12px; padding:2px 10px; border-radius:10px; }
.hs-popup.pano-popup { width:1100px; }
.hs-pano { position:relative; width:100%; aspect-ratio:2/1; border-radius:8px; overflow:hidden; background:#000; }
.hs-pano:fullscreen { aspect-ratio:auto; width:100%; height:100%; border-radius:0; }
.hs-pano canvas { display:block; }
.hs-pano-fs { position:absolute; bottom:10px; right:10px; z-index:5; background:rgba(0,0,0,0.55); color:#fff; border:1px solid rgba(255,255,255,0.35); border-radius:6px; padding:6px 12px; font-size:13px; cursor:pointer; }
.hs-pano-fs:hover { background:rgba(0,0,0,0.8); }