/* ═══════════════════════════════════════════════════════
   YOWE — site.css
   Night Market design system
   Brand: Rich Black · Primary Blue · Accent Gold
═══════════════════════════════════════════════════════ */
/* ── Self-hosted Poppins ─────────────────────────────
   Previously loaded from Google's CDN via @import. That depends on
   reaching fonts.googleapis.com/fonts.gstatic.com on every single page
   load — on a flaky mobile connection, that request can fail or time out,
   and font-display:swap then leaves the fallback system font in place
   permanently for that page view. The real problem that causes: most
   fallback sans-serif fonts don't actually HAVE 5 distinct weights, so
   every declared weight from 400 through 800 collapses onto whichever one
   or two weights the fallback font actually ships — the whole page reads
   as uniformly heavy instead of the intended mix of regular body text and
   bold headings. Self-hosting removes the external dependency entirely. */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
/* ── Self-hosted Fraunces ─────────────────────────────
   Used specifically for warm, celebratory moments (the welcome-back
   toast, and eventually the auth pages) — a deliberately different,
   more characterful serif than Poppins carries everywhere else, self-
   hosted for the exact same reliability reasons as Poppins above. */
@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

:root {
    --bg: #0D1B2A;
    --bg-elev: #16283C;
    --bg-input: #1F3247;
    --accent-2: #2563EB;
    --accent-hover: #3B82F6;
    --accent-soft: rgba(37,99,235,.14);
    --accent-gold: #FFC107;
    --accent-gold-s: rgba(255,193,7,.15);
    --text: #FFFFFF;
    --text-dim: #98A2B3;
    --text-faint: #4B5563;
    --border: rgba(152,162,179,.15);
    --border-s: rgba(152,162,179,.08);
    --orange: #FFC107;
    --orange-s: rgba(255,193,7,.15);
    --green: #22C55E;
    --green-s: rgba(34,197,94,.14);
    --red: #EF4444;
    --red-s: rgba(239,68,68,.14);
    --amber: #FBBF24;
    --amber-s: rgba(251,191,36,.14);
    --heart: #EF4444;
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --card-shadow: 0 4px 24px rgba(0,0,0,.4);
}

[data-theme="dark"] {
    --bg: #0D1B2A;
    --bg-elev: #16283C;
    --bg-input: #1F3247;
    --text: #FFFFFF;
    --text-dim: #98A2B3;
    --text-faint: #4B5563;
    --border: rgba(152,162,179,.15);
    --border-s: rgba(152,162,179,.08);
    --card-shadow: 0 4px 24px rgba(0,0,0,.4);
    /* Gold reads fine as text directly on dark surfaces — no contrast
       problem here, so this just points back at the existing accent. */
    --gold-ink: var(--accent-gold);
}

[data-theme="light"] {
    --bg: #F7F8FA;
    --bg-elev: #FFFFFF;
    --bg-input: #F0F2F5;
    --text: #101828;
    --text-dim: #4B5563;
    --text-faint: #98A2B3;
    --border: rgba(16,24,40,.10);
    --border-s: rgba(16,24,40,.05);
    --card-shadow: 0 4px 24px rgba(16,24,40,.08);
    /* Raw gold (#FFC107 / #14B8A6 depending on accent) fails contrast as
       small text on a white/near-white card — this is the fix Claude
       Design's light-theme review actually caught. Darker, still
       clearly "gold-family" so it doesn't read as an unrelated color. */
    --gold-ink: #92400E;
}
/* ── Accent color presets ─────────────────────────────
   Same mechanism as the light/dark toggle above — a data-attribute on
   <html>, persisted in localStorage, overriding a small set of CSS
   variables. Independent of light/dark mode, so any accent works with
   either theme. Hand-picked, curated pairs rather than fully open color
   choice — keeps Yowe's brand identity consistent across everyone's
   own personal preference, and avoids the real accessibility risk of
   letting someone pick illegible color combinations. */
[data-accent="orange"] {
    --accent-2: #F97316;
    --accent-hover: #FB923C;
    --accent-soft: rgba(249,115,22,.14);
    --accent-gold: #14B8A6;
    --accent-gold-s: rgba(20,184,166,.15);
}

