:root{--bg: #0f1219;--bg-elevated: #161b26;--bg-soft: #1c2333;--bg-hover: #232b3d;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: #eef1f7;--text-muted: #9aa3b5;--text-faint: #6b7385;--accent: #6ea8ff;--accent-soft: rgba(110, 168, 255, .14);--accent-strong: #8cbcff;--success: #5dcca0;--success-soft: rgba(93, 204, 160, .14);--danger: #ff7b8a;--danger-soft: rgba(255, 123, 138, .12);--focus-ring: rgba(110, 168, 255, .12);--focus-border: rgba(110, 168, 255, .45);--radius: 14px;--radius-md: 12px;--radius-sm: 10px;--radius-xs: 8px;--radius-pill: 999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 2.5rem;--font: "DM Sans", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace;--text-2xs: .72rem;--text-xs: .75rem;--text-sm: .875rem;--text-md: .95rem;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 1.65rem;--leading-tight: 1.25;--leading-snug: 1.4;--leading-normal: 1.5;--tracking-tight: -.03em;--tracking-snug: -.02em;--tracking-wide: .03em;--tracking-wider: .04em;--control-h: 2.25rem;--control-h-sm: 1.75rem;--control-pad-x: var(--space-4);--control-pad-x-sm: var(--space-2);--icon-btn-size: 2rem;--sidebar-width: 240px;--lists-rail-width: 280px;--shadow: 0 18px 50px rgba(0, 0, 0, .35)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);font-size:var(--text-base);color:var(--text);background:radial-gradient(1200px 600px at 10% -10%,rgba(110,168,255,.12),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(93,204,160,.08),transparent 50%),var(--bg)}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}.field-input,.field-textarea{width:100%;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-soft);outline:none;line-height:var(--leading-snug);transition:border-color .15s ease,box-shadow .15s ease}.field-input{height:var(--control-h);padding:0 var(--control-pad-x)}.field-input-sm{height:var(--control-h-sm);padding-left:var(--control-pad-x-sm);padding-right:var(--control-pad-x-sm);font-size:var(--text-sm);border-radius:var(--radius-xs)}.field-input:focus,.field-textarea:focus{border-color:var(--focus-border);box-shadow:0 0 0 3px var(--focus-ring)}.field-input:disabled,.field-textarea:disabled{opacity:.6;cursor:not-allowed}.field-input::placeholder,.field-textarea::placeholder{color:var(--text-faint)}.field-textarea{resize:vertical;min-height:var(--space-7);padding:var(--space-2) var(--control-pad-x)}.field-label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--text-faint)}.field-help{margin:0;color:var(--text-muted);font-size:var(--text-sm);line-height:var(--leading-snug)}.text-error{margin:0;color:var(--danger);font-size:var(--text-sm)}.text-success{margin:0;color:var(--success);font-size:var(--text-sm)}.font-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.app{display:grid;grid-template-columns:var(--sidebar-width) 1fr;height:100%;height:100dvh;max-height:100%;max-height:100dvh;overflow:hidden}.sidebar{display:flex;flex-direction:column;gap:var(--space-5);min-height:0;padding:var(--space-4);border-right:1px solid var(--border);background:#0f1219d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:auto}.brand{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-2) var(--space-3)}.brand-mark{width:36px;height:36px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;font-weight:700;letter-spacing:var(--tracking-tight);color:#0b1220;background:linear-gradient(145deg,#9ec2ff,#6ea8ff 55%,#5dcca0);box-shadow:0 8px 20px #6ea8ff40}.brand-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}.brand-name{font-weight:700;font-size:var(--text-md);letter-spacing:var(--tracking-snug)}.brand-tag{font-size:var(--text-xs);color:var(--text-faint)}.nav{display:flex;flex-direction:column;gap:var(--space-1);flex:1;min-height:0}.nav-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);border-radius:var(--radius-md);color:var(--text-muted);text-align:left;transition:background .15s ease,color .15s ease}.nav-item:hover{background:var(--bg-hover);color:var(--text)}.nav-item.is-active{background:var(--accent-soft);color:var(--accent-strong)}.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.nav-icon{display:grid;place-items:center;opacity:.9}.sidebar-footer{margin-top:auto;padding:var(--space-3) var(--space-2);font-size:var(--text-xs);color:var(--text-faint);flex-shrink:0}.sidebar-footer p{margin:0 0 var(--space-2);line-height:var(--leading-snug)}.sidebar-user{margin:0 0 var(--space-1);font-size:var(--text-2xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sign-out-btn{margin-top:var(--space-2)}.main{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;padding:var(--space-5) var(--space-5) var(--space-6);overflow:hidden}.app-view{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.view-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);flex-shrink:0}.view-header h1{margin:0;font-size:var(--text-2xl);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}.view-header-desc{margin:var(--space-1) 0 0;color:var(--text-muted);max-width:42rem;line-height:var(--leading-snug);font-size:var(--text-md)}@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border);padding-bottom:var(--space-3);overflow:visible}.nav{flex-direction:row;flex:none;overflow-x:auto}.nav-item{white-space:nowrap}.sidebar-footer p:not(.sidebar-user){display:none}.sidebar-footer .sign-out-btn{width:auto}.main{overflow:auto}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:var(--control-h);padding:0 var(--control-pad-x);border-radius:var(--radius-sm);border:1px solid transparent;font-weight:600;font-size:var(--text-sm);white-space:nowrap;transition:background .15s ease,border-color .15s ease,transform .1s ease,filter .15s ease}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:linear-gradient(180deg,#7eb2ff,#5e98f0);color:#081018;box-shadow:0 8px 18px #5e98f040}.btn-primary:hover:not(:disabled){filter:brightness(1.05)}.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text-muted)}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text)}.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}.btn-danger:hover:not(:disabled){background:#ff7b8a33}.btn-sm{height:var(--control-h-sm);padding:0 var(--control-pad-x-sm);font-size:var(--text-xs);border-radius:var(--radius-xs)}.btn-block{width:100%}.icon-btn{width:var(--icon-btn-size);height:var(--icon-btn-size);border-radius:var(--radius-xs);display:grid;place-items:center;color:var(--text-faint);transition:background .15s ease,color .15s ease;flex-shrink:0}.icon-btn:hover{background:var(--bg-hover);color:var(--text)}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}.icon-btn.danger:hover,.icon-btn.danger:focus-visible{background:var(--danger-soft);color:var(--danger)}.panel{display:flex;flex-direction:column;min-height:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);flex-shrink:0}.panel-header h2{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase}.panel-body{flex:1;min-height:0;overflow:auto;padding:var(--space-2)}.panel-meta{font-size:var(--text-xs);color:var(--text-faint)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--accent-strong);background:var(--accent-soft);vertical-align:middle}.badge-block{margin-bottom:var(--space-3)}.pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;font-variant-numeric:tabular-nums}.pill-success{color:var(--success);background:var(--success-soft)}.empty-state{display:grid;place-items:center;flex:1;min-height:0;padding:var(--space-6);text-align:center;color:var(--text-muted)}.empty-state-compact{display:block;padding:var(--space-5) var(--space-4);text-align:center;color:var(--text-faint);font-size:var(--text-sm);line-height:var(--leading-snug)}.empty-state h2{margin:0 0 var(--space-1);color:var(--text);font-size:var(--text-lg)}.empty-state p{margin:0;max-width:28rem;line-height:var(--leading-normal)}.empty-state-actions{margin-top:var(--space-4)}.placeholder{max-width:560px;padding:var(--space-5);border:1px dashed var(--border-strong);border-radius:var(--radius);background:#ffffff05}.placeholder h2{margin:0 0 var(--space-2);font-size:var(--text-md)}.placeholder p{margin:0;color:var(--text-muted);line-height:var(--leading-normal)}.lists-layout{display:grid;grid-template-columns:var(--lists-rail-width) 1fr;gap:var(--space-5);flex:1;min-height:0;align-items:stretch}.list-rail-stack{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;min-height:0;overflow:hidden}.list-rail{flex:1;min-height:0}.create-row{display:flex;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--border);flex-shrink:0}.create-row .field-input{flex:1;width:auto}.list-card{width:100%;display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);text-align:left;color:var(--text-muted);transition:background .15s ease,color .15s ease}.list-card:hover{background:var(--bg-hover);color:var(--text)}.list-card.is-active{background:var(--accent-soft);color:var(--text)}.list-card-dot{width:10px;height:10px;margin-top:var(--space-1);border-radius:50%;flex-shrink:0;background:var(--accent)}.list-card-body{min-width:0;flex:1}.list-card-title{display:block;font-weight:600;font-size:var(--text-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-card-title .badge{margin-left:var(--space-1)}.list-card-meta{display:block;margin-top:var(--space-1);font-size:var(--text-xs);color:var(--text-faint)}.list-detail{min-height:0;height:100%}.list-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-4);border-bottom:1px solid var(--border);flex-shrink:0}.list-detail-header-main{flex:1;min-width:0}.list-title-input{width:100%;background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);padding:var(--space-1) var(--space-1);margin:calc(var(--space-1) * -1);font-size:var(--text-lg);font-weight:700;letter-spacing:var(--tracking-snug);height:auto}.list-title-input:hover,.list-title-input:focus{border-color:var(--border-strong);background:var(--bg-soft);outline:none;box-shadow:none}.list-title-readonly{margin:0;font-size:var(--text-lg);font-weight:700;letter-spacing:var(--tracking-snug);padding:var(--space-1)}.list-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}.list-toolbar .share-toggle{margin-left:var(--space-4)}.mode-toggle{display:inline-flex;padding:var(--space-1);border-radius:var(--radius-pill);background:var(--bg-soft);border:1px solid var(--border)}.mode-toggle button{padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;color:var(--text-faint)}.mode-toggle button.is-active{background:var(--bg-elevated);color:var(--text);box-shadow:0 1px 4px #00000040}.list-detail-body{flex:1;min-height:0;overflow:auto;padding:var(--space-3) var(--space-4)}.share-toggle{flex-shrink:0;color:var(--text-muted)}.share-panel{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);background:var(--bg-soft);flex-shrink:0;flex-direction:column;gap:var(--space-3)}.share-panel:not([hidden]){display:flex}.share-invite{display:flex;flex-direction:column;gap:var(--space-2)}.share-panel-help{margin:0;font-size:var(--text-xs);color:var(--text-faint);line-height:var(--leading-snug)}.share-form{display:flex;gap:var(--space-2)}.share-form .field-input{flex:1;width:auto}.share-panel .text-error,.share-panel .text-success{margin:0}.share-guest-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}.share-guest{position:relative}.share-guest-pill{max-width:16rem;height:var(--control-h-sm);padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid transparent;font-size:var(--text-xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:filter .15s ease,transform .1s ease,box-shadow .15s ease}.share-guest-pill:hover{filter:brightness(1.08)}.share-guest-pill:active{transform:translateY(1px)}.share-guest-pill.is-open{box-shadow:0 0 0 2px var(--focus-ring)}.share-guest-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.share-guest-menu{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:20;min-width:8.5rem;margin:0;padding:var(--space-1);list-style:none;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-elevated);box-shadow:var(--shadow)}.share-guest-menu-item{display:block;width:100%;text-align:left;padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);border:none;background:transparent;font-size:var(--text-sm);font-weight:600;color:var(--text-muted);cursor:pointer}.share-guest-menu-item:hover,.share-guest-menu-item:focus-visible{background:var(--bg-hover);color:var(--text);outline:none}.share-guest-menu-item--danger{color:var(--danger)}.share-guest-menu-item--danger:hover,.share-guest-menu-item--danger:focus-visible{background:var(--danger-soft);color:var(--danger)}.item-row{--item-line-box: var(--control-h);--item-check-size: 18px;--item-handle-size: 1.5rem;display:grid;grid-template-columns:auto auto 1fr auto;align-items:start;gap:var(--space-2);padding:var(--space-1);border-radius:var(--radius-sm);touch-action:manipulation}.item-row:hover{background:#ffffff08}.item-row.is-dragging{z-index:2;opacity:.92;background:var(--bg-soft);box-shadow:var(--shadow)}.item-row:hover .item-actions,.item-row:focus-within .item-actions,.item-row:hover .item-drag-handle,.item-row:focus-within .item-drag-handle{opacity:1}.item-drag-handle{display:grid;place-items:center;width:var(--item-handle-size);height:var(--item-handle-size);margin-top:calc((var(--item-line-box) - var(--item-handle-size)) / 2);border-radius:var(--radius-xs);color:var(--text-faint);cursor:grab;opacity:.45;touch-action:none;flex-shrink:0}.item-drag-handle:hover,.item-drag-handle:focus-visible{opacity:1;color:var(--text-muted);background:var(--bg-hover);outline:none}.item-drag-handle:active{cursor:grabbing}.item-check{width:var(--item-check-size);height:var(--item-check-size);margin-top:calc((var(--item-line-box) - var(--item-check-size)) / 2);accent-color:var(--success);cursor:pointer}.item-spacer{width:var(--item-check-size);height:var(--item-check-size);margin-top:calc((var(--item-line-box) - var(--item-check-size)) / 2)}.item-text{width:100%;resize:none;min-height:var(--item-line-box);max-height:8rem;line-height:var(--leading-snug);padding-block:calc((var(--item-line-box) - 1em * var(--leading-snug) - 2px) / 2);padding-inline:var(--space-2);border:1px solid transparent;border-radius:var(--radius-xs);background:transparent;color:var(--text);overflow:hidden}.item-text:focus{outline:none;border-color:var(--border-strong);background:var(--bg-soft)}.item-text.is-done{color:var(--text-faint);text-decoration:line-through}.item-actions{display:flex;align-items:center;gap:var(--space-1);margin-top:calc((var(--item-line-box) - var(--icon-btn-size)) / 2);opacity:0;transition:opacity .15s ease}.add-item-form{display:flex;gap:var(--space-2);flex-shrink:0;margin:0;padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);background:var(--bg-elevated)}.add-item-form .field-input{flex:1;width:auto}@media(max-width:900px){.lists-layout{grid-template-columns:1fr;flex:none;min-height:auto}.list-rail-stack{overflow:visible}.list-rail{flex:none}.list-rail .panel-body{max-height:220px}.list-detail{min-height:50vh}}.login-screen{min-height:100%;min-height:100dvh;display:grid;place-items:center;padding:var(--space-5)}.login-card{width:100%;max-width:400px;padding:var(--space-5);border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-elevated);box-shadow:var(--shadow)}.login-brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}.login-brand h1{margin:0;font-size:var(--text-lg);letter-spacing:var(--tracking-snug)}.login-brand p{margin:var(--space-1) 0 0;color:var(--text-muted);font-size:var(--text-sm)}.login-form{display:flex;flex-direction:column;gap:var(--space-2)}.login-form .field-help{margin-bottom:var(--space-1)}.login-form .btn-block{margin-top:var(--space-1)}