.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#fff;padding:1.5rem 2rem;border-bottom:1px solid var(--color-border);box-shadow:0 2px 4px #0000000d;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.app-header h1{font-size:1.75rem;font-weight:600;color:var(--color-heading);margin-bottom:.25rem}.app-header p{font-size:.9rem;color:var(--color-muted)}.app-nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.app-nav a,.app-nav button{border:1px solid var(--color-border);background:#fff;color:var(--color-heading);border-radius:6px;padding:.5rem .75rem;font-size:.85rem;font-weight:500;text-decoration:none;cursor:pointer}.app-nav a:hover,.app-nav button:hover{border-color:var(--color-primary);color:var(--color-primary)}.app-main{flex:1;padding:2rem;max-width:1200px;width:100%;margin:0 auto}@media(max-width:640px){.app-header{padding:1rem 1.5rem}.app-header h1{font-size:1.5rem}.app-main{padding:1.5rem}}.home{display:grid}.home h2{font-size:1.5rem;font-weight:600;color:var(--color-heading);margin-bottom:.25rem}.home .subtitle{color:var(--color-muted);margin-bottom:1rem}.home .course-direction{color:var(--color-primary-hover);font-size:.8rem;font-weight:600;letter-spacing:.02em;margin-bottom:.5rem}.placeholder-card{background:#fff;border:1px solid var(--color-border);border-radius:8px;padding:1.25rem;box-shadow:0 2px 4px #0000000d;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;height:100%}.home .placeholder-card{max-width:40rem}.placeholder-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.placeholder-card p{color:var(--color-muted);margin-bottom:.625rem;line-height:1.4;font-size:.95rem}.btn-start{background:var(--color-primary);color:#fff;border:none;display:inline-block;padding:.625rem 1.25rem;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;text-align:center;text-decoration:none;transition:background .2s;width:100%}.btn-start:hover{background:var(--color-primary-hover)}.btn-start:active{transform:scale(.98)}.home-actions{display:grid;gap:.625rem}.home-continue{border:1px solid var(--color-border);border-radius:8px;display:grid;gap:.75rem;padding:.875rem}.home-continue span,.home-continue small{color:var(--color-muted);display:block;font-size:.8rem;line-height:1.3}.home-continue strong{color:var(--color-heading);display:block;font-size:1rem;line-height:1.35;margin:.125rem 0}.home-continue-actions{display:grid;gap:.5rem}.btn-start-secondary{background:#fff;border:1px solid var(--color-border);color:var(--color-primary-hover)}.btn-start-secondary:hover{background:var(--color-surface)}.home-progress{border-top:1px solid var(--color-border);display:grid;gap:.5rem;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem;padding-top:1rem}.home-progress div{display:grid;gap:.25rem;min-width:0}.home-progress span{color:var(--color-muted);font-size:.75rem;line-height:1.2}.home-progress strong{color:var(--color-heading);font-size:1.1rem;line-height:1}.home-last-practiced{border-top:1px solid var(--color-border);margin-top:1rem;padding-top:.75rem}.option-grid{display:grid;gap:.75rem}@media(max-width:520px){.home-progress{grid-template-columns:1fr}}.courses-page{display:grid;gap:1.5rem}.courses-page h2{font-size:1.5rem;font-weight:600;color:var(--color-heading);margin-bottom:.25rem}.courses-subtitle{color:var(--color-muted);max-width:40rem}.courses-section{display:grid;gap:1rem}.courses-section-title{font-size:1.15rem;font-weight:600;color:var(--color-heading);margin-bottom:.25rem}.course-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.course-card,.course-placeholder-card{background:#fff;border:1px solid var(--color-border);border-radius:8px;padding:1.25rem;box-shadow:0 2px 4px #0000000d;display:flex;flex-direction:column;gap:.75rem}.course-card{transition:transform .2s,box-shadow .2s}.course-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.course-card-disabled{opacity:.65}.course-card-disabled:hover{transform:none;box-shadow:0 2px 4px #0000000d}.course-placeholder-card{max-width:40rem}.course-direction{color:var(--color-primary-hover);font-size:.8rem;font-weight:600;letter-spacing:.02em}.pair-status{color:var(--color-muted);font-size:.8rem;font-weight:600}.theme-order,.lesson-order,.lesson-context{color:var(--color-primary-hover);font-size:.8rem;font-weight:600;letter-spacing:.02em}.course-card h3{font-size:1.15rem;font-weight:600;color:var(--color-heading)}.course-card p,.course-placeholder-card p{color:var(--color-muted);line-height:1.4;font-size:.95rem}.course-actions,.lesson-actions{max-width:16rem}.lesson-actions{display:grid;gap:.75rem}.course-link{background:var(--color-primary);color:#fff;display:inline-block;padding:.625rem 1.25rem;border-radius:6px;font-size:.9rem;font-weight:500;text-align:center;text-decoration:none;transition:background .2s;width:100%;margin-top:auto}.course-link-compact{width:auto}.course-link-secondary{background:var(--color-secondary)}.course-link:hover{background:var(--color-primary-hover)}.course-link:disabled{background:var(--color-disabled);cursor:not-allowed}.course-link:disabled:hover{background:var(--color-disabled)}.course-link-secondary:hover{background:var(--color-secondary-hover)}.course-link:active{transform:scale(.98)}.review-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.review-group{display:grid;gap:.75rem}.review-empty-due,.review-item-stats{color:var(--color-muted);font-size:.9rem}.review-item-why{color:var(--color-heading);font-size:.9rem;font-weight:600}.account-field{display:grid;gap:.35rem}.account-field span{color:var(--color-muted);font-size:.85rem;font-weight:600}.account-field input{border:1px solid var(--color-border);border-radius:6px;color:var(--color-heading);font-size:1rem;padding:.625rem .75rem}:root{--color-text: #333333;--color-heading: #2c3e50;--color-muted: #5f6f70;--color-subtle: #627176;--color-border: #e0e0e0;--color-primary: #1f6fb2;--color-primary-hover: #1b6aa8;--color-success: #1d7f45;--color-success-hover: #17673a;--color-success-strong: #166534;--color-danger: #b9382a;--color-danger-strong: #9f2d22;--color-secondary: #627176;--color-secondary-hover: #556569;--color-warning: #a85f00;--color-warning-hover: #8f5000;--color-disabled: #68757a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5;color:var(--color-text)}#root{min-height:100vh}