[data-accent="purple"] {
    --accent-2: #7C3AED;
    --accent-hover: #9165F0;
    --accent-soft: rgba(124,58,237,.14);
    --accent-gold: #FFC107;
    --accent-gold-s: rgba(247,181,0,.15);
}

[data-accent="green"] {
    --accent-2: #16A34A;
    --accent-hover: #22C55E;
    --accent-soft: rgba(22,163,74,.14);
    --accent-gold: #FFC107;
    --accent-gold-s: rgba(247,181,0,.15);
}

[data-accent="crimson"] {
    --accent-2: #DC2626;
    --accent-hover: #EF4444;
    --accent-soft: rgba(220,38,38,.14);
    --accent-gold: #FFC107;
    --accent-gold-s: rgba(247,181,0,.15);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: var(--font-body);
}

.app {
    min-height: 100vh;
    overflow-x: hidden;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    background: var(--bg);
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: none;
    z-index: 100;
}

    .sidebar::-webkit-scrollbar {
        display: none;
    }

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: 260px;
    overflow: hidden;
}

.content {
    flex: 1;
    padding: 24px;
    max-width: 100%;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    text-decoration: none;
    justify-content: flex-start;
}

    .brand img {
        height: 34px !important;
        max-height: 34px !important;
        width: auto !important;
        object-fit: contain;
        flex-shrink: 0;
    }

.logo-light {
    display: none;
}

.logo-dark {
    display: block;
}

[data-theme="light"] .logo-dark {
    display: none;
}

[data-theme="light"] .logo-light {
    display: block;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

.brand-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text);
}

.nav-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    transition: background .15s, color .15s;
    text-decoration: none;
    cursor: pointer;
}

    .nav-item:hover {
        background: var(--bg-input);
        color: var(--text);
    }

    .nav-item.active {
        background: var(--accent-soft);
        color: var(--accent-2);
    }

.nav-icon {
    width: 20px;
    text-align: center;
    font-size: 15px;
    flex-shrink: 0;
}

.sidebar-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    padding: 4px 12px;
    margin-top: 8px;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 99;
}

.search-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 8px 16px;
    transition: border-color .2s;
}

    .search-wrap:focus-within {
        border-color: var(--accent-2);
    }

    .search-wrap input {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        font-size: 14px;
        color: var(--text);
        outline: none;
        font-family: var(--font-body);
    }

        .search-wrap input::placeholder {
            color: var(--text-faint);
        }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 15px;
    transition: background .15s;
    flex-shrink: 0;
}

    .icon-btn:hover {
        background: var(--accent-soft);
        color: var(--accent-2);
    }

.badge-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    color: #FFC107;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

    .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 6px 0;
}

.tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-faint);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color .15s;
    min-width: 48px;
    text-align: center;
    /* Safe on the existing <a> tab-btn items too — anchors have none of
       these by default anyway. Added so a <button>-based tab-btn (the
       Me tab, which now opens the account drawer instead of navigating)
       doesn't pick up the browser's default button chrome. */
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
}

    .tab-btn.active {
        color: var(--accent-2);
    }

    .tab-btn:hover {
        color: var(--text-dim);
    }

.tab-icon {
    font-size: 20px;
    line-height: 1;
}

.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--accent-2);
    color: #fff;
    border: none;
    padding: 13px 20px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background .15s, transform .1s;
    text-decoration: none;
}

    .btn-primary:hover {
        background: var(--accent-hover);
    }

    .btn-primary:active {
        transform: scale(.98);
    }

    .btn-primary:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-gold);
    color: #101828;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-body);
    transition: opacity .15s;
    text-decoration: none;
}

    .btn-accent:hover {
        opacity: .9;
    }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

    .form-group label {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-dim);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 10px 14px;
        font-size: 14px;
        color: var(--text);
        font-family: var(--font-body);
        outline: none;
        width: 100%;
        transition: border-color .2s;
    }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--accent-2);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--text-faint);
        }

        .form-group select option {
            background: var(--bg-elev);
        }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.field-error {
    font-size: 12px;
    color: #FCA5A5;
}

