:root{--bg: #f9fafb;--surface: #ffffff;--header-bg: #111827;--header-text: #ffffff;--header-sub: #9ca3af;--text: #111827;--muted: #6b7280;--muted-2: #9ca3af;--border: #e5e7eb;--border-subtle: #f3f4f6;--accent: #2563eb;--accent-text: #ffffff;--btn-bg: #e5e7eb;--hover: #f9fafb;--hover-2: #f8fafc;--warn-bg: #fef3c7;--warn-border: #f59e0b;--warn-text: #111827;--danger: #b91c1c;--sel-bg: #eff6ff;--sel-border: #2563eb;--sel-shadow: rgba(37, 99, 235, .12);--tile-hover-border: #c7d2fe;--pill-bg: #f3f4f6;--pill-hover: #dbeafe;color-scheme:light}@media (prefers-color-scheme: dark){:root{--bg: #0f1115;--surface: #1a1d23;--header-bg: #0b0d10;--header-text: #f3f4f6;--header-sub: #8b93a1;--text: #e5e7eb;--muted: #9ca3af;--muted-2: #6b7280;--border: #2a2f37;--border-subtle: #23272e;--accent: #3b82f6;--accent-text: #ffffff;--btn-bg: #2a2f37;--hover: #23272e;--hover-2: #23272e;--warn-bg: #3a2f16;--warn-border: #a16207;--warn-text: #fde68a;--danger: #f87171;--sel-bg: #17233b;--sel-border: #3b82f6;--sel-shadow: rgba(59, 130, 246, .25);--tile-hover-border: #3b4756;--pill-bg: #2a2f37;--pill-hover: #1e3a5f;color-scheme:dark}}*{box-sizing:border-box;margin:0}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text)}.app{max-width:760px;margin:0 auto;padding-bottom:40px}header{background:var(--header-bg);color:var(--header-text);padding:18px 24px;border-radius:0 0 12px 12px}header h1{font-size:22px}header p{color:var(--header-sub);font-size:13px;margin-top:4px}main{padding:16px 24px;display:flex;flex-direction:column;gap:16px}.banner{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);border-radius:8px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.paste{display:flex;flex-direction:column;gap:8px}.paste textarea{width:100%;min-height:90px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:13px;resize:vertical;background:var(--surface);color:var(--text)}button{font:inherit;font-size:14px;padding:9px 16px;border:none;border-radius:8px;cursor:pointer;background:var(--btn-bg);color:var(--text)}button.primary{background:var(--accent);color:var(--accent-text);font-weight:600}button.primary:disabled{opacity:.5;cursor:default}button.danger{color:var(--danger)}button.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}th{text-align:left;font-size:12px;color:var(--muted);background:var(--hover);padding:10px 12px;border-bottom:1px solid var(--border)}td{padding:6px 12px;border-bottom:1px solid var(--border-subtle)}td.empty{text-align:center;color:var(--muted-2);padding:24px}td input,td select{width:100%;padding:6px 8px;border:1px solid transparent;border-radius:6px;font:inherit;font-size:13px;background:transparent;color:var(--text)}td input:focus,td select:focus{border-color:var(--accent);background:var(--surface);outline:none}.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.offset{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-left:4px}.offset input{width:56px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font:inherit;background:var(--surface);color:var(--text)}.sound-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden}.sound-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 16px;background:var(--surface);border:none;border-radius:8px;cursor:pointer;text-align:left;font-size:13px;font-weight:600;color:var(--text)}.sound-toggle:hover{background:var(--hover)}.sound-toggle .current{margin-left:8px;font-weight:400;color:var(--muted)}.sound-toggle .chev{color:var(--muted-2);transition:transform .2s}.sound-card.open .sound-toggle .chev{transform:rotate(180deg)}.sound-card.open .sound-grid{padding:12px 16px 14px;border-top:1px solid var(--border-subtle)}.sound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.sound-tile{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer;font-size:13px;color:var(--text);transition:border-color .15s,background .15s,box-shadow .15s;text-align:left}.sound-tile:hover{border-color:var(--tile-hover-border);background:var(--hover-2)}.sound-tile.selected{border-color:var(--sel-border);background:var(--sel-bg);box-shadow:0 0 0 2px var(--sel-shadow)}.sound-tile .name{font-weight:500}.sound-tile .preview{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--pill-bg);color:var(--accent);border:none;font-size:11px;padding:0;cursor:pointer}.sound-tile .preview:hover{background:var(--pill-hover)}footer{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);border-top:1px solid var(--border);padding-top:12px}footer .hint{color:var(--muted-2)}footer .status{color:var(--accent)}