/*
    dashboard.css

    Legacy dashboard-page styling for the Interstellar Weather Console.

    Design goals:
    - keep weather / solar / space / BTC view styling page-local
    - share shell, tokens, nav, panels, and metrics through static/css/core
    - preserve Stage 10C polish
    - integrate real transparent PNG solar assets
    - keep layered glow / CME / flare behaviour
    - remain ready for future transparent video assets
*/



/* AETHERIS CORE HOME STAGE */

.console-frame[data-active-view="home"] {
    padding: 0;
    background: #121922;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.console-frame[data-active-view="home"] .top-bar,
.console-frame[data-active-view="home"] .bottom-nav-rail {
    display: none;
}

.console-frame[data-active-view="home"] #view-home {
    width: 1920px;
    height: 440px;
    margin: 0;
    animation: none;
}

.home-stage {
    position: relative;
    width: 1920px;
    height: 440px;
    overflow: hidden;
    background: url("/static/media/home/homebase.png") center / 1920px 440px no-repeat;
    color: #ffffff;
    font-family: "Rajdhani", "Arial Narrow", Arial, Helvetica, sans-serif;
    font-weight: 500;
}

.home-stage * {
    box-sizing: border-box;
}

.home-title {
    position: absolute;
    margin: 0;
    font-family: "Saira Extra Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 35px;
    line-height: 1;
    font-weight: 700;
    color: rgba(235, 230, 238, 0.70);
    text-transform: uppercase;
    white-space: nowrap;
}

.home-title-weather,
.home-title-solar,
.home-title-space,
.home-badge,
.home-event-label-wrap span,
.home-event-title,
.home-event-detail,
.home-vps {
    font-family: "Saira Extra Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
}

.home-title-weather {
    left: 180px;
    top: 8px;
}

.home-title-solar {
    left: 1032px;
    top: 8px;
    color: rgba(249, 219, 205, 0.78);
}

.home-title-space {
    right: 89px;
    left: auto;
    top: 8px;
    color: rgba(243, 219, 231, 0.78);
    text-align: right;
}

.home-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 20px;
    padding: 1px 7px 2px;
    border-radius: 4px;
    background: rgba(31, 50, 58, 0.86);
    color: #36e66a;
    font-family: "Saira Extra Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
}

.status-badge[data-status="cached"],
.home-badge-cached {
    background: rgba(55, 55, 30, 0.86);
    color: #ffd22c;
}

.status-badge[data-status="stale"] {
    background: rgba(75, 55, 30, 0.88);
    color: #ffae2f;
}

.status-badge[data-status="error"] {
    background: #f12d2d;
    color: #ffffff;
}

.home-weather-primary {
    position: absolute;
    left: 0;
    top: 0;
    width: 670px;
    height: 440px;
}

#weather-source {
    position: absolute;
    left: 106px;
    top: 82px;
}

