:root{--bg:#fff8d6;--fg:#2b2400;--card:#ffffff8c;--line:#0000001f;--accent:#b88a00;font-family:system-ui,sans-serif;font-size:16px}@media (prefers-color-scheme:dark){:root{--bg:#1d1b12;--fg:#f1e9c0;--card:#ffffff12;--line:#ffffff24;--accent:#f6e27a}}html,body{background:var(--bg);height:100%;color:var(--fg);margin:0}#app{max-width:640px;height:100%;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);box-sizing:border-box;flex-direction:column;margin:0 auto;display:flex}header{align-items:center;gap:4px;padding:10px 0;display:flex}header h1{margin:0;font-size:1.2rem}.grow{flex:1}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:8px 12px}button:hover{background:var(--line)}input,textarea{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:10px;outline:none;padding:10px 12px}input:focus,textarea:focus{border-color:var(--accent)}ul{flex:1;margin:8px 0;padding:0;list-style:none;overflow-y:auto}li{cursor:pointer;white-space:nowrap;text-overflow:ellipsis;border-radius:10px;padding:12px;overflow:hidden}li:hover{background:var(--card)}li.empty{opacity:.5;cursor:default}textarea{resize:none;flex:1;margin-bottom:12px}footer{opacity:.75;padding:8px 0 12px;font-size:.8rem}.err{color:#d33;min-height:1em;margin:0}.panel{flex-direction:column;gap:10px;display:flex}.panel p{margin:0;line-height:1.4}.primary{background:var(--accent);color:#1d1b12;font-weight:600}.link{opacity:.7;align-self:flex-start;margin-top:8px;text-decoration:underline}.fab{right:20px;bottom:calc(20px + env(safe-area-inset-bottom));background:var(--accent);color:#1d1b12;border-radius:50%;width:56px;height:56px;padding:0;font-size:28px;position:fixed;box-shadow:0 4px 14px #0000004d}