@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
    --bg-cream: #FAF6F0;
    --forest: #1E3A2F;
    --terracotta: #D96B43;
    --sage: #E8F0EB;
    --border-warm: #E2D9C5;
}

/* 锁定垂直滚动条槽位，彻底消除切换Tab时的8px闪动 */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-cream);
    color: var(--forest);
    background-image: radial-gradient(#E5DEC9 0.85px, transparent 0.85px);
    background-size: 18px 18px;
    -webkit-tap-highlight-color: transparent;
}

main > section {
    animation: tabFade 0.16s ease-out;
}

@keyframes tabFade {
    from { opacity: 0.94; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

.serif-title { font-family: 'Noto Serif SC', Georgia, serif; }
.mono-font { font-family: 'Space Mono', monospace; }

.bistro-card {
    background: #FFFFFF;
    border: 1.5px solid var(--border-warm);
    box-shadow: 0 5px 0px #E2D9C5;
}

.bistro-btn {
    border: 1.5px solid var(--forest);
    box-shadow: 0 3px 0px var(--forest);
    transition: all 0.12s ease;
}

.bistro-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0px var(--forest);
}

.menu-border {
    border: 2px double var(--forest);
    outline: 1px solid var(--forest);
    outline-offset: -6px;
}

/* CSS Grid 自适应层叠毛玻璃付费锁 */
.paywall-stack {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 1.5px solid var(--border-warm);
}

.paywall-stack > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.locked-layer {
    filter: blur(7px);
    -webkit-filter: blur(7px);
    opacity: 0.4;
    pointer-events: none !important;
    user-select: none !important;
    padding: 1rem;
}

/* 美式超市热敏小票卡片 */
.receipt-paper {
    background: #FFFDF9;
    position: relative;
    box-shadow: 0 16px 36px rgba(0,0,0,0.35);
    border-left: 1px dashed #D6CFC2;
    border-right: 1px dashed #D6CFC2;
}

.nav-active {
    background-color: var(--forest);
    color: #FAF6F0;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    50% { transform: scale(1.35); opacity: 1; }
}
.breathe-circle { animation: breathe 8s infinite ease-in-out; }

@keyframes floatCoin {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-24px); opacity: 0; }
}
.coin-pop { animation: floatCoin 0.8s ease-out forwards; }