.validation-summary-errors {
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.3);
    color: #FCA5A5;
    padding: .875rem 1.25rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    font-size: 13px;
}

.rest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* ── RESTORED from the session transcript, not reconstructed from
   memory — these were ALSO accidentally swept up in the same earlier
   cleanup mistake as the three Claude Design components below, but I
   missed them entirely in my first restoration pass because I only
   checked for card-restaurant/card-dish/shop-header specifically. This
   is very likely the actual cause of the reported bugs: every <img>
   inside .rest-img uses position:absolute, which requires .rest-img
   itself to provide position:relative as the containing block — without
   it, those images lose their proper anchor and can end up positioned
   relative to a much larger ancestor instead, which is exactly the kind
   of thing that would make an image appear to overlap content far above
   it, like a post header's shop link. */
.rest-img {
    height: 180px;
    background: var(--bg-input);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
/* ── Multi-image post grid ─────────────────────────────────
   Same trick every major feed app uses: the image COUNT decides the
   layout, not each photo's actual shape — every cell crops to fill via
   object-fit:cover. This keeps post height predictable as you scroll,
   at the cost of sometimes cropping a photo's edges, which is the
   deliberate, accepted trade every one of these apps makes. */
.post-media-grid {
    display: grid;
    gap: 2px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 320px;
    max-height: 560px;
}
.post-media-grid.grid-2 {
    grid-template-columns: 1fr 1fr;
}
.post-media-grid.grid-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
/* First cell spans both rows on the left — the "1 big + 2 stacked" layout */
.post-media-grid.grid-3 .media-cell:first-child {
    grid-row: 1 / 3;
}
.post-media-grid.grid-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.post-media-grid .media-cell {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.post-media-grid .media-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ── Image skeleton shimmer ─────────────────────────────────
   Standalone class — works on ANY card container (.rest-img, .card-dish,
   or otherwise), not just one specific one. An earlier version of this
   rule was written as ".rest-img.skeleton-loading", requiring BOTH
   classes on the same element — which silently never matched cards that
   didn't have .rest-img at all. Keeping it standalone this time,
   deliberately, so that same bug can't quietly come back. */
.skeleton-loading {
    background: linear-gradient( 90deg, var(--bg-input) 25%, var(--border) 50%, var(--bg-input) 75% ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-img {
    opacity: 0;
    transition: opacity .3s ease;
}

/* This specific rule doesn't appear anywhere in the original transcript
   history either — without it, an image starts at opacity:0 and nothing
   ever sets it back to 1, so it would stay invisible forever once
   "loaded". Adding it now since it's necessary for the system to
   actually work, not just restoring what existed before. */
.skeleton-img.loaded {
    opacity: 1;
}

/* ── Component classes from the Claude Design redesign ────
   RESTORED — these were accidentally deleted in an earlier cleanup pass
   that removed the old .rest-card/.d-card classes and swept up this
   entire block along with them, since both were sitting in the same
   region of the file. Every card on every page was rendering completely
   unstyled from that point until this fix. */
.card-restaurant { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.card-restaurant:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }
.card-restaurant__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-input); }
.card-restaurant__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.card-restaurant__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 32%, transparent 60%, rgba(0,0,0,.55) 100%); }
.card-restaurant__top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; }
.card-restaurant__rating { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 20px; backdrop-filter: blur(4px); }
.card-restaurant__rating b { color: #FFC107; }
.card-restaurant__fav { width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; }
.card-restaurant__eta { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px; backdrop-filter: blur(4px); }
.card-restaurant__body { padding: 16px; }
.card-restaurant__name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.card-restaurant__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-restaurant__fee { font-size: 12px; font-weight: 700; color: var(--gold-ink); flex-shrink: 0; }
.card-restaurant__meta { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.card-restaurant__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.card-restaurant__tag { font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--bg-input); border: 1px solid var(--border); padding: 3px 9px; border-radius: 20px; }

.card-dish { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; max-width: 240px; position: relative; cursor: pointer; background: var(--bg-input); transition: transform .2s; }
.card-dish:hover { transform: scale(1.02); }
.card-dish img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.card-dish__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 38%, transparent 62%); }
.card-dish__top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 9px 10px; }
.card-dish__likes { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.55); color: #FFC107; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(4px); }
.card-dish__save { background: rgba(0,0,0,.55); border: none; color: #fff; font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 50%; backdrop-filter: blur(4px); line-height: 1; }
.card-dish__price { position: absolute; bottom: 32px; right: 10px; background: var(--accent-gold); color: #101828; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px; z-index: 3; }
.card-dish__name { position: absolute; bottom: 8px; left: 0; right: 0; padding: 0 62px 0 10px; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shop-header { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elev); border: 1px solid var(--border); }
.shop-header__cover { height: 200px; position: relative; background: var(--bg-input); }
.shop-header__cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.shop-header__cover-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.55)); }
.shop-header__panel { position: relative; padding: 0 20px 20px; margin-top: -40px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.shop-header__logo { width: 80px; height: 80px; border-radius: 20px; background: linear-gradient(135deg, #2563EB, #3B82F6); border: 4px solid var(--bg-elev); display: flex; align-items: center; justify-content: center; color: #FFC107; font-family: var(--font-display); font-weight: 800; font-size: 24px; box-shadow: var(--card-shadow); overflow: hidden; flex-shrink: 0; position: relative; z-index: 2; }
.shop-header__logo img { width: 100%; height: 100%; object-fit: cover; }
.shop-header__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.shop-header__name { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--text); }
.shop-header__status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: var(--green-s); color: var(--green); flex-shrink: 0; }
.shop-header__status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.shop-header__meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); margin-top: 8px; margin-bottom: 12px; }
.shop-header__rating { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-ink); font-weight: 700; }
.shop-header__verified { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent-2); background: var(--accent-soft); padding: 3px 9px; border-radius: 20px; }
.shop-header__tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.shop-header__tag { font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--bg-input); border: 1px solid var(--border); padding: 3px 10px; border-radius: 20px; }
.shop-header__actions { display: flex; gap: 10px; margin-top: 16px; }
.shop-header__btn-follow { flex: 1; text-align: center; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--font-body); }
.shop-header__btn-order { flex: 1.4; text-align: center; padding: 10px; border-radius: var(--radius-sm); border: none; background: var(--accent-2); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--font-body); }