.home-weather-location {
    position: absolute;
    left: 130px; /*176px;*/
    top: 81px;
    width: 336px;
    overflow: hidden;
    color: #ffffff;
    font-size: 52px;
    line-height: 1;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-weather-summary-row {
    position: absolute;
    left: 189px; /*236px;*/
    top: 127px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 272px;
}

.home-weather-icon {
    width: 31px;
    height: 31px;
    object-fit: contain;
    opacity: 0.72;
}

.home-weather-summary {
    max-width: 228px;
    overflow: hidden;
    color: rgba(170, 174, 190, 0.76);
    font-size: 40px;
    line-height: 1;
    font-weight: 400;
    text-align: right;
    text-transform: capitalize;
    white-space: nowrap;
}

.home-weather-primary[data-state="empty"] .home-weather-summary {
    color: rgba(194, 196, 209, 0.78);
    font-size: 34px;
    text-transform: uppercase;
}

.home-weather-temp-row {
    position: absolute;
    left: 120px; /*155px; *//*gg*/
    top: 169px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 340px;
}

.home-weather-temp {
    color: #ffffff;
    font-size: 138px;
    line-height: 0.86;
    font-weight: 700;
}

.home-weather-temp-unit {
    margin-left: 3px;
    margin-top: 16px;
    color: #ffffff;
    font-size: 54px;
    line-height: 1;
    font-weight: 300;
}

/*.home-weather-sunrise,
.home-weather-sunset {
    position: absolute;
    top: 327px;
    display: grid;
    grid-template-columns: 25px 1fr;
    grid-template-rows: 29px 52px;
    column-gap: 8px;
    width: 135px;
}*/
.home-weather-sunrise,
.home-weather-sunset {
    position: absolute;
    top: 327px;
    width: 135px;
    text-align: right;
}

.home-weather-sunrise {
   /*left: 121px;*//*gg*/
    left: 90px;;
}

.home-weather-sunset {
    /*left: 266px;*//*gg*/
    left: 220px;
}

.home-sun-icon {
    width: 24px;
    height: 24px;
    align-self: center;
}

.home-weather-mini-label {
    align-self: center;
    color: rgba(238, 236, 244, 0.74);
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    text-align: right;
}

.home-weather-sun-time {
    grid-column: 2;
    justify-self: start;
    color: #ffffff;
    font-size: 52px;
    line-height: 0.95;
    font-weight: 700;
    white-space: nowrap;
}

.home-weather-metrics {
    position: absolute;
    left: 489px;
    top: 77px;
    width: 156px;
    height: 363px;
}

.home-weather-wind {
    position: absolute;
    left: 0;
    top: 0;
    width: 156px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.home-weather-small-label {
    color: rgba(243, 244, 255, 0.88);
    font-size: 20px;
    line-height: 1.08;
    font-weight: 400;
    text-align: center;
}

.home-weather-wind-value {
    color: #ffffff;
    font-size: 60px;
    line-height: 0.9;
    font-weight: 700;
}

.home-weather-humidity {
    position: absolute;
    left: 0px; /*GG*//*20px;*/
    top: 73px; /*GG*//*69px;*/
    width: 137px;
    height: 73px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-weather-pressure {
    position: absolute;
    left: 0;
    top: 159px;
    width: 115px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: end; /*GG*/
    padding-right: 10px; /*GG*/
}

.home-weather-rain {
    position: absolute;
    left: 3px;
    top: 258px;
    width: 109px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /*gap: 3px;*//*gg*/
    gap: 10px;
}

.home-weather-panel-label {
    color: rgba(239, 235, 248, 0.74);
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    text-transform: uppercase;
}

.home-weather-rain .home-weather-panel-label,
.home-weather-rain .home-weather-panel-value {
    width: 100%;
    text-align: right;
}

.home-weather-panel-value {
    color: #ffffff;
    font-size: 57px;
    line-height: 0.60; /*0.98;*/
    font-weight: 700;
}

.home-weather-pressure-value {
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}

/*.home-weather-compact {
    position: absolute;
    right: 57px;
    left: auto;
    top: 20px;
    width: 225px;
    text-align: right;
    color: #ffffff;
}*//*gg*/

.home-weather-compact {
    position: absolute;
    left: 257px;
    left: auto;
    top: 12px;
    width: 935px;
    text-align: right;
    color: #ffffff;
}

.home-weather-compact-location {
    overflow: hidden;
    font-size: 35px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-weather-compact-summary {
    /*margin-top: 4px;*//*gg*/
    margin-top: 0px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 5px;
    font-size: 30px;
    line-height: 0.94;
    font-weight: 500;
    text-transform: uppercase;
}

.home-weather-compact-temp {
    font-size: 49px;
    line-height: 0.94;
    font-weight: 700;
}

.home-weather-compact-unit {
    margin-top: 3px;
    font-size: 22px;
    font-weight: 400;
}

.home-weather-compact-rain {
    /*margin-top: 10px;*//*gg*/
    margin-top: 0px;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
}

.home-weather-compact-rain span:first-child {
    font-weight: 700;
}

.home-weather-compact[data-state="empty"] {
    width: 240px;
}

.home-weather-compact[data-state="empty"] .home-weather-compact-location {
    color: rgba(235, 230, 238, 0.68);
    font-size: 28px;
}

.home-weather-compact[data-state="empty"] .home-weather-compact-summary {
    font-size: 24px;
}

#weather-temperature[data-empty="true"] + .home-weather-temp-unit,
#home-weather-top-temperature[data-empty="true"] + .home-weather-compact-unit {
    display: none;
}

.home-mars {
    position: absolute;
    left: 670px;
    top: 151px;
    width: 270px;
    height: 240px;
    color: #ffffff;
}

.home-mars .home-badge {
    position: absolute;
    left: 16px;
    top: 205px;
}

.home-mars-title {
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 57px;
    line-height: 1;
    font-weight: 700;
}

.home-mars-subtitle {
    position: absolute;
    right: 18px;
    top: 69px;
    width: 218px;
    color: rgba(235, 209, 188, 0.58);
    overflow: hidden;
    font-size: 21px;
    line-height: 1;
    font-weight: 300;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-mars-condition {
    position: absolute;
    right: 18px;
    top: 96px;
    width: 218px;
    overflow: hidden;
    color: rgba(235, 218, 207, 0.58);
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-mars-reading {
    position: absolute;
    right: 18px;
    left: auto;
    top: 120px;
    width: 176px;
    text-align: right;
}

.home-mars-reading-min {
    top: 157px;
}

.home-mars-temp {
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
}

.home-mars-unit,
.home-mars-limit {
    color: rgba(235, 218, 207, 0.70);
    font-size: 24px;
    font-weight: 300;
}

.home-mars-limit {
    display: inline-block;
    min-width: 42px;
    margin-left: 8px;
    text-align: left;
}

.home-mars-trend {
    position: absolute;
    right: 25px;
    top: 198px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    width: 182px;
    color: rgba(235, 218, 207, 0.54);
    font-size: 20px;
    line-height: 1;
    font-weight: 300;
    text-align: right;
    text-transform: uppercase;
}

.home-mars-trend strong {
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}

.home-mars[data-state="empty"] .home-mars-subtitle {
    top: 78px;
    color: rgba(235, 209, 188, 0.66);
}

.home-mars[data-state="empty"] .home-mars-condition {
    top: 106px;
    color: rgba(235, 218, 207, 0.74);
    font-size: 17px;
}

#home-mars-max[data-empty="true"] + .home-mars-unit,
#home-mars-max[data-empty="true"] + .home-mars-unit + .home-mars-limit,
#home-mars-min[data-empty="true"] + .home-mars-unit,
#home-mars-min[data-empty="true"] + .home-mars-unit + .home-mars-limit {
    visibility: hidden;
}

.home-solar {
    position: absolute;
    left: 997px;
    top: 53px;
    width: 284px;
    height: 387px;
}

#solar-source {
    position: absolute;
    right: 2px;
    top: 17px;
}

.home-stage #solar-animation-shell {
    position: absolute;
    left: 16px;
    top: 60px;
    width: 140px;
    height: 140px;
}

.home-stage .solar-core-layer {
    background-image: url("/static/media/home/sun_quiet.png");
}

.home-stage .solar-animation-shell.solar-state-quiet .solar-core-layer {
    background-image: url("/static/media/home/sun_quiet.png");
}

.home-stage .solar-animation-shell.solar-state-active .solar-core-layer {
    background-image: url("/static/media/home/sun_active.png");
}

.home-stage .solar-animation-shell.solar-state-storm .solar-core-layer,
.home-stage .solar-cme-layer {
    background-image: url("/static/media/home/sun_storm.png");
}

.home-stage .solar-flare-overlay {
    background-image: url("/static/media/home/sun_flare.png");
}

.home-solar-heading {
    position: absolute;
    right: 6px;
    top: 48px;
    width: 180px;
    color: #ffffff;
    font-size: 30px;
    line-height: 0.92;
    font-weight: 700;
    text-align: right;
}

.home-solar-state-label {
    position: absolute;
    right: 6px;
    top: 109px;
    color: rgba(220, 192, 184, 0.617);
    font-size: 20px;
    line-height: 1;
    font-weight: 300;
    text-transform: uppercase;
}

.home-solar-state {
    position: absolute;
    right: 6px;
    top: 126px;
    color: #ffae28;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

.home-solar-brief {
    position: absolute;
    right: 26px;
    top: 190px;
    width: 222px;
    overflow: hidden;
    color: #ffffff;
    font-family: "Saira Extra Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 22px;
    line-height: 1.04;
    font-weight: 500;
    text-align: right;
    text-transform: uppercase;
    max-height: 70px;
}

.home-solar-risk {
    position: absolute;
    right: 26px;
    top: 270px;
    width: 254px;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.05;
    font-weight: 500;
    text-align: right;
    text-transform: uppercase;
}

.home-solar-pressure,
.home-solar-aurora {
    position: absolute;
    top: 333px;
    display: flex;
    flex-direction: column;
    color: rgba(235, 202, 192, 0.45);
    font-size: 20px;
    line-height: 1;
    font-weight: 300;
    width: 104px;
    text-transform: uppercase;
}

.home-solar-pressure {
    left: 44px;
    text-align: right;
}

.home-solar-aurora {
    right: 30px;
    text-align: right;
}

.home-solar-pressure strong,
.home-solar-aurora strong {
    margin-top: -2px;
    color: #ffffff;
    font-size: 30px;
    line-height: 0.94;
    font-weight: 700;
}

.home-solar[data-state="empty"] .home-solar-state {
    color: rgba(255, 210, 116, 0.92);
    font-size: 28px;
}

.home-solar[data-state="empty"] .home-solar-brief {
    font-size: 18px;
    line-height: 1.06;
    max-height: 58px;
}

.home-solar[data-state="empty"] .home-solar-risk {
    font-size: 16px;
}

.home-space-events {
    position: absolute;
    left: 1301px;
    top: 80px;
    width: 528px;
    height: 360px;
    font-family: "Saira Extra Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
}

.home-event-row {
    position: absolute;
    left: 0;
    width: 527px;
    height: 73px;
}

.home-event-row-one {
    top: 0;
}

.home-event-row-two {
    top: 98px;
}

.home-event-row-three {
    top: 195px;
}

.home-event-message {
    position: absolute;
    left: 0;
    top: 0;
    width: 557px;
    height: 73px;
    opacity: 1;
}

.home-event-label-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 186px;
    height: 47px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) 27px;
    align-items: center;
    color: #a847ad;
}

.home-event-label-wrap span {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
    color: currentColor;
    font-size: 29px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-event-row[data-event-tone="two"] .home-event-label-wrap {
    color: #c98927;
}

.home-event-row[data-event-tone="three"] .home-event-label-wrap {
    color: #2fc3b7;
}

.home-event-text {
    position: absolute;
    left: 200px;
    top: 0px;
    width: 348px;
    height: 54px;
    overflow: hidden;
    color: #ffffff;
    text-transform: uppercase;
    text-overflow: ellipsis;
}

.home-event-title,
.home-event-detail {
    overflow: hidden;
    font-size: 24px;
    line-height: 1.03;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-event-title {
    margin-top: 0;
    margin-bottom: 2px;
}

.home-event-detail {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-space-events[data-state="empty"] .home-event-title,
.home-space-events[data-state="empty"] .home-event-detail {
    font-size: 18px;
    line-height: 1.08;
}

.home-vps {
    position: absolute;
    left: 194px;
    top: 329px;
    width: 292px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-family: "Saira Extra Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.05;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
}

.home-vps .home-badge {
    min-width: 48px;
    height: 20px;
    font-size: 14px;
}

.home-data-sink {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* DETAIL VIEWS */

.detail-daylight-block {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.detail-weather-hero,
.detail-solar-layout {
    display: grid;
    gap: 18px;
}

.detail-weather-hero {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
}

.detail-weather-location {
    font-size: 30px;
    font-weight: bold;
    color: var(--text-accent);
}

.detail-weather-temperature {
    font-size: 78px;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.detail-weather-summary {
    font-size: 24px;
    color: var(--text-soft);
    margin-bottom: 8px;
}

.detail-weather-brief {
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-muted);
}

.detail-weather-visual-shell,
.detail-solar-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 220px;
}

.detail-solar-layout {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
}

.detail-solar-state {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--yellow);
}

.detail-solar-activity-strip {
    margin-top: 12px;
}

/* BTC VIEW */

.btc-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: stretch;
}

.btc-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.btc-chart-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background:
        linear-gradient(180deg, rgba(255, 184, 81, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 196, 94, 0.18);
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.015),
        0 0 22px rgba(255, 177, 90, 0.04);
}

.btc-sparkline {
    display: flex;
    align-items: end;
    gap: 10px;
    flex: 1;
    min-height: 182px;
    padding: 14px 6px 4px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 177, 90, 0.03), rgba(255, 255, 255, 0.01));
}

