body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--page); color: var(--ink); font-family: var(--font); }
.sandbox-header .logo { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 700; }
.sandbox-main { display: flex; flex: 1; gap: 12px; min-height: 0; padding: 12px; overflow: hidden; background: var(--page); }
.sandbox-pane { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.sandbox-pane:hover { border-color: var(--accent); }
.pane-editor { flex: 3; }
.pane-sidebar { display: flex; flex: 2; flex-direction: column; gap: 12px; min-width: 0; }
.roblox-viewport { position: relative; display: flex; flex: 3; align-items: center; justify-content: center; margin: 8px; overflow: hidden; background: #17231f; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.viewport-canvas { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #17231f; background-image: linear-gradient(#2b3c35 1px, transparent 1px), linear-gradient(90deg, #2b3c35 1px, transparent 1px); background-size: 24px 24px; }
.console-container { display: flex; flex: 2; flex-direction: column; min-height: 140px; }
.console-logs { flex: 1; min-width: 0; padding: 11px; overflow: auto; color: #e4f4ed; background: #17231f; border-top: 1px solid #2a3933; font: 11px/1.5 var(--mono); }
.log-line { margin-bottom: 4px; padding-left: 9px; border-left: 2px solid #4f665c; white-space: pre-wrap; word-break: break-all; }
.log-print { color: #e4f4ed; }
.log-warn { color: #efb253; border-left-color: #efb253; }
.log-error { color: #ef7e72; border-left-color: #ef7e72; }
.log-system { color: #77cfe6; border-left-color: #77cfe6; font-weight: 700; }
.unauth-overlay { text-align: center; }
.unauth-overlay h1 { margin-bottom: 8px; font-size: 22px; font-weight: 700; }

@media (max-width: 900px) {
    .sandbox-main { flex-direction: column; overflow: auto; padding: 8px; }
    .sandbox-pane { min-height: 280px; }
    .sandbox-header .logo span { display: none; }
}

@media (max-width: 600px) {
    .sandbox-header { flex-wrap: wrap; height: auto; padding: 9px 10px; }
    .sandbox-header > div:last-child { width: 100%; gap: 5px; }
    .sandbox-header .btn { flex: 1; padding: 0 7px; }
    .sandbox-main { height: calc(100vh - 100px); }
}