:root {
    /* Base Surface Colors */
    --surface: #fcf9f8;
    --surface-dim: #dcd9d9;
    --surface-bright: #fcf9f8;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f6f3f2;
    --surface-container: #f0eded;
    --surface-container-high: #eae7e7;
    --surface-container-highest: #e5e2e1;
    
    /* Text Colors */
    --on-surface: #1c1b1b;
    --on-surface-variant: #514532;
    --inverse-surface: #313030;
    --inverse-on-surface: #f3f0ef;
    
    /* Brand Colors */
    --primary: #FFB800; /* Kölsch Gold */
    --on-primary: #1B0F0F; /* Deep Roast text on primary */
    --primary-container: #ffdea8;
    --on-primary-container: #5e4200;
    
    --secondary: #F5F5F0; /* Bone */
    --on-secondary: #1B0F0F;
    
    --tertiary: #1B0F0F; /* Deep Roast */
    --on-tertiary: #ffffff;
    
    --error: #ba1a1a;
    --on-error: #ffffff;

    /* Elevation Shadows */
    --shadow-soft: 0 20px 40px -10px rgba(27, 15, 15, 0.08);
    --shadow-deep: 0 30px 60px -15px rgba(27, 15, 15, 0.12);
    
    /* Shapes */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--surface);
    color: var(--on-surface);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    /* Soft ambient background element for glass to blur */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 184, 0, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(255, 184, 0, 0.05) 0%, transparent 40%);
    background-attachment: fixed;
}

#app {
    width: 100%;
    max-width: 480px; /* Mobile focused */
    min-height: 100vh;
    position: relative;
    padding: 24px 16px 100px 16px; /* Room for bottom nav */
}

/* Typography */
h1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    color: var(--tertiary);
}

h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: var(--on-surface);
}

p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
    color: var(--on-surface-variant);
}

/* --- Components --- */

/* Base Glass Utility */
/* Paper, not glass. See the note above .card below. */
.glass-panel {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 16px;
    border: 1px solid rgba(120, 100, 64, 0.20);
    box-shadow: 0 2px 6px rgba(60, 44, 20, 0.07);
}

/* Cards.
   These were the glass mockup: translucent white over a 20px backdrop blur.
   The Deckel design system is a physical thing instead, paper with a warm
   hairline, so the class carries that now. Padding stays close to the old value
   so the twenty screens that use it do not reflow. */
.card {
    padding: 20px;
    margin-bottom: 16px;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 16px;
    border: 1px solid rgba(120, 100, 64, 0.20);
    box-shadow: 0 2px 6px rgba(60, 44, 20, 0.07);
    position: relative;
    overflow: hidden;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    width: 100%;
    gap: 8px;
    letter-spacing: 0.01em;
}

.btn-primary {
    /* Liquid Gloss Finish */
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%),
                linear-gradient(180deg, var(--primary) 0%, #cc9300 100%);
    color: var(--on-primary);
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 184, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: var(--tertiary);
    box-shadow: 0 2px 8px rgba(27, 15, 15, 0.05);
}

/* Inputs */
.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--on-surface-variant);
}

input, select, textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(27, 15, 15, 0.1);
    background-color: var(--secondary); /* Recessed Bone */
    color: var(--on-surface);
    font-family: inherit;
    font-size: 16px;
    outline: none;
    transition: all 0.2s;
    box-shadow: inset 0 2px 4px rgba(27, 15, 15, 0.02);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    background-color: var(--surface-container-lowest);
    box-shadow: inset 0 0 0 1px var(--primary);
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 448px;
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    z-index: 1000;
    /* Glass Effect */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--radius-xl);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--shadow-deep);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--on-surface-variant);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    width: 60px;
    height: 100%;
    transition: color 0.2s;
    cursor: pointer;
}

.nav-item i {
    margin-bottom: 4px;
}

.nav-item.active {
    color: var(--primary);
}

