main .app-header{text-align:center;margin-bottom:var(--spacing-lg);background:transparent;border:none;box-shadow:none;position:static;padding:0}main .app-header h1{font-size:var(--font-size-4xl);font-weight:800;color:var(--primary);letter-spacing:-.025em;margin-bottom:var(--spacing-xs)}main .app-header .subtitle{font-size:var(--font-size-base);color:var(--text-secondary)}.mode-switch{display:flex;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);background:var(--surface-variant);padding:4px;border-radius:var(--radius-lg);max-width:500px;margin-left:auto;margin-right:auto;border:1px solid var(--outline)}.mode-switch .mode{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-secondary);font-weight:600;font-size:var(--font-size-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal)}.mode-switch .mode:hover{color:var(--text-primary);background:#00000008}[data-theme=dark] .mode-switch .mode:hover{background:#ffffff0d}.mode-switch .mode.active{background:var(--primary);color:var(--text-on-primary);box-shadow:0 2px 8px #674ea740}.app{max-width:1000px;margin:0 auto}.panel{display:none}.panel.visible{display:flex;flex-direction:column;gap:var(--spacing-lg);animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius-xl);padding:var(--spacing-lg);box-shadow:0 4px 16px #00000008;transition:box-shadow var(--transition-normal)}[data-theme=dark] .card{box-shadow:0 4px 24px #0003}.card.inputs{display:flex;flex-direction:column;gap:var(--spacing-md);align-items:center;text-align:center}.number-list{display:flex;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap;margin:var(--spacing-sm) 0}.number-slot{display:inline-flex;background:var(--background);border:2px solid var(--outline);border-radius:var(--radius-lg);padding:var(--spacing-xs) var(--spacing-sm);transition:all var(--transition-fast)}.number-slot:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #674ea726}.number-input{width:70px;border:none;background:transparent;text-align:center;font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);outline:none}.number-input::-webkit-outer-spin-button,.number-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input[type=number]{-moz-appearance:textfield}.workspace-body{display:grid;grid-template-columns:240px 1fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}@media(max-width:800px){.workspace-body{grid-template-columns:1fr}}.palette-wrap{border-right:1px solid var(--outline);padding-right:var(--spacing-lg)}@media(max-width:800px){.palette-wrap{border-right:none;border-bottom:1px solid var(--outline);padding-right:0;padding-bottom:var(--spacing-lg)}}.palette-wrap h3,.lanes-wrap h3,.factor-columns-wrap h3,.builder-grid h3{font-size:var(--font-size-md);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.palette-hint,.builder-hint{font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:var(--spacing-md)}.prime-palette{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.prime-chip,.used-prime,.result-chip,.summary-chip{display:inline-flex;align-items:center;justify-content:center;font-weight:700;border:1px solid rgba(0,0,0,.15);border-radius:var(--radius-md);cursor:grab;user-select:none;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 4px #0000000d}.prime-chip{min-width:44px;min-height:44px;font-size:var(--font-size-base)}.prime-chip:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.prime-chip:active{cursor:grabbing}.lanes-zone{display:grid;grid-template-columns:1fr 200px;gap:var(--spacing-lg)}#panel-practica .lanes-zone{grid-template-columns:1fr}@media(max-width:600px){.lanes-zone{grid-template-columns:1fr}}.lanes{display:flex;flex-direction:column;gap:var(--spacing-lg)}.lane{background:var(--surface-variant);border:1px solid var(--outline);border-radius:var(--radius-lg);padding:var(--spacing-md)}.lane-title{font-size:var(--font-size-lg);font-weight:800;color:var(--primary);margin-bottom:var(--spacing-sm)}.lane-row{display:flex;overflow-x:auto}.lane-columns{display:flex;align-items:flex-start;gap:var(--spacing-md)}.lane-quotients{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-sm)}.lane-quotient{font-size:var(--font-size-lg);font-weight:700;color:var(--text-disabled);height:40px;display:flex;align-items:center;justify-content:flex-end;min-width:40px;padding-right:var(--spacing-xs);transition:color var(--transition-normal)}.lane-quotient.filled{color:var(--text-primary)}.lane-columns .divider{width:3px;background-color:var(--text-primary);align-self:stretch;border-radius:var(--radius-sm)}[data-theme=dark] .lane-columns .divider{background-color:var(--outline)}.lane-track{display:flex;flex-direction:column;gap:var(--spacing-sm)}.dropzone{width:40px;height:40px;border:2px dashed var(--outline);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--text-disabled);font-weight:700;transition:all var(--transition-normal);background:var(--background)}.dropzone.over{border-color:var(--primary);background:#674ea71a;transform:scale(1.05)}.dropzone.filled{border:none;background:transparent}.used-prime{width:100%;height:100%;font-size:var(--font-size-base);cursor:default}.wiggle{animation:wiggleAnim .25s ease-in-out}@keyframes wiggleAnim{0%{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-4px)}to{transform:translate(0)}}.factor-columns{display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:flex-start}.factor-summary{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--background);border:1px solid var(--outline);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-md);width:100%;flex-wrap:wrap}.factor-summary-label{font-weight:700;font-size:var(--font-size-base);color:var(--text-primary);white-space:nowrap}.summary-chip{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-size-base)}.summary-chip sup{font-size:var(--font-size-xs);font-weight:800;margin-left:2px}.multiplier{font-weight:700;color:var(--text-secondary);font-size:var(--font-size-md);user-select:none;margin:0 2px}.factor-placeholder-text{font-size:var(--font-size-lg);color:var(--text-disabled);font-weight:700;margin-left:var(--spacing-xs)}.grids{margin-top:var(--spacing-lg)}.builder-grid{display:flex;flex-direction:column;gap:var(--spacing-sm)}.builder-panels{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}@media(max-width:768px){.builder-panels{grid-template-columns:1fr}}.result-drop{border:2px solid var(--outline);border-radius:var(--radius-xl);padding:var(--spacing-lg);background:var(--surface-variant);transition:all var(--transition-normal);display:flex;flex-direction:column;gap:var(--spacing-sm)}.result-drop.focused{border-color:var(--primary);box-shadow:0 0 0 3px #674ea71a}.result-drop.ok{border-color:var(--success);background:#10b9810a}.result-drop.error{border-color:var(--error);background:#ef44440a}.drop-row{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.drop-label{font-size:var(--font-size-lg);font-weight:800;color:var(--text-primary)}.drop-strip{flex:1;min-height:52px;background:var(--background);border:2px dashed var(--outline);border-radius:var(--radius-lg);display:flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs);flex-wrap:wrap;transition:all var(--transition-normal)}.drop-strip.over{border-color:var(--primary);background:#674ea70d}.drop-placeholder{font-size:var(--font-size-xs);color:var(--text-disabled);font-style:italic}.result-chip{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);cursor:pointer}.result-chip sup{font-size:var(--font-size-xs);font-weight:800;margin-left:2px}.multiplier{font-weight:700;color:var(--text-secondary)}.provisional-result{font-size:var(--font-size-lg);font-weight:800;color:var(--text-primary)}.feedback-icon{font-size:var(--font-size-xl)}.rule{font-size:var(--font-size-xs);color:var(--text-secondary);line-height:var(--line-height-tight)}.drop-expression{font-size:var(--font-size-sm);font-weight:600;color:var(--primary)}.bottom-actions{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-xl);flex-wrap:wrap;gap:var(--spacing-md)}.result{display:flex;align-items:center;gap:var(--spacing-md)}#result-free,#result-practice,#result-problem{font-size:var(--font-size-lg);font-weight:800;color:var(--text-primary)}button{font-family:inherit;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}button.primary{background:var(--primary);color:var(--text-on-primary);border:none;padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-base);border-radius:var(--radius-lg);box-shadow:0 4px 12px #674ea733}button.primary:hover{background:var(--primary-light);transform:translateY(-1px);box-shadow:0 6px 16px #674ea759}button.primary:active{transform:translateY(0)}button.primary:disabled{background:var(--text-disabled);cursor:not-allowed;box-shadow:none}button.ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--outline);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);border-radius:var(--radius-md)}button.ghost:hover{background:var(--surface-variant);color:var(--text-primary);border-color:var(--text-secondary)}button.ghost:disabled{opacity:.5;cursor:not-allowed}.space-between{display:flex;justify-content:space-between;width:100%;align-items:center}.pill{font-size:var(--font-size-xs);font-weight:700;background:var(--secondary);color:var(--primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.problem-text{font-size:var(--font-size-base);font-weight:500;color:var(--text-primary);line-height:var(--line-height-relaxed);background:var(--background);border-left:4px solid var(--primary);padding:var(--spacing-md);border-radius:0 var(--radius-md) var(--radius-md) 0;margin:var(--spacing-md) 0}.problem-form{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%}.problem-form.locked{opacity:.8}.problem-section{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:flex-start}.problem-label{font-size:var(--font-size-sm);font-weight:700;color:var(--text-secondary)}.goal-options{display:flex;gap:var(--spacing-md)}.goal-option{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--background);border:2px solid var(--outline);border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:all var(--transition-fast)}.goal-option input{cursor:pointer}.goal-option.selected{border-color:var(--primary);background:var(--secondary);color:var(--primary)}.problem-feedback{font-size:var(--font-size-sm);font-weight:500;color:var(--warning)}#toast{position:fixed;bottom:var(--spacing-xl);left:50%;transform:translate(-50%,40px);background:#334155;color:#f8fafc;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-lg);font-weight:600;font-size:var(--font-size-sm);box-shadow:0 10px 25px -5px #0000004d;z-index:10000;opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .2s}#toast.show{transform:translate(-50%);opacity:1}.badge{font-family:Fira Code,monospace;font-size:var(--font-size-md);font-weight:700;color:var(--primary);background:var(--secondary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md)}.row{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.row.sticky{font-weight:600}select{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--outline);background:var(--background);color:var(--text-primary);font-weight:600;outline:none;cursor:pointer}select:focus{border-color:var(--primary)}