.btc-spark-bar {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #ffe08a 0%, var(--orange) 100%);
    min-height: 12px;
    box-shadow:
        0 0 14px rgba(255, 177, 90, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    transform-origin: bottom center;
    animation: btcBarRise 900ms ease both;
}

.btc-spark-bar:nth-child(1) { animation-delay: 0.02s; }
.btc-spark-bar:nth-child(2) { animation-delay: 0.05s; }
.btc-spark-bar:nth-child(3) { animation-delay: 0.08s; }
.btc-spark-bar:nth-child(4) { animation-delay: 0.11s; }
.btc-spark-bar:nth-child(5) { animation-delay: 0.14s; }
.btc-spark-bar:nth-child(6) { animation-delay: 0.17s; }
.btc-spark-bar:nth-child(7) { animation-delay: 0.20s; }

@keyframes btcBarRise {
    from {
        opacity: 0.35;
        transform: scaleY(0.15);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.btc-updated-label {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.7px;
}

/* WEATHER */

.weather-layout {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 9px;
}

.weather-main-row,
.weather-hero {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 240px;
    gap: 9px;
    align-items: start;
}

.weather-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.zone-weather .weather-disc {
    width: 70px;
    height: 70px;
}

.zone-weather .weather-symbol {
    font-size: 22px;
}

.zone-weather .weather-primary {
    gap: 3px;
    min-width: 0;
}

.zone-weather .weather-location {
    font-size: 24px;
}

.zone-weather .weather-temperature {
    font-size: 55px;
}

.zone-weather .weather-summary {
    font-size: 20px;
}

.zone-weather .weather-brief {
    font-size: 14px;
    line-height: 1.25;
    color: rgba(147, 166, 187, 0.9);
}

.zone-weather .weather-secondary.weather-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.zone-weather .weather-secondary.weather-secondary-grid .metric-card {
    padding: 6px 8px;
    min-height: 0;
}

.zone-weather .weather-secondary.weather-secondary-grid .metric-value {
    font-size: 16px;
}

.zone-weather .weather-sun-row {
    padding: 6px 9px;
    min-height: 0;
}

.zone-weather #weather-sun-cycle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 17px;
}

.weather-disc {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(145, 192, 255, 0.35),
        inset -12px -12px 24px rgba(0, 0, 0, 0.28);
    animation: weatherGlow 8s ease-in-out infinite;
}

@keyframes weatherGlow {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.012);
        filter: brightness(1.03);
    }
}