/* Central FAB */
.nav-fab {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, #FFC733 0%, var(--primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-primary);
    transform: translateY(-20px);
    box-shadow: 0 12px 24px rgba(255, 184, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4);
    border: 4px solid var(--surface-container-lowest);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-fab:hover {
    transform: translateY(-24px) scale(1.05);
}

/* Polaroids.
   One frame for every screen that shows a photo of a beer: white stock, equal
   margins on three sides, and a wide lip at the bottom where the writing goes.
   No rotation here on purpose: how far an object is tilted depends on where it
   was put down, so each use site sets that. */
.polaroid {
    background: #ffffff;
    padding: 12px 12px 8px;
    border-radius: 3px;
    box-shadow: 0 10px 22px rgba(60, 44, 20, .16), 0 2px 4px rgba(60, 44, 20, .10);
    transition: transform .3s;
}

.polaroid-img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background-color: #EFE9DB;
    border-radius: 0;
}

/* The lip. Caption first, then the stamp line. */
.polaroid-lip {
    min-height: 52px;
    padding: 9px 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
}

/* The challenge, if there was one: smaller than the caption, because it is a
   note about the beer rather than the thing somebody wanted to say. */
.polaroid-quest {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #C8102E;
    line-height: 1.35;
}

.polaroid-stamp {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9A8F7C;
}

.polaroid-caption {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.3;
    color: #2E2317;
}

/* Modals & Loaders */
#loader {
    position: fixed;
    inset: 0;
    background: rgba(252, 249, 248, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--primary-container);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.hidden {
    display: none !important;
}

