/* Everyday Table: one stylesheet for the public site, login, member area and admin.
   Plain CSS on purpose so pages work without an asset build. */

:root {
    --ink: #213f35; --green: #365947; --green-dark: #315441; --cream: #f7f5ee; --paper: #fffef9;
    --orange: #d77140; --line: #dedfd2; --sage: #e8ecdf; --sage-2: #eef0e6; --muted: #637167; --faint: #7a8374;
    --sand: #eee2d2; --error: #a8452f;
    --serif: Georgia, "Times New Roman", serif; --sans: Arial, "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.6 var(--sans); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }
p { color: var(--muted); }
h1 { font: normal clamp(40px, 5.5vw, 78px)/1.06 var(--serif); letter-spacing: -2px; margin: 22px 0; }
h1 em { color: var(--orange); font-weight: normal; }
h2 { font: normal clamp(28px, 3.5vw, 46px)/1.12 var(--serif); margin: 12px 0; }
h3 { font: normal 25px/1.2 var(--serif); margin: 12px 0; }
.eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 700; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #d8aa67; outline-offset: 3px; }

/* Buttons */
.button, button.button { border: 0; border-radius: 6px; padding: 12px 22px; background: var(--green); color: #fff; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; cursor: pointer; font-size: 15px; line-height: 1.3; }
.button.outline { background: transparent; color: var(--ink); border: 1px solid #a9b7a9; }
.button.sm { padding: 8px 14px; font-size: 12px; }
.button.danger { background: transparent; color: var(--error); border: 1px solid #d9cabe; }
.text-button { padding: 6px 0; background: none; border: 0; color: var(--green); font-size: 13px; text-decoration: underline; cursor: pointer; }
.logo { font: 700 27px var(--serif); text-decoration: none; white-space: nowrap; }
.logo span { color: var(--orange); }

/* ---------- Public site ---------- */
.notice { background: #e9dfc9; color: #5a513e; text-align: center; padding: 8px 15px; font-size: 11px; }
.site-header { padding: 23px 5%; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.site-nav { display: flex; gap: 28px; align-items: center; }
.site-nav a:not(.button) { text-decoration: none; font-size: 14px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.hero-copy { padding: 70px 10% 65px; }
.hero p { max-width: 440px; font-size: 18px; }
.hero-photo { position: relative; min-height: 420px; background: #bdc5a5 url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1400&auto=format&fit=crop') center/cover; }
.photo-note { position: absolute; bottom: 35px; left: 30px; background: var(--cream); padding: 17px 24px; border-radius: 6px; font: 22px var(--serif); box-shadow: 0 8px 40px #0002; }
.photo-note small { font: 11px var(--sans); letter-spacing: 1px; display: block; margin-bottom: 5px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0; }
.strip { padding: 20px 5%; display: flex; justify-content: space-around; background: var(--sage); font-size: 13px; gap: 20px; }
.section { padding: 72px 6%; max-width: 1500px; margin: auto; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; }
.section-head p { margin: 0; }

.bonus-offer { display: grid; grid-template-columns: 260px 1fr 210px; align-items: center; gap: 45px; padding: 40px; background: #eee1cc; border: 1px solid #d9c7a8; border-radius: 12px; }
.bonus-cover { min-height: 280px; background: var(--green-dark); color: #f8f2df; padding: 26px; border-radius: 3px 9px 9px 3px; box-shadow: -6px 0 0 #223d30, 0 15px 30px #5b4e3120;
    display: flex; flex-direction: column; justify-content: space-between; border-left: 8px solid #3c604a; transform: rotate(-3deg); }
.bonus-cover h3 { font-size: 35px; line-height: 1.15; color: #fff7dd; }
.bonus-cover .eyebrow { font-size: 9px; color: #d9d8b6; }
.bonus-cover .leaf { font-size: 36px; color: #d4b174; }
.bonus-copy h2 { font-size: 40px; }
.bonus-copy p { font-size: 14px; color: #636c59; }
.bonus-copy ul { padding-left: 18px; font-size: 13px; line-height: 2; }
.bonus-label { background: #d17141; color: #fff; font-size: 10px; letter-spacing: 1.5px; border-radius: 3px; padding: 6px 10px; display: inline-block; }
.bonus-price { text-align: center; }
.bonus-price strong { font: 60px var(--serif); }
.bonus-price p { font-size: 11px; }
.bonus-price .button { width: 100%; padding: 13px; font-size: 13px; }

.offer { display: grid; grid-template-columns: 1.3fr 1fr; gap: 65px; background: #234a3b; color: #fff; border-radius: 12px; padding: 55px; }
.offer p { color: #d4dfd2; }
.offer ul { list-style: none; padding: 0; line-height: 2.3; }
.offer li::before { content: '✓'; margin-right: 12px; color: #c2d49c; }
.price { background: #f6f3e8; color: var(--ink); padding: 30px; border-radius: 8px; }
.price strong { font: 54px var(--serif); }
.price p { color: #647367; font-size: 13px; }
.price .button { width: 100%; margin: 15px 0; }
.faq { max-width: 850px; margin: auto; }
details { padding: 20px 0; border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; }
.site-footer { padding: 30px 6%; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); font-size: 12px; flex-wrap: wrap; }
.site-footer .logo { font-size: 20px; }

/* ---------- Cards shared by public and member pages ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 25px 0; }
.tabs a { padding: 8px 18px; color: var(--ink); border: 1px solid var(--line); border-radius: 30px; font-size: 13px; text-decoration: none; }
.tabs a.active { background: var(--green); color: #fff; border-color: var(--green); }
.recipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.recipe { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.recipe-photo { width: 100%; height: 200px; object-fit: cover; display: block; background: var(--sage); }
.recipe-photo.empty { display: flex; align-items: center; justify-content: center; font: 46px var(--serif); color: #9fae8f; }
.recipe-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.recipe-body h3 { font-size: 22px; margin: 8px 0; }
.recipe-body h3 a { text-decoration: none; }
.recipe-body h3 a:hover { color: var(--green); text-decoration: underline; }
.recipe-body p { font-size: 13px; margin: 0; }
.meta { font-size: 11px; letter-spacing: 1px; color: #6a776b; text-transform: uppercase; }
.recipe-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; }
.tag { font-size: 11px; background: #edf0e5; padding: 5px 9px; border-radius: 3px; }
.favorite-button { background: transparent; color: #b76643; padding: 0; font-size: 18px; border: 1px solid #dddccf; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; flex: none; }
.favorite-button[aria-pressed="true"] { background: #f6e5da; border-color: #e3c3ae; }

.library { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.book { padding: 30px; background: #e8d4bd; min-height: 270px; border-radius: 7px; display: flex; flex-direction: column; align-items: start; }
.book:nth-child(3n+2) { background: #d4dece; }
.book:nth-child(3n) { background: #e5d6ca; }
.book .eyebrow { border-top: 1px solid #8c947b; padding-top: 15px; width: 100%; }
.book h3 { font-size: 30px; max-width: 280px; }
.book p { font-size: 13px; color: #5f6a5c; }
.book-cover { width: 100%; max-height: 260px; object-fit: cover; border-radius: 4px; margin-bottom: 14px; box-shadow: 0 10px 25px #5b4e3125; }
.book-actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; padding-top: 12px; }
.book-actions .button { font-size: 12px; padding: 9px 14px; background: transparent; border: 1px solid #8b967f; color: var(--ink); }
.book-actions .button.primary { background: var(--green); color: #fff; border-color: var(--green); }

.planner { background: var(--sage); border-radius: 12px; padding: 35px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.day { background: var(--cream); padding: 14px; border-radius: 6px; min-width: 0; display: flex; flex-direction: column; }
.day > strong { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.day .date { font-size: 11px; color: var(--faint); }
.day .picked { font: 17px/1.25 var(--serif); margin: 12px 0 4px; }
.day .picked a { text-decoration: none; }
.day .picked a:hover { text-decoration: underline; }
.day .empty-day { font-size: 12px; color: var(--faint); margin: 12px 0 4px; font-style: italic; }
.day select, .day input { width: 100%; font-size: 12px; padding: 7px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); }
.day form.choose { margin-top: auto; padding-top: 12px; display: grid; gap: 8px; }
.day .serv { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); }
.day .serv input { width: 52px; }
.day .day-actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.day .day-actions .button { padding: 6px 10px; font-size: 11px; }
.day .remove { background: none; border: 0; padding: 0; color: var(--error); font-size: 11px; text-decoration: underline; cursor: pointer; }
.planner-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 25px; }
.planner-tools > span { font-size: 12px; margin-left: auto; }
.planner-tools form { margin: 0; }

/* ---------- App shell (member + admin) ---------- */
.app body, body.app { background: #f7f6f0; }
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 250px; padding: 34px 23px; background: var(--sage-2); border-right: 1px solid #dfe3d7; display: flex; flex-direction: column; z-index: 3; overflow-y: auto; }
.sidebar .logo { font-size: 26px; }
.club-label { letter-spacing: 2px; font-size: 9px; margin: 7px 0 38px; color: #748170; text-transform: uppercase; }
.side-nav { display: flex; flex-direction: column; gap: 5px; }
.side-nav a { color: #617164; text-decoration: none; padding: 11px 14px; font-size: 15px; display: flex; gap: 12px; align-items: center; border-radius: 6px; }
.side-nav a:hover { background: #e2e7d7; color: var(--ink); }
.side-nav a .ico { width: 18px; text-align: center; font-size: 15px; }
.side-nav a.active { background: var(--green-dark); color: #fff; }
.sidebar-bottom { margin-top: auto; padding-top: 25px; }
.member-card { background: #e2e7d7; padding: 20px; border-radius: 7px; margin-bottom: 22px; }
.member-card .eyebrow { font-size: 8px; }
.member-card h3 { font-size: 23px; }
.member-card p { font-size: 12px; line-height: 1.7; margin: 0; }
.sidebar-links { display: grid; gap: 8px; }
.sidebar-links a, .sidebar-links button { font-size: 12px; text-decoration: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--ink); }
.sidebar-links a:hover, .sidebar-links button:hover { text-decoration: underline; }
.workspace { margin-left: 250px; min-height: 100vh; }
.app-header { height: 83px; padding: 20px 4%; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-badge { font-size: 9px; letter-spacing: 1.3px; color: #73816c; text-transform: uppercase; }
.avatar { width: 37px; height: 37px; border-radius: 50%; background: #e7d9c7; color: #5d604b; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.app-main { padding: 38px 4% 40px; max-width: 1500px; margin: auto; }
.page-intro { margin-bottom: 28px; }
.page-intro h2 { font-size: 42px; margin: 8px 0; }
.page-intro p { font-size: 14px; margin: 6px 0 0; max-width: 640px; }
.page-intro.split { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.flash { background: #e2e9d8; border: 1px solid #c4d1b6; color: var(--ink); border-radius: 7px; padding: 12px 18px; font-size: 13px; margin-bottom: 24px; }
.flash.error { background: #f6e4dc; border-color: #e3c3ae; }
.app-footer { font-size: 10px; color: #7d8678; text-align: center; margin-top: 45px; padding-top: 20px; border-top: 1px solid #e0e3d7; }

.week-nav { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.week-nav a.step { text-decoration: none; border: 1px solid var(--line); border-radius: 30px; padding: 5px 14px; background: var(--paper); }
.week-nav strong { font-weight: 600; }

/* Member dashboard */
.welcome { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 28px; }
.welcome h1 { font-size: 42px; letter-spacing: -1px; margin: 9px 0; }
.welcome h1 span { color: var(--orange); }
.welcome p { font-size: 13px; margin: 10px 0; }
.pill { font-size: 10px; white-space: nowrap; border: 1px solid #d9decf; padding: 6px 12px; border-radius: 20px; }
.dashboard-grid { display: grid; grid-template-columns: 2.4fr 1fr; gap: 22px; }
.feature { display: grid; grid-template-columns: 1.15fr 1fr; background: #e7ebdc; border-radius: 9px; overflow: hidden; }
.feature-copy { padding: 32px; }
.feature h2 { font-size: 40px; margin: 15px 0; }
.feature .eyebrow { font-size: 9px; }
.feature p { font-size: 13px; margin-bottom: 22px; }
.feature .small { display: block; font-size: 10px; margin-top: 12px; color: #6f7c67; }
.feature .button { font-size: 12px; padding: 11px 17px; }
.feature-photo { background: #c9d2b4 url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=900&auto=format&fit=crop') center/cover; min-height: 320px; }
.prep-card { border: 1px solid #dcdccf; border-radius: 9px; padding: 25px; background: var(--sand); display: flex; flex-direction: column; align-items: start; }
.prep-card .eyebrow { font-size: 9px; }
.prep-card .book-icon { font-size: 28px; margin: 8px 0; color: #8d9b75; }
.prep-card img { width: 90px; border-radius: 4px; margin: 10px 0; box-shadow: 0 8px 18px #5b4e3125; }
.prep-card h3 { font-size: 28px; margin: 2px 0; }
.prep-card p { font-size: 12px; }
.prep-card .button { font-size: 11px; padding: 8px 12px; }
.prep-card .push { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0 40px; }
.stats-row a { border: 1px solid #e0e2d6; background: var(--paper); color: var(--ink); display: flex; gap: 15px; align-items: center; padding: 17px; border-radius: 6px; text-decoration: none; }
.stats-row a:hover { border-color: #b9c4ad; }
.stat-icon { font-size: 22px; color: #7c8a6b; }
.stats-row b { display: block; font-size: 12px; }
.stats-row small { display: block; font-size: 10px; color: var(--faint); margin-top: 4px; }
.stats-row .arrow { margin-left: auto; }
.peek-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.peek { background: #fff; border: 1px solid #e1e3d6; border-radius: 8px; overflow: hidden; }
.peek-image { position: relative; }
.peek-image .recipe-photo { height: 160px; }
.day-label { position: absolute; top: 12px; left: 12px; font-size: 9px; background: #faf8efed; border-radius: 3px; padding: 4px 9px; letter-spacing: 1px; text-transform: uppercase; }
.peek-body { padding: 17px; }
.peek h3 { font-size: 21px; margin: 6px 0; }
.peek h3 a { text-decoration: none; }
.peek .meta { font-size: 9px; }
.tip { display: flex; gap: 18px; background: #ecefe3; border-radius: 6px; padding: 20px; margin-top: 25px; }
.tip > span { font-size: 25px; color: #c5834a; }
.tip b { font-size: 12px; }
.tip p { font-size: 12px; margin: 2px 0; }
.empty-state { padding: 35px; background: #e9edde; border-radius: 8px; grid-column: 1 / -1; }
.empty-state p { font-size: 13px; }

/* Search + filters */
.filters { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin: 20px 0 6px; }
.filters label { font-size: 11px; display: block; }
.filters input[type=search], .filters select { display: block; width: 100%; background: var(--paper); border: 1px solid #d8ded0; border-radius: 5px; padding: 11px 12px; margin-top: 5px; font-size: 14px; }
.filters .grow { flex: 1; min-width: 220px; max-width: 450px; }
.filters .check { display: flex; gap: 8px; align-items: center; font-size: 13px; padding-bottom: 12px; }

/* Recipe page */
.recipe-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: start; }
.recipe-hero .recipe-photo { height: 340px; border-radius: 9px; }
.recipe-hero h1 { font-size: 46px; letter-spacing: -1px; margin: 12px 0; }
.recipe-cols { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; margin-top: 30px; align-items: start; }
.sheet { padding: 25px 30px; background: var(--paper); border: 1px solid #dfe2d5; border-radius: 8px; }
.sheet h3 { margin-top: 0; }
.sheet ul, .sheet ol { padding-left: 20px; margin: 0; }
.sheet li { padding: 5px 0; }
.add-to-plan { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; background: var(--sage); border-radius: 8px; padding: 18px; margin-top: 20px; }
.add-to-plan label { font-size: 11px; }
.add-to-plan select, .add-to-plan input { display: block; margin-top: 4px; padding: 9px 10px; border: 1px solid #d8ded0; border-radius: 5px; background: var(--paper); }

/* Grocery list */
.grocery-layout { display: grid; grid-template-columns: minmax(0, 750px) 1fr; gap: 24px; align-items: start; }
.grocery-sheet { padding: 22px 32px; background: var(--paper); border: 1px solid #dfe2d5; border-radius: 8px; }
.grocery-sheet ul { list-style: none; padding: 0; margin: 0; }
.grocery-sheet li { border-bottom: 1px solid var(--line); }
.grocery-sheet li:last-child { border-bottom: 0; }
.grocery-sheet button { background: none; border: 0; padding: 11px 0; width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; cursor: pointer; }
.grocery-sheet .box { width: 18px; height: 18px; border: 1.5px solid #9eae91; border-radius: 3px; flex: none; margin-top: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.grocery-sheet .done .box { background: var(--green); border-color: var(--green); }
.grocery-sheet .done .label { text-decoration: line-through; color: #92998c; }
.grocery-sheet .from { display: block; font-size: 11px; color: var(--faint); }

/* Panels, forms, tables (account + admin) */
.panel { border: 1px solid #dfe3d5; border-radius: 9px; background: var(--paper); padding: 28px; margin-bottom: 24px; }
.panel > h3:first-child, .panel > .eyebrow + h3 { margin-top: 0; }
.panel p { font-size: 13px; }
.panel.green { background: var(--sage); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.field { display: block; font-size: 12px; margin: 0 0 16px; }
.field > span { display: block; font-weight: 600; }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { display: block; width: 100%; padding: 11px 13px; margin-top: 6px; border: 1px solid #d7ddcc; border-radius: 5px; background: #fff; color: var(--ink); font-size: 14px; }
.field textarea { resize: vertical; min-height: 110px; }
.hint { font-size: 11px; color: var(--faint); margin-top: 5px; display: block; }
.error-text { font-size: 12px; color: var(--error); margin-top: 5px; display: block; }
.check-line { display: flex; gap: 10px; align-items: center; font-size: 13px; margin: 6px 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--green); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.row > .field { flex: 1; min-width: 120px; }
.profile-line { display: flex; justify-content: space-between; gap: 15px; font-size: 13px; border-bottom: 1px solid #e5e6dc; padding: 13px 0; }
.big-price { font: 36px var(--serif); }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 25px 0; }
.admin-stats article { border: 1px solid #dfe3d5; border-radius: 8px; padding: 22px; background: var(--paper); }
.admin-stats span { display: block; font-size: 12px; }
.admin-stats strong { display: block; font: 42px var(--serif); margin: 5px 0 0; }
.table-wrap { overflow-x: auto; border: 1px solid #dfe3d5; border-radius: 9px; background: var(--paper); }
table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
th { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; background: #edf0e5; padding: 13px; color: #687760; font-weight: 700; }
td { padding: 14px 13px; border-bottom: 1px solid #e3e6da; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td small { display: block; font-size: 11px; color: #7c8674; margin-top: 3px; }
td a { text-decoration: none; font-weight: 600; }
td a:hover { text-decoration: underline; }
.badge { display: inline-block; font-size: 9px; letter-spacing: 1px; padding: 5px 8px; background: #e8ecdf; border-radius: 4px; white-space: nowrap; text-transform: uppercase; font-weight: 700; color: #4f6650; }
.badge.live { background: #d6e5cf; color: #2c5a3c; }
.badge.orange { background: #f4e4d6; color: #a7673f; }
.badge.grey { background: #eceae2; color: #7b7b70; }
.table-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.table-actions .button { padding: 6px 10px; font-size: 11px; }
.list-line { display: flex; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #e1e6d5; font-size: 13px; align-items: center; }
.list-line:last-child { border-bottom: 0; }
.list-line small { display: block; font-size: 11px; color: #7d876f; margin-top: 2px; }
fieldset.field { border: 1px solid #dfe3d5; border-radius: 7px; padding: 14px 16px; background: #fbfaf4; }
fieldset.field legend { font-weight: 700; padding: 0 6px; font-size: 12px; }
.pagination { margin-top: 22px; }
.pagination ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.pagination li > * { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 30px; background: var(--paper); text-decoration: none; font-size: 13px; }
.pagination li.active > * { background: var(--green); color: #fff; border-color: var(--green); }
.pagination li.disabled > * { color: #a8aea2; }

/* ---------- Login ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 50px 10%; }
.auth-panel .logo { margin-bottom: 50px; }
.auth-panel h1 { font-size: 46px; letter-spacing: -1px; margin: 10px 0; }
.auth-panel form { max-width: 380px; margin-top: 20px; }
.auth-panel .button { width: 100%; margin-top: 8px; }
.auth-photo { background: #bdc5a5 url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1400&auto=format&fit=crop') center/cover; position: relative; }

/* ---------- Responsive ---------- */
@media (max-width: 1150px) {
    .sidebar { width: 215px; padding: 25px 16px; }
    .workspace { margin-left: 215px; }
    .sidebar .logo { font-size: 23px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .stats-row { gap: 10px; }
    .stats-row a { padding: 12px; gap: 8px; }
    .recipes { grid-template-columns: repeat(2, 1fr); }
    .week { grid-template-columns: repeat(4, 1fr); }
    .welcome { display: block; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .grocery-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
    .bonus-offer { grid-template-columns: 200px 1fr; gap: 30px; }
    .bonus-price { grid-column: 1 / -1; text-align: left; border-top: 1px solid #c8bca3; padding-top: 15px; }
    .bonus-price .button { width: auto; }
    .two-col, .recipe-hero, .recipe-cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .site-nav a:not(.button) { display: none; }
    .hero { grid-template-columns: 1fr; }
    .hero-copy { padding: 45px 7%; }
    .hero-photo { min-height: 350px; }
    .library { grid-template-columns: repeat(2, 1fr); }
    .offer { grid-template-columns: 1fr; gap: 20px; padding: 30px; }
    .strip { flex-wrap: wrap; }
    .section { padding: 45px 6%; }
    .auth-page { grid-template-columns: 1fr; }
    .auth-photo { display: none; }
}
@media (max-width: 760px) {
    .sidebar { position: static; width: 100%; padding: 16px; border-right: 0; border-bottom: 1px solid #dfe3d7; }
    .workspace { margin-left: 0; }
    .club-label, .sidebar-bottom .member-card { display: none; }
    .side-nav { flex-direction: row; overflow-x: auto; margin-top: 12px; gap: 6px; padding-bottom: 4px; }
    .side-nav a { white-space: nowrap; padding: 7px 11px; font-size: 13px; }
    .sidebar-bottom { padding-top: 10px; }
    .sidebar-links { display: flex; gap: 16px; flex-wrap: wrap; }
    .app-header { height: auto; min-height: 56px; padding: 12px 5%; }
    .header-badge { display: none; }
    .app-main { padding: 24px 5%; }
    .welcome h1, .page-intro h2 { font-size: 34px; }
    .feature { grid-template-columns: 1fr; }
    .feature-copy { padding: 24px; }
    .feature h2 { font-size: 32px; }
    .feature-photo { min-height: 200px; order: -1; }
    .stats-row, .peek-grid, .recipes, .admin-stats, .library { grid-template-columns: 1fr; }
    .week { grid-template-columns: repeat(2, 1fr); }
    .planner { padding: 18px; }
    .planner-tools > span { margin-left: 0; }
    .pill { display: none; }
    .grocery-sheet { padding: 14px 18px; }
    .panel { padding: 20px; }
}
@media (max-width: 550px) {
    .section-head { display: block; }
    .hero h1 { font-size: 50px; }
    .site-footer { flex-direction: column; align-items: start; }
    .bonus-offer { grid-template-columns: 1fr; padding: 26px; }
    .bonus-cover { max-width: 220px; min-height: 250px; margin: 0 auto; width: 100%; }
    .bonus-price { text-align: center; }
    .bonus-price .button { width: 100%; }
    .week { grid-template-columns: 1fr; }
}
@media print {
    .sidebar, .app-header, .no-print, .env-banner, .app-footer { display: none !important; }
    .workspace { margin: 0; }
    body { background: #fff; }
    .grocery-sheet, .sheet { border: 0; padding: 0; }
}

/* Admin form labels (label element followed by its input) */
.field > label:not(.check-line) { display: block; font-weight: 600; font-size: 12px; }
.check-line.field { margin-bottom: 16px; }
.recipe > a { display: block; text-decoration: none; }
.sidebar-links form { margin: 0; }
@media (max-width: 760px) { .sidebar-links { align-items: center; } }

/* Brand admin */
.swatches { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.swatches i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #0002; display: inline-block; }
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.theme-option { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: pointer; background: #fff; }
.theme-option:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.theme-option input { position: absolute; opacity: 0; }
.theme-option:has(input:focus-visible) { outline: 3px solid #d8aa67; outline-offset: 2px; }
.theme-preview { width: 54px; height: 44px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; border: 1px solid #0001; font-size: 15px; }
.theme-option small { display: block; font-size: 11px; color: var(--faint); }
.theme-option b { font-size: 13px; }
.policy-text { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .theme-grid { grid-template-columns: 1fr; } }

/* Template heading type (set per brand by Themes::css) */
h1, h2, h3, .logo { font-style: var(--heading-style, normal); text-transform: var(--heading-case, none); }
h1, h2, h3 { font-weight: var(--heading-weight, normal); }

/* Launch Studio */
.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
.studio-card { border: 1px solid #dfe3d5; border-radius: 10px; background: var(--paper); overflow: hidden; }
.studio-thumb, .template-frame { display: block; position: relative; height: 210px; overflow: hidden; background: var(--sage); border-bottom: 1px solid #dfe3d5; }
.studio-thumb iframe, .template-frame iframe { position: absolute; top: 0; left: 0; width: calc(100% / .3); height: calc(100% / .3); border: 0; transform: scale(.3); transform-origin: 0 0; pointer-events: none; }
.studio-body { padding: 18px 20px 20px; }
.studio-progress { height: 6px; border-radius: 6px; background: var(--sage); overflow: hidden; }
.studio-progress span { display: block; height: 100%; background: var(--green); }
.stepper { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: step; }
.stepper li { counter-increment: step; }
.stepper a, .stepper span { display: inline-flex; gap: 8px; align-items: center; padding: 7px 13px; border-radius: 30px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; text-decoration: none; color: var(--muted); }
.stepper a::before, .stepper span::before { content: counter(step); font-weight: 700; font-size: 11px; }
.stepper li.done a { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.stepper li.done a::before { content: '✓'; }
.stepper li.current a, .stepper li.current span { background: var(--green); color: #fff; border-color: var(--green); }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 10px; }
.logo-option, .template-option { position: relative; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 14px; cursor: pointer; background: #fff; }
.logo-option > input[type=radio], .template-option > input[type=radio] { position: absolute; opacity: 0; }
.logo-option:has(> input:checked), .template-option:has(> input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.logo-option:has(> input:focus-visible), .template-option:has(> input:focus-visible) { outline: 3px solid #d8aa67; outline-offset: 2px; }
.logo-option b, .template-option b { font-size: 13px; }
.logo-preview { min-height: 80px; display: flex; align-items: center; justify-content: center; background: var(--cream); border-radius: 6px; padding: 8px; overflow: hidden; }
.logo-preview svg, .logo-preview img { max-width: 100%; height: auto; max-height: 64px; }
.logo-preview .logo { font-size: 22px; }
.logo-preview input[type=file] { width: 100%; font-size: 12px; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.template-option { padding: 0; overflow: hidden; }
.template-frame { height: 236px; }
.template-meta { display: flex; gap: 10px; align-items: center; padding: 0 14px; }
.template-meta a { margin-left: auto; }
.template-option small { padding: 0 14px 14px; color: var(--faint); font-size: 12px; }
@media (max-width: 760px) { .template-grid, .studio-grid { grid-template-columns: 1fr; } }