.weather-disc-default {
    background: radial-gradient(circle at 30% 30%, #f7fbff 0%, #bdd7ff 40%, #3f5e87 82%, #17263b 100%);
}

.weather-disc-clear {
    background: radial-gradient(circle at 35% 35%, #fff4b0 0%, #ffd765 45%, #d77d1d 80%, #542400 100%);
    box-shadow:
        0 0 26px rgba(255, 202, 92, 0.42),
        inset -12px -12px 24px rgba(0, 0, 0, 0.22);
}

.weather-disc-cloudy {
    background: radial-gradient(circle at 35% 35%, #eff5fb 0%, #b9c7d6 45%, #62798f 80%, #213246 100%);
}

.weather-disc-rain {
    background: radial-gradient(circle at 35% 35%, #cfe2f7 0%, #7fa7cf 35%, #315880 78%, #122033 100%);
    box-shadow:
        0 0 22px rgba(118, 169, 227, 0.28),
        inset -12px -12px 24px rgba(0, 0, 0, 0.26);
}

.weather-disc-storm {
    background: radial-gradient(circle at 35% 35%, #f7d7c7 0%, #d18059 35%, #5b2a23 76%, #160f16 100%);
    box-shadow:
        0 0 24px rgba(255, 117, 107, 0.26),
        inset -12px -12px 24px rgba(0, 0, 0, 0.30);
}

.weather-disc-fog {
    background: radial-gradient(circle at 35% 35%, #f1f4f7 0%, #c6ced8 42%, #7f8b97 78%, #2c3641 100%);
}

.weather-disc-snow {
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d8ebff 45%, #8cb3d8 80%, #24415c 100%);
}

.weather-symbol {
    position: absolute;
    font-size: 36px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.weather-primary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.weather-location {
    font-size: 22px;
    font-weight: bold;
    color: var(--text-accent);
    letter-spacing: 0.4px;
}

.weather-temperature {
    font-size: 58px;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
}

.weather-summary {
    font-size: 20px;
    color: var(--text-soft);
}

.weather-brief {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.35;
}

.weather-secondary,
.weather-tertiary,
.solar-primary-row,
.solar-secondary-row,
.solar-tertiary-row {
    display: grid;
    gap: 10px;
}

.weather-secondary {
    grid-template-columns: repeat(3, 1fr);
}

.weather-tertiary {
    grid-template-columns: 1.1fr 0.9fr;
}

.solar-primary-row {
    grid-template-columns: 1.1fr 0.9fr;
}

.solar-secondary-row {
    grid-template-columns: repeat(3, 1fr);
}

.solar-tertiary-row {
    grid-template-columns: 0.85fr 1.15fr;
}


#weather-sun-cycle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.sun-cycle-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
}

/* SOLAR */

.zone-solar {
    background:
        radial-gradient(circle at 22% 24%, rgba(255, 159, 64, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(12, 17, 26, 0.98) 0%, rgba(10, 18, 28, 0.92) 100%);
}

.solar-layout {
    display: grid;
    grid-template-columns: 136px 1fr;
    gap: 10px;
    align-items: start;
}

.solar-layout-home {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
}

.solar-visual-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 2px 4px;
}

.zone-solar .solar-animation-shell {
    width: 78px;
    height: 78px;
}

.solar-caption {
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.solar-state-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.solar-state-stack #solar-state {
    color: #ffb22e;
    font-size: 20px;
}

.solar-storm-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.solar-home-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
}

.solar-data-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-start;
}

.solar-telemetry-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 7px 8px;
}

.solar-telemetry-cell,
.solar-stats-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.solar-stats-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 7px 8px;
}

.solar-summary-card {
    padding: 7px 8px;
}

.solar-summary-card #solar-brief {
    font-size: 16px;
    line-height: 1.2;
}

.solar-home-stats .metric-value {
    font-size: 18px;
}

.solar-combined-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 9px;
    align-items: stretch;
    padding: 7px;
}

