* { box-sizing: border-box; }
:root { --pri:#6d5dfc; --pri-d:#5a4be0; --bg:#f6f6fb; --ink:#1a1a2e; --mut:#7b7b8a; --line:#e6e6ee; }
body { font-family: system-ui,-apple-system,sans-serif; margin:0; background:var(--bg); color:var(--ink); }
.wrap { max-width:760px; margin:0 auto; padding:28px 18px 60px; }
h1 { font-size:22px; display:flex; align-items:center; gap:8px; }
.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 1px 4px rgba(20,20,50,.05); margin-bottom:16px; }
label { display:block; font-size:13px; font-weight:600; margin:12px 0 5px; }
input,select,textarea { width:100%; padding:11px 13px; border:1px solid #d6d6e0; border-radius:11px; font:inherit; font-size:14px; background:#fff; }
textarea { min-height:130px; resize:vertical; }
button { background:var(--pri); color:#fff; border:0; border-radius:11px; padding:11px 18px; font-size:14px; font-weight:600; cursor:pointer; transition:.15s; }
button:hover:not(:disabled){ background:var(--pri-d); }
button:disabled { opacity:.5; cursor:default; }
button.ghost { background:#eee; color:#444; }
button.danger { background:#fde8e8; color:#c0392b; }
button.danger:hover { background:#f8d4d4; }
.row { display:flex; gap:12px; } .row>div{ flex:1; }
.tabs { display:flex; gap:8px; margin:18px 0; }
.tab { flex:1; text-align:center; padding:11px; border-radius:11px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:600; font-size:14px; color:var(--mut); }
.tab.active { background:var(--pri); color:#fff; border-color:var(--pri); }
.hidden { display:none; }
.err { color:#c0392b; font-size:13px; margin-top:8px; }
.muted { color:var(--mut); font-size:12px; }
audio { width:100%; margin-top:12px; }
.item { display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:13px; padding:15px; margin-bottom:11px; background:#fff; }
.item h3 { margin:0; font-size:15px; }
.item .meta { font-size:12px; color:var(--mut); }
.item .acts { display:flex; gap:8px; flex-wrap:wrap; }
.item .acts button, .item .acts a button { padding:8px 13px; font-size:13px; }
.empty { border:1px dashed #ccc; border-radius:14px; background:#fafaff; text-align:center; padding:46px 16px; color:var(--mut); }
.keybox { font-family:monospace; background:#f0f0f7; padding:9px 11px; border-radius:9px; word-break:break-all; font-size:12px; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1a1a2e; color:#fff; padding:11px 18px; border-radius:11px; font-size:13px; opacity:0; transition:.2s; pointer-events:none; }
.toast.show { opacity:1; }