: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 14px; }
.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:68px; display:grid; grid-template-columns:44px minmax(0,1fr) 58px 34px; align-items:center; gap:6px; 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} }

.category-picker { grid-column:1 / -1; height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px; border-radius:12px; color:var(--muted); background:#f4f3ed; font-size:12px; font-weight:700; }
.category-picker select { min-width:125px; border:0; outline:0; color:var(--green); background:transparent; font-weight:800; text-align:right; }
.list-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 18px; border-block:1px solid #e8e8e1; color:var(--muted); background:#f7f5ef; font-size:10px; }
.list-tools button { min-height:32px; padding:0 10px; border:1px solid var(--line); border-radius:10px; color:var(--green); background:white; font-size:11px; font-weight:800; }
.category-section { margin-top:12px; overflow:hidden; border:1px solid #e4e5df; border-radius:16px; background:white; transition:box-shadow 150ms ease,opacity 150ms ease; }
.category-header { min-height:50px; display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:center; background:#f8f7f2; }
.category-toggle { height:50px; display:grid; grid-template-columns:12px minmax(0,1fr) auto 20px; align-items:center; gap:9px; padding:0 8px 0 14px; border:0; background:transparent; text-align:left; }
.category-color { width:10px; height:10px; border-radius:50%; }
.category-name { overflow:hidden; font-size:14px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.category-count { min-width:24px; padding:3px 7px; border-radius:99px; color:var(--muted); background:#e9e9e3; font-size:11px; font-weight:800; text-align:center; }
.category-chevron { color:var(--muted); font-size:18px; transition:transform 160ms ease; }
.category-section.collapsed .category-chevron { transform:rotate(-90deg); }
.category-section.collapsed .category-list { display:none; }
.category-list { min-height:42px; padding:0 8px; }
.drop-hint { margin:0; padding:13px; color:#a0a8a2; font-size:11px; text-align:center; }
.category-list:has(.item-row) .drop-hint { display:none; }
.drag-handle { width:34px; height:44px; display:grid; place-items:center; padding:0; border:0; color:#8d9790; background:transparent; font-size:24px; font-weight:800; line-height:1; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.category-drag { width:42px; }
.dragging { z-index:3; opacity:.48; outline:2px dashed var(--green); outline-offset:-2px; background:var(--green-soft); pointer-events:none; }
.is-dragging { cursor:grabbing; user-select:none; -webkit-user-select:none; }
.is-dragging .category-section { transition:none; }
.category-sheet { max-height:86svh; overflow:auto; }
.category-editor { display:grid; gap:9px; }
.category-editor-row { display:grid; grid-template-columns:42px minmax(0,1fr) 42px; gap:8px; align-items:center; }
.category-color-input { width:42px; height:42px; padding:4px; border:1px solid var(--line); border-radius:12px; background:white; }
.category-name-input,.new-category-form input { min-width:0; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:12px; outline:0; background:white; font-size:16px; }
.category-name-input:focus,.new-category-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.delete-category { width:42px; height:42px; border:0; border-radius:12px; color:#a94c45; background:#f8e9e6; font-size:20px; }
.delete-category:disabled { color:#b5b9b6; background:#efefeb; }
.new-category-form { display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:8px; margin-top:16px; }
.new-category-form button { border:0; border-radius:12px; color:white; background:var(--green); font-weight:800; }
.category-note { margin:12px 2px 0; color:var(--muted); font-size:10px; }

@media (max-width:370px) {
  .list-tools { padding-inline:13px; }
  .list-tools > span { max-width:145px; }
}

.view-panel { flex:1; display:flex; flex-direction:column; min-height:0; }
.active-category-display { grid-column:1 / -1; min-height:40px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:0 8px 0 12px; border-radius:12px; color:var(--muted); background:#f4f3ed; font-size:11px; }
.active-category-display strong { overflow:hidden; color:var(--green); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.active-category-display button { min-height:30px; padding:0 10px; border:1px solid var(--line); border-radius:9px; color:var(--green); background:white; font-size:11px; font-weight:800; }
.category-header.single-action { grid-template-columns:1fr; }
.flat-list { padding-inline:0; }
.flat-list .item-row:first-child { border-top:1px solid #e6e7e1; }
.category-view { padding:0 18px 18px; }
.category-intro { margin:6px 0 14px; padding:13px 14px; border-radius:14px; color:var(--muted); background:var(--green-soft); font-size:11px; line-height:1.6; }
.category-intro p { margin:0; }
.category-view .category-editor { padding:0; }
.none-category-choice { width:100%; min-height:58px; display:grid; grid-template-columns:14px minmax(0,1fr) 48px; align-items:center; gap:10px; padding:8px 10px 8px 15px; border:1px solid #e1e4de; border-radius:14px; color:var(--ink); background:white; text-align:left; }
.none-category-choice > span:nth-child(2) { display:flex; flex-direction:column; gap:2px; }
.none-category-choice strong { font-size:13px; }
.none-category-choice small { color:var(--muted); font-size:9px; }
.none-category-choice b { padding:7px 4px; border-radius:9px; color:var(--green); background:#e9eee9; font-size:10px; text-align:center; }
.none-category-choice.selected { border-color:#8ab29d; box-shadow:0 0 0 2px var(--green-soft); }
.none-category-choice.selected b { color:white; background:var(--green); }
.category-view .category-editor-row { grid-template-columns:52px 42px minmax(0,1fr) 38px 34px; padding:8px; border:1px solid #e1e4de; border-radius:14px; background:white; }
.category-editor-row.selected { border-color:#8ab29d; box-shadow:0 0 0 2px var(--green-soft); }
.category-use { width:52px; height:36px; padding:0; border:0; border-radius:10px; color:var(--green); background:#e9eee9; font-size:10px; font-weight:850; }
.category-editor-row.selected .category-use { color:white; background:var(--green); }
.category-view .category-color-input { width:38px; height:38px; }
.category-view .category-name-input { height:40px; }
.category-view .delete-category { width:36px; height:36px; }
.category-view .category-drag { width:32px; height:40px; }
.category-page-form { margin-top:16px; }
.category-empty { min-height:210px; display:grid; place-content:center; justify-items:center; padding:30px; border:1px dashed #ccd1cb; border-radius:16px; color:var(--muted); text-align:center; }
.category-empty > span { width:48px; height:48px; display:grid; place-items:center; margin-bottom:10px; border-radius:50%; color:var(--green); background:var(--green-soft); font-size:20px; }
.category-empty p { margin:0; font-size:13px; font-weight:850; }
.category-empty small { margin-top:5px; font-size:10px; }
.tabbar { position:sticky; bottom:0; z-index:5; display:grid; grid-template-columns:1fr 1fr; padding:8px 12px max(8px,env(safe-area-inset-bottom)); border-top:1px solid #e1e3de; background:rgb(255 253 248 / 94%); backdrop-filter:blur(12px); }
.tab-button { min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:0; border-radius:13px; color:#8a938d; background:transparent; font-size:10px; font-weight:800; }
.tab-button span { font-size:19px; line-height:1; }
.tab-button.active { color:var(--green); background:var(--green-soft); }
footer { padding-block:12px; }

@media (max-width:390px) {
  .category-view .category-editor-row { grid-template-columns:47px 38px minmax(0,1fr) 34px 30px; gap:5px; padding:7px 5px; }
  .category-use { width:47px; }
  .category-view .category-color-input { width:36px; }
  .category-view .delete-category { width:34px; }
  .category-view .category-drag { width:30px; }
  .category-view { padding-inline:13px; }
}