/* desigining is tough but programming is just.......*/   
   :root {
        --darkbase: #0b0c10;
        --panel: #1f2833;
        --highlight: #66fcf1;
        --secondary: #45a29e;
        --text: #c5c6c7;
        --blockone: #ff0055;
        --blocktwo: #00ccff;
        --danger: #ff4444;
        --success: #00c851;
    }

    body {
        background-color: var(--darkbase);
        color: var(--text);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .topbar {
        height: 60px;
        background: var(--panel);
        border-bottom: 2px solid var(--secondary);
        display: flex;
        align-items: center;
        padding: 0 25px;
        justify-content: space-between;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        z-index: 10;
    }

    .brand {
        font-size: 24px;
        font-weight: 700;
        color: var(--highlight);
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .container {
        display: flex;
        flex: 1;
        height: calc(100vh - 60px);
    }

    .sidebar {
        width: 350px;
        background: #151b24;
        border-right: 1px solid #333;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .scrollarea {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .workarea {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        background: radial-gradient(circle at center, #1a222e 0%, #0b0c10 100%);
    }

    .sectionheader {
        font-size: 12px;
        text-transform: uppercase;
        color: var(--secondary);
        border-bottom: 1px solid #333;
        padding-bottom: 5px;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .controlblock {
        background: var(--panel);
        padding: 15px;
        border-radius: 6px;
        border: 1px solid #2c3642;
    }

    .inputrow {
        margin-bottom: 15px;
    }

    .labelrow {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 13px;
    }

    .valuelabel {
        color: var(--highlight);
        font-family: monospace;
        font-size: 14px;
    }

    input[type=range] {
        width: 100%;
        -webkit-appearance: none; /*this is so annoying when u look at the css file*/
        background: transparent;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: var(--highlight);
        cursor: pointer;
        margin-top: -6px;
        box-shadow: 0 0 10px rgba(102, 252, 241, 0.5);
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: #333;
        border-radius: 2px;
    }

    .obj-one-slider::-webkit-slider-thumb {
        background: var(--blockone);
        box-shadow: 0 0 10px rgba(255, 0, 85, 0.5);
    }

    .obj-two-slider::-webkit-slider-thumb {
        background: var(--blocktwo);
        box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
    }

    .buttonrow {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }

    button {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 12px;
        transition: all 0.2s;
        color: #fff;
        background: #333;
    }

    .btn-primary {
        background: var(--secondary);
        color: #000;
    }

    .btn-primary:hover {
        background: var(--highlight);
    }

    .btn-danger {
        background: #d32f2f;
    }

    .btn-danger:hover {
        background: #f44336;
    }

    .simcanvas-container {
        flex: 2;
        position: relative;
        margin: 20px;
        border: 1px solid var(--secondary);
        background: #000;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(102, 252, 241, 0.1);
    }

    canvas {
        display: block;
        width: 100%;
        height: 100%;
    }
    /* again ronaldo or messi?*/
    .stats-panel {
        height: 250px;
        background: var(--panel);
        border-top: 1px solid #333;
        display: flex;
        padding: 10px;
        gap: 20px;
    }

    .stat-box {
        flex: 1;
        background: #151b24;
        border: 1px solid #333;
        border-radius: 4px;
        padding: 10px;
        display: flex;
        flex-direction: column;
    }

    .stat-title {
        font-size: 11px;
        color: #888;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .big-number {
        font-size: 24px;
        font-family: monospace;
        color: var(--text);
    }

    .collision-log {
        flex: 1;
        background: #000;
        border: 1px solid #333;
        font-family: monospace;
        font-size: 12px;
        color: #00ff00;
        padding: 10px;
        overflow-y: auto;
    }

    .log-entry {
        margin-bottom: 4px;
        border-bottom: 1px solid #222;
        padding-bottom: 2px;
    }

    .badge {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 10px;
        font-weight: bold;
        color: #000;
        margin-right: 5px;
    }

    .b-one { background: var(--blockone); }
    .b-two { background: var(--blocktwo); }

    .chart-container {
        flex: 1.5;
        background: #151b24;
        border-radius: 4px;
        border: 1px solid #333;
        position: relative;
    }

    #graphcanvas {
        width: 100%;
        height: 100%;
    }

    .tooltip {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0,0,0,0.7);
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 11px;
        pointer-events: none;
    }
    a{
        text-decoration: none;
        color: var(--highlight);
        margin-left: 25px;
        margin-top: 10px;
    }