:root{--cream: #faf6ef;--ink: #333333;--ink-soft: #5f5847;--green: #4a8c3f;--green-dark: #2f5d3a;--green-pale: #eef4ea;--ice: #3a6ea5;--ice-dark: #27507a;--ice-pale: #e8f0f9;--terra: #d97757;--terra-dark: #b4552d;--terra-pale: #fbeae3;--amber: #b7791f;--amber-pale: #fdf3dc;--line: #e6ddca;--card: #ffffff}@media(prefers-color-scheme:dark){:root{--cream: #23211c;--ink: #f0ece2;--ink-soft: #b8b09c;--green: #6cb45e;--green-dark: #8fce82;--green-pale: #2c3a28;--ice: #6b9bd2;--ice-dark: #a9c8ea;--ice-pale: #263446;--terra: #e08a6c;--terra-dark: #f0a98f;--terra-pale: #46302a;--amber: #e2a94a;--amber-pale: #443620;--line: #454035;--card: #2e2b24}}*{box-sizing:border-box}html,body{margin:0}body{background:var(--cream);color:var(--ink);font-family:system-ui,-apple-system,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif;-webkit-text-size-adjust:100%;line-height:1.6}#app{max-width:560px;margin:0 auto;min-height:100vh;padding:20px 16px calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}button,input,select{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;border:none;background:none;padding:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--terra);outline-offset:2px}img{display:block}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.top h1{font-size:24px;margin:0;color:var(--ice-dark)}.summary{margin:4px 0 0;font-size:15px;color:var(--ink-soft)}.sum-soon{color:var(--amber);font-weight:700}.sum-over{color:var(--terra-dark);font-weight:700}.btn-big{display:block;width:100%;min-height:64px;padding:14px 18px;border-radius:18px;background:var(--ice);color:#fff;font-size:22px;font-weight:800;letter-spacing:.02em;box-shadow:0 4px 0 var(--ice-dark)}.btn-big:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ice-dark)}.btn-big--terra{background:var(--terra);box-shadow:0 4px 0 var(--terra-dark)}.btn-big--terra:active{box-shadow:0 2px 0 var(--terra-dark)}.btn-big:disabled{opacity:.6}.cta{display:flex;flex-direction:column;gap:10px}.cta__sub{display:flex;gap:8px}.cta__sub .btn-sub{flex:1;text-align:center}.btn-sub{font-size:15px;font-weight:700;padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink-soft);min-height:44px}.btn-sub--accent{border-color:var(--ice);color:var(--ice-dark)}.btn-sub--terra{border-color:var(--terra);color:var(--terra-dark)}.btn-sub--danger{border-color:var(--line);color:var(--terra-dark)}.tabs{display:flex;gap:8px}.tab{flex:1;font-size:16px;font-weight:700;padding:10px 6px;border-radius:999px;border:2px solid var(--ice);color:var(--ice-dark);background:var(--card);white-space:nowrap}.tab[aria-selected=true]{background:var(--ice);color:#fff}.filters{display:flex;flex-direction:column;gap:10px}.search{width:100%;font-size:17px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card);-webkit-appearance:none;appearance:none}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{font-size:14px;font-weight:700;padding:8px 12px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink-soft);min-height:40px}.chip[aria-pressed=true]{border-color:var(--green);background:var(--green-pale);color:var(--green-dark)}.sortrow{font-size:14px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}.sortrow select{font-size:15px;padding:8px 10px;border-radius:10px;border:2px solid var(--line);background:var(--card)}.cards{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.card{display:flex;align-items:stretch;gap:10px;border-radius:16px;border:2px solid var(--line);background:var(--card);padding:10px}.card--soon{border-color:var(--amber)}.card--over{border-color:var(--terra);background:var(--terra-pale)}.card__main{flex:1;display:flex;align-items:center;gap:12px;text-align:left;min-width:0}.card__main--static{cursor:default}.card__photo{flex:none;width:76px;height:76px;border-radius:12px;object-fit:cover;background:var(--ice-pale)}.card__photo--none{display:inline-flex;align-items:center;justify-content:center;font-size:36px}.card__body{display:flex;flex-direction:column;gap:2px;min-width:0}.card__name{font-size:19px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}.card__qty{font-size:16px;font-weight:700;color:var(--ink)}.card__cat{font-size:13px;font-weight:400;color:var(--ink-soft)}.card__date{font-size:13px;color:var(--ink-soft)}.badge{display:inline-block;width:fit-content;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--green-pale);color:var(--green-dark)}.badge--soon{background:var(--amber-pale);color:var(--amber)}.badge--over{background:var(--terra);color:#fff}.card__out{flex:none;align-self:center;width:64px;min-height:64px;border-radius:14px;background:var(--terra);color:#fff;font-size:16px;font-weight:800;box-shadow:0 3px 0 var(--terra-dark)}.card__out:active{transform:translateY(2px);box-shadow:0 1px 0 var(--terra-dark)}.card--used{flex-direction:column}.card__actions{display:flex;flex-wrap:wrap;gap:8px}.card__actions .btn-sub{flex:1;text-align:center}.empty{text-align:center;color:var(--ink-soft);font-size:16px;padding:28px 8px;margin:0}.hint{font-size:13px;color:var(--ink-soft);margin:0 0 10px}.log{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:15px}.log__row{padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);white-space:pre-wrap}.log__row--in{border-left:4px solid var(--ice)}.log__row--out{border-left:4px solid var(--terra)}.log__row--restore{border-left:4px solid var(--green)}.log__row--delete{border-left:4px solid var(--line);color:var(--ink-soft)}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.back{font-size:15px;font-weight:700;color:var(--ice-dark);padding:6px 0;text-align:left}.detail{display:flex;flex-direction:column;gap:12px}.detail__photo{width:100%;max-height:60vh;object-fit:contain;border-radius:16px;background:var(--ice-pale)}.detail__photo--none{display:flex;align-items:center;justify-content:center;height:160px;font-size:64px}.detail__name{margin:0;font-size:26px;line-height:1.35;overflow-wrap:anywhere}.detail__dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:16px}.detail__dl dt{color:var(--ink-soft);font-size:14px}.detail__dl dd{margin:0}.detail__qty{font-size:24px}.detail__out{display:flex;flex-direction:column;gap:8px}.form{display:flex;flex-direction:column;gap:16px}.form__title{margin:0;font-size:22px;color:var(--ice-dark)}.photo-box{display:flex;flex-direction:column;gap:8px}.photo-box__img{width:100%;max-height:46vh;object-fit:contain;border-radius:16px;background:var(--ice-pale)}.photo-box__none{display:flex;align-items:center;justify-content:center;height:120px;border-radius:16px;border:2px dashed var(--line);color:var(--ink-soft);font-size:15px}.photo-box__btns{display:flex;gap:8px;flex-wrap:wrap}.photo-box__btns .btn-sub{flex:1;text-align:center;font-size:14px;white-space:nowrap;padding-inline:8px}.field{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700;color:var(--ink-soft);margin:0;padding:0;border:none;min-width:0}.field legend{padding:0;margin-bottom:6px}.field__hint{font-size:12px;font-weight:400}.field input[type=text],.field input[type=date],.field input[type=number],.field select{width:100%;font-size:18px;font-weight:400;color:var(--ink);padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--card);min-width:0;-webkit-appearance:none;appearance:none}.field.two{flex-direction:row;gap:10px}.field.two label{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.chips--left{margin-top:-6px}.stepper{display:flex;gap:8px;align-items:stretch}.stepper__btn{flex:none;width:56px;border-radius:12px;border:2px solid var(--ice);color:var(--ice-dark);background:var(--card);font-size:24px;font-weight:800}.field .stepper input[type=number]{flex:none;width:76px;padding-inline:4px;text-align:center}.field .stepper select{flex:1;width:auto;min-width:0;-webkit-appearance:menulist;appearance:menulist}.radios{display:flex;flex-wrap:wrap;gap:8px}.radio{position:relative}.radio input{position:absolute;opacity:0;width:1px;height:1px}.radio span{display:inline-block;font-size:15px;font-weight:700;padding:9px 12px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink-soft);min-height:42px}.radio input:checked+span{border-color:var(--green);background:var(--green-pale);color:var(--green-dark)}.radio input:focus-visible+span{outline:3px solid var(--terra);outline-offset:2px}.backup{margin-top:auto;font-size:14px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:14px}.backup summary{cursor:pointer;font-weight:700}.backup p{margin:8px 0 0}footer{font-size:13px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:14px;line-height:1.8}footer a{color:var(--ice-dark)}.dlg{border:none;border-radius:20px;padding:20px;width:min(92vw,420px);background:var(--card);color:var(--ink);display:none;flex-direction:column;gap:10px}.dlg[open]{display:flex}.dlg::backdrop{background:#00000073}.dlg__title{margin:0 0 6px;font-size:20px;font-weight:800;text-align:center}.dlg__sub{font-size:14px;font-weight:400;color:var(--ink-soft)}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:999px;font-size:15px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:92vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%)}
