/* Cocktail Cabinet — Bordeaux & Champagne.
 * Single, intentional visual system shared by the desktop site and installed PWA.
 * This file overrides legacy styles without changing application behaviors.
 */
:root {
  /* Bordeaux is the identity; champagne is the visible action and detail accent. */
  --bg:#F8F4EE;
  --surface:#FFFCF8;
  --ink:#30242A;
  --muted:#746469;
  --line:#E7D8C8;
  --accent:#742E43;
  --accent-dark:#632439;
  --soft-accent:#F5E8EB;
  --forest:#742E43; /* compatibility alias for pre-redesign CSS */
  --sand:#E4CDAF;
  --shadow:0 17px 50px rgba(66,32,45,.075);
  --radius:18px;
  --max:1370px;
  --surface-muted:#F5EDE6;
  --surface-hover:#FAF2EA;
  --panel-raised:#FFFFFF;
  --brand-wine:#742E43;
  --champagne:#C5A174;
  --champagne-strong:#805D31;
  --champagne-button:#E8C994;
  --champagne-pale:#F2E3CC;
  --champagne-surface:#FAF1E3;
  --champagne-border:#D4B488;
  --champagne-ink:#442E20;
  --focus:#742E43;
  --danger:#A53D50;
  --good:#805F37; /* success uses the champagne family, not green */
  --dark-hero:#401F2D;
  --control-shadow:0 2px 8px rgba(54,24,37,.035);
  accent-color:var(--accent);
}
html[data-theme="dark"] {
  --bg:#181619;
  --surface:#272126;
  --ink:#FAF2EB;
  --muted:#BDAEB0;
  --line:#4C3B3C;
  --accent:#E9B7C6;
  --accent-dark:#F2C3D0;
  --soft-accent:#482C3A;
  --forest:#77354C; /* compatibility alias */
  --sand:#A0805E;
  --shadow:0 22px 52px rgba(0,0,0,.23);
  --surface-muted:#32292C;
  --surface-hover:#3C3033;
  --panel-raised:#30282D;
  --brand-wine:#E9B7C6;
  --champagne:#E4C18D;
  --champagne-strong:#F0D6AD;
  --champagne-button:#E9CA97;
  --champagne-pale:#443429;
  --champagne-surface:#382D29;
  --champagne-border:#8C6B4A;
  --champagne-ink:#342319;
  --focus:#E9C692;
  --danger:#FF9DA9;
  --good:#E4C18D;
  --dark-hero:#281D27;
  --control-shadow:0 2px 8px rgba(0,0,0,.1);
}

html{background:var(--bg);scroll-padding-top:95px}
body{font-family:Lato,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;letter-spacing:.004em;line-height:1.55}
body::selection{background:var(--soft-accent);color:var(--ink)}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:where(input,textarea,select){accent-color:var(--brand-wine)}
:where(button,summary,select){-webkit-tap-highlight-color:transparent}
a,button{touch-action:manipulation}
.ui-icon{width:19px;height:19px;flex:0 0 auto;display:inline-block;vertical-align:middle;stroke:currentColor;fill:none;transition:transform .2s ease}
.button .ui-icon,.banner-link .ui-icon,.filter-summary .ui-icon{width:17px;height:17px}
h1,h2,h3{color:var(--ink);letter-spacing:-.037em}
h1{font-size:clamp(37px,4.1vw,59px);font-weight:900;line-height:1.05}
h2{font-weight:900;letter-spacing:-.034em}
h1 em,h2 em{color:var(--accent);font-style:normal}
.eyebrow,.section-kicker,.sidebar-eyebrow,.top-actions-caption{letter-spacing:.15em;font-weight:900}
.eyebrow,.section-kicker{color:var(--champagne-strong)}
.intro{font-size:15px;color:var(--muted);line-height:1.75}
.subtle,.muted{color:var(--muted)}

