:root {
    --ink: #315154;
    --ink-soft: #6b8180;
    --forest: #82b8ac;
    --forest-deep: #477871;
    --tomato: #efad8e;
    --tomato-dark: #ad6148;
    --cream: #f8f6ee;
    --paper: #fffdf8;
    --sand: #cfddd7;
    --sage: #deeee8;
    --sage-deep: #c7e3da;
    --danger: #b95455;
    --shadow: 0 12px 30px rgba(74, 107, 103, .09);
    --dock: #dfeee8;
    --surface: #f7fbf8;
    --surface-soft: #eef5f1;
    --accent-soft: #f2cfbd;
    --primary: #b7dcd2;
    --primary-hover: #9dccbf;
    --border-strong: #a9c8be;
    --radius: 0;
    --font: "Google Sans", sans-serif;
}

html[data-theme="peach"] {
    --ink: #604c49; --ink-soft: #88716d; --forest: #d7a996; --forest-deep: #98695d;
    --tomato: #e8b782; --tomato-dark: #a7644f; --cream: #fbf3ed; --paper: #fffaf6;
    --sand: #ead7cc; --sage: #f4e1d7; --sage-deep: #ebcabe; --dock: #f4ddd2;
    --surface: #fff8f3; --surface-soft: #faebe2; --accent-soft: #f1cfad;
    --primary: #efc8b7; --primary-hover: #e4b39f; --border-strong: #d9b9aa;
}
html[data-theme="sky"] {
    --ink: #365467; --ink-soft: #6b7f8b; --forest: #91bfd1; --forest-deep: #587f92;
    --tomato: #eab99c; --tomato-dark: #a7634f; --cream: #f3f8fa; --paper: #fcfeff;
    --sand: #ccdde5; --sage: #e0f0f5; --sage-deep: #c4e2ec; --dock: #dcecf3;
    --surface: #f8fcfd; --surface-soft: #eaf4f7; --accent-soft: #f4d8c7;
    --primary: #bcdce7; --primary-hover: #a7cedd; --border-strong: #a8c8d4;
}
html[data-theme="lavender"] {
    --ink: #554f68; --ink-soft: #7a7489; --forest: #b7acd2; --forest-deep: #756c93;
    --tomato: #e6aeaa; --tomato-dark: #9d6267; --cream: #f7f4fa; --paper: #fdfbff;
    --sand: #ddd6e7; --sage: #eee9f4; --sage-deep: #ddd3e9; --dock: #eae4f2;
    --surface: #fbf9fd; --surface-soft: #f1edf6; --accent-soft: #f0d2cf;
    --primary: #d8cee7; --primary-hover: #c8bbdc; --border-strong: #c5b9d5;
}
html[data-theme="butter"] {
    --ink: #5b5945; --ink-soft: #7f7b65; --forest: #b7c99c; --forest-deep: #71815c;
    --tomato: #eab887; --tomato-dark: #a66943; --cream: #faf7e8; --paper: #fffdf4;
    --sand: #e6dfba; --sage: #eef1d8; --sage-deep: #dde6be; --dock: #f0edcf;
    --surface: #fffdf3; --surface-soft: #f5f1d9; --accent-soft: #f2d5ad;
    --primary: #dce5bd; --primary-hover: #cbd99f; --border-strong: #d1c997;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--cream); color: var(--ink); }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "GRAD" 0;
    line-height: 1.55;
    background: var(--cream);
}
.auth-page .page-content { padding-bottom: 0; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font); font-weight: 750; letter-spacing: -.025em; }
h1 { font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.45rem); line-height: 1.12; }
.muted { color: var(--ink-soft); line-height: 1.6; }
.eyebrow { margin-bottom: .35rem; color: var(--tomato-dark); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.topbar { position: sticky; z-index: 30; top: 0; min-height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: .65rem 2rem; border-bottom: 1px solid var(--sand); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: .7rem; width: max-content; }
.brand-logo { display: block; width: 178px; height: 54px; object-fit: contain; }
.main-nav { display: flex; align-items: center; border: 1px solid var(--sand); background: var(--surface-soft); }
.main-nav a { padding: .65rem 1.15rem; border-right: 1px solid var(--sand); color: var(--ink-soft); font-size: .83rem; font-weight: 700; }
.main-nav a:last-child { border-right: 0; }
.main-nav a.active { color: var(--ink); background: var(--sage-deep); }
.user-menu { justify-self: end; display: flex; align-items: center; gap: .75rem; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.user-menu form { margin: 0; }
.user-profile-link { color: var(--ink-soft); text-decoration-color: color-mix(in srgb, var(--forest) 45%, transparent); text-underline-offset: .22em; }
.user-profile-link:hover, .user-profile-link:focus-visible { color: var(--forest-deep); }
.theme-picker { position: relative; }
.theme-toggle svg { width: 23px; height: 23px; fill: currentColor; }
.theme-toggle[aria-expanded="true"] { background: var(--accent-soft); }
.theme-menu { position: absolute; z-index: 90; top: calc(100% + .55rem); right: 0; width: 245px; padding: .65rem; border: 1px solid var(--border-strong); color: var(--ink); background: var(--paper); box-shadow: 10px 10px 0 color-mix(in srgb, var(--forest) 20%, transparent); }
.theme-menu[hidden] { display: none; }
.theme-menu > p { margin: .2rem .35rem .55rem; color: var(--ink-soft); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.theme-menu button { width: 100%; display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: .7rem; padding: .55rem; border: 0; color: var(--ink); background: transparent; text-align: left; font-size: .76rem; font-weight: 750; cursor: pointer; }
.theme-menu button:hover { background: var(--surface-soft); }
.theme-menu button[aria-checked="true"] { box-shadow: inset 3px 0 var(--tomato); background: var(--sage); }
.palette-preview { height: 25px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(70,90,85,.14); }
.palette-preview i:nth-child(1) { background: #dfeee8; }.palette-preview i:nth-child(2) { background: #f2cfbd; }.palette-preview i:nth-child(3) { background: #fffdf8; }
.palette-preview.peach i:nth-child(1) { background: #f4ddd2; }.palette-preview.peach i:nth-child(2) { background: #f1cfad; }.palette-preview.peach i:nth-child(3) { background: #fffaf6; }
.palette-preview.sky i:nth-child(1) { background: #dcecf3; }.palette-preview.sky i:nth-child(2) { background: #f4d8c7; }.palette-preview.sky i:nth-child(3) { background: #fcfeff; }
.palette-preview.lavender i:nth-child(1) { background: #eae4f2; }.palette-preview.lavender i:nth-child(2) { background: #f0d2cf; }.palette-preview.lavender i:nth-child(3) { background: #fdfbff; }
.palette-preview.butter i:nth-child(1) { background: #f0edcf; }.palette-preview.butter i:nth-child(2) { background: #f2d5ad; }.palette-preview.butter i:nth-child(3) { background: #fffdf4; }
.page-content { min-height: calc(100vh - 78px); }

.button, .icon-button, .text-button { border: 0; cursor: pointer; transition: transform .16s ease, background .16s ease, color .16s ease, opacity .16s ease; }
.button:active, .icon-button:active { transform: translateY(1px); }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .78rem 1.15rem; border-radius: 0; font-size: .83rem; font-weight: 800; }
.button.primary { color: var(--ink); background: var(--primary); }
.button.primary:hover { background: var(--primary-hover); }
.button.secondary { color: var(--forest); background: var(--sage); }
.button.secondary:hover { background: var(--sage-deep); }
.button.surprise { color: var(--ink); border: 1px solid color-mix(in srgb, var(--tomato) 55%, var(--sand)); background: var(--accent-soft); }
.button.surprise:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--tomato)); }
.button.ai-magic { position: relative; overflow: hidden; color: var(--ink); border: 1px solid color-mix(in srgb, var(--tomato) 58%, var(--border-strong)); background: linear-gradient(115deg, var(--accent-soft), color-mix(in srgb, var(--sage-deep) 74%, var(--paper))); box-shadow: 5px 5px 0 color-mix(in srgb, var(--tomato) 18%, transparent); }
.button.ai-magic::after { position: absolute; top: -70%; left: -30%; width: 32px; height: 240%; content: ''; background: rgba(255,255,255,.45); transform: rotate(20deg) translateX(-80px); transition: transform .45s ease; }
.button.ai-magic:hover::after { transform: rotate(20deg) translateX(260px); }
.button.ai-magic svg { width: 21px; height: 21px; fill: color-mix(in srgb, var(--tomato) 45%, transparent); stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.button.ghost { color: var(--ink); border: 1px solid var(--sand); background: transparent; }
.button.danger { color: var(--danger); background: #f8e4df; }
.button.compact { min-height: 38px; padding: .5rem .75rem; }
.button.wide { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 0; color: var(--ink); background: transparent; font-size: 1.3rem; }
.icon-button:hover { background: rgba(31,75,63,.08); }
.text-button { padding: .3rem 0; color: var(--tomato-dark); background: none; font-size: .82rem; font-weight: 800; text-align: left; }

label, .field-group { display: grid; gap: .45rem; color: var(--ink); font-size: .78rem; font-weight: 800; }
.field-label-row { min-height: 17px; display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.required-marker { color: var(--danger); font-size: .95rem; }
.field-tooltip { position: relative; width: 19px; height: 19px; display: inline-grid; place-items: center; border: 1px solid var(--border-strong); color: var(--forest-deep); background: var(--sage); font-size: .65rem; font-weight: 800; cursor: help; }
.field-tooltip-text { position: absolute; z-index: 25; top: calc(100% + 8px); left: 50%; width: 265px; padding: .7rem .8rem; border: 1px solid var(--border-strong); color: var(--ink); background: var(--paper); box-shadow: 8px 8px 0 color-mix(in srgb, var(--forest) 16%, transparent); font-size: .7rem; font-weight: 600; line-height: 1.45; white-space: normal; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-3px); transition: opacity .15s, transform .15s; }
.field-tooltip:hover .field-tooltip-text, .field-tooltip:focus .field-tooltip-text, .field-tooltip:focus-within .field-tooltip-text { opacity: 1; transform: translateX(-50%) translateY(0); }
.number-stepper { display: grid; grid-template-columns: 48px minmax(52px, 1fr) 48px; }
.number-stepper button { border: 1px solid var(--sand); color: var(--ink); background: var(--sage); font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.number-stepper button:hover, .number-stepper button:focus-visible { background: var(--sage-deep); }
.number-stepper input { position: relative; z-index: 1; padding-inline: .35rem; border-right: 0; border-left: 0; text-align: center; -moz-appearance: textfield; }
.number-stepper input::-webkit-inner-spin-button, .number-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
input, textarea, select { width: 100%; border: 1px solid var(--sand); border-radius: 0; outline: 0; color: var(--ink); background: var(--paper); padding: .9rem 1rem; transition: border .16s, box-shadow .16s; }
input:focus, textarea:focus, select:focus { border-color: var(--forest); box-shadow: inset 3px 0 var(--forest); }
textarea { resize: vertical; line-height: 1.5; }
.field-hint { color: var(--ink-soft); font-size: .69rem; font-weight: 500; }
.check-row { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.check-row input { width: 18px; height: 18px; accent-color: var(--forest); }
.stack-form { display: grid; gap: 1rem; }
.alert { padding: .85rem 1rem; border-radius: 12px; font-size: .85rem; }
.alert.error { color: #79271d; border: 1px solid #e7b3aa; background: #fcece8; }

.planner-shell { height: calc(100vh - 78px); display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; }
.meal-dock { position: relative; z-index: 20; display: flex; flex-direction: column; min-height: 0; padding: 1.8rem 1.4rem 1.3rem; color: var(--ink); border-right: 1px solid var(--sand); background: var(--dock); }
.dock-heading { display: flex; justify-content: space-between; align-items: start; }
.dock-heading h1 { margin: 0; color: var(--ink); font-size: 2.35rem; }.meal-dock .eyebrow { color: var(--tomato-dark); }
.search-wrap { position: relative; margin-top: 1.2rem; }
.search-wrap span { position: absolute; left: .75rem; top: .68rem; color: #79928e; font-size: 1.2rem; }
.search-wrap input { padding-left: 2.3rem; color: var(--ink); border-color: var(--sand); background: var(--surface); }.search-wrap input::placeholder { color: var(--ink-soft); }
.dock-instruction { margin: .85rem 0; color: #6b8581; font-size: .71rem; line-height: 1.45; }
.meal-list { flex: 1; min-height: 0; display: grid; align-content: start; gap: .55rem; overflow-y: auto; padding: .15rem .15rem .8rem; }
.meal-card-shell { position: relative; min-width: 0; }
.meal-card { width: 100%; min-height: 70px; display: grid; grid-template-columns: 7px minmax(0,1fr); align-items: center; gap: .85rem; padding: .82rem 3.15rem .82rem .75rem; border: 1px solid var(--sand); border-radius: 0; color: var(--ink); background: var(--surface); text-align: left; cursor: grab; }
.meal-card:hover { border-color: var(--forest); background: var(--sage); transform: translateX(2px); }
.meal-card.selected { color: var(--ink); background: var(--accent-soft); }
.meal-card-dot { width: 5px; height: 40px; border-radius: 0; background: var(--tomato); }
.meal-card span:nth-child(2) { min-width: 0; display: grid; gap: .25rem; }
.meal-card strong { overflow: hidden; font-family: var(--font); font-size: .9rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.meal-card small { overflow: hidden; color: #718985; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.meal-card.selected small { color: #795f56; }
.meal-context { position: absolute; z-index: 4; top: 18px; right: .45rem; }
.meal-context-toggle { width: 34px; height: 34px; padding: 0; border: 0; color: var(--ink-soft); background: transparent; font-size: .85rem; font-weight: 800; letter-spacing: .05em; cursor: pointer; }
.meal-context-toggle:hover, .meal-context-toggle[aria-expanded="true"] { color: var(--ink); background: var(--sage-deep); }
.meal-context-menu { position: fixed; z-index: 110; width: 156px; padding: .35rem; border: 1px solid var(--border-strong); background: var(--paper); box-shadow: 8px 8px 0 color-mix(in srgb, var(--forest) 18%, transparent); }
.meal-context-menu button { width: 100%; padding: .7rem .75rem; border: 0; color: var(--ink); background: transparent; font-size: .75rem; font-weight: 750; text-align: left; cursor: pointer; }
.meal-context-menu button:hover, .meal-context-menu button:focus-visible { background: var(--sage); }
.drag-handle { color: #9aab9f; letter-spacing: -3px; }
.dock-actions { display: grid; gap: .5rem; padding-top: .6rem; }
.meal-dock .button.ghost { color: var(--ink); border-color: var(--border-strong); background: color-mix(in srgb, var(--paper) 45%, transparent); }.meal-dock .button.primary { color: var(--ink); background: var(--accent-soft); }
.mobile-dock-close, .mobile-meals-open { display: none; }
.desktop-dock-toggle { position: absolute; z-index: 24; top: 50%; left: -1px; width: 34px; height: 68px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border-strong); color: var(--forest-deep); background: var(--dock); box-shadow: 5px 5px 0 color-mix(in srgb, var(--forest) 12%, transparent); cursor: pointer; transform: translateY(-50%); transition: color .18s ease, background .18s ease; }
.desktop-dock-toggle:hover, .desktop-dock-toggle:focus-visible { color: var(--ink); background: var(--sage-deep); }
.desktop-dock-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.planner-shell:not(.dock-collapsed) .desktop-dock-toggle svg { transform: rotate(180deg); }

@media (min-width: 761px) {
    .planner-shell { transition: grid-template-columns .24s ease; }
    .planner-shell.dock-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
    .meal-dock { transition: opacity .16s ease, transform .24s ease, visibility .24s; }
    .planner-shell.dock-collapsed .meal-dock { visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(-100%); }
}

.calendar-workspace { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 1.7rem 1.9rem 1.9rem; }
.planner-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.toolbar-main, .toolbar-actions, .calendar-nav { display: flex; align-items: center; gap: .55rem; }
.toolbar-main h2 { min-width: 230px; margin: 0; font-size: 2rem; }
.toolbar-main .eyebrow { margin: 0 0 .2rem; }
.segmented { display: flex; border: 1px solid var(--sand); background: #e8e8e3; }
.segmented button { min-height: 36px; padding: .45rem .8rem; border: 0; border-right: 1px solid var(--sand); border-radius: 0; color: var(--ink-soft); background: transparent; font-size: .74rem; font-weight: 800; cursor: pointer; }
.segmented button:last-child { border-right: 0; }
.segmented button.active { color: var(--ink); background: var(--sage-deep); }
.save-status { align-self: flex-end; min-height: 21px; display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; color: var(--ink-soft); font-size: .7rem; }
.save-status span { width: 7px; height: 7px; border-radius: 50%; background: #6b9a78; }
.save-status.saving span { animation: pulse 1s infinite; background: #d89b3f; }
.save-status.error { color: var(--danger); }.save-status.error span { background: var(--danger); }
@keyframes pulse { 50% { opacity: .3; transform: scale(.7); } }

.calendar-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(125px, 1fr)); gap: 1px; overflow: auto; border: 1px solid var(--sand); border-radius: 0; background: var(--sand); }
.calendar-day { min-width: 0; display: flex; flex-direction: column; padding: .8rem; background: rgba(255,255,255,.96); animation: rise-in .35s both; }
.calendar-day:nth-child(2) { animation-delay: .025s }.calendar-day:nth-child(3) { animation-delay: .05s }.calendar-day:nth-child(4) { animation-delay: .075s }.calendar-day:nth-child(5) { animation-delay: .1s }.calendar-day:nth-child(6) { animation-delay: .125s }.calendar-day:nth-child(7) { animation-delay: .15s }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
.calendar-day.today { background: #fff3eb; box-shadow: inset 0 4px var(--tomato); }
.calendar-day.selected-week { background: #f2f9f7; }
.calendar-day.outside-month { background: #eef1ec; color: #8b9a96; }
.day-heading { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .8rem; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.day-heading span { color: var(--ink-soft); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.day-heading strong { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 0; font-family: var(--font); font-size: 1rem; font-weight: 800; }
.today .day-heading strong { color: var(--ink); background: var(--tomato); }
.day-slots { display: grid; gap: .75rem; }
.slot-wrap { display: grid; gap: .35rem; }
.slot-label { color: var(--ink-soft); font-size: .63rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.calendar-slot { position: relative; min-height: 124px; display: flex; flex-direction: column; justify-content: space-between; gap: .55rem; padding: .85rem; border: 1px dashed #bdbdb6; border-radius: 0; color: var(--ink-soft); background: rgba(255,255,255,.55); text-align: left; cursor: pointer; overflow: hidden; }
.calendar-slot:hover { border-color: var(--tomato); background: #fff9f3; }
.calendar-slot.filled { padding-left: 2.35rem; color: var(--ink); border-style: solid; border-color: #9bcfc7; background: #e4f4f1; }
.calendar-slot.note-only { background: #fff7ed; border-color: #fed7aa; }
.calendar-slot.is-saving { opacity: .55; }
.calendar-slot[draggable="true"] { cursor: grab; }
.calendar-slot.is-dragging, .calendar-slot.drag-source { z-index: 2; opacity: .6; border: 3px solid var(--forest-deep); outline: 3px solid color-mix(in srgb, var(--forest) 28%, transparent); outline-offset: 3px; cursor: grabbing; transform: scale(.96); }
.meal-card.is-dragging { opacity: .58; border-color: var(--forest-deep); box-shadow: inset 4px 0 var(--forest-deep); }
.calendar-grid.drag-active .calendar-slot { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease; }
.calendar-grid.drag-active .calendar-slot.drop-available { border: 2px dashed color-mix(in srgb, var(--forest-deep) 72%, var(--paper)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--forest) 15%, transparent); background: color-mix(in srgb, var(--paper) 82%, var(--sage)); }
.calendar-grid.drag-active .calendar-slot.drop-available::before { content: ''; position: absolute; z-index: 3; inset: 5px; border: 1px dashed color-mix(in srgb, var(--forest-deep) 42%, transparent); pointer-events: none; }
.calendar-grid.drag-active .calendar-slot.drag-over { z-index: 5; border: 3px solid var(--tomato); outline: 4px solid color-mix(in srgb, var(--tomato) 28%, transparent); outline-offset: 2px; color: var(--ink); background: color-mix(in srgb, var(--accent-soft) 80%, var(--paper)); box-shadow: 8px 8px 0 color-mix(in srgb, var(--tomato) 28%, transparent), 0 14px 28px rgba(80,69,62,.18); transform: translateY(-4px) scale(1.025); }
.calendar-grid.drag-active .calendar-slot.drag-over::after { content: attr(data-drop-hint); position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--accent-soft) 88%, transparent); font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.calendar-slot.drop-confirmed { z-index: 5; animation: drop-land 1.05s ease both; }
.calendar-slot.drop-confirmed::after { content: attr(data-drop-confirmation); position: absolute; z-index: 7; top: 50%; left: 50%; padding: .45rem .7rem; border: 2px solid var(--forest-deep); color: var(--ink); background: var(--sage-deep); box-shadow: 5px 5px 0 color-mix(in srgb, var(--forest) 24%, transparent); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; transform: translate(-50%, -50%); pointer-events: none; }
@keyframes drop-land { 0% { transform: scale(.94); box-shadow: inset 0 0 0 4px var(--forest); } 45% { transform: scale(1.035); box-shadow: inset 0 0 0 4px var(--forest), 8px 8px 0 color-mix(in srgb, var(--forest) 22%, transparent); } 100% { transform: scale(1); } }
.slot-drag-handle { position: absolute; top: .63rem; left: .55rem; width: 24px; height: 28px; display: grid; place-items: center; color: var(--ink-soft); cursor: grab; touch-action: none; }
.slot-drag-handle svg { width: 19px; height: 19px; fill: currentColor; }
.calendar-slot:hover .slot-drag-handle { color: var(--forest-deep); }
.slot-add { align-self: center; margin: auto; color: #83958c; font-size: 1.65rem; font-weight: 300; }
.calendar-slot strong { font-family: var(--font); font-size: .9rem; font-weight: 750; line-height: 1.2; }
.calendar-meal-icon { position: absolute; top: .7rem; right: .75rem; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 1.15rem; line-height: 1; }
.calendar-slot.has-meal-icon .calendar-recipe-link { padding-right: 1.8rem; }
.calendar-recipe-link { padding: 0; border: 0; color: var(--ink); background: none; font-family: var(--font); font-size: .9rem; font-weight: 750; line-height: 1.2; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--forest-deep) 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.calendar-recipe-link:hover, .calendar-recipe-link:focus-visible { color: var(--forest-deep); text-decoration-color: currentColor; }
.calendar-slot small { display: -webkit-box; overflow: hidden; color: var(--ink-soft); font-size: .67rem; line-height: 1.35; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.slot-footer { width: 100%; display: flex; align-items: end; justify-content: space-between; gap: .45rem; }
.slot-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.slot-cook-picker { position: relative; z-index: 2; min-width: 28px; max-width: calc(100% - 82px); display: inline-flex; cursor: pointer; }
.cook-badge { min-width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 .58rem; border: 0; border-radius: 999px; color: var(--cook-badge-ink, var(--forest-deep)); background: var(--cook-badge-color, color-mix(in srgb, var(--paper) 78%, var(--sage))); box-shadow: inset 0 0 0 1px rgba(23,59,54,.13); font-size: .62rem; font-weight: 800; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.slot-cook-picker.assigned .cook-badge { max-width: 100%; }
.cook-badge-name { display: inline-flex; align-items: center; gap: .36rem; overflow: hidden; text-overflow: ellipsis; }
.cook-badge-name::before { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; content: ''; opacity: .52; }
.cook-badge-icon, .cook-badge-icon svg { width: 17px; height: 17px; }
.cook-badge-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.slot-cook-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.slot-cook-picker:hover .cook-badge { filter: brightness(.96); box-shadow: inset 0 0 0 1px rgba(23,59,54,.24); }
.slot-cook-picker:focus-within .cook-badge { box-shadow: inset 0 0 0 1px rgba(23,59,54,.24), 0 0 0 2px var(--paper), 0 0 0 4px var(--forest); }
.slot-cook-select:disabled { cursor: wait; }
.slot-edit, .slot-remove { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; cursor: pointer; }
.slot-edit { border: 1px solid color-mix(in srgb, var(--forest) 35%, transparent); color: var(--forest-deep); background: color-mix(in srgb, var(--paper) 65%, transparent); }
.slot-remove { border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); background: color-mix(in srgb, var(--paper) 65%, transparent); }
.slot-edit svg, .slot-remove svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.slot-edit:hover, .slot-edit:focus-visible { color: white; background: var(--forest); }
.slot-remove:hover, .slot-remove:focus-visible { color: white; background: var(--danger); }
.slot-remove:disabled { opacity: .45; cursor: wait; }
.month-view { grid-template-rows: repeat(6, minmax(140px, 1fr)); overflow: auto; }
.month-view .calendar-day { min-height: 140px; padding: .55rem; }
.month-view .day-heading { margin-bottom: .35rem; }
.month-view .day-slots { gap: .35rem; }
.month-view .calendar-slot { min-height: 42px; padding: .45rem; border-radius: 9px; }
.month-view .calendar-slot.filled { padding-left: 1.75rem; }
.month-view .slot-drag-handle { top: .18rem; left: .15rem; width: 22px; height: 30px; }
.month-view .calendar-slot strong, .month-view .calendar-recipe-link { font-family: var(--font); font-size: .69rem; }
.month-view .calendar-meal-icon { top: .35rem; right: .4rem; font-size: .8rem; }
.month-view .slot-add, .month-view .slot-actions, .month-view .calendar-slot small { display: none; }
.month-view .slot-footer { justify-content: start; }
.month-view .slot-cook-picker { max-width: 100%; }
.month-view .cook-badge { height: 21px; padding-inline: .42rem; font-size: .55rem; }
.month-view .calendar-slot.drag-over::after { font-size: .58rem; }

.modal { width: min(920px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--border-strong); border-radius: 0; color: var(--ink); background: var(--paper); box-shadow: 18px 18px 0 color-mix(in srgb, var(--forest) 20%, transparent); }
.meal-modal { width: min(1220px, calc(100vw - 2rem)); height: min(820px, calc(100vh - 2rem)); height: min(820px, calc(100dvh - 2rem)); }
.meal-modal .modal-card { height: 100%; max-height: none; }
.recipe-modal { width: min(960px, calc(100vw - 2rem)); }
.ai-recipe-modal { width: min(1260px, calc(100vw - 2rem)); height: min(830px, calc(100dvh - 2rem)); border-color: var(--sand); box-shadow: 0 26px 80px rgba(49,81,84,.22); }
.ai-recipe-modal .modal-card { height: 100%; max-height: none; }
.modal::backdrop { background: rgba(70,100,96,.28); backdrop-filter: blur(5px); }
.compact-modal { width: min(560px, calc(100vw - 2rem)); }
.modal-card { max-height: calc(100vh - 2rem); display: flex; flex-direction: column; margin: 0; }
.modal-header, .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.3rem; }
.modal-header { border-bottom: 1px solid var(--sand); }.modal-header h2 { margin: 0; font-size: 1.75rem; }.modal-header .eyebrow { margin-bottom: .2rem; }
.modal-body { overflow-y: auto; padding: 1.25rem 1.3rem; }
.modal-footer { border-top: 1px solid var(--sand); background: var(--surface-soft); }
.modal-footer-spacer { flex: 1; }
.split-footer { display: grid; grid-template-columns: auto 1fr auto auto; }
.meal-form-body { display: grid; gap: 1.2rem; }
.meal-basics { display: grid; grid-template-columns: minmax(240px, 1.8fr) repeat(3, minmax(145px, 1fr)); gap: 1rem; align-items: end; }
.meal-tabs { position: sticky; z-index: 8; top: -1.25rem; display: flex; flex: 0 0 auto; overflow-x: auto; margin-inline: -1.3rem; padding-inline: 1.3rem; border-bottom: 1px solid var(--sand); background: var(--paper); scrollbar-width: thin; }
.meal-tabs button { min-width: 135px; min-height: 46px; flex: 0 0 auto; padding: .7rem 1rem; border: 0; border-bottom: 3px solid transparent; color: var(--ink-soft); background: transparent; font-size: .78rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.meal-tabs button:hover { color: var(--ink); background: var(--surface-soft); }
.meal-tabs button.active { color: var(--ink); border-bottom-color: var(--tomato); background: var(--accent-soft); }
.meal-tab-content { min-height: 380px; }
.meal-tab-panel { min-width: 0; }
.description-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.description-preview { display: grid; gap: .45rem; }
.form-section { display: grid; align-content: start; gap: 1rem; }
.meal-icon-select select { min-height: 48px; font-family: var(--font); font-size: .88rem; }
.section-heading { position: relative; display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.section-heading h3 { margin-bottom: .25rem; font-size: 1.3rem; }.section-heading p { margin: 0; color: var(--ink-soft); font-size: .73rem; }
.parser-help { flex: 0 0 auto; }
.parser-help summary { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--forest-deep); background: var(--sage); font-size: .82rem; font-weight: 800; cursor: pointer; list-style: none; }
.parser-help summary::-webkit-details-marker { display: none; }
.parser-help[open] summary { color: var(--ink); background: var(--accent-soft); }
.parser-help-card { position: absolute; z-index: 12; top: 40px; right: 0; width: min(430px, calc(100vw - 3rem)); max-height: min(520px, 65vh); overflow-y: auto; padding: 1rem; border: 1px solid var(--border-strong); color: var(--ink); background: var(--paper); box-shadow: 12px 12px 0 color-mix(in srgb, var(--forest) 18%, transparent); }
.parser-help-card > strong { display: block; font-size: .9rem; }
.parser-help-card > p { margin: .25rem 0 .8rem; line-height: 1.5; }
.parser-help-card ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.parser-help-card li { display: grid; gap: .18rem; padding: .55rem 0; border-top: 1px solid var(--sand); }
.parser-help-card code { color: var(--tomato-dark); font-family: var(--font); font-size: .72rem; font-weight: 750; white-space: normal; }
.parser-help-card li span { color: var(--ink-soft); font-size: .68rem; }
.ingredient-rows { display: grid; gap: .7rem; }
.ingredient-row { display: grid; grid-template-columns: 58px 72px minmax(140px,1fr) 130px 32px; gap: .35rem; align-items: center; }
.ingredient-row.has-quantity-max { grid-template-columns: 52px 12px 52px 72px minmax(140px,1fr) 130px 32px; }
.quantity-range-separator { color: var(--ink-soft); font-size: .85rem; font-weight: 800; text-align: center; }
.ingredient-row input { min-width: 0; padding: .58rem .5rem; font-size: .73rem; }
.ingredient-row .ingredient-preparation { min-width: 0; }
.ingredient-row .ingredient-rohlik-control { grid-column: 1 / -2; display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ingredient-row .ingredient-rohlik-url { flex: 1; color: var(--forest-deep); background: color-mix(in srgb, var(--sage) 45%, var(--paper)); }
.rohlik-url-toggle { display: inline-flex; align-items: center; gap: .3rem; min-height: 29px; padding: .25rem .4rem; border: 0; color: var(--forest-deep); background: transparent; font-family: var(--font); font-size: .68rem; font-weight: 800; cursor: pointer; }
.rohlik-url-toggle:hover, .rohlik-url-toggle:focus-visible { background: var(--sage); }
.rohlik-url-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ingredient-row.review { padding: .35rem; border-radius: 9px; background: #fff1cf; }
.ingredient-row .remove-row { width: 30px; height: 30px; }
.ingredient-editor > textarea, .spice-editor > textarea { height: 180px; min-height: 180px; }
.markdown-preview { min-height: 253px; max-height: 420px; overflow: auto; padding: 1rem; border: 1px solid var(--sand); border-radius: 11px; background: var(--surface); font-size: .8rem; }
.prose p, .prose ul, .prose ol { line-height: 1.55; }.prose h1, .prose h2, .prose h3 { font-size: 1.15rem; }
.search-results { display: grid; gap: .35rem; max-height: 180px; overflow-y: auto; margin-top: .45rem; }
.search-result { display: flex; align-items: center; gap: .55rem; padding: .7rem; border: 1px solid var(--sand); border-radius: 10px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.search-result:hover { border-color: var(--forest); }
.selected-meal { margin-top: .75rem; padding: .8rem; border-radius: 11px; background: var(--sage); font-family: var(--font); font-weight: 750; }.selected-meal > span { display: block; margin-top: .35rem; font-family: var(--font); font-weight: 500; }
.or-divider { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; color: #8b948f; font-size: .68rem; text-transform: uppercase; }
.or-divider::before, .or-divider::after { height: 1px; flex: 1; content: ''; background: var(--sand); }
.copy-preview { margin-top: 1rem; padding: .9rem; border-radius: 11px; color: var(--ink-soft); background: #f1ede3; font-size: .8rem; line-height: 1.5; }
.recipe-modal-header { min-height: 112px; padding: 1.6rem 1.8rem; background: linear-gradient(110deg, var(--sage) 0%, var(--paper) 68%, var(--accent-soft) 145%); }
.recipe-modal-header h2 { max-width: 680px; font-size: clamp(1.8rem, 4vw, 2.65rem); line-height: 1.05; }
.recipe-header-actions { display: flex; align-items: center; gap: .8rem; }
.recipe-view-body { padding: 0; }
.recipe-view-loading { min-height: 300px; display: grid; place-items: center; color: var(--ink-soft); }
.recipe-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--sand); background: var(--surface-soft); }
.recipe-facts > div { display: grid; gap: .3rem; padding: 1rem 1.8rem; }
.recipe-facts > div + div { border-left: 1px solid var(--sand); }
.recipe-facts span { color: var(--ink-soft); font-size: .65rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.recipe-facts strong { font-size: .88rem; }
.recipe-facts small { color: var(--ink-soft); font-size: .7rem; line-height: 1.45; }
.recipe-description { padding: 1.8rem; }
.recipe-description > h3 { margin-bottom: .8rem; color: var(--ink-soft); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; }
.recipe-description .prose { max-width: 760px; color: var(--ink); font-size: .93rem; }
.recipe-description .prose > :last-child { margin-bottom: 0; }
.recipe-detail-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sand); background: var(--surface); }
.recipe-detail-grid > section { min-width: 0; padding: 1.6rem 1.8rem 2rem; }
.recipe-detail-grid > section + section { border-left: 1px solid var(--sand); }
.recipe-section-heading { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.recipe-section-heading span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--forest-deep); background: var(--sage-deep); font-size: .62rem; font-weight: 800; }
.recipe-section-heading h3 { margin: 0; font-size: 1.15rem; }
.recipe-item-list { display: grid; margin: 0; padding: 0; list-style: none; }
.recipe-item-list li { display: grid; grid-template-columns: minmax(68px, auto) 1fr; gap: .8rem; align-items: start; padding: .72rem 0; border-top: 1px solid var(--sand); }
.recipe-item-list li > span:last-child { display: grid; gap: .12rem; }
.recipe-item-name-line { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.recipe-item-list strong { font-size: .84rem; line-height: 1.35; }
.recipe-item-list small { color: var(--ink-soft); font-size: .7rem; line-height: 1.35; }
.external-product-link { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--forest-deep); background: var(--sage); text-decoration: none; }
.external-product-link:hover, .external-product-link:focus-visible { border-color: var(--forest-deep); color: var(--paper); background: var(--forest-deep); }
.external-product-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recipe-item-amount { color: var(--tomato-dark); font-size: .73rem; font-weight: 800; white-space: nowrap; }
.recipe-item-list .recipe-item-empty { display: block; color: var(--ink-soft); font-size: .78rem; }

.meal-ai-entry { min-height: 42px; }
.meal-ai-entry svg { width: 19px; height: 19px; }
.ai-recipe-header { position: relative; min-height: 86px; background: var(--paper); }
.ai-recipe-header::after { position: absolute; right: 1.3rem; bottom: -1px; left: 1.3rem; height: 2px; content: ''; background: linear-gradient(90deg, var(--forest), var(--tomato), transparent 74%); pointer-events: none; }
.ai-recipe-title { display: flex; align-items: center; gap: .85rem; }
.ai-recipe-title h2 { font-size: 1.7rem; }
.ai-recipe-mark { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; color: var(--forest-deep); }
.ai-recipe-mark svg { width: 32px; height: 32px; fill: color-mix(in srgb, var(--tomato) 30%, transparent); stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.ai-recipe-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(360px, .82fr) minmax(500px, 1.18fr); overflow: hidden; }
.ai-chat-panel, .ai-draft-panel { min-width: 0; min-height: 0; }
.ai-chat-panel { display: flex; flex-direction: column; padding: 1.25rem 1.4rem; border-right: 1px solid var(--sand); background: color-mix(in srgb, var(--surface-soft) 78%, var(--paper)); }
.ai-draft-panel { display: flex; flex-direction: column; padding: 1.25rem 1.4rem 0; background: var(--paper); }
.ai-panel-heading { min-height: 52px; display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ai-panel-heading > div { display: flex; align-items: center; gap: .7rem; }
.ai-panel-heading > div > span { width: 28px; height: 28px; display: grid; flex: 0 0 28px; place-items: center; color: var(--forest-deep); border-bottom: 2px solid var(--forest); font-size: .62rem; font-weight: 850; }
.ai-panel-heading h3 { margin: 0; font-size: 1.05rem; }.ai-panel-heading p { margin: .1rem 0 0; color: var(--ink-soft); font-size: .68rem; }
.ai-chat-messages { flex: 1; min-height: 180px; display: flex; flex-direction: column; gap: .75rem; overflow-y: auto; padding: .2rem .2rem 1rem; scrollbar-width: thin; }
.ai-message { max-width: 88%; display: flex; align-items: start; gap: .65rem; padding: .85rem .9rem; border: 1px solid var(--sand); background: var(--paper); animation: ai-message-in .22s ease both; }
.ai-message.user { align-self: end; color: var(--ink); border-color: color-mix(in srgb, var(--tomato) 45%, var(--sand)); background: color-mix(in srgb, var(--accent-soft) 72%, var(--paper)); }
.ai-message.pending { opacity: .72; }.ai-message.pending .ai-message-mark { animation: ai-pulse 1s ease-in-out infinite; }
.ai-message-mark { width: 25px; height: 25px; display: grid; flex: 0 0 25px; place-items: center; color: var(--tomato-dark); border: 1px solid color-mix(in srgb, var(--tomato) 65%, var(--sand)); background: var(--paper); }
.ai-message strong { display: block; margin-bottom: .2rem; font-size: .67rem; letter-spacing: .04em; text-transform: uppercase; }.ai-message p { margin: 0; font-size: .78rem; line-height: 1.5; white-space: pre-wrap; }
@keyframes ai-message-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ai-pulse { 50% { color: var(--paper); background: var(--tomato); transform: rotate(45deg); } }
.ai-starters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 .8rem; }
.ai-starters button { padding: .45rem .6rem; border: 1px solid var(--border-strong); color: var(--forest-deep); background: var(--paper); font-size: .66rem; font-weight: 750; cursor: pointer; }
.ai-starters button:hover, .ai-starters button:focus-visible { color: var(--ink); background: var(--sage-deep); }
.ai-starters button:disabled { cursor: wait; opacity: .5; }
.ai-config-notice { margin: .35rem 0 .8rem; padding: .9rem; border: 1px solid color-mix(in srgb, var(--tomato) 65%, var(--sand)); background: var(--accent-soft); }
.ai-config-notice strong { font-size: .8rem; }.ai-config-notice p { margin: .25rem 0 0; font-size: .7rem; line-height: 1.5; }.ai-config-notice code { font-size: .68rem; }
.ai-composer { display: grid; gap: .35rem; padding-top: .9rem; border-top: 1px solid var(--sand); }
.ai-composer > label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.ai-composer > div { display: grid; grid-template-columns: minmax(0,1fr) 50px; border: 1px solid var(--border-strong); background: var(--paper); }
.ai-composer textarea { min-height: 76px; max-height: 145px; padding: .75rem; border: 0; box-shadow: none; background: transparent; font-size: .78rem; }
.ai-send { width: 50px; border: 0; color: var(--paper); background: var(--forest-deep); cursor: pointer; }
.ai-send:hover, .ai-send:focus-visible { background: var(--tomato-dark); }.ai-send:disabled { cursor: wait; opacity: .45; }
.ai-send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-composer > small { color: var(--ink-soft); font-size: .59rem; line-height: 1.35; }
.ai-draft-status { padding: .35rem .55rem; color: var(--ink-soft); border: 1px solid var(--sand); background: var(--surface-soft); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.ai-draft-status.ready { color: var(--forest-deep); border-color: var(--border-strong); background: var(--sage); }
.ai-draft-status.thinking { color: var(--tomato-dark); border-color: color-mix(in srgb, var(--tomato) 55%, var(--sand)); background: var(--accent-soft); animation: ai-status 1.2s ease-in-out infinite; }
@keyframes ai-status { 50% { opacity: .55; } }
.ai-draft-empty { flex: 1; display: grid; place-content: center; justify-items: center; padding: 3rem; color: var(--ink-soft); text-align: center; }
.ai-draft-empty > span { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 1rem; color: var(--forest-deep); background: radial-gradient(circle, var(--sage-deep), color-mix(in srgb, var(--sage) 45%, transparent) 58%, transparent 60%); }
.ai-draft-empty svg { width: 38px; height: 38px; fill: color-mix(in srgb, var(--tomato) 32%, transparent); stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.ai-draft-empty h3 { margin-bottom: .5rem; color: var(--ink); font-size: 1.4rem; }.ai-draft-empty p { max-width: 430px; margin: 0; font-size: .8rem; }
.ai-draft { min-height: 0; display: flex; flex: 1; flex-direction: column; border-top: 1px solid var(--sand); background: var(--paper); }
.ai-draft > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid var(--sand); background: var(--paper); }
.ai-draft-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--paper); font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 1.45rem; }
.ai-draft > header p { margin: 0 0 .15rem; color: var(--tomato-dark); font-size: .58rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }.ai-draft > header h3 { margin: 0; font-size: clamp(1.2rem, 2.3vw, 1.8rem); }
.ai-draft-meta { display: grid; justify-items: end; color: var(--ink-soft); }.ai-draft-meta strong { color: var(--ink); font-size: 1.25rem; line-height: 1; }.ai-draft-meta span { margin-top: .25rem; font-size: .58rem; text-transform: uppercase; }
.ai-draft-scroll { min-height: 0; flex: 1; overflow-y: auto; scrollbar-width: thin; }
.ai-draft-columns { display: grid; grid-template-columns: 1.4fr .85fr; border-bottom: 1px solid var(--sand); }
.ai-draft-columns > section, .ai-method { min-width: 0; padding: 1rem; }.ai-draft-columns > section + section { border-left: 1px solid var(--sand); background: color-mix(in srgb, var(--accent-soft) 18%, var(--paper)); }
.ai-list-title { display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem; }.ai-list-title > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--forest-deep); border: 1px solid var(--border-strong); background: var(--sage); font-size: .62rem; font-weight: 850; }.ai-list-title h4 { margin: 0; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.ai-draft ul { display: grid; margin: 0; padding: 0; list-style: none; }.ai-draft li { display: grid; grid-template-columns: minmax(58px, auto) 1fr; gap: .65rem; padding: .48rem 0; border-top: 1px solid var(--sand); font-size: .7rem; }.ai-draft li > span:first-child { color: var(--tomato-dark); font-weight: 800; white-space: nowrap; }.ai-draft li > span:last-child { display: grid; }.ai-draft li strong { font-size: .72rem; }.ai-draft li small { color: var(--ink-soft); font-size: .62rem; }
.ai-draft .ai-draft-list-empty { display: block; color: var(--ink-soft); }
.ai-method .prose { color: var(--ink); font-size: .74rem; }.ai-method .prose > :last-child { margin-bottom: 0; }
.ai-recipe-footer p { max-width: 650px; margin: 0; color: var(--ink-soft); font-size: .69rem; }.ai-recipe-footer p strong { color: var(--ink); }
.page-heading-actions { display: flex; align-items: center; gap: .65rem; }

.standard-page { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) 0; }
.standard-page.narrow { max-width: 900px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.page-heading h1 { margin-bottom: .65rem; }.page-heading p:last-child { max-width: 620px; margin: 0; color: var(--ink-soft); }
.filter-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }.filter-bar input { max-width: 420px; }.filter-bar span { color: var(--ink-soft); font-size: .75rem; }
.library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.library-card { min-height: 220px; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--sand); border-radius: 0; background: var(--paper); }
.library-card-top { display: flex; align-items: center; justify-content: space-between; }.library-card h2 { margin: 1.2rem 0 .55rem; }.recipe-title-button { display: inline-flex; align-items: center; gap: .45rem; padding: 0; border: 0; color: var(--ink); background: none; font-family: var(--font); font-size: inherit; font-weight: inherit; line-height: inherit; text-align: left; text-decoration: none; cursor: pointer; }.recipe-title-name { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--forest-deep) 35%, transparent); text-underline-offset: 5px; }.recipe-title-button:hover, .recipe-title-button:focus-visible { color: var(--forest-deep); }.recipe-title-button:hover .recipe-title-name, .recipe-title-button:focus-visible .recipe-title-name { text-decoration-color: currentColor; }.library-card p { flex: 1; color: var(--ink-soft); font-size: .76rem; line-height: 1.55; }
.library-product-links { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; }
.library-product-links > span { margin-right: .15rem; color: var(--ink-soft); font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.meal-name-icon { display: inline-grid; flex: 0 0 auto; place-items: center; margin-right: .3em; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 1.08em; font-weight: 400; line-height: 1; text-decoration: none; }
.calendar-recipe-link .meal-name-icon, .recipe-title-button .meal-name-icon, .search-result .meal-name-icon { margin-right: 0; }
.calendar-recipe-link { display: inline-flex; align-items: center; gap: .35rem; }
.selected-meal > strong { display: flex; align-items: center; }
.status-badge { width: max-content; padding: .32rem .55rem; border-radius: 999px; font-size: .63rem; font-weight: 800; }.status-badge.rotation { color: var(--forest-deep); background: var(--sage); }.status-badge.archived { color: #766d62; background: #e7e1d7; }
.user-list { display: grid; gap: .65rem; }.user-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--sand); border-radius: 14px; background: var(--paper); }.user-card > div { display: grid; gap: .2rem; }.user-card small { color: var(--ink-soft); }.avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); background: var(--sage-deep); font-family: var(--font); font-size: 1.1rem; font-weight: 800; }
.user-badge-color-row { display: flex; align-items: center; gap: .75rem; margin-top: .3rem; }
.user-badge-color-row input[type="color"] { width: 54px; height: 42px; flex: 0 0 54px; padding: .2rem; cursor: pointer; }
.user-badge-preview { max-width: 220px; min-height: 28px; display: inline-flex; align-items: center; gap: .4rem; overflow: hidden; padding: .4rem .72rem; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(23,59,54,.13); font-size: .68rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.user-badge-preview::before { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; content: ''; opacity: .52; }

.ai-test-page { position: relative; max-width: 1420px; }
.ai-test-page::before { position: fixed; z-index: -1; inset: 78px 0 0; content: ''; background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--accent-soft) 52%, transparent) 0 14%, transparent 35%), repeating-linear-gradient(90deg, transparent 0 71px, color-mix(in srgb, var(--forest) 7%, transparent) 71px 72px); pointer-events: none; }
.ai-test-heading { margin-bottom: 1.25rem; }
.ai-test-heading h1 { font-size: clamp(2.45rem, 5vw, 5rem); letter-spacing: -.055em; }
.ai-test-status { min-height: 62px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--paper) 90%, transparent); }
.ai-test-status.is-blocked { border-color: color-mix(in srgb, var(--danger) 55%, var(--sand)); }
.ai-test-status-light { width: 12px; height: 12px; border-radius: 50%; background: var(--forest-deep); box-shadow: 0 0 0 5px color-mix(in srgb, var(--forest) 22%, transparent); }
.ai-test-status.is-blocked .ai-test-status-light { background: var(--danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 16%, transparent); }
.ai-test-status div { display: grid; gap: .1rem; }
.ai-test-status small { color: var(--ink-soft); font-size: .7rem; }
.ai-test-status code { font-family: ui-monospace, "Cascadia Code", monospace; }
.ai-test-grid { display: grid; grid-template-columns: minmax(310px, .7fr) minmax(0, 1.3fr); min-height: 670px; border: 1px solid var(--border-strong); box-shadow: 12px 12px 0 color-mix(in srgb, var(--forest) 15%, transparent); background: var(--paper); }
.ai-test-console { padding: clamp(1.25rem, 2.5vw, 2.2rem); border-right: 1px solid var(--border-strong); background: linear-gradient(155deg, color-mix(in srgb, var(--dock) 80%, var(--paper)), var(--surface-soft)); }
.ai-test-console-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.ai-test-console-header h2 { margin-bottom: .7rem; font-size: 1.7rem; }
.ai-test-clock { min-width: 69px; padding: .4rem .55rem; border: 1px solid var(--border-strong); background: var(--paper); font: 700 .72rem/1.3 ui-monospace, "Cascadia Code", monospace; text-align: center; }
.ai-test-run { width: 100%; margin: .5rem 0 1.2rem; }
.ai-test-run.is-loading span { animation: ai-test-spin 1.2s linear infinite; }
.ai-test-prompt { min-height: 108px; margin-bottom: 1.2rem; padding: .9rem 1rem; border-left: 4px solid var(--tomato); background: color-mix(in srgb, var(--paper) 82%, transparent); }
.ai-test-prompt span { display: block; margin-bottom: .35rem; color: var(--tomato-dark); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ai-test-prompt p { margin: 0; font-size: .78rem; line-height: 1.55; }
.ai-test-pipeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ai-test-pipeline li { min-height: 75px; display: grid; grid-template-columns: 16px 1fr auto; align-items: start; gap: .75rem; padding: .7rem 0; border-top: 1px solid color-mix(in srgb, var(--border-strong) 68%, transparent); }
.ai-test-pipeline li > i { width: 12px; height: 12px; margin-top: .15rem; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface-soft); }
.ai-test-pipeline li > div { display: grid; gap: .15rem; }
.ai-test-pipeline strong { font: 750 .72rem/1.25 ui-monospace, "Cascadia Code", monospace; }
.ai-test-pipeline small { color: var(--ink-soft); font-size: .67rem; line-height: 1.4; }
.ai-test-pipeline li > span { padding-top: .08rem; color: var(--ink-soft); font: 700 .58rem/1.3 ui-monospace, "Cascadia Code", monospace; text-transform: uppercase; }
.ai-test-pipeline .is-running > i { border-color: var(--tomato-dark); border-top-color: transparent; animation: ai-test-spin .8s linear infinite; }
.ai-test-pipeline .is-running > span { color: var(--tomato-dark); }
.ai-test-pipeline .is-complete > i { border-color: var(--forest-deep); background: var(--forest-deep); box-shadow: inset 0 0 0 2px var(--surface-soft); }
.ai-test-pipeline .is-complete > span { color: var(--forest-deep); }
.ai-test-pipeline .is-failed > i { border-color: var(--danger); background: var(--danger); }
.ai-test-pipeline .is-failed > span { color: var(--danger); }
.ai-test-output { min-width: 0; padding: clamp(1.25rem, 2.5vw, 2.2rem); background: var(--paper); }
.ai-test-empty { min-height: 570px; display: grid; place-content: center; justify-items: center; color: var(--ink-soft); text-align: center; }
.ai-test-empty > span { color: var(--sand); font: 400 8rem/.8 ui-monospace, monospace; }
.ai-test-empty h2 { margin: 1.2rem 0 .4rem; color: var(--ink); font-size: 1.55rem; }
.ai-test-empty p { max-width: 380px; }
.ai-test-result-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ai-test-result-header h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.4rem); }
.ai-test-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--sand); }
.ai-test-metrics > div { min-width: 0; display: grid; gap: .25rem; padding: .85rem; border-right: 1px solid var(--sand); }
.ai-test-metrics > div:last-child { border-right: 0; }
.ai-test-metrics small { color: var(--ink-soft); font-size: .6rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.ai-test-metrics strong { overflow: hidden; font: 750 1.05rem/1.25 ui-monospace, "Cascadia Code", monospace; text-overflow: ellipsis; }
.ai-test-tech { margin-top: 1.4rem; }
.ai-test-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.ai-test-section-title h3 { margin: 0; font-size: .85rem; letter-spacing: .02em; }
.ai-test-section-title small { color: var(--ink-soft); font-size: .62rem; }
.ai-test-tech dl { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); margin: 0; border: 1px solid var(--sand); font: 500 .68rem/1.45 ui-monospace, "Cascadia Code", monospace; }
.ai-test-tech dt, .ai-test-tech dd { min-width: 0; margin: 0; padding: .45rem .65rem; border-bottom: 1px solid var(--sand); }
.ai-test-tech dt { color: var(--ink-soft); background: var(--surface-soft); }
.ai-test-tech dd { overflow-wrap: anywhere; }
.ai-test-json-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.ai-test-json-grid > section { min-width: 0; }
.ai-test-json-grid pre { height: 350px; margin: 0; overflow: auto; padding: 1rem; border: 1px solid #365552; color: #dcece7; background: #213b3a; font: 500 .66rem/1.55 ui-monospace, "Cascadia Code", monospace; tab-size: 2; }
.ai-test-json-grid code { font: inherit; }
.ai-copy-json { color: var(--forest-deep); font-size: .65rem; font-weight: 800; }
@keyframes ai-test-spin { to { transform: rotate(360deg); } }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
.login-art { position: relative; display: grid; place-content: center; overflow: hidden; color: var(--ink); background: var(--dock); }
.login-art::before { position: absolute; inset: 8%; border: 1px solid rgba(89,139,128,.28); content: ''; }
.login-art::after { position: absolute; inset: 0; content: ''; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(89,139,128,.045) 79px 80px); }
.login-art p { position: relative; z-index: 2; margin: .6rem 0 0; font-family: var(--font); font-size: clamp(2.4rem, 4.4vw, 4.9rem); font-weight: 750; letter-spacing: -.06em; line-height: .98; }
.login-dog { position: relative; z-index: 2; width: min(320px, 42vw); height: 290px; object-fit: contain; filter: drop-shadow(0 22px 32px rgba(0,0,0,.25)); }
.login-panel { width: min(460px, calc(100% - 3rem)); display: grid; align-content: center; gap: 2rem; margin: auto; padding: 3rem 0; }.login-panel h1 { margin-bottom: .8rem; }.login-brand { position: absolute; top: 1.4rem; }.login-logo { width: 210px; height: 76px; }

.print-sheet { width: min(820px, calc(100% - 2rem)); min-height: 100vh; margin: 0 auto; padding: 3rem 0; }.print-sheet > header { display: flex; align-items: start; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 3px solid var(--forest); }.print-group { margin-top: 2.25rem; }.print-group > h2 { margin-bottom: .4rem; padding-bottom: .7rem; border-bottom: 1px solid var(--border-strong); font-size: 1.15rem; letter-spacing: .02em; }.print-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }.print-item { grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; min-height: 58px; border-bottom: 1px solid var(--sand); font-size: .87rem; }.print-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }.print-check { width: 19px; height: 19px; border: 1.5px solid var(--forest); border-radius: 4px; }.print-item:has(input:checked) strong { color: #8a938e; text-decoration: line-through; }.print-item:has(input:checked) .print-check { background: var(--forest); box-shadow: inset 0 0 0 4px white; }.print-item strong small { color: var(--ink-soft); font-weight: 500; }.print-item > span:last-child { color: var(--tomato-dark); font-weight: 800; }.print-sheet footer { margin-top: 3rem; color: var(--ink-soft); font-size: .7rem; text-align: center; }
.print-item { display: grid; }.print-check-label { position: relative; width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; }.rohlik-product-link { display: block; width: max-content; margin-top: .2rem; color: var(--forest-deep); font-size: .66rem; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.empty-state { padding: 5rem 1rem; color: var(--ink-soft); text-align: center; }
.toast-region { position: fixed; z-index: 100; top: 5.25rem; right: 1.25rem; width: min(440px, calc(100vw - 2.5rem)); display: grid; gap: .75rem; }
.toast { position: relative; min-width: 340px; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; overflow: hidden; padding: 1.05rem 3.45rem 1.25rem 1.2rem; border: 2px solid #78a99d; border-radius: 12px; color: #244f48; background: #d8eee7; box-shadow: 8px 8px 0 rgba(91,129,120,.2), 0 12px 32px rgba(66,101,94,.2); font-size: .95rem; font-weight: 650; line-height: 1.45; animation: toast-in .25s both; }
.toast-message { flex: 1; }
.toast.error { color: #743c3d; border-color: #cf8f91; background: #f5dddd; }
.toast .toast-action { min-height: 38px; padding: .45rem .7rem; border: 1px solid currentColor; color: #8b4d39; background: rgba(255,255,255,.4); font: inherit; font-weight: 800; cursor: pointer; }
.toast .toast-action:hover { background: rgba(255,255,255,.75); }
.toast .toast-close { position: absolute; top: .45rem; right: .45rem; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; color: currentColor; background: transparent; cursor: pointer; opacity: .72; }
.toast .toast-close:hover, .toast .toast-close:focus-visible { background: rgba(255,255,255,.65); opacity: 1; }
.toast-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.toast-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; background: #4f8e80; transform: scaleX(1); transform-origin: left center; animation: toast-countdown var(--toast-duration) linear forwards; }
.toast.error .toast-progress { background: #b75f62; }
.toast.is-closing { animation: toast-out .18s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(18px); } }
@keyframes toast-countdown { to { transform: scaleX(0); } }
.dock-backdrop { display: none; }

@media (max-width: 1050px) {
    .planner-shell { grid-template-columns: 245px minmax(0,1fr); }.meal-dock { padding-inline: .85rem; }.calendar-workspace { padding-inline: .9rem; }.planner-toolbar { align-items: start; }.toolbar-actions { flex-wrap: wrap; justify-content: end; }.calendar-grid { grid-template-columns: repeat(7, minmax(112px,1fr)); }.library-grid { grid-template-columns: repeat(2,1fr); }.user-menu > span, .user-menu > .user-profile-link { display: none; }
    .meal-basics { grid-template-columns: 1fr 1fr; }
    .ai-recipe-workspace { grid-template-columns: minmax(330px, .9fr) minmax(430px, 1.1fr); }
    .ai-draft-columns { grid-template-columns: 1fr; }.ai-draft-columns > section + section { border-top: 1px solid var(--sand); border-left: 0; }
}
@media (max-width: 760px) {
    .topbar { min-height: 62px; grid-template-columns: 1fr auto; padding: .4rem .8rem; }.brand-logo { width: 142px; height: 50px; }.user-menu { grid-column: 2; }.main-nav { position: fixed; z-index: 70; right: .65rem; bottom: max(.55rem, env(safe-area-inset-bottom)); left: .65rem; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #b9d0c8; background: rgba(232,244,239,.97); box-shadow: 0 12px 35px rgba(73,111,104,.15); backdrop-filter: blur(14px); }.main-nav a { color: #647e79; text-align: center; }.main-nav a.active { color: var(--ink); background: #f2cfbd; }.page-content { min-height: calc(100vh - 62px); padding-bottom: 64px; }.planner-shell { height: calc(100dvh - 126px); display: block; overflow: hidden; }.meal-dock { position: fixed; inset: 0 15% 64px 0; z-index: 60; transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow); background: #dfeee8; }.meal-dock.open { transform: translateX(0); }.mobile-dock-close, .mobile-meals-open { display: grid; color: var(--ink); }.dock-backdrop { position: fixed; inset: 0 0 64px; z-index: 55; background: rgba(70,100,96,.28); }.dock-backdrop.show { display: block; }.calendar-workspace { height: 100%; padding: .8rem; }.planner-toolbar { display: grid; margin-bottom: .2rem; }.toolbar-main { display: grid; grid-template-columns: auto 1fr auto; }.toolbar-main h2 { min-width: 0; font-size: 1.55rem; }.calendar-nav { gap: .15rem; }.calendar-nav .button { display: none; }.toolbar-actions { justify-content: space-between; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }.toolbar-actions .button { white-space: nowrap; }.save-status { margin-bottom: .25rem; }.calendar-grid.week-view { display: block; overflow-y: auto; box-shadow: none; background: transparent; border: 0; }.week-view .calendar-day { min-height: 225px; margin-bottom: .75rem; border: 1px solid var(--sand); }.week-view .day-slots { grid-template-columns: 1fr 1fr; }.week-view .calendar-slot { min-height: 132px; }.month-view { grid-template-columns: repeat(2, minmax(145px,1fr)); grid-template-rows: none; box-shadow: none; }.modal { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }.modal-card { max-height: calc(100dvh - 1rem); }.meal-basics { grid-template-columns: 1fr; }.meal-tabs { margin-inline: -.2rem; }.meal-tabs button { min-width: 118px; }.description-editor { grid-template-columns: 1fr; }.meal-tab-content { min-height: 300px; }.markdown-preview { min-height: 130px; }.ingredient-row { grid-template-columns: 38px 44px minmax(70px,1fr) 60px 28px; gap: .2rem; }.ingredient-row.has-quantity-max { grid-template-columns: 36px 6px 36px 40px minmax(50px,1fr) 55px 28px; gap: .2rem; }.parser-help-card { position: fixed; top: 4.5rem; right: 1rem; left: 1rem; width: auto; max-height: calc(100dvh - 9rem); }.meal-modal .modal-footer { flex-wrap: wrap; }.split-footer { grid-template-columns: 1fr 1fr; }.split-footer span { display: none; }.standard-page { padding-top: 2rem; }.page-heading { align-items: start; }.library-grid { grid-template-columns: 1fr; }.user-card { grid-template-columns: auto 1fr auto; }.user-card .button { grid-column: 2 / -1; }.login-shell { grid-template-columns: minmax(0,1fr); }.login-art { display: none; }.login-panel { width: calc(100% - 3rem); min-width: 0; min-height: 100vh; }.login-brand { top: 1rem; }.login-logo { width: 180px; height: 65px; }.print-list { grid-template-columns: 1fr; }.toast-region { top: 4.5rem; right: .65rem; left: .65rem; width: auto; }.toast { min-width: 0; width: 100%; }
    .page-heading { display: grid; }.page-heading-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }.page-heading-actions .button { min-width: 0; padding-inline: .65rem; }
    .desktop-dock-toggle { display: none; }.ai-recipe-modal { height: calc(100dvh - 1rem); }.ai-recipe-header { min-height: 74px; padding: .85rem; }.ai-recipe-title { gap: .5rem; }.ai-recipe-mark { width: 32px; height: 32px; flex-basis: 32px; }.ai-recipe-mark svg { width: 27px; height: 27px; }.ai-recipe-title h2 { font-size: 1.3rem; }
    .ai-recipe-workspace { display: block; overflow-y: auto; }.ai-chat-panel, .ai-draft-panel { padding: .85rem; }.ai-chat-panel { min-height: 590px; border-right: 0; border-bottom: 1px solid var(--sand); }.ai-chat-messages { min-height: 270px; max-height: 360px; }.ai-draft-panel { min-height: 560px; padding-bottom: .85rem; }.ai-draft { min-height: 430px; }.ai-draft-columns { grid-template-columns: 1fr; }.ai-recipe-footer { align-items: stretch; flex-direction: column; }.ai-recipe-footer .button { width: 100%; }.ai-recipe-footer p { font-size: .63rem; }.meal-ai-entry { flex-basis: 100%; order: -1; }
}
@media print {
    body { background: white; }.topbar, .no-print, .toast-region { display: none !important; }.page-content { min-height: 0; }.print-sheet { width: 100%; padding: 0; }.print-list { grid-template-columns: 1fr 1fr; }.print-item { break-inside: avoid; }.print-sheet footer { margin-top: 1rem; }
}

@media (max-width: 1050px) {
    .ai-test-grid { grid-template-columns: minmax(290px, .8fr) minmax(0, 1.2fr); }
    .ai-test-json-grid { grid-template-columns: 1fr; }
    .ai-test-json-grid pre { height: 300px; }
}

@media (max-width: 760px) {
    .compact-modal .modal-footer { flex-wrap: wrap; }
    .compact-modal .modal-footer-spacer { display: none; }
    .compact-modal .modal-footer .button { flex: 1 1 auto; }
    .ai-test-status { grid-template-columns: auto 1fr; }
    .ai-test-status .status-badge { grid-column: 2; }
    .ai-test-grid { display: block; }
    .ai-test-console { border-right: 0; border-bottom: 1px solid var(--border-strong); }
    .ai-test-output { padding-inline: .85rem; }
    .ai-test-empty { min-height: 340px; }
    .ai-test-metrics { grid-template-columns: 1fr 1fr; }
    .ai-test-metrics > div:nth-child(2) { border-right: 0; }
    .ai-test-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--sand); }
    .ai-test-tech dl { grid-template-columns: 115px minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .main-nav { border-color: var(--sand); background: color-mix(in srgb, var(--dock) 94%, transparent); }
    .main-nav a { color: var(--ink-soft); }
    .main-nav a.active { color: var(--ink); background: var(--accent-soft); }
    .meal-dock { background: var(--dock); }
    .meal-modal .modal-body { padding-inline: .8rem; }
    .meal-modal { height: calc(100dvh - 1rem); }
    .meal-tabs { top: -1.25rem; margin-inline: -.8rem; padding-inline: .8rem; }
    .ingredient-editor, .spice-editor { padding: 0; border: 0; }
    .recipe-modal-header { min-height: 90px; align-items: start; padding: 1.2rem; }
    .recipe-modal-header h2 { font-size: 1.65rem; }
    .recipe-facts > div { padding: .85rem 1.2rem; }
    .recipe-header-actions .status-badge { display: none; }
    .recipe-description { padding: 1.3rem 1.2rem; }
    .recipe-detail-grid { grid-template-columns: 1fr; }
    .recipe-detail-grid > section { padding: 1.3rem 1.2rem; }
    .recipe-detail-grid > section + section { border-top: 1px solid var(--sand); border-left: 0; }
    .recipe-item-list li { grid-template-columns: 64px 1fr; }
}

/* Square, information-dense app chrome; circular indicators remain intentionally round. */
.main-nav, .main-nav a, .button, .icon-button, input, textarea, select, .alert,
.meal-card, .calendar-grid, .calendar-day, .calendar-slot, .segmented, .segmented button,
.modal, .library-card, .user-card, .status-badge, .avatar, .markdown-preview, .search-result,
.selected-meal, .copy-preview, .toast, .print-check, .ingredient-row.review { border-radius: 0; }