@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap";:root{--bg-primary:#0a0a14;--bg-gradient:radial-gradient(circle at 50% 0%, #1e1b4b 0%, #09090e 70%);--card-bg:#ffffff08;--card-border:#ffffff14;--card-hover-border:#ffffff26;--accent-cyan:#00f2fe;--accent-magenta:#ff2a85;--accent-violet:#8a2be2;--accent-green:#00ff87;--accent-coral:#ff416c;--font-display:"Outfit", sans-serif;--font-body:"Inter", sans-serif;--container-width:1400px;--border-radius-lg:16px;--border-radius-md:10px;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);background-image:var(--bg-gradient);color:#e2e8f0;font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:40px;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em;font-weight:600}.app-container{max-width:var(--container-width);margin:0 auto;padding:20px}.glass-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--border-radius-lg);-webkit-backdrop-filter:blur(16px);transition:var(--transition-smooth);padding:24px}.glass-card:hover{border-color:var(--card-hover-border)}.hover-lift:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0006}.app-header-bar{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;display:flex}.logo-section h1{background:linear-gradient(135deg, #fff 30%, var(--accent-cyan) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.2rem;font-weight:700}.logo-section p{color:#94a3b8;margin-top:4px;font-size:.9rem}.stats-counter-badge{flex-direction:column;align-items:flex-end;display:flex}.stats-counter-badge .lbl{text-transform:uppercase;letter-spacing:.1em;color:#64748b;font-size:.75rem}.stats-counter-badge .val{font-family:var(--font-display);color:var(--accent-cyan);text-shadow:0 0 12px #00f2fe4d;font-size:1.25rem;font-weight:700}.dashboard-grid{grid-template-columns:440px 1fr;align-items:start;gap:28px;display:grid}@media (width<=1024px){.dashboard-grid{grid-template-columns:1fr}}.workspace-column{flex-direction:column;gap:24px;display:flex}.workspace-card{flex-direction:column;align-items:center;display:flex}.workspace-card-header{justify-content:space-between;align-items:center;width:100%;margin-bottom:20px;display:flex}.workspace-card-header h2{color:#fff;font-size:1.4rem}.board-action-row{gap:10px;display:flex}.glass-btn{border-radius:var(--border-radius-md);color:#f1f5f9;cursor:pointer;font-family:var(--font-body);transition:var(--transition-smooth);background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:500;display:inline-flex}.glass-btn:hover:not(:disabled){background:#ffffff14;border-color:#fff3;transform:translateY(-1px)}.glass-btn:disabled{opacity:.4;cursor:not-allowed}.glass-btn.primary-btn{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));color:#05050c;border:none;font-weight:600}.glass-btn.primary-btn:hover{opacity:.95;box-shadow:0 0 15px #00f2fe66}.board-wrapper{aspect-ratio:1;border:2px solid var(--card-border);width:100%;max-width:380px;transition:var(--transition-smooth);touch-action:none;background:#0a0a1499;border-radius:24px;padding:16px;position:relative;box-shadow:inset 0 4px 30px #00000080}.board-wrapper:hover{border-color:#ffffff1f}.pattern-svg-board{-webkit-user-select:none;user-select:none;width:100%;height:100%}.decor-circle{fill:none;stroke:#ffffff05;stroke-width:1.5px;stroke-dasharray:4 4}.decor-axis{stroke:#ffffff04;stroke-width:1px}.board-line{fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#neon-glow);stroke-width:6px;animation:.3s ease-out drawStroke}@keyframes drawStroke{0%{stroke-dasharray:10;stroke-dashoffset:10px}to{stroke-dasharray:10;stroke-dashoffset:0}}.board-line-active{fill:none;stroke:#ffffff4d;stroke-width:4px;stroke-dasharray:5 5;stroke-linecap:round}.board-line-guide{fill:none;stroke:var(--accent-magenta);stroke-width:4px;stroke-dasharray:6 8;opacity:.3;stroke-linecap:round;animation:2s ease-in-out infinite guidePulse}@keyframes guidePulse{0%{opacity:.18;stroke-width:3.5px}50%{opacity:.35;stroke-width:4.5px}to{opacity:.18;stroke-width:3.5px}}.board-line-active{stroke:var(--accent-cyan);filter:url(#neon-glow);stroke-width:6px}.board-line-success{stroke:var(--accent-green);filter:url(#neon-glow);stroke-width:6px}.board-line-error{stroke:var(--accent-coral);filter:url(#neon-glow);stroke-width:6px}.node-group{cursor:pointer}.node-hitbox{fill:#0000;cursor:pointer}.node-dot{fill:#1f1f3a;stroke:#ffffff26;stroke-width:2px;transition:var(--transition-smooth)}.board-node:hover .node-dot{fill:#2d2d54;stroke:#ffffff4d;r:10}.node-center{fill:#64748b;transition:var(--transition-smooth)}.node-active .node-dot{fill:#0c0d21;stroke-width:3px;r:14}.node-active.status-active .node-dot{stroke:var(--accent-cyan)}.node-active.status-success .node-dot{stroke:var(--accent-green)}.node-active.status-error .node-dot{stroke:var(--accent-coral)}.node-active .node-center{r:4}.node-active.status-active .node-center{fill:var(--accent-cyan)}.node-active.status-success .node-center{fill:var(--accent-green)}.node-active.status-error .node-center{fill:var(--accent-coral)}.node-start .node-dot{stroke-dasharray:4 2}.node-guide .node-dot{stroke:var(--accent-magenta);stroke-width:2px;opacity:.55;r:9}.node-ripple{fill:none;stroke-width:1.5px;opacity:0;animation:1.5s ease-out infinite rippleNode}.node-ripple.status-active{stroke:var(--accent-cyan)}.node-ripple.status-success{stroke:var(--accent-green)}.node-ripple.status-error{stroke:var(--accent-coral)}@keyframes rippleNode{0%{r:12;opacity:.8}to{r:24;opacity:0}}.node-index-bg{fill:#1e1b4b;stroke:#fff3;stroke-width:1px}.node-index-text{fill:#fff;font-family:var(--font-display);text-anchor:middle;font-size:8px;font-weight:700}.status-error{animation:.4s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.workspace-tabs-menu{border-bottom:1px solid #ffffff0d;width:100%;margin-top:10px;display:flex}.workspace-tab-header-btn{color:#64748b;cursor:pointer;font-family:var(--font-display);transition:var(--transition-smooth);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:12px 6px;font-size:.95rem;font-weight:500}.workspace-tab-header-btn:hover{color:#cbd5e1}.workspace-tab-header-btn.active{color:var(--accent-cyan);border-bottom-color:var(--accent-cyan);text-shadow:0 0 10px #00f2fe33}.tab-content-panel{flex-direction:column;min-height:280px;display:flex}.stats-empty-state{text-align:center;color:#64748b;padding:40px 10px;font-size:.9rem}.stats-primary-row{align-items:center;gap:20px;margin-bottom:20px;display:flex}.score-gauge-container{width:90px;height:90px}.score-svg-gauge{width:100%;height:100%}.gauge-track{fill:none;stroke:#ffffff0a;stroke-width:8px}.gauge-indicator{fill:none;stroke-width:8px;stroke-linecap:round;transform-origin:50px 50px;transition:stroke-dashoffset .8s ease-in-out;transform:rotate(-90deg)}.gauge-score-val{fill:#fff;font-family:var(--font-display);text-anchor:middle;font-size:18px;font-weight:700}.gauge-score-label{fill:#64748b;text-anchor:middle;font-size:9px}.grade-badge-card{border-radius:var(--border-radius-md);background:#ffffff03;border:1px solid #ffffff0a;border-left:4px solid;flex:1;padding:12px 16px}.grade-badge-card .badge-title{color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.grade-badge-card h2{margin:2px 0;font-size:1.5rem}.grade-badge-card .badge-text{color:#94a3b8;font-size:.8rem}.mnemonic-section{border-color:#8a2be226;margin-bottom:20px;padding:16px}.mnemonic-section h5{color:var(--accent-violet);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:8px;margin-bottom:8px;font-size:.9rem;display:flex}.mnemonic-desc{font-family:var(--font-body);color:#e2e8f0;font-size:.95rem;font-style:italic;line-height:1.5}.stats-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.stat-card{flex-direction:column;justify-content:center;align-items:center;padding:12px;display:flex}.stat-card .stat-num{font-family:var(--font-display);color:#fff;font-size:1.4rem;font-weight:700}.stat-card .stat-label{color:#64748b;margin-top:4px;font-size:.75rem}.practice-empty-state{text-align:center;color:#64748b;padding:40px 10px}.practice-empty-state .sub{color:#475569;margin-top:10px;font-size:.8rem}.practice-tabs{border-radius:var(--border-radius-md);background:#0003;border:1px solid #ffffff0d;margin-bottom:16px;padding:4px;display:flex}.practice-tab-btn{color:#64748b;cursor:pointer;font-family:var(--font-body);transition:var(--transition-smooth);background:0 0;border:none;border-radius:6px;flex:1;padding:8px;font-size:.85rem;font-weight:500}.practice-tab-btn:hover{color:#cbd5e1}.practice-tab-btn.active{background:var(--card-bg);color:#fff;border:1px solid #ffffff0f}.practice-instructions{color:#94a3b8;margin-bottom:16px;font-size:.85rem;line-height:1.5}.recall-actions{gap:10px;margin-top:12px;display:flex}.verify-fail-btn{border-color:#ff416c4d}.verify-fail-btn:hover{border-color:var(--accent-coral);background:#ff416c14}.practice-feedback{border-radius:var(--border-radius-md);align-items:center;gap:10px;margin-bottom:16px;padding:12px;font-size:.9rem;font-weight:500;animation:.3s ease-out slideInDown;display:flex}.feedback-success{color:var(--accent-green);background:#00ff8714;border:1px solid #00ff8733}.feedback-error{color:var(--accent-coral);background:#ff416c14;border:1px solid #ff416c33}@keyframes slideInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.recall-scoreboard{background:#00000026;justify-content:space-around;padding:12px 6px;display:flex}.score-stat{flex-direction:column;align-items:center;display:flex}.score-val{font-family:var(--font-display);color:#fff;font-size:1.25rem;font-weight:700}.score-lbl{color:#64748b;text-transform:uppercase;margin-top:2px;font-size:.7rem}.filter-panel{flex-direction:column;gap:20px;height:fit-content;display:flex}.filter-panel-header{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.filter-panel-header h3{color:#fff;align-items:center;gap:8px;font-size:1.15rem;display:flex}.reset-btn-link{color:var(--accent-cyan);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;font-size:.8rem;font-weight:500}.reset-btn-link:hover{opacity:.9;text-decoration:underline}.filter-section{flex-direction:column;gap:10px;display:flex}.filter-section.grid-split{grid-template-columns:1fr 1fr;gap:16px;display:grid}.section-title{color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:600}.range-controls{flex-direction:column;gap:10px;display:flex}.range-group{align-items:center;gap:12px;font-size:.8rem;display:flex}.range-group span{color:#cbd5e1;width:60px}.accent-range{-webkit-appearance:none;background:#ffffff0f;border-radius:3px;outline:none;flex:1;height:6px}.accent-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-cyan);cursor:pointer;width:16px;height:16px;transition:var(--transition-smooth);border-radius:50%;box-shadow:0 0 10px #00f2fe80}.accent-range::-webkit-slider-thumb:hover{transform:scale(1.2)}.segmented-control{border-radius:var(--border-radius-md);background:#0003;border:1px solid #ffffff0d;padding:2px;display:flex}.segment-btn{color:#64748b;cursor:pointer;font-family:var(--font-body);text-transform:capitalize;transition:var(--transition-smooth);background:0 0;border:none;border-radius:6px;flex:1;padding:6px 2px;font-size:.8rem}.segment-btn:hover{color:#cbd5e1}.segment-btn.active{color:var(--accent-cyan);background:#ffffff0a;border:1px solid #ffffff0d;font-weight:500}.mini-grid-container{border-radius:var(--border-radius-md);background:#0000001a;flex-direction:column;gap:8px;padding:10px;display:flex}.mini-grid-label{color:#64748b;font-size:.75rem}.mini-grid-selector{grid-template-columns:repeat(3,16px);justify-content:start;gap:8px;display:grid}.mini-grid-dot{cursor:pointer;width:16px;height:16px;transition:var(--transition-smooth);background:#ffffff1a;border:1px solid #ffffff26;border-radius:50%;font-size:0}.mini-grid-dot:hover{background:#ffffff4d;transform:scale(1.2)}.mini-grid-dot.selected{background:var(--accent-cyan);border-color:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan)}.filter-section.grid-split div:last-child .mini-grid-dot.selected{background:var(--accent-coral);border-color:var(--accent-coral);box-shadow:0 0 8px var(--accent-coral)}.styled-select{border-radius:var(--border-radius-md);color:#cbd5e1;font-family:var(--font-body);cursor:pointer;background:#0003;border:1px solid #ffffff14;outline:none;padding:10px;font-size:.85rem}.styled-select option{color:#cbd5e1;background:#0f0e1c}.toggle-group{border-top:1px solid #ffffff0d;flex-direction:column;gap:14px;padding-top:16px;display:flex}.toggle-label{cursor:pointer;align-items:flex-start;gap:12px;display:flex}.styled-checkbox{accent-color:var(--accent-cyan);cursor:pointer;width:16px;height:16px;margin-top:3px}.toggle-text{flex-direction:column;display:flex}.toggle-text strong{color:#f1f5f9;font-size:.85rem}.toggle-text small{color:#64748b;margin-top:2px;font-size:.75rem}.explorer-column{flex-direction:column;gap:24px;display:flex}.explorer-grid{grid-template-columns:320px 1fr;gap:24px;display:grid}@media (width<=768px){.explorer-grid{grid-template-columns:1fr}}.pattern-list-section{flex-direction:column;gap:16px;display:flex}.list-meta-bar{color:#94a3b8;border-bottom:1px solid #ffffff0a;justify-content:space-between;align-items:center;padding-bottom:10px;font-size:.85rem;display:flex}.results-count{color:var(--accent-cyan);font-weight:700}.calc-time{color:#475569;margin-left:6px}.showing-indicator{background:#ffffff0a;border-radius:4px;padding:4px 8px;font-size:.75rem}.empty-results{text-align:center;padding:60px 20px}.empty-icon{color:#334155;margin-bottom:16px;font-size:3rem}.empty-results p{color:#64748b;margin-top:8px;font-size:.85rem}.pattern-cards-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;display:grid}.pattern-card{cursor:pointer;flex-direction:column;align-items:center;height:100%;padding:12px;display:flex;position:relative;overflow:hidden}.card-header{color:#64748b;justify-content:space-between;width:100%;font-size:.7rem;display:flex}.card-index{font-family:var(--font-display)}.mini-svg-container{width:80px;height:80px;margin:12px 0 8px;position:relative}.mini-pattern-svg{width:100%;height:100%}.mini-dot-bg{fill:#1f1f3a;transition:var(--transition-smooth)}.mini-dot-bg.active{fill:#fff3}.mini-path-line{stroke:var(--accent-cyan);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:0;transition:stroke-dashoffset .8s ease-in-out}.pattern-card:hover .mini-path-line{animation:1s ease-in-out forwards drawMiniPath}@keyframes drawMiniPath{0%{stroke-dashoffset:200px}to{stroke-dashoffset:0}}.mini-start-node{fill:var(--accent-green);stroke:#0a0a14;stroke-width:1px}.mini-end-node{fill:var(--accent-magenta);stroke:#0a0a14;stroke-width:1px}.card-footer-info{color:#cbd5e1;justify-content:space-between;align-items:center;width:100%;margin-top:auto;font-size:.75rem;display:flex}.load-action-text{color:var(--accent-cyan);opacity:0;transition:var(--transition-smooth);font-size:.65rem;transform:translate(-4px)}.pattern-card:hover .load-action-text{opacity:1;transform:translate(0)}.load-more-container{justify-content:center;margin-top:16px;display:flex}.load-more-btn{font-family:var(--font-display);padding:10px 24px;font-weight:500}.ad-slot{border-radius:var(--border-radius-lg);transition:var(--transition-smooth);background:#ffffff04;border:1px dashed #ffffff0d;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.ad-slot:hover{background:#ffffff05;border-color:#ffffff14}.ad-slot-label{font-family:var(--font-body);letter-spacing:.12em;color:#ffffff1f;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:8px;font-weight:600}.ad-slot-inner{width:100%;height:100%;position:absolute;top:0;left:0}.ad-slot-top{width:100%;max-width:728px;height:90px;margin:0 auto 24px}.ad-slot-under-board{width:100%;max-width:336px;height:280px;margin:20px auto}.ad-slot-bottom{width:100%;max-width:728px;height:90px;margin:32px auto 0}@media (width<=768px){.ad-slot-top,.ad-slot-bottom{max-width:320px;height:50px}}@media (width<=600px){.app-header-bar{flex-direction:column;align-items:flex-start;gap:12px}.stats-counter-badge{align-items:flex-start}}@media (width<=480px){.app-container{padding:10px}.glass-card{padding:16px}.stats-primary-row{text-align:center;flex-direction:column;align-items:center;gap:16px}.grade-badge-card{border-top-style:solid;border-top-width:4px;border-left-width:0;width:100%}}@media (width<=400px){.filter-section.grid-split{grid-template-columns:1fr;gap:12px}}@media (width<=360px){.workspace-tabs-menu{flex-direction:column}.workspace-tab-header-btn{text-align:left;border-bottom:none;border-left:2px solid #0000;padding:8px 12px}.workspace-tab-header-btn.active{border-left-color:var(--accent-cyan);border-bottom-color:#0000}}
