:root{--bg: #0b1220;--bg-elevated: #111a2b;--surface: #162033;--border: #243247;--text: #e8eef7;--muted: #93a4bc;--accent: #34d399;--accent-strong: #10b981;--accent-soft: rgba(52, 211, 153, .14);--danger: #f87171;--shadow: 0 12px 28px rgba(2, 8, 20, .4);--font-latin: "Figtree", "Avenir Next", "Segoe UI", sans-serif;--font-rtl: "Vazirmatn", "Noto Sans Arabic", "Tahoma", sans-serif;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px);color-scheme:dark;font-family:var(--font-latin);line-height:1.45;font-weight:500;color:var(--text);background:radial-gradient(120% 80% at 50% -10%,rgba(16,185,129,.16),transparent 55%),linear-gradient(180deg,#0d1524 0%,var(--bg) 42%,#070d18 100%);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}html[lang=fa],html[lang=ar],html[dir=rtl]{font-family:var(--font-rtl)}html[dir=ltr]{font-family:var(--font-latin);direction:ltr}html[dir=rtl]{direction:rtl}*{box-sizing:border-box}html,body,#root{height:100%;height:100dvh;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}body{position:fixed;top:0;right:0;bottom:0;left:0;width:100%}button,input{font:inherit}.app-shell{height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;padding:calc(10px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}.brand{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0;font-weight:700}html[dir=rtl] .brand{letter-spacing:0;text-transform:none;font-size:.86rem}.lang-switch{display:inline-flex;padding:2px;border-radius:999px;border:1px solid var(--border);background:#080e1ab3}.lang-switch button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--muted);border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:700;cursor:pointer;min-width:34px}.lang-switch button.active{background:var(--accent-soft);color:var(--accent)}.progress{display:flex;gap:5px;margin:10px 0 8px;flex-shrink:0}.progress span{flex:1;height:3px;border-radius:999px;background:#1c2940}.progress span.on{background:linear-gradient(90deg,var(--accent-strong),var(--accent))}html[dir=rtl] .progress span.on{background:linear-gradient(270deg,var(--accent-strong),var(--accent))}.step-header{flex-shrink:0;margin-bottom:8px}.step-title{margin:0;font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}html[dir=rtl] .step-title{letter-spacing:0;font-size:1.12rem}.step-copy{margin:4px 0 0;color:var(--muted);font-size:.84rem;line-height:1.4}html[dir=rtl] .step-copy{font-size:.88rem;line-height:1.55}.meta-chip{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.02em}.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#162033f2,#0e1624fa);border:1px solid var(--border);border-radius:16px;padding:8px;box-shadow:var(--shadow);overflow:hidden}.panel.panel-scroll{overflow:hidden}.preview-wrap{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;border-radius:12px;background:#050a12;border:1px solid #1d2a3f}.preview-wrap video,.preview-wrap canvas{width:100%;height:100%;object-fit:cover;display:block;background:#050a12}.preview-wrap.user-facing video{transform:scaleX(-1)}.guide{position:absolute;top:9%;right:11%;bottom:9%;left:11%;border:1.5px dashed rgba(52,211,153,.6);border-radius:16px;pointer-events:none;box-shadow:inset 0 0 0 9999px #02081429}.guide.oval{top:12%;right:18%;bottom:12%;left:18%;border-radius:50%}.guide-overlay{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;pointer-events:none;padding:8px 10px;border-radius:12px;background:#050a12b8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d7ffe9;font-size:.8rem;font-weight:600;line-height:1.35;text-align:center}.guide-overlay strong{color:var(--accent);font-weight:700}.challenge-badge{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#050a12c7;border:1px solid rgba(52,211,153,.35);color:var(--accent);font-size:.74rem;font-weight:700;white-space:nowrap;max-width:calc(100% - 20px)}html[dir=rtl] .challenge-badge{font-weight:600}.tips-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;flex-shrink:0}.tip-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;border:1px solid var(--border);background:#080e1aa6;color:var(--muted);font-size:.7rem;font-weight:600}.footer{flex-shrink:0;margin-top:10px;display:grid;gap:8px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:14px;padding:13px 14px;font-weight:700;cursor:pointer;transition:transform .12s ease,opacity .12s ease,background .12s ease}html[dir=rtl] .btn{font-weight:600}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.98)}.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-strong));color:#042016}.btn-secondary{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(52,211,153,.28)}.status{padding:9px 11px;border-radius:12px;background:#0f172abf;border:1px solid var(--border);color:var(--muted);font-size:.8rem;line-height:1.4;max-height:4.2em;overflow:hidden}html[dir=rtl] .status{line-height:1.55}.status.error{color:#fecaca;border-color:#f8717159;background:#7f1d1d40}.status.ok{color:#bbf7d0;border-color:#34d39959;background:var(--accent-soft)}.consent-box{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;white-space:pre-wrap;color:var(--text);font-size:.88rem;line-height:1.55;padding:4px 2px}html[dir=rtl] .consent-box{font-size:.92rem;line-height:1.7;text-align:justify}.spinner{width:28px;height:28px;border-radius:50%;border:2px solid rgba(148,163,184,.25);border-top-color:var(--accent);animation:spin .8s linear infinite;margin:0 auto 12px}@keyframes spin{to{transform:rotate(360deg)}}.center{flex:1;display:grid;place-items:center;text-align:center;padding:16px 8px;min-height:0}.record-pulse{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:10px;height:10px;border-radius:50%;background:#f87171;box-shadow:0 0 #f871718c;animation:pulse 1.1s ease-out infinite}@keyframes pulse{70%{box-shadow:0 0 0 10px #f8717100}to{box-shadow:0 0 #f8717100}}