:root { --navy:#0b1640; --navy2:#142257; --brand:#1fd27a; --lime:#b8f25a; --text:#eef2ff; --muted:#9aa6d1; --warn:#ffb454; --bad:#ff6b6b; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--navy); color:var(--text); font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Ethiopic", "Nyala", sans-serif; }
body { min-height:100dvh; display:flex; flex-direction:column; }
header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; gap:12px; }
header .logo { font-weight:800; font-size:20px; letter-spacing:.3px; }
header .logo span { background:linear-gradient(135deg,var(--lime),var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent; }
header select { background:var(--navy2); color:var(--text); border:1px solid #2a3a7a; border-radius:8px; padding:6px 8px; font-size:14px; }
main { flex:1; width:100%; max-width:640px; margin:0 auto; padding:8px 16px 32px; }
.card { background:var(--navy2); border:1px solid #24347a; border-radius:16px; padding:18px; margin-top:12px; }
h1 { font-size:22px; margin:8px 0; } h2 { font-size:17px; margin:0 0 8px; }
p { line-height:1.55; } .muted { color:var(--muted); font-size:14px; }
label { display:block; font-size:14px; color:var(--muted); margin:12px 0 4px; }
input[type=text], select.field, textarea { width:100%; padding:11px 12px; border-radius:10px; border:1px solid #2a3a7a; background:var(--navy); color:var(--text); font-size:16px; }
.check { display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:15px; color:var(--text); }
.check input { width:22px; height:22px; margin-top:2px; flex:none; }
button { font:inherit; border:0; border-radius:12px; padding:13px 18px; font-weight:700; cursor:pointer; min-height:48px; }
button:disabled { opacity:.45; cursor:not-allowed; }
.primary { background:linear-gradient(135deg,var(--lime),var(--brand)); color:#06210f; }
.ghost { background:transparent; color:var(--text); border:1px solid #33459a; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; } .row > button { flex:1; }
.tabs { display:flex; gap:8px; margin-top:12px; } .tabs button { flex:1; padding:10px; min-height:44px; background:var(--navy2); color:var(--muted); border:1px solid #24347a; }
.tabs button.on { color:var(--text); border-color:var(--brand); }
.prompt { font-size:24px; line-height:1.6; margin:6px 0 2px; overflow-wrap:anywhere; }
.tag { display:inline-block; font-size:12px; color:var(--muted); border:1px solid #2a3a7a; border-radius:999px; padding:2px 10px; }
.rec { width:92px; height:92px; border-radius:50%; background:var(--bad); color:#fff; font-size:15px; display:block; margin:18px auto 6px; box-shadow:0 0 0 6px rgba(255,107,107,.18); }
.rec.on { background:#fff; color:var(--bad); animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 14px rgba(255,107,107,.08); } }
@media (prefers-reduced-motion: reduce) { .rec.on { animation:none; } }
.meter { height:8px; background:var(--navy); border-radius:99px; overflow:hidden; margin-top:10px; } .meter i { display:block; height:100%; width:0; background:var(--brand); }
.center { text-align:center; } audio { width:100%; margin-top:12px; }
.msg { margin-top:12px; padding:10px 12px; border-radius:10px; font-size:15px; }
.msg.warn { background:rgba(255,180,84,.12); color:var(--warn); } .msg.bad { background:rgba(255,107,107,.12); color:var(--bad); } .msg.ok { background:rgba(31,210,122,.12); color:var(--brand); }
.stats { display:flex; gap:16px; font-size:14px; color:var(--muted); margin-top:10px; } .stats b { color:var(--text); }
.consent { max-height:42dvh; overflow:auto; background:var(--navy); border-radius:10px; padding:12px 14px; font-size:15px; }
table { width:100%; border-collapse:collapse; font-size:14px; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid #24347a; } .scroll { overflow-x:auto; }
[hidden] { display:none !important; }