/* Desktop navigation: calm, structured and editorial. */
.shell{grid-template-columns:246px minmax(0,1fr)}
.desktop-sidebar{background:var(--surface);border-right:1px solid var(--line);padding:32px 16px 25px 20px}
.brand{font-size:18px;gap:11px;letter-spacing:-.035em;line-height:1.04}
.brand b{font-weight:900}
.brand-symbol.brand-pictogram{border-color:transparent;background:transparent;border-radius:12px;overflow:hidden;box-shadow:none;width:44px;height:44px;flex-basis:44px}
.brand-pictogram img{width:100%;height:100%;object-fit:cover}
.sidebar-eyebrow{font-size:9px;letter-spacing:.145em;margin:46px 6px 17px}
.sidebar-nav{gap:6px}
.nav-link{min-height:47px;gap:12px;padding:11px 14px;border-radius:12px;font-size:13.5px;transition:background .18s,color .18s,transform .18s}
.nav-link .nav-icon{width:19px;height:19px;color:var(--muted)}
.nav-link:hover{background:var(--surface-hover);color:var(--ink)}
.nav-link:hover .nav-icon{color:var(--accent)}
.nav-link.active{background:var(--champagne-surface);color:var(--accent-dark);box-shadow:inset 3px 0 0 var(--champagne-strong)}
.nav-link.active .nav-icon{color:var(--champagne-strong)}
.sidebar-bottom{padding:20px 4px 2px}
.avatar{font-weight:900;background:var(--champagne-pale);color:var(--champagne-ink);border:1px solid var(--champagne-border)}
html[data-theme="dark"] .avatar{color:var(--champagne-strong)}
.sidebar-profile{gap:11px}
.main-column{min-width:0}
.top-actions{height:80px;padding:0 clamp(26px,3.5vw,62px);max-width:var(--max)}
.top-actions-caption{font-size:9px;letter-spacing:.16em}
.main-content{padding:10px clamp(26px,3.5vw,62px) 85px;max-width:var(--max)}
.page-footer{max-width:var(--max);padding:0 clamp(26px,3.5vw,62px) 30px}
.theme-toggle,.mobile-theme-toggle{display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid var(--champagne-border);background:var(--champagne-surface);color:var(--accent-dark);border-radius:999px;box-shadow:var(--control-shadow);font-weight:700;min-width:45px;min-height:44px;padding:10px 15px}
.theme-toggle:hover,.mobile-theme-toggle:hover{border-color:var(--champagne);background:var(--surface-hover)}
.theme-icon-stack{display:grid;place-items:center;width:20px;height:20px}
.theme-icon-stack>.ui-icon{grid-area:1/1;width:20px;height:20px}
.theme-sun{display:none}
html[data-theme="dark"] .theme-moon{display:none}
html[data-theme="dark"] .theme-sun{display:inline-block}

/* Buttons, forms and dense admin controls. */
.button{border:1px solid var(--champagne-border);border-radius:12px;background:var(--champagne-button);color:var(--champagne-ink);font-weight:900;box-shadow:0 4px 13px rgba(74,26,43,.095);min-height:46px;padding:11px 19px;gap:10px;letter-spacing:.01em}
.button:hover{background:var(--champagne);border-color:var(--champagne-strong);opacity:1;transform:translateY(-1px)}
html[data-theme="dark"] .button:hover{background:var(--champagne-strong);border-color:var(--champagne-strong)}
.button.secondary{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--control-shadow)}
.button.secondary:hover{background:var(--surface-hover);border-color:var(--champagne)}
.filter-button{background:var(--champagne-button);color:var(--champagne-ink);border:1px solid var(--champagne-border);border-radius:11px;font-weight:900}
.filter-button:hover{border-color:var(--champagne-strong);background:var(--champagne)}
:where(.field input,.field textarea,.field select,.form-stack input,.form-stack select,.form-stack textarea,.search-wrap,.filters select,.shelf-search,.catalog-search,.category-entry-search input,.category-edit-form input,.category-edit-form select,.ingredient-small-form input,.ingredient-small-form select){background:var(--panel-raised);border-color:var(--line);border-radius:11px;box-shadow:var(--control-shadow)}
:where(input,textarea,select):focus{border-color:var(--accent);outline-color:var(--accent)}
:where(input,textarea)::placeholder{color:var(--muted);opacity:.76}
.field,.form-stack label{color:var(--ink);font-weight:700}
.field small,.form-stack small{font-weight:400;color:var(--muted)}
:where(input,textarea,select,button).disabled{opacity:.5}

