/* DemetraGarden — App CSS
   Loaded by includes/header.php. Tailwind handles utilities; this file handles
   custom animations, component overrides, and design tokens.
   Theme: Botanical & Warm — cream + deep forest green, soft sage, terracotta. */

/* ── Design tokens ── */
:root {
    --c-forest:    #1f3d2b;
    --c-pine:      #16301f;
    --c-grove:     #356145;
    --c-fern:      #4f7d5a;
    --c-sage:      #7da17d;
    --c-moss:      #9bb89a;
    --c-mint:      #c6ddc4;
    --c-mist:      #efe9db;
    --c-cream:     #faf7f0;
    --c-parchment: #f1ead9;
    --c-clay:      #c4703f;
    --c-claydark:  #a85a30;
    --c-bark:      #6b4f3a;
    --c-wheat:     #d8a657;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-sans:    'Mulish', ui-sans-serif, system-ui, -apple-system, sans-serif;

    --shadow-soft: 0 1px 2px rgba(31,61,43,.04), 0 6px 16px -8px rgba(31,61,43,.10);
    --shadow-lift: 0 4px 10px rgba(31,61,43,.06), 0 16px 32px -12px rgba(31,61,43,.18);
}

/* ── Base typography ── */
body {
    font-family: var(--font-sans);
    color: #2c3530;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.font-display { font-family: var(--font-display); }
h1, h2, h3, .heading { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ── Warm paper background (applied to body.bg-cream) ──
   Subtle grain via inline SVG so there's depth, not a flat colour block. */
body.bg-cream, body.bg-mist {
    background-color: #faf7f0;
    background-image:
        radial-gradient(rgba(31,61,43,.025) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ── Keyframes ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes floatOrb { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-14px) rotate(3deg); } }
@keyframes floatSym { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes pulseRing { 0% { box-shadow:0 0 0 0 rgba(125,161,125,.45); } 70% { box-shadow:0 0 0 12px rgba(125,161,125,0); } 100% { box-shadow:0 0 0 0 rgba(125,161,125,0); } }
@keyframes shimmer  { from { background-position:-200% 0; } to { background-position:200% 0; } }
@keyframes spin     { to { transform:rotate(360deg); } }

/* ── Entrance animation utilities ── */
.anim-fade-up  { opacity:0; animation:fadeUp  0.5s ease forwards; }
.anim-fade-in  { opacity:0; animation:fadeIn  0.4s ease forwards; }
.anim-scale-in { opacity:0; animation:scaleIn 0.4s ease forwards; }

/* Stagger items animated by IntersectionObserver */
.stagger-item { opacity:0; transform:translateY(18px); transition:opacity 0.45s ease, transform 0.45s ease; }
.stagger-item.visible { opacity:1; transform:translateY(0); }

/* ── Background orbs ── */
.bg-orb {
    position:absolute; border-radius:50%;
    filter:blur(72px); pointer-events:none;
    animation:floatOrb 9s ease-in-out infinite;
}

/* ── Floating symbol (used in hero) ── */
.float-sym { animation:floatSym 4s ease-in-out infinite; }

/* ── Pulse active badge ── */
.pulse-active { animation:pulseRing 2.2s ease infinite; }

/* ── Skeleton loader ── */
.skeleton {
    background: linear-gradient(90deg, #efe9db 25%, #e4dcc8 50%, #efe9db 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 6px;
}

/* ── Botanical hero (centralised — replaces per-page hero gradients) ── */
.hero-botanical {
    background: linear-gradient(160deg, #ede5d0 0%, #f5f0e8 40%, #f8f4ec 70%, #f0f5ef 100%);
    box-shadow: 0 6px 32px rgba(31,61,43,.08), inset 0 -3px 0 rgba(196,112,63,.22);
    position: relative;
    overflow: hidden;
}
/* Warm radial glow + large faint leaf silhouette */
.hero-botanical::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(ellipse 55% 80% at 96% 10%, rgba(79,125,90,.09) 0, transparent 100%),
        radial-gradient(ellipse 40% 60% at 5% 95%,  rgba(196,112,63,.06) 0, transparent 100%);
}
/* Decorative botanical leaf silhouette top-right */
.hero-botanical::after {
    content:""; position:absolute; top:-30px; right:-50px;
    width:260px; height:260px; pointer-events:none; opacity:.055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 190 C100 190 20 140 20 80 C20 35 56 10 100 10 C144 10 180 35 180 80 C180 140 100 190 100 190Z' fill='%234f7d5a'/%3E%3Cline x1='100' y1='190' x2='100' y2='15' stroke='%231f3d2b' stroke-width='3' stroke-dasharray='6 8'/%3E%3Cpath d='M100 150 C100 150 60 130 45 100' stroke='%231f3d2b' stroke-width='2' fill='none'/%3E%3Cpath d='M100 120 C100 120 140 100 155 70' stroke='%231f3d2b' stroke-width='2' fill='none'/%3E%3Cpath d='M100 90 C100 90 65 75 55 50' stroke='%231f3d2b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(20deg);
}

/* ── Hand-drawn sprig divider ── */
.sprig-divider {
    display:flex; align-items:center; justify-content:center; gap:.75rem;
    color: var(--c-sage); margin: 1.25rem 0;
}
.sprig-divider::before, .sprig-divider::after {
    content:""; height:1px; flex:1; max-width:120px;
    background:linear-gradient(to right, transparent, rgba(125,161,125,.55), transparent);
}

/* ── Nav ── */
.site-nav {
    background: linear-gradient(160deg, #16301f 0%, #1f3d2b 55%, #264d35 100%);
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 2px 24px -4px rgba(10,25,14,.55), 0 1px 0 rgba(255,255,255,.04);
    position: relative;
}

/* Faint vein texture over the nav */
.site-nav::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        radial-gradient(circle at 10% 50%, rgba(255,255,255,.035) 0, transparent 45%),
        radial-gradient(circle at 90% 30%, rgba(125,161,125,.08) 0, transparent 40%);
}

/* Botanical gradient accent line below nav */
.nav-accent-line {
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(125,161,125,.25) 15%,
        rgba(216,166,87,.50) 40%,
        rgba(125,161,125,.35) 65%,
        transparent 100%);
}

/* Logo */
.nav-logo-mark { flex-shrink:0; transition: transform .3s ease; }
.site-nav a:hover .nav-logo-mark { transform: rotate(-5deg) scale(1.05); }

.nav-logo-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.nav-logo-sub {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(125,161,125,.75);
    line-height: 1;
}

/* Nav items */
.nav-item {
    position: relative;
    padding: .45rem .75rem;
    border-radius: 8px;
    font-size: .825rem;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    transition: color .18s, background-color .18s;
    letter-spacing: .01em;
    white-space: nowrap;
}
.nav-item::after {
    content:""; position:absolute; bottom:2px; left:50%; right:50%;
    height:1.5px; border-radius:2px;
    background: var(--c-wheat);
    transition: left .22s ease, right .22s ease;
}
.nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}
.nav-item:hover::after { left:18%; right:18%; }
.nav-item.nav-active {
    color: #fff;
    background: rgba(255,255,255,.12);
}
.nav-item.nav-active::after { left:20%; right:20%; }

/* Search button */
.nav-search-btn {
    display: flex; align-items: center; gap: 5px;
    color: rgba(255,255,255,.45);
    padding: .35rem .65rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    font-size: .75rem; font-weight: 600;
    transition: color .18s, background .18s, border-color .18s;
    cursor: pointer;
}
.nav-search-btn:hover { color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
.nav-search-kbd {
    font-size: .6rem; padding: .1rem .3rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .25rem; color:rgba(255,255,255,.35);
    font-family: inherit; line-height:1.4;
}

/* User button */
.nav-user-btn {
    display: flex; align-items: center; gap: 7px;
    padding: .3rem .5rem .3rem .3rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.8);
    transition: color .18s, background .18s, border-color .18s;
    cursor: pointer;
}
.nav-user-btn:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; }

.nav-avatar {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--c-sage) 0%, var(--c-fern) 100%);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