.solar-home-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.solar-home-activity {
    justify-content: center;
    min-width: 0;
    gap: 7px;
}

.solar-home-activity .solar-activity-heading-row {
    justify-content: flex-start;
}

.solar-home-activity .solar-activity-legend {
    justify-content: flex-end;
}

.solar-home-activity .solar-activity-strip {
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    padding: 6px 8px;
}

.solar-activity-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solar-activity-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.solar-activity-title {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.solar-activity-subtitle {
    font-size: 9px;
    color: var(--text-soft);
    text-align: right;
}

.solar-activity-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 9px;
    color: var(--text-soft);
}

.solar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.solar-legend-swatch {
    width: 12px;
    height: 8px;
    border-radius: 3px;
    display: inline-block;
}

.solar-legend-swatch-low {
    background: linear-gradient(180deg, #8fe8b3 0%, #3f9c67 100%);
}

.solar-legend-swatch-medium {
    background: linear-gradient(180deg, var(--yellow) 0%, var(--orange) 100%);
}

.solar-legend-swatch-high {
    background: linear-gradient(180deg, #ffb089 0%, var(--red) 100%);
}

.solar-activity-strip {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 4px 6px;
    background:
        linear-gradient(180deg, rgba(255, 177, 90, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 196, 94, 0.12);
    border-radius: 10px;
}

.activity-bar {
    display: inline-block;
    width: 12px;
    border-radius: 3px 3px 0 0;
    animation: activityBarBreathe 4.8s ease-in-out infinite;
}

.activity-bar:nth-child(2n) {
    animation-delay: 0.25s;
}

.activity-bar:nth-child(3n) {
    animation-delay: 0.45s;
}

@keyframes activityBarBreathe {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.08);
    }
}

.activity-bar-low {
    background: linear-gradient(180deg, #8fe8b3 0%, #3f9c67 100%);
}

.activity-bar-medium {
    background: linear-gradient(180deg, var(--yellow) 0%, var(--orange) 100%);
}

.activity-bar-high {
    background: linear-gradient(180deg, #ffb089 0%, var(--red) 100%);
}

.solar-activity-footnote {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.25;
}

/* PNG SOLAR ASSET CONTAINER */

.solar-animation-shell {
    position: relative;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    overflow: visible;
    isolation: isolate;
    filter: drop-shadow(0 0 18px rgba(255, 170, 60, 0.12));
}

.detail-solar-visual .solar-animation-shell {
    width: 168px;
    height: 168px;
}

.solar-corona-layer,
.solar-core-layer,
.solar-cme-layer,
.solar-flare-overlay {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.solar-corona-layer {
    inset: -14px;
    background:
        radial-gradient(circle, rgba(255, 220, 120, 0.00) 36%, rgba(255, 184, 72, 0.38) 58%, rgba(255, 122, 28, 0.12) 74%, rgba(255, 122, 28, 0.00) 86%);
    filter: blur(8px);
    opacity: 0.92;
    animation: solarCoronaBreath 3.2s ease-in-out infinite;
}

.solar-core-layer {
    inset: 0;
    background-image: url("/static/media/sun_quiet.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 10px rgba(255, 170, 60, 0.14));
    animation: solarCorePulse 3.0s ease-in-out infinite;
}

.solar-core-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 220, 120, 0.06) 0%, rgba(255, 160, 50, 0.03) 46%, rgba(255, 120, 20, 0.00) 72%);
    mix-blend-mode: screen;
    opacity: 0.8;
}

.solar-cme-layer {
    inset: -8px;
    background-image: url("/static/media/sun_storm.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    transform: scale(0.94);
    filter: blur(0.4px) drop-shadow(0 0 14px rgba(255, 150, 50, 0.18));
}

.solar-flare-overlay {
    inset: -6px;
    background-image: url("/static/media/sun_flare.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    transform: scale(0.94);
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 16px rgba(255, 190, 90, 0.22));
}

/* Solar state image switching */

.solar-animation-shell.solar-state-quiet .solar-core-layer {
    background-image: url("/static/media/sun_quiet.png");
    filter: saturate(0.96) brightness(0.97) drop-shadow(0 0 10px rgba(255, 170, 60, 0.12));
}

.solar-animation-shell.solar-state-active .solar-core-layer {
    background-image: url("/static/media/sun_active.png");
    filter: saturate(1.04) brightness(1.02) drop-shadow(0 0 12px rgba(255, 170, 60, 0.18));
}

.solar-animation-shell.solar-state-storm .solar-core-layer {
    background-image: url("/static/media/sun_storm.png");
    filter: saturate(1.08) brightness(1.06) drop-shadow(0 0 15px rgba(255, 170, 60, 0.22));
}

.solar-animation-shell.solar-state-quiet .solar-corona-layer {
    opacity: 0.72;
    filter: blur(9px);
}

.solar-animation-shell.solar-state-active .solar-corona-layer {
    opacity: 0.92;
    filter: blur(8px);
}

.solar-animation-shell.solar-state-storm .solar-corona-layer {
    opacity: 1;
    filter: blur(7px);
}

/* Burst states triggered by JS */

.solar-animation-shell.solar-cme-live .solar-cme-layer {
    animation: solarCmeBurst 2.4s ease-out forwards;
}

.solar-animation-shell.solar-flare-live .solar-flare-overlay {
    animation: solarFlareFlash 1.8s ease-out forwards;
}

/* Motion */

@keyframes solarCorePulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.028);
        filter: brightness(1.05);
    }
}

