:root {
    --bg: #0f172a;
    --panel: #111827;
    --muted: #1f2937;
    --text: #0b1020;
    --accent: #60a5fa;
    --ok: #22c55e;
    --warn: #f59e0b;
    --err: #ef4444;
}





* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
	color:#0f172a;
    font-family: system-ui, sans-serif;
}

header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--muted);
    display: flex;
    align-items: center;
}

header h1 { margin: 0; font-size: 18px; font-weight: 700; }

.htext{
	color: #e5e7eb;
	}

.status { margin-left: auto; font-size: 12px; opacity: .8; }

.wrap {
    height: calc(100% - 54px);
    display: grid;
    grid-template-columns: 1fr 420px 520px;
    gap: 10px;
    padding: 10px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--muted);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel header {
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid var(--muted);
    padding: 10px;
}






.panel h2 { margin: 0; font-size: 14px; font-weight: 700; }

.panel .content { flex: 1; display: flex; min-height: 0; }

#blocklyArea { background: #000000; position: relative; flex: 1; }

#blocklyDiv { position: absolute; inset: 0; }

#code {
    width: 100%;
    height: 100%;
    background: #0b1020;
    color: #e2e8f0;
    border: none;
    padding: 12px;
    font-family: monospace;
    font-size: 15px;
    outline: none;
    resize: none;
}

#runbar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--muted);
}

button {
    appearance: none;
    border: 1px solid var(--muted);
    background: #0b1220;
    color: #e5e7eb;;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

button:hover { border-color: #334155; }

.canvasWrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    position: relative;
}

#turtle-area { width: 100%; height: 100%; min-height: 300px; }

#output {
	color: #e5e7eb;
    height: 320px;
    padding: 8px;
    overflow: auto;
    background: #0b1020;
    border-top: 1px solid var(--muted);
    font-family: monospace;
    font-size: 15px;
}

.note {
    padding: 8px 12px;
    font-size: 12px;
    color: #94a3b8;
    background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 1200px) {
    .wrap { grid-template-columns: 1fr; height: auto; }
    .panel { min-height: 380px; }
}