/* ── User dropdown ── */
.dropdown-menu { display: none; }
.dropdown-menu.open { display: block; }
.dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: .5rem 1rem;
    font-size: .85rem; color: #374151;
    transition: background .15s;
}
.dropdown-item:hover { background: #efe9db; }
.dropdown-item-danger { color: #dc2626; }
.dropdown-item-danger:hover { background: #fef2f2; }

/* ── Cards ── */
.card {
    background:#fff; border-radius:16px;
    border:1px solid rgba(31,61,43,.06);
    box-shadow:var(--shadow-soft);
    transition:transform 0.22s ease, box-shadow 0.22s ease, border-color .22s ease;
}
.card:hover {
    transform:translateY(-3px);
    box-shadow:var(--shadow-lift);
    border-color:rgba(125,161,125,.4);
}
/* card-hover: subtle lift for clickable cards (less aggressive than .card) */
.card-hover {
    transition:border-color .18s, box-shadow .18s, background-color .15s, transform .18s;
}
.card-hover:hover {
    border-color:#9bb89a !important;
    box-shadow:0 6px 18px -10px rgba(31,61,43,.25);
    transform:translateY(-2px);
}
/* hover utilities not generated by compiled Tailwind */
.hover\:bg-mist:hover      { background-color:#efe9db; }
.hover\:bg-mist\/50:hover  { background-color:rgba(239,233,219,.5); }
.hover\:bg-grove:hover     { background-color:#356145; }
.hover\:text-grove:hover   { color:#356145; }
.hover\:text-forest:hover  { color:#1f3d2b; }
.hover\:text-fern:hover    { color:#4f7d5a; }
.hover\:text-clay:hover    { color:#c4703f; }

/* ── Buttons ── */
.btn-primary {
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--c-grove); color:#fff;
    border-radius:11px; font-weight:700; font-size:.875rem;
    padding:.625rem 1.25rem; transition:background-color .2s, transform .15s, box-shadow .2s;
    border:none; cursor:pointer;
}
.btn-primary:hover { background:var(--c-forest); transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(31,61,43,.5); }
.btn-primary:active { transform:translateY(0); }

/* Terracotta call-to-action */
.btn-cta {
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--c-clay); color:#fff;
    border-radius:11px; font-weight:700; font-size:.9rem;
    padding:.7rem 1.4rem; transition:background-color .2s, transform .15s, box-shadow .2s;
    border:none; cursor:pointer;
}
.btn-cta:hover { background:var(--c-claydark); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(196,112,63,.55); }

.btn-ghost {
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; color:var(--c-grove);
    border:1.5px solid var(--c-sage); border-radius:11px;
    font-weight:700; font-size:.875rem; padding:.625rem 1.25rem;
    transition:background-color .2s, transform .15s, border-color .2s; cursor:pointer;
}
.btn-ghost:hover { background:var(--c-mist); border-color:var(--c-fern); transform:translateY(-1px); }

/* ── Form inputs ── */
.input-field {
    display:block; width:100%;
    border:1.5px solid #e4dcc8; border-radius:11px;
    padding:.65rem .9rem; font-size:.9rem;
    background:#fff; color:#1f3d2b; font-family:var(--font-sans);
    transition:border-color .2s, box-shadow .2s;
}
.input-field:focus { outline:none; border-color:var(--c-sage); box-shadow:0 0 0 3px rgba(125,161,125,.18); }

/* ── Plant symbol tiles (used in designer + plant cards) ── */
.symbol-tile {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; border-radius:11px; padding:8px 4px; cursor:pointer;
    border:2px solid transparent;
    transition:background-color .18s, border-color .18s, transform .18s;
    user-select:none;
}
.symbol-tile:hover { background:var(--c-mist); border-color:var(--c-sage); transform:scale(1.04); }
.symbol-tile.active { background:rgba(125,161,125,.18); border-color:var(--c-grove); }

/* ── Plant card image area ── */
.plant-img-area {
    width:100%; height:160px; border-radius:14px 14px 0 0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg, #eef3ea 0%, #dde9d8 100%);
    overflow:hidden; position:relative;
}
.plant-img-area img { width:100%; height:100%; object-fit:cover; }
.plant-img-area .plant-symbol { width:80px; height:80px; opacity:.85; }

/* ── Month calendar cells ── */
.cal-sow     { background:rgba(125,161,125,.30); }
.cal-harvest { background:rgba(216,166,87,.30); }
.cal-both    { background:linear-gradient(135deg,rgba(125,161,125,.30) 50%,rgba(216,166,87,.30) 50%); }
.cal-now     { ring:2px solid var(--c-grove); font-weight:700; }

/* ── Stat counter card ── */
.stat-card {
    background:#fff; border-radius:16px; padding:1.25rem 1.5rem;
    display:flex; flex-direction:column; gap:.25rem;
    border:1px solid rgba(31,61,43,.06);
    box-shadow:var(--shadow-soft);
}
.stat-card .stat-num {
    font-family:var(--font-display);
    font-size:2.1rem; font-weight:700; line-height:1;
    color:var(--c-grove);
}
.stat-card .stat-label { font-size:.78rem; color:#7a8a7e; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

/* ── Footer: hidden on mobile, bottom nav provides mobile navigation ── */
@media (max-width:767px) {
    .site-footer { display:none; }
}

/* ── Mobile bottom nav (max-width:767px only — scoped so desktop cascade can't override) ── */
@media (max-width:767px) {
    .bottom-nav {
        position:fixed; bottom:0; left:0; right:0; z-index:40;
        background:linear-gradient(180deg,var(--c-forest) 0%, #16301f 100%);
        border-top:1px solid rgba(255,255,255,.06);
        box-shadow:0 -4px 24px rgba(10,25,14,.45);
        display:flex; justify-content:space-around; align-items:center;
        height:60px; padding:0 4px; padding-bottom:env(safe-area-inset-bottom, 0);
    }
    .bottom-nav a {
        display:flex; flex-direction:column; align-items:center; gap:3px;
        color:rgba(255,255,255,.42); font-size:9.5px; font-weight:600;
        padding:6px 8px; border-radius:12px; flex:1; text-align:center;
        transition:color .2s, background .2s;
        position:relative;
    }
    .bottom-nav a:hover { color:rgba(255,255,255,.75); background:rgba(255,255,255,.05); }
    .bottom-nav a.active {
        color:#fff;
        background:rgba(255,255,255,.11);
    }
    .bottom-nav a.active::before {
        content:"";
        position:absolute; top:0; left:50%; transform:translateX(-50%);
        width:20px; height:2px; border-radius:0 0 3px 3px;
        background:var(--c-wheat);
    }
    .bottom-nav a svg { display:block; margin:0 auto; }
    .bottom-nav-badge {
        position:absolute; top:4px; right:calc(50% - 18px);
        min-width:14px; height:14px; border-radius:999px;
        background:#ef4444; color:#fff; font-size:8px; font-weight:800;
        display:flex; align-items:center; justify-content:center;
        padding:0 3px; border:1.5px solid #16301f;
    }
    body { padding-bottom:calc(60px + env(safe-area-inset-bottom, 0)); }
}

/* ── Tag chips ── */
.tag-chip {
    display:inline-flex; align-items:center;
    background:rgba(125,161,125,.15); color:var(--c-grove);
    border-radius:99px; padding:2px 10px; font-size:.75rem; font-weight:600;
    border:1px solid rgba(125,161,125,.28); transition:background .15s;
}
.tag-chip:hover { background:rgba(125,161,125,.28); }

/* ── Difficulty dots ── */
.diff-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.diff-easy   .diff-dot { background:var(--c-sage); }
.diff-medium .diff-dot { background:var(--c-wheat); }
.diff-hard   .diff-dot { background:#c4703f; }

/* ── Sow/Harvest month bar ── */
.month-bar { display:flex; gap:1px; height:6px; border-radius:3px; overflow:hidden; }
.month-bar .mb { flex:1; background:#e4dcc8; }
.month-bar .mb.sow { background:var(--c-sage); }
.month-bar .mb.harvest { background:var(--c-wheat); }
.month-bar .mb.both { background:linear-gradient(to right, var(--c-sage) 50%, var(--c-wheat) 50%); }

/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(125,161,125,.45); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(125,161,125,.7); }

/* ── Footer ── */
.site-footer {
    background: linear-gradient(160deg, #16301f 0%, #1f3d2b 55%, #264d35 100%);
    position: relative; overflow: hidden;
}
.site-footer::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        radial-gradient(circle at 5% 80%, rgba(125,161,125,.07) 0, transparent 45%),
        radial-gradient(circle at 95% 20%, rgba(216,166,87,.05) 0, transparent 40%);
}
.footer-top-accent {
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, rgba(125,161,125,.2) 15%,
        rgba(216,166,87,.45) 40%, rgba(125,161,125,.3) 65%, transparent 100%);
}
.footer-leaf-mark { flex-shrink:0; }
.footer-brand-name {
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 600;
    color: #fff; letter-spacing: -0.01em;
}
.footer-tagline { font-size:.85rem; color:rgba(255,255,255,.5); line-height:1.7; max-width:22rem; }
.footer-copy    { font-size:.75rem; color:rgba(255,255,255,.28); margin-top:.25rem; }
.footer-heading {
    font-size: .65rem; font-weight: 700;
    letter-spacing: .12em; text-transform:uppercase;
    color: rgba(125,161,125,.75);
}
.footer-link {
    font-size: .8rem; color: rgba(255,255,255,.5);
    padding: .25rem 0; display:block;
    transition: color .15s;
}
.footer-link:hover { color: #fff; }

/* ── Quick search overlay ── */
.qs-overlay {
    display:none; position:fixed; inset:0; z-index:9500;
    background:rgba(10,20,15,.65); backdrop-filter:blur(5px);
    align-items:flex-start; justify-content:center; padding-top:10vh;
}
.qs-overlay.open { display:flex; }
.qs-panel {
    width:100%; max-width:560px; margin:0 1rem;
    background:#fff; border-radius:1.25rem;
    box-shadow:0 24px 72px rgba(0,0,0,.3); overflow:hidden;
}
.qs-header {
    display:flex; align-items:center; gap:.75rem;
    padding:.875rem 1.125rem; border-bottom:1px solid #f0ebe0;
}
.qs-icon { flex-shrink:0; color:#9ca3af; }
.qs-input {
    flex:1; border:none; outline:none;
    font-size:.95rem; color:#1f3d2b;
    background:transparent; font-family:var(--font-sans);
}
.qs-esc {
    flex-shrink:0; font-size:.65rem; padding:.15rem .4rem;
    border:1px solid #e5e7eb; border-radius:.35rem;
    color:#9ca3af; font-family:inherit;
}
.qs-results { max-height:400px; overflow-y:auto; padding:.5rem 0; }
.qs-empty   { text-align:center; padding:2rem 1rem; color:#9ca3af; font-size:.85rem; }
.qs-footer  {
    display:flex; align-items:center; justify-content:space-between;
    padding:.5rem 1.125rem; border-top:1px solid #f3f4f6; background:#faf7f0;
}
.qs-hint    { font-size:.7rem; color:#9ca3af; }
.qs-kbd     { font-size:.65rem; padding:.1rem .35rem; border:1px solid #e5e7eb; border-radius:.3rem; font-family:inherit; }
.qs-all-link { font-size:.75rem; color:var(--c-grove); font-weight:600; text-decoration:none; }
.qs-all-link:hover { color:var(--c-forest); }
.qs-result  {
    display:flex; align-items:center; gap:.75rem;
    padding:.6rem 1.125rem; text-decoration:none;
    transition:background .1s;
}
.qs-result:hover      { background:#f3f4f6; }
.qs-result-first      { background:#faf7f0; }
.qs-result-first:hover { background:#f3f4f6; }
.qs-thumb   { width:36px; height:36px; object-fit:cover; border-radius:.5rem; flex-shrink:0; }
.qs-thumb-placeholder {
    width:36px; height:36px; border-radius:.5rem;
    background:#f0faf4; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.qs-result-text { flex:1; min-width:0; }
.qs-result-name  { font-size:.875rem; font-weight:600; color:#1f3d2b; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qs-result-latin { font-size:.75rem; color:#9ca3af; margin:0; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qs-result-type  { font-size:.7rem; padding:.2rem .55rem; border-radius:999px; background:#f0faf4; color:var(--c-grove); font-weight:500; flex-shrink:0; text-transform:capitalize; }

/* ── Cookie banner ── */
.cookie-banner {
    position:fixed; bottom:0; left:0; right:0; z-index:9000;
    padding:12px 16px;
    background:rgba(22,48,31,.97); backdrop-filter:blur(8px);
    border-top:1px solid rgba(125,161,125,.18);
}
.cookie-text { color:rgba(255,255,255,.65); font-size:.8rem; margin:0; }
.cookie-link { color:var(--c-sage); text-decoration:underline; }
.cookie-btn  {
    background:var(--c-sage); color:#1f3d2b;
    font-size:.75rem; font-weight:700;
    padding:.375rem 1rem; border-radius:8px; border:none; cursor:pointer;
    transition:background .15s; flex-shrink:0;
}
.cookie-btn:hover { background:var(--c-moss); }