@keyframes solarCmeBurst {
    0% {
        opacity: 0;
        transform: scale(0.92) rotate(0deg);
    }
    18% {
        opacity: 0.95;
    }
    50% {
        opacity: 0.75;
        transform: scale(1.03) rotate(5deg);
    }
    100% {
        opacity: 0;
        transform: scale(1.14) rotate(10deg);
    }
}

@keyframes solarFlareFlash {
    0% {
        opacity: 0;
        transform: scale(0.92) rotate(0deg);
    }
    18% {
        opacity: 1;
    }
    44% {
        opacity: 0.82;
        transform: scale(1.04) rotate(6deg);
    }
    100% {
        opacity: 0;
        transform: scale(1.12) rotate(10deg);
    }
}

/* SPACE */

.zone-space {
    background:
        radial-gradient(circle at 80% 24%, rgba(120, 178, 255, 0.07), transparent 28%),
        linear-gradient(180deg, rgba(8, 15, 24, 0.96) 0%, rgba(10, 18, 28, 0.90) 100%);
}

.space-layout {
    justify-content: flex-start;
    gap: 5px;
}

.space-feature-card,
.space-secondary-panel {
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-divider);
    border-radius: 12px;
}

.space-feature-card {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.01),
        0 0 18px rgba(137, 183, 255, 0.03);
}

