:root{color-scheme:light;--paper:#f7f7f4;--surface:#fff;--surface-2:#f3f5f0;--ink:#182520;--muted:#66736d;--line:#e5e9e3;--green:#28794f;--green-dark:#1f603d;--green-soft:#e4f3e8;--mint:#eaf6ec;--rose:#fce9e7;--yellow:#fff3d8;--blue:#e8f1fb;--lilac:#efebfc;--shadow:0 12px 34px rgba(28,55,39,.07);--radius:20px;--chip-h:27px;font-family:'DM Sans',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-synthesis:none;text-rendering:optimizeLegibility}html[data-theme='dark']{color-scheme:dark;--paper:#111a16;--surface:#19241f;--surface-2:#202d27;--ink:#eff7f1;--muted:#aab9b0;--line:#304038;--green:#73c28b;--green-dark:#92d4a4;--green-soft:#244332;--mint:#253b2c;--rose:#49302f;--yellow:#4a4029;--blue:#293b4b;--lilac:#38334b;--shadow:0 12px 34px rgba(0,0,0,.24)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--paper);font-size:14px}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit;text-decoration:none}.topbar{height:76px;padding:0 clamp(18px,2.2vw,40px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;font:800 25px 'Nunito',sans-serif;letter-spacing:-.04em;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:13px;background:var(--green);color:white;font-size:21px;transform:rotate(-7deg);animation:brand-bob 4s ease-in-out infinite}.week-nav{display:flex;align-items:center;justify-content:center;gap:16px;min-width:300px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:0 3px 14px rgba(20,45,31,.04)}.week-title{font:700 17px 'Nunito',sans-serif;min-width:196px;text-align:center;letter-spacing:-.02em}.icon-button{width:38px;height:38px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;font-size:25px;line-height:1;cursor:pointer;transition:transform .2s,background .2s,color .2s}.icon-button:hover{background:var(--green-soft);color:var(--green);transform:scale(1.08) rotate(-5deg)}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.this-week,.text-button{border:0;border-radius:999px;background:var(--surface-2);padding:10px 17px;font-weight:700;cursor:pointer;transition:transform .2s,background .2s}.this-week:hover,.text-button:hover{transform:translateY(-2px);background:var(--green-soft);color:var(--green)}.text-button{background:transparent;color:var(--muted);padding-inline:9px}.logout-form{margin:0}.app-layout{max-width:1920px;margin:18px auto 26px;padding:0 clamp(12px,1.5vw,28px);display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:stretch}.planner-panel,.library-panel{min-width:0;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;animation:panel-enter .55s cubic-bezier(.2,.8,.2,1) both}.planner-panel{padding:12px}.library-panel{width:330px;min-height:calc(100vh - 112px);padding:20px 17px;display:flex;flex-direction:column;overflow:visible}.grid-scroll{width:100%;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.meal-grid{display:grid;grid-template-columns:94px repeat(7,minmax(91px,1fr));grid-template-rows:96px repeat(var(--slot-count),minmax(94px,auto));min-width:760px;border-radius:15px;overflow:hidden}.grid-corner{background:var(--surface)}.day-header{position:relative;border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:background .25s,transform .25s;animation:fade-up .45s both}.day-header:nth-child(2){animation-delay:.03s}.day-header:nth-child(3){animation-delay:.07s}.day-header:nth-child(4){animation-delay:.11s}.day-header:nth-child(5){animation-delay:.15s}.day-header:nth-child(6){animation-delay:.19s}.day-header:nth-child(7){animation-delay:.23s}.day-header:nth-child(8){animation-delay:.27s}.day-header:hover{background:var(--green-soft);transform:translateY(-2px);z-index:1}.day-header.is-today{background:var(--mint)}.day-date{font-size:13px;color:var(--muted);font-weight:600}.day-name{font:800 16px 'Nunito',sans-serif;white-space:nowrap}.day-count{position:absolute;top:8px;right:9px;min-width:23px;height:23px;padding:0 6px;border-radius:50px;display:grid;place-items:center;background:var(--green-soft);color:var(--green-dark);font-size:12px;font-weight:800;animation:count-pop .5s cubic-bezier(.18,1.7,.5,1) both}.slot-label{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:9px 7px 9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);font:800 13px 'Nunito',sans-serif;line-height:1.15}.slot-label time{font:600 11px 'DM Sans',sans-serif;color:var(--muted)}.meal-cell{min-width:0;min-height:94px;padding:6px;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .22s,box-shadow .22s}.meal-cell:nth-child(odd){background:color-mix(in srgb,var(--surface) 96%,var(--green-soft))}.meal-cell.drag-hover{background:var(--green-soft);box-shadow:inset 0 0 0 2px var(--green);animation:drop-pulse .8s ease-in-out infinite}.meal-chip,.library-chip{border:1px solid transparent;border-radius:9px;min-width:0;min-height:var(--chip-h);padding:4px 8px;display:flex;align-items:center;gap:5px;line-height:1.22;font-size:12px;font-weight:600;overflow-wrap:anywhere;transition:transform .18s,box-shadow .18s,filter .18s;animation:chip-enter .42s cubic-bezier(.2,.8,.2,1) both}.meal-chip{background:var(--mint);cursor:grab;box-shadow:0 2px 4px rgba(41,90,55,.04)}.meal-chip:nth-child(3n+2){background:var(--blue)}.meal-chip:nth-child(3n){background:var(--lilac)}.meal-chip:nth-child(4n){background:var(--yellow)}.meal-chip:hover,.library-chip:hover{transform:translateY(-2px) rotate(-.6deg);box-shadow:0 6px 12px rgba(34,70,44,.12);filter:saturate(1.06)}.meal-chip:active{cursor:grabbing}.meal-chip.is-complete{opacity:.58;text-decoration:line-through;cursor:default}.meal-chip.is-dragging,.library-chip.is-dragging{opacity:.38;transform:scale(.94) rotate(2deg)}.meal-chip-name{min-width:0}.complete-mark{margin-left:auto;color:var(--green);font-weight:900}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}.library-heading h1{font:800 25px 'Nunito',sans-serif;letter-spacing:-.04em;margin:0;white-space:nowrap}.shuffle-button{border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:9px 12px;display:flex;align-items:center;gap:6px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .2s,background .2s}.shuffle-button:hover{background:var(--green-soft);transform:translateY(-2px)}.shuffle-button span{font-size:18px}.shuffle-spin span{animation:spin-shuffle .55s ease-in-out}.library-add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-bottom:14px}.library-add-row input,.login-form input,.slot-edit-row input{min-width:0;height:43px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);padding:0 13px;outline:none;transition:border .18s,box-shadow .18s,transform .18s}.library-add-row input:focus,.login-form input:focus,.slot-edit-row input:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 15%,transparent)}.library-add-row input::placeholder{color:var(--muted);opacity:.85}.add-meal-button,.primary-button{border:0;border-radius:13px;background:var(--green);color:#fff;padding:0 14px;font-weight:800;cursor:pointer;box-shadow:0 5px 12px color-mix(in srgb,var(--green) 22%,transparent);transition:transform .18s,box-shadow .18s,background .18s}.add-meal-button:hover,.primary-button:hover{background:var(--green-dark);transform:translateY(-2px) scale(1.02);box-shadow:0 8px 16px color-mix(in srgb,var(--green) 28%,transparent)}.add-meal-button:active,.primary-button:active{transform:scale(.96)}.add-meal-button:disabled,.primary-button:disabled{opacity:.55;cursor:wait}.library-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;overflow:auto;max-height:calc(100vh - 205px);padding:2px 2px 8px;scrollbar-width:thin}.library-chip{min-height:37px;background:var(--rose);cursor:grab;white-space:normal}.library-chip:nth-child(4n+2){background:var(--lilac)}.library-chip:nth-child(4n+3){background:var(--mint)}.library-chip:nth-child(4n){background:var(--yellow)}.drag-grip{color:color-mix(in srgb,var(--muted) 65%,transparent);font-size:14px;flex:none}.trash-drop-target{display:none;position:absolute;z-index:10;top:50%;left:50%;width:136px;height:136px;transform:translate(-50%,-50%) scale(.8);border:2px dashed #e57b77;border-radius:28px;background:color-mix(in srgb,var(--rose) 88%,var(--surface));color:#c94c47;place-items:center;font-size:55px;box-shadow:0 16px 40px rgba(130,48,46,.2);pointer-events:none}.trash-drop-target span{display:block;transform:rotate(-8deg);filter:drop-shadow(0 4px 5px rgba(130,48,46,.15))}.planner-dragging .trash-drop-target{display:grid;pointer-events:auto;animation:trash-arrive .28s cubic-bezier(.2,1.4,.5,1) forwards}.trash-hover .trash-drop-target{background:#f6c9c6;transform:translate(-50%,-50%) scale(1.08);animation:trash-wiggle .55s ease-in-out infinite}.toast-region{position:fixed;z-index:100;right:22px;bottom:20px;display:grid;gap:8px;pointer-events:none}.toast{max-width:min(380px,calc(100vw - 40px));padding:13px 17px;border-radius:14px;background:var(--ink);color:var(--surface);font-weight:700;box-shadow:var(--shadow);animation:toast-in .28s cubic-bezier(.2,1.2,.4,1)}.toast-error{background:#a83632;color:#fff}.toast-info{background:#385b8b;color:#fff}.toast-leave{animation:toast-out .25s ease-in forwards}.error-banner,.warning-banner,.success-banner{padding:12px 15px;margin:0 0 12px;border-radius:12px;background:#fce7e5;color:#8b2b28;font-weight:600}.warning-banner{background:var(--yellow);color:#715318}.success-banner{background:var(--green-soft);color:var(--green-dark)}.confirm-dialog{border:0;border-radius:21px;padding:24px;width:min(420px,calc(100vw - 32px));background:var(--surface);color:var(--ink);box-shadow:0 20px 70px rgba(0,0,0,.25)}.confirm-dialog::backdrop{background:rgba(12,24,17,.35);backdrop-filter:blur(3px)}.confirm-dialog h2{font:800 21px 'Nunito',sans-serif;margin:0 0 8px}.confirm-dialog p{color:var(--muted);margin:0 0 19px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.secondary-button,.danger-button{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:10px 14px;font-weight:700;cursor:pointer;transition:transform .18s}.secondary-button:hover,.danger-button:hover{transform:translateY(-2px)}.danger-button{border-color:#c8514c;background:#c8514c;color:#fff}.settings-shell{max-width:760px;margin:38px auto;padding:0 18px}.settings-shell h1{font:800 30px 'Nunito',sans-serif;margin:0 0 20px}.slot-settings-form{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.slot-list{display:grid;gap:9px}.slot-edit-row{display:grid;grid-template-columns:27px minmax(0,1fr) 170px 38px;gap:10px;align-items:end;padding:11px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2);animation:fade-up .3s both}.slot-edit-row label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:700}.slot-edit-row input{width:100%;height:39px;color:var(--ink);font-size:14px}.slot-edit-grip{align-self:center;color:var(--muted);font-size:17px}.remove-slot{height:38px;width:38px;border:0;border-radius:12px;background:var(--rose);color:#ab4640;font-size:22px;cursor:pointer;transition:transform .2s}.remove-slot:hover{transform:rotate(90deg) scale(1.08)}.slot-removing{animation:slot-collapse .22s ease-in forwards}.settings-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.settings-feedback{min-height:20px;color:var(--muted);font-weight:600}.login-page{display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 15% 10%,var(--green-soft),transparent 35%),var(--paper)}.login-card{width:min(420px,100%);padding:34px;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow);animation:panel-enter .5s both}.login-card h1{font:800 29px 'Nunito',sans-serif;text-align:center;margin:7px 0 24px}.login-mark{display:grid;place-items:center;margin:auto;width:52px;height:52px;border-radius:18px;background:var(--green);color:#fff;font-size:27px;animation:brand-bob 3.5s ease-in-out infinite}.login-form{display:grid;gap:10px}.login-form label{font-weight:700}.login-form input{width:100%;height:46px}.login-form .primary-button{height:46px;margin-top:8px}.shake-error{border-color:#d54c47!important;box-shadow:0 0 0 3px rgba(213,76,71,.16)!important;animation:shake .48s cubic-bezier(.36,.07,.19,.97) both}.is-adding{animation:button-pop .45s ease-in-out}.pop-in{animation:pop-in .36s cubic-bezier(.2,1.6,.5,1) both}.shuffle-pop{animation:shuffle-card .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--shuffle-index,0)*35ms)}
@keyframes panel-enter{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes chip-enter{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes brand-bob{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(4deg) translateY(-3px)}}@keyframes count-pop{0%{transform:scale(.6)}70%{transform:scale(1.18)}100%{transform:scale(1)}}@keyframes spin-shuffle{0%{transform:rotate(0)}60%{transform:rotate(200deg) scale(1.25)}100%{transform:rotate(360deg)}}@keyframes trash-arrive{to{transform:translate(-50%,-50%) scale(1)}}@keyframes trash-wiggle{0%,100%{rotate:-2deg}50%{rotate:2deg}}@keyframes drop-pulse{0%,100%{box-shadow:inset 0 0 0 2px var(--green)}50%{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--green) 50%,transparent)}}@keyframes toast-in{from{opacity:0;transform:translateX(15px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}@keyframes button-pop{50%{transform:scale(.94)}}@keyframes pop-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@keyframes shuffle-card{from{opacity:.4;transform:translateY(6px) rotate(-2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes slot-collapse{to{opacity:0;transform:scaleY(.2);margin:0;padding-block:0}}
@media(max-width:1250px){.app-layout{grid-template-columns:minmax(0,1fr) 300px}.library-panel{width:300px;padding:17px 13px}.meal-grid{grid-template-columns:82px repeat(7,minmax(82px,1fr));min-width:656px}.slot-label{font-size:12px;padding-left:9px}.day-name{font-size:14px}.library-heading h1{font-size:22px}.shuffle-button{padding:8px 9px;font-size:12px}}
@media(max-width:900px){.topbar{height:auto;min-height:66px;grid-template-columns:1fr auto;grid-template-rows:60px auto;padding:0 13px 8px}.week-nav{grid-column:2;grid-row:1;min-width:auto;gap:5px}.week-title{min-width:150px;font-size:14px}.top-actions{grid-column:1/-1;grid-row:2;display:flex;justify-content:flex-end;gap:8px}.app-layout{grid-template-columns:1fr;margin-top:10px}.library-panel{width:100%;min-height:330px}.library-list{max-height:360px;grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}.planner-panel{padding:8px}.meal-grid{grid-template-columns:76px repeat(7,minmax(90px,1fr));min-width:706px}}
@media(max-width:560px){.brand{font-size:20px}.brand-mark{width:31px;height:31px}.topbar{gap:7px}.week-title{min-width:128px;font-size:13px}.week-nav{padding:3px}.week-nav .icon-button{width:31px;height:31px}.app-layout{padding-inline:8px}.library-heading h1{font-size:22px}.library-panel{padding:15px 12px}.slot-edit-row{grid-template-columns:22px minmax(0,1fr) 125px 34px;gap:6px;padding:8px}.remove-slot{width:34px;height:36px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
