:root {
    --green-dark: #1F4D36;
    --green: #5F8D4E;
    --green-soft: #A8C686;
    --cream: #F6F1E7;
    --beige: #D9C7A3;
    --yellow: #F4B942;
    --chocolate: #8B5E3C;
    --lavender: #8E7BBE;
    --white: #FFFFFF;
    --ink: #2f241b;
    --shadow: 0 22px 60px rgba(31, 77, 54, .14);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: 'Montserrat', Arial, sans-serif;
    background:
        radial-gradient(circle at 12% 8%, rgba(168, 198, 134, .32), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(244, 185, 66, .20), transparent 25%),
        linear-gradient(180deg, #fffaf0 0%, var(--cream) 48%, #efe4cb 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background-image:
        linear-gradient(rgba(31, 77, 54, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 77, 54, .06) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, #000, transparent 82%);
}

.tour-page {
    position: relative;
    min-height: 100vh;
    padding: 28px 18px 46px;
}

.tour-shell {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
}

.test-mode-banner {
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid rgba(244, 185, 66, .55);
    border-radius: 8px;
    background: rgba(244, 185, 66, .18);
    color: var(--chocolate);
    font-weight: 700;
    line-height: 1.4;
}

.test-mode-banner i {
    color: var(--green-dark);
}

@media (max-width: 640px) {
    .tour-page {
        padding: 16px 12px 32px;
    }
}