:root { color-scheme: light; --ink:#263238; --paper:#f4f0e8; --card:#fffdf8; --blue:#245b83; --blue2:#dcecf7; --line:#ded8cc; --red:#a63232; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.app { width:min(720px,100%); margin:0 auto; padding:16px 16px 32px; }
header { display:flex; align-items:center; justify-content:space-between; min-height:54px; margin-bottom:14px; }
.brand { font-size:1.25rem; font-weight:800; letter-spacing:-.03em; }
.who { font-size:.95rem; font-weight:650; color:#53616a; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:0 3px 14px #4030200d; }
h1 { font-size:1.45rem; margin:0 0 12px; }
h2 { font-size:1.2rem; margin:0; }
p { line-height:1.4; }
.profiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.profile { min-height:76px; border:2px solid var(--line); background:white; border-radius:18px; font-size:1.05rem; font-weight:700; padding:10px; }
.profile.selected { border-color:var(--blue); background:var(--blue2); }
.pin-label { display:block; font-weight:650; margin:12px 0 6px; }
input { width:100%; border:2px solid var(--line); border-radius:14px; padding:14px; font-size:1.2rem; letter-spacing:.2em; }
button { border:0; border-radius:18px; min-height:58px; padding:12px 18px; font:inherit; font-weight:750; cursor:pointer; touch-action:manipulation; }
button:disabled { opacity:.45; }
.primary { width:100%; margin-top:12px; color:white; background:var(--blue); }
.secondary { color:var(--ink); background:#e9e4da; }
.small { min-height:44px; padding:8px 14px; border-radius:14px; }
.error { color:var(--red); min-height:1.3em; font-weight:650; }
.recorder { text-align:center; }
.recorder h1 { margin-bottom:4px; }
.timer { font-variant-numeric:tabular-nums; font-size:2rem; font-weight:800; margin:14px 0; }
.record { width:180px; height:180px; border-radius:50%; background:#b63d36; color:white; font-size:1.45rem; border:10px solid #f4d7d1; }
.record.recording { background:#7f1f1f; border-color:#e8b4ad; }
audio { display:block; width:100%; margin:18px 0 4px; }
.actions { display:grid; gap:8px; margin-top:12px; }
.messages { margin-top:24px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.message-list { display:grid; gap:10px; }
.message { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; }
.message-top { display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; }
.sender { font-weight:800; }
.meta { color:#68757c; font-size:.85rem; text-align:right; }
.play { width:100%; background:var(--blue2); color:#173e5b; }
.unread { border-left:6px solid var(--blue); }
.empty { text-align:center; padding:24px 12px; color:#647078; background:#ffffff80; border-radius:18px; }
.logout { width:100%; margin-top:22px; background:transparent; color:#53616a; border:1px solid var(--line); }
[hidden] { display:none !important; }
@media (max-width:380px) { .app { padding:10px; } .panel { padding:16px; } .record { width:160px; height:160px; } }