.vendor-card {
    background: linear-gradient(135deg, rgba(29,78,216,.2), rgba(247,181,0,.1));
    border: 1px solid rgba(29,78,216,.3);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: auto;
}

    .vendor-card h4 {
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 4px;
        color: var(--text);
    }

    .vendor-card p {
        font-size: 12px;
        color: var(--text-dim);
        margin: 0 0 12px;
    }

.fav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background .15s;
}

    .fav-item:hover {
        background: var(--bg-input);
    }

.fav-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fav-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.fav-loc {
    font-size: 11px;
    color: var(--text-faint);
}

/* RESTORED — this had zero base definition anywhere, only two mobile
   @media overrides changing its column count. Without the base rule
   supplying display:grid in the first place, there was nothing for
   those overrides to actually override on normal/desktop screens — the
   dish cards would just stack as plain blocks instead of forming a
   grid at all. This is a real blind spot in my earlier automated
   audit: it only checked whether a class name appeared anywhere in the
   file, which incorrectly treated a class existing ONLY inside media-
   query overrides as "defined", even with no working base rule behind
   it anywhere. */
.grid-dishes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.pill {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text-dim);
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
    white-space: nowrap;
}

    .pill:hover,
    .pill.active {
        background: var(--accent-soft);
        color: var(--accent-2);
        border-color: var(--accent-2);
    }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-s);
}

    .notif-item.unread {
        background: rgba(29,78,216,.04);
    }

.notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-2);
    margin-top: 6px;
    flex-shrink: 0;
}

.notif-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.notif-msg {
    font-size: 13px;
    color: var(--text-dim);
}

.notif-time {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 4px;
}

.empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}

.e-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    color: var(--text-faint);
}