.space-feature-card-detailed {
    min-height: 220px;
}

.space-feature-card-home {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    background:
        radial-gradient(circle at 14% 14%, rgba(138, 193, 255, 0.14), transparent 32%),
        linear-gradient(160deg, rgba(13, 24, 38, 0.84), rgba(8, 15, 25, 0.90));
    border-color: rgba(159, 205, 255, 0.22);
}

.space-feature-console-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(201, 221, 245, 0.12);
}

.space-feature-kicker {
    font-size: 14px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #b8d8ff;
}

.space-feature-status {
    padding: 3px 7px;
    border: 1px solid rgba(141, 232, 255, 0.32);
    border-radius: 999px;
    background: rgba(12, 44, 58, 0.35);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #97f1ff;
}

.space-feature-main-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.space-event-visual {
    position: relative;
    width: 104px;
    height: 104px;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(201, 221, 245, 0.16);
    border-radius: 12px;
    overflow: hidden;
    background-image:
        linear-gradient(180deg, rgba(10, 18, 28, 0.08), rgba(10, 18, 28, 0.54)),
        url("/static/media/space_event_fireball.png"),
        radial-gradient(circle at 26% 24%, rgba(245, 170, 84, 0.24), transparent 46%),
        linear-gradient(140deg, rgba(42, 66, 95, 0.78), rgba(20, 30, 45, 0.92));
    background-size: auto, cover, auto, auto;
    background-position: center, center, center, center;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 18px rgba(137, 183, 255, 0.08);
}

