.lesson-browser{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:1200px;margin:0 auto}.tier-selector{background-color:var(--color-bg-secondary);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);h2{font-family:var(--font-serif);font-size:1.5rem;color:var(--color-heading);margin-bottom:var(--spacing-md)}.tier-buttons{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;.tier-btn{flex:1 1 120px;padding:.75rem 1.25rem;font-size:.95rem;font-weight:700;background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--border-radius);box-shadow:none;transition:all .2s cubic-bezier(.16,1,.3,1);&:hover{border-color:var(--color-gold);transform:translateY(-1px);background:var(--color-bg-secondary)}&.active{background:var(--color-navy-gradient);color:#fff;border-color:var(--color-gold);box-shadow:0 4px 12px #0b1f3a33}}}}.tier-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);.lessons-section,.scenarios-section{display:flex;flex-direction:column;h2{font-family:var(--font-serif);font-size:1.4rem;color:var(--color-heading);margin-bottom:.5rem}.section-hint{font-size:.85rem;color:var(--color-text-light);margin-bottom:var(--spacing-md)}}}.lessons-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.lesson-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--spacing-sm);transition:all .2s;&:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-gold-border)}h3{margin:0;font-size:1.1rem;font-weight:700;color:var(--color-heading)}.description{margin:0;font-size:.875rem;color:var(--color-text-light);line-height:1.5}.lesson-meta{display:flex;gap:var(--spacing-sm);margin:var(--spacing-xs) 0;font-size:.75rem;color:var(--color-text-light);.duration,.complexity{padding:.2rem .55rem;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-pill);text-transform:capitalize}}.features{font-size:.8rem;color:var(--color-text-light);code{background-color:var(--color-bg);border:1px solid var(--color-border);padding:2px 6px;border-radius:4px;font-size:.75rem;color:var(--color-heading)}}.select-btn{margin-top:var(--spacing-xs);width:100%;padding:.65rem;font-size:.85rem}}.scenarios-list{display:flex;flex-direction:column;gap:var(--spacing-lg);.no-scenarios{color:var(--color-text-light);font-style:italic;background:var(--color-bg-secondary);padding:var(--spacing-lg);border-radius:var(--border-radius);border:1px dashed var(--color-border)}}.scenario-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--spacing-sm);transition:all .2s;&:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-gold-border)}h4{margin:0;font-size:1.1rem;font-weight:700;color:var(--color-heading)}p{font-size:.875rem;color:var(--color-text-light);line-height:1.5;margin:0}.select-btn{margin-top:var(--spacing-xs);width:100%;padding:.65rem;font-size:.85rem}}@media(max-width:1024px){.tier-content{grid-template-columns:1fr}}@media(max-width:768px){.tier-selector .tier-buttons{flex-direction:column}}.dashboard{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:1280px;margin:0 auto}.welcome-hero{border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}.onboarding-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);padding:clamp(1.5rem,3.5vw,2.5rem);display:flex;flex-direction:column;gap:var(--spacing-lg)}.onboarding-brand{display:flex;align-items:center;gap:var(--spacing-lg);h2{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--color-heading);margin:0 0 .25rem}}.hero-logo{border-radius:16px;box-shadow:0 6px 16px #0b1f3a33}.onboarding-subtitle{font-size:1rem;color:var(--color-text-light);max-width:650px;line-height:1.5;margin:0}.name-form{display:flex;gap:var(--spacing-sm);max-width:520px;flex-wrap:wrap;input{flex:1 1 260px;padding:.75rem 1rem;font-size:1rem}button{padding:.75rem 1.5rem;font-size:.95rem}}.learner-hero-banner{background:linear-gradient(135deg,#0b1f3a,#153866 60%,#1d4678);color:#fff;padding:clamp(1.5rem,3.5vw,2.25rem);border-radius:var(--border-radius-lg);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl);position:relative;overflow:hidden;&:after{content:"";position:absolute;top:-50%;right:-10%;width:320px;height:320px;background:radial-gradient(circle,rgba(212,175,55,.15) 0%,transparent 70%);pointer-events:none}}.hero-left{display:flex;flex-direction:column;gap:.45rem;z-index:1;h2{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;margin:.15rem 0;letter-spacing:.04em}}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:#ffffff1f;border:1px solid rgba(212,175,55,.4);border-radius:var(--border-radius-pill);padding:.25rem .75rem;width:fit-content;font-size:.75rem;font-weight:700;color:#f8e8b0;text-transform:uppercase;letter-spacing:.08em}.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--color-gold-bright)}.hero-welcome-msg{color:#cbd5e1;font-size:.95rem;margin:0;strong{color:#fff}}.hero-progress-wrap{display:flex;align-items:center;gap:.85rem;margin-top:.6rem;max-width:480px}.hero-progress-bar{flex:1;height:8px;background:#ffffff2e;border-radius:var(--border-radius-pill);overflow:hidden}.hero-progress-fill{height:100%;background:var(--color-gold-gradient);border-radius:var(--border-radius-pill);transition:width .4s ease}.hero-progress-text{font-size:.78rem;font-weight:700;color:#f8e8b0;white-space:nowrap}.hero-right{z-index:1;flex-shrink:0}.hero-emblem{border-radius:18px;box-shadow:0 8px 24px #00000059;border:1px solid rgba(212,175,55,.4)}.stats-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--spacing-md)}.stat-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:1.15rem 1.35rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow-sm);transition:all .2s;&:hover{box-shadow:var(--shadow-md);border-color:var(--color-gold-border);transform:translateY(-1px)}}.stat-icon{width:44px;height:44px;border-radius:12px;background:var(--color-bg);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}.stat-body{display:flex;flex-direction:column;h3{font-family:var(--font-serif);font-size:1.6rem;font-weight:800;color:var(--color-heading);margin:0;line-height:1.1}p{font-size:.78rem;color:var(--color-text-light);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin:.2rem 0 0}}.recommendation-section{width:100%}.recommendation-card{background:linear-gradient(180deg,#fff,#faf6ed);border:1px solid var(--color-gold);border-left:5px solid var(--color-gold-bright);border-radius:var(--border-radius-lg);padding:1.25rem 1.65rem;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-lg);box-shadow:0 4px 16px #c59b271f;flex-wrap:wrap}.recommendation-header{flex:1 1 340px;display:flex;flex-direction:column;gap:.25rem;h3{font-size:1.25rem;font-weight:700;color:var(--color-ink-strong);margin:.15rem 0}}.rec-tag-wrap{display:flex;align-items:center;gap:.5rem}.recommendation-tag{font-size:.75rem;font-weight:800;color:#92400e;text-transform:uppercase;letter-spacing:.08em}.rec-tier{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-pill);font-size:.72rem;font-weight:700;padding:.15rem .5rem;color:var(--color-text-light)}.rec-reason{font-size:.9rem;color:var(--color-ink-muted);margin:0;line-height:1.4}.rec-btn{padding:.75rem 1.5rem;font-size:.925rem;white-space:nowrap}.roadmap-section{display:flex;flex-direction:column;gap:var(--spacing-sm);.section-title-wrap h2{font-family:var(--font-serif);font-size:1.45rem;color:var(--color-heading);margin:0 0 .2rem}}.roadmap-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-sm)}.roadmap-step{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.35rem;text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .2s;&:hover{border-color:var(--color-gold);transform:translateY(-1px)}&.active{border-color:var(--color-primary);background:#f0f4fa;box-shadow:0 0 0 2px var(--color-primary);.step-tier{color:var(--color-ink-strong)}.step-count{color:var(--color-ink-muted)}}&.completed{border-color:var(--color-gold)}}.step-top{display:flex;justify-content:space-between;align-items:center}.step-tier{font-size:.85rem;font-weight:700;color:var(--color-heading)}.step-badge{font-size:.85rem}.step-count{font-size:.75rem;color:var(--color-text-light)}.step-bar{height:4px;background:var(--color-bg);border-radius:2px;overflow:hidden;margin-top:2px}.step-bar-fill{height:100%;background:var(--color-gold-gradient)}.weak-spots-section{background:#fffbeb;border:1px solid #FDE68A;border-left:4px solid var(--color-warning);border-radius:var(--border-radius);padding:1.15rem 1.4rem;h3{font-size:1.1rem;color:#92400e;margin:0 0 .25rem}}.weak-spots-list{list-style:none;padding:0;margin:var(--spacing-sm) 0 0;display:flex;flex-direction:column;gap:.5rem}.weak-spot-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;padding:.65rem 1rem;border-radius:var(--border-radius-sm);border:1px solid #FDE68A}.weak-spot-info strong{font-size:.9rem;color:var(--color-ink-strong)}.weak-spot-meta{display:block;font-size:.75rem;color:#78350f;margin-top:2px}.weak-spot-btn{padding:.35rem .85rem;font-size:.8rem}.content-explorer-section{display:flex;flex-direction:column;gap:var(--spacing-lg)}.explorer-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--spacing-md);border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-md)}.explorer-title-wrap h2{font-family:var(--font-serif);font-size:1.6rem;color:var(--color-heading);margin:0 0 .15rem}.module-counter{font-size:.85rem;color:var(--color-text-light)}.filter-pill-group{display:flex;gap:.35rem;flex-wrap:wrap}.filter-pill{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-pill);padding:.35rem .85rem;font-size:.8rem;font-weight:600;color:var(--color-text-light);box-shadow:none;&:hover{background:var(--color-bg-secondary);color:var(--color-text);transform:none;box-shadow:none}&.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}}.module-group{display:flex;flex-direction:column;gap:var(--spacing-md)}.group-heading{font-size:1.15rem;font-weight:700;color:var(--color-heading);margin:0}.scenarios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--spacing-lg)}.scenario-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;gap:var(--spacing-md);transition:all .2s cubic-bezier(.16,1,.3,1);position:relative;&:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-gold-border)}&.status-passed{border-top:3px solid var(--color-success)}&.status-attempted{border-top:3px solid var(--color-gold)}}.scenario-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;h3{font-size:1.1rem;font-weight:700;color:var(--color-heading);margin:0;line-height:1.3}}.difficulty{padding:.2rem .6rem;border-radius:var(--border-radius-pill);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;&.beginner{background:#dcfce7;color:#15803d}&.intermediate{background:#fef3c7;color:#92400e}&.advanced{background:#fee2e2;color:#b91c1c}}.quiz-badge{background:#ede9fe;color:#6d28d9;padding:.2rem .6rem;border-radius:var(--border-radius-pill);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.scenario-briefing{font-size:.875rem;color:var(--color-text-light);line-height:1.5;margin:0}.scenario-meta{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;font-size:.75rem;color:var(--color-text-light)}.meta-item{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-pill);padding:.2rem .55rem}.progress-line{display:flex;flex-direction:column;gap:.25rem}.progress-bar{height:6px;background:var(--color-bg);border-radius:3px;overflow:hidden;border:1px solid var(--color-border-subtle)}.progress-fill{height:100%;background:var(--color-gold-gradient);border-radius:3px}.progress-label-row{display:flex;justify-content:space-between;font-size:.75rem;color:var(--color-text-light)}.passed-badge{color:var(--color-success);font-weight:700}.start-btn{width:100%;padding:.65rem;font-size:.85rem}.empty-filter-state{text-align:center;padding:var(--spacing-2xl);background:var(--color-bg-secondary);border-radius:var(--border-radius-lg);border:1px dashed var(--color-border);p{color:var(--color-text-light);margin-bottom:var(--spacing-md)}}@media(max-width:768px){.learner-hero-banner{flex-direction:column;align-items:flex-start}.hero-right{display:none}.explorer-header{flex-direction:column;align-items:flex-start}}.settings-panel{display:flex;flex-direction:column;gap:var(--spacing-2xl);max-width:600px}.settings-section{background-color:var(--color-bg-secondary);padding:var(--spacing-xl);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);h2{margin-bottom:var(--spacing-lg);border-bottom:2px solid var(--color-border);padding-bottom:var(--spacing-lg)}h3{margin-bottom:var(--spacing-sm)}}.setting-item{margin-bottom:var(--spacing-lg);&:last-child{margin-bottom:0}label{display:block;margin-bottom:var(--spacing-sm);font-weight:600}input[type=text],input[type=email]{width:100%;margin-bottom:var(--spacing-md)}p{margin-bottom:var(--spacing-md);font-size:var(--font-size-sm)}}.action-btn{background:var(--color-primary);&:hover{background:var(--color-primary-dark)}}.status-msg{margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:#d1fae5;color:#047857;border-radius:4px;font-size:var(--font-size-sm)}.quota-display{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-bg);border-radius:var(--border-radius);p{margin-bottom:var(--spacing-sm);font-size:var(--font-size-sm)}.quota-bar{width:100%;height:8px;background-color:var(--color-border);border-radius:4px;overflow:hidden;.quota-used{height:100%;background-color:var(--color-primary);transition:width .3s}}}@media(max-width:768px){.settings-panel{max-width:100%}}.risk-note{padding:var(--spacing-md);background-color:#fffbeb;border:1px solid #fde68a;border-radius:var(--border-radius);color:#78350f;font-size:var(--font-size-sm);margin-bottom:var(--spacing-lg)}.action-btn.as-label{display:inline-block;color:#fff;cursor:pointer}.folder-row{display:flex;align-items:center;gap:var(--spacing-md)}.folder-name{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius);font-family:Monaco,Menlo,monospace;font-size:var(--font-size-sm)}.status-banner{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius);font-size:var(--font-size-sm)}.status-banner.ok{background-color:#d1fae5;color:#047857}.status-banner.error{background-color:#fee2e2;color:#991b1b}.status-banner.info{background-color:#dbeafe;color:#1e40af}.quiz-view{max-width:760px;margin:0 auto}.quiz-briefing{margin-bottom:var(--spacing-sm)}.quiz-rule{color:var(--color-text-light);margin-bottom:var(--spacing-lg)}.quiz-questions{padding-left:var(--spacing-lg)}.quiz-questions li{margin-bottom:var(--spacing-lg);padding:var(--spacing-md);border-radius:var(--border-radius);border-left:4px solid transparent}.quiz-questions li.q-right{border-left-color:var(--color-success, #16a34a)}.quiz-questions li.q-wrong{border-left-color:var(--color-danger, #dc2626)}.quiz-questions fieldset{border:0;padding:0;margin:0}.quiz-questions legend{font-weight:600;margin-bottom:var(--spacing-sm)}.quiz-questions label{display:flex;gap:var(--spacing-sm);align-items:flex-start;padding:var(--spacing-sm);border-radius:var(--border-radius);cursor:pointer}.quiz-questions label.opt-correct{background-color:#16a34a26}.quiz-questions label.opt-chosen-wrong{background-color:#dc262626}.q-explanation{margin-top:var(--spacing-sm)}.quiz-submit:disabled{opacity:.6;cursor:not-allowed}.quiz-result{padding:var(--spacing-lg);border-radius:var(--border-radius);margin-top:var(--spacing-lg)}.quiz-result.passed{background-color:#16a34a26}.quiz-result.failed{background-color:#dc26261f}.quiz-actions{display:flex;gap:var(--spacing-md);flex-wrap:wrap;margin-top:var(--spacing-md)}.certificates-view,.teach-view{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-lg)}.certificates-header{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--spacing-sm)}.cert-header-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-pill);padding:.25rem .75rem;width:fit-content;font-size:.8rem;font-weight:700;color:var(--color-gold-dark);text-transform:uppercase;letter-spacing:.08em;img{border-radius:6px}}.certificates-header h2{font-family:var(--font-serif);font-size:2rem;color:var(--color-heading);margin-bottom:.25rem}.cert-header-desc{font-size:.95rem;color:var(--color-text-light);max-width:760px;line-height:1.6}.cert-stats-row{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-top:var(--spacing-sm)}.cert-stat-chip{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:.6rem 1rem;display:flex;flex-direction:column}.cert-stat-num{font-family:var(--font-serif);font-size:1.15rem;font-weight:800;color:var(--color-heading)}.cert-stat-label{font-size:.75rem;color:var(--color-text-light);text-transform:uppercase;letter-spacing:.05em}.status-banner{display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1.25rem;border-radius:var(--border-radius);font-size:.9rem;line-height:1.5;.banner-icon{font-size:1.1rem}&.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a}&.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}&.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}}.link-btn{background:none;border:none;color:var(--color-ink-gold);font-weight:700;padding:0;text-decoration:underline;cursor:pointer;&:hover{color:var(--color-ink-strong)}}.tier-certs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--spacing-lg)}.tier-cert-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;gap:var(--spacing-lg);transition:all .25s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;&:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-gold-border)}&.has-cert{border-color:var(--color-gold);background:linear-gradient(180deg,#fff,#fdfbf6);box-shadow:0 4px 16px #c59b271f;&:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--color-gold-gradient)}}&.ready{border-color:var(--color-gold-bright);box-shadow:0 4px 16px #c59b2729;&:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#15803d}}}.tier-cert-top{display:flex;flex-direction:column;gap:.5rem;h3{font-size:1.15rem;font-weight:700;color:var(--color-heading);margin:.25rem 0 0}}.tier-tag-group{display:flex;justify-content:space-between;align-items:center}.tier-tag{font-family:var(--font-serif);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-heading);background:var(--color-bg);padding:.2rem .55rem;border-radius:var(--border-radius-pill);border:1px solid var(--color-border)}.status-pill{font-size:.75rem;font-weight:700;padding:.2rem .65rem;border-radius:var(--border-radius-pill);&.earned{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}&.ready{background:#dcfce7;color:#166534;border:1px solid #86efac}&.locked{background:var(--color-bg);color:var(--color-text-light);border:1px solid var(--color-border)}}.tier-cert-sub{font-size:.85rem;color:var(--color-text-light);margin:0}.cert-progress-bar{height:6px;background:var(--color-bg);border-radius:var(--border-radius-pill);overflow:hidden;border:1px solid var(--color-border-subtle);margin-top:.25rem}.cert-progress-fill{height:100%;background:var(--color-gold-gradient);border-radius:var(--border-radius-pill);transition:width .3s ease}.tier-remaining-text{font-size:.8rem;color:var(--color-text-light);margin-top:.25rem;line-height:1.4;strong{color:var(--color-text)}}.tier-cert-actions{display:flex;flex-direction:column;gap:.5rem;button{width:100%;padding:.65rem;font-size:.85rem}}.certificate-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);width:100%;padding-bottom:var(--spacing-2xl)}.certificate-toolbar{width:min(100%,880px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md);padding:.75rem 1rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm)}.toolbar-center{display:flex;align-items:center}.view-mode-toggle{display:flex;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-pill);padding:.2rem;gap:.2rem}.mode-btn{background:none;border:none;border-radius:var(--border-radius-pill);padding:.35rem .85rem;font-size:.8rem;font-weight:600;color:var(--color-text-light);box-shadow:none;transition:all .2s;&:hover{background:var(--color-bg-secondary);color:var(--color-text);transform:none;box-shadow:none}&.active{background:var(--color-primary);color:#fff;box-shadow:0 2px 6px #0b1f3a33}}.toolbar-right{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;button{padding:.5rem 1rem;font-size:.825rem}}.sample-badge{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;border-radius:var(--border-radius-pill);font-size:.72rem;font-weight:800;padding:.25rem .65rem;text-transform:uppercase;letter-spacing:.06em}.certificate-stage{width:100%;display:flex;justify-content:center;align-items:center;padding:clamp(1rem,3vw,2.5rem);border-radius:var(--border-radius-lg);transition:background .3s ease;&.framed-mode{background:radial-gradient(circle at 50% 35%,#182232,#080e18);box-shadow:inset 0 2px 12px #0009}&.clean-mode{background:var(--color-bg);border:1px solid var(--color-border)}}.photoreal-certificate{position:relative;width:min(100%,820px);aspect-ratio:1 / 1;border-radius:4px;overflow:hidden;box-shadow:0 25px 60px -10px #0009,0 0 1px 1px #ffffff14;user-select:none;background:#000}.cert-base-image{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.cert-text-overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column}.overlay-framed{.overlay-name-box{position:absolute;top:57.5%;left:50%;transform:translate(-50%,-50%);width:76%;text-align:center;display:flex;flex-direction:column;align-items:center}.overlay-citation-box{position:absolute;top:66.8%;left:50%;transform:translate(-50%,-50%);width:76%;text-align:center;display:flex;flex-direction:column;align-items:center}}.overlay-clean{.overlay-name-box{position:absolute;top:58.6%;left:50%;transform:translate(-50%,-50%);width:82%;text-align:center;display:flex;flex-direction:column;align-items:center}.overlay-citation-box{position:absolute;top:69.2%;left:50%;transform:translate(-50%,-50%);width:82%;text-align:center;display:flex;flex-direction:column;align-items:center}}.overlay-recipient-name{font-family:Great Vibes,Brush Script MT,cursive;font-size:clamp(2.4rem,5.5vw,4.4rem);color:#061324;letter-spacing:.015em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 1rem;filter:drop-shadow(0 1px 1px rgba(6,19,36,.15))}.overlay-name-underline{width:clamp(220px,48%,460px);height:1.5px;background:#0b1f3a;margin-top:2px}.overlay-citation-prefix{font-family:var(--font-serif);font-size:clamp(.68rem,1.2vw,.88rem);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#475569;margin:0 0 2px}.sample-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:var(--font-serif);font-weight:800;font-size:clamp(1.3rem,5.5vw,3.1rem);letter-spacing:.12em;text-transform:uppercase;color:#b91c1c47;transform:rotate(-30deg);white-space:nowrap}.overlay-verify{position:absolute;top:85%;left:50%;transform:translate(-50%,-50%);width:78%;margin:0;text-align:center;font-family:var(--font-family);font-size:clamp(.5rem,1vw,.68rem);letter-spacing:.04em;color:#0b1f3a;white-space:nowrap}.overlay-clean .overlay-verify{top:93%}.overlay-citation-track{font-family:var(--font-serif);font-size:clamp(.82rem,1.6vw,1.15rem);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0b1f3a;margin:0;line-height:1.3}.certificate-security-notice{width:min(100%,820px);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1.25rem;box-shadow:var(--shadow-sm)}.security-icon{font-size:2rem;flex-shrink:0}.security-details{display:flex;flex-direction:column;gap:.25rem;p{margin:0}}.security-title{font-family:var(--font-serif);font-size:1rem;font-weight:700;color:var(--color-heading)}.security-code{font-size:.85rem;color:var(--color-text);strong{color:var(--color-heading)}}.security-url{font-size:.78rem;color:var(--color-text-light);code{background:var(--color-bg);border:1px solid var(--color-border);padding:.15rem .4rem;border-radius:4px;font-size:.75rem;color:var(--color-heading)}}@media print{body{background:#fff!important}body *{visibility:hidden}.photoreal-certificate,.photoreal-certificate *{visibility:visible}.certificate-stage{padding:0!important;background:transparent!important;box-shadow:none!important}.photoreal-certificate{position:fixed;inset:0;width:100vw!important;height:100vh!important;max-width:none!important;aspect-ratio:auto!important;box-shadow:none!important;border-radius:0!important;margin:0!important;padding:0!important;page-break-inside:avoid;background:transparent!important}.cert-base-image{width:100%!important;height:100%!important;object-fit:contain!important}.no-print{display:none!important}}@page{size:letter square;margin:0}.search-palette-backdrop{position:fixed;inset:0;background-color:#0b1f3a8c;display:flex;align-items:flex-start;justify-content:center;padding-top:10vh;z-index:1000}.search-palette{background-color:var(--color-bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-md);width:min(640px,92vw);max-height:70vh;display:flex;flex-direction:column;overflow:hidden}.search-palette-input-row{display:flex;align-items:center;border-bottom:1px solid var(--color-border);input{flex:1;border:none;padding:var(--spacing-lg);font-size:var(--font-size-lg);&:focus{outline:none}}.search-palette-close{margin-right:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-light);background-color:var(--color-bg);border:1px solid var(--color-border)}}.search-palette-filters{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);border-bottom:1px solid var(--color-border);select{font-size:var(--font-size-sm);padding:var(--spacing-xs) var(--spacing-sm)}}.search-palette-results{overflow-y:auto;padding:var(--spacing-sm)}.search-palette-hint{padding:var(--spacing-lg);color:var(--color-text-light);text-align:center;p{margin-top:var(--spacing-sm);&:first-child{margin-top:0}}}.search-palette-operators{font-size:var(--font-size-sm);code{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:3px;padding:0 var(--spacing-xs)}}.search-palette-suggestion{background:none;border:none;padding:0;color:var(--color-accent-text);font-weight:600;text-decoration:underline;cursor:pointer}.search-result-row{display:block;width:100%;text-align:left;background:none;border:none;border-radius:var(--border-radius);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;&:hover,&.active{background-color:var(--color-bg)}&.active{outline:2px solid var(--color-gold);outline-offset:-2px}}.search-result-main{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-md)}.search-result-title{font-weight:600;color:var(--color-accent-text)}.search-result-meta{flex-shrink:0;font-size:var(--font-size-sm);color:var(--color-text-light)}.search-result-snippet{margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--color-text-light);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;mark{background-color:color-mix(in srgb,var(--color-gold) 35%,transparent);color:var(--color-text);border-radius:2px}}@media(max-width:640px){.search-palette-backdrop{padding-top:4vh}}.app{display:flex;flex-direction:column;min-height:100vh;width:100%}.app-header{flex-wrap:wrap;gap:.75rem;background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);padding:.75rem 2rem;box-shadow:0 2px 10px #0b1f3a0a;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;backdrop-filter:blur(8px)}.header-brand-wrap{display:flex;align-items:center}.brand-btn{background:none;border:none;padding:0;display:flex;align-items:center;gap:.85rem;cursor:pointer;text-align:left;box-shadow:none;&:hover{background:none;transform:none;box-shadow:none;.brand-logo{transform:scale(1.04)}}}.brand-logo{width:42px;height:42px;object-fit:contain;border-radius:10px;box-shadow:0 4px 10px #0b1f3a2e;transition:transform .25s cubic-bezier(.16,1,.3,1)}.brand-text{display:flex;flex-direction:column}.brand-name{font-family:var(--font-serif);font-size:1.4rem;font-weight:800;letter-spacing:.08em;color:var(--color-heading);line-height:1.1;background:var(--color-brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-tagline{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--color-gold-dark);margin-top:2px}.header-right{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;justify-content:flex-end;row-gap:.5rem;min-width:0}.track-selector-wrap{display:flex;align-items:center;gap:.4rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-pill);padding:.25rem .75rem;transition:border-color .2s;&:hover{border-color:var(--color-gold)}}.track-icon{font-size:.9rem}.vertical-select{max-width:15rem;text-overflow:ellipsis;background:transparent;color:var(--color-text);border:none;font-size:.825rem;font-weight:600;cursor:pointer;padding:.2rem 0;outline:none;&:focus{box-shadow:none}}.header-search-btn{display:flex;align-items:center;gap:.5rem;background:var(--color-bg);color:var(--color-text-light);border:1px solid var(--color-border);border-radius:var(--border-radius-pill);padding:.4rem .9rem;font-size:.825rem;font-weight:500;box-shadow:none;transition:all .2s;&:hover{background:var(--color-bg-secondary);border-color:var(--color-gold);color:var(--color-text);transform:none;box-shadow:0 2px 6px #0b1f3a14}.search-icon{font-size:.8rem;opacity:.7}kbd{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:4px;padding:.1rem .35rem;font-family:inherit;font-size:.7rem;color:var(--color-text-light)}}.learner-chip{display:flex;align-items:center;gap:.5rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-pill);padding:.25rem .75rem .25rem .3rem;font-size:.825rem;font-weight:600;color:var(--color-text);box-shadow:none;transition:all .2s;&:hover{background:var(--color-bg-secondary);border-color:var(--color-gold);transform:none;box-shadow:0 2px 6px #0b1f3a14}&.ghost{color:var(--color-text-light)}}.learner-avatar{width:26px;height:26px;border-radius:50%;background:var(--color-navy-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border:1px solid var(--color-gold);.icon{width:.95rem;height:.95rem}}.header-nav{display:flex;align-items:center;gap:.35rem;background:var(--color-bg);padding:.25rem;border-radius:var(--border-radius-pill);border:1px solid var(--color-border-subtle);.nav-link{background:none;color:var(--color-text-light);border:none;border-radius:var(--border-radius-pill);padding:.4rem .85rem;font-size:.825rem;font-weight:600;box-shadow:none;display:inline-flex;align-items:center;gap:.35rem;transition:all .2s cubic-bezier(.16,1,.3,1);.nav-icon{font-size:.85rem}&:hover{background:#0b1f3a0d;color:var(--color-text);transform:none;box-shadow:none}&.active{background:var(--color-navy-gradient);color:#fff;box-shadow:0 2px 8px #0b1f3a40;&:hover{background:var(--color-navy-gradient);color:#fff}}}}.storage-warning{background-color:#fef3c7;border:1px solid #fcd34d;border-left:4px solid var(--color-warning);padding:var(--spacing-md) var(--spacing-lg);margin:var(--spacing-lg);border-radius:var(--border-radius);display:flex;justify-content:space-between;align-items:center;color:#78350f;p{margin:0}button{background:var(--color-warning);margin-left:var(--spacing-lg)}}.app-content{flex:1;padding:var(--spacing-xl);max-width:1400px;margin:0 auto;width:100%}@media(max-width:768px){.app-header{flex-direction:column;gap:var(--spacing-sm);align-items:flex-start;padding:var(--spacing-sm) var(--spacing-md)}.header-right{width:100%;flex-wrap:wrap;gap:var(--spacing-sm)}.header-nav{flex-wrap:wrap}.app-content{padding:var(--spacing-lg)}}.error-panel{padding:var(--spacing-lg);border-left:4px solid var(--color-danger, #dc2626);border-radius:var(--border-radius);background-color:#dc262614}.error-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-top:var(--spacing-md)}.error-report-list{margin:var(--spacing-sm) 0 0 var(--spacing-lg);word-break:break-word}*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #0B1F3A;--color-primary-dark: #061324;--color-primary-light: #183863;--color-gold: #C59B27;--color-gold-bright: #D4AF37;--color-gold-light: #FBF4DC;--color-gold-dark: #8E6B15;--color-gold-border: #DFBF6D;--color-gold-gradient: linear-gradient(135deg, #ECC870 0%, #C59B27 45%, #F9E7A2 75%, #9C731A 100%);--color-navy-gradient: linear-gradient(135deg, #0B1F3A 0%, #15345E 100%);--color-brand-gradient: linear-gradient(135deg, #0B1F3A 20%, #1c467a 100%);--color-parchment: #FAF7EE;--color-heading: var(--color-primary);--color-ink: #192333;--color-ink-muted: #526075;--color-ink-strong: #0B1F3A;--color-ink-gold: #7A5B10;--color-success: #15803d;--color-success-bg: #f0fdf4;--color-warning: #b45309;--color-warning-bg: #fffbeb;--color-danger: #b91c1c;--color-danger-bg: #fef2f2;--color-text: #192333;--color-text-light: #526075;--color-bg: #F5F7FA;--color-bg-secondary: #ffffff;--color-border: #E2E7F0;--color-border-subtle: #EDF1F7;--color-accent-text: #0B1F3A;--color-success-text: #15803d;--color-danger-text: #b91c1c;--color-warning-text: #b45309;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--border-radius-sm: .375rem;--border-radius: .75rem;--border-radius-lg: 1rem;--border-radius-pill: 9999px;--font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-serif: "Cinzel", Georgia, "Times New Roman", serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--shadow-sm: 0 1px 2px 0 rgba(11, 31, 58, .05);--shadow-md: 0 4px 12px -2px rgba(11, 31, 58, .08);--shadow-lg: 0 12px 24px -4px rgba(11, 31, 58, .1);--shadow-xl: 0 20px 32px -6px rgba(11, 31, 58, .14)}@media(prefers-color-scheme:dark){:root{--color-text: #F1F5F9;--color-text-light: #94A3B8;--color-bg: #0A121F;--color-bg-secondary: #111C2E;--color-border: #1E2D44;--color-border-subtle: #172437;--color-accent-text: #93C5FD;--color-success-text: #86EFAC;--color-danger-text: #FCA5A5;--color-warning-text: #FCD34D;--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, .5);--color-heading: var(--color-gold-light);--color-brand-gradient: linear-gradient(135deg, #F9E7A2 0%, #D4AF37 100%);--color-gold-dark: #D9B03C}}html,body{width:100%;height:100%;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-bg);line-height:1.5}#root{width:100%;height:100%}a{color:var(--color-accent-text);text-decoration:none;&:hover{text-decoration:underline}}.icon{width:1em;height:1em;flex-shrink:0;vertical-align:-.125em}.icon.filled{fill:currentColor}button:where(:not([class*=univer-])){font-family:inherit;font-weight:600;cursor:pointer;border:none;border-radius:var(--border-radius);font-size:var(--font-size-sm);padding:.65rem 1.25rem;background:var(--color-navy-gradient);color:#fff;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 4px #0b1f3a26;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;&:hover{background:linear-gradient(135deg,#122c52,#1e467a);box-shadow:0 4px 12px #0b1f3a40;transform:translateY(-1px)}&:active{transform:translateY(0);opacity:.95}&:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}}button.btn-gold{background:var(--color-gold-gradient);color:#07152b;font-weight:700;border:1px solid #DFBF6D;box-shadow:0 3px 10px #c59b274d;&:hover{background:linear-gradient(135deg,#f3d380,#d4af37 45%,#fff0ba 75%,#b3861b);box-shadow:0 6px 16px #c59b2766}}input[type=text]:where(:not([class*=univer-])),input[type=email]:where(:not([class*=univer-])),input[type=password]:where(:not([class*=univer-])),input[type=file]:where(:not([class*=univer-])),textarea:where(:not([class*=univer-])),select:where(:not([class*=univer-])){font-family:inherit;font-size:inherit;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-bg-secondary);color:inherit;&:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}}code{background-color:var(--color-border);padding:var(--spacing-xs) var(--spacing-sm);border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-sm)}h1{font-size:var(--font-size-4xl);font-weight:700;margin-bottom:var(--spacing-lg)}h2{font-size:var(--font-size-3xl);font-weight:700;margin-bottom:var(--spacing-lg)}h3{font-size:var(--font-size-2xl);font-weight:600;margin-bottom:var(--spacing-md)}h4{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-sm)}p{margin-bottom:var(--spacing-md);color:var(--color-text-light);&:last-child{margin-bottom:0}}ul{margin-left:var(--spacing-lg);margin-bottom:var(--spacing-md);li{margin-bottom:var(--spacing-sm)}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.muted{color:var(--color-text-light);font-size:var(--font-size-sm)}button.secondary{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}button.secondary:hover{background:var(--color-border)}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.storage-warning,.risk-note,.manual-note{color:#78350f}.storage-warning p,.risk-note p,.manual-note p{color:inherit}