.empty h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text);
}

.empty p {
    font-size: 14px;
    margin: 0;
}

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
}

.auth-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--card-shadow);
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.auth-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 6px;
}

.auth-sub {
    font-size: 14px;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 28px;
}

.auth-alt {
    font-size: 13px;
    text-align: center;
    color: var(--text-dim);
    margin-top: 20px;
}

    .auth-alt a {
        color: var(--accent-2);
        font-weight: 600;
    }

.star-picker {
    display: flex;
    gap: 8px;
}

.star-label {
    cursor: pointer;
    font-size: 28px;
    color: rgba(255,255,255,.2);
    transition: color .12s, transform .1s;
    line-height: 1;
}

[data-theme="light"] .star-label {
    color: rgba(0,0,0,.15);
}

.star-label:active {
    transform: scale(.88);
}

.account-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.account-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    color: #FFC107;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

    .account-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.account-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}

.account-meta {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 2px;
}

.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

    .lightbox-overlay.active {
        display: flex;
    }

.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}

.order-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-gold);
    color: #101828;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s;
}

    .order-btn:hover {
        opacity: .88;
    }

/* ── Toast notifications ──────────────────────────────────
   For errors/messages with little or no real consequence — a thumbnail
   that failed to load, a background sync hiccup. Appears briefly,
   dismisses itself, never blocks the person from doing anything else. */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
}

.analytics-engagement-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    /* The 1fr "Engagement" column, combined with its own 16px/20px
       padding, left too little actual width on a narrow phone - the
       reported symptom of it looking "partially viewed." Stacking to a
       single column here gives both cards their full, natural width
       instead of squeezing them uncomfortably side by side. */
    .analytics-engagement-grid {
        grid-template-columns: 1fr;
    }

    .toast-container {
        left: 16px;
        right: 16px;
        bottom: 88px; /* clears the mobile bottom bar */
        max-width: none;
    }
}

.toast {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-2);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toast-in .25s ease-out;
}

    .toast.toast-error { border-left-color: #EF4444; }
    .toast.toast-success { border-left-color: #22C55E; }

    .toast.toast-hide {
        animation: toast-out .2s ease-in forwards;
    }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(8px); }
}

/* ── Image loading skeleton ────────────────────────────────
   Applied automatically to every <img> on the site by the global JS in
   _Layout.cshtml — not something added by hand to individual pages.
   Every image starts with this shimmer; JS removes it the moment that
   specific image actually finishes loading, or immediately if it was
   already cached (a repeat visit shouldn't shimmer at all). */
img:not(.img-loaded) {
    background: linear-gradient(90deg,
        var(--bg-elev) 25%, var(--bg-input, #1a1f2e) 37%, var(--bg-elev) 63%);
    background-size: 400% 100%;
    animation: img-shimmer 1.4s ease infinite;
}

img.img-loaded {
    animation: none;
    background: none;
}

@keyframes img-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Tooltips ──────────────────────────────────────────────
   For genuinely non-obvious things — a term like "CAC" a first-time
   vendor may not know, not decoration on things that are already clear.
   Custom-built rather than the native title="" attribute, since browser
   tooltips look inconsistent across devices and don't work at all on
   touch — this works identically via hover on desktop and tap on mobile
   (see the JS in _Layout.cshtml for the tap-toggle behavior). */
.tooltip-trigger {
    position: relative;
    display: inline-flex;
    color: var(--text-faint);
    cursor: help;
    font-size: 13px;
}

.tooltip-box {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #08080F;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    width: 220px;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 50;
    white-space: normal;
}

    .tooltip-trigger:hover .tooltip-box,
    .tooltip-trigger.tooltip-active .tooltip-box {
        display: block;
    }

/* ── Notification modal ───────────────────────────────────
   For anything that needs the person's immediate attention before they
   continue — a session timeout, a payment problem. Blocks interaction
   with the rest of the page until explicitly dismissed, matching the
   same overlay convention as the existing image lightbox. */
.notify-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .notify-modal-overlay.active {
        display: flex;
    }

.notify-modal-box {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    max-width: 360px;
    width: 100%;
    text-align: center;
}

.notify-modal-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
}

.notify-modal-message {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 20px;
    line-height: 1.5;
}

.notify-modal-btn {
    background: var(--accent-2);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Dish preview modal (Foods page) ──────────────────────────
   Same overlay convention as the lightbox/notify-modal — fixed, dark
   backdrop, centered box. touch-action:pan-y on the media area lets the
   page itself still scroll vertically behind an open modal while the JS
   swipe handler owns horizontal gestures specifically. */
/* ── Media source action sheet (CreatePost) ───────────────────
   Bottom-anchored rather than centered — this is the mobile-native
   pattern for a quick "choose one of these" prompt, and this feature
   exists specifically because of a mobile browser quirk, so it should
   feel at home there. */
.media-source-sheet {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1270;
    align-items: flex-end;
    justify-content: center;
}
    .media-source-sheet.active {
        display: flex;
    }

.media-source-sheet-panel {
    background: var(--bg-elev);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 480px;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(0);
    animation: media-sheet-in .2s ease-out;
}
@keyframes media-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.media-source-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    padding: 16px 4px;
    cursor: pointer;
    text-align: left;
}
    .media-source-option:last-of-type {
        border-bottom: none;
    }
    .media-source-option i {
        width: 20px;
        color: var(--accent-2);
        text-align: center;
    }

.media-source-cancel {
    width: 100%;
    background: var(--bg-input);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-body);
    padding: 12px;
    margin-top: 12px;
    cursor: pointer;
}