.space-event-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(170, 206, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(170, 206, 255, 0.07) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.36;
    pointer-events: none;
}

.space-event-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: space-between;
}

.space-event-stack {
    min-width: 0;
    width: 100%;
}

.space-event-type-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

.space-event-type-label,
.space-controls-label {
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.space-event-type-value {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 177, 90, 0.15);
    border: 1px solid rgba(255, 205, 120, 0.22);
    font-size: 13px;
    letter-spacing: 0.8px;
    color: #ffd98f;
    text-transform: uppercase;
}

.space-controls-wrap {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.space-event-meta-row {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 5px;
    border-top: 1px solid rgba(201, 221, 245, 0.10);
}

.space-feature-card-home .space-feature-title {
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: 18px;
    line-height: 1.18;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.36em;
}

.space-feature-card-home .space-feature-detail {
    max-width: none;
    font-size: 14px;
    line-height: 1.25;
    color: #c7d8eb;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.6em;
}

.space-event-timestamp {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(151, 213, 255, 0.86);
    margin-bottom: 2px;
}

.space-feature-card-home .space-controls-label {
    font-size: 11px;
    padding-left: 8px;
    border-left: 1px solid rgba(201, 221, 245, 0.26);
}

.space-feature-card-home .space-pager {
    gap: 5px;
}

.space-feature-card-home .space-pager-button {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
}

.space-feature-card-home .space-page-indicator {
    min-width: 40px;
    font-size: 13px;
}

.space-secondary-panel-compact {
    padding: 5px 8px;
    min-height: 0;
    flex: 0 0 auto;
}

.space-secondary-panel-compact .space-summary {
    font-size: 14px;
    line-height: 1.25;
}

.space-feature-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.space-feature-title {
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-accent);
    line-height: 1.2;
}

.space-feature-detail {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-soft);
}

.space-pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

.space-pager-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--nav-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-accent);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.space-pager-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.space-pager-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.space-page-indicator {
    min-width: 56px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.6px;
}

.planet-strip {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 12px;
}

.planet-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.planet-orb {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-block;
    box-shadow:
        inset -6px -6px 12px rgba(0, 0, 0, 0.25),
        0 0 14px rgba(137, 183, 255, 0.05);
    animation: planetFloat 9s ease-in-out infinite;
}

.planet-chip:nth-child(2) .planet-orb {
    animation-delay: 0.8s;
}

.planet-chip:nth-child(3) .planet-orb {
    animation-delay: 1.6s;
}

.planet-chip:nth-child(4) .planet-orb {
    animation-delay: 2.4s;
}

@keyframes planetFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

.planet-earth {
    background: radial-gradient(circle at 40% 35%, #87d7ff 0%, #3d7fd9 50%, #23415c 100%);
}

.planet-jupiter {
    background: radial-gradient(circle at 40% 35%, #f5d0a3 0%, #bf8d56 55%, #5b3d25 100%);
}

.planet-mars {
    background: radial-gradient(circle at 40% 35%, #ff9d72 0%, #bb4a2f 55%, #5a2017 100%);
}

.planet-venus {
    background: radial-gradient(circle at 40% 35%, #f5ebc8 0%, #d5c289 50%, #6e5a35 100%);
}

.planet-name {
    font-size: 11px;
    color: var(--text-soft);
    letter-spacing: 0.8px;
}

.space-summary {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}