:root{--bg:#f2f1ee;--surface:#fff;--surface-2:#e9e8e3;--surface-3:#dcdbd5;--ink:#121212;--muted:#6b6b66;--accent:#2436ff;--accent-strong:#1b27d6;--accent-ink:#fff;--field-navy:#050a5c;--field-navy-ink:#fff;--ok:#0e7a3d;--soon:#f59e0b;--expired:#ff3b1f;--low:#0f766e;--none:#9ca3af;--soldout:#121212;--danger:#ff3b1f;--danger-soft:#ffe9e2;--good-soft:#e3f4e9;--warn-soft:#fff2df;--cat-food:#0e7a3d;--cat-drink:#0b7fb8;--cat-daily:#6b7280;--cat-medicine:#475569;--cat-cleaning:#d97706;--font-display:"Archivo", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;--font-body:"Archivo", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;--text-xs:.75rem;--text-sm:.82rem;--text-body:.95rem;--text-md:1.05rem;--text-lg:1.25rem;--text-xl:1.6rem;--text-display:clamp(2rem, 1.4rem + 2.4vw, 3rem);--radius-lg:20px;--radius-md:12px;--radius-pill:999px;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-soft:cubic-bezier(.33, 1, .68, 1);--t-press:.14s;--t-hover:.18s;--t-ui:.24s}[hidden]{display:none!important}*{box-sizing:border-box}body{font-family:var(--font-body);font-size:var(--text-body);background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;margin:0;line-height:1.55}.app{max-width:920px;margin:0 auto;padding:28px 20px 80px}@media (prefers-reduced-motion:no-preference){.header,.banner,.stats,.shopping,.filters,.ops,.prefs,.form,.empty-state,.item-list{animation:rise-in .55s var(--ease-out) both}.stats{animation-delay:30ms}.shopping{animation-delay:60ms}.filters{animation-delay:90ms}.ops{animation-delay:.12s}.item-list{animation-delay:.15s}}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:scale(.97)translateY(8px)}to{opacity:1;transform:none}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.header{background:var(--ink);color:#fff;border-radius:var(--radius-lg);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;padding:14px 18px;display:flex}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-mark{background:var(--accent);color:#fff;width:32px;height:32px;font-family:var(--font-display);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;font-weight:800;line-height:1;display:inline-flex}.brand-name{font-family:var(--font-display);letter-spacing:-.01em;color:#fff;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0;font-size:1.1rem;font-weight:800;line-height:1.2;display:flex}.brand-sub{font-family:var(--font-body);font-size:var(--text-xs);color:#ffffff9e;letter-spacing:0;font-weight:500}.header-actions{flex-wrap:wrap;gap:8px;display:flex}.header .btn{color:#fff;background:#ffffff1f}.header .btn:hover{background:#ffffff38}.header .btn-primary{background:var(--accent);color:#fff}.header .btn-primary:hover{background:var(--accent-strong);color:#fff}.header .btn-active{color:var(--ink);background:#fff}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.banner{background:var(--warn-soft);border-radius:var(--radius-lg);font-size:var(--text-sm);justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;padding:12px 16px;display:flex}.banner-lines{flex-direction:column;gap:4px;display:flex}.banner-lines p{margin:0}.banner-error{color:#b42318;font-weight:600}.banner-warn{color:#92400e}.banner .btn{color:var(--ink);background:#fff}.card{background:var(--surface);border-radius:var(--radius-lg);border:0;padding:18px 20px}.btn{background:var(--surface-2);color:var(--ink);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--text-sm);cursor:pointer;white-space:nowrap;transition:background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);border:0;align-items:center;gap:6px;padding:8px 16px;font-weight:600;line-height:1.4;display:inline-flex}.btn:hover{background:var(--surface-3)}.btn:active{transform:scale(.97)}.btn .icon{flex-shrink:0}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-primary:hover{background:var(--accent-strong);color:#fff}.btn-danger{background:var(--danger-soft);color:var(--danger)}.btn-danger:hover{background:#ffd6cb}.btn-link{color:var(--accent);background:0 0;padding:4px 8px;font-weight:600}.btn-link:hover{background:0 0;text-decoration:underline}.btn-active,.btn-active:hover{background:var(--ink);color:#fff}.btn-icon{padding:6px;line-height:1}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:disabled:hover{background:var(--surface-2);color:var(--ink)}.prefs{margin-bottom:16px}.prefs .ops-head{margin-bottom:12px}.prefs-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.prefs-field{font-size:var(--text-sm);color:var(--muted);flex-direction:column;gap:6px;font-weight:600;display:flex}.prefs-field input,.prefs-field select{background:var(--surface-2);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-body);color:var(--ink);border:0;width:100%;padding:9px 12px;font-weight:500}.prefs-field input:focus,.prefs-field select:focus{outline:2px solid var(--accent);outline-offset:2px;background:#fff}.prefs-hint{font-size:var(--text-xs);color:var(--muted);font-weight:400}.prefs-hint-error{color:var(--danger);font-weight:600}.form{margin-bottom:18px}.form h2{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.01em;margin:0 0 14px;font-weight:800}.form-errors{background:var(--danger-soft);color:#b42318;border-radius:var(--radius-md);font-size:var(--text-sm);margin:0 0 14px;padding:10px 14px 10px 30px;font-weight:500}.form-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;display:grid}.form-grid label{font-size:var(--text-sm);color:var(--muted);flex-direction:column;gap:6px;font-weight:600;display:flex}.form-grid input,.form-grid select{background:var(--surface-2);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-body);color:var(--ink);border:0;width:100%;padding:9px 12px;font-weight:500}.form-grid input:focus,.form-grid select:focus{outline:2px solid var(--accent);outline-offset:2px;background:#fff}.form-actions{gap:10px;margin-top:16px;display:flex}.item-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.item{padding:18px 20px 14px;position:relative;overflow:hidden}.item:before{content:"";background:var(--none);width:6px;position:absolute;top:0;bottom:0;left:0}.item.is-expired:before{background:var(--expired)}.item.is-soon:before{background:var(--soon)}.item.is-low:before{background:var(--low)}.item.is-soldout:before{background:var(--soldout)}.item.is-ok:before{background:var(--ok)}.item-body{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.item-info{flex:1;min-width:0}.item-main{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.item-name{font-family:var(--font-body);font-size:var(--text-md);word-break:break-word;font-weight:700;line-height:1.35}.item-meta{font-size:var(--text-sm);color:var(--muted);word-break:break-word;margin-top:6px;line-height:1.5}.item-qty{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:2px;display:flex}.item-qty-num{font-family:var(--font-display);font-size:var(--text-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-weight:800;line-height:1}.item-qty-unit{font-size:var(--text-xs);color:var(--muted);font-weight:600}.item-actions{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.item-logs{background:var(--surface-2);border-radius:var(--radius-md);flex-direction:column;gap:8px;margin-top:14px;padding:12px 14px;display:flex}.item-logs-head{font-size:var(--text-xs);flex-wrap:wrap;justify-content:space-between;gap:10px;display:flex}.log-undo{margin-left:auto}.empty-state{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:40px 24px;display:flex}.empty-state h2{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.01em;margin:0;font-weight:800}.empty-state p{max-width:460px;margin:0;line-height:1.6}.empty-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;display:flex}.empty{text-align:center;color:var(--muted);margin-top:32px}.badge{border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--text-xs);color:#fff;background:var(--none);white-space:nowrap;align-items:center;padding:3px 10px;font-weight:600;line-height:1.5;display:inline-flex}.badge-ok{background:var(--ok)}.badge-soon{background:var(--soon);color:#3b2500}.badge-expired{background:var(--expired)}.badge-none{background:var(--none)}.badge-low{background:var(--low)}.badge-soldout{background:var(--soldout)}.badge-consume{background:var(--soon);color:#3b2500}.badge-restock{background:var(--ok)}.badge-cat{background:var(--surface-2);color:var(--ink)}.badge-cat.badge-food{background:var(--good-soft);color:var(--cat-food)}.badge-cat.badge-drink{color:var(--cat-drink);background:#e3f1f9}.badge-cat.badge-daily{color:var(--cat-daily);background:#eceef1}.badge-cat.badge-medicine{color:var(--cat-medicine);background:#e8ebef}.badge-cat.badge-cleaning{color:var(--cat-cleaning);background:#fdf0de}.stats{background:var(--accent);color:#fff;margin-bottom:16px;padding:22px}.stats-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:16px;display:flex}.stats-head h2{font-family:var(--font-display);font-size:var(--text-md);color:#fff;letter-spacing:-.01em;margin:0;font-weight:800}.stats-aside{font-size:var(--text-sm);color:#ffffffd1;font-variant-numeric:tabular-nums}.stats-row{grid-template-columns:repeat(6,1fr);gap:10px;display:grid}.stat{border-radius:var(--radius-md);text-align:left;font:inherit;color:var(--ink);background:#fff;border:0;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;display:flex}.stat-hero{background:var(--ink);color:#fff;grid-column:span 2}.stat-value{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-weight:800;line-height:1.1}.stat-hero .stat-value{font-size:var(--text-display)}.stat-label{font-size:var(--text-xs);color:var(--muted);font-weight:600}.stat-hero .stat-label{color:#ffffffb8}.stat-expired .stat-value{color:var(--expired)}.stat-soon .stat-value{color:var(--soon)}.stat-low .stat-value{color:var(--low)}.stat-clickable{cursor:pointer;transition:background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out)}.stat-clickable:hover{background:#eef0ff}.stat-hero.stat-clickable:hover{background:#232323}.stat-clickable:active{transform:scale(.97)}.cat-dist{flex-direction:column;gap:8px;margin-top:18px;display:flex}.cat-dist-row{font-size:var(--text-sm);grid-template-columns:80px 1fr 96px;align-items:center;gap:10px;display:grid}.cat-dist-label{color:#ffffffd9;font-weight:600}.cat-dist-bar{border-radius:var(--radius-pill);background:#ffffff38;height:10px;overflow:hidden}.cat-dist-fill{border-radius:var(--radius-pill);min-width:0;height:100%;transition:width .3s var(--ease-out)}.cat-dist-fill.badge-food{background:var(--cat-food)}.cat-dist-fill.badge-drink{background:#4cc2ff}.cat-dist-fill.badge-daily{background:#aab2bd}.cat-dist-fill.badge-medicine{background:#8fa0b5}.cat-dist-fill.badge-cleaning{background:#ffb347}.cat-dist-value{text-align:right;color:#ffffffbf;font-variant-numeric:tabular-nums}.shopping{background:var(--field-navy);color:var(--field-navy-ink);margin-bottom:16px}.shopping .ops-head h2{color:#fff}.shopping .muted{color:#ffffffb3}.shopping .btn{color:#fff;background:#ffffff1f}.shopping .btn:hover{background:#ffffff3d}.shopping .btn:disabled{color:#ffffff73;background:#ffffff14}.shopping .btn-link{color:#b9c2ff;background:0 0}.shopping .btn-link:hover{color:#fff;background:0 0}.panel-actions{align-items:center;gap:8px;display:flex}.shopping-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.shopping-item{font-size:var(--text-sm);border-radius:var(--radius-md);background:#ffffff0f;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;display:flex}.shopping-name{color:#fff;font-weight:700}.shopping-qty{color:#ffffffb8;font-size:var(--text-xs);font-variant-numeric:tabular-nums}.shopping-item .btn-link{margin-left:auto}.filters{flex-direction:column;gap:12px;margin-bottom:16px;display:flex}.filter-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.filter-group{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.filter-label{font-size:var(--text-sm);color:var(--muted);margin-right:2px;font-weight:600}.chip{background:var(--surface-2);color:var(--ink);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--text-sm);cursor:pointer;transition:background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);border:0;padding:6px 14px;font-weight:600}.chip:hover{background:var(--surface-3)}.chip:active{transform:scale(.97)}.chip-active,.chip-active:hover{background:var(--ink);color:#fff}.filter-select{font-size:var(--text-sm);color:var(--muted);align-items:center;gap:8px;font-weight:600;display:flex}.filter-select select,.filter-select input{background:var(--surface-2);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-sm);color:var(--ink);border:0;max-width:100%;padding:7px 10px;font-weight:500}.filter-select select:focus,.filter-select input:focus{outline:2px solid var(--accent);outline-offset:2px;background:#fff}.filter-keyword input{width:160px}.ops{margin-bottom:16px}.ops-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;display:flex}.ops h2{font-family:var(--font-display);font-size:var(--text-md);letter-spacing:-.01em;margin:0;font-weight:800}.log-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.log-item{font-size:var(--text-sm);background:var(--surface-2);border-radius:var(--radius-md);flex-wrap:wrap;align-items:center;gap:10px;padding:9px 12px;display:flex}.item-logs .log-item{background:#fff}.log-date{color:var(--muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums;margin-left:auto}.muted{color:var(--muted);font-size:var(--text-sm)}.list-count{font-size:var(--text-sm);color:var(--muted);font-variant-numeric:tabular-nums;margin:0 0 10px;font-weight:600}.modal-overlay{z-index:50;animation:fade-in .2s var(--ease-out) both;background:#1212128c;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.modal{width:100%;max-width:440px;max-height:86vh;animation:modal-in .25s var(--ease-out) both;padding:20px;overflow-y:auto}.modal-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.modal-head h2{font-family:var(--font-display);font-size:var(--text-md);letter-spacing:-.01em;margin:0;font-weight:800}.modal-body p{margin:0 0 10px;line-height:1.6}.modal-actions{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.dialog-error{color:var(--danger);font-size:var(--text-sm);font-weight:600}.adjust-row{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.adjust-quick{gap:6px;padding-bottom:2px;display:flex}.toast{border-radius:var(--radius-pill);background:var(--ink);color:#fff;width:min(92vw,480px);font-size:var(--text-sm);z-index:60;animation:toast-in .3s var(--ease-out) both;align-items:center;gap:10px;padding:12px 18px;display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}.toast span{flex:1;line-height:1.45}.toast .btn-link{color:#b9c2ff;font-weight:700}.toast .btn-link:hover{color:#fff;text-decoration:none}.toast-close{color:#ffffffb3;cursor:pointer;background:0 0;border:0;padding:4px;font-size:.8rem;display:inline-flex}.toast-close:hover{color:#fff}.icon{width:14px;height:14px}@media (width<=700px){.app{padding:14px 12px 72px}.header{padding:12px 14px}.brand-name{font-size:1rem}.header-actions{width:100%}.header-actions .btn{flex:auto;justify-content:center}.stats-row{grid-template-columns:repeat(2,1fr)}.stat-hero{grid-column:1/-1}.cat-dist-row{grid-template-columns:68px 1fr}.cat-dist-value{display:none}.item-body{flex-direction:column}.item-qty{flex-direction:row;align-items:baseline;gap:6px}.item-qty-num{font-size:1.6rem}.item-actions{justify-content:stretch}.item-actions .btn{flex:40%;justify-content:center}.filter-row{align-items:stretch}.filter-select{flex:100%;justify-content:space-between}.filter-keyword input{flex:1;width:100%}.toast{bottom:14px}}