.dish-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 1250;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
    .dish-modal-overlay.active {
        display: flex;
    }

.dish-modal-box {
    background: var(--bg-elev);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Was a hard cut from invisible to visible before — every other
       modal/toast in this app animates in, this one just hadn't caught
       up yet. */
    transform: scale(.94);
    opacity: 0;
    animation: dish-modal-in .2s ease-out forwards;
}
@keyframes dish-modal-in {
    to { transform: scale(1); opacity: 1; }
}

.dish-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Desktop path to the same next/prev behavior swipe gives on touch —
   there's no swipe gesture for a mouse, so this is genuinely necessary,
   not just a nice-to-have. Positioned relative to the overlay itself
   (screen edges), not squeezed inside the ~400px modal box. */
.dish-modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1260;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .15s, opacity .15s;
}
    .dish-modal-arrow:hover {
        background: rgba(0,0,0,.75);
    }
    .dish-modal-arrow:disabled {
        opacity: 0;
        pointer-events: none;
    }
    .dish-modal-arrow-left {
        left: 16px;
    }
    .dish-modal-arrow-right {
        right: 16px;
    }
    @media (max-width: 480px) {
        /* Swipe is the primary path on a real touch phone — the arrows
           still work there too (nothing wrong with tapping instead of
           swiping), just given less visual weight than on desktop,
           where they're the primary way to move between items. */
        .dish-modal-arrow {
            width: 36px;
            height: 36px;
            font-size: 13px;
        }
    }

.dish-modal-media {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--bg-input);
    cursor: pointer;
    touch-action: pan-y;
    flex-shrink: 0;
}
    .dish-modal-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.dish-modal-media-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, transparent 70%);
}

.dish-modal-save-form {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    margin: 0;
}
.dish-modal-save-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    border: none;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
    .dish-modal-save-btn[data-saved="true"] i {
        color: #EF4444;
    }

.dish-modal-overlay-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    z-index: 2;
}

.dish-modal-shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,.4);
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    margin-bottom: 8px;
}
.dish-modal-shop-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-2), #3B82F6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    overflow: hidden;
    flex-shrink: 0;
}
    .dish-modal-shop-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
#dishModalShopName {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.dish-modal-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
#dishModalName {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dish-modal-price {
    font-size: 15px;
    font-weight: 800;
    background: var(--accent-gold);
    color: #101828;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.dish-modal-body {
    padding: 16px 18px 18px;
    overflow-y: auto;
}
#dishModalDescription {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0;
}

.admin-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100vh;
    overflow-x: hidden;
}

