:root{--bg:#07131f;--panel:#0d2234;--panel2:#112b40;--text:#f3f7f8;--muted:#a7bbc8;--accent:#46d8bb;--accent2:#79aefc;--danger:#ef6f76;--line:#24445a}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% 0,#123c50 0,transparent 34%),var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.hidden{display:none!important}.appHeader{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:15px max(18px,env(safe-area-inset-right)) 15px max(18px,env(safe-area-inset-left));background:#07131fe8;border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.roleBadge{margin-left:10px;padding:4px 9px;border-radius:99px;background:#18384c;color:var(--accent);font-size:.76rem}.appShell{width:min(900px,100%);margin:auto;padding:22px 18px calc(36px + env(safe-area-inset-bottom))}.heroCard,.panel,.translationCard,.loginCard{border:1px solid var(--line);background:linear-gradient(145deg,#10283b,#091a29);border-radius:22px;padding:clamp(20px,4vw,34px);box-shadow:0 20px 55px #0006;margin-bottom:20px}.heroCard h1{font-size:clamp(1.8rem,6vw,3.2rem);line-height:1.06;margin:.35rem 0 1rem}.eyebrow,.translationLabel{letter-spacing:.14em;color:var(--accent);font-weight:800;font-size:.75rem}.statusText{font-size:1.1rem;color:var(--muted)}button,input{font:inherit}.primaryButton,.dangerButton,.quietButton,.inlineForm button{border:0;border-radius:15px;padding:15px 20px;font-weight:800;cursor:pointer}.primaryButton{background:var(--accent);color:#03261e}.dangerButton{background:var(--danger);color:#270508}.quietButton{background:#17354a;color:var(--text)}button:disabled{opacity:.45;cursor:not-allowed}.bigActions{display:grid;gap:12px;margin-top:20px}.bigActions button{min-height:62px;font-size:1.08rem}.roomCode{color:var(--accent2);overflow-wrap:anywhere}.meter{height:9px;background:#07131f;border-radius:99px;overflow:hidden;margin-top:15px}.meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#f3cb64);transition:width .08s}.panel h2{margin-top:0}.muted{color:var(--muted)}.inlineForm{display:flex;gap:10px}.inlineForm input{min-width:0;flex:1;border:1px solid var(--line);border-radius:14px;background:#071722;color:var(--text);padding:14px}.inlineForm button{background:var(--accent2);color:#07131f}.translationCard{background:linear-gradient(145deg,#f4ead5,#dcbf8a);color:#23180b}.translationLabel{color:#77500c}.arabicText{font-family:"Noto Naskh Arabic","Geeza Pro","Arial",sans-serif;font-size:clamp(2rem,7vw,3.8rem);line-height:1.55;text-align:right;margin:20px 0}.englishText{font-size:1.05rem}.chatLog{min-height:130px;max-height:300px;overflow:auto;border:1px solid var(--line);background:#06131e;border-radius:14px;padding:12px;margin-bottom:12px}.chatMessage{padding:10px 12px;margin:7px 0;border-radius:13px;background:#153448}.chatMessage.self{background:#1d554c}.chatAuthor{font-size:.74rem;color:var(--accent);font-weight:800}.errorText{color:#ff9fa4;min-height:1.4em}.loginBody{display:grid;place-items:center;padding:20px}.loginCard{width:min(430px,100%)}.brandMark{width:66px;height:66px;display:grid;place-items:center;border-radius:20px;background:var(--accent);color:#063027;font-size:2.3rem;font-weight:900}.loginCard label{display:grid;gap:7px;margin:15px 0;color:var(--muted)}.loginCard input{width:100%;padding:15px;border:1px solid var(--line);border-radius:13px;background:#06131e;color:var(--text)}.loginCard .primaryButton{width:100%;margin-top:8px}.loginCard h1{margin-bottom:0}@media(max-width:600px){.appShell{padding-inline:12px}.heroCard,.panel,.translationCard{border-radius:18px;padding:20px 16px}.inlineForm{flex-direction:column}.inlineForm button{min-height:50px}.appHeader{padding-inline:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}