:root{--bg: #26282c;--surface: #303338;--surface-alt: #3a3d43;--border: #494c53;--text: #e4e2dc;--muted: #9b9da3;--accent: #5fae76;--accent-soft: #2c3c30;--danger: #e2795f;--warn-bg: #3c3423;--warn-border: #6e5a35;--radius: 10px;--shadow: 0 1px 3px rgba(0, 0, 0, .35)}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:15px}#app{max-width:1240px;margin:0 auto;padding:0 20px 40px}h1,h2,h3{margin:0}button{font:inherit;cursor:pointer}.topbar{display:flex;align-items:center;gap:24px;padding:18px 0 14px}.topbar .logo{font-size:20px;font-weight:700}.topbar nav{display:flex;gap:6px}.topbar nav button{border:1px solid transparent;background:none;color:var(--muted);padding:8px 14px;border-radius:999px;font-weight:600}.topbar nav button:hover{color:var(--text)}.topbar nav button.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.reminder{display:flex;align-items:center;gap:10px;background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px}.reminder .dismiss{margin-left:auto;border:none;background:none;color:var(--muted);font-size:16px;padding:2px 6px}.reminder .dismiss:hover{color:var(--text)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.btn{background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600}.btn:hover{filter:brightness(1.1)}.btn:disabled{opacity:.5;cursor:default}.btn.secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn.danger-link{background:none;color:var(--danger);border:none;padding:4px 8px}input,select,textarea{font:inherit;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 10px;background:var(--surface)}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}label{font-size:13px;font-weight:600;color:var(--muted);display:block;margin-bottom:4px}.error-msg{color:var(--danger);font-size:14px;margin:8px 0}.empty{color:var(--muted);font-style:italic;padding:12px 0}.calendar-layout{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:start}.calendar-layout>*,.shop-layout>*{min-width:0}.recipe-tray{padding:14px;position:sticky;top:12px}.recipe-tray h3{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}.recipe-tray .hint{font-size:12px;color:var(--muted);margin-top:10px}.tray-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.tray-head h3{margin-bottom:0}.tray-group-label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 6px;padding-top:8px;border-top:1px solid var(--border)}.tray-group-label:first-of-type{margin-top:0;padding-top:0;border-top:none}.recipe-card{border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:8px 10px;margin-bottom:8px;cursor:grab;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)}.recipe-card:active{cursor:grabbing}.recipe-card-body{flex:1;min-width:0}.recipe-card .title{font-weight:600;font-size:14px}.recipe-card .meta{font-size:12px;color:var(--muted)}.card-edit-btn{border:none;background:none;color:var(--muted);font-size:13px;padding:2px 4px;align-self:flex-start;opacity:.5;transition:opacity .12s}.recipe-card:hover .card-edit-btn{opacity:1}.card-edit-btn:hover{color:var(--text)}.week-nav{display:flex;align-items:center;gap:12px;margin-bottom:12px}.week-nav h2{font-size:17px}.week-nav .spacer{flex:1}.calendar-grid{display:grid;grid-template-columns:70px repeat(7,1fr);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:visible}.calendar-grid>:first-child{border-top-left-radius:var(--radius)}.calendar-grid:not(.compact)>:nth-child(8){border-top-right-radius:var(--radius)}.calendar-grid.compact>:nth-child(7){border-top-right-radius:var(--radius)}.calendar-grid>:last-child{border-bottom-right-radius:var(--radius)}.calendar-grid:not(.compact)>.slot-label:last-of-type{border-bottom-left-radius:var(--radius)}.calendar-grid.compact>:nth-last-child(7){border-bottom-left-radius:var(--radius)}.calendar-grid .head,.calendar-grid .slot-label{padding:8px 6px;font-size:12px;font-weight:700;background:var(--surface-alt);border-bottom:1px solid var(--border);text-align:center}.calendar-grid .slot-label{border-right:1px solid var(--border);border-bottom:none;display:flex;align-items:center;justify-content:center;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.calendar-grid .head.today{color:var(--accent)}.day-cell{min-height:92px;border-top:1px solid var(--border);border-left:1px solid var(--border);padding:6px;transition:background .12s}.day-cell.drag-over{background:var(--accent-soft)}.day-cell.dinner{min-height:110px}.meal-chip{background:var(--accent-soft);border:1px solid var(--accent);border-radius:7px;padding:5px 7px;margin-bottom:5px;font-size:12.5px;cursor:grab}.meal-chip:active{cursor:grabbing}.meal-chip.leftovers{background:var(--surface-alt);border-color:var(--border);color:var(--muted)}.meal-chip .chip-title{font-weight:600;display:block}.meal-chip .chip-actions{display:flex;gap:4px;margin-top:3px}.meal-chip .chip-actions button{border:none;background:none;padding:0 3px;font-size:12px;color:var(--muted)}.meal-chip .chip-actions button:hover{color:var(--text)}.meal-chip.restaurant{background:#443626;border-color:#a67c45}.restaurant-card{border-style:dashed;margin-bottom:12px}.chip-note-input{width:100%;font-size:12px;padding:3px 6px;border-radius:5px}.zoom-toggle{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}.zoom-toggle button{border:none;background:var(--surface);padding:7px 12px;color:var(--muted);font-weight:600;font-size:13px}.zoom-toggle button+button{border-left:1px solid var(--border)}.zoom-toggle button.active{background:var(--accent-soft);color:var(--accent)}.quick-add{width:100%;border:1px dashed var(--border);background:none;color:var(--muted);border-radius:6px;padding:1px 0;font-size:13px;opacity:.45;transition:opacity .12s}.day-cell:hover .quick-add{opacity:1}.quick-add:hover{color:var(--accent);border-color:var(--accent)}.quick-add-input{width:100%;padding:4px 6px;font-size:12.5px}.quick-add-wrap{position:relative}.quick-add-menu{position:absolute;top:calc(100% + 2px);left:0;min-width:175px;max-width:250px;max-height:170px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 18px #00000073;z-index:30}.quick-add-item{padding:6px 9px;font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-add-item.active{background:var(--accent-soft);color:var(--accent)}.type-tag-filter{position:relative}.filter-toggle{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:5px}.filter-toggle:hover{border-color:var(--accent)}.filter-count{background:var(--accent);color:#fff;border-radius:999px;font-size:11px;line-height:1;padding:2px 6px;font-weight:700}.filter-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:30;width:220px;max-height:340px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #00000073;padding:10px 12px}.filter-panel-head{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}.filter-panel-head--tags{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}.filter-clear{border:none;background:none;color:var(--accent);font-size:11.5px;text-transform:none;letter-spacing:normal}.filter-option{display:flex;align-items:center;gap:7px;font-size:13px;padding:4px 2px;cursor:pointer}.filter-option input{width:14px;height:14px;accent-color:var(--accent)}.calendar-grid.compact{grid-template-columns:repeat(7,1fr);margin-bottom:14px}.compact-cell{min-height:86px}.day-cell.past{background:#1d1f22}.day-cell.past.drag-over{background:var(--accent-soft)}.head.past{color:#656870}.day-cell.past .meal-chip:not(.restaurant):not(.leftovers){opacity:.75}.note-cell{min-height:34px;cursor:pointer}.day-note{font-size:12px;color:var(--muted);font-style:italic;line-height:1.25;display:block;padding:2px 2px 0;overflow-wrap:anywhere}.day-note.placeholder{opacity:0}.note-cell:hover .day-note.placeholder,.day-note-line:hover .day-note.placeholder{opacity:.6}.note-input{width:100%;padding:3px 6px;font-size:12px}.day-note-line{cursor:pointer;min-height:15px;margin-bottom:3px}.recipes-header{display:flex;align-items:center;margin-bottom:14px}.recipes-header .spacer{flex:1}.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.recipe-tile{padding:16px}.recipe-tile .tile-head{display:flex;align-items:baseline;gap:8px}.recipe-tile h3{font-size:16px;flex:1}.recipe-tile .desc{color:var(--muted);font-size:13.5px;margin:6px 0}.recipe-tile .facts{font-size:12.5px;color:var(--muted);margin-bottom:8px}.recipe-tile ul{margin:8px 0;padding-left:18px;font-size:13px}.recipe-tile .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.tag{font-size:11.5px;background:var(--accent-soft);color:var(--accent);padding:2px 9px;border-radius:999px;font-weight:600}.tile-actions{display:flex;gap:6px;margin-top:10px}.form-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:50}.recipe-form{width:640px;max-width:100%;padding:22px;background:var(--surface);border-radius:var(--radius)}.recipe-form h2{margin-bottom:16px}.form-row{display:flex;gap:12px;margin-bottom:12px}.form-row>div{flex:1}.ing-row{display:grid;grid-template-columns:1fr 90px 110px 32px;gap:8px;margin-bottom:8px;align-items:center}.ing-row button{border:none;background:none;color:var(--muted);font-size:16px}.ing-row button:hover{color:var(--danger)}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.shop-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}.shop-controls{padding:18px;position:sticky;top:12px}.shop-controls h3{font-size:15px;margin-bottom:12px}.shop-controls .field{margin-bottom:12px}.shop-controls input{width:100%}.past-lists{margin-top:20px}.past-lists h4{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}.past-lists button{display:block;width:100%;text-align:left;background:none;border:1px solid var(--border);border-radius:8px;padding:7px 10px;margin-bottom:6px;font-size:13px;color:var(--text)}.past-lists button:hover,.past-lists button.selected{border-color:var(--accent);background:var(--accent-soft)}.shop-list{padding:20px}.shop-list .list-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}.shop-list .list-head .remaining{color:var(--muted);font-size:13.5px}.store-section{margin-top:16px}.store-section h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:5px;margin:0 0 6px}.shop-item{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:6px;font-size:14.5px}.shop-item:hover{background:var(--surface-alt)}.shop-item input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}.shop-item.checked{color:var(--muted);text-decoration:line-through}.shop-item .qty{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}.shop-item.checked .qty{font-weight:400}@media(max-width:900px){.calendar-layout,.shop-layout{grid-template-columns:1fr}.recipe-tray,.shop-controls{position:static}}@media(max-width:700px){#app{padding:0 10px 24px}.topbar{flex-wrap:wrap;gap:8px 16px;padding:12px 0 10px}.week-nav{flex-wrap:wrap;gap:8px}.week-nav .spacer{display:none}.calendar-grid{overflow-x:auto;grid-template-columns:52px repeat(7,minmax(96px,1fr))}.calendar-grid.compact{grid-template-columns:repeat(7,minmax(96px,1fr))}.form-overlay{padding:16px 8px}}