.admin-sidebar {
    background: var(--bg);
    border-right: 1px solid var(--border);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
}

    .admin-sidebar::-webkit-scrollbar {
        display: none;
    }

.admin-sidebar-logo {
    padding: 12px;
    margin-bottom: 16px;
}

    .admin-sidebar-logo strong {
        display: block;
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 800;
        color: var(--accent-gold);
    }

    .admin-sidebar-logo span {
        font-size: 11px;
        color: var(--text-faint);
    }

.admin-nav-section {
    margin-bottom: 16px;
}

.admin-nav-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    padding: 4px 12px;
    margin-bottom: 4px;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none;
    transition: background .15s, color .15s;
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-body);
    width: 100%;
    text-align: left;
}

    .admin-nav-item:hover {
        background: var(--bg-input);
        color: var(--text);
    }

    .admin-nav-item.active {
        background: var(--accent-soft);
        color: var(--accent-2);
    }

.admin-nav-badge {
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}

.admin-content {
    padding: 28px 32px;
    max-width: 100%;
    overflow-x: hidden;
}

.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-page-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
}

.admin-page-sub {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 4px;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.admin-stat {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}

.admin-stat-label {
    font-size: 12px;
    color: var(--text-faint);
    font-weight: 600;
    margin-bottom: 6px;
}

.admin-stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.admin-stat-delta {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 4px;
}

    .admin-stat-delta.up {
        color: var(--green);
    }

.admin-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.admin-chart-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.admin-chart-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.admin-chart-sub {
    font-size: 12px;
    color: var(--text-faint);
    margin-bottom: 14px;
}

.admin-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-dim);
}

.admin-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.admin-table-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
    overflow-x: auto;
}

.admin-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

    .admin-table-header h3 {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        margin: 0;
    }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 500px;
}

    .admin-table th {
        text-align: left;
        padding: 10px 16px;
        background: var(--bg-input);
        color: var(--text-faint);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        border-bottom: 1px solid var(--border);
    }

    .admin-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-s);
        color: var(--text);
        vertical-align: middle;
    }

    .admin-table tr:last-child td {
        border-bottom: none;
    }

    .admin-table tr:hover td {
        background: rgba(255,255,255,.02);
    }

.a-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
    text-decoration: none;
    transition: opacity .15s;
}

/* Genuinely new additions, not restorations — these weren't caught in
   the transcript search for the accidental deletion, they appear to
   have simply never had CSS written for them in the first place. */
