:root{--bg:#0f0f13;--surface:#17171c;--panel:#ffffff0a;--border:#ffffff1a;--border-strong:#ffffff38;--text-main:#eceef1;--text-muted:#9aa0a8;--accent:#9d7ee0;--accent-strong:#7c58cc;--accent-hover:#6a49bd;--danger:#ef4444;--success:#22c55e;--radius:8px}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{background:var(--bg);color:var(--text-main);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}.layout{display:block}.main-wrap{flex-direction:column;min-height:100svh;display:flex}.main{flex-direction:column;flex:1;display:flex}.app-bar{z-index:30;background:var(--surface);border-bottom:2px solid var(--border);justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem 1rem;display:flex;position:sticky;top:0}.app-bar-brand{color:var(--accent);align-items:center;gap:.5rem;font-size:1rem;font-weight:600;display:flex}.btn-new-list,.btn-primary{border-radius:var(--radius);background:var(--accent-strong);color:#fff;cursor:pointer;border:2px solid #0000;align-items:center;font-family:inherit;font-weight:600;transition:background .2s,color .2s,border-color .2s,transform .1s;display:inline-flex}.btn-new-list{gap:.4rem;padding:.55rem 1rem;font-size:.9rem}.btn-primary{gap:.5rem;padding:.65rem 1.25rem;font-size:1rem}.btn-new-list:hover,.btn-primary:hover{border-color:var(--accent-strong);color:var(--accent-strong);background:0 0}.btn-new-list:active,.btn-primary:active{transform:scale(.97)}.empty-state{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:2rem 1.5rem 3rem;display:none}.empty-state.show{display:flex}.empty-icon{border-radius:var(--radius);background:var(--panel);border:2px solid var(--border);width:72px;height:72px;color:var(--accent);place-items:center;margin-bottom:1.25rem;display:grid}.empty-title{margin:0 0 .5rem;font-size:1.4rem;font-weight:600}.empty-text{max-width:24rem;color:var(--text-muted);margin:0 0 1.75rem;font-size:.95rem;line-height:1.6}.lists{flex-direction:column;gap:.75rem;padding:1rem;display:flex}.list-card,.item-row{background:var(--panel);border:2px solid var(--border);border-radius:var(--radius);align-items:center;gap:.75rem;display:flex}.list-card{padding:.85rem 1rem}.list-card:hover,.item-row:hover{border-color:var(--accent)}.list-card.completed{opacity:.6}.list-card-icon{border-radius:var(--radius);background:var(--bg);border:2px solid var(--border);flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.list-card-icon img{border-radius:4px;width:22px;height:22px}.list-card-icon svg{color:var(--text-muted)}.list-card-body{flex:1;min-width:0}.list-card-name{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1rem;font-weight:600;overflow:hidden}.list-card-meta{color:var(--text-muted);margin:.15rem 0 0;font-size:.8rem}.btn-ghost{border:2px solid var(--border);border-radius:var(--radius);color:var(--text-main);cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1.25rem;font-family:inherit;font-size:1rem;font-weight:600;display:inline-flex}.btn-ghost:hover{background:var(--panel)}.icon-btn{border-radius:var(--radius);width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;place-items:center;display:grid}.icon-btn:hover{color:var(--text-main);background:var(--panel)}body.no-scroll{overflow:hidden}.modal-overlay{z-index:90;background:#0009;justify-content:center;align-items:center;padding:1.5rem;display:none;position:fixed;inset:0}.modal-overlay.show{display:flex}.modal{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);opacity:0;width:100%;max-width:400px;padding:1.25rem;transition:transform .2s,opacity .2s;transform:translateY(12px)}.modal-overlay.show .modal{opacity:1;transform:translateY(0)}.modal-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.modal-title{margin:0;font-size:1.1rem;font-weight:600}.modal-fields{flex-direction:column;gap:.6rem;display:flex}.modal-label{color:var(--text-muted);font-size:.85rem;font-weight:600}.modal-input,.add-item-input{border:2px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text-main);font-family:inherit;font-size:1rem}.modal-input{width:100%;padding:.7rem .85rem}.modal-input::placeholder,.add-item-input::placeholder{color:var(--text-muted)}.modal-input:focus,.add-item-input:focus{border-color:var(--accent);outline:none}.icon-picker{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.5rem;padding:.25rem 0 .5rem;display:flex;overflow-x:auto}.icon-picker::-webkit-scrollbar{display:none}.icon-option{border:2px solid var(--border);border-radius:var(--radius);background:var(--bg);cursor:pointer;flex-shrink:0;place-items:center;width:44px;height:44px;padding:0;display:grid}.icon-option img{border-radius:4px;width:26px;height:26px}.icon-option.icon-none svg{color:var(--text-muted)}.icon-option.icon-none.selected svg{color:var(--accent)}.icon-option:hover{background:var(--panel);border-color:var(--border-strong)}.icon-option.selected{border-color:var(--accent);background:#9d7ee026}.modal-actions{flex-direction:row;justify-content:flex-end;gap:.5rem;margin-top:.9rem;display:flex}.modal-actions .btn-primary,.modal-actions .btn-ghost{justify-content:center}.list-view{flex-direction:column;flex:1;min-height:0;display:none}body.list-open .list-view{display:flex}body.list-open .app-bar,body.list-open .main,body.list-open .app-bar{display:none}.view-bar{z-index:30;background:var(--surface);border-bottom:2px solid var(--border);align-items:center;gap:.75rem;padding:.7rem 1rem;display:flex;position:sticky;top:0}.view-bar h1{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1rem;font-weight:600;overflow:hidden}.view-bar-meta{flex:1;min-width:0}.view-bar-meta p{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.8rem;overflow:hidden}.list-icon{border-radius:var(--radius);background:var(--panel);border:2px solid var(--border);flex-shrink:0;place-items:center;display:grid}.list-icon svg{color:var(--text-muted)}.list-icon img{border-radius:4px;width:60%;height:60%}.view-bar .list-icon{width:32px;height:32px}.item-section{flex-direction:column;flex:1;gap:.5rem;padding:.75rem 1rem 1.5rem;display:flex}.item-label{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;padding:0 .25rem .25rem;font-size:.75rem;font-weight:600}.item-empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:2.5rem 1.5rem;display:none}.item-empty.show{display:flex}.item-empty-title{margin:0 0 .35rem;font-size:1.1rem;font-weight:600}.item-empty-text{max-width:22rem;color:var(--text-muted);margin:0;font-size:.9rem;line-height:1.5}.item-list{flex-direction:column;gap:.5rem;display:flex}.item-row{cursor:pointer;padding:.7rem .85rem}.item-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:.95rem;overflow:hidden}.item-row.checked{opacity:.6}.item-row.checked .item-name{color:var(--text-muted);text-decoration:line-through}.delete-btn{border-radius:var(--radius);width:30px;height:30px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;place-items:center;transition:color .2s;display:grid}.delete-btn:hover{color:var(--danger);background:0 0}.add-item-bar{z-index:40;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:var(--surface);border-top:2px solid var(--border);gap:.5rem;display:flex;position:fixed;bottom:0;left:0;right:0}.add-item-input{flex:1;min-width:0;height:42px;padding:0 .85rem}.add-item-btn{flex-shrink:0;gap:.4rem;height:42px;padding:0 .85rem;font-size:.95rem}.add-item-mic{border:2px solid var(--border);border-radius:var(--radius);background:var(--bg);width:42px;height:42px;color:var(--text-muted);flex-shrink:0}.add-item-mic.active{color:var(--success);border-color:var(--success);background:#22c55e26}@media (width>=768px){.empty-title{font-size:1.6rem}.icon-picker{flex-wrap:wrap;overflow-x:visible}.lists{grid-template-columns:repeat(2,1fr);align-items:start;display:grid}.view-bar{background:0 0;border-bottom:none;width:100%;max-width:760px;margin:0 auto;padding:1.25rem 2rem .5rem;position:static}.view-bar .list-back{order:3;margin-left:auto}.view-bar .list-icon{width:48px;height:48px}.view-bar h1{font-size:1.5rem;font-weight:600}.view-bar-meta p{font-size:.85rem}.item-section{width:100%;max-width:760px;margin:0 auto;padding:.75rem 2rem 5rem}.add-item-bar{border:2px solid var(--border);border-radius:var(--radius);bottom:1.25rem;left:calc(240px + 1.25rem);right:1.25rem}}