@import url("../../../assets/workshop-3d.css");
:root { --blue:#6d28d9; --orange:#9a3412; }
.eyebrow { color:#6d28d9; }
.lesson-nav { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; margin:1.2rem 0; }
.studio { border-top:5px solid #8b5cf6; }
.studio-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(250px,1fr); gap:1.5rem; margin:1.2rem 0; }
.artboard { position:relative; overflow:hidden; border:1px solid #cbd5e1; border-radius:16px; box-shadow:0 12px 30px #17203318; aspect-ratio:1; }
.artboard canvas { display:block; width:100%; height:100%; }
#guides { position:absolute; inset:0; cursor:grab; touch-action:none; }
.studio-panel { min-width:0; padding:1rem; border-radius:12px; background:#f5f3ff; border:1px solid #ddd6fe; }
.studio-panel label { display:block; margin:.8rem 0 .3rem; font-weight:700; }
.studio-panel select, .studio-panel input[type=number] { width:100%; padding:.5rem; font:inherit; border:1px solid #94a3b8; background:white; color:#172033; border-radius:7px; }
.studio-panel input[type=color] { width:100%; height:42px; padding:3px; border:1px solid #94a3b8; border-radius:7px; background:white; }
.studio-panel .buttons { margin:.8rem 0; }
.view-options { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin:.7rem 0; }
.metric { overflow-x:auto; padding:.75rem; border:1px solid #ddd6fe; border-radius:9px; background:#faf5ff; margin:.7rem 0; }
.polygon-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; }
.polygon-card { padding:.7rem; text-align:center; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:12px; }
.polygon-card svg { display:block; width:100%; height:85px; }
.polygon-card strong { display:block; }
button { background:#6d28d9; border-color:#6d28d9; }
button.secondary { color:#6d28d9; }
.result { min-height:1.8rem; color:#5b21b6; font-weight:600; }
.file-control { display:block; margin:1rem 0; }
@media(max-width:800px) { .studio-layout { grid-template-columns:1fr; } .polygon-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media print { .studio-panel,#guides,.view-options,.file-control { display:none; } .studio-layout { display:block; } }

#guides:active { cursor:grabbing; }
.camera-panel { padding:1rem; margin:1rem 0; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:12px; }
.camera-panel label { display:block; font-weight:700; }
@media print { .camera-panel { display:none; } }

.shape-generator { margin-top:1rem; padding:.8rem; background:white; border:2px solid #c4b5fd; border-radius:12px; }
.shape-generator h3 { margin-top:0; }
.shape-generator p { font-size:.94rem; }
.studio-panel input[aria-invalid=true] { border:2px solid #b91c1c; }
.studio-panel input[type=range],.camera-panel input[type=range] { width:100%; accent-color:#6d28d9; }
button:disabled { opacity:.45; cursor:default; }
.live-challenge { padding:1rem; background:#f0fdf4; border:1px solid #86efac; border-radius:12px; }
#live-progress { display:flex; flex-wrap:wrap; gap:.7rem; }
#live-progress span { padding:.5rem .7rem; border-radius:20px; border:1px solid #94a3b8; }
#live-progress .complete { color:#166534; background:#dcfce7; border-color:#4ade80; }
#live-progress .pending { color:#334155; background:white; }
@media(min-width:801px) { .studio-layout > div:first-child { position:sticky; top:1rem; align-self:start; } }