:root{--bg-dark: #090d16;--panel-bg: rgba(15, 23, 42, .85);--panel-border: #1e293b;--header-bg: #0d1322;--accent-cyan: #38bdf8;--accent-cyan-glow: rgba(56, 189, 248, .25);--accent-green: #22c55e;--accent-purple: #a855f7;--accent-amber: #f59e0b;--accent-red: #ef4444;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-dim: #64748b}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden;height:100vh}#root{height:100vh;display:flex;flex-direction:column}.glass-panel{background:var(--panel-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:8px}.app-header{height:56px;background:var(--header-bg);border-bottom:1px solid var(--panel-border);display:flex;align-items:center;justify-content:space-between;padding:0 1rem;z-index:50}.brand-section{display:flex;align-items:center;gap:.75rem}.brand-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.brand-title{font-size:1rem;font-weight:700;background:linear-gradient(90deg,#fff,var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.selector-container{display:flex;align-items:center;gap:1rem}.challenge-select{background:var(--panel-bg);color:var(--text-primary);border:1px solid var(--panel-border);padding:.4rem .8rem;border-radius:6px;font-size:.875rem;outline:none;cursor:pointer}.challenge-select:focus{border-color:var(--accent-cyan)}.difficulty-badge{padding:.2rem .6rem;border-radius:9999px;font-size:.75rem;font-weight:600;text-transform:uppercase}.diff-easy{background:#22c55e26;color:var(--accent-green);border:1px solid rgba(34,197,94,.3)}.diff-medium{background:#f59e0b26;color:var(--accent-amber);border:1px solid rgba(245,158,11,.3)}.diff-advanced,.diff-expert{background:#ef444426;color:var(--accent-red);border:1px solid rgba(239,68,68,.3)}.header-actions{display:flex;align-items:center;gap:.75rem}.btn-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem 1rem;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.btn-run{background:var(--accent-cyan);color:#090d16}.btn-run:hover{background:#0284c7;box-shadow:0 0 12px var(--accent-cyan-glow)}.btn-submit{background:var(--accent-green);color:#090d16}.btn-submit:hover{background:#16a34a}.btn-spec{background:var(--panel-bg);color:var(--text-primary);border:1px solid var(--panel-border)}.btn-spec:hover{border-color:var(--text-secondary)}.workbench-container{flex:1;display:grid;grid-template-columns:55% 45%;gap:.5rem;padding:.5rem;height:calc(100vh - 56px);overflow:hidden}.editor-pane-wrapper{display:flex;flex-direction:column;height:100%;gap:.5rem;overflow:hidden}.code-editor-box{flex:1;border-radius:8px;overflow:hidden;border:1px solid var(--panel-border)}.console-box{height:220px;border-radius:8px;border:1px solid var(--panel-border);background:#060911;display:flex;flex-direction:column}.console-header{height:32px;background:#0d1322;border-bottom:1px solid var(--panel-border);padding:0 .75rem;display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:var(--text-secondary);font-weight:600}.console-content{flex:1;padding:.75rem;font-family:Fira Code,monospace;font-size:.8rem;color:#e2e8f0;overflow-y:auto;white-space:pre-wrap}.preview-pane-wrapper{display:flex;flex-direction:column;height:100%;border-radius:8px;border:1px solid var(--panel-border);background:var(--panel-bg);overflow:hidden}.preview-bar{height:38px;background:#0d1322;border-bottom:1px solid var(--panel-border);padding:0 .75rem;display:flex;align-items:center;gap:.5rem}.url-input{flex:1;background:#060911;border:1px solid var(--panel-border);color:var(--accent-cyan);padding:.25rem .6rem;border-radius:4px;font-size:.8rem;font-family:Fira Code,monospace}.preview-iframe{flex:1;width:100%;border:none;background:#0f172a}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100}.modal-card{width:90%;max-width:650px;background:#0f172a;border:1px solid var(--panel-border);border-radius:12px;padding:1.5rem;color:var(--text-primary);box-shadow:0 20px 25px -5px #00000080;max-height:85vh;overflow-y:auto}.score-circle{width:100px;height:100px;border-radius:50%;border:4px solid var(--accent-cyan);display:flex;align-items:center;justify-content:center;flex-direction:column;margin:1rem auto;box-shadow:0 0 20px var(--accent-cyan-glow)}.score-num{font-size:1.75rem;font-weight:800;color:var(--accent-cyan)}