/* Utilities */
.text-center { text-align: center; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mt-4 { margin-top: 16px; }
.flex { display: flex; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
    width: 90%;
    max-width: 400px;
}

.toast {
    background: var(--surface-container-highest);
    color: var(--on-surface);
    padding: 12px 24px;
    border-radius: 9999px;
    box-shadow: var(--shadow-deep);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    pointer-events: auto;
    animation: toastSlideDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    border: 1px solid rgba(0,0,0,0.1);
}

.toast.success { background: var(--success, #10b981); color: white; border-color: rgba(255,255,255,0.2); }
.toast.error { background: var(--error); color: white; border-color: rgba(255,255,255,0.2); }
.toast.info { border-left: 4px solid var(--primary); }

.toast.hide {
    animation: toastFadeOut 0.3s forwards;
}

@keyframes toastSlideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeOut {
    to { opacity: 0; transform: translateY(-10px); }
}

/* Popups */
.popup-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.popup-box {
    max-width: 90%;
    width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    margin: auto;
}

/* =======================================================================
   Cologne edition, activated by data-city="koeln" on <html>.

   This used to hang off the language, so the app was amber in German and red
   only in Kölsch, while the Deckel design system is red everywhere. The colour
   belongs to the city, not the dialect. Köln is the only city for now, so the
   attribute is always set; a second city changes the value, not the language.

   Cologne's colours are red and white, so the whole UI chrome goes red:
   accents, glows, ambient background, headings, icon tints. The only
   things deliberately left gold are the beer liquid and foam — a Kölsch
   really is pale gold, and a red beer would read as Altbier, which is
   the Düsseldorf rival nobody in Cologne wants on their screen.

   Tailwind ships from the CDN, so the palette is overridden per utility
   class rather than through the config.
   ===================================================================== */
html[data-city="koeln"] {
    --koelsch-red: #C8102E;
    --koelsch-red-dark: #96091f;
    --koelsch-ink: #4a0d16;
    --koelsch-ink-soft: #7a2431;
}

/* --- accents ---------------------------------------------------------- */
html[data-city="koeln"] .bg-primary,
html[data-city="koeln"] .bg-primary-container,
html[data-city="koeln"] .btn-primary { background-color: #C8102E !important; }
html[data-city="koeln"] .bg-primary\/90 { background-color: rgba(200,16,46,0.90) !important; }
html[data-city="koeln"] .bg-primary\/30 { background-color: rgba(200,16,46,0.30) !important; }
html[data-city="koeln"] .bg-primary\/20 { background-color: rgba(200,16,46,0.20) !important; }
html[data-city="koeln"] .bg-primary\/15 { background-color: rgba(200,16,46,0.15) !important; }
html[data-city="koeln"] .bg-primary\/10 { background-color: rgba(200,16,46,0.10) !important; }
html[data-city="koeln"] .bg-primary\/5  { background-color: rgba(200,16,46,0.05) !important; }
html[data-city="koeln"] .bg-primary-container\/20 { background-color: rgba(200,16,46,0.20) !important; }

html[data-city="koeln"] .text-primary,
html[data-city="koeln"] .text-primary-container,
html[data-city="koeln"] .text-gold { color: #C8102E !important; }
html[data-city="koeln"] .text-on-primary,
html[data-city="koeln"] .btn-primary { color: #ffffff !important; }

html[data-city="koeln"] .border-primary { border-color: #C8102E !important; }
html[data-city="koeln"] .border-primary\/50 { border-color: rgba(200,16,46,0.50) !important; }
html[data-city="koeln"] .border-primary\/40 { border-color: rgba(200,16,46,0.40) !important; }
html[data-city="koeln"] .border-primary\/30 { border-color: rgba(200,16,46,0.30) !important; }
html[data-city="koeln"] .border-primary\/20 { border-color: rgba(200,16,46,0.20) !important; }
html[data-city="koeln"] .border-primary\/10 { border-color: rgba(200,16,46,0.10) !important; }
html[data-city="koeln"] .border-on-primary { border-color: #ffffff !important; }

/* --- the amber hexes hardcoded in app.js templates -------------------- */
html[data-city="koeln"] .text-\[\#f9bd22\] { color: #C8102E !important; }
html[data-city="koeln"] .text-\[\#653e00\] { color: #4a0d16 !important; }
html[data-city="koeln"] .border-\[\#653e00\] { border-color: rgba(200,16,46,0.35) !important; }

/* --- glows and decorative amber from index.html ----------------------- */
html[data-city="koeln"] .amber-glow { box-shadow: 0 0 20px rgba(200,16,46,0.28) !important; }
html[data-city="koeln"] .active-nav-glow { box-shadow: 0 -4px 20px rgba(200,16,46,0.20) !important; }
html[data-city="koeln"] .neon-glow { box-shadow: 0 0 15px rgba(200,16,46,0.35) !important; }
html[data-city="koeln"] .neon-glow-active { box-shadow: 0 0 20px rgba(200,16,46,0.55) !important; }
html[data-city="koeln"] header { box-shadow: 0 0 15px rgba(200,16,46,0.12) !important; }

/* Ambient page wash: amber corners become Cologne red */
html[data-city="koeln"] .ambient-bg {
    background-color: #fdf8f8 !important;
    background-image:
        radial-gradient(circle at top left, rgba(200,16,46,0.10) 0%, transparent 52%),
        radial-gradient(circle at bottom right, rgba(200,16,46,0.07) 0%, transparent 52%) !important;
}
html[data-city="koeln"] .glass-card,
html[data-city="koeln"] .glass-panel { border-color: rgba(200,16,46,0.18) !important; }
html[data-city="koeln"] .tube-liquid-fill {
    background: linear-gradient(90deg, #C8102E, #e8637a) !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.5), 0 0 15px rgba(200,16,46,0.35) !important;
}

/* --- headings and body ink ------------------------------------------- */
html[data-city="koeln"] h1, html[data-city="koeln"] h2 { color: #4a0d16; }
html[data-city="koeln"] .story-badge { background: #C8102E !important; }

/* CSS custom properties used by the notification dropdown and legacy widgets */
html[data-city="koeln"] {
    --primary: #C8102E;
    --primary-container: #f3c3cb;
    --text-gold: #C8102E;
}