/* Discover: warm photography, refined card hierarchy and generous spacing. */
.discover-header{margin-top:22px;margin-bottom:27px;align-items:flex-end}
.discover-header h1{margin:11px 0 13px;max-width:670px}
.discover-header .intro{margin-bottom:0}
.feature-banner{background:linear-gradient(113deg,#492239 0%,#742E43 62%,#96546B 100%);border:1px solid var(--champagne-border);border-radius:22px;min-height:270px;padding:37px 44px;margin-bottom:46px;box-shadow:0 14px 39px rgba(58,22,37,.15)}
.feature-banner:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--champagne-strong),var(--champagne-button));z-index:3}
.feature-banner h2{color:#FFF8F1;font-size:clamp(27px,3.2vw,39px);max-width:370px;line-height:1.12}
.feature-banner p{color:#F3DDE2;max-width:310px}
.feature-banner .eyebrow{color:#F4D6A7}
.banner-link{color:#F4D6A7;border-bottom-color:var(--champagne-strong);font-weight:900}
.banner-link:hover{color:#FFF4E8;border-color:#FFF4E8}
.feature-photo{width:57%;mask-image:linear-gradient(90deg,transparent,black 40%);opacity:.79}
.section-heading{margin-bottom:18px}
.section-heading h2{font-size:26px}
.count-badge{background:var(--champagne-pale);color:var(--champagne-ink);border:1px solid var(--champagne-border);font-size:12px}
html[data-theme="dark"] .count-badge{color:var(--champagne-strong)}
.filters{gap:11px;margin-bottom:24px}
.search-wrap,.filters select{min-height:49px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.search-wrap{gap:10px;padding:0 16px}
.search-wrap .search-icon{width:18px;height:18px;color:var(--muted)}
.search-wrap input{font-size:13px}
.filters select{padding-left:13px;padding-right:14px;font-size:13px}
.recipe-grid{gap:20px}
.recipe-card{background:var(--surface);border-color:var(--line);border-radius:17px;box-shadow:var(--control-shadow);transition:transform .22s,box-shadow .22s,border-color .22s;position:relative}
.recipe-card:after{content:"";position:absolute;inset:auto 17px 0;height:2px;background:var(--champagne);opacity:.78}
.recipe-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--champagne)}
.card-visual{height:225px;background:var(--surface-muted)}
.card-visual img{object-fit:cover;transition:transform .45s ease;filter:saturate(.95)}
.recipe-card:hover .card-visual img{transform:scale(1.035)}
.card-method{top:15px;left:15px;background:var(--champagne-pale);backdrop-filter:blur(8px);color:var(--champagne-ink);font-size:10px;padding:5px 11px;border:1px solid var(--champagne-border);letter-spacing:.065em}
html[data-theme="dark"] .card-method{color:var(--champagne-strong)}
.card-content{padding:18px 19px 18px}
.card-caption{color:var(--champagne-strong);font-size:10px;letter-spacing:.09em}
.card-content h3{font-size:20px;margin:9px 0 15px;min-height:45px;line-height:1.18}
.card-foot{align-items:center;color:var(--muted)}
.card-arrow{background:var(--champagne-pale);border-color:var(--champagne-border);color:var(--champagne-strong);width:29px;height:29px}
.card-arrow .ui-icon{width:15px;height:15px}
.card-typographic{color:var(--ink)}
.empty-state{border-color:var(--line);background:var(--surface)}
.empty-emoji .ui-icon{width:48px;height:48px;color:var(--accent)}

/* Recipe reading: natural editorial flow on any device. */
.back-link{display:inline-flex;align-items:center;gap:9px;color:var(--accent-dark);font-weight:900;font-size:13px;min-height:40px}
.back-link .ui-icon{width:17px;height:17px}
.detail-hero{border-radius:21px;min-height:360px;border-color:var(--line);box-shadow:var(--control-shadow)}
.detail-copy{padding:47px 48px}
.detail-copy h1{font-size:clamp(36px,4vw,55px);margin-bottom:17px}
.detail-copy p{line-height:1.7;color:var(--muted);font-size:14px}
.detail-tags{gap:8px;flex-wrap:wrap}
.detail-tags span{background:var(--champagne-surface);border:1px solid var(--champagne-border);color:var(--champagne-strong);border-radius:999px;padding:6px 11px;font-size:11px}
.detail-art{background:var(--surface-muted)}
.recipe-photo{object-fit:cover}
.detail-typographic{color:var(--accent);max-width:80%}
.detail-columns{gap:clamp(30px,4vw,60px);margin-top:47px}
.detail-ingredients,.detail-method{min-width:0}
.ingredient-list{margin-top:18px}
.ingredient-line{min-height:61px;padding:10px 0;gap:14px}
.ingredient-line input{border-radius:6px}
.ingredient-text{font-size:14px;min-width:0;overflow-wrap:anywhere}
.ingredient-line strong{font-size:13px;color:var(--champagne-strong);white-space:normal;text-align:right;flex:0 0 auto;max-width:38%}
.steps li{gap:17px;margin-bottom:20px;padding-bottom:20px}
.step-num{color:var(--champagne-ink);background:var(--champagne-button);border:1px solid var(--champagne-border);width:36px;height:36px}
.steps p{line-height:1.72;font-size:14px}
.availability-note{background:var(--champagne-surface);border:1px solid var(--champagne-border);border-radius:12px;line-height:1.65}

/* My shelf: an intentionally quiet hierarchy, never a wall of toggles. */
.pantry-layout{gap:24px;grid-template-columns:minmax(325px,.97fr) minmax(0,1.03fr)}
.pantry-controls,.pantry-results{border:1px solid var(--line);border-radius:18px;padding:25px;background:var(--surface);box-shadow:var(--control-shadow)}
.pantry-results{top:20px}
.shelf-header{margin-bottom:16px}
.shelf-header h2{font-size:23px;margin:0 0 5px}
.shelf-search{min-height:48px;background:var(--panel-raised);border-radius:11px}
.shelf-search .search-icon{width:18px;height:18px;color:var(--muted)}
.shelf-branch,.shelf-branch .shelf-branch{border:1px solid var(--line);border-radius:12px;margin:7px 0;background:var(--surface);overflow:clip}
.shelf-branch .shelf-branch{background:var(--surface-muted);border-color:var(--line);margin:6px 0}
.shelf-branch-title{padding:12px 13px;min-height:51px;gap:12px;color:var(--ink);font-size:13.5px;line-height:1.3}
.shelf-branch-title:hover{background:var(--champagne-surface)}
.shelf-branch-title:focus-visible{outline-offset:-3px}
.shelf-branch-meta{display:flex;align-items:center;gap:8px;font-size:11px}
.branch-count{color:var(--muted);font-size:11px}
.shelf-chevron{width:18px;height:18px;color:var(--champagne-strong);transform:rotate(0deg)}
.shelf-branch[open]>.shelf-branch-title .shelf-chevron{transform:rotate(180deg)}
.shelf-branch[open]>.shelf-branch-title>.shelf-branch-meta span{transform:none}
.shelf-branch-content{padding:2px 10px 10px}
.shelf-branch[open]>.shelf-branch-content{animation:shelf-open .17s ease-out}
@keyframes shelf-open{from{opacity:.5;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.shelf-option{border-radius:9px;min-height:45px;gap:11px;padding:9px 10px!important;transition:background .15s}
.shelf-option:hover{background:var(--surface-hover)}
.shelf-option input{accent-color:var(--brand-wine);width:19px;height:19px}
.shelf-generic{background:var(--champagne-surface);border-left:2px solid var(--champagne-border)}
.shelf-product{font-size:12.5px;color:var(--ink)}
.shelf-count{background:var(--champagne-pale);border:1px solid var(--champagne-border);color:var(--champagne-strong);padding:6px 11px;font-weight:900}
.save-bottom{margin-top:19px}
.pantry-results-heading h2{font-size:25px;margin:10px 0 8px}
.match-group{margin-bottom:24px}
.match-group-heading{padding-bottom:9px}
.match-group-heading h3{font-size:15px}
.pantry-match{padding:15px 0;gap:12px}
.match-icon{background:var(--champagne-surface);color:var(--champagne-strong);border-radius:11px;width:37px;height:37px}
.match-icon .ui-icon{width:18px;height:18px}
.match-icon.ready{background:var(--champagne-button);color:var(--champagne-ink)}
html[data-theme="dark"] .match-icon.ready{background:var(--champagne-button);color:var(--champagne-ink)}
.match-body strong{font-weight:900;line-height:1.3}
.match-body small{line-height:1.5}
.match-count{background:var(--champagne-surface);color:var(--champagne-strong);border:1px solid var(--champagne-border);padding:5px 8px;border-radius:999px;font-size:11px}

/* Editor and Settings: same form language, better hierarchy. */
.editor-panel,.pantry-results,.pantry-controls,.settings-link,.management-item{box-shadow:var(--control-shadow)}
.editor-panel{border-radius:17px;padding:28px}
.panel-heading{margin-bottom:20px}
.ingredient-editor-row{border-radius:13px;padding:18px;border-color:var(--line);background:var(--surface-muted)}
.ingredient-row-top,.ingredient-row-bottom{gap:13px}
.category-pick-option{background:var(--surface);border-color:var(--line);border-radius:10px}
.category-pick-option:has(input:checked){background:var(--champagne-surface);border-color:var(--champagne-strong)}
.category-dialog{border-radius:20px;background:var(--surface);border-color:var(--line)}
.category-dialog::backdrop{background:rgba(25,18,23,.68);backdrop-filter:blur(6px)}
.dialog-close{display:grid;place-items:center;border-radius:10px;background:var(--surface-muted)}
.dialog-close .ui-icon{width:20px;height:20px}
.settings-grid{gap:16px}
.settings-link{min-height:108px;padding:23px;border-radius:17px;transition:transform .18s,border-color .18s,box-shadow .18s}
.settings-link:hover{border-color:var(--champagne)}
.settings-icon{background:var(--champagne-pale);color:var(--champagne-strong);border:1px solid var(--champagne-border);border-radius:13px;width:48px;height:48px}
.settings-icon .ui-icon{width:23px;height:23px}
.settings-link strong{font-size:16px}
.settings-link small{font-size:12.5px}
.settings-arrow{display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.settings-arrow .ui-icon{width:17px;height:17px}
.settings-link:hover .settings-arrow{color:var(--champagne-strong)}
.settings-appearance>.button{flex:0 0 auto}
.settings-tabs{background:var(--surface-muted);border-color:var(--line)}
.settings-tab{border-radius:9px}
.settings-tab[aria-selected="true"]{background:var(--champagne-surface);color:var(--champagne-strong);box-shadow:inset 0 -2px 0 var(--champagne-strong),var(--control-shadow)}
.taxonomy-node{background:var(--surface);border-radius:12px}
.taxonomy-node summary{min-height:52px;gap:9px}
.taxonomy-node summary>span:first-child{flex:1}
.taxonomy-node .taxonomy-chevron{width:18px;height:18px;color:var(--champagne-strong)}
.taxonomy-node[open]>summary>.taxonomy-chevron{transform:rotate(180deg)}
.catalog-item,.category-brand-list a{border-color:var(--line)}
.management-item{border-radius:15px;padding:15px 18px}
.management-photo{border-radius:12px}
.management-photo-upload summary{display:flex;align-items:center;gap:5px;color:var(--champagne-strong)}
.management-photo-upload summary .ui-icon{width:16px;height:16px}
.management-photo-upload[open] summary .chevron{transform:rotate(180deg)}
.danger,.management-actions .text-button{color:var(--danger)}

/* Login uses the same cocktail-lounge language as the Discover hero. */
.auth-art{background:radial-gradient(ellipse at 70% 28%,#8C536C 0%,transparent 57%),linear-gradient(145deg,#492235 0%,#261A27 100%)}
.auth-art h1{color:#FFF4E8}
.auth-art h1 em{color:#F4D6A7}
.auth-art-content p{color:#EAD5D7}
.auth-credits{color:#F4D6A7}
.auth-panel{background:var(--bg)}
.auth-panel-inner{max-width:430px}
.auth-panel .muted{color:var(--muted)}
.auth-mobile-brand{color:var(--ink)}
.flash{background:var(--surface);border-color:var(--line);border-left-color:var(--champagne-strong);box-shadow:var(--shadow)}
.flash.error{border-left-color:var(--danger)}

/* Champagne details used intentionally throughout light and dark experiences. */
.desktop-sidebar:before{content:"";height:3px;position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,var(--champagne-strong),var(--champagne-button),transparent 82%)}
.sidebar-eyebrow,.top-actions-caption{color:var(--champagne-strong)}
.theme-toggle .ui-icon,.mobile-theme-toggle .ui-icon{color:var(--champagne-strong)}
.section-heading{border-bottom:1px solid var(--champagne-border);padding-bottom:12px}
.section-heading .eyebrow{color:var(--champagne-strong)}
.pantry-results-heading,.panel-heading{border-bottom:1px solid var(--champagne-border);padding-bottom:13px}
.match-group-heading{border-bottom:1px solid var(--champagne-border)}
.shelf-branch[open]>.shelf-branch-title{box-shadow:inset 3px 0 0 var(--champagne-strong)}
.category-pick-option input:checked,.catalog-options input:checked,.shelf-option input:checked{accent-color:var(--brand-wine)}
.settings-link:hover .settings-icon{background:var(--champagne-button);color:var(--champagne-ink)}
.brand-symbol.brand-pictogram{background:var(--champagne-surface);outline:1px solid var(--champagne-border);outline-offset:0}
.button:focus-visible,.filter-button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
html[data-theme="dark"] .shelf-count,html[data-theme="dark"] .match-count,html[data-theme="dark"] .detail-tags span{color:var(--champagne-strong)}
html[data-theme="dark"] .card-arrow{color:var(--champagne-strong)}
html[data-theme="dark"] .card-caption{color:var(--champagne-strong)}
html[data-theme="dark"] .settings-icon{color:var(--champagne-strong)}
html[data-theme="dark"] .settings-link:hover .settings-icon{color:var(--champagne-ink)}
html[data-theme="dark"] .flash{border-left-color:var(--champagne-strong)}
@media(hover:hover){.button:hover{filter:brightness(1.025)}}

/* Responsive PWA: thumb friendly, safe-area aware, comfortable on small phones. */
@media(max-width:1200px){.shell{grid-template-columns:222px minmax(0,1fr)}.recipe-grid{gap:15px}.card-visual{height:206px}.main-content{padding-inline:27px}.top-actions,.page-footer{padding-inline:27px}}
@media(max-width:900px){
 .shell{display:block}
 .desktop-sidebar,.top-actions,.page-footer{display:none}
 .main-content{padding:25px 22px calc(122px + env(safe-area-inset-bottom));max-width:850px}
 .mobile-header{display:flex;min-height:66px;padding:11px 21px;padding-top:max(11px,env(safe-area-inset-top));background:var(--surface);border-color:var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .mobile-header .brand{font-size:16px}
 .mobile-theme-toggle{width:43px;height:43px;padding:0;margin-left:auto;margin-right:13px}
 .bottom-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-color:var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 -5px 26px rgba(35,18,29,.095)}
 .bottom-nav a{min-height:54px;gap:5px;font-size:10px;font-weight:900;border-radius:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
 .bottom-nav a>.nav-icon{width:22px;height:22px;color:currentColor}
 .bottom-nav a>span{font-size:10px;line-height:1.1}
 .bottom-nav a.active{background:var(--champagne-surface);color:var(--champagne-strong)}
 .bottom-nav .mobile-add{color:var(--champagne-strong)}
 .bottom-nav .mobile-add>.nav-icon{border-radius:50%;background:var(--champagne-button);color:var(--champagne-ink);border:1px solid var(--champagne-border);padding:4px;width:30px;height:30px;box-sizing:border-box}
 .bottom-nav .mobile-add.active>.nav-icon{box-shadow:0 0 0 3px var(--champagne-pale)}
 .bottom-nav .mobile-add>span{background:none;color:inherit;border-radius:0;padding:0;font-size:10px;font-weight:900;line-height:1.1}
 .pantry-layout{grid-template-columns:1fr}
 .pantry-results{position:static}
 .settings-grid{grid-template-columns:1fr}
 .auth-art{display:none}
 .auth-layout{grid-template-columns:1fr}
 .auth-panel{min-height:100dvh}
}
@media(max-width:590px){
 body{font-size:14px}
 .main-content{padding:21px 17px calc(115px + env(safe-area-inset-bottom))}
 .mobile-header{padding-inline:17px}
 .brand-symbol.brand-pictogram{width:38px;height:38px;flex-basis:38px}
 h1{font-size:clamp(34px,9vw,42px)}
 .page-heading{margin:10px 0 28px}
 .discover-header{margin:10px 0 24px}
 .discover-header h1{font-size:39px}
 .feature-banner{min-height:220px;padding:27px 24px;margin-bottom:32px;border-radius:18px}
 .feature-banner h2{font-size:28px;max-width:230px}
 .feature-banner p{max-width:220px;font-size:12.5px}
 .feature-photo{width:74%;opacity:.45;mask-image:linear-gradient(90deg,transparent,black 70%)}
 .filters{grid-template-columns:1fr 1fr;gap:9px}
 .filters .search-wrap{grid-column:1/-1}
 .filters select,.filter-button{font-size:12px;min-height:45px}
 .recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .card-visual{height:158px}
 .card-content{padding:13px 12px 12px}
 .card-content h3{font-size:16px;min-height:40px;margin:7px 0}
 .card-caption{font-size:8px}
 .card-foot{font-size:11px}
 .card-arrow{width:25px;height:25px}
 .detail-hero{display:flex;flex-direction:column-reverse;border-radius:17px;min-height:0}
 .detail-art{height:250px}
 .detail-copy{padding:28px 24px}
 .detail-copy h1{font-size:39px}
 .detail-columns{grid-template-columns:1fr;gap:32px;margin-top:32px}
 .ingredient-line{min-height:58px}
 .steps li{gap:14px}
 .pantry-controls,.pantry-results{padding:20px 16px;border-radius:16px}
 .shelf-header h2{font-size:21px}
 .shelf-count{padding:4px 8px}
 .shelf-branch-title{min-height:52px}
 .settings-link{min-height:92px;padding:17px;gap:12px}
 .settings-icon{width:43px;height:43px;flex-basis:43px}
 .settings-appearance{flex-wrap:wrap}
 .settings-appearance>.button{margin-left:auto}
 .editor-panel{padding:20px 17px}
 .ingredient-editor-row{padding:14px}
 .category-pick-list{grid-template-columns:1fr 1fr}
 .management-item{padding:13px}
 .auth-panel{padding:32px 24px}
}
@media(max-width:375px){
 .main-content{padding-inline:14px}
 .mobile-header{padding-inline:13px}
 .mobile-header .brand{font-size:14px}
 .mobile-theme-toggle{width:39px;height:39px;margin-right:8px}
 .recipe-grid{grid-template-columns:1fr}
 .card-visual{height:195px}
 .card-content h3{min-height:0}
 .bottom-nav{padding-inline:6px;gap:0}
 .bottom-nav a>span,.bottom-nav .mobile-add>span{font-size:9px}
 .settings-link{padding:13px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* Recipe detail: shelf availability is distinct from the manual prep checklist.
   Shared theme tokens support both light and dark mode. */
.ingredient-shelf-summary{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.ingredient-shelf-summary strong{color:var(--champagne-strong);font-weight:900}
.ingredient-line.is-on-shelf{
 background:color-mix(in srgb,var(--champagne-surface) 62%,var(--surface));
 border-bottom-color:var(--champagne-border);
 border-inline-start:3px solid var(--champagne);
 border-radius:9px;
 padding-inline:10px;
 margin-inline:-10px;
}
.ingredient-shelf-status{
 display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;
 color:var(--champagne-strong);font-size:11px;font-weight:750;line-height:1.3;
 white-space:nowrap;
}
.shelf-status-symbol{
 display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;
 border:1px solid var(--champagne-border);border-radius:50%;
 background:var(--champagne-pale);
}
.shelf-status-symbol .ui-icon{width:12px;height:12px}
.ingredient-line.is-on-shelf .ingredient-text{font-weight:650}
html[data-theme="dark"] .ingredient-line.is-on-shelf{
 background:color-mix(in srgb,var(--champagne-surface) 38%,var(--surface));
}
@media(max-width:590px){
 .ingredient-line.is-on-shelf{margin-inline:-7px;padding-inline:7px}
 .ingredient-shelf-status{flex-basis:20px;justify-content:center}
 .ingredient-shelf-status>span:last-child{display:none}
}