/* Critical CSS: minimal layout for fast first paint */
html, body { height: 100%; margin: 0; }
body { background: #1a1a1a; color: #fff; font-family: Inter,system-ui,sans-serif; }
#pano { position: absolute; inset: 0; background: #000; }
.top-nav, .bottom-controls { position: fixed; left: 0; right: 0; display: flex; align-items: center; z-index: 1050; }
.top-nav { top: 0; height: 56px; justify-content: space-between; padding: 0 16px; }
.bottom-controls { bottom: 0; gap: 10px; justify-content: center; padding: 10px; }
.control-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(134,38,51,.9); color: #fff; }
.area-select { background: rgba(134,38,51,1); color: #fff; border-radius: 28px; border: 1px solid rgba(134,38,51,1); padding: 8px 12px; }

/* Splash essentials */
.splash-screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg,#862633 0%,#1a1a1a 50%,#1E3A8A 100%); z-index: 9999; }
.splash-logo { width: 140px; height: 140px; padding: 10px; background: rgba(255,255,255,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; border: 3px solid rgba(255,255,255,.3); }
.splash-title { font-size: 2rem; font-weight: 700; margin: 0 0 .5rem; }
.progress-bar { width: 260px; height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
.progress-fill { height: 100%; background: linear-gradient(90deg,#862633,#D4AF37); width: 0; }

/* Splash LinkedIn badge */
.splash-social { position: fixed; right: 16px; bottom: 16px; z-index: 10001; display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: nowrap; white-space: nowrap; pointer-events: auto; }
.splash-social a { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    color: #fff; 
    text-decoration: none; 
    border-radius: 50%; 
    width: 44px;
    height: 44px;
    box-shadow: 0 2px 10px rgba(0,0,0,.3); 
    transition: transform 0.18s ease, background 0.18s ease; 
}
.splash-social a span {
    display: none;
}
.splash-social a[href*="facebook"] { background: #1877F2; }
.splash-social a[href*="facebook"]:hover { background: #166fe5; transform: translateY(-1px); }
.splash-social a[href*="instagram"] { background: linear-gradient(135deg, #E1306C, #FD1D1D, #F56040); }
.splash-social a[href*="instagram"]:hover { background: linear-gradient(135deg, #d82a64, #f01b1b, #e9593a); transform: translateY(-1px); }
.splash-social a[href*="x.com"] { background: linear-gradient(135deg, #333, #000); }
.splash-social a[href*="x.com"]:hover { background: linear-gradient(135deg, #222, #000); transform: translateY(-1px); }
.splash-social i { font-size: 20px; }