* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #00030a;
    color: #edf7ff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


#topbar {
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0 22px;

    background:
        linear-gradient(
            180deg,
            rgba(2,10,22,.98),
            rgba(2,7,16,.96)
        );

    border-bottom:
        1px solid
        rgba(71,152,215,.32);

    box-shadow:
        0 4px 20px
        rgba(0,0,0,.55);

    position: relative;
    z-index: 20;
}


.brand {
    font-size: 28px;
    font-weight: 900;

    letter-spacing: 5px;

    color: #ffffff;

    text-shadow:
        0 0 18px
        rgba(54,191,255,.35);
}


.subbrand {
    margin-top: 2px;

    color: #56dfff;

    font-size: 9px;

    letter-spacing: 2px;
}


.clock-wrap {
    text-align: right;
}


.clock-wrap span {
    display: block;

    color: #64839b;

    font-size: 8px;

    letter-spacing: 1px;
}


.clock-wrap strong {
    display: block;

    margin-top: 3px;

    color: #70e6ff;

    font-family:
        monospace;

    font-size: 12px;
}


#workspace {
    height:
        calc(100vh - 72px);

    display: grid;

    grid-template-columns:
        230px
        minmax(0,1fr)
        345px;
}


#left-panel,
#detail-panel {
    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            rgba(3,14,28,.97),
            rgba(2,8,18,.97)
        );
}


#left-panel {
    padding: 18px;

    border-right:
        1px solid
        rgba(70,139,190,.28);
}


#detail-panel {
    padding: 22px;

    border-left:
        1px solid
        rgba(70,139,190,.28);
}


#left-panel h2 {
    margin: 0;

    color: #59e0ff;

    font-size: 13px;

    letter-spacing: 2px;
}


#left-panel p {
    color: #8ba5b8;

    font-size: 11px;

    line-height: 1.55;
}


#planet-list {
    display: grid;

    gap: 6px;

    margin-top: 17px;
}


#planet-list button,
.panel-block button {
    width: 100%;

    padding:
        9px 10px;

    text-align: left;

    border:
        1px solid
        rgba(61,130,182,.30);

    border-radius: 4px;

    background:
        rgba(11,34,57,.70);

    color: #cfe3f2;

    cursor: pointer;

    transition:
        .15s ease;
}


#planet-list button:hover,
#planet-list button.active,
.panel-block button:hover {
    border-color:
        #4adfff;

    color:
        #ffffff;

    background:
        rgba(18,75,106,.65);
}


.panel-block {
    margin-top: 25px;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(68,137,186,.25);
}


.panel-block h3 {
    color: #9d83ff;

    font-size: 10px;

    letter-spacing: 1px;
}


.panel-block div {
    margin: 8px 0;

    color: #7691a6;

    font-size: 10px;
}


.panel-block button {
    margin-bottom: 6px;

    font-size: 9px;

    letter-spacing: 1px;
}


#universe {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            #07142b 0%,
            #020611 42%,
            #000207 100%
        );
}


#three-container {
    position: absolute;

    inset: 0;
}


#three-container canvas {
    display: block;

    width: 100%;
    height: 100%;
}


#viewer-help {
    position: absolute;

    left: 15px;
    top: 15px;

    z-index: 5;

    display: flex;

    gap: 10px;

    align-items: center;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(84,173,232,.25);

    border-radius: 5px;

    background:
        rgba(2,10,22,.72);

    backdrop-filter:
        blur(5px);
}


#viewer-help strong {
    color: #54ddff;

    font-size: 9px;

    letter-spacing: 1px;
}


#viewer-help span {
    color: #6889a0;

    font-size: 8px;
}


#scale-note {
    position: absolute;

    left: 15px;
    bottom: 15px;

    z-index: 5;

    max-width: 470px;

    padding:
        9px 11px;

    background:
        rgba(2,10,22,.72);

    border:
        1px solid
        rgba(70,145,201,.22);

    border-radius: 4px;

    color: #7893a7;

    font-size: 9px;

    line-height: 1.45;
}


#planet-symbol {
    font-size: 54px;

    color: #65e0ff;

    text-shadow:
        0 0 20px
        rgba(55,186,255,.28);
}


