:root { --ink:#1f2923; --muted:#748078; --paper:#fffdf8; --canvas:#f2eee4; --line:#dce1d9; --green:#275f48; --green-soft:#e2eee7; --orange:#e8703a; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html { background:var(--canvas); }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 10% 0%,rgb(255 255 255 / 80%),transparent 35%),var(--canvas); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",sans-serif; overscroll-behavior:none; }
button,input { font:inherit; }
button { color:inherit; touch-action:manipulation; }
.app-shell { min-height:100svh; padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom)); }
.list-card { width:min(100%,540px); min-height:calc(100svh - 36px); margin:0 auto; display:flex; flex-direction:column; overflow:hidden; background:var(--paper); border:1px solid rgb(50 65 56 / 10%); border-radius:30px; box-shadow:0 20px 60px rgb(56 49 33 / 10%); }
.topbar { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:10px; padding:20px 18px 16px; }
.topbar>div { text-align:center; }
.eyebrow { margin:0 0 2px; color:var(--orange); font-size:10px; font-weight:800; letter-spacing:.18em; }
h1,h2 { margin:0; font-family:Georgia,"Yu Mincho",serif; letter-spacing:.03em; }
h1 { font-size:27px; }
.undo-button,.item-count { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; }
.undo-button { border:1px solid var(--line); background:white; font-size:25px; cursor:pointer; }
.undo-button:disabled { color:#b8beb9; background:#f7f6f1; cursor:default; }
.item-count { color:white; background:var(--green); font-size:14px; font-weight:800; }
.add-form { display:grid; grid-template-columns:minmax(0,1fr) 62px 52px; gap:8px; padding:6px 18px 20px; }
.add-form input { min-width:0; height:54px; padding:0 16px; border:1px solid var(--line); border-radius:16px; outline:none; background:#fff; color:var(--ink); font-size:16px; }
.add-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.quantity-button,.add-button { border:0; border-radius:16px; cursor:pointer; }
.quantity-button { min-width:58px; min-height:46px; display:flex; align-items:baseline; justify-content:center; gap:2px; background:var(--green-soft); color:var(--green); font-weight:800; }
.quantity-button span { font-size:19px; }
.quantity-button small { font-size:11px; }
.add-button { color:white; background:var(--orange); font-size:27px; box-shadow:0 6px 14px rgb(232 112 58 / 25%); }
.column-labels { display:grid; grid-template-columns:56px 1fr 64px; padding:10px 20px 8px; border-block:1px solid #e8e8e1; color:var(--muted); background:#f7f5ef; font-size:10px; font-weight:800; letter-spacing:.08em; }
.column-labels span:first-child { color:transparent; }
.column-labels span:last-child { text-align:center; }
.items { flex:1; padding:0 18px; }
.item-row { min-height:70px; display:grid; grid-template-columns:48px minmax(0,1fr) 64px; align-items:center; gap:8px; border-bottom:1px solid #e6e7e1; animation:row-in 180ms ease-out; }
@keyframes row-in { from { opacity:0; transform:translateY(-5px); } }
.check-button { width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; cursor:pointer; }
.check-button span { width:25px; height:25px; display:block; border:2px solid #8b978f; border-radius:8px; background:white; }
.check-button:active span { border-color:var(--green); background:var(--green-soft); transform:scale(.9); }
.item-name { overflow-wrap:anywhere; font-size:16px; font-weight:700; line-height:1.45; }
.empty-state { min-height:330px; display:grid; place-content:center; justify-items:center; color:var(--muted); text-align:center; }
.empty-state>span { width:58px; height:58px; display:grid; place-items:center; margin-bottom:14px; border-radius:50%; color:var(--green); background:var(--green-soft); font-size:25px; }
.empty-state p,.empty-message { margin:0; font-weight:800; }
.empty-state small { margin-top:6px; font-size:12px; }
.empty-message { padding:60px 0; color:var(--muted); text-align:center; }
footer { padding:18px; color:var(--muted); font-size:11px; text-align:center; }
.save-dot { width:7px; height:7px; display:inline-block; margin-right:6px; border-radius:50%; background:#63a57d; }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:flex; align-items:flex-end; justify-content:center; padding-top:10vh; background:rgb(21 30 25 / 48%); backdrop-filter:blur(3px); }
.quantity-sheet { width:min(100%,540px); padding:10px 20px max(26px,env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; background:var(--paper); box-shadow:0 -16px 50px rgb(0 0 0 / 16%); animation:sheet-in 220ms ease-out; }
@keyframes sheet-in { from { transform:translateY(100%); } }
.sheet-handle { width:40px; height:5px; margin:0 auto 14px; border-radius:99px; background:#c9cdc8; }
.sheet-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.sheet-heading h2 { font-size:23px; }
.close-button { width:42px; height:42px; border:0; border-radius:50%; color:var(--muted); background:#eeeee8; font-size:24px; cursor:pointer; }
.quantity-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.quantity-grid button { aspect-ratio:1; border:1px solid var(--line); border-radius:14px; background:white; font-weight:800; cursor:pointer; }
.quantity-grid button.selected { border-color:var(--green); color:white; background:var(--green); box-shadow:0 5px 12px rgb(39 95 72 / 20%); }
@media (min-width:600px) { .app-shell{padding-block:32px}.list-card{min-height:calc(100svh - 64px)}.quantity-sheet{margin-bottom:20px;border-radius:28px} }
@media (max-width:370px) { .app-shell{padding-inline:8px}.list-card{border-radius:24px}.topbar,.add-form,.items{padding-inline:13px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important} }