:root{color-scheme:dark;--color-paper: oklch(13% .004 50);--color-paper-2: oklch(18% .005 50);--color-paper-3: oklch(23% .006 50);--color-ink: oklch(94% .007 80);--color-ink-2: oklch(66% .006 70);--color-rule: oklch(29% .006 50);--color-accent: oklch(58% .21 28);--color-focus: oklch(63% .22 28);--color-danger: oklch(64% .2 42);--font-display: "Anton", "Arial Narrow", system-ui, sans-serif;--font-body: "Geist", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--space-3xs: .25rem;--space-2xs: .5rem;--space-xs: .75rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--text-xs: .75rem;--text-sm: .8125rem;--text-base: 1rem;--text-md: 1.25rem;--ease-out: cubic-bezier(.16, 1, .3, 1);--dur-short: .12s;--radius-card: 2px;--radius-input: 2px;--radius-pill: 999px;--shadow-overlay: 0 8px 24px oklch(20% .02 75 / .18);--bg: var(--color-paper);--panel: var(--color-paper-2);--panel-2: var(--color-paper-3);--border: var(--color-rule);--text: var(--color-ink);--muted: var(--color-ink-2);--accent: var(--color-accent);--accent-strong: var(--color-accent);--danger: var(--color-danger)}*{box-sizing:border-box}html,body,#root{height:100%}html,body{overflow-x:clip}body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;white-space:nowrap}input,textarea,select{font:inherit}:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}::selection{background:color-mix(in srgb,var(--color-accent) 35%,transparent)}.app{display:flex;flex-direction:column;height:100%}.banner{margin:var(--space-md) auto;max-width:30rem;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-danger);background:color-mix(in srgb,var(--color-danger) 7%,var(--color-paper));text-align:center}.center-note{padding:var(--space-lg) var(--space-sm);text-align:center;color:var(--color-ink-2)}.error-text{color:var(--color-danger)}.topbar{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-2xs) var(--space-md);border-bottom:1px solid var(--color-rule);background:var(--color-paper)}.brand{font-family:var(--font-display);font-size:var(--text-md);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;white-space:nowrap}.brand:after{content:"";display:block;width:1.4em;border-bottom:2px solid var(--color-accent)}.topbar-search{flex:0 1 24rem;min-width:8rem;margin-left:var(--space-md)}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-2xs);flex-wrap:nowrap}.topbar-toggle{margin-left:var(--space-2xs)}.user-email{margin-left:var(--space-3xs);color:var(--color-ink-2);max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{border:1px solid var(--color-rule);background:transparent;border-radius:var(--radius-input);padding:var(--space-3xs) var(--space-2xs);cursor:pointer;transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}.btn:hover:not(:disabled){border-color:var(--color-ink-2);background:var(--color-paper-3)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-paper)}.btn-primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-accent) 88%,var(--color-ink));border-color:color-mix(in srgb,var(--color-accent) 88%,var(--color-ink))}.btn-ghost{background:transparent}.btn-danger:hover:not(:disabled){border-color:var(--color-danger);color:var(--color-danger)}.view-toggle{display:inline-flex;border:1px solid var(--color-rule);border-radius:var(--radius-input);overflow:hidden}.view-toggle .btn{border:none;border-radius:0;padding:var(--space-3xs) var(--space-2xs)}.view-toggle .btn+.btn{border-left:1px solid var(--color-rule)}.view-toggle .btn.active{background:var(--color-accent);color:var(--color-paper)}.side-actions{display:flex;gap:var(--space-2xs);padding:0 var(--space-2xs);margin-bottom:var(--space-md)}.side-add{flex:1;min-width:0}.side-icon-btn{position:relative;flex-shrink:0;width:2.25rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-rule);border-radius:var(--radius-input);background:transparent;color:var(--color-ink-2);cursor:pointer;transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}.side-icon-btn:hover:not(:disabled){color:var(--color-accent);border-color:var(--color-accent);background:var(--color-paper-3)}.side-icon-btn:disabled{opacity:.4;cursor:default}.icon-badge{position:absolute;top:-.3rem;right:-.35rem;background:var(--color-accent);color:var(--color-paper);font-family:var(--font-mono);font-size:.5625rem;line-height:1;padding:.125rem .25rem;border-radius:var(--radius-pill)}.side-tool-btn{border:none;background:none;color:var(--color-ink-2);font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;padding:var(--space-3xs) var(--space-3xs);border-radius:var(--radius-card);cursor:pointer;white-space:nowrap}.side-tool-btn:hover:not(:disabled){color:var(--color-accent);background:var(--color-paper-3)}.side-tool-btn:disabled{opacity:.4;cursor:default}.side-danger-btn{color:var(--color-danger);border:1px solid color-mix(in srgb,var(--color-danger) 55%,transparent)}.side-edit-btn{border:none;background:transparent;color:var(--color-ink-2);font-size:var(--text-xs);line-height:1;padding:var(--space-3xs) var(--space-3xs);border-radius:var(--radius-card);opacity:0;cursor:pointer}.side-row:hover .side-edit-btn,.side-row.active .side-edit-btn,.side-row:focus-within .side-edit-btn{opacity:1}.side-edit-btn:hover{color:var(--color-accent);background:var(--color-paper-3)}.side-check{flex-shrink:0;margin-left:var(--space-2xs);accent-color:var(--color-accent)}.side-row.selected{background:color-mix(in srgb,var(--color-accent) 14%,transparent)}.app-body{display:flex;flex:1;min-height:0}.sidebar{width:14rem;flex-shrink:0;padding:var(--space-md) var(--space-xs);border-right:1px solid var(--color-rule);overflow-y:auto}.side-group+.side-group{margin-top:var(--space-lg)}.side-heading{margin:0 var(--space-2xs) var(--space-2xs);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink-2)}.side-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xs);width:100%;padding:var(--space-3xs) var(--space-2xs);border:none;border-radius:var(--radius-card);background:transparent;cursor:pointer;text-align:left;color:inherit;transition:background-color var(--dur-short) var(--ease-out)}.side-item:hover{background:var(--color-paper-3)}.side-item.active{background:var(--color-paper-3);color:var(--color-ink)}.side-count{color:var(--color-ink-2);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.side-empty{margin:0 var(--space-2xs);color:var(--color-ink-2);font-size:var(--text-sm)}.side-more-btn{margin:var(--space-3xs) var(--space-2xs) 0;padding:var(--space-3xs) var(--space-2xs);border:none;background:none;color:var(--color-accent);font-size:var(--text-sm);text-align:left;cursor:pointer;white-space:nowrap}.side-more-btn:hover{text-decoration:underline}.main{flex:1;min-width:0;overflow-y:auto;padding:var(--space-md) var(--space-lg) var(--space-lg) var(--space-lg)}.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));gap:var(--space-sm)}.item-list{display:flex;flex-direction:column}.card{display:flex;flex-direction:column;gap:var(--space-2xs);padding:var(--space-2xs) var(--space-2xs) var(--space-xs);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-2);transition:border-color var(--dur-short) var(--ease-out)}.item-grid .card:hover{border-color:var(--color-ink-2)}.card-archived{opacity:.55}.card-head{display:flex;align-items:baseline;gap:var(--space-2xs);min-width:0}.favicon{flex-shrink:0;align-self:center;border-radius:2px}.card-title{color:var(--color-ink);font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);line-height:1.3;text-decoration:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.card-title:hover{color:var(--color-accent)}.item-list .card-title{-webkit-line-clamp:1}.card-meta{display:flex;align-items:center;gap:var(--space-3xs);color:var(--color-ink-2);font-size:var(--text-xs);font-variant-numeric:tabular-nums;min-width:0}.host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-host{flex:1 1 0;min-width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;color:var(--color-ink-2);font-size:var(--text-xs)}.chip-more{color:var(--color-accent);border-color:color-mix(in srgb,var(--color-accent) 45%,transparent)}.dot{opacity:.6}.card-chips{display:flex;flex-wrap:wrap;gap:var(--space-3xs)}.chip{padding:1px var(--space-2xs);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper);font-size:var(--text-xs);color:var(--color-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.chip-tag{color:var(--color-accent);border-color:color-mix(in srgb,var(--color-accent) 45%,transparent)}.chip-type{text-transform:uppercase;letter-spacing:.05em}.card-actions{display:flex;gap:var(--space-3xs);margin-top:auto}.card-actions .btn{font-size:var(--text-sm);padding:2px var(--space-2xs)}.item-list .card-actions{margin-top:0;margin-left:auto}.item-list .card{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:var(--space-sm);border:none;border-bottom:1px solid var(--color-rule);border-radius:0;background:transparent}.item-list .card:hover{background:var(--color-paper-2);border-color:var(--color-rule)}.item-list .card .card-head{flex:1;min-width:10rem}.item-list .card .card-meta{flex-shrink:0;font-size:var(--text-xs)}.item-list .card .card-chips{flex-shrink:1;min-width:0;max-width:10rem;overflow:hidden}.auth-screen{display:flex;align-items:center;justify-content:center;height:100%;padding:var(--space-sm)}.auth-card{display:flex;flex-direction:column;gap:var(--space-xs);width:100%;max-width:21rem;padding:var(--space-md);border:1px solid var(--color-rule);border-top:3px solid var(--color-accent);border-radius:var(--radius-card);background:var(--color-paper-2)}.auth-title{margin:0 0 var(--space-3xs);font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);text-transform:uppercase;letter-spacing:.01em;line-height:1.05}.auth-hint{margin:0;color:var(--color-ink-2);font-size:var(--text-sm)}.input{width:100%;padding:var(--space-3xs) var(--space-2xs);border:1px solid var(--color-rule);border-radius:var(--radius-input);background:var(--color-paper);color:var(--color-ink);outline:none;transition:border-color var(--dur-short) var(--ease-out)}.input:focus{border-color:var(--color-accent);outline:none}.topbar-search .input{border:none;border-bottom:1px solid var(--color-rule);border-radius:0;background:transparent;padding-left:0}textarea.input{resize:vertical}.modal-backdrop{position:fixed;inset:0;background:color-mix(in srgb,oklch(20% .02 75) 55%,transparent);display:flex;align-items:flex-start;justify-content:center;padding:var(--space-lg) var(--space-sm);overflow-y:auto;z-index:50}.modal{width:100%;max-width:30rem;display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-md);border:1px solid var(--color-rule);border-top:3px solid var(--color-accent);border-radius:var(--radius-card);background:var(--color-paper-2);box-shadow:var(--shadow-overlay)}.modal-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--text-md);text-transform:uppercase;letter-spacing:.01em;line-height:1.05}.field{display:flex;flex-direction:column;gap:var(--space-3xs);border:none;padding:0;margin:0}.field-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink-2)}.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xs)}.checkbox-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:var(--space-3xs)}.checkbox-item{display:flex;align-items:center;gap:var(--space-2xs);cursor:pointer;font-size:var(--text-sm)}.checkbox-item input{accent-color:var(--color-accent)}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-2xs);margin-top:var(--space-3xs)}.side-heading-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3xs);margin-right:var(--space-2xs);flex-wrap:wrap}.side-tools{display:flex;align-items:center;gap:var(--space-3xs);flex-wrap:wrap;justify-content:flex-end;min-width:0}.side-new-btn{border:none;background:transparent;color:var(--color-ink-2);font-size:var(--text-base);line-height:1;padding:0 var(--space-3xs);border-radius:var(--radius-card);cursor:pointer;transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}.side-new-btn:hover{background:var(--color-paper-3);color:var(--color-accent)}.side-new-form{display:flex;gap:var(--space-3xs);padding:var(--space-3xs) var(--space-2xs)}.side-new-form .input{flex:1;min-width:0}.input-sm,.btn-sm{padding:3px var(--space-2xs);font-size:var(--text-sm)}.side-row{padding:0}.side-main{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xs);flex:1;min-width:0;padding:var(--space-3xs) 0 var(--space-3xs) var(--space-2xs);border:none;background:transparent;color:inherit;cursor:pointer;text-align:left}.side-del{border:none;background:transparent;color:var(--color-ink-2);font-size:var(--text-sm);line-height:1;padding:var(--space-3xs) var(--space-2xs);border-radius:var(--radius-card);opacity:0;cursor:pointer;transition:opacity var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}.side-row:hover .side-del,.side-row.active .side-del,.side-row:focus-within .side-del{opacity:1}.side-del:hover{color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 10%,transparent)}.collection-create{display:flex;gap:var(--space-3xs);margin-top:var(--space-2xs)}.collection-create .input{flex:1;min-width:0}.url-row{display:flex;gap:var(--space-2xs)}.url-row .input{flex:1;min-width:0}.field-hint{margin:var(--space-3xs) 0 0;font-size:var(--text-xs);color:var(--color-ink-2)}.dupe-warning{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xs);margin-top:var(--space-3xs);padding:var(--space-2xs);border:1px solid color-mix(in srgb,var(--color-danger) 55%,transparent);border-radius:var(--radius-card);font-size:var(--text-sm);color:var(--color-danger)}.dupe-warning .btn{white-space:nowrap}.dupe-group{border-bottom:1px solid var(--color-rule);padding:var(--space-2xs) 0}.dupe-head{margin:0;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink-2)}.dupe-keep{margin:var(--space-3xs) 0;font-size:var(--text-sm)}.dupe-list{list-style:none;margin:0 0 var(--space-2xs);padding:0}.dupe-row{display:flex;align-items:center;gap:var(--space-2xs);padding:var(--space-3xs) 0}.dupe-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm)}.card-thumb-wrap{display:block;margin:calc(-1 * var(--space-2xs)) calc(-1 * var(--space-2xs)) var(--space-2xs);border-bottom:1px solid var(--color-rule);overflow:hidden}.card-thumb{display:block;width:100%;max-height:11rem;object-fit:cover}@media(max-width:720px){.app-body{flex-direction:column}.topbar{flex-wrap:wrap;row-gap:var(--space-2xs);padding:var(--space-2xs) var(--space-xs)}.brand{order:1}.topbar-actions{order:2}.topbar-search{order:3;flex:1 1 auto;min-width:0;margin-left:0}.topbar-toggle{order:4;margin-left:0;flex-shrink:0}.sidebar{width:100%;overflow-x:visible}.side-actions{padding:0 var(--space-2xs) var(--space-2xs);margin-bottom:var(--space-xs)}.main{padding:var(--space-sm)}.sidebar{width:100%;min-width:0;max-width:100%;border-right:none;border-bottom:1px solid var(--color-rule);padding-bottom:var(--space-2xs);overflow-x:hidden}.side-heading{overflow-wrap:anywhere}.side-group+.side-group{margin-top:var(--space-md)}.user-email{display:none}}@media(max-width:480px){.item-list .card{gap:var(--space-2xs)}.item-list .card-chips{display:none}.item-list .card-actions{gap:var(--space-3xs)}.item-list .card-actions .btn{padding:var(--space-3xs) var(--space-2xs)}:root{--text-md: 1.125rem}.btn{padding:var(--space-2xs) var(--space-xs)}.view-toggle .btn{padding:var(--space-2xs)}.main{padding:var(--space-2xs) var(--space-2xs) var(--space-sm)}.modal-backdrop{padding:var(--space-sm) var(--space-2xs)}.modal{padding:var(--space-sm)}.field-row{grid-template-columns:minmax(0,1fr)}.modal-actions .btn{flex:1}.auth-card{padding:var(--space-sm)}.card-thumb{max-height:9rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0ms!important}}.show-more{display:block;margin:var(--space-md) auto 0}.bulk-note{margin:var(--space-3xs) 0;font-size:var(--text-sm);color:var(--color-ink-2)}.bulk-list{margin:var(--space-3xs) 0;padding-left:var(--space-md);font-size:var(--text-sm)}.bulk-list strong{font-weight:600}.dupe-section-label{margin:var(--space-sm) 0 var(--space-3xs);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent)}.dupe-icon-btn{flex-shrink:0;width:1.75rem;height:1.75rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-rule);border-radius:var(--radius-input);background:transparent;color:var(--color-ink-2);cursor:pointer;transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}.dupe-icon-btn:hover{color:var(--color-accent);border-color:var(--color-accent);background:var(--color-paper-3)}.dupe-icon-btn.dupe-icon-danger:hover{color:var(--color-danger);border-color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 10%,transparent)}.autofill-banner{display:flex;align-items:center;gap:var(--space-2xs);padding:var(--space-2xs) var(--space-xs);margin-bottom:var(--space-sm);border:1px solid var(--color-rule);border-left:3px solid var(--color-accent);border-radius:var(--radius-card);background:var(--color-paper-2);font-size:var(--text-sm)}.autofill-banner span{flex:1;min-width:0}.autofill-bar{position:fixed;bottom:var(--space-sm);left:50%;transform:translate(-50%);z-index:40;display:flex;align-items:center;gap:var(--space-2xs);width:min(26rem,calc(100vw - var(--space-lg)));padding:var(--space-2xs) var(--space-xs);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-2);box-shadow:var(--shadow-overlay)}.autofill-bar-label{flex-shrink:0;font-size:var(--text-xs);font-variant-numeric:tabular-nums;white-space:nowrap}.autofill-bar-track{flex:1;height:.375rem;border-radius:var(--radius-pill);background:var(--color-paper-3);overflow:hidden}.autofill-bar-fill{height:100%;border-radius:var(--radius-pill);background:var(--color-accent);transition:width var(--dur-short) var(--ease-out)}.side-icon-btn.spinning svg{animation:icon-pulse 1s var(--ease-out) infinite}@keyframes icon-pulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.side-icon-btn.spinning svg{animation:none}}