:root{--bg-main:#090d16;--bg-surface:#0f172a;--bg-card:#141e33;--bg-card-hover:#1e293b;--bg-elevated:#1e2942;--border-subtle:#ffffff14;--border-medium:#ffffff26;--border-active:#6366f1;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--accent-primary:#6366f1;--accent-gradient:linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);--accent-glow:#6366f159;--success:#10b981;--success-glow:#10b9814d;--warning:#f59e0b;--danger:#ef4444;--info:#0ea5e9;--font-ui:"Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Tahoma, Arial, sans-serif;--font-display:"Segoe UI Variable Display", "Segoe UI", Tahoma, Arial, sans-serif;--font-code:"Cascadia Code", "Cascadia Mono", "Consolas", "Courier New", monospace;--header-height:64px}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#fff3 transparent;margin:0;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}body{font-family:var(--font-ui);background-color:var(--bg-main);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;flex-direction:column;min-height:100vh;display:flex;overflow:hidden}button,input,select,textarea{font-family:inherit}.app-header{min-height:var(--header-height);z-index:50;-webkit-user-select:none;user-select:none;background:#0d1424;border-bottom:1px solid #ffffff1f;flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:10px 18px;height:auto;padding:0 20px;display:flex;position:sticky;top:0;box-shadow:0 2px 12px #00000059}.brand-section{flex:0 auto;align-items:center;gap:14px;min-width:0;display:flex}.brand-logo{background:var(--accent-gradient);width:38px;height:38px;box-shadow:0 4px 14px var(--accent-glow);border-radius:10px;justify-content:center;align-items:center;display:flex}.brand-logo svg{color:#fff;width:24px;height:24px}.brand-title-wrap{flex-direction:column;gap:2px;display:flex}.brand-title{font-family:var(--font-display);letter-spacing:.2px;color:#fff;font-size:16px;font-weight:800}.brand-tagline{color:var(--text-muted);font-size:11.5px;font-weight:500}.exercise-selector-bar{background:#131c30;border:1px solid #ffffff24;border-radius:10px;flex:0 auto;align-items:center;gap:10px;min-width:0;padding:6px 14px;display:flex;box-shadow:inset 0 1px 2px #0003}.ex-level-badge{color:#c7d2fe;letter-spacing:.4px;background:#6366f138;border:1px solid #6366f166;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700}.ex-select-dropdown{color:#f8fafc;font-family:var(--font-ui);cursor:pointer;background:0 0;border:none;outline:none;max-width:340px;font-size:13.5px;font-weight:600}.ex-select-dropdown option{color:#f8fafc;background:#0f172a;padding:6px}.header-actions{flex-wrap:wrap;flex:none;justify-content:flex-end;align-items:center;gap:10px;display:flex}#header-user-container,#header-user-container>div{align-items:center;gap:8px;display:flex}.header-actions>*,#header-user-container>*{flex-shrink:0}.action-icon-btn{background:var(--bg-card);color:var(--text-muted);border:1px solid var(--border-subtle);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 12px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.action-icon-btn:hover{background:var(--bg-card-hover);color:var(--text-main);border-color:var(--border-medium)}.action-icon-btn.active{color:#a5b4fc;border-color:var(--accent-primary);background:#6366f126}.btn-submit-code{background:var(--accent-gradient);color:#fff;cursor:pointer;box-shadow:0 4px 18px var(--accent-glow);border:none;border-radius:10px;align-items:center;gap:8px;padding:9px 20px;font-size:14px;font-weight:700;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.btn-submit-code:hover{transform:translateY(-1px)scale(1.02);box-shadow:0 6px 24px #6366f180}.btn-submit-code:active{transform:translateY(1px)}.submit-hotkey{font-size:11px;font-family:var(--font-code);background:#00000040;border-radius:4px;padding:2px 6px;font-weight:500}.app-workspace{height:calc(100vh - var(--header-height));flex:1;grid-template-columns:410px minmax(380px,1.15fr) minmax(420px,1.25fr);display:grid;overflow:hidden}@media (width<=1440px){.app-workspace{grid-template-columns:380px 1.1fr 1.2fr}}@media (width<=1180px){.app-workspace{grid-template-columns:350px 1fr 1fr}}.panel{background:#070b14;border-right:1px solid #ffffff1f;flex-direction:column;height:100%;display:flex;overflow:hidden}.panel:last-child{border-right:none}.panel-header{-webkit-user-select:none;user-select:none;background:#0d1424;border-bottom:1px solid #ffffff1f;flex-shrink:0;justify-content:space-between;align-items:center;height:46px;padding:0 16px;display:flex}.panel-editor>.panel-header{z-index:5;position:sticky;top:0}.panel-title{letter-spacing:.5px;color:#e2e8f0;align-items:center;gap:8px;font-size:12.5px;font-weight:700;display:flex}.panel-title .icon{font-size:15px}.panel-num-pill{color:#c7d2fe;width:20px;height:20px;font-size:11px;font-weight:800;font-family:var(--font-code);background:#6366f140;border:1px solid #6366f173;border-radius:5px;justify-content:center;align-items:center;display:inline-flex}.panel-badge-info{color:#64748b;font-size:11px;font-weight:500}.editor-header-actions{align-items:center;gap:8px;display:flex}.btn-panel-run{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0284c7 0%,#0369a1 100%);border:1px solid #38bdf880;border-radius:6px;align-items:center;gap:6px;padding:5px 12px;font-size:11.5px;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 2px 10px #0284c766}.btn-panel-run:hover{background:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);border-color:#38bdf8;transform:translateY(-1px);box-shadow:0 4px 16px #38bdf899}.btn-panel-run:active{transform:translateY(1px)}.btn-panel-submit{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:1px solid #34d39980;border-radius:6px;align-items:center;gap:6px;padding:5px 12px;font-size:11.5px;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 2px 10px #10b98166}.btn-panel-submit:hover{background:linear-gradient(135deg,#34d399 0%,#10b981 100%);border-color:#6ee7b7;transform:translateY(-1px);box-shadow:0 4px 16px #10b98199}.btn-panel-submit:active{transform:translateY(1px)}.btn-panel-run:disabled,.btn-panel-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}.panel-exercise-body{background:#090e1a;flex-direction:column;flex:1;gap:16px;padding:16px;display:flex;overflow-y:auto}.target-preview-card{background:#0f172a;border:1px solid #ffffff1f;border-radius:12px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 4px 16px #0006}.target-card-header{background:#141e33;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.target-badge{color:#38bdf8;letter-spacing:.5px;font-size:11px;font-weight:700}.target-viewport-box{background:radial-gradient(circle,#111a2e 0%,#040711 100%);justify-content:center;align-items:center;width:100%;min-height:220px;padding:14px;display:flex;position:relative;overflow:auto}.target-canvas-el{border:1px solid #ffffff1a;border-radius:8px;max-width:100%;height:auto;box-shadow:0 8px 24px #0009}.ex-details-box{background:#0f172a;border:1px solid #ffffff1f;border-radius:12px;flex-direction:column;gap:12px;padding:18px;display:flex;box-shadow:0 4px 16px #0000004d}.ex-details-title{font-family:var(--font-display);color:#fff;letter-spacing:-.2px;border-bottom:1px solid #ffffff14;padding-bottom:8px;font-size:16.5px;font-weight:700}.ex-desc-text{color:#cbd5e1;font-size:14px;line-height:1.65}.ex-section-label{text-transform:uppercase;color:#93c5fd;letter-spacing:.6px;align-items:center;gap:6px;margin-top:4px;font-size:12px;font-weight:700;display:flex}.ex-tips-list{color:#94a3b8;background:#0f172a99;border:1px solid #ffffff0f;border-radius:8px;padding:12px 14px 12px 28px;font-size:13.5px;line-height:1.65}.ex-tips-list li{margin-bottom:6px}.ex-tips-list li:last-child{margin-bottom:0}.dom-rules-list{flex-direction:column;gap:8px;display:flex}.rule-check-item{background:#141e33;border:1px solid #ffffff17;border-radius:8px;align-items:flex-start;gap:10px;padding:10px 12px;font-size:13px;transition:all .2s;display:flex}.rule-check-item.passed{background:#10b98114;border-color:#10b98173}.rule-check-item .status-icon{flex-shrink:0;margin-top:2px;font-size:14px}.rule-check-item .rule-text{color:#e2e8f0;font-weight:500;line-height:1.45}.rule-check-item.passed .rule-text{color:#6ee7b7}.code-editor-wrapper{background:#0b1120;flex-direction:column;height:100%;display:flex;overflow:hidden}.editor-toolbar,.editor-quick-tags{background:#0f172a;border-bottom:1px solid #ffffff1a;flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;height:42px;padding:0 12px;display:flex;overflow:hidden}.editor-quick-tags{z-index:4;position:sticky;top:0}.quick-tags-left{flex:1;align-items:center;gap:8px;min-width:0;display:flex;overflow:hidden}.quick-tags-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;font-size:11px;font-weight:700}.quick-tags-scroll{scrollbar-width:none;flex:1;align-items:center;gap:6px;min-width:0;display:flex;overflow-x:auto}.quick-tags-scroll::-webkit-scrollbar{display:none}.tag-chip{color:#93c5fd;font-family:var(--font-code);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:#141e33;border:1px solid #93c5fd38;border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600;transition:all .15s}.tag-chip:hover{color:#fff;background:#1e293b;border-color:#38bdf8;transform:translateY(-1px);box-shadow:0 2px 8px #38bdf840}.quick-tags-right{flex-shrink:0;align-items:center;gap:6px;display:flex}.btn-quick-run{color:#fff;cursor:pointer;background:#0284c7;border:1px solid #38bdf866;border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-size:11.5px;font-weight:700;transition:all .15s;display:flex;box-shadow:0 1px 6px #0284c74d}.btn-quick-run:hover{background:#0ea5e9;border-color:#38bdf8;transform:translateY(-1px);box-shadow:0 2px 10px #38bdf880}.btn-quick-submit{color:#fff;cursor:pointer;background:#10b981;border:1px solid #34d39966;border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-size:11.5px;font-weight:700;transition:all .15s;display:flex;box-shadow:0 1px 6px #10b9814d}.btn-quick-submit:hover{background:#059669;border-color:#34d399;transform:translateY(-1px);box-shadow:0 2px 10px #10b98180}.btn-quick-run:disabled,.btn-quick-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}.editor-main-area{background:#070b14;flex:1;display:flex;position:relative;overflow:hidden}.editor-gutter{color:#64748b;width:48px;font-family:var(--font-code);text-align:right;-webkit-user-select:none;user-select:none;background:#070b14;border-right:1px solid #ffffff14;flex-direction:column;padding:14px 8px;font-size:13.5px;line-height:24px;display:flex;overflow:hidden}.editor-gutter span{display:block}.editor-textarea-wrapper{flex:1;position:relative;overflow:hidden}.editor-textarea,.editor-highlight{width:100%;height:100%;font-family:var(--font-code);white-space:pre;tab-size:2;letter-spacing:0;border:none;outline:none;margin:0;padding:14px 16px;font-size:14px;line-height:24px;position:absolute;top:0;left:0}.editor-textarea{color:#0000;caret-color:#38bdf8;resize:none;z-index:2;background:0 0;overflow:auto}.editor-highlight{z-index:1;pointer-events:none;color:#e2e8f0;overflow:hidden}.tok-tag{color:#f43f5e;font-weight:600}.tok-attr-name{color:#f59e0b}.tok-attr-val{color:#34d399}.tok-comment{color:#64748b;font-style:italic}.tok-css-sel{color:#c084fc;font-weight:600}.tok-css-prop{color:#38bdf8}.tok-css-val{color:#f472b6}.editor-statusbar,.editor-status-bar{height:34px;color:var(--text-dim);-webkit-user-select:none;user-select:none;background:#0a0f1d;border-top:1px solid #ffffff1a;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:0 12px;font-size:12px;display:flex}.editor-guide-pill{color:#93c5fd;white-space:nowrap;background:#1e3a8a59;border:1px solid #60a5fa4d;border-radius:12px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;display:flex}.editor-guide-pill strong{color:#fff}.status-indicator-live{color:#34d399;align-items:center;gap:6px;font-size:11px;font-weight:600;display:inline-flex}.status-live-pulse{background:#10b981;border-radius:50%;width:7px;height:7px;animation:1.8s infinite pulse-live;box-shadow:0 0 8px #10b981}@keyframes pulse-live{0%{opacity:.8;transform:scale(.95)}50%{opacity:1;transform:scale(1.2)}to{opacity:.8;transform:scale(.95)}}.status-left{align-items:center;gap:8px;display:flex}.status-sep{opacity:.4}.status-right{align-items:center;gap:6px;display:flex}.editor-action-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;gap:4px;padding:3px 8px;font-size:11.5px;font-weight:600;display:flex}.editor-action-btn:hover{color:var(--text-main);background:#ffffff14}.editor-action-btn.danger:hover{color:#f87171;background:#ef444426}.preview-controls{align-items:center;gap:6px;display:flex}.viewport-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:4px 8px;font-size:12px;transition:all .15s}.viewport-btn:hover{color:var(--text-main)}.viewport-btn.active{background:var(--bg-card);border-color:var(--border-medium);color:#38bdf8;font-weight:600}.preview-body{background:#050811;flex:1;justify-content:center;align-items:center;padding:16px;display:flex;overflow:auto}.preview-frame-wrapper{background:#fff;border-radius:12px;flex-direction:column;transition:width .25s,height .25s;display:flex;overflow:hidden;box-shadow:0 12px 36px #00000080}.preview-iframe{background:#fff;border:none;width:100%;height:100%}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;background:#04070ecc;justify-content:center;align-items:center;padding:20px;transition:opacity .25s;display:flex;position:fixed;inset:0}.modal-backdrop.visible{opacity:1;pointer-events:auto}.modal-card{background:var(--bg-surface);border:1px solid var(--border-medium);border-radius:20px;flex-direction:column;max-height:90vh;transition:transform .25s cubic-bezier(.16,1,.3,1);display:flex;overflow:hidden;transform:translateY(20px)scale(.98);box-shadow:0 25px 60px #0009}.modal-backdrop.visible .modal-card{transform:translateY(0)scale(1)}.modal-header{border-bottom:1px solid var(--border-subtle);background:#ffffff05;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.modal-title-group{align-items:center;gap:12px;display:flex}.modal-title-group h2{font-size:18px;font-weight:800}.modal-badge{letter-spacing:.5px;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:800}.modal-badge.rank-s{color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444);box-shadow:0 2px 10px #f59e0b66}.modal-badge.rank-a{color:#fff;background:linear-gradient(135deg,#10b981,#06b6d4)}.modal-badge.rank-b{color:#fff;background:#6366f1}.modal-badge.rank-c{color:#fff;background:#f59e0b}.modal-badge.rank-d{color:#fff;background:#ef4444}.modal-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px;font-size:24px;line-height:1}.modal-close-btn:hover{color:#fff}.modal-body{padding:24px;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-subtle);background:#0003;justify-content:flex-end;gap:12px;padding:16px 24px;display:flex}.modal-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 20px;font-size:14px;font-weight:700;transition:all .2s}.modal-btn.primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 14px var(--accent-glow)}.modal-btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f180}.modal-btn.secondary{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border-medium)}.modal-btn.secondary:hover{background:var(--bg-card-hover)}.submission-modal-card{width:860px}.scores-banner{grid-template-columns:1.2fr 1fr 1fr;gap:14px;margin-bottom:20px;display:grid}.score-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;flex-direction:column;padding:16px;display:flex}.score-card.primary{background:linear-gradient(135deg,#6366f126 0%,#ec489926 100%);border-color:#6366f166}.score-label{color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;font-size:12px;font-weight:700}.score-value-row{align-items:baseline;gap:4px;margin-bottom:4px;display:flex}.score-number{color:#fff;font-size:34px;font-weight:900}.score-max{color:var(--text-dim);font-size:16px}.score-sub-number{color:#38bdf8;font-size:26px;font-weight:800}.score-sub-text{color:var(--text-muted);font-size:12px}.score-stars{margin-top:2px;font-size:14px}.diff-view-nav{margin-bottom:16px}.tabs-group{background:var(--bg-main);border:1px solid var(--border-subtle);border-radius:10px;gap:8px;padding:4px;display:flex}.diff-tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:8px 12px;font-size:13px;font-weight:600;transition:all .15s}.diff-tab-btn.active{background:var(--bg-card);color:var(--text-main);box-shadow:0 2px 8px #0000004d}.diff-tab-pane{display:none}.diff-tab-pane.active{display:block}.slider-comparison-box{-webkit-user-select:none;user-select:none;background:#fff;border-radius:12px;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000080}.slider-image-layer{position:absolute;inset:0;overflow:hidden}.slider-image-layer canvas{width:100%;height:100%;display:block}.layer-tag{z-index:5;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;position:absolute;top:10px}.target-tag{color:#38bdf8;background:#0f172ad9;border:1px solid #38bdf84d;left:10px}.student-tag{color:#ec4899;background:#0f172ad9;border:1px solid #ec48994d;right:10px}.slider-divider{cursor:ew-resize;z-index:10;background:#fff;width:3px;position:absolute;top:0;bottom:0;transform:translate(-50%);box-shadow:0 0 12px #000c}.slider-handle{color:#0f172a;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:14px;font-weight:800;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 14px #00000080}.slider-hint{text-align:center;color:var(--text-dim);margin-top:12px;font-size:12.5px}.heatmap-view-wrapper{flex-direction:column;align-items:center;gap:12px;display:flex}.diff-error-locations{width:min(100%,760px);color:var(--text-primary);background:#7f1d1d29;border:1px solid #f8717147;border-radius:12px;padding:14px 16px;font-size:13px}.diff-error-locations h4{color:#fca5a5;margin:0 0 6px}.diff-error-locations p{color:var(--text-muted);margin:4px 0}.diff-error-locations ol{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:5px 20px;margin:8px 0 0;padding-left:20px;display:grid}.heatmap-canvas-container canvas{border-radius:12px;max-width:100%;box-shadow:0 10px 30px #00000080}.heatmap-legend{color:var(--text-muted);gap:20px;font-size:12.5px;display:flex}.legend-item{align-items:center;gap:8px;display:flex}.legend-color{border-radius:4px;width:14px;height:14px}.legend-color.diff{background:#f05;box-shadow:0 0 8px #f059}.legend-color.match{background:#334155}.side-by-side-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.side-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;padding:12px}.side-card h4{color:var(--text-muted);margin-bottom:10px;font-size:13px}.side-canvas-box canvas{border:1px solid #0000001a;border-radius:8px;width:100%;height:auto}.dom-checklist-wrapper{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:20px}.checklist-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;display:flex}.checklist-score{color:#10b981;font-size:15px;font-weight:800}.checklist-items{flex-direction:column;gap:10px;display:flex}.checklist-item{border:1px solid var(--border-subtle);background:#ffffff05;border-radius:10px;gap:12px;padding:12px 14px;display:flex}.checklist-item.pass{background:#10b98114;border-color:#10b98140}.checklist-item.fail{background:#ef444414;border-color:#ef444440}.item-icon{font-size:18px}.item-label{color:var(--text-main);margin-bottom:2px;font-size:14px;font-weight:700}.item-msg{color:var(--text-muted);font-size:12.5px}.checklist-suggestions{background:#f59e0b14;border:1px dashed #f59e0b4d;border-radius:8px;margin-top:16px;padding:12px}.checklist-suggestions h5{color:#fbbf24;margin-bottom:6px;font-size:13px}.checklist-suggestions ul{color:#fde68a;padding-left:20px;font-size:12.5px}.teacher-modal-card{width:780px}.teacher-quick-actions{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:20px;padding:12px 16px;display:flex}.actions-group{gap:10px;display:flex}.tool-btn{background:var(--bg-surface);color:var(--text-main);border:1px solid var(--border-medium);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:7px 12px;font-size:12.5px;font-weight:600;display:flex}.tool-btn:hover{background:#1e293b}.actions-hint{color:var(--text-dim);max-width:320px;font-size:11.5px}.teacher-form{flex-direction:column;gap:14px;display:flex}.form-grid-2{grid-template-columns:1fr 1fr;gap:14px;display:grid}.form-field{flex-direction:column;gap:6px;display:flex}.form-field label,.section-title{color:#cbd5e1;font-size:12.5px;font-weight:700}.form-field input,.form-field select,.form-field textarea{background:var(--bg-card);border:1px solid var(--border-medium);color:var(--text-main);font-family:var(--font-ui);border-radius:8px;outline:none;padding:9px 12px;font-size:13.5px}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--accent-primary)}.code-font{font-family:var(--font-code)!important;font-size:12.5px!important}.form-section-box{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;padding:14px}.radio-choices{flex-direction:column;gap:8px;margin:10px 0;display:flex}.radio-label{color:var(--text-muted);cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.radio-label input:checked+span{color:#fff;font-weight:600}.rules-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.btn-add-rule{color:#a5b4fc;cursor:pointer;background:#6366f126;border:1px solid #6366f14d;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700}.rules-list-container{flex-direction:column;gap:8px;display:flex}.rules-empty{color:var(--text-dim);font-size:12px;font-style:italic}.rule-row{align-items:center;gap:8px;display:flex}.rule-row input{background:var(--bg-surface);border:1px solid var(--border-subtle);color:#fff;border-radius:6px;padding:6px 10px;font-size:12.5px}.rule-label-input{flex:1}.rule-remove-btn{color:#f87171;cursor:pointer;background:#ef444426;border:1px solid #ef44444d;border-radius:6px;width:28px;height:28px;font-size:16px}.custom-exercises-section{border-top:1px solid var(--border-subtle);margin-top:24px;padding-top:16px}.custom-list-title{margin-bottom:10px;font-size:14px;font-weight:700}.custom-list-items{flex-direction:column;gap:8px;display:flex}.custom-ex-row{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.row-info{flex-direction:column;gap:2px;display:flex}.row-meta{color:var(--text-dim);font-size:11.5px}.btn-del-custom{color:#f87171;cursor:pointer;background:0 0;border:1px solid #ef44444d;border-radius:6px;padding:4px 10px;font-size:12px}.asset-modal-card{width:740px}.asset-intro{color:var(--text-muted);margin-bottom:18px;font-size:13.5px;line-height:1.6}.asset-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;display:grid}.asset-card{background:var(--bg-card);border:1px solid var(--border-subtle);text-align:center;border-radius:12px;flex-direction:column;align-items:center;padding:14px;display:flex}.asset-img-box{justify-content:center;align-items:center;width:70px;height:70px;margin-bottom:10px;display:flex}.asset-img-box img{max-width:100%;max-height:100%}.asset-info h5{margin-bottom:4px;font-size:14px;font-weight:700}.asset-info p{color:var(--text-dim);margin-bottom:8px;font-size:11.5px}.asset-info code{color:#38bdf8;background:#0000004d;border-radius:4px;margin-bottom:12px;padding:3px 6px;font-size:10.5px;display:block}.btn-insert-asset{color:#a5b4fc;cursor:pointer;background:#6366f126;border:1px solid #6366f14d;border-radius:8px;width:100%;padding:8px 0;font-size:12px;font-weight:700;transition:all .15s}.btn-insert-asset:hover{background:var(--accent-primary);color:#fff}@media (width<=1200px){body{min-height:100dvh;overflow:auto}.app-header{padding:10px 16px;position:sticky}.app-workspace{flex:1 0 auto;grid-template-rows:minmax(480px,68vh) minmax(520px,72vh);grid-template-columns:minmax(260px,.85fr) minmax(380px,1.15fr);height:auto;min-height:0;overflow:visible}.panel{min-height:0}.panel-simulator{grid-column:1/-1}.modal-card{width:min(100%,860px);max-height:calc(100dvh - 32px)}.submission-modal-card,.teacher-modal-card,.asset-modal-card,.auth-modal-card{width:min(100%,860px)}}@media (width<=760px){.app-header{justify-content:center;padding:10px 12px}.brand-section,.exercise-selector-bar,.header-actions{justify-content:center}.header-actions{flex:100%;gap:8px;width:100%}.ex-select-dropdown{max-width:min(60vw,340px)}.app-workspace{grid-template-rows:minmax(420px,62vh) minmax(560px,76vh) minmax(520px,72vh);grid-template-columns:1fr}.panel{border-right:none;border-bottom:1px solid var(--border-subtle)}.panel-simulator{grid-column:auto}.panel-header{gap:8px;padding:0 10px}.panel-title{gap:5px;font-size:11px}.editor-header-actions{gap:5px}.btn-panel-run,.btn-panel-submit{white-space:nowrap;padding:5px 7px;font-size:10px}.editor-quick-tags{gap:6px;padding:0 8px}.quick-tags-label{display:none}.status-left{min-width:0;overflow:hidden}.editor-guide-pill{text-overflow:ellipsis;overflow:hidden}.modal-backdrop{align-items:flex-end;padding:8px}.modal-card{border-radius:16px 16px 10px 10px;width:100%;max-height:calc(100dvh - 16px)}.scores-banner{grid-template-columns:1fr}}@media (width<=420px){.brand-title{font-size:14px}.brand-tagline{font-size:10px}.action-icon-btn,.btn-submit-code{padding:7px 9px;font-size:11px}.submit-hotkey{display:none}.ex-select-dropdown{max-width:52vw;font-size:12px}.editor-status-bar{padding:0 7px;font-size:10px}.editor-guide-pill,.status-sep:nth-of-type(2){display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.auth-modal-card{width:520px}.auth-tabs{background:var(--bg-main);border:1px solid var(--border-subtle);border-radius:10px;gap:8px;margin-bottom:18px;padding:4px;display:flex}.auth-tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:9px 14px;font-size:13.5px;font-weight:700;transition:all .2s}.auth-tab-btn.active{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border-medium);box-shadow:0 2px 8px #0000004d}.auth-alert{border-radius:8px;margin-bottom:14px;padding:10px 14px;font-size:13px;line-height:1.4}.auth-alert.error{color:#fca5a5;background:#ef444426;border:1px solid #ef444459}.auth-alert.success{color:#6ee7b7;background:#10b98126;border:1px solid #10b98159}.auth-form-pane{flex-direction:column;gap:12px;display:flex}.field-hint{color:var(--text-dim);margin-top:2px;font-size:11px}.auth-submit-btn{cursor:pointer;border:none;border-radius:10px;width:100%;margin-top:6px;padding:11px 0;font-size:14px;font-weight:800;transition:all .2s}.auth-submit-btn.primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 14px var(--accent-glow)}.auth-submit-btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f180}.auth-submit-btn.secondary{color:#f87171;background:#ef444426;border:1px solid #ef44444d}.auth-submit-btn.secondary:hover{color:#fff;background:#ef4444}.auth-switch-link{text-align:center;color:var(--text-dim);margin-top:8px;font-size:12.5px}.auth-switch-link a{color:#38bdf8;font-weight:700;text-decoration:none}.auth-switch-link a:hover{text-decoration:underline}.user-badge-header{background:var(--bg-card);border:1px solid var(--border-subtle);cursor:pointer;border-radius:10px;align-items:center;gap:10px;padding:5px 12px 5px 6px;transition:all .2s;display:flex}.user-badge-header:hover{background:var(--bg-card-hover);border-color:var(--border-medium)}.user-avatar-small{border:1.5px solid var(--accent-primary);background:#fff;border-radius:50%;width:28px;height:28px}.user-meta-wrap{flex-direction:column;line-height:1.2;display:flex}.user-name-text{color:#fff;font-size:13px;font-weight:700}.user-school-tag{color:#38bdf8;font-size:10.5px;font-weight:600}.profile-card-view{text-align:center;flex-direction:column;align-items:center;padding:10px 0;display:flex}.profile-avatar-large{border:3px solid var(--accent-primary);background:#fff;border-radius:50%;width:80px;height:80px;margin-bottom:12px}.profile-card-view h3{color:#fff;margin-bottom:10px;font-size:20px;font-weight:800}.profile-tags{flex-direction:column;gap:6px;width:100%;margin-bottom:16px;display:flex}.profile-tag{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-muted);text-align:left;border-radius:8px;padding:8px 14px;font-size:13px}.profile-tag strong{color:#fff}.profile-created{color:var(--text-dim);margin-bottom:16px;font-size:12px}.profile-actions-row{width:100%}.browser-simulator-window{background:#090e1a;flex-direction:column;height:100%;display:flex;overflow:hidden}.simulator-chrome-header{-webkit-user-select:none;user-select:none;background:#0d1424;border-bottom:1px solid #ffffff1f;flex-shrink:0;align-items:center;gap:10px;height:44px;padding:0 12px;display:flex}.simulator-win-tab{white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:6px;align-items:center;gap:7px;padding:5px 10px;display:flex}.simulator-win-tab .tab-icon{font-size:13px}.simulator-win-tab .tab-title{letter-spacing:.4px;color:#e2e8f0;font-size:11.5px;font-weight:700}.simulator-nav-btns{align-items:center;gap:4px;display:flex}.sim-nav-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;font-size:13px;transition:all .15s;display:flex}.sim-nav-btn:hover:not(:disabled){color:#fff;background:#ffffff14}.sim-nav-btn:disabled{opacity:.3;cursor:default}.simulator-address-bar{background:#060a12;border:1px solid #ffffff1f;border-radius:8px;flex:1;align-items:center;gap:6px;height:30px;padding:0 10px;font-size:12px;display:flex;overflow:hidden}.sim-ssl-lock{font-size:11px}.sim-protocol{color:#64748b;font-family:var(--font-code);font-size:11.5px}.sim-url-input{color:#38bdf8;font-family:var(--font-code);background:0 0;border:none;outline:none;flex:1;font-size:12px;font-weight:600}.sim-status-pill{color:#34d399;white-space:nowrap;background:#10b98126;border:1px solid #10b98159;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:700}.sim-status-pill.running{color:#fbbf24;background:#f59e0b26;border-color:#f59e0b59}.sim-run-btn{background:var(--accent-gradient);color:#fff;cursor:pointer;box-shadow:0 2px 10px var(--accent-glow);white-space:nowrap;border:none;border-radius:7px;align-items:center;gap:5px;padding:6px 14px;font-size:12px;font-weight:800;transition:all .15s;display:flex}.sim-run-btn:hover{box-shadow:0 4px 14px var(--accent-glow);transform:translateY(-1px)}.simulator-win-controls{align-items:center;gap:2px;margin-left:2px;display:flex}.win-btn{color:#94a3b8;cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:28px;height:24px;font-size:11px;transition:all .15s;display:inline-flex}.win-btn:hover{color:#fff;background:#ffffff1a}.win-btn.close:hover{color:#fff;background:#ef4444}.simulator-toolbar{border-bottom:1px solid var(--border-subtle);-webkit-user-select:none;user-select:none;background:#090e1a;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;height:38px;padding:0 12px;display:flex}.sim-device-group,.sim-view-tabs{align-items:center;gap:4px;display:flex}.sim-tool-btn,.sim-view-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:11.5px;font-weight:600;transition:all .15s;display:flex}.sim-tool-btn:hover,.sim-view-btn:hover{color:var(--text-main);background:#ffffff0a}.sim-tool-btn.active,.sim-view-btn.active{background:var(--bg-card);border-color:var(--border-medium);color:#38bdf8}.console-count{color:#a5b4fc;background:#6366f140;border-radius:8px;padding:1px 5px;font-size:10px}.simulator-body-area{background:#050811;flex:1;position:relative;overflow:hidden}.sim-pane{flex-direction:column;display:none;position:absolute;inset:0}.sim-pane.active{display:flex}.sim-device-viewport-outer{background-image:radial-gradient(#ffffff0a 1px,#0000 1px);background-size:16px 16px;flex:1;justify-content:center;align-items:center;padding:20px;display:flex;overflow:auto}.sim-device-mockup{background:#fff;border-radius:12px;flex-direction:column;transition:width .25s cubic-bezier(.16,1,.3,1),height .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden;box-shadow:0 16px 40px #0009}.sim-device-mockup.mobile{border:10px solid #1e293b;border-radius:38px;box-shadow:0 25px 60px #000c,inset 0 0 0 2px #334155}.sim-mobile-notch{background:#1e293b;border-bottom-right-radius:14px;border-bottom-left-radius:14px;flex-shrink:0;justify-content:center;align-items:center;gap:8px;width:140px;height:24px;margin:0 auto;display:flex}.sim-mobile-notch .speaker{background:#334155;border-radius:2px;width:44px;height:4px}.sim-mobile-notch .camera{background:#0f172a;border:1px solid #334155;border-radius:50%;width:8px;height:8px}.sim-device-mockup.tablet{border:12px solid #1e293b;border-radius:24px;box-shadow:0 25px 60px #000c}.sim-iframe{background:#fff;border:none;width:100%;height:100%;display:block}.sim-console-wrapper{font-family:var(--font-code);background:#060a14;flex-direction:column;flex:1;display:flex;overflow:hidden}.console-toolbar{border-bottom:1px solid var(--border-subtle);background:#0a0f1d;justify-content:space-between;align-items:center;height:34px;padding:0 12px;display:flex}.console-title{color:var(--text-muted);font-size:11.5px;font-weight:700}.console-action-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:11px}.console-action-btn:hover{color:#fff}.console-log-list{flex-direction:column;flex:1;gap:4px;padding:10px;display:flex;overflow-y:auto}.console-empty{color:var(--text-dim);text-align:center;padding:16px;font-size:12px;font-style:italic}.console-item{background:#ffffff05;border-bottom:1px solid #ffffff08;border-radius:4px;align-items:flex-start;gap:8px;padding:4px 8px;font-size:12px;line-height:1.5;display:flex}.console-item.error{color:#fca5a5;background:#ef44441a;border-left:3px solid #ef4444}.console-item.warn{color:#fde68a;background:#f59e0b1a;border-left:3px solid #f59e0b}.console-item.log{color:#e2e8f0}.log-time{color:#64748b;flex-shrink:0;font-size:10.5px}.log-icon{font-size:11px}.log-text{word-break:break-all}.sim-dom-wrapper{font-family:var(--font-code);background:#060a14;flex-direction:column;flex:1;display:flex;overflow:hidden}.dom-toolbar{border-bottom:1px solid var(--border-subtle);background:#0a0f1d;justify-content:space-between;align-items:center;height:34px;padding:0 12px;display:flex}.dom-title{color:var(--text-muted);font-size:11.5px;font-weight:700}.dom-hint{color:var(--text-dim);font-size:11px}.dom-tree-tree{flex:1;padding:12px 16px;font-size:12.5px;line-height:20px;overflow:auto}.dom-empty{color:var(--text-dim);text-align:center;padding:20px;font-size:12px}.dom-node{border-left:1px dashed #ffffff14;margin-left:14px;padding-left:6px}.dom-tag{color:#f43f5e;font-weight:600}.dom-attr-name{color:#f59e0b}.dom-attr-val{color:#34d399}.dom-text-leaf{color:#cbd5e1;margin-left:16px;display:block}.simulator-footer-bar{border-top:1px solid var(--border-subtle);height:28px;color:var(--text-dim);-webkit-user-select:none;user-select:none;background:#0a0f1d;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 12px;font-size:11px;display:flex}.sim-footer-left{align-items:center;gap:8px;display:flex}.sim-dot-sep{opacity:.4}.auto-run-label{color:var(--text-muted);cursor:pointer;align-items:center;gap:6px;display:flex}.auto-run-label input{cursor:pointer}.admin-modal-card{width:920px}.admin-stats-row{grid-template-columns:1fr 1fr 1.2fr;gap:14px;margin-bottom:22px;display:grid}.admin-stat-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;align-items:center;gap:14px;padding:14px 18px;display:flex}.stat-icon{background:#ffffff0d;border-radius:10px;padding:8px;font-size:26px}.stat-info{flex-direction:column;display:flex}.stat-num{color:#fff;font-size:20px;font-weight:800}.stat-lbl{color:var(--text-muted);font-size:11.5px}.admin-section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;display:flex}.admin-section-header h3{color:#fff;font-size:15px;font-weight:800}.admin-header-actions{align-items:center;gap:10px;display:flex}.admin-search-input{background:var(--bg-card);border:1px solid var(--border-medium);color:#fff;border-radius:8px;outline:none;width:250px;padding:7px 12px;font-size:12.5px}.admin-search-input:focus{border-color:var(--accent-primary)}.admin-table-wrapper{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;max-height:420px;overflow:hidden auto}.admin-table{border-collapse:collapse;text-align:left;width:100%;font-size:13px}.admin-table th{color:var(--text-muted);text-transform:uppercase;border-bottom:1px solid var(--border-subtle);background:#0000004d;padding:10px 14px;font-size:11.5px;font-weight:700}.admin-table td{color:#cbd5e1;border-bottom:1px solid #ffffff0a;padding:10px 14px}.admin-table tr:hover td{background:#ffffff05}.user-row-cell{align-items:center;gap:8px;display:flex}.user-avatar-tiny{border:1px solid var(--accent-primary);background:#fff;border-radius:50%;width:24px;height:24px}.badge-role-admin{color:#fbbf24;background:linear-gradient(135deg,#f59e0b33,#ef444433);border:1px solid #f59e0b66;border-radius:12px;padding:2px 8px;font-size:10.5px;font-weight:800}.badge-role-student{color:#38bdf8;background:#38bdf826;border-radius:12px;padding:2px 8px;font-size:10.5px;font-weight:700}.class-pill{font-family:var(--font-code);background:#ffffff0f;border-radius:6px;padding:2px 8px;font-size:11.5px}.btn-del-user{color:#f87171;cursor:pointer;background:#ef444426;border:1px solid #ef44444d;border-radius:6px;padding:3px 8px;font-size:11.5px;transition:all .15s}.btn-del-user:hover{color:#fff;background:#ef4444}.text-muted-locked{color:#64748b;font-size:11.5px;font-style:italic}.text-center-empty{text-align:center;color:var(--text-dim);font-style:italic;padding:24px!important}