.cmos-builder-container{max-width:1400px;margin:0 auto;padding:2rem;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.cmos-builder-container h1{text-align:center;margin-bottom:.5rem;color:var(--text-primary, #F8FAFC);font-weight:700;font-size:2.5rem;text-shadow:var(--text-shadow-glow, 0 0 20px rgba(99, 102, 241, .3), 0 1px 3px rgba(0, 0, 0, .8))}.subtitle{text-align:center;color:var(--text-secondary, #CBD5E1);margin-bottom:2rem;font-size:1.1rem}.challenge-header{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:2rem;padding:2rem;border:2px solid transparent;border-radius:var(--radius-pill, 16px);transition:all .3s ease;position:relative;background:#00000040;backdrop-filter:blur(12px) brightness(1.1);-webkit-backdrop-filter:blur(12px) brightness(1.1);border:1px solid rgba(255,255,255,.1);box-shadow:0 0 30px #6366f133,inset 0 1px #ffffff1a}.challenge-controls{display:flex;align-items:center;gap:1rem}.variable-selector{display:flex;align-items:center;gap:.5rem}.variable-selector label{font-weight:500;color:var(--text-secondary, #CBD5E1);font-size:.9rem;white-space:nowrap}.variable-select{padding:.5rem 1rem;font-size:1rem;border:2px solid var(--card-border, rgba(99, 102, 241, .3));border-radius:8px;background:var(--bg-secondary, #151B2D);color:var(--text-primary, #F8FAFC);cursor:pointer;transition:all .2s;font-weight:600}.variable-select:hover{border-color:var(--accent-primary, #3B82F6);box-shadow:0 0 0 3px #3b82f61a}.expression-display{display:flex;flex-direction:column;align-items:center;gap:.5rem}.expression-label{font-size:.9rem;color:var(--text-secondary, #CBD5E1);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.expression-box{font-size:2rem;font-weight:600;font-family:Courier New,monospace;color:var(--accent-primary, #3B82F6);padding:.75rem 1.5rem;background:var(--bg-secondary, #151B2D);border-radius:8px;border:2px solid var(--accent-primary, #3B82F6);min-width:200px;text-align:center;box-shadow:0 0 20px #3b82f633}.btn-randomize{padding:.75rem 1.5rem;font-size:1rem;white-space:nowrap}.builder-workspace{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:stretch}.builder-workspace.single-column{grid-template-columns:1fr}.input-panel{display:flex;flex-direction:column;gap:1.5rem;padding:2rem;border:2px solid transparent;border-radius:var(--radius-pill, 16px);transition:all .3s ease;position:relative;background:#00000040;backdrop-filter:blur(12px) brightness(1.1);-webkit-backdrop-filter:blur(12px) brightness(1.1);border:1px solid rgba(255,255,255,.1);box-shadow:0 0 30px #6366f133,inset 0 1px #ffffff1a;height:100%}.preview-panel-simple{gap:1rem}.preview-top-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.preview-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}.preview-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .85rem;border-radius:999px;border:1px solid rgba(34,197,94,.35);background:#22c55e1f;color:#4ade80;font-weight:800}.preview-badge-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:#22c55e2e;border:1px solid rgba(34,197,94,.35);color:#4ade80;font-size:.9rem}.preview-circuit-wrap{width:100%;background:var(--bg-secondary, #151B2D);border-radius:12px;border:1px solid var(--card-border, rgba(99, 102, 241, .2));padding:1rem;overflow:auto}.input-group{display:flex;flex-direction:column;gap:.5rem}.circuit-input-error{border-color:#ef4444d9!important;box-shadow:0 0 0 3px #ef44441f!important}.field-error{color:var(--accent-danger, #EF4444);font-size:.9rem;font-weight:600;margin-top:.25rem}.input-group label{font-weight:500;color:var(--text-primary, #F8FAFC);font-size:.95rem}.field-hint{margin-top:.35rem;color:var(--text-muted, #94A3B8);font-size:.88rem;line-height:1.2rem}.field-hint code{background:#0000002e;border:1px solid rgba(99,102,241,.18);padding:.1rem .35rem;border-radius:6px;color:var(--text-secondary, #CBD5E1);font-family:Courier New,monospace;font-weight:700}.field-hint-examples{margin-top:.35rem}.circuit-input{padding:.75rem 1rem;font-size:1rem;font-family:Courier New,monospace;border:2px solid var(--card-border, rgba(99, 102, 241, .3));border-radius:8px;transition:all .2s;background:var(--bg-secondary, #151B2D);color:var(--text-primary, #F8FAFC)}.circuit-input::placeholder{color:var(--text-muted, #94A3B8)}.circuit-input:focus{outline:none;border-color:var(--accent-primary, #3B82F6);box-shadow:0 0 0 3px #3b82f61a}.circuit-input:disabled{background:var(--bg-tertiary, #1E2A44);cursor:not-allowed;opacity:.6}.checkbox-group{flex-direction:row;align-items:center;gap:.5rem;padding:.5rem 0}.checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:400;color:var(--text-secondary, #CBD5E1)}.checkbox-group input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent-primary, #3B82F6)}.btn-submit{width:100%;padding:.875rem;font-size:1.05rem;font-weight:600}.notation-chips{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.75rem;background:var(--bg-secondary, #151B2D);border:1px solid var(--card-border, rgba(99, 102, 241, .2));border-radius:10px}.notation-pad{display:flex;flex-direction:column;gap:.5rem}.notation-pad-title{color:var(--text-secondary, #CBD5E1);font-size:.9rem;font-weight:600}.chip-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(99,102,241,.35);background:#1e2a44d9;color:var(--text-primary, #F8FAFC);font-family:Courier New,monospace;font-weight:700;padding:.35rem .6rem;border-radius:999px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.chip-btn:hover:not(:disabled){transform:translateY(-1px);border-color:#3b82f6bf;box-shadow:0 0 0 3px #3b82f61f}.chip-btn:disabled{opacity:.5;cursor:not-allowed}.validation-result{padding:1rem;border-radius:8px;border:2px solid;margin-top:1rem}.validation-result.correct{background:#22c55e1a;border-color:var(--accent-success, #22C55E);color:#4ade80}.validation-result.incorrect{background:#ef44441a;border-color:var(--accent-danger, #EF4444);color:#f87171}.validation-result h3{margin:0 0 .75rem;font-size:1.1rem}.validation-result ul{margin:0;padding-left:1.5rem;list-style:none}.validation-result li{margin:.5rem 0;font-size:.95rem}.validation-result li.correct{color:#4ade80}.validation-result li.incorrect{color:#f87171}.success-message{margin:1rem 0 0;font-weight:600;font-size:1rem;text-align:center;padding:.5rem;background:#22c55e26;border-radius:6px;color:#4ade80}.success-cta{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}.btn-next{width:100%}.correct-answer-display{margin-top:1.5rem;padding:1rem;background:var(--bg-secondary, #151B2D);border-radius:8px;border:2px solid var(--accent-warning, #F59E0B)}.your-answer-display{border-color:#3b82f6a6;box-shadow:0 0 18px #3b82f61f}.correct-answer-display h4{margin:0 0 1rem;color:var(--text-primary, #F8FAFC)}.model-circuit{display:flex;justify-content:center;padding:1rem;background:var(--bg-tertiary, #1E2A44);border-radius:6px;overflow-x:auto}.answer-grid{display:grid;gap:.75rem;padding:.75rem;background:var(--bg-tertiary, #1E2A44);border-radius:8px;border:1px solid rgba(99,102,241,.18)}.answer-row{display:grid;grid-template-columns:140px 1fr;gap:.75rem;align-items:center}.answer-label{color:var(--text-muted, #94A3B8);font-weight:700;font-size:.9rem}.answer-value{font-family:Courier New,monospace;color:var(--accent-primary, #3B82F6);font-size:.95rem;background:#00000026;padding:.35rem .55rem;border-radius:8px;border:1px solid rgba(99,102,241,.18);overflow-x:auto}.btn-show-answer{margin-top:.9rem;width:100%}.btn{padding:.625rem 1.25rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;text-shadow:0 1px 2px rgba(0,0,0,.3)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--gradient-primary, linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #8B5CF6 100%));color:#fff;box-shadow:0 4px 12px #3b82f64d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.btn-secondary{background:var(--bg-accent, #2A3B5C);color:var(--text-primary, #F8FAFC);border:1px solid var(--card-border, rgba(99, 102, 241, .3))}.btn-secondary:hover:not(:disabled){background:var(--bg-tertiary, #1E2A44);border-color:var(--accent-primary, #3B82F6);transform:translateY(-2px);box-shadow:0 6px 20px #6366f14d}.btn-large{padding:1rem 2rem;font-size:1.2rem}@media (max-width: 1024px){.builder-workspace{grid-template-columns:1fr}.challenge-header{flex-direction:column;gap:1rem}}@media (max-width: 768px){.cmos-builder-container{padding:1rem}.cmos-builder-container h1{font-size:2rem}.expression-box{font-size:1.5rem;min-width:150px}.input-panel,.preview-panel{padding:1rem}}:root[data-theme=light] .cmos-builder-container .challenge-header,:root[data-theme=light] .cmos-builder-container .input-panel{background:linear-gradient(#fffffff2,#fffffff2) padding-box,var(--border-gradient-primary) border-box;border:2px solid transparent;box-shadow:0 4px 20px color-mix(in srgb,var(--accent-primary) 20%,transparent),inset 0 1px color-mix(in srgb,var(--accent-primary) 10%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}:root[data-theme=light] .cmos-builder-container .expression-box,:root[data-theme=light] .cmos-builder-container .variable-select,:root[data-theme=light] .cmos-builder-container .circuit-input,:root[data-theme=light] .cmos-builder-container .preview-circuit-wrap,:root[data-theme=light] .cmos-builder-container .correct-answer-display,:root[data-theme=light] .cmos-builder-container .answer-grid,:root[data-theme=light] .cmos-builder-container .model-circuit{background:color-mix(in srgb,var(--bg-secondary, #CBF3BB) 85%,white)}:root[data-theme=light] .cmos-builder-container .notation-chips{background:color-mix(in srgb,var(--bg-secondary, #CBF3BB) 70%,white)}:root[data-theme=light] .cmos-builder-container .circuit-input::placeholder{color:var(--text-muted, #5c6f63)}:root[data-theme=light] .cmos-builder-container .field-hint code,:root[data-theme=light] .cmos-builder-container .answer-value{background:color-mix(in srgb,var(--accent-primary) 14%,white);border-color:color-mix(in srgb,var(--accent-primary) 25%,transparent);color:var(--text-primary, #1f2d26)}:root[data-theme=light] .cmos-builder-container .chip-btn{background:#fffffff2;color:var(--text-primary, #1f2d26);border:1px solid var(--card-border, rgba(147, 191, 199, .3));text-shadow:none}:root[data-theme=light] .cmos-builder-container .chip-btn:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent-primary) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-primary) 14%,transparent)}:root[data-theme=light] .cmos-builder-container .btn{text-shadow:none}:root[data-theme=light] .cmos-builder-container .btn-secondary{background:#fffffff2;color:var(--text-primary, #1f2d26)}:root[data-theme=light] .cmos-builder-container .btn-secondary:hover:not(:disabled){background:#fff}:root[data-theme=light] .cmos-builder-container .correct-answer-display h4{color:var(--text-primary, #1f2d26)}