#detail-panel h1 {
    margin:
        4px 0 8px;

    font-size: 30px;
}


#planet-description {
    color: #91a8ba;

    font-size: 11px;

    line-height: 1.55;
}


.stat-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 7px;

    margin-top: 18px;
}


.stat-grid div {
    padding: 9px;

    border:
        1px solid
        rgba(61,133,184,.25);

    background:
        rgba(12,36,58,.55);
}


.stat-grid span {
    display: block;

    color: #668298;

    font-size: 7px;

    letter-spacing: 1px;
}


.stat-grid strong {
    display: block;

    margin-top: 4px;

    color: #daeaf5;

    font-size: 10px;
}


#load-live {
    width: 100%;

    margin-top: 16px;

    padding: 11px;

    border:
        1px solid
        #28bce3;

    border-radius: 4px;

    background:
        linear-gradient(
            #1b7496,
            #124c69
        );

    color: white;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


#load-live:hover {
    filter:
        brightness(1.12);
}


#live-status {
    margin-top: 12px;

    color: #72a1bd;

    font-size: 9px;

    line-height: 1.45;
}


#ephemeris {
    white-space: pre-wrap;

    color: #9edcf1;

    font-size: 8px;

    line-height: 1.5;
}


@media (
    max-width: 1050px
) {

    #workspace {
        grid-template-columns:
            195px 1fr;
    }


    #detail-panel {
        position: absolute;

        right: 0;
        top: 72px;
        bottom: 0;

        width: 330px;

        z-index: 30;

        box-shadow:
            -10px 0 25px
            rgba(0,0,0,.55);
    }
}



/* =========================================================
   COSMIC SPACE INTELLIGENCE COMMAND CENTER
   ========================================================= */

#intel-toolbar {
    position: absolute;

    left: 18px;
    right: 18px;
    top: 18px;

    z-index: 15;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    pointer-events: auto;
}


#intel-toolbar button {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(91,174,224,.34);

    border-radius: 4px;

    background:
        rgba(2,11,23,.85);

    color: #89a8bb;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .6px;

    cursor: pointer;
}


#intel-toolbar button:hover,
#intel-toolbar button.active {
    color: #ffffff;

    border-color: #55ddff;

    background:
        rgba(17,67,91,.91);
}


#ambient-music {
    margin-left: auto;
}


#intel-dock {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    z-index: 15;

    max-height: 42%;

    overflow: auto;

    border:
        1px solid
        rgba(72,164,219,.34);

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            rgba(2,13,27,.93),
            rgba(1,7,16,.96)
        );

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.55);

    backdrop-filter:
        blur(9px);
}


.intel-header {
    position: sticky;
    top: 0;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        11px 14px;

    background:
        rgba(3,15,30,.97);

    border-bottom:
        1px solid
        rgba(70,145,196,.25);
}


.intel-eyebrow {
    color: #55dcff;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.intel-header h2 {
    margin:
        3px 0 0;

    font-size: 12px;

    letter-spacing: 1px;
}


#intel-refresh {
    padding:
        6px 9px;

    border:
        1px solid
        rgba(74,171,224,.4);

    border-radius: 4px;

    background:
        rgba(12,52,75,.75);

    color: #8ee9ff;

    font-size: 8px;

    cursor: pointer;
}


.intel-view {
    display: none;

    padding: 12px;
}


.intel-view.active {
    display: block;
}


.intel-summary-grid,
.space-weather-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(115px,1fr)
        );

    gap: 8px;
}


.intel-summary-grid article,
.space-weather-grid article {
    padding: 10px;

    border:
        1px solid
        rgba(65,143,193,.27);

    border-radius: 5px;

    background:
        rgba(10,35,55,.55);
}


.intel-summary-grid span,
.space-weather-grid span {
    display: block;

    color: #6f8fa4;

    font-size: 7px;

    letter-spacing: 1px;
}


.intel-summary-grid strong,
.space-weather-grid strong {
    display: block;

    margin-top: 5px;

    color: #e4f6ff;

    font-size: 16px;
}


.intel-summary-grid small {
    color: #557184;

    font-size: 7px;
}


