:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#e7ede6;background:#0d211d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 85% 6%,#24443a 0%,transparent 34%),#0d211d}.topbar{height:84px;border-bottom:1px solid #45615966;display:flex;justify-content:space-between;align-items:center;padding:0 max(32px,calc((100vw - 1180px)/2));gap:20px}.brand{border:0;background:none;color:#f1f5ef;font-size:18px;font-weight:800;letter-spacing:.18em;padding:0;display:flex;align-items:center;gap:14px}.brand strong{color:#e9ba79}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d9bb84;border-radius:12px;color:#e9ba79;font-size:26px;font-weight:300;letter-spacing:0}.topbar-end{display:flex;align-items:center;gap:18px}.top-note{color:#a6b9af;font-size:13px;letter-spacing:.04em}.lang-switch{display:inline-flex;border:1px solid #567066;border-radius:8px;overflow:hidden}.lang-switch button{background:transparent;border:0;color:#9fb5a7;padding:8px 12px;font-size:12px;font-weight:700;letter-spacing:.08em}.lang-switch button.active{background:#e6bc80;color:#183129}.lang-switch button:not(.active):hover{color:#f1f5ef;background:#1b382f}.main{width:min(100% - 48px,1040px);margin:0 auto;flex:1;display:flex;align-items:center;padding:70px 0}.hero{max-width:770px}.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#d5ac75;font-weight:700;margin-bottom:26px}h1{font-family:Georgia,Times New Roman,serif;letter-spacing:-.045em;font-weight:400;line-height:1.09;font-size:clamp(52px,7vw,90px);margin:0 0 28px}h1 em{color:#e4b776;font-weight:400}h1 small{font-family:Inter,ui-sans-serif,sans-serif;font-size:.38em;color:#d2af79;letter-spacing:0;margin-left:10px}.hero>p{max-width:570px;font-size:19px;line-height:1.7;color:#aec2b5;margin:0 0 32px}.primary,.secondary{border-radius:8px;padding:16px 22px;border:1px solid #e6bc80;transition:background .15s,transform .15s}.primary:hover,.secondary:hover{transform:translateY(-2px)}.primary{background:#e6bc80;color:#183129;font-weight:700;min-width:228px;display:inline-flex;justify-content:space-between;gap:36px}.primary span{font-size:18px}.secondary{background:transparent;color:#edf2eb;border-color:#728e80}.subtle,.hero .subtle{font-size:13px;color:#849e8f;line-height:1.55;margin-top:22px}.panel{width:100%;max-width:790px}.back{background:none;color:#a7bbae;border:0;padding:0;margin-bottom:42px}.back:hover{color:#fff}.panel h1{font-size:clamp(44px,5.4vw,72px)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:34px 0 36px}.form-grid label{font-size:13px;color:#b6c9bc;display:flex;flex-direction:column;gap:9px}.form-grid select,.form-grid input[type=number]{height:51px;background:#19342d;border:1px solid #506c5b;border-radius:7px;color:#f0f3ed;padding:0 16px;width:100%}.form-grid .check{grid-column:1/-1;flex-direction:row;align-items:center;font-size:15px;gap:11px}.check input{accent-color:#e6bc80;width:18px;height:18px}.recitation .ayah{background:#1c3930;border:1px solid #577466;border-radius:12px;min-height:132px;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px 34px;font-family:Noto Naskh Arabic,Traditional Arabic,Times New Roman,serif;font-size:clamp(28px,3.5vw,40px);line-height:2.1;margin:32px 0}.instructions{color:#b7cbbd;line-height:1.7;max-width:580px;font-size:17px;margin-bottom:28px}.listening{display:flex;align-items:center;gap:20px;background:#1b382f;border:1px solid #536d5e;border-radius:12px;padding:24px;margin:28px 0;max-width:650px}.pulse{width:16px;height:16px;border-radius:100%;background:#e5b976;box-shadow:0 0 0 8px #e5b97622;animation:pulse 1.8s infinite}.listening strong{display:block;font-size:18px}.listening small{display:block;color:#9fb5a7;margin-top:5px}@keyframes pulse{50%{box-shadow:0 0 0 14px #e5b97608}}.notice{border-radius:10px;border:1px solid;padding:20px;margin:18px 0;max-width:710px;display:flex;flex-direction:column;gap:8px}.notice.amber{border-color:#be9a5f;background:#5a492b44;color:#f5d9a8}.notice.red{border-color:#c78175;background:#6b332d77;color:#ffe5df}.notice.help{border-color:#6e9983;background:#285c4666}.notice strong{font-size:18px}.notice span{color:inherit}.notice .expected{font-family:Noto Naskh Arabic,Traditional Arabic,Times New Roman,serif;font-size:26px;line-height:2;padding:10px 0}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 8px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#597063;border:1px solid #597063;border-radius:10px;overflow:hidden;margin:32px 0}.stats>div{background:#19362d;min-height:125px;padding:22px;display:flex;flex-direction:column;justify-content:center}.stats strong{font-size:37px;color:#e7bd81;font-family:Georgia,serif;font-weight:400}.stats span{font-size:13px;color:#b5c6ba;margin-top:7px}.error-banner{position:fixed;bottom:24px;left:24px;right:24px;max-width:700px;margin:auto;background:#773d39;color:#fff2e9;border:1px solid #ca8177;border-radius:8px;padding:16px 46px 16px 18px;z-index:4}.error-banner button{background:none;border:none;color:inherit;font-size:25px;position:absolute;right:12px;top:9px}footer{border-top:1px solid #45615966;padding:24px max(32px,calc((100vw - 1180px)/2));display:flex;justify-content:space-between;gap:20px;color:#7f9b8a;font-size:12px}footer a{color:#b8c8b4;text-decoration:none}@media(max-width:650px){.topbar{height:68px;padding:0 24px}.top-note{display:none}.topbar-end{gap:0}.main{width:min(100% - 40px,1040px);padding:48px 0}.form-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}footer{padding:22px 24px;flex-direction:column}.hero>p{font-size:17px}}.notice-head{display:flex;justify-content:space-between;align-items:center}.badge{font-size:11px;background:#e6bc8033;color:#e6bc80;border:1px solid #e6bc80;padding:2px 8px;border-radius:12px;font-weight:600;text-transform:uppercase}.expected-pill{display:inline-flex;align-items:center;gap:10px;background:#e9ba7926;border:1px solid #d9bb84;border-radius:8px;padding:6px 14px;margin:6px 0;width:fit-content}.pill-label{font-size:12px;color:#d2af79;font-weight:600}.pill-word{font-size:22px;color:#ffd699;font-family:Noto Naskh Arabic,Traditional Arabic,Times New Roman,serif}.highlight-target{background:#e5b976;color:#183129;border-radius:4px;padding:2px 8px;font-weight:700;box-shadow:0 0 12px #e5b97699;display:inline-block}.heard-box{display:block;margin-top:6px;font-size:13px;color:#f8c1ba}.heard-word{font-size:18px;color:#ff9e94;padding:0 4px;font-family:Noto Naskh Arabic,serif}