.sim-layout{
    display:grid;
    grid-template-columns:1fr 270px;
    gap:16px;
    align-items:start;
}

@media (max-width:820px){
    .sim-layout{
    grid-template-columns:1fr;
    }
    .sidebar{
        order:-1;
    }
}

.sidebar{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.control-group{
    padding:14px 16px;
    padding-bottom:10px;
}

.control-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}

.control-row:last-child{
    margin-bottom:0;
}

.control-row label{
    font-size:11px;
    margin-bottom:0;
    color:var(--dim);
}

.toggle{
    position:relative;
    width:32px;
    height:18px;
    flex-shrink:0;
    display:inline-block;
}

.toggle input{
    opacity:0;
    width:0;
    height:0;
    position:absolute;
}

.toggle-slider{
    position:absolute;
    inset:0;
    background:var(--border2);
    border-radius:9px;
    cursor:pointer;
    transition:background 0.2s;
}

.toggle-slider::before{
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    top:3px;
    left:3px;
    background:var(--dim);
    border-radius:50%;
    transition:transform 0.2s,background 0.2s;
}

.toggle input:checked+.toggle-slider::before{
    transform:translateX(14px);
}

.toggle input:checked+.toggle-slider{
    background:var(--green);
}

.speed-val {
    font-size: 11px;
    color: var(--amber);
    min-width: 40px;
    text-align: right;
}

.body-list{
    max-height:160px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--border2) transparent;
}

.body-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 0px;
    font-size:11px;
    border-bottom:1px solid var(--border2);
    line-height:1.4;
}

.body-row:last-child{
    border-bottom:none;
}

.body-dot{
    width:8px;
    height:8px;
    min-width:8px;
    border-radius:50%;
}

.body-name{
    flex:1;
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.body-mass{
    color:var(--dim);
    font-size:10px;
    flex-shrink:0;
}

.stats-list{
    padding:14px 16px;
}

.energy-bar{
    height:2px;
    background:var(--border);
    border-radius:1px;
    margin-top:8px;
    overflow:hidden;
}

.energy-fill{
    height:100%;
    background:var(--green);
    border-radius: 1px;
    transition:width 0.3s;
}

#timeDisplay{
    font-size: 11px;
    color:var(--amber);
    margin-left:11px
}

.preset-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap: 6px;
    padding:14px 16px;
}

.preset-btn {
    padding:7px 8px;
    background:var(--bg);
    text-align:center;
    color:var(--text);
    font-size:10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: 'IBM Plex Mono',monospace;
    transition: all 0.15s;
    letter-spacing: 0.03em;
    cursor: pointer;
    line-height:1;
}

.preset-btn:hover {
    color:var(--green);
    border-color:var(--green);
}

.preset-btn:active {
    background:var(--green);
    color:var(--bg);
    background:rgba(57,255,133,0.05);
}

.hint{
    font-size:10px;
    color:var(--dimmer);
    padding:4px 16px 14px;
    line-height:1.6;
}

.canvas-overlay{
    position:absolute;
    inset:auto auto auto 0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    font-size:11px;
    white-space:pre;
    pointer-events:none;
    padding:12px 16px;
}

.canvas-wrap{
    position:relative;
    overflow:hidden;
}

#simCanvas{
    display:block;
}

canvas{
    display:block;
    width:100%;
    cursor:crosshair;
}

.sim-controls{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    padding:10px 16px;
    border-top:1px solid var(--border);
}