.intel-status,
.intel-description,
.sat-summary {
    margin-top: 9px;

    color: #7f9caf;

    font-size: 9px;

    line-height: 1.45;
}


.intel-table {
    margin-top: 9px;

    overflow-x: auto;
}


.intel-table table {
    width: 100%;

    border-collapse: collapse;

    font-size: 8px;
}


.intel-table th {
    position: sticky;
    top: 43px;

    padding: 7px;

    text-align: left;

    background: #07182a;

    color: #59dfff;

    font-size: 7px;

    letter-spacing: .7px;
}


.intel-table td {
    padding: 7px;

    border-bottom:
        1px solid
        rgba(67,132,177,.16);

    color: #abc1ce;
}


.intel-table tr:hover td {
    background:
        rgba(30,89,120,.23);
}


.warning-row td {
    color: #ffc477;
}


#space-weather-detail {
    color: #80a4ba;

    font-size: 8px;

    white-space: pre-wrap;
}


@media (max-width: 1100px) {

    .intel-summary-grid,
    .space-weather-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(100px,1fr)
            );
    }

}



/* =========================================================
   COSMIC STEP 7 - EARTH ORBIT
   ========================================================= */

#orbit-controls {
    position: absolute;

    left: 18px;
    top: 58px;

    z-index: 19;

    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    max-width: calc(100% - 36px);
}


#orbit-controls button {
    padding:
        7px 9px;

    border:
        1px solid
        rgba(70,155,211,.38);

    border-radius: 4px;

    background:
        rgba(2,12,24,.88);

    color: #8da8ba;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .5px;

    cursor: pointer;

    backdrop-filter:
        blur(5px);
}


#orbit-controls button:hover,
#orbit-controls button.active {
    color: white;

    border-color: #55dfff;

    background:
        rgba(15,73,101,.92);
}


#orbit-controls button.warning {
    color: #ffb866;

    border-color:
        rgba(255,151,72,.45);
}


#orbit-readout {
    position: absolute;

    right: 18px;
    top: 58px;

    z-index: 19;

    width: 250px;

    padding: 10px 12px;

    border:
        1px solid
        rgba(74,160,215,.30);

    border-radius: 5px;

    background:
        rgba(1,10,21,.88);

    backdrop-filter:
        blur(7px);

    pointer-events: none;
}


.orbit-readout-title {
    color: #58dfff;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.4px;
}


#orbit-object-name {
    margin-top: 4px;

    color: white;

    font-size: 11px;

    font-weight: 800;
}


#orbit-object-detail {
    margin-top: 5px;

    color: #7594a8;

    font-size: 8px;

    line-height: 1.45;

    white-space: pre-line;
}



/* =========================================================
   COSMIC STEP 8 - ORBIT INTELLIGENCE TOOLS
   ========================================================= */

#orbit-search-box {
    position: absolute;

    left: 18px;
    top: 96px;

    z-index: 24;

    display: flex;

    gap: 5px;

    padding: 6px;

    border:
        1px solid
        rgba(75,160,214,.28);

    border-radius: 5px;

    background:
        rgba(1,10,21,.90);

    backdrop-filter:
        blur(8px);
}


#orbit-search {
    width: 220px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(72,150,204,.35);

    border-radius: 4px;

    outline: none;

    background:
        #071523;

    color:
        #e8f7ff;

    font-size: 10px;
}


#orbit-search:focus {
    border-color:
        #55ddff;
}


#orbit-search-box button {
    padding:
        7px 9px;

    border:
        1px solid
        rgba(75,162,215,.36);

    border-radius: 4px;

    background:
        rgba(10,45,65,.88);

    color:
        #a8dff1;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


#orbit-search-box button:hover,
#follow-orbit-object.active {
    color:
        white;

    border-color:
        #55ddff;

    background:
        rgba(18,83,111,.95);
}


#orbit-tooltip {
    position: fixed;

    z-index: 9999;

    display: none;

    max-width: 260px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(85,220,255,.45);

    border-radius: 4px;

    background:
        rgba(0,8,18,.94);

    color:
        #dff7ff;

    font-size: 9px;

    line-height: 1.45;

    pointer-events: none;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.55);
}


#orbit-tooltip strong {
    color:
        #58e1ff;
}


