* {

    box-sizing: border-box;

    margin: 0;

    padding: 0

}



body {

    font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

    background-color: #0b0f19;

    color: #e0e6ed;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    min-height: 100vh;

    padding: 2px 20px 20px 20px;

    overflow: hidden

}



.main-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

    max-width: 1200px;

    gap: 8px;

    margin-top: 0

}



.header-title {

    text-align: center

}



    .header-title h1 {

        font-size: 1.8rem;

        color: #4da6ff;

        margin-bottom: 4px;

        letter-spacing: .5px

    }



    .header-title p {

        font-size: .95rem;

        color: #8ab4f8

    }



.top-navbar {

    width: 100%;

    background: #151d2a;

    border: 1px solid #2a3b5c;

    border-radius: 12px;

    padding: 8px 16px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    box-shadow: 0 8px 24px rgba(0,0,0,.5)

}



.nav-group {

    display: flex;

    align-items: center;

    gap: 10px

}



.btn {

    background: #1e2c40;

    color: #fff;

    border: 1px solid #3b5278;

    padding: 8px 16px;

    border-radius: 8px;

    font-size: .9rem;

    font-weight: 600;

    cursor: pointer;

    transition: all .2s ease;

    display: flex;

    align-items: center;

    gap: 6px

}



    .btn:hover {

        background: #2a3e5c;

        border-color: #4da6ff

    }



.btn-primary {

    background: #0088ff;

    border-color: #0088ff

}



    .btn-primary:hover {

        background: #0066cc;

        border-color: #0066cc

    }



.canvas-container {

    position: relative;

    width: 100%;

    height: 800px;

    background-color: #030611;

    border: 1px solid #1a2638;

    border-radius: 16px;

    box-shadow: inset 0 0 40px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.5);

    overflow: hidden

}



    .canvas-container canvas {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%

    }



#starsCanvas {

    z-index: 1

}



#simCanvas {

    z-index: 2

}



#floating_orbit_panel {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 380px;

    height: auto;

    max-height: calc(100vh - 40px);

    background: rgba(18,25,38,.92);

    backdrop-filter: blur(8px);

    border: 1px solid #2c3e5d;

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,.6);

    z-index: 50;

    display: none;

    flex-direction: column;

    overflow: hidden

}



    #floating_orbit_panel .panel-body {

        padding: 15px;

        overflow-y: auto;

        max-height: calc(100vh - 100px)

    }



    #floating_orbit_panel ::-webkit-scrollbar {

        width: 6px

    }



    #floating_orbit_panel ::-webkit-scrollbar-track {

        background: rgba(0,0,0,.2);

        border-radius: 4px

    }



    #floating_orbit_panel ::-webkit-scrollbar-thumb {

        background: #2c3e5d;

        border-radius: 4px

    }



        #floating_orbit_panel ::-webkit-scrollbar-thumb:hover {

            background: #007bff

        }



.panel-header {

    background: #1a2536;

    padding: 10px 15px;

    user-select: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid #2c3e5d

}



    .panel-header h3 {

        font-size: .95rem;

        color: #4da6ff

    }



.close-btn {

    background: 0 0;

    border: none;

    color: #a0aec0;

    font-size: 1.2rem;

    cursor: pointer

}



    .close-btn:hover {

        color: #fff

    }



.panel-body {

    padding: 15px;

    display: flex;

    flex-direction: column;

    gap: 15px;

    max-height: 500px;

    overflow-y: auto

}



.control-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

    background: rgba(255,255,255,.03);

    padding: 10px;

    border-radius: 8px

}



    .control-group label {

        font-size: .85rem;

        color: #a0aec0;

        display: flex;

        justify-content: space-between

    }



    .control-group input[type=range] {

        width: 100%;

        accent-color: #0088ff

    }



.impulse-grid {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 6px;

    width: 140px;

    margin: 0 auto

}



    .impulse-grid .btn {

        justify-content: center;

        padding: 8px

    }



.modal-popup {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    background: #101726;

    border: 1px solid #2a3d5e;

    border-radius: 12px;

    padding: 24px;

    box-shadow: 0 10px 40px rgba(0,0,0,.85);

    z-index: 100;

    display: none

}



#infoPopup {

    width: 440px;

    max-width: 90%

}



    #infoPopup h4 {

        color: #4da6ff;

        margin-bottom: 12px;

        font-size: 1.1rem

    }



    #infoPopup ul {

        margin-left: 20px;

        font-size: .9rem;

        line-height: 1.6;

        color: #cbd5e1

    }



#theoryPopup {

    width: 780px;

    max-width: 95%

}



.theory-title {

    color: #4da6ff;

    font-size: 1.25rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 16px;

    padding-bottom: 8px;

    border-bottom: 1px solid #1e2d42

}



.theory-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-bottom: 20px

}



@media (max-width:700px) {

    .theory-grid {

        grid-template-columns: 1fr

    }

}



.theory-card {

    background: rgba(255,255,255,.02);

    border: 1px solid #1e2c40;

    border-radius: 8px;

    padding: 16px;

    display: flex;

    flex-direction: column;

    justify-content: space-between

}



.theory-card-title {

    color: #ffb74d;

    font-size: .9rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

    margin-bottom: 10px

}



.theory-card-text {

    font-size: .85rem;

    line-height: 1.5;

    color: #94a3b8;

    margin-bottom: 15px

}



.footer {

    font-size: .85rem;

    color: #5a6e85;

    text-align: center;

    margin-top: 5px

}



.fraction {

    display: inline-flex;

    flex-direction: column;

    vertical-align: middle;

    text-align: center;

    padding: 0 4px;

    font-size: .95em

}



    .fraction .num {

        border-bottom: 1px solid currentColor;

        padding-bottom: 2px;

        margin-bottom: 2px;

        display: block

    }



    .fraction .den {

        display: block;

        padding-top: 1px

    }



.formula-box {

    font-family: 'Times New Roman',Times,serif;

    font-size: 1.15em;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

    background: rgba(255,255,255,.05);

    border-radius: 6px;

    margin-top: 10px

}



.status-badge {

    display: inline-block;

    padding: 6px 14px;

    margin: 0 8px;

    background-color: #1e293b;

    color: #38bdf8;

    border: 1px solid #334155;

    border-radius: 6px;

    font-weight: 600;

    font-size: 14px;

    text-align: center;

    min-width: 140px

}



#floating_impulse_panel {

    position: absolute;

    top: 20px;

    left: 20px;

    width: 200px;

    background: rgba(15,23,42,.25);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 12px;

    box-shadow: 0 8px 32px 0 rgba(0,0,0,.37),inset 0 1px 0 0 rgba(255,255,255,.2);

    z-index: 60;

    user-select: none;

    overflow: hidden

}



.impulse-header {

    background: rgba(255,255,255,.05);

    padding: 6px 10px;

    cursor: move;

    border-bottom: 1px solid rgba(255,255,255,.1);

    text-align: center

}



    .impulse-header h4 {

        font-size: .82rem;

        color: #60a5fa;

        margin: 0;

        font-weight: 600;

        text-shadow: 0 1px 2px rgba(0,0,0,.6)

    }