:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0f1218;--surface:#171b24;--surface-2:#1e2430;--border:#2a3140;--text:#e6e9ef;--muted:#8b94a7;--accent:#4f9cf9;--accent-hover:#6aaefb;--accent-text:#08111f;--star:#f5b83d;--danger:#f06a6a;--success:#4cc38a;--radius:10px;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5}*{box-sizing:border-box}body{background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0}.app{max-width:820px;padding:calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));text-align:left;margin:0 auto}h1{letter-spacing:-.01em;margin:0;font-size:1.15rem;font-weight:700}input,select,button{font:inherit;color:var(--text)}input[type=text],input[type=number],input:not([type]),select{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;min-width:0;padding:7px 10px}input::placeholder{color:var(--muted)}input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button{cursor:pointer}.add button[type=submit],.fav-add,.add-package button{background:var(--accent);color:var(--accent-text);border:none;border-radius:8px;padding:8px 16px;font-weight:600;transition:background .15s}.add button[type=submit]:hover,.fav-add:hover{background:var(--accent-hover)}input[type=checkbox]{width:22px;height:22px;accent-color:var(--success);cursor:pointer;flex:none}.topbar{z-index:20;background:var(--bg);align-items:center;gap:8px;margin:0 -12px 6px;padding:4px 12px;display:flex;position:sticky;top:0}.topbar small{color:var(--muted)}.menu-btn{background:0 0;border:none;border-radius:8px;padding:4px 10px 4px 0;font-size:1.5rem;line-height:1}.backdrop{z-index:30;position:fixed;inset:0}.menu{z-index:40;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);min-width:250px;max-width:calc(100vw - 24px);padding:6px;position:absolute;top:100%;left:12px;box-shadow:0 8px 24px #0008}.menu button{text-align:left;background:0 0;border:none;border-radius:6px;justify-content:space-between;gap:16px;width:100%;padding:11px 10px;display:flex}.menu button:hover,.menu button[aria-current=true]{background:var(--border)}.menu button.danger{color:var(--danger)}.menu hr{border:none;border-top:1px solid var(--border);margin:6px 0}.menu .install-hint,.menu .where{color:var(--muted);overflow-wrap:anywhere;margin:6px 10px;font-size:.8rem}.add{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);grid-template-columns:1fr auto;gap:6px;margin-bottom:8px;padding:8px;display:grid}.name-field{grid-area:1/1}.add button[type=submit]{grid-area:1/2}.add-opts{grid-area:2/1/3/3;gap:6px;display:flex}.add-opts .unit{flex:1}.name-field{min-width:0;position:relative}.name-field input{width:100%}.name-field:has(.voice) input{padding-right:78px}.voice{align-items:center;gap:2px;display:flex;position:absolute;top:0;bottom:0;right:2px}.voice button{color:var(--muted);background:0 0;border:none;border-radius:6px}.voice .lang{padding:4px 5px;font-size:.75rem;font-weight:600}.voice .mic{padding:5px;display:flex}.voice .mic.on{color:var(--danger);animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35}}.voice-error{margin:0 0 8px;font-size:.85rem}.heard{color:var(--muted);overflow-wrap:anywhere;margin:0 0 8px;font-size:.8rem}ul{margin:0;padding:0;list-style:none}li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:6px;margin-bottom:4px;padding:5px 8px;display:flex}.name{overflow-wrap:anywhere;flex:1;min-width:0;line-height:1.25}.meta{color:var(--muted);white-space:nowrap}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b94a7' stroke-width='1.5'/%3E%3C/svg%3E");background-position:right 7px center;background-repeat:no-repeat;padding-right:20px}.qty{flex:none;width:46px}.unit{flex:none;max-width:74px}li select,li input.qty{padding-top:6px;padding-bottom:6px;padding-left:6px;font-size:.85rem}li select{background-position:right 5px center;background-size:8px;padding-right:16px}li input.qty{padding-right:2px}li .name{font-size:.95rem}.empty{color:var(--muted);text-align:center;padding:24px 0}li.swipe{touch-action:pan-y;padding:0;display:block;position:relative;overflow:hidden}li.swipe .row{background:var(--surface);align-items:center;gap:5px;width:100%;min-width:0;padding:5px 6px;transition:transform .15s;display:flex}li.swipe .row.dragging{transition:none}li.swipe.done .row{background:var(--bg)}li.done .name{color:var(--muted);text-decoration:line-through}.swipe-del{background:var(--danger);color:#fff;border:none;width:84px;font-weight:600;position:absolute;top:0;bottom:0;right:0}.star,.del{color:var(--muted);background:0 0;border:none;border-radius:6px;flex:none;padding:4px 3px;font-size:1.1rem;line-height:1}.star:hover,.star.on{color:var(--star)}.del:hover{color:var(--danger)}.mouse-only{display:none}@media (hover:hover) and (pointer:fine){.mouse-only{display:block}}.fav-add{flex:none;padding:6px 12px;font-size:1rem}.link{color:var(--muted);background:0 0;border:none;padding:4px 0;text-decoration:underline}@media (width>=641px){.app{padding-top:calc(16px + env(safe-area-inset-top))}h1{font-size:1.4rem}.add{display:flex}.name-field{flex:1}.add-opts{display:contents}.add .unit{flex:none}.add button[type=submit]{order:1}.name-field,.add button[type=submit]{grid-area:auto}}.install-hint{color:var(--muted);margin:0;font-size:.85rem}.name.edit{background:0 0;border-color:#0000;padding-left:6px}.name.edit:hover{border-color:var(--border)}.name.edit:focus{background:var(--surface-2);border-color:var(--accent)}.suggestions{z-index:10;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;max-height:220px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #0008}.suggestions li{cursor:pointer;background:0 0;border:none;border-radius:0;margin:0;padding:10px 12px}.suggestions li.active,.suggestions li:hover{background:var(--border)}.suggestions li{flex-wrap:nowrap}.suggestions li .name{flex:1}.suggestions li .meta{flex:none}.add-package{gap:6px;margin-bottom:8px;display:flex}.add-package input{flex:1;min-width:0}.login{max-width:420px;padding-top:15vh}.login h1{margin-bottom:16px;font-size:1.6rem}.login-form{gap:8px;display:flex}.login-form input{flex:1;min-width:0}.login-form button{background:var(--accent);color:var(--accent-text);border:none;border-radius:8px;padding:8px 16px;font-weight:600}.error{color:var(--danger);margin:8px 0 0}