@media (max-width: 1150px) {

    #orbit-search-box {
        top: 132px;

        flex-wrap: wrap;

        max-width: 360px;
    }

    #orbit-search {
        width: 100%;
    }

}



/* =========================================================
   COSMIC STEP 10 CLEAN - MOON SYSTEM
   ========================================================= */

#moon-system-panel {
    margin-top: 16px;
    padding: 12px;

    border:
        1px solid
        rgba(111,155,255,.32);

    border-radius: 6px;

    background:
        rgba(9,22,45,.72);
}


.moon-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.moon-title-row span {
    color: #9cadff;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.moon-title-row strong {
    color: white;

    font-size: 22px;
}


#moon-system-name {
    margin-top: 5px;

    color: #e4f4ff;

    font-size: 12px;
    font-weight: 800;
}


#moon-system-note,
#moon-selected {
    margin-top: 7px;

    color: #7897aa;

    font-size: 8px;

    line-height: 1.45;
}


#moon-selected {
    padding-top: 8px;

    border-top:
        1px solid
        rgba(95,148,190,.20);

    white-space: pre-line;
}


.moon-buttons {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 6px;

    margin-top: 9px;
}


.moon-buttons button {
    padding: 8px;

    border:
        1px solid
        rgba(71,171,220,.40);

    border-radius: 4px;

    background:
        rgba(9,51,74,.82);

    color: #b8ecfa;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


.moon-buttons button:hover {
    border-color: #58e0ff;

    color: white;
}



/* =========================================================
   COSMIC STEP 11 - DWARF PLANETS
   ========================================================= */

.dwarf-panel button {
    width: 100%;

    margin-bottom: 6px;

    padding: 8px 10px;

    text-align: left;

    border:
        1px solid
        rgba(129,105,205,.34);

    border-radius: 4px;

    background:
        rgba(31,20,58,.58);

    color: #c7b9ef;

    font-size: 9px;

    cursor: pointer;
}


.dwarf-panel button:hover,
.dwarf-panel button.active {
    border-color: #b592ff;

    color: white;

    background:
        rgba(75,45,116,.72);
}



/* =========================================================
   COSMIC STEP 12 - SMALL BODIES
   ========================================================= */

.small-body-panel button {
    width: 100%;

    margin-bottom: 6px;

    padding: 8px 10px;

    text-align: left;

    border:
        1px solid
        rgba(88,155,205,.30);

    border-radius: 4px;

    background:
        rgba(13,32,51,.60);

    color: #9eb9ca;

    font-size: 9px;

    cursor: pointer;
}


.small-body-panel button:hover,
.small-body-panel button.active {
    color: white;

    border-color: #5bdcff;

    background:
        rgba(19,69,93,.72);
}



/* =========================================================
   COSMIC STEP 13 - COMETS
   ========================================================= */

.comet-panel button {
    width: 100%;

    margin-bottom: 6px;

    padding: 8px 10px;

    text-align: left;

    border:
        1px solid
        rgba(80,175,220,.32);

    border-radius: 4px;

    background:
        rgba(7,42,61,.62);

    color:
        #a8d9ec;

    font-size: 9px;

    cursor: pointer;
}


.comet-panel button:hover,
.comet-panel button.active {
    color: white;

    border-color:
        #61e0ff;

    background:
        rgba(15,80,104,.78);
}


#comet-count-label {
    margin-top: 5px;

    color:
        #6f91a5;

    font-size: 8px;

    line-height: 1.4;
}



/* =========================================================
   COSMIC STEP 13B - COMETS
   ========================================================= */

.comet-panel button {
    width: 100%;
    margin-bottom: 6px;
    padding: 8px 10px;

    text-align: left;

    border:
        1px solid
        rgba(82,180,225,.35);

    border-radius: 4px;

    background:
        rgba(7,43,64,.64);

    color: #aee7f7;

    font-size: 9px;

    cursor: pointer;
}


.comet-panel button:hover,
.comet-panel button.active {
    color: white;

    border-color: #65e1ff;

    background:
        rgba(18,78,103,.80);
}


#comet-status {
    color: #7194a8;

    font-size: 8px;

    line-height: 1.4;
}