.section-head {
    margin-bottom: 16px;
}
.section-head h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.s-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.s-pill.pending { background: rgba(247,181,0,.12); color: var(--gold-ink); }
.s-pill.expired { background: rgba(239,68,68,.12); color: #EF4444; }
.s-pill.active { background: rgba(34,197,94,.12); color: #22C55E; }
.s-pill.warned { background: rgba(247,181,0,.12); color: var(--gold-ink); }
.s-pill.deactivated { background: rgba(239,68,68,.12); color: #EF4444; }
.s-pill.dismissed { background: var(--bg-input); color: var(--text-faint); }
.s-pill.open { background: rgba(247,181,0,.12); color: var(--gold-ink); }
.s-pill.resolved { background: rgba(34,197,94,.12); color: #22C55E; }
.s-pill.admin { background: var(--accent-soft); color: var(--accent-2); }
.s-pill.vendor { background: rgba(139,92,246,.12); color: #8B5CF6; }
.s-pill.customer { background: var(--bg-input); color: var(--text-dim); }

.a-btn.remove {
    background: rgba(239,68,68,.12);
    color: #EF4444;
}
    .a-btn.remove:hover {
        opacity: .8;
    }

.a-btn.ban {
    background: rgba(239,68,68,.12);
    color: #EF4444;
}
    .a-btn.ban:hover {
        opacity: .8;
    }

.mb-32 {
    margin-bottom: 32px;
}

    .a-btn:hover {
        opacity: .85;
    }

    .a-btn.view {
        background: var(--bg-input);
        color: var(--text-dim);
    }

    .a-btn.approve {
        background: var(--green-s);
        color: var(--green);
    }

    .a-btn.reject {
        background: var(--red-s);
        color: #FCA5A5;
    }

@media (max-width: 1024px) {
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .admin-charts-row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .sidebar {
        display: none !important;
    }

    .bottom-bar {
        display: block;
    }

    .main {
        margin-left: 0 !important;
    }

    .content {
        padding: 14px 14px 90px !important;
    }

    .topbar {
        padding: 10px 14px;
    }

    .feed-layout {
        grid-template-columns: 1fr !important;
    }

        .feed-layout > div:last-child {
            display: none !important;
        }

    .rest-grid {
        grid-template-columns: 1fr !important;
    }

    .grid-dishes {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .auth-card {
        padding: 28px 20px;
    }

    .account-layout {
        grid-template-columns: 1fr !important;
    }

    /* This page's own local sidebar — genuinely redundant on mobile now
       that the exact same navigation lives in the global account drawer,
       reachable from any page via the bottom bar. Content on this page
       still renders full-width for whichever tab was actually requested;
       only the local copy of the tab-switcher itself disappears. */
    .account-sidebar-desktop-only {
        display: none !important;
    }

/* ── Account sidebar → mobile slide-in drawer ─────────────────
   Sequence: hidden by default → tap the Me button in the bottom bar
   (see _Layout.cshtml) → drawer slides in over a dimmed backdrop → tap
   the backdrop or the close button to dismiss. Desktop is completely
   untouched — this entire block only exists inside this mobile media
   query. The trigger itself is the bottom bar's existing Me button
   (styled with .tab-btn, not a class of its own here) — there used to
   be a separate page-local trigger button style, removed once the
   drawer moved from being page-local to living globally in the layout,
   reachable from every page instead of just this one. */

.account-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1290;
}
    .account-drawer-backdrop.active {
        display: block;
    }

.account-sidebar-drawer {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    /* Previous attempt reduced both this and max-width, but width was
       still the smaller (governing) value on a typical phone, so
       shrinking max-width alone did nothing. Flipped the roles here —
       vw is now the primary, scaling constraint, with a fixed px value
       only capping it on large screens/tablets, so it consistently
       stays well under half the screen on an actual phone rather than
       depending on which specific value happens to be smaller. */
    width: 48vw;
    max-width: 220px;
    z-index: 1300;
    border-radius: 0 !important;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    /* This was the actual bug behind "the drawer is see-through" — the
       old page-local version of this drawer had background/border/padding
       as an inline style on the div itself. When the drawer moved here to
       become global, that inline style never got carried over, so the
       panel had no background at all and the page underneath showed
       straight through it. */
    background: var(--bg-elev);
    border: 1px solid var(--border);
    padding: 10px;
}
    .account-sidebar-drawer.open {
        transform: translateX(0);
    }

.account-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-input);
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    margin-bottom: 8px;
    margin-left: auto;
}

    .menu-manager-layout {
        grid-template-columns: 1fr !important;
    }

    .vendor-stats-row {
        grid-template-columns: 1fr !important;
    }

        .vendor-stats-row > div {
            border-right: none !important;
            border-bottom: 1px solid var(--border);
        }

            .vendor-stats-row > div:last-child {
                border-bottom: none;
            }

    .admin-shell {
        grid-template-columns: 1fr !important;
        overflow-x: hidden !important;
    }

    .admin-sidebar {
        position: relative !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 8px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .admin-sidebar-logo {
        display: none !important;
    }

    .admin-nav-section {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
    }

    .admin-nav-label {
        display: none !important;
    }

    .admin-nav-item {
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
        width: auto !important;
    }

    .admin-content {
        padding: 16px 12px !important;
    }

    .admin-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .admin-page-title {
        font-size: 20px !important;
    }

    .admin-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .admin-stat {
        padding: 14px !important;
    }

    .admin-stat-value {
        font-size: 22px !important;
    }

    .admin-charts-row {
        grid-template-columns: 1fr !important;
    }

    .admin-chart-card {
        padding: 16px !important;
    }

    .admin-table th,
    .admin-table td {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .a-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .admin-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .grid-dishes {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}