* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    background: linear-gradient(180deg, #e0f7fa 0%, #b2ebf2 100%);
    color: #006064;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.screen { display: none; height: 100vh; width: 100vw; overflow-y: auto; overflow-x: hidden; }
.screen.active { display: flex; flex-direction: column; }

/* USER TYPE SELECTOR */
.user-type-selector { display: flex; gap: 10px; margin-top: 8px; }
.user-type-card { flex: 1; background: rgba(255,255,255,0.9); border: 2px solid #80deea; border-radius: 12px; padding: 12px; cursor: pointer; text-align: center; transition: all 0.2s; }
.user-type-card:hover { border-color: #00bcd4; }
.user-type-card.selected { border-color: #00bcd4; background: rgba(0,188,212,0.15); box-shadow: 0 0 12px rgba(0,188,212,0.3); }
.user-type-icon { display: block; font-size: 28px; margin-bottom: 6px; }
.user-type-name { display: block; color: #006064; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.user-type-desc { display: block; color: #00838f; font-size: 11px; }

/* PROFILE USER TYPE & SONG */
.profile-user-type { color: #00bcd4; font-size: 14px; font-weight: 600; margin-top: 8px; background: rgba(0,188,212,0.1); padding: 4px 12px; border-radius: 12px; display: inline-block; }
.profile-role { color: #2a1600; font-size: 13px; font-weight: 800; letter-spacing: .04em; margin-top: 10px; background: linear-gradient(135deg, #ffe082, #ffb300); border: 1px solid #ffd54f; padding: 5px 13px; border-radius: 999px; display: inline-block; box-shadow: 0 0 18px rgba(255,179,0,.28); }
.profile-role[hidden] { display: none; }
.profile-role-admin { color: #00363a; background: rgba(0,188,212,.16); border-color: #00bcd4; box-shadow: none; }
.profile-song { color: #00838f; font-size: 13px; margin-top: 6px; }

/* SETTINGS BUTTON & HEADER ROW */
.header-row { display: flex; justify-content: space-between; align-items: center; }
.settings-btn { background: rgba(255,255,255,0.9); border: 1px solid #80deea; border-radius: 10px; color: #006064; font-size: 20px; padding: 8px 12px; cursor: pointer; transition: all 0.2s; }
.settings-btn:hover { background: rgba(255,255,255,1); border-color: #00bcd4; }
.translate-button { position: fixed; top: 14px; right: 14px; z-index: 1200; min-width: 54px; height: 38px; border: 1px solid #80deea; border-radius: 8px; background: rgba(255,255,255,.95); color: #006064; font: 800 12px inherit; cursor: pointer; }
.language-modal-content { max-width: 390px; }
.language-options { padding: 8px 18px 18px; }
.language-option { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid #b2ebf2; background: transparent; color: #006064; font: 600 15px inherit; cursor: pointer; }
.language-option.active { background: #e0f7fa; }
.language-option small { color: #00838f; font-size: 11px; }
html[dir="rtl"] .translate-button { right: auto; left: 14px; }

/* PROFILE CARD */
.profile-card { background: rgba(255,255,255,0.92); border-radius: 16px; padding: 24px; margin: 0 16px 16px; text-align: center; border: 1px solid #80deea; box-shadow: 0 4px 20px rgba(0,188,212,0.1); }
.profile-avatar { font-size: 64px; margin-bottom: 12px; }
.profile-name { color: #006064; font-size: 24px; font-weight: bold; }
.profile-username { color: #00838f; font-size: 16px; margin-top: 4px; }
.profile-email { color: #0097a7; font-size: 14px; margin-top: 4px; }
.edit-profile-btn { background: linear-gradient(135deg, #00bcd4, #26c6da); border: none; color: #fff; padding: 10px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 16px; transition: all 0.2s; }
.edit-profile-btn:hover { background: linear-gradient(135deg, #00acc1, #00bcd4); }

/* QUICK ACCESS */
.quick-access-row { display: flex; gap: 12px; padding: 0 16px; margin-bottom: 16px; }
.quick-access-card { flex: 1; background: rgba(255,255,255,0.92); border: 1px solid #80deea; border-radius: 12px; padding: 16px; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.quick-access-card:hover { border-color: #00bcd4; background: rgba(0,188,212,0.1); }
.quick-access-icon { font-size: 28px; margin-bottom: 8px; display: block; text-align: center; }
.quick-access-label { color: #006064; font-size: 13px; font-weight: 600; display: block; text-align: center; }

/* STATS */
.stats-row { display: flex; justify-content: space-around; padding: 20px; margin: 0 16px 16px; background: rgba(255,255,255,0.92); border-radius: 12px; border: 1px solid #80deea; }
.stat-box { text-align: center; }
.stat-number { color: #006064; font-size: 24px; font-weight: bold; }
.stat-label { color: #00838f; font-size: 12px; margin-top: 4px; }

/* SECTION TITLE & PHOTOS GRID */
.section-title { color: #006064; font-size: 18px; font-weight: bold; padding: 0 16px; margin-bottom: 12px; }
.photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px; margin-bottom: 16px; }
.photo-placeholder { aspect-ratio: 1; background: rgba(255,255,255,0.9); border: 1px solid #80deea; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.profile-photo { min-width: 0; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid #80deea; border-radius: 10px; background: rgba(255,255,255,.9); cursor: pointer; }
.profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-photos-empty { grid-column: 1 / -1; padding: 24px 16px; border: 1px dashed #80deea; border-radius: 10px; color: #00838f; text-align: center; }

/* MENU SECTION */
.menu-section { padding: 0 16px; margin-bottom: 20px; }
.menu-item { display: flex; align-items: center; background: rgba(255,255,255,0.92); padding: 16px; border-radius: 12px; margin-bottom: 8px; border: 1px solid #80deea; cursor: pointer; transition: all 0.2s; }
.menu-item:hover { border-color: #00bcd4; }
.menu-icon { font-size: 20px; margin-right: 12px; }
.menu-text { color: #006064; font-size: 16px; flex: 1; }
.menu-arrow { color: #0097a7; font-size: 20px; }

/* LOGOUT BUTTON */
.logout-btn { margin: 0 16px 16px; padding: 14px; border-radius: 12px; align-items: center; justify-content: center; background: transparent; border: 1px solid #ff5252; color: #ff5252; font-size: 16px; font-weight: 600; cursor: pointer; width: calc(100% - 32px); }

/* SETTINGS MODAL */
.settings-section { background: #e0f7fa; border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.settings-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #b2ebf2; cursor: pointer; transition: background 0.2s; }
.settings-item:last-child { border-bottom: none; }
.settings-item:hover { background: rgba(255,255,255,0.8); }
.settings-icon { font-size: 18px; margin-right: 12px; }
.settings-text { color: #006064; font-size: 14px; flex: 1; }
.settings-arrow { color: #0097a7; font-size: 18px; }
.settings-item.danger .settings-text { color: #ff5252; }
.owner-dashboard-modal { max-width: 920px; }
.owner-dashboard-entry[hidden] { display: none !important; }
.owner-dashboard-page { max-width: 1100px; }
.owner-dashboard-page .owner-dashboard-body { margin: 12px 16px 36px; padding: 20px; border: 1px solid var(--beta-line, #80deea); border-radius: 18px; }
.owner-dashboard-modal .modal-header p { margin-top: 4px; color: var(--beta-muted, #00838f); font-size: 11px; }
.owner-dashboard-body { background: var(--beta-bg-raised, #e0f7fa); }
.owner-dashboard-status, .owner-dashboard-empty { padding: 30px 16px; color: var(--beta-muted, #00838f); text-align: center; }
.owner-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.owner-metric, .owner-data-panel { border: 1px solid var(--beta-line, #80deea); border-radius: 13px; background: var(--beta-panel-soft, rgba(255,255,255,.9)); }
.owner-metric { min-height: 98px; display: flex; flex-direction: column; justify-content: center; padding: 15px; }
.owner-metric strong { color: var(--beta-ink, #006064); font-size: 22px; }
.owner-metric span { margin-top: 5px; color: var(--beta-muted, #00838f); font-size: 11px; }
.owner-dashboard-section { margin-top: 21px; }
.owner-dashboard-section h3 { margin: 0 0 8px !important; }
.owner-data-panel { padding: 13px; }
.owner-data-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 8px 2px; color: var(--beta-ink, #006064); }
.owner-data-row + .owner-data-row { border-top: 1px solid var(--beta-line, #b2ebf2); }
.owner-data-row span strong, .owner-data-row span small { display: block; }
.owner-data-row span small { margin-top: 2px; color: var(--beta-muted, #00838f); font-size: 9px; font-weight: 500; }
.owner-data-row b { white-space: nowrap; }
.owner-month-list { display: grid; gap: 8px; }
.owner-month-row { display: grid; grid-template-columns: 24px 1fr 32px; align-items: center; gap: 9px; color: var(--beta-muted, #00838f); font-size: 10px; }
.owner-month-row i { height: 8px; overflow: hidden; border-radius: 999px; background: var(--beta-line, #b2ebf2); }
.owner-month-row em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--beta-accent, #7564e9), var(--beta-accent-2, #4a8fcb)); }
.owner-month-row b { color: var(--beta-ink, #006064); text-align: right; }
.owner-dashboard-actions { display: flex; gap: 10px; margin-top: 22px; }
.owner-dashboard-actions button { flex: 1; min-height: 44px; margin: 0; }
.owner-dashboard-note { margin: 11px 0 0; color: var(--beta-muted, #00838f); font-size: 10px; line-height: 1.5; text-align: center; }
@media (max-width: 600px) {
  .owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-dashboard-actions { flex-direction: column; }
}
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #80deea; border-radius: 24px; transition: 0.3s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s; }
.switch input:checked + .slider { background: #00bcd4; }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* FRIENDS MODAL */
.friends-section { display: none; }
.friends-section.active { display: block; }
.friend-card { display: flex; align-items: center; background: #e0f7fa; border: 1px solid #80deea; border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.friend-avatar { font-size: 32px; margin-right: 12px; }
.friend-info { flex: 1; }
.friend-name { color: #006064; font-size: 15px; font-weight: 600; }
.friend-username { color: #00838f; font-size: 12px; margin-top: 2px; }
.friend-actions { display: flex; gap: 8px; }
.friend-accept-btn { background: #4caf50; border: none; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.friend-decline-btn { background: #e0f7fa; border: 1px solid #ff5252; color: #ff5252; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.friend-remove-btn { background: #e0f7fa; border: 1px solid #ff5252; color: #ff5252; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.empty-state { color: #00838f; font-size: 14px; text-align: center; padding: 24px; }

/* GROUPS MODAL */
.group-card { display: flex; align-items: center; background: #e0f7fa; border: 1px solid #80deea; border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.group-info { display: flex; align-items: center; flex: 1; }
.group-icon { font-size: 32px; margin-right: 12px; }
.group-name { color: #006064; font-size: 15px; font-weight: 600; }
.group-meta { color: #00838f; font-size: 12px; margin-top: 2px; }

/* FEED SUBTITLE & NEWS */
.feed-subtitle { color: #00838f; font-size: 13px; margin-bottom: 16px; padding: 0 16px; }
.news-section { margin-top: 16px; }
.news-title { color: #006064; font-size: 16px; font-weight: bold; margin-bottom: 12px; }
.news-item { background: #e0f7fa; border-radius: 12px; padding: 12px; margin-bottom: 8px; border: 1px solid #80deea; }
.news-headline { color: #006064; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.news-desc { color: #00838f; font-size: 12px; }

/* PERMISSION INFO (ONBOARDING) */
.permission-info { background: #e0f7fa; border: 1px solid #80deea; border-radius: 12px; padding: 4px 0; }
.permission-item { display: flex; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid #b2ebf2; }
.permission-item:last-child { border-bottom: none; }
.permission-icon { font-size: 18px; margin-right: 12px; flex-shrink: 0; }
.permission-text { flex: 1; }
.permission-name { color: #006064; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.permission-desc { color: #00838f; font-size: 12px; line-height: 1.4; }

/* AUTH */
#authScreen { justify-content: center; align-items: center; background: radial-gradient(ellipse at center, #e0f7fa 0%, #b2ebf2 100%); padding: 20px; }
.auth-container { width: 100%; max-width: 420px; }
.auth-header { text-align: center; margin-bottom: 30px; }
.auth-logo { font-size: 48px; font-weight: bold; color: #00bcd4; letter-spacing: 3px; text-shadow: 0 0 20px rgba(0,188,212,0.4); }
.auth-subtitle { color: #00838f; font-size: 16px; margin-top: 8px; }
.auth-form { background: rgba(255,255,255,0.95); border-radius: 16px; padding: 30px; border: 1px solid rgba(0,188,212,0.2); box-shadow: 0 8px 32px rgba(0,188,212,0.15); }
.auth-astro-showcase { margin: 0 0 16px; }
.astro-slideshow { position: relative; min-height: 210px; overflow: hidden; border: 1px solid rgba(0,188,212,0.35); border-radius: 12px; background: #063b4c; box-shadow: 0 6px 20px rgba(0,188,212,0.15); }
.astro-slide { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; margin: 0; opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
.astro-slide.active { opacity: 1; pointer-events: auto; }
.astro-slide img { width: 100%; height: 210px; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.06); }
.astro-slide figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; color: #fff; background: rgba(0, 45, 60, 0.88); font-size: 12px; }
.astro-slide figcaption span { color: #b2ebf2; text-align: right; }
.astro-slide-control { position: absolute; z-index: 1; top: calc(50% - 20px); width: 36px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 45, 60, 0.76); color: #fff; cursor: pointer; font-size: 24px; line-height: 1; }
.astro-slide-control:hover, .astro-slide-control:focus-visible { background: #00a9c0; outline: 2px solid #fff; outline-offset: 2px; }
.astro-slide-control.previous { left: 10px; }
.astro-slide-control.next { right: 10px; }
.astro-credit { margin: 7px 2px 0; color: #00838f; font-size: 11px; text-align: center; }
.astro-credit a { color: #007c91; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 24px; background: #e0f7fa; padding: 4px; border-radius: 12px; }
.auth-tab { flex: 1; padding: 10px; border: none; background: transparent; color: #00838f; font-size: 15px; font-weight: 600; cursor: pointer; border-radius: 10px; transition: all 0.3s; }
.auth-tab.active { background: #00bcd4; color: #fff; }
.auth-form-body { display: none; }
.auth-form-body.active { display: block; }
.form-group { margin-bottom: 16px; }
.registration-label { display: block; color: #006064; font-size: 13px; font-weight: 600; margin: 0 0 6px 2px; }
.field-help { color: #00838f; font-size: 12px; line-height: 1.35; margin: 6px 2px 0; }
.form-input { width: 100%; padding: 14px 16px; background: #e0f7fa; border: 1px solid #80deea; border-radius: 12px; color: #006064; font-size: 15px; outline: none; transition: border-color 0.3s; }
.form-input:focus { border-color: #00bcd4; }
.form-input::placeholder { color: #80deea; }
.checkbox-label { display: flex; align-items: flex-start; gap: 10px; color: #00838f; font-size: 13px; line-height: 1.4; cursor: pointer; }
.checkbox-label input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: #00bcd4; flex-shrink: 0; }
.checkbox-label input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }
.checkbox-label a { color: #00bcd4; text-decoration: underline; }
.read-legal-btn { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 9px; padding: 11px 13px; border: 1px solid #00bcd4; border-radius: 10px; background: #f5fdfe; color: #006064; cursor: pointer; font: 600 14px inherit; text-align: left; }
.read-legal-btn span { color: #00838f; font-size: 12px; font-weight: 400; }
.read-legal-btn:hover, .read-legal-btn:focus-visible { background: #e0f7fa; outline: 2px solid #00bcd4; outline-offset: 2px; }
.avatar-label { display: block; color: #00838f; font-size: 13px; margin-bottom: 10px; }
.avatar-create { display: flex; align-items: flex-start; gap: 16px; }
.avatar-preview { width: 72px; height: 72px; border-radius: 50%; background: #e0f7fa; border: 2px solid #00bcd4; display: flex; align-items: center; justify-content: center; font-size: 36px; overflow: hidden; flex-shrink: 0; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-actions { flex: 1; }
.avatar-upload-btn { display: inline-flex; align-items: center; gap: 6px; background: #00bcd4; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.avatar-upload-btn:hover { background: #00acc1; }
.avatar-emoji-title { color: #0097a7; font-size: 12px; margin: 10px 0 6px; }
.avatar-emoji-row { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-emoji { width: 36px; height: 36px; border-radius: 8px; background: #e0f7fa; border: 1px solid #80deea; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; }
.avatar-emoji:hover { border-color: #00bcd4; }
.avatar-emoji.selected { background: #00bcd4; border-color: #00bcd4; }
.auth-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #00bcd4, #26c6da); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; margin-top: 8px; font-family: inherit; }
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,188,212,0.4); }
.support-placeholder-btn, .profile-tip-btn { border: 1px solid #00bcd4; border-radius: 12px; background: rgba(255,255,255,0.88); color: #006064; cursor: pointer; font: 600 14px inherit; padding: 12px 16px; }
.support-placeholder-btn:hover, .profile-tip-btn:hover { background: #e0f7fa; }
.support-placeholder-btn span, .profile-tip-btn span { display: block; color: #00838f; font-size: 11px; font-weight: 500; margin-top: 2px; }
.registration-tip-btn { width: 100%; margin: 2px 0 8px; }
.profile-tip-btn { display: block; width: 100%; margin-top: 10px; }
.tip-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.tip-amounts button { min-height: 46px; border: 1px solid var(--beta-line, #80deea); border-radius: 10px; color: var(--beta-ink, #006064); background: var(--beta-panel-soft, #f4fdfe); cursor: pointer; font: 750 14px inherit; }
.tip-amounts button.active { color: #fff; border-color: var(--beta-accent, #7564e9); background: linear-gradient(135deg, #7564e9, #4a8fcb); }
.share-photo-preview { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 12px; padding: 10px; border: 1px solid var(--beta-line, #80deea); border-radius: 12px; background: var(--beta-panel-soft, rgba(255,255,255,.88)); }
.share-photo-preview[hidden] { display: none; }
.share-photo-preview img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; background: #02040d; }
.share-photo-preview span { min-width: 0; overflow-wrap: anywhere; color: var(--beta-muted, #00838f); font-size: 12px; }
.event-support { padding: 0 16px 28px; text-align: center; }
.event-support .support-placeholder-btn { width: min(100%, 360px); }
.support-modal-content { max-width: 460px; }
.support-placeholder-note { border-left: 3px solid #00bcd4; background: #e0f7fa; color: #006064; padding: 10px 12px; font-size: 13px; }
.auth-error { color: #ff5252; font-size: 13px; text-align: center; margin-top: 12px; min-height: 20px; }

/* COSMOS INTRO */
#cosmosIntro {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #b2ebf2 0%, #80deea 50%, #4dd0e1 100%);
    overflow: hidden;
}
#cosmosIntro.active { display: flex; }
.cosmos-intro-bg,
.cosmos-intro-nebula,
.cosmos-intro-stars {
    position: absolute;
    inset: -10%;
}
.cosmos-intro-bg {
    background-image:
        url('https://images-assets.nasa.gov/image/GSFC_20171208_Archive_e001861/GSFC_20171208_Archive_e001861~orig.jpg');
    background-size: cover;
    background-position: center;
    filter: brightness(0.5) saturate(1.2) hue-rotate(160deg);
    transform: scale(1.1);
}
.cosmos-intro-nebula {
    background-image:
        url('https://images-assets.nasa.gov/image/PIA12235/PIA12235~orig.jpg');
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    opacity: 0.35;
    filter: saturate(1.35) hue-rotate(140deg);
    animation: nebulaPulse 6s ease-in-out infinite alternate;
}
.cosmos-intro-stars {
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 1px, transparent 2px),
      radial-gradient(circle at 65% 20%, rgba(171,220,255,.8) 1px, transparent 2px),
      radial-gradient(circle at 80% 70%, rgba(255,255,255,.7) 1.5px, transparent 2.5px),
      radial-gradient(circle at 30% 80%, rgba(194,178,255,.8) 1px, transparent 2px);
    background-size: 260px 260px;
    opacity: .5;
    animation: starDrift 20s linear infinite;
}
.cosmos-core {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff, #b2ebf2 35%, #4dd0e1 60%, rgba(0,188,212,.15) 80%, transparent 100%);
    box-shadow: 0 0 40px rgba(0,188,212,.8), 0 0 100px rgba(0,188,212,.55);
    transform: scale(0.1);
    opacity: 0;
}
.cosmos-intro-text {
    position: relative;
    z-index: 2;
    max-width: 760px;
    text-align: center;
    padding: 0 24px;
    color: #006064;
    font-weight: 700;
    letter-spacing: .3px;
    text-shadow: 0 2px 14px rgba(255,255,255,.65);
    font-size: clamp(22px, 3.4vw, 42px);
    opacity: 0;
    transform: translateY(8px);
}
#cosmosIntro.phase-welcome .cosmos-intro-text {
    opacity: 1;
    transform: translateY(0);
    transition: all .8s ease;
}
#cosmosIntro.phase-bigbang #cosmosCore {
    opacity: 1;
    animation: bigBangBlast 2.6s ease-out forwards;
}
#cosmosIntro.phase-galaxies .cosmos-intro-bg {
    filter: brightness(.6) saturate(1.25) hue-rotate(160deg);
    transform: scale(1.02);
    transition: all 2s ease;
}
#cosmosIntro.phase-galaxies .cosmos-intro-nebula {
    opacity: .55;
}
#cosmosIntro.phase-quote .cosmos-intro-text {
    opacity: 1;
    transform: translateY(0);
    transition: all .8s ease;
}

@keyframes nebulaPulse {
    from { transform: scale(1.04); opacity: .3; }
    to { transform: scale(1.12); opacity: .5; }
}
@keyframes starDrift {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-80px, -40px, 0); }
}
@keyframes bigBangBlast {
    0% { transform: scale(.1); opacity: 0; }
    20% { transform: scale(.35); opacity: 1; }
    55% { transform: scale(2.2); opacity: .95; }
    100% { transform: scale(4.8); opacity: 0; }
}

/* APP */
#appScreen { padding-bottom: 0; }
.tab-content { flex: 1; overflow-y: auto; padding-bottom: 80px; }
.tab-pane { display: none; animation: fadeIn 0.3s ease; }
.tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* TAB BAR */
.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); border-top: 1px solid #80deea; display: flex; justify-content: space-around; overflow-x: auto; padding: 8px 0 16px; z-index: 100; }
.tab-btn { min-width: 64px; flex: 1; background: none; border: none; color: #00838f; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 12px; transition: color 0.3s; font-family: inherit; }
.tab-btn.active { color: #00bcd4; }
.tab-icon { font-size: 22px; }
.tab-label { font-size: 11px; font-weight: 600; }

/* SKY VIEW */
.sky-view { background: linear-gradient(180deg, #b2ebf2 0%, #e0f7fa 100%); padding: 50px 20px 20px; min-height: 400px; }
.sky-header { text-align: center; margin-bottom: 16px; }
.sky-title { font-size: 28px; font-weight: bold; color: #006064; }
.sky-location { color: #00838f; font-size: 14px; margin-top: 4px; }
.sky-canvas { position: relative; width: 100%; height: 250px; background: rgba(255,255,255,0.5); border-radius: 16px; border: 1px solid #80deea; overflow: hidden; }
#starCanvas { width: 100%; height: 100%; cursor: zoom-in; touch-action: none; }
.sky-info-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.sky-status { font-size: 20px; font-weight: 600; color: #006064; margin-bottom: 4px; }
.sky-stats { color: #00838f; font-size: 14px; }
.sky-actions { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.sky-btn { background: rgba(255,255,255,0.8); border: 1px solid #80deea; color: #006064; padding: 10px 24px; border-radius: 8px; font-size: 14px; cursor: pointer; transition: background 0.3s; font-family: inherit; }
.sky-btn:hover { background: rgba(255,255,255,1); }
.star-detail { display: none; position: absolute; left: 12px; bottom: 12px; max-width: min(280px, calc(100% - 24px)); padding: 10px 12px; border: 1px solid rgba(128,222,234,.65); border-radius: 8px; background: rgba(0,45,52,.9); color: #e0f7fa; font-size: 12px; line-height: 1.45; pointer-events: none; }
.star-detail.active { display: block; }
.star-detail strong { display: block; color: #fff; font-size: 14px; }
.sky-zoom-hint { position: absolute; right: 10px; bottom: 9px; color: rgba(224,247,250,.78); font-size: 11px; pointer-events: none; }
.sky-body-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.sky-body-row > div { padding: 10px 4px; border-top: 1px solid #80deea; border-bottom: 1px solid #80deea; }
.sky-body-row span,.sky-body-row strong,.sky-body-row small { display: block; color: #006064; }
.sky-body-row span { font-size: 12px; font-weight: 700; }
.sky-body-row strong { margin-top: 3px; font-size: 12px; }
.sky-body-row small { margin-top: 2px; color: #00838f; font-size: 11px; }

/* CARDS */
.card { background: rgba(255,255,255,0.92); margin: 16px; padding: 20px; border-radius: 16px; border: 1px solid #80deea; box-shadow: 0 4px 20px rgba(0,188,212,0.1); }
.card-title { font-size: 18px; font-weight: bold; color: #006064; margin-bottom: 16px; }

/* QUALITY */
.quality-meter { display: flex; align-items: center; gap: 16px; }
.quality-bar { flex: 1; height: 8px; background: #e0f7fa; border-radius: 4px; overflow: hidden; }
.quality-fill { height: 100%; border-radius: 4px; transition: width 1s ease; background: linear-gradient(90deg, #ff5252, #ffb74d, #4caf50); }
.quality-label { color: #00838f; font-size: 14px; white-space: nowrap; }

/* EVENTS */
.event-item { padding: 12px 0; border-bottom: 1px solid #80deea; }
.event-item:last-child { border-bottom: none; }
.event-name { color: #006064; font-size: 15px; font-weight: 600; }
.event-date { color: #00bcd4; font-size: 13px; margin-top: 4px; }
.event-desc { color: #00838f; font-size: 13px; margin-top: 4px; }

/* QUICK ACTIONS */
.quick-actions { display: flex; flex-wrap: wrap; padding: 8px 16px; gap: 12px; }
.quick-action { background: rgba(255,255,255,0.92); border-radius: 12px; padding: 16px; text-align: center; flex: 1; min-width: calc(50% - 6px); border: 1px solid #80deea; cursor: pointer; transition: transform 0.2s, border-color 0.2s; }
.quick-action:hover { transform: translateY(-2px); border-color: #00bcd4; }
.qa-icon { font-size: 28px; margin-bottom: 8px; }
.qa-label { color: #006064; font-size: 13px; font-weight: 600; }

/* TAB HEADER */
.tab-header { padding: 50px 20px 20px; }
.tab-header h1 { font-size: 28px; font-weight: bold; color: #006064; }
.tab-header p { color: #00838f; font-size: 14px; margin-top: 4px; }

/* MAP */
.map-container { margin: 0 16px 16px; height: 300px; border-radius: 16px; overflow: hidden; border: 1px solid #80deea; position: relative; }
.map-container iframe { width: 100%; height: 100%; border: 0; display: block; }
.gis-panel { margin: 16px 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid #80deea; border-bottom: 1px solid #80deea; background: rgba(255,255,255,.72); }
.gis-panel > div { min-width: 0; padding: 11px 12px; }
.gis-panel span, .gis-panel strong { display: block; overflow-wrap: anywhere; }
.gis-panel span { color: #00838f; font-size: 11px; }
.gis-panel strong { margin-top: 3px; color: #006064; font-size: 13px; }
.map-placeholder { margin: 0 16px 16px; height: 250px; background: rgba(255,255,255,0.92); border-radius: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #80deea; }
.map-icon { font-size: 48px; }
.map-text { color: #006064; font-size: 16px; font-weight: 600; margin-top: 8px; }
.map-subtext { color: #00838f; font-size: 12px; margin-top: 4px; }
.location-card { background: rgba(255,255,255,0.92); border-radius: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid #80deea; }
.location-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.location-name { color: #006064; font-size: 16px; font-weight: 600; }
.bortle-badge { background: #00bcd4; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px; }
.location-desc { color: #00838f; font-size: 13px; margin-bottom: 8px; }
.location-meta { display: flex; justify-content: space-between; font-size: 12px; color: #00838f; margin-bottom: 8px; }
.location-coord { color: #00bcd4; }
.location-highlights { color: #4caf50; font-size: 12px; margin-bottom: 8px; }
.share-buttons { display: flex; gap: 8px; }
.share-btn { background: #e0f7fa; border: 1px solid #80deea; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 18px; transition: background 0.2s; }
.share-btn:hover { background: #b2ebf2; }

/* COMMUNITY */
.community-tabs { display: flex; padding: 0 16px; gap: 8px; margin-bottom: 16px; }
.community-tab { padding: 8px 20px; border-radius: 20px; background: rgba(255,255,255,0.92); border: 1px solid #80deea; color: #00838f; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; font-family: inherit; }
.community-tab.active { background: #00bcd4; border-color: #00bcd4; color: #fff; }
.community-section { display: none; padding: 0 16px; }
.community-section.active { display: block; }

/* HOME FEED */
#tabHome .tab-header p { color: #00838f; }
#homeFeed .post-card {
    background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(224,247,250,.96));
    border: 1px solid rgba(0,188,212,.28);
}
.post-card { background: rgba(255,255,255,0.92); border-radius: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid #80deea; }
.post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.post-avatar { font-size: 32px; }
.post-user { color: #006064; font-size: 14px; font-weight: 600; }
.post-target { color: #00bcd4; font-size: 12px; margin-top: 2px; }
.post-caption { color: #00838f; font-size: 14px; margin-bottom: 12px; }
.post-image { display: block; width: 100%; max-height: min(70vh, 760px); object-fit: contain; margin: 0 0 12px; border: 1px solid rgba(0,188,212,.25); border-radius: 12px; background: #02040d; }
.post-actions { display: flex; gap: 20px; border-top: 1px solid #80deea; padding-top: 12px; }
.post-action { color: #00838f; font-size: 13px; cursor: pointer; transition: color 0.2s; background: none; border: none; font-family: inherit; }
.post-action:hover { color: #00bcd4; }
.comments-modal-content { max-width: 640px; }
.comments-list { display: grid; gap: 10px; max-height: 38vh; overflow-y: auto; padding-bottom: 16px; }
.comment-card { border: 1px solid #b2ebf2; border-radius: 10px; padding: 12px; background: #f5fdfe; }
.comment-meta { display: flex; justify-content: space-between; gap: 12px; color: #006064; font-size: 12px; }
.comment-content { color: #006064; font-size: 14px; margin: 8px 0; overflow-wrap: anywhere; }
.comment-actions { display: flex; gap: 12px; }
.comment-action, .secondary-btn { border: 0; color: #00838f; background: transparent; cursor: pointer; font: inherit; font-size: 12px; padding: 2px 0; }
.comment-action:hover, .secondary-btn:hover { color: #006064; text-decoration: underline; }
.comment-composer { border-top: 1px solid #80deea; padding-top: 16px; }
.comment-composer label { display: block; color: #006064; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.comment-input { min-height: 86px; resize: vertical; font-family: inherit; }
.conduct-notice { color: #8a5b00; background: #fff8df; border-left: 3px solid #e6a300; font-size: 12px; line-height: 1.4; padding: 8px 10px; margin: 8px 0; }
.comment-composer-actions { display: flex; align-items: center; gap: 12px; }
.comment-composer-actions .auth-btn { margin: 0; }
.group-card { background: rgba(255,255,255,0.92); border-radius: 12px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #80deea; }
.group-info { display: flex; align-items: center; gap: 12px; }
.group-icon { font-size: 32px; }
.group-name { color: #006064; font-size: 16px; font-weight: 600; }
.group-meta { color: #00838f; font-size: 12px; margin-top: 2px; }
.join-btn { background: #00bcd4; border: none; color: #fff; padding: 8px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; font-family: inherit; }
.event-card { background: rgba(255,255,255,0.92); border-radius: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid #80deea; }
.event-title { color: #006064; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.event-detail { color: #00838f; font-size: 13px; margin-bottom: 4px; }
.event-actions { display: flex; gap: 12px; margin-top: 12px; }
.event-btn { background: #00bcd4; border: none; color: #fff; padding: 8px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px; font-family: inherit; }

/* CHILD SAFETY */
.child-safe-badge {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.content-restriction-notifier {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 16px;
    color: #4caf50;
    font-size: 13px;
}

.restriction-icon {
    font-size: 18px;
}

.restriction-text {
    flex: 1;
    line-height: 1.4;
}

/* PROFILE */
.profile-card { text-align: center; padding: 50px 20px 20px; }
.profile-avatar { font-size: 64px; margin-bottom: 12px; }
.profile-name { font-size: 24px; font-weight: bold; color: #006064; }
.profile-username { color: #00838f; font-size: 16px; margin-top: 4px; }
.profile-email { color: #0097a7; font-size: 14px; margin-top: 4px; }
.stats-row { display: flex; justify-content: space-around; margin: 16px; padding: 20px; background: rgba(255,255,255,0.92); border-radius: 12px; }
.stat-box { text-align: center; }
.stat-number { font-size: 24px; font-weight: bold; color: #006064; }
.stat-label { color: #00838f; font-size: 12px; margin-top: 4px; }
.menu-section { padding: 0 16px; }
.menu-item { display: flex; align-items: center; background: rgba(255,255,255,0.92); padding: 16px; border-radius: 12px; margin-bottom: 8px; border: 1px solid #80deea; cursor: pointer; transition: border-color 0.2s; }
.menu-item:hover { border-color: #00bcd4; }
.menu-icon { font-size: 20px; margin-right: 12px; }
.menu-text { color: #006064; font-size: 16px; flex: 1; }
.menu-arrow { color: #0097a7; font-size: 20px; }
.logout-btn { margin: 16px; padding: 14px; border-radius: 12px; background: transparent; border: 1px solid #ff5252; color: #ff5252; font-size: 16px; font-weight: 600; cursor: pointer; width: calc(100% - 32px); font-family: inherit; }
.logout-btn:hover { background: rgba(255,82,82,0.1); }

/* STORE */
.donation-banner { margin: 0 16px 16px; background: linear-gradient(135deg, #00bcd4, #4dd0e1); border-radius: 16px; padding: 24px; text-align: center; cursor: pointer; }
.banner-title { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 8px; }
.banner-text { color: #e0f7fa; font-size: 14px; margin-bottom: 16px; }
.banner-btn { background: #fff; color: #00bcd4; border: none; padding: 10px 32px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s; font-family: inherit; }
.banner-btn:hover { transform: scale(1.05); }
.store-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); padding: 8px 16px 28px; gap: 14px; overflow: clip; }
.merch-status-card { display: grid; gap: 4px; margin: 0 16px 8px; padding: 14px; border: 1px solid #80deea; border-radius: 12px; background: rgba(255,255,255,0.92); color: #006064; }
.merch-status-card span { color: #00838f; font-size: 13px; }
.store-item { min-width: 0; max-width: 100%; display: flex; flex-direction: column; overflow: hidden; background: rgba(255,255,255,0.92); border-radius: 12px; padding: 14px; text-align: center; border: 1px solid #80deea; }
.store-item-image { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; margin-bottom: 12px; border: 1px solid rgba(128,222,234,.55); border-radius: 10px; background: rgba(224,247,250,.75); font-size: 48px; }
.store-item-image img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; }
.store-item-placeholder { line-height: 1; }
.store-item-name { min-height: 2.7em; color: #006064; font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; overflow-wrap: anywhere; }
.store-item-price { color: #00bcd4; font-size: 18px; font-weight: bold; margin-bottom: 12px; }
.buy-btn { margin-top: auto; min-height: 42px; background: #00bcd4; border: none; color: #fff; padding: 8px 16px; border-radius: 8px; width: 100%; max-width: 100%; font-weight: 600; cursor: pointer; font-family: inherit; }
.buy-btn:hover { background: #00acc1; }
.support-card { text-align: center; }
.support-card p { color: #00838f; font-size: 14px; margin-bottom: 8px; }
.support-note { color: #0097a7; font-size: 12px; margin-top: 12px; }

/* OPS / API PANELS */
.ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.api-output {
    margin-top: 12px;
    background: #e0f7fa;
    border: 1px solid #80deea;
    border-radius: 10px;
    padding: 10px;
    color: #006064;
    font-size: 12px;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 720px) {
    .ops-grid { grid-template-columns: 1fr; }
    .event-actions { flex-wrap: wrap; }
}

/* MODALS */
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,188,212,0.3); z-index: 1000; justify-content: center; align-items: center; padding: 20px; }
.modal.active { display: flex; }
.modal-content { background: rgba(255,255,255,0.97); border-radius: 16px; max-width: 600px; width: 100%; max-height: 80vh; overflow-y: auto; border: 1px solid #80deea; box-shadow: 0 8px 32px rgba(0,188,212,0.2); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #80deea; position: sticky; top: 0; background: rgba(255,255,255,0.97); z-index: 1; }
.modal-header h2 { color: #006064; font-size: 20px; }
.modal-close { background: none; border: none; color: #00838f; font-size: 24px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background 0.2s; }
.modal-close:hover { background: #e0f7fa; color: #006064; }
.modal-body { padding: 20px; color: #00838f; font-size: 14px; line-height: 1.6; }
.modal-body h3 { color: #006064; font-size: 16px; margin-top: 20px; margin-bottom: 8px; }
.modal-body h3:first-child { margin-top: 0; }
.modal-body p { margin-bottom: 12px; }
.legal-modal-content { display: flex; flex-direction: column; overflow: hidden; }
.legal-modal-body { max-height: min(58vh, 560px); overflow-y: auto; }
.legal-reading-status { position: sticky; top: -20px; z-index: 1; margin: -20px -20px 14px; padding: 10px 20px; background: #e0f7fa; color: #006064; font-weight: 600; }
.legal-document { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #006064; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.legal-modal-footer { padding: 14px 20px; border-top: 1px solid #80deea; background: rgba(255,255,255,0.97); }
.legal-modal-footer .auth-btn { margin: 0; }
.legal-modal-footer .auth-btn:disabled { cursor: not-allowed; opacity: 0.55; transform: none; box-shadow: none; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #e0f7fa; }
::-webkit-scrollbar-thumb { background: #80deea; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4dd0e1; }
.language-group{margin:14px 4px 5px;color:#51666b;font-size:11px;letter-spacing:0;text-transform:uppercase}

/* ====== LIVE BETA EXPERIENCE ====== */
:root {
  --beta-bg: #060914;
  --beta-bg-raised: #0c1126;
  --beta-panel: rgba(15, 21, 46, 0.88);
  --beta-panel-solid: #111731;
  --beta-panel-soft: rgba(26, 34, 70, 0.62);
  --beta-ink: #f5f7ff;
  --beta-muted: #99a2c1;
  --beta-line: rgba(155, 169, 222, 0.19);
  --beta-accent: #9685ff;
  --beta-accent-2: #57c7ff;
  --beta-success: #4fe1a7;
  --beta-danger: #ff728d;
  --beta-shadow: rgba(0, 0, 0, 0.38);
}

/* Phase 018 Research Network — additive to the existing sky renderer. */
.research-panel {
  position: fixed;
  z-index: 820;
  inset: 64px 0 0 auto;
  width: min(460px, 94vw);
  display: flex;
  flex-direction: column;
  color: var(--beta-ink, #f5f7ff);
  background: color-mix(in srgb, var(--beta-panel-solid, #111731) 94%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--beta-accent, #64e7ff) 42%, transparent);
  box-shadow: -28px 0 80px rgba(0, 0, 0, .46);
  backdrop-filter: blur(22px);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform .24s ease, visibility 0s linear .24s;
}
.research-panel.active { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.research-panel-header { min-height: 60px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px 11px 17px; border-bottom: 1px solid var(--beta-line, rgba(128,222,234,.3)); background: color-mix(in srgb, var(--beta-panel-solid, #111731) 97%, transparent); }
.research-panel-header > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.research-panel-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; letter-spacing: .03em; }
.research-panel-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--beta-accent, #64e7ff) 60%, transparent); border-radius: 50%; color: var(--beta-accent, #64e7ff); background: color-mix(in srgb, var(--beta-accent, #64e7ff) 10%, transparent); }
.research-panel-header button, .research-panel button { min-height: 44px; border: 1px solid var(--beta-line, rgba(128,222,234,.3)); border-radius: 10px; color: var(--beta-ink, #f5f7ff); background: var(--beta-panel-soft, rgba(26,34,70,.72)); cursor: pointer; font: 750 12px inherit; }
.research-panel-header button { width: 44px; padding: 0; font-size: 17px; }
.research-panel button:hover, .research-panel button:focus-visible, .research-panel a:focus-visible, .research-panel input:focus-visible, .research-mode-btn:focus-visible { outline: 2px solid var(--beta-accent, #64e7ff); outline-offset: 2px; border-color: var(--beta-accent, #64e7ff); }
.research-panel-body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px max(32px, env(safe-area-inset-bottom)); scroll-padding-top: 20px; }
.research-state, .research-search-state { min-height: 52vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.research-state h3, .research-search-state h3 { margin: 10px 0 8px; color: var(--beta-ink, #f5f7ff); font-size: 22px; line-height: 1.15; }
.research-state p, .research-search-state p { margin: 0 0 16px; color: var(--beta-muted, #aeb7d4); font-size: 13px; line-height: 1.6; }
.research-state small { color: var(--beta-muted, #aeb7d4); }
.research-state button { margin-top: 16px; padding: 0 14px; }
.research-state-symbol { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--beta-line, rgba(128,222,234,.3)); border-radius: 15px; color: var(--beta-accent, #64e7ff); font-size: 22px; }
.research-loader { width: 34px; height: 34px; border: 2px solid color-mix(in srgb, var(--beta-accent, #64e7ff) 20%, transparent); border-top-color: var(--beta-accent, #64e7ff); border-radius: 50%; animation: researchSpin .8s linear infinite; }
@keyframes researchSpin { to { transform: rotate(360deg); } }
.research-search-form { width: 100%; margin-top: 12px; }
.research-search-form label { display: block; margin-bottom: 7px; color: var(--beta-muted, #aeb7d4); font-size: 11px; font-weight: 750; }
.research-search-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.research-search-form input { min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid var(--beta-line, rgba(128,222,234,.3)); border-radius: 10px; color: var(--beta-ink, #f5f7ff); background: rgba(4, 8, 24, .58); }
.research-search-form button { padding: 0 14px; }
.research-observable-button { width: 100%; margin-top: 12px; padding: 0 14px; color: var(--beta-accent, #64e7ff) !important; }
.research-observable-list { display: grid; gap: 8px; margin-top: 14px; }
.research-observable-list button { min-height: 58px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 9px 12px; text-align: left; }
.research-observable-list button span { margin-top: 4px; color: var(--beta-muted, #aeb7d4); font-size: 9px; }
.small-body-a11y-list { position: absolute; top: 62px; right: 10px; z-index: 5; width: min(230px, 46%); max-height: 160px; overflow: auto; display: grid; gap: 5px; padding: 7px; border: 1px solid rgba(255,154,213,.38); border-radius: 10px; background: rgba(5,8,24,.78); backdrop-filter: blur(10px); }
.small-body-a11y-list[hidden] { display: none; }
.small-body-a11y-list button { min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 0; border-radius: 7px; color: #ffe2f5; background: rgba(255,154,213,.08); font-size: 9px; text-align: left; cursor: pointer; }
.small-body-a11y-list button:focus-visible { outline: 2px solid #ff9ad5; outline-offset: 1px; }
.small-body-marker-symbol { width: 14px; flex: 0 0 14px; text-align: center; }
.research-results { display: grid; gap: 9px; }
.research-results > p { color: var(--beta-muted, #aeb7d4); font-size: 12px; }
.research-results button { min-height: 62px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 10px 12px; text-align: left; }
.research-results button strong { color: var(--beta-ink, #f5f7ff); }
.research-results button span { margin-top: 3px; color: var(--beta-muted, #aeb7d4); font-size: 10px; }
.research-object { display: grid; gap: 12px; }
.research-object-hero { padding: 6px 2px 12px; }
.research-kicker { margin: 0 0 5px !important; color: var(--beta-accent, #64e7ff) !important; font-size: 9px !important; font-weight: 850; letter-spacing: .13em; }
.research-object-hero h2 { margin: 0; color: var(--beta-ink, #f5f7ff); font-size: clamp(24px, 7vw, 34px); line-height: 1; letter-spacing: -.03em; }
.research-object-hero > p:last-child { margin: 8px 0 0; color: var(--beta-muted, #aeb7d4); font-size: 12px; }
.research-object section { padding: 15px; border: 1px solid var(--beta-line, rgba(128,222,234,.3)); border-radius: 14px; background: color-mix(in srgb, var(--beta-panel-soft, rgba(26,34,70,.62)) 84%, transparent); }
.research-object section > h3, .research-section-heading h3 { margin: 0 0 12px; color: var(--beta-ink, #f5f7ff); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.research-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.research-section-heading h3 { margin: 0; }
.research-section-heading button { min-height: 38px; padding: 0 11px; color: var(--beta-accent, #64e7ff); }
.research-section-heading span { color: var(--beta-muted, #aeb7d4); font-size: 9px; }
.research-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.research-chip-list > span { padding: 5px 7px; border: 1px solid var(--beta-line, rgba(128,222,234,.3)); border-radius: 7px; color: var(--beta-muted, #aeb7d4); font-size: 9px; }
.research-chip-list > span strong { color: var(--beta-ink, #f5f7ff); }
.research-object details { margin-top: 12px; }
.research-object summary { min-height: 40px; display: flex; align-items: center; color: var(--beta-muted, #aeb7d4); cursor: pointer; font-size: 11px; }
.research-data-list { margin: 0; }
.research-data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--beta-line, rgba(128,222,234,.3)) 58%, transparent); }
.research-data-row:first-child { border-top: 0; padding-top: 0; }
.research-data-row:last-child { padding-bottom: 0; }
.research-data-row dt { color: var(--beta-muted, #aeb7d4); font-size: 10px; }
.research-data-row dd { margin: 0; color: var(--beta-ink, #f5f7ff); font: 750 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; overflow-wrap: anywhere; }
.research-data-row small { display: block; margin-top: 5px; }
.research-context-note, .research-empty { margin: 11px 0 0; color: var(--beta-muted, #aeb7d4); font-size: 10px; line-height: 1.5; }
.research-empty:first-child { margin-top: 0; }
.research-composition-group + .research-composition-group { margin-top: 14px; }
.research-composition-group h4 { margin: 0 0 8px; color: var(--beta-accent, #64e7ff); font-size: 10px; letter-spacing: .08em; }
.research-evidence-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid currentColor; border-radius: 999px; color: #b8c8ff; background: rgba(102,121,188,.09); font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.research-evidence-badge[data-evidence="MEASURED"] { color: #68e8ff; }
.research-evidence-badge[data-evidence="PEER_REVIEWED"] { color: #84efb2; }
.research-evidence-badge[data-evidence="PREPRINT"] { color: #f7ce73; border-style: dashed; }
.research-evidence-badge[data-evidence="INSTITUTIONAL_REPORT"] { color: #b6c7ff; }
.research-evidence-badge[data-evidence="MODEL"] { color: #d5a8ff; border-style: dashed; }
.research-evidence-badge[data-evidence="HYPOTHESIS"] { color: #ffba82; border-style: dashed; }
.research-evidence-badge[data-evidence="DISPUTED"] { color: #ff9aa8; border-width: 2px; }
.research-evidence-badge[data-evidence="RETRACTED"] { color: #ff7588; border-width: 2px; text-decoration: line-through; }
.research-evidence-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; }
.research-evidence-summary + .research-evidence-summary { border-top: 1px solid color-mix(in srgb, var(--beta-line, rgba(128,222,234,.3)) 55%, transparent); }
.research-evidence-summary > span:last-child { color: var(--beta-muted, #aeb7d4); font-size: 9px; }
.research-provenance-card + .research-provenance-card { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--beta-line, rgba(128,222,234,.3)); }
.research-provenance-card dl { margin: 0; }
.research-provenance-card dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; margin-bottom: 6px; }
.research-provenance-card dt { color: var(--beta-muted, #aeb7d4); font-size: 9px; }
.research-provenance-card dd { margin: 0; color: var(--beta-ink, #f5f7ff); font-size: 10px; overflow-wrap: anywhere; }
.research-provenance-card a { display: inline-flex; min-height: 40px; align-items: center; color: var(--beta-accent, #64e7ff); font-size: 10px; font-weight: 750; text-decoration: none; }
.research-analysis-card { display: grid; gap: 12px; }
.research-analysis-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.research-analysis-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.research-status-badge,.research-measured-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 7px; border: 1px solid rgba(174,183,212,.36); border-radius: 999px; color: var(--beta-muted,#aeb7d4); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.research-status-badge[data-status="SUCCEEDED"] { border-color: rgba(101,220,165,.4); color: #65dca5; }
.research-status-badge[data-status="FAILED"],.research-status-badge[data-status="CANCELLED"] { border-color: rgba(255,139,139,.45); color: #ff9b9b; }
.research-analysis-heading strong { display: block; color: var(--beta-ink, #f5f7ff); font-size: 14px; }
.research-analysis-heading small { display: block; margin-top: 4px; color: var(--beta-muted, #aeb7d4); font-size: 9px; }
.research-analysis-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.research-analysis-value { padding: 11px; border: 1px solid color-mix(in srgb, #d5a8ff 38%, transparent); border-radius: 11px; background: rgba(119, 74, 163, .09); }
.research-analysis-value span { display: block; margin-bottom: 5px; color: var(--beta-muted, #aeb7d4); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.research-analysis-value output { display: block; color: var(--beta-ink, #f5f7ff); font: 800 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.research-analysis-inputs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.research-analysis-inputs li { display: flex; align-items: center; gap: 6px; color: #68e8ff; font-size: 9px; }
.research-measured-badge { border-color: rgba(104,232,255,.34); color: #68e8ff; }
.research-analysis-warning { margin: 0; padding: 10px 11px; border-left: 3px solid #d5a8ff; color: var(--beta-muted, #aeb7d4); background: rgba(119, 74, 163, .08); font-size: 10px; line-height: 1.55; }
.research-analysis-provenance code { color: var(--beta-muted, #aeb7d4); font-size: 8px; overflow-wrap: anywhere; }
.research-artifact-details { margin-top: 10px; }
.research-artifact-details ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.research-artifact-details li { display: grid; gap: 3px; min-width: 0; padding: 7px 8px; border-radius: 8px; background: rgba(255,255,255,.025); }
.research-analysis-state { padding: 12px; border: 1px dashed rgba(174,183,212,.3); border-radius: 10px; }
.research-analysis-state p { margin: 5px 0 0; color: var(--beta-muted,#aeb7d4); font-size: 10px; line-height: 1.5; }
.research-actions-section button { width: 100%; padding: 0 14px; color: var(--beta-accent, #64e7ff); }
.research-orbit-stage canvas { width: 100%; height: 330px; display: block; border: 1px solid rgba(104,232,255,.24); border-radius: 11px; background: #02050f; }
.research-orbit-stage > p { color: var(--beta-muted, #aeb7d4); font-size: 9px; line-height: 1.5; }
.research-history-stage > h3 { margin-bottom: 16px !important; }
.research-inline-loading { padding: 16px; color: var(--beta-muted, #aeb7d4); font-size: 11px; }
.research-timeline { position: relative; margin: 0; padding: 0 0 0 19px; list-style: none; }
.research-timeline::before { content: ''; position: absolute; top: 5px; bottom: 8px; left: 5px; width: 1px; background: color-mix(in srgb, var(--beta-accent, #64e7ff) 44%, transparent); }
.research-timeline li { position: relative; display: grid; gap: 6px; margin-bottom: 17px; }
.research-timeline li::before { content: ''; position: absolute; top: 4px; left: -18px; width: 8px; height: 8px; border: 2px solid var(--beta-panel-solid, #111731); border-radius: 50%; background: var(--beta-accent, #64e7ff); }
.research-timeline time { color: var(--beta-muted, #aeb7d4); font-size: 8px; text-transform: uppercase; }
.research-timeline li > div > span { display: block; color: var(--beta-accent, #64e7ff); font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.research-timeline strong { display: block; margin-top: 3px; color: var(--beta-ink, #f5f7ff); font-size: 11px; line-height: 1.45; }
.research-timeline p { margin: 4px 0; color: var(--beta-muted, #aeb7d4); font-size: 9px; }

@media (max-width: 900px) {
  .sky-toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .star-search { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .research-panel { inset: max(8px, env(safe-area-inset-top)) 0 0; width: 100%; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--beta-accent, #64e7ff) 42%, transparent); border-radius: 18px 18px 0 0; transform: translateY(104%); }
  .research-panel.active { transform: translateY(0); }
  .research-panel-body { padding-inline: 12px; }
  .research-object section { padding: 13px; }
  .research-analysis-values { grid-template-columns: 1fr; }
  .research-analysis-heading { align-items: stretch; flex-direction: column; }
  .research-analysis-badges { justify-content: flex-start; }
  .research-orbit-stage canvas { height: min(48vh, 340px); }
  .sky-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .star-search { grid-column: 1 / -1; }
}

.solar-population-panel { position: fixed; z-index: 1250; inset: 5vh 4vw; display: grid; grid-template-rows: auto auto auto minmax(280px,1fr) auto; gap: 12px; padding: 18px; border: 1px solid rgba(104,232,255,.36); border-radius: 20px; color: #eef4ff; background: rgba(3,7,20,.97); box-shadow: 0 28px 100px rgba(0,0,0,.65); }
.solar-population-panel[hidden] { display:none; }
.solar-population-panel header,.solar-population-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.solar-population-panel header span { color:#68e8ff; font-size:9px; letter-spacing:.14em; } .solar-population-panel h2 { margin:3px 0 0; }
.solar-population-panel button,.solar-population-panel select { min-height:38px; border:1px solid rgba(120,140,205,.4); border-radius:9px; color:#eef4ff; background:#101735; padding:0 11px; }
.solar-population-controls { justify-content:flex-start; flex-wrap:wrap; }.solar-population-controls label { display:grid; gap:4px; color:#aab7db; font-size:10px; }
.solar-population-summary { display:grid; gap:3px; }.solar-population-summary span,.solar-population-summary small { color:#aab7db; }
.solar-population-panel canvas { width:100%; height:100%; min-height:280px; border:1px solid rgba(120,140,205,.24); border-radius:14px; }
.solar-population-list { display:flex; gap:7px; overflow-x:auto; padding-bottom:3px; }.solar-population-list button { min-width:160px; display:grid; text-align:left; padding:8px; }.solar-population-list span { color:#9cadd6; font-size:9px; }
.asteroid-family-panel { border-color:rgba(244,194,92,.46); }.asteroid-family-panel header span { color:#f4c25c; }.asteroid-family-panel[data-state="unavailable"] canvas { opacity:.28; }
@media (prefers-reduced-motion: reduce) {
  .research-panel { transition: none; }
  .research-loader { animation-duration: 1.8s; }
}

html[data-theme="light"] {
  --beta-bg: #eef2fb;
  --beta-bg-raised: #ffffff;
  --beta-panel: rgba(255, 255, 255, 0.92);
  --beta-panel-solid: #ffffff;
  --beta-panel-soft: #e8edfa;
  --beta-ink: #171b31;
  --beta-muted: #5e6681;
  --beta-line: rgba(65, 75, 118, 0.18);
  --beta-accent: #6657d9;
  --beta-accent-2: #087dac;
  --beta-success: #087a59;
  --beta-danger: #c93153;
  --beta-shadow: rgba(43, 49, 81, 0.15);
}

html { color-scheme: dark; background: var(--beta-bg); }
html[data-theme="light"] { color-scheme: light; }
body {
  color: var(--beta-ink);
  background:
    radial-gradient(circle at 72% -12%, rgba(69, 76, 162, 0.36), transparent 34%),
    radial-gradient(circle at 8% 40%, rgba(44, 128, 149, 0.12), transparent 30%),
    var(--beta-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.site-chrome {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 250;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(18px, 4vw, 52px);
  border-bottom: 1px solid var(--beta-line);
  background: color-mix(in srgb, var(--beta-bg) 84%, transparent);
  backdrop-filter: blur(22px);
}
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--beta-ink); text-decoration: none; font-size: 14px; font-weight: 900; letter-spacing: .18em; }
.site-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--beta-accent) 72%, transparent); border-radius: 11px 3px 11px 3px; color: #d7d1ff; background: linear-gradient(145deg, #5547aa, #171c43); box-shadow: 0 0 28px rgba(118, 94, 255, .32); }
.live-pill { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--beta-success) 45%, transparent); border-radius: 999px; color: var(--beta-success); background: color-mix(in srgb, var(--beta-success) 10%, transparent); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.theme-button { margin-left: auto; min-width: 88px; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--beta-line); border-radius: 10px; color: var(--beta-ink); background: var(--beta-panel-soft); cursor: pointer; font-size: 12px; font-weight: 800; }
.theme-button:hover, .theme-button:focus-visible { border-color: var(--beta-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--beta-accent) 18%, transparent); }
.translate-button { position: fixed; z-index: 260; top: 13px; right: clamp(118px, calc(4vw + 100px), 160px); height: 38px; color: var(--beta-muted); border: 1px solid var(--beta-line); background: var(--beta-panel-soft); }

.screen { color: var(--beta-ink); background: transparent; }
#authScreen { align-items: stretch; justify-content: center; padding: 104px clamp(20px, 5vw, 72px) 48px; background: transparent; }
.auth-container { width: min(1240px, 100%); max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr); gap: clamp(32px, 7vw, 100px); align-items: center; }
.auth-hero-copy { position: relative; max-width: 690px; padding: 36px 0; }
.auth-hero-copy::before { content: ""; position: absolute; inset: -100px -40px; z-index: -1; opacity: .72; background: radial-gradient(circle at 42% 48%, rgba(109, 91, 231, .26), transparent 30%), repeating-radial-gradient(circle at 72% 42%, rgba(255,255,255,.62) 0 1px, transparent 1px 58px); mask-image: linear-gradient(90deg,#000,transparent); }
.eyebrow { margin: 0 0 15px; color: var(--beta-accent); font-size: 11px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.auth-hero-copy h1 { margin: 0; color: var(--beta-ink); font-size: clamp(42px, 5.6vw, 76px); line-height: .99; letter-spacing: -.055em; }
.auth-hero-copy h1 span { color: color-mix(in srgb, var(--beta-accent) 74%, var(--beta-accent-2)); }
.guest-intro { max-width: 610px; margin: 26px 0 0; color: var(--beta-muted); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.72; }
.guest-feature-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.guest-feature-row span { padding: 8px 10px; border: 1px solid var(--beta-line); border-radius: 999px; color: var(--beta-muted); background: var(--beta-panel-soft); font-size: 10px; font-weight: 800; }
.auth-access-panel { min-width: 0; }
.auth-header { margin-bottom: 18px; text-align: left; }
.auth-logo { color: var(--beta-ink); font-size: 34px; letter-spacing: .08em; text-shadow: 0 0 25px color-mix(in srgb, var(--beta-accent) 42%, transparent); }
.auth-subtitle, .astro-credit, .astro-credit a { color: var(--beta-muted); }
.auth-form, .card, .modal-content, .profile-header, .profile-stats, .menu-item, .quick-action, .post-card, .event-card, .merch-card, .store-item, .merch-status-card, .group-card, .friend-card, .settings-section, .permission-info {
  color: var(--beta-ink);
  border-color: var(--beta-line);
  background: var(--beta-panel);
  box-shadow: 0 18px 55px var(--beta-shadow);
  backdrop-filter: blur(18px);
}
.auth-form { border-radius: 19px; padding: 26px; }
.auth-tabs, .form-input, .read-legal-btn, .avatar-preview, .avatar-emoji, .user-type-card, .support-placeholder-btn, .profile-tip-btn, .api-output, .comment-input { border-color: var(--beta-line); color: var(--beta-ink); background: var(--beta-panel-soft); }
.auth-tab, .auth-subtitle, .registration-label, .field-help, .avatar-label, .avatar-emoji-title, .checkbox-label, .read-legal-btn span, .support-placeholder-btn span { color: var(--beta-muted); }
.auth-tab.active, .auth-btn, .event-btn, .avatar-upload-btn, .buy-btn { color: #fff; background: linear-gradient(135deg, #7564e9, #4a8fcb); box-shadow: 0 9px 28px rgba(85, 79, 190, .26); }
.form-input::placeholder { color: color-mix(in srgb, var(--beta-muted) 75%, transparent); }
.form-input:focus { border-color: var(--beta-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--beta-accent) 14%, transparent); }
.astro-slideshow { min-height: 186px; border-color: var(--beta-line); border-radius: 16px; background: #040712; box-shadow: 0 16px 45px var(--beta-shadow); }
.astro-slide img { height: 186px; }
.astro-slide figcaption { background: rgba(3, 6, 18, .84); }
.external-auth-panel { margin-bottom: 18px; }
.external-auth-panel h2 { margin: 0 0 11px; color: var(--beta-ink); font-size: 13px; letter-spacing: .02em; }
.external-auth-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.external-auth-button { min-width: 0; min-height: 43px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--beta-line); border-radius: 10px; color: var(--beta-ink); background: var(--beta-panel-soft); text-decoration: none; font: 700 12px inherit; cursor: pointer; }
.external-auth-button:hover, .external-auth-button:focus-visible { border-color: var(--beta-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--beta-accent) 14%, transparent); }
.external-auth-button:disabled { cursor: not-allowed; opacity: .52; }
.external-auth-button small { margin-left: auto; color: var(--beta-muted); font-size: 9px; font-weight: 700; }
.external-provider-icon { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: #fff; background: linear-gradient(135deg, #7564e9, #397fab); font-size: 9px; font-weight: 900; }
.provider-google .external-provider-icon { color: #243447; background: #fff; }
.provider-microsoft .external-provider-icon { background: #2476d2; }
.provider-github .external-provider-icon { background: #24292f; }
.provider-discord .external-provider-icon { background: #5865f2; }
.provider-chatgpt .external-provider-icon { background: #10a37f; }
.external-auth-help, .external-auth-status { margin: 9px 0 0; color: var(--beta-muted); font-size: 10px; line-height: 1.45; }
.external-auth-status { grid-column: 1 / -1; }
.external-auth-loading { grid-column: 1 / -1; color: var(--beta-muted); font-size: 11px; }
.auth-divider { position: relative; margin: 17px 0 0; text-align: center; }
.auth-divider::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: var(--beta-line); }
.auth-divider span { position: relative; padding: 0 9px; color: var(--beta-muted); background: var(--beta-panel-solid); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.external-signup-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.external-signup-heading h2 { margin: 0 0 5px; color: var(--beta-ink); font-size: 18px; line-height: 1.2; }
.external-signup-heading p { color: var(--beta-muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.external-signup-back { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--beta-line); border-radius: 9px; color: var(--beta-ink); background: var(--beta-panel-soft); cursor: pointer; }
.external-signup-back:hover, .external-signup-back:focus-visible { border-color: var(--beta-accent); outline: none; }
.sky-preview-btn { width: 100%; min-height: 42px; margin-top: 14px; padding: 9px 12px; border: 1px solid var(--beta-line); border-radius: 10px; color: var(--beta-accent-2); background: transparent; font: 800 11px inherit; cursor: pointer; }
.sky-preview-btn:hover, .sky-preview-btn:focus-visible { border-color: var(--beta-accent); outline: none; background: color-mix(in srgb, var(--beta-accent) 9%, transparent); }
.sky-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sky-guest-exit { min-height: 38px; padding: 7px 12px; border: 1px solid var(--beta-line); border-radius: 9px; color: var(--beta-ink); background: var(--beta-panel-soft); cursor: pointer; font: 800 10px inherit; }
.guest-sky-preview .tab-bar .tab-btn:not([onclick*="'sky'"]) { display: none; }
.guest-sky-preview .tab-bar .tab-btn { flex: 1; }

#appScreen { min-height: 100dvh; padding: 64px 0 0 220px; background: transparent; }
#appScreen .tab-content { padding: 28px 0 90px; }
#appScreen .tab-pane { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.tab-bar { inset: 64px auto 0 0; width: 220px; height: auto; flex-direction: column; justify-content: flex-start; gap: 7px; padding: 34px 16px 20px; border: 0; border-right: 1px solid var(--beta-line); background: color-mix(in srgb, var(--beta-bg) 88%, transparent); backdrop-filter: blur(22px); }
.tab-btn { min-width: 0; flex: 0 0 auto; width: 100%; min-height: 46px; flex-direction: row; justify-content: flex-start; gap: 13px; padding: 10px 13px; border-radius: 11px; color: var(--beta-muted); }
.tab-btn:hover { color: var(--beta-ink); background: color-mix(in srgb, var(--beta-accent) 8%, transparent); }
.tab-btn.active { color: var(--beta-ink); background: linear-gradient(90deg, color-mix(in srgb, var(--beta-accent) 20%, transparent), transparent); box-shadow: inset 2px 0 var(--beta-accent); }
.tab-icon { width: 24px; color: var(--beta-accent); font-size: 17px; text-align: center; }
.tab-label { font-size: 12px; }
.tab-header { padding: 18px 16px 4px; }
.tab-header h1, .sky-title, .card-title, .section-title, .profile-name, .menu-text, .settings-text, .permission-name, .friend-name, .group-name, .event-name, .news-title, .news-headline, .stat-number, .store-item-name, .merch-status-card { color: var(--beta-ink); }
.tab-header p, .sky-location, .event-date, .event-desc, .post-meta, .profile-username, .profile-bio, .stat-label, .friend-username, .group-meta, .news-desc, .permission-desc, .empty-state, .feed-subtitle { color: var(--beta-muted); }
.card { margin: 16px; border-radius: 17px; }
.modal { background: rgba(1, 3, 11, .72); backdrop-filter: blur(8px); }
.modal-header, .legal-modal-footer { border-color: var(--beta-line); background: var(--beta-panel-solid); }
.modal-header h2, .modal-body h3, .legal-document { color: var(--beta-ink); }
.legal-reading-status, .support-placeholder-note { color: var(--beta-ink); background: var(--beta-panel-soft); }
.modal-close { color: var(--beta-muted); }
.settings-item { border-color: var(--beta-line); }
.settings-item:hover { background: color-mix(in srgb, var(--beta-accent) 9%, transparent); }
.settings-arrow { color: var(--beta-accent); }
.appearance-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.appearance-choice { display: grid; grid-template-columns: 34px 1fr; gap: 1px 10px; align-items: center; padding: 12px; border: 1px solid var(--beta-line); border-radius: 11px; color: var(--beta-ink); text-align: left; background: var(--beta-panel-soft); cursor: pointer; }
.appearance-choice > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--beta-accent) 12%, transparent); }
.appearance-choice strong, .appearance-choice small { display: block; }
.appearance-choice small { color: var(--beta-muted); }
.appearance-choice.active { border-color: var(--beta-accent); box-shadow: inset 0 0 24px color-mix(in srgb, var(--beta-accent) 10%, transparent); }

.sky-view { min-height: 100%; padding: 28px 20px 30px; border: 1px solid var(--beta-line); border-radius: 22px; background: radial-gradient(circle at 50% 8%, rgba(74, 85, 176, .22), transparent 32%), var(--beta-bg-raised) !important; }
.sky-header { text-align: left; }
.sky-title { margin-bottom: 5px; }
.sky-toolbar { display: flex; gap: 8px; margin: 0 0 10px; }
.star-search { min-width: 220px; flex: 1; height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--beta-line); border-radius: 11px; color: var(--beta-muted); background: rgba(8, 13, 33, .88); }
.star-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: #f5f7ff; background: transparent; font-size: 12px; }
.star-search input::placeholder { color: #7984a3; }
.sky-layer-btn { min-height: 42px; padding: 0 13px; border: 1px solid var(--beta-line); border-radius: 11px; color: var(--beta-muted); background: var(--beta-panel-soft); cursor: pointer; font-size: 10px; font-weight: 850; }
.sky-layer-btn:hover, .sky-layer-btn.active { color: var(--beta-ink); border-color: var(--beta-accent); background: color-mix(in srgb, var(--beta-accent) 13%, var(--beta-panel-soft)); }
.sky-canvas { height: clamp(500px, 66vh, 760px); border-color: color-mix(in srgb, var(--beta-accent) 30%, transparent); border-radius: 20px; background: #02040d; box-shadow: inset 0 0 90px rgba(12, 20, 61, .58), 0 22px 65px var(--beta-shadow); }
.first-person-hud { position: absolute; z-index: 2; top: 12px; left: 12px; max-width: min(280px, calc(100% - 24px)); padding: 9px 11px; border: 1px solid rgba(151, 133, 255, .46); border-radius: 11px; color: #f4f6ff; background: rgba(5, 8, 24, .78); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); pointer-events: none; backdrop-filter: blur(8px); }
.first-person-hud strong, .first-person-hud span, .first-person-hud small { display: block; }
.first-person-hud strong { font-size: 12px; letter-spacing: .05em; }
.first-person-hud span { margin-top: 2px; color: #cbd4ff; font-size: 10px; }
.first-person-hud small { margin-top: 4px; color: #9aa8d6; font-size: 9px; line-height: 1.35; }
.sky-canvas.first-person-active { border-color: color-mix(in srgb, #64e7ff 58%, transparent); box-shadow: inset 0 0 90px rgba(12, 20, 61, .58), 0 0 0 1px rgba(100, 231, 255, .16), 0 22px 65px var(--beta-shadow); }
.sky-canvas.first-person-active .sky-info-overlay { top: 12px; right: 12px; left: auto; transform: none; text-align: right; }
.sky-status { color: #f4f6ff; text-shadow: 0 2px 18px #000; }
.sky-stats, .sky-zoom-hint { color: rgba(224, 230, 255, .78); }
.star-detail { border-color: rgba(151, 133, 255, .5); border-radius: 12px; background: rgba(5, 8, 24, .9); color: #dfe5ff; }
.star-detail em { color: #f5c369; font-style: normal; }
.catalog-note { margin: 10px 3px 0; color: var(--beta-muted); font-size: 10px; line-height: 1.5; }
.catalog-note strong { color: var(--beta-accent); }
.sky-body-row > div { border-color: var(--beta-line); }
.sky-body-row span, .sky-body-row strong { color: var(--beta-ink); }
.sky-body-row small { color: var(--beta-muted); }
.sky-btn { border-color: var(--beta-line); color: var(--beta-ink); background: var(--beta-panel-soft); }
.gis-panel { border-color: var(--beta-line); background: var(--beta-panel-soft); }
.store-item-image { border-color: var(--beta-line); background: var(--beta-panel-soft); }
.store-item-price { color: var(--beta-accent-2); }
.merch-status-card span { color: var(--beta-muted); }

::-webkit-scrollbar-track { background: var(--beta-bg); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--beta-accent) 42%, var(--beta-bg)); }

.lensing-panel { position: fixed; z-index: 120; inset: 76px 24px 24px auto; width: min(920px, calc(100vw - 48px)); overflow: auto; padding: 18px; border: 1px solid var(--beta-line); border-radius: 18px; color: var(--beta-ink); background: color-mix(in srgb, var(--beta-bg) 94%, transparent); box-shadow: 0 24px 80px rgba(0,0,0,.55); backdrop-filter: blur(18px); }
.lensing-panel > header { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.lensing-panel header span { color:var(--beta-accent); font-size:9px; font-weight:800; letter-spacing:.13em; }
.lensing-panel h2 { margin:4px 0 0; font-size:20px; }
.lensing-panel header button { border:0; color:var(--beta-muted); background:transparent; cursor:pointer; }
.lensing-controls { display:flex; align-items:end; gap:10px; margin-bottom:12px; }
.lensing-controls.imaging-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.lensing-controls label { display:grid; gap:4px; flex:1; color:var(--beta-muted); font-size:10px; font-weight:700; }
.lensing-controls select,.lensing-controls button { min-height:38px; padding:0 10px; border:1px solid var(--beta-line); border-radius:9px; color:var(--beta-ink); background:var(--beta-panel-soft); }
.lensing-stage { position:relative; overflow:hidden; border:1px solid var(--beta-line); border-radius:12px; background:#070b1f; aspect-ratio:720/560; }
.lensing-stage canvas { width:100%; height:100%; display:block; transform-origin:center; touch-action:none; cursor:grab; }
.lensing-stage canvas:active { cursor:grabbing; }
.lensing-stage canvas:focus-visible { outline:2px solid var(--beta-accent); outline-offset:-3px; }
.lensing-north,.lensing-east { position:absolute; padding:3px 6px; color:white; background:rgba(4,7,22,.72); font-size:10px; }
.lensing-north { top:8px; right:8px; }.lensing-east { bottom:8px; left:8px; }
.lensing-legend { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:5px; padding:4px 6px; color:white; background:rgba(4,7,22,.76); font-size:8px; }
.lensing-legend i { width:90px; height:7px; background:linear-gradient(90deg,#070b1f,#272e6c,#4e7ca7,#dd974c,#ffeeb1); }
.lensing-layer-key { position:absolute; top:8px; left:8px; display:grid; gap:2px; padding:5px 7px; color:#fff; background:rgba(4,7,22,.76); font-size:8px; letter-spacing:.03em; }
.lensing-coordinate { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); padding:4px 7px; border-radius:6px; color:#fff; background:rgba(4,7,22,.78); font:9px/1.2 ui-monospace,monospace; }
.lensing-status small { flex-basis:100%; color:#f5c369; }
.lensing-status { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; color:var(--beta-muted); font-size:10px; }.lensing-status strong{color:var(--beta-ink)}.lensing-status a{color:var(--beta-accent)}
.lensing-notice { margin:10px 0 0; padding:10px; border-left:2px solid #f5c369; color:var(--beta-muted); background:rgba(245,195,105,.06); font-size:10px; line-height:1.5; }
@media(max-width:820px){.lensing-controls.imaging-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.lensing-panel{inset:64px 10px 90px;width:auto}.lensing-controls,.lensing-controls.imaging-controls{display:grid;grid-template-columns:1fr 1fr}.lensing-controls button{grid-column:1/-1}.lensing-coordinate{bottom:32px;white-space:nowrap}.lensing-layer-key{top:34px}}

@media (max-width: 900px) {
  .site-chrome { padding-inline: 14px; }
  .translate-button { right: 108px; }
  .auth-container { grid-template-columns: 1fr; width: min(620px, 100%); gap: 14px; }
  .auth-hero-copy { padding: 12px 0 18px; }
  .auth-hero-copy h1 { font-size: clamp(39px, 10vw, 62px); }
  #appScreen { padding-left: 0; padding-bottom: 78px; }
  #appScreen .tab-content { padding-top: 16px; }
  .tab-bar { inset: auto 0 0 0; width: auto; height: auto; flex-direction: row; justify-content: flex-start; gap: 0; padding: 8px 0 max(11px, env(safe-area-inset-bottom)); border-top: 1px solid var(--beta-line); border-right: 0; overflow-x: auto; }
  .tab-btn { min-width: 74px; width: auto; flex: 1 0 74px; flex-direction: column; justify-content: center; gap: 3px; padding: 5px 9px; }
  .tab-btn.active { box-shadow: inset 0 2px var(--beta-accent); }
  .tab-icon { font-size: 17px; }
  .tab-label { font-size: 9px; }
}

@media (max-width: 600px) {
  .site-brand > span:last-child, .live-pill, #themeLabel { display: none; }
  .theme-button { min-width: 42px; width: 42px; }
  .translate-button { right: 66px; min-width: 42px; }
  #authScreen { padding: 84px 14px 32px; }
  .auth-hero-copy h1 { font-size: clamp(38px, 12vw, 54px); }
  .guest-feature-row { gap: 6px; }
  .guest-feature-row span { padding: 6px 8px; }
  .auth-form { padding: 20px 16px; }
  #appScreen .tab-pane { width: min(100% - 20px, 1180px); }
  .card { margin-inline: 0; }
  .sky-view { padding: 20px 10px 22px; border-radius: 17px; }
  .sky-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .star-search { grid-column: 1 / -1; min-width: 0; }
  .sky-layer-btn { min-width: 0; padding-inline: 5px; }
  .sky-canvas { height: calc(100dvh - 300px); min-height: 480px; border-radius: 15px; }
  .first-person-hud { top: 9px; left: 9px; max-width: calc(100% - 18px); }
  .sky-canvas.first-person-active .sky-info-overlay { top: auto; right: 9px; bottom: 29px; }
  .merch-status-card { margin-inline: 0; }
  .store-grid { grid-template-columns: minmax(0, 1fr); padding: 10px 0 28px; gap: 12px; }
  .store-item { width: 100%; padding: 12px; }
  .store-item-image { max-height: min(78vw, 390px); }
  .appearance-settings { grid-template-columns: 1fr; }
  .owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-dashboard-actions { flex-direction: column; }
}

@media (max-width: 900px) {
  .sky-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .star-search { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .sky-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}