:root{--bg-main:#f8f4ef;--footer-bg:#8894b7;--text-dark:#24312a;--primary:#fa855a;--primary-dark:#c93638;--accent:#ffde96;--accent-soft:#ffde9659;--card-bg:#fff;--shadow-sm:0 4px 10px #24312a12;--shadow-md:0 14px 30px #24312a1f;--shadow-lg:0 20px 40px #24312a29;--radius:1.5rem}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:radial-gradient(circle at top left, #ffde9673, transparent 35%), radial-gradient(circle at top right, #62c4da2e, transparent 28%), var(--bg-main);color:var(--text-dark);font-family:Nunito,sans-serif;line-height:1.5}h1,h2,h3,h4,h5,h6{letter-spacing:.02em;font-family:Cormorant SC,serif;font-weight:700}a{color:inherit}.header{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);z-index:100;background:#ffffffc7;border-bottom:1px solid #24312a0f;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 2rem;display:flex;position:sticky;top:0}.logo{color:var(--text-dark);align-items:center;gap:.5rem;font-size:1.6rem;font-weight:800;text-decoration:none;display:flex}.logo span:first-child{font-size:1.8rem}.nav-links{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.nav-pill{color:var(--text-dark);background:#ffffffbf;border-radius:999px;padding:.55rem .9rem;font-weight:600;text-decoration:none;transition:transform .2s,background .2s,color .2s}.nav-pill:hover{color:var(--primary-dark);background:#ffde968c;transform:translateY(-1px)}.nav-pill-admin{background:#62c4da2e}.logout-btn{background:var(--primary);color:#fff;cursor:pointer;box-shadow:var(--shadow-sm);border:none;border-radius:999px;padding:.55rem 1rem;font-family:Nunito,sans-serif;font-size:.98rem;font-weight:700;transition:transform .2s,background .2s}.logout-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.hero{max-width:1200px;margin:1.5rem auto 0;padding:4.5rem 2rem 3rem}.hero-content{color:#fff;box-shadow:var(--shadow-lg);text-align:left;background:linear-gradient(135deg,#fa855af2,#c93638f2);border-radius:2rem;padding:3rem;position:relative;overflow:hidden}.hero-content:after{content:"♪";opacity:.08;pointer-events:none;font-size:12rem;position:absolute;bottom:-2rem;right:-1rem}.hero-badge{background:#ffffff2e;border-radius:999px;align-items:center;gap:.4rem;margin-bottom:1rem;padding:.45rem .85rem;font-size:.95rem;font-weight:700;display:inline-flex}.hero h1{max-width:12ch;margin-bottom:1rem;font-size:clamp(2.4rem,4vw,4.1rem);line-height:1}.hero p{opacity:.95;max-width:42rem;margin-bottom:1.8rem;font-size:1.1rem}.hero-actions{flex-wrap:wrap;gap:.9rem;display:flex}.btn-primary,.btn-secondary{border-radius:999px;justify-content:center;align-items:center;padding:.85rem 1.35rem;font-weight:800;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.btn-primary{background:var(--accent);color:var(--text-dark);box-shadow:var(--shadow-sm)}.btn-primary:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-secondary{color:#fff;background:#ffffff24;border:1px solid #ffffff47}.btn-secondary:hover{background:#ffffff38;transform:translateY(-2px)}.about,.exercises{max-width:1200px;margin:0 auto;padding:1.5rem 2rem 3rem}.about{margin-top:.5rem}.section-head{margin-bottom:1.5rem}.section-head.centered{text-align:center}.section-kicker{letter-spacing:.08em;text-transform:uppercase;color:var(--primary-dark);margin-bottom:.6rem;font-size:.9rem;font-weight:800;display:inline-block}.section-head h2{max-width:20ch;font-size:clamp(1.8rem,2.5vw,2.7rem);line-height:1.1}.section-head.centered h2{margin:0 auto}.about-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.about-card{border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fffc;border:1px solid #24312a0f;padding:1.2rem 1.15rem}.about-card h3{color:var(--primary-dark);margin-bottom:.45rem;font-size:1.4rem}.about-card p{color:#24312acc}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.card-link{color:inherit;text-decoration:none;display:block}.card-link-disabled{cursor:default}.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-md);border:1px solid #24312a0f;min-height:180px;padding:1.35rem;transition:transform .22s,box-shadow .22s,border-color .22s;position:relative}.card:hover{box-shadow:var(--shadow-lg);border-color:#fa855a38;transform:translateY(-4px)}.card-top{align-items:flex-start;gap:.95rem;display:flex}.card-icon{background:linear-gradient(135deg,#ffde968c,#62c4da40);border-radius:1rem;flex:none;place-items:center;width:3.2rem;height:3.2rem;font-size:1.65rem;display:grid}.card-title-wrap h3{margin-bottom:.25rem;font-size:1.6rem}.card-title-wrap p{color:#24312abd}.card-bottom{flex-direction:column;gap:.65rem;margin-top:1.2rem;display:flex}.card-link-text{color:var(--primary-dark);font-weight:700}.card-badge{color:#7b4a00;background:#ffde968c;border-radius:999px;align-items:center;width:fit-content;padding:.35rem .65rem;font-size:.85rem;font-weight:700;display:inline-flex}.footer{color:#fff;background:linear-gradient(135deg,#8894b7,#4ea8be);margin-top:2rem;padding:1.5rem 2rem}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:1200px;margin:0 auto;display:flex}.footer-brand{max-width:520px}.footer-logo{margin-bottom:.35rem;font-size:1.4rem;font-weight:800}.footer-brand p{opacity:.95}.footer-meta{text-align:right;flex-direction:column;gap:.3rem;display:flex}.footer-meta a{color:#fff;font-weight:700;text-decoration:none}.footer-meta a:hover{text-decoration:underline}.profile-page{min-height:100vh;padding:2rem}.profile-container{max-width:900px;margin:0 auto}.profile-header h1{margin-bottom:1.5rem;font-size:2.5rem}.profile-card{border-radius:var(--radius);box-shadow:var(--shadow-md);background:#fff;margin-bottom:1.5rem;padding:2rem}.profile-card h2{color:var(--primary-dark);margin-bottom:1.5rem}.profile-field{margin-bottom:1.5rem}.profile-field label{margin-bottom:.5rem;font-weight:700;display:block}.profile-inline{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.profile-input{border:1px solid #ddd;border-radius:12px;flex:1;padding:.8rem 1rem}.readonly-box{background:#f3f3f3;border-radius:12px;flex:1;padding:.8rem 1rem}.link-btn{color:var(--primary);cursor:pointer;background:0 0;border:none;font-weight:700}.btn-save,.btn-cancel{cursor:pointer;color:#fff;border:none;border-radius:12px;padding:.8rem 1rem}.btn-save{background:var(--primary)}.btn-cancel{background:#999}.profile-message{border-radius:12px;margin-bottom:1rem;padding:1rem}.profile-message-success{background:#dff7df}.profile-message-error{background:#ffe3e3}.progress-list{flex-direction:column;gap:1.2rem;display:flex}.progress-head{justify-content:space-between;margin-bottom:.4rem;display:flex}.progress-bar{background:#eee;border-radius:999px;height:12px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary), var(--accent));height:100%}.progress-date{color:#777;margin-top:.3rem;font-size:.85rem}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.auth-card{border-radius:var(--radius);width:100%;max-width:430px;box-shadow:var(--shadow-lg);background:#fff;padding:2rem}.auth-card h2{text-align:center;margin-bottom:1rem}.auth-switch{text-align:center;margin-bottom:1.5rem}.auth-switch button{color:var(--primary);cursor:pointer;background:0 0;border:none;font-weight:700}.auth-form label{margin-bottom:.4rem;font-weight:600;display:block}.auth-form input{border:1px solid #ddd;border-radius:12px;width:100%;margin-bottom:1rem;padding:.85rem 1rem}.auth-submit{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;padding:.95rem;font-weight:700}.auth-error{background:#ffe3e3;border-radius:12px;margin-bottom:1rem;padding:.8rem}.exercise-page{min-height:100vh;padding:2rem}.exercise-container{width:100%;max-width:1600px;margin:0 auto}.exercise-title{color:var(--text-dark);margin-bottom:1.5rem;font-size:2.4rem}.exercise-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-md);background:#ffffffd1;border-radius:2rem;padding:2rem}.exercise-tabs{flex-wrap:wrap;gap:1rem;margin-bottom:2rem;display:flex}.exercise-tab,.exercise-tab-disabled{border:none;border-radius:999px;padding:.8rem 1.2rem;font-family:Nunito;font-weight:700}.exercise-tab{cursor:pointer;background:#fff}.exercise-tab:hover{background:var(--accent-soft)}.exercise-tab-active{background:var(--primary);color:#fff}.exercise-tab-disabled{opacity:.5;cursor:not-allowed;background:#ececec}.exercise-level{color:var(--primary-dark);margin-bottom:1rem;font-size:1.1rem;font-weight:700}.level-btn{cursor:pointer;box-shadow:var(--shadow-sm);background:#fff;border:none;border-radius:1rem;margin:.4rem;padding:.9rem 1.4rem;font-weight:700}.level-btn-active{background:var(--primary);color:#fff}.play-btn{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;cursor:pointer;border:none;border-radius:999px;padding:1rem 1.8rem;font-weight:700}.answer-btn{text-align:left;box-shadow:var(--shadow-sm);cursor:pointer;background:#fff;border:none;border-radius:1rem;margin:.4rem;padding:1rem}.answer-btn:hover{transform:translateY(-2px)}.answer-btn-active{background:var(--accent)}.feedback-box{background:var(--accent-soft);text-align:center;border-radius:1rem;padding:1rem;font-weight:700}.primary-btn,.secondary-btn{cursor:pointer;border:none;border-radius:999px;padding:1rem 1.5rem;font-weight:700}.primary-btn{background:var(--primary);color:#fff}.secondary-btn{box-shadow:var(--shadow-sm);background:#fff}.piano-wrapper{background:#ffffffa6;border:1px solid #24312a0f;border-radius:1.5rem;margin-bottom:2rem;padding:1.5rem}.admin-page{min-height:100vh;padding:2rem}.admin-container{max-width:1200px;margin:0 auto}.admin-title{margin-bottom:.5rem;font-size:2.5rem}.admin-subtitle{color:#24312ab3;margin-bottom:2rem}.admin-block input,.admin-block textarea{background:#ffffffe6;border:1px solid #24312a1f;border-radius:12px;outline:none;width:100%;margin-bottom:.9rem;padding:.9rem 1rem;font-family:Nunito,sans-serif;font-size:.95rem;transition:all .2s}.admin-block input:focus,.admin-block textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #fa855a26}.admin-block button{cursor:pointer;background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);border:none;border-radius:999px;justify-content:center;align-items:center;padding:.9rem 1.4rem;font-family:Nunito,sans-serif;font-weight:700;transition:all .2s;display:inline-flex}.admin-block button:hover{background:var(--primary-dark);box-shadow:var(--shadow-md);transform:translateY(-2px)}.admin-block .user-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid #24312a14;align-items:center;margin-top:1rem;padding:1rem 1.2rem;transition:all .2s}.admin-block .user-card:hover{box-shadow:var(--shadow-md);border-color:#fa855a33;transform:translateY(-2px)}.admin-block .user-card h3{color:var(--primary-dark);margin-bottom:.3rem;font-size:1.2rem}.admin-block .user-card p{opacity:.75;font-size:.9rem}.admin-block .user-card button{border-radius:999px;margin-left:.5rem;padding:.5rem .9rem;font-size:.85rem}.admin-block .user-card button:last-child{color:var(--primary-dark);box-shadow:none;background:#c936381a}.admin-block .user-card button:last-child:hover{background:#c9363833;transform:none}.theory-submit-btn{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;cursor:pointer;box-shadow:var(--shadow-sm);border:none;border-radius:999px;justify-content:center;align-items:center;margin-bottom:1.5rem;padding:.9rem 1.4rem;font-family:Nunito,sans-serif;font-weight:700;transition:all .2s;display:inline-flex}.theory-submit-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.admin-list{flex-direction:column;gap:1rem;display:flex}.user-card{border:1px solid #eee;border-radius:1rem;justify-content:space-between;padding:1rem;display:flex}.user-name{font-weight:700}.user-email{color:gray;font-size:.9rem}.user-role{opacity:.7;font-size:.8rem}.user-meta{text-align:right;font-size:.9rem}.admin-grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}.module-card{border:1px solid #eee;border-radius:1rem;padding:1rem}.admin-loading,.admin-denied{justify-content:center;align-items:center;min-height:100vh;display:flex}.admin-denied-box{border-radius:var(--radius);box-shadow:var(--shadow-md);text-align:center;background:#fff;padding:2rem}.admin-denied-box button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:999px;margin-top:1rem;padding:.7rem 1.2rem}.theory-page{background:var(--bg-main);min-height:100vh;color:var(--text-dark);padding:60px 20px}.theory-container{max-width:1000px;margin:0 auto}.theory-title{color:var(--text-dark);margin-bottom:30px;font-size:42px}.theory-empty{opacity:.6;font-size:18px}.theory-grid{gap:20px;display:grid}.theory-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-md);border:1px solid #24312a0f;padding:24px;transition:all .25s}.theory-card:hover{box-shadow:var(--shadow-lg);border-color:#fa855a40;transform:translateY(-4px)}.theory-card-header h2{color:var(--primary-dark);margin-bottom:8px;font-size:24px}.theory-desc{opacity:.75;margin-bottom:12px;font-size:14px}.theory-content{color:#24312ae6;font-size:15px;line-height:1.7}.theory-content p{margin-bottom:10px}@media (max-width:900px){.about-grid,.card-grid{grid-template-columns:1fr}.hero-content{padding:2rem}}@media (max-width:768px){.header{text-align:center;flex-direction:column}.nav-links{justify-content:center}.hero{padding:1rem 1rem 2rem}.hero-content{text-align:center}.hero-actions{justify-content:center}.about,.exercises{padding:1rem 1rem 2rem}.footer-content{text-align:center;flex-direction:column}.footer-meta{text-align:center}}