:root{
  --ink:#171a21; --muted:#5b616e; --line:#dfe2e8; --accent:#1f6feb;
  --accent-dark:#1552b8; --danger:#c0392b; --bg:#f5f6f8; --card:#fff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{max-width:480px;margin:0 auto;padding:40px 20px}
h1{font-size:1.4rem;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 28px;font-size:.92rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 10px 30px rgba(20,22,30,.05);margin-bottom:20px}
.card:last-child{margin-bottom:0}

/* Prompt type selector (its own card, always visible) */
select#promptTypeFilter{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:1rem;background:#fff}
select#promptTypeFilter:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

/* Prompt card */
.prompt-head{margin-bottom:10px}
.prompt-category{display:inline-block;background:#eef3ff;color:var(--accent-dark);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:999px;margin-bottom:6px}
.prompt-title{font-size:1.05rem;margin:4px 0 0}
.prompt-instructions{color:var(--muted);font-size:.85rem;margin:0 0 14px}
.prompt-body{margin-bottom:14px}
.prompt-text{font-size:1rem;line-height:1.55;margin:0}
.prompt-media{width:100%;border-radius:10px;display:block;background:#000}
/* .prompt-media's own "display:block" above is an author rule, so it beats
   the browser's built-in "[hidden]{display:none}" rule even while the
   element has the hidden attribute — without this, an image set to
   hidden="true" by recorder.js still renders. This restores the hide. */
.prompt-media[hidden]{display:none}
img.prompt-media{background:#eee}
label{display:block;font-weight:600;font-size:.85rem;margin-bottom:6px}
input[type=tel]{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:1rem;margin-bottom:20px}
input[type=tel]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.rec-row{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.rec-btn{
  border:0;width:64px;height:64px;border-radius:50%;cursor:pointer;
  background:var(--danger);color:#fff;font-size:1.4rem;display:grid;place-items:center;
  transition:transform .15s, background .15s; flex:none;
}
.rec-btn:hover{transform:scale(1.04)}
.rec-btn[disabled]{background:#bbb;cursor:not-allowed;transform:none}
.rec-btn.recording{background:var(--ink)}
.timer{font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:700}
.limit{color:var(--muted);font-size:.8rem}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:14px 0 18px}
.bar-fill{height:100%;width:0%;background:var(--accent);transition:width .2s linear}
.bar-fill.danger{background:var(--danger)}
audio{width:100%;margin:10px 0 18px}
.actions{display:flex;gap:10px}
button.primary{
  flex:1;padding:12px 14px;border:0;border-radius:9px;background:var(--accent);color:#fff;
  font-weight:700;font-size:.95rem;cursor:pointer;
}
button.primary:hover{background:var(--accent-dark)}
button.primary[disabled]{background:#9db9e8;cursor:not-allowed}
button.ghost{
  padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-weight:600;font-size:.95rem;cursor:pointer;
}
.status{margin-top:16px;font-size:.88rem;padding:11px 13px;border-radius:9px;display:none}
.status.show{display:block}
.status.ok{background:#e8f6ec;color:#1b6b34;border:1px solid #bfe6cb}
.status.err{background:#fcebe9;color:#9a2e22;border:1px solid #f3c6c0}
.hint{color:var(--muted);font-size:.78rem;margin-top:18px;line-height:1.5}