/* ════════════════════════════════════════════════════════════════════════
   PILSELIGAEN — "Cozy pub at night"
   Dark warm charcoal, beer-gold accent, soft tactile cards, warm vignette.
   All original class names preserved. Decorative additions are pure CSS.
   ──────────────────────────────────────────────────────────────────────── */

/* ── TOKENS ────────────────────────────────────────────────────────────── */
:root {
    /* Surfaces — warm charcoal/oak, layered */
    --bg:           oklch(0.155 0.014 60);   /* page background */
    --bg-deep:      oklch(0.118 0.012 55);   /* under-card / outer gutter */
    --card:         oklch(0.215 0.016 65);   /* primary card */
    --card2:        oklch(0.265 0.018 65);   /* nested / input bg */
    --card3:        oklch(0.315 0.018 65);   /* hover / chip bg */
    --border:       oklch(0.345 0.020 60);   /* hairline */
    --border-hi:    oklch(0.42  0.024 60);   /* hover hairline */

    /* Text — warm white through to mute */
    --text:         oklch(0.965 0.014 80);
    --dim:          oklch(0.715 0.018 70);
    --mute:         oklch(0.560 0.020 65);

    /* Accent — beer gold + foam + ember */
    --accent:       oklch(0.78 0.155 72);    /* primary amber */
    --accent-hi:    oklch(0.90 0.130 92);    /* foam highlight */
    --accent-lo:    oklch(0.55 0.140 55);    /* deep amber */
    --accent-ink:   oklch(0.18 0.040 50);    /* text on amber */
    --accent-soft:  color-mix(in oklab, var(--accent) 14%, transparent);
    --accent-softer:color-mix(in oklab, var(--accent)  7%, transparent);

    /* Functional */
    --green:        oklch(0.72 0.16 145);
    --red:          oklch(0.66 0.18 25);
    --blue:         oklch(0.72 0.12 240);

    /* Medals */
    --gold:         oklch(0.86 0.155 88);
    --silver:       oklch(0.85 0.012 250);
    --bronze:       oklch(0.66 0.115 50);

    /* Geometry */
    --r:            14px;
    --r-sm:         10px;
    --r-pill:       999px;

    /* Shadows — warm, soft */
    --sh-1:         0 1px 0 oklch(1 0 0 / .04) inset, 0 1px 2px oklch(0 0 0 / .35);
    --sh-2:         0 1px 0 oklch(1 0 0 / .05) inset, 0 6px 18px -8px oklch(0 0 0 / .55);
    --sh-glow:      0 0 0 1px var(--accent-soft), 0 8px 28px -10px color-mix(in oklab, var(--accent) 40%, transparent);
}

/* ── RESET + BASE ──────────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
*::selection { background:var(--accent); color:var(--accent-ink); }

html, body { min-height:100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    line-height: 1.45;
    /* Warm glow from "the bar light" at top + paper grain underneath */
    background-image:
        radial-gradient(120% 60% at 50% -12%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 55%),
        radial-gradient(80% 50% at 50% 110%, color-mix(in oklab, var(--accent-lo) 14%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    background-attachment: fixed;
}
/* Tabular numerals on data-heavy spots */
.cv, .dg, .lbg, .ach-progress, .prev-g { font-variant-numeric: tabular-nums; }

/* ── LOADING OVERLAY ───────────────────────────────────────────────────── */
#overlay {
    display:none; position:fixed; inset:0; z-index:900;
    background: color-mix(in oklab, var(--bg-deep) 88%, transparent);
    backdrop-filter: blur(6px);
    align-items:center; justify-content:center; flex-direction:column; gap:14px;
}
.spinner {
    width:38px; height:38px;
    border:3px solid var(--border);
    border-top-color:var(--accent);
    border-radius:50%;
    animation: spin .9s linear infinite;
    box-shadow: 0 0 24px -4px color-mix(in oklab, var(--accent) 50%, transparent);
}
@keyframes spin { to { transform:rotate(360deg); } }
#overlay-msg { font-size:.9em; color:var(--dim); letter-spacing:.2px; }

/* ── FULL SCREENS ──────────────────────────────────────────────────────── */
.screen { display:none; align-items:center; justify-content:center; min-height:100vh; padding:20px; }

/* ── AUTH — hero moment ────────────────────────────────────────────────── */
.auth-box {
    position: relative;
    background:
        radial-gradient(120% 100% at 50% -10%, var(--accent-soft) 0%, transparent 55%),
        var(--card);
    border:1px solid var(--border);
    border-radius: 22px;
    padding: 34px 28px 30px;
    width:100%; max-width:400px;
    box-shadow:
        0 1px 0 oklch(1 0 0 / .06) inset,
        0 30px 60px -28px oklch(0 0 0 / .7),
        0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent);
}
.auth-box::before {
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background: linear-gradient(180deg, oklch(1 0 0 / .05) 0%, transparent 30%);
    mask: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
}
.auth-logo {
    text-align:center; font-size:3.2em; margin-bottom:4px; line-height:1;
    filter: drop-shadow(0 4px 18px color-mix(in oklab, var(--accent) 55%, transparent));
}
.auth-title {
    text-align:center; font-size:1.7em; font-weight:800;
    color:var(--accent-hi);
    margin-bottom:4px; letter-spacing:-.01em;
    text-shadow: 0 1px 0 oklch(0 0 0 / .3);
}
.auth-sub  { text-align:center; font-size:.88em; color:var(--dim); margin-bottom:24px; }

/* ── TABS ──────────────────────────────────────────────────────────────── */
.tab-row {
    display:flex; gap:4px;
    background: var(--bg-deep);
    border:1px solid var(--border);
    border-radius:12px;
    padding:4px;
    margin-bottom:22px;
}
.tab-btn {
    flex:1; padding:9px; border:none; border-radius:9px;
    background:transparent; color:var(--dim);
    cursor:pointer; font-size:.9em; font-weight:600;
    transition: background .2s, color .2s, transform .15s;
    font-family: inherit;
}
.tab-btn:hover:not(.active) { color: var(--text); }
.tab-btn.active {
    background: linear-gradient(180deg, var(--accent-hi), var(--accent));
    color: var(--accent-ink); font-weight:700;
    box-shadow: 0 1px 0 oklch(1 0 0 / .25) inset, 0 4px 14px -6px color-mix(in oklab, var(--accent) 70%, transparent);
}

/* ── FORMS ─────────────────────────────────────────────────────────────── */
.fg { margin-bottom:15px; }
label {
    display:block; font-size:.72em; color:var(--mute);
    margin-bottom:6px; font-weight:700;
    text-transform:uppercase; letter-spacing:.7px;
}
input, select, textarea {
    width:100%; padding:11px 14px;
    background: var(--card2);
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--text); font-size:1em; font-family:inherit;
    outline:none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--mute); }
input:hover, select:hover, textarea:hover { border-color: var(--border-hi); }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    background: var(--card3);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
select { appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%; background-size: 4px 4px, 4px 4px; background-repeat:no-repeat; padding-right: 30px; }
select option { background:var(--card2); color:var(--text); }
.location-row { display:flex; gap:8px; align-items:stretch; }
.location-row input { flex:1; min-width:0; }
.location-btn { width:auto; flex:0 0 auto; white-space:nowrap; padding-inline:14px; }
.field-hint { color:var(--dim); font-size:.78em; min-height:1.3em; margin-top:6px; }

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn {
    width:100%; padding:13px;
    border:none; border-radius:11px;
    cursor:pointer; font-size:1em; font-weight:700;
    font-family:inherit; letter-spacing:.1px;
    transition: transform .12s, background .15s, box-shadow .15s, border-color .15s;
    position:relative;
}
.btn:active { transform: translateY(1px); }
.btn-p {
    background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 55%, var(--accent-lo) 100%);
    color:var(--accent-ink);
    box-shadow:
        0 1px 0 oklch(1 0 0 / .35) inset,
        0 -1px 0 oklch(0 0 0 / .2) inset,
        0 8px 22px -10px color-mix(in oklab, var(--accent) 70%, transparent);
}
.btn-p:hover { filter: brightness(1.06); }
.btn-p:disabled { opacity:.45; cursor:not-allowed; filter:saturate(.5); }
.btn-s {
    background: var(--card2);
    color: var(--text);
    border:1px solid var(--border);
    box-shadow: var(--sh-1);
}
.btn-s:hover { border-color: var(--accent); color: var(--accent-hi); }
.btn-d {
    background: color-mix(in oklab, var(--red) 88%, black);
    color:#fff;
    box-shadow: 0 1px 0 oklch(1 0 0 / .15) inset, 0 6px 18px -8px color-mix(in oklab, var(--red) 55%, transparent);
}
.btn-sm { width:auto; padding:7px 14px; font-size:.82em; border-radius:9px; }
.err-msg { color:var(--red); font-size:.84em; margin-top:10px; text-align:center; }

/* ── APP SHELL ─────────────────────────────────────────────────────────── */
#app { display:none; min-height:100vh; padding-bottom:84px; }

/* ── TOPBAR ────────────────────────────────────────────────────────────── */
.topbar {
    background: color-mix(in oklab, var(--card) 92%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    display:flex; align-items:center; justify-content:space-between;
    gap: 10px;
    position:sticky; top:0; z-index:100;
    box-shadow: 0 1px 0 oklch(1 0 0 / .04) inset, 0 6px 20px -14px oklch(0 0 0 / .7);
}
.brand {
    font-size:1.08em; font-weight:800;
    color: var(--accent-hi);
    letter-spacing:-.01em;
    text-shadow: 0 0 18px color-mix(in oklab, var(--accent) 35%, transparent);
    white-space:nowrap;
    flex: 0 0 auto;
}
.brand-link {
    background:none;
    border:none;
    cursor:pointer;
    font-family:inherit;
    padding:0;
}
.brand-link:hover { color: var(--accent); }
.topbar-r { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; position:relative; }
.topbar-user { display:flex; align-items:center; gap:8px; min-width:0; }
.avatar {
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.82em; color:var(--accent-ink);
    flex-shrink:0; overflow:hidden;
    box-shadow: 0 0 0 1px oklch(0 0 0 / .3), 0 1px 0 oklch(1 0 0 / .25) inset;
}
.avatar.has-img { color:transparent; background:var(--card2); border:1px solid var(--border); }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.uname { font-size:.86em; color: var(--text); font-weight:600; }

.topbar-menu { position:relative; flex:0 0 auto; }
.menu-dot-btn {
    width:36px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border);
    border-radius:9px;
    background:color-mix(in oklab, var(--card2) 74%, transparent);
    color:var(--accent-hi);
    cursor:pointer;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:1.05em;
    font-weight:800;
    letter-spacing:1px;
    line-height:1;
    padding-bottom:4px;
    transition:border-color .15s, background .15s, color .15s;
}
.menu-dot-btn:hover,
.menu-dot-btn[aria-expanded="true"] {
    border-color:var(--accent);
    background:var(--accent-softer);
    color:var(--accent-hi);
}
.topbar-menu-panel {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:min(380px, calc(100vw - 24px));
    max-height:min(72vh, 620px);
    overflow-y:auto;
    display:none;
    flex-direction:column;
    gap:8px;
    padding:10px;
    background:
        linear-gradient(180deg, oklch(1 0 0 / .035), transparent 38%),
        var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 22px 50px -22px oklch(0 0 0 / .85), var(--sh-1);
    z-index:160;
}
.topbar-menu-panel.open { display:flex; }
.menu-section { display:flex; flex-direction:column; gap:6px; }
.menu-section + .menu-section { border-top:1px solid var(--border); padding-top:8px; }
.menu-heading {
    color:var(--accent-hi);
    font-size:.78em;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:2px 2px 0;
}
.menu-heading.subtle { color:var(--dim); margin-top:2px; }
.menu-item {
    width:100%;
    border:1px solid transparent;
    border-radius:9px;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font-family:inherit;
    font-size:.88em;
    font-weight:700;
    text-align:left;
    padding:9px 10px;
    transition:background .15s, border-color .15s, color .15s;
}
.menu-item:hover,
.menu-item.active {
    background:var(--accent-softer);
    border-color:color-mix(in oklab, var(--accent) 26%, var(--border));
    color:var(--accent-hi);
}
.menu-item.danger { color:color-mix(in oklab, var(--red) 84%, white); }
.menu-scope { width:100%; max-width:none; font-size:.88em; margin-bottom:2px; }
.menu-unit-toggle { width:100%; justify-content:center; }
.menu-form {
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card2);
    padding:9px;
}
.menu-form label {
    font-size:.66em;
    margin-bottom:5px;
}
.menu-form input {
    padding:8px 10px;
    border-radius:8px;
    font-size:.84em;
}
.menu-inline {
    display:flex;
    align-items:stretch;
    gap:7px;
}
.menu-inline input { min-width:0; }
.menu-inline .btn {
    flex:0 0 auto;
    min-width:82px;
    padding:8px 10px;
}
.menu-group-list { display:flex; flex-direction:column; gap:6px; }
.menu-empty {
    color:var(--dim);
    border:1px dashed var(--border);
    border-radius:10px;
    padding:10px;
    font-size:.82em;
    text-align:center;
}
.menu-group-row {
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card2);
    padding:9px;
}
.menu-group-row.active {
    border-color:color-mix(in oklab, var(--accent) 38%, var(--border));
    background:var(--accent-softer);
}
.menu-group-main {
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}
.menu-group-main strong {
    font-size:.88em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.menu-group-main small { color:var(--dim); font-size:.72em; }
.menu-group-actions {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:8px;
}
.mini-btn {
    border:1px solid var(--border);
    border-radius:8px;
    background:color-mix(in oklab, var(--card3) 65%, transparent);
    color:var(--text);
    cursor:pointer;
    font-family:inherit;
    font-size:.72em;
    font-weight:700;
    padding:6px 8px;
}
.mini-btn:hover {
    border-color:var(--accent);
    color:var(--accent-hi);
}
.mini-btn.danger {
    border-color:color-mix(in oklab, var(--red) 40%, var(--border));
    color:#fff;
    background:color-mix(in oklab, var(--red) 62%, var(--card2));
}

@media (max-width: 560px) {
    .topbar { padding: 9px 12px 10px; }
    .uname { display:none; }
    .topbar-r { gap:8px; }
    .topbar-menu-panel { right:-2px; }
    .unit-toggle { font-size:.72em; }
    .unit-choice { padding:6px 10px; }
}

.icon-btn {
    background: color-mix(in oklab, var(--card2) 70%, transparent);
    border:1px solid var(--border);
    color: var(--dim);
    padding:5px 11px; border-radius:9px;
    cursor:pointer; font-size:.78em; font-weight:600;
    font-family:inherit;
    transition: border-color .15s, color .15s, background .15s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-softer); }
.icon-btn.active { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-softer); }

.scope-select {
    width:auto; max-width:180px;
    padding:6px 28px 6px 12px;
    border-radius:9px; font-size:.79em;
    color: var(--text);
    background-color: var(--card2);
}

/* ── UNIT TOGGLE — iOS segmented pill ──────────────────────────────────── */
.unit-toggle {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    color: var(--dim);
    padding: 3px;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: .74em; font-weight: 700;
    display: inline-flex; align-items: center; gap: 0;
    line-height: 1;
    box-shadow: 0 1px 1px oklch(0 0 0 / .25) inset;
    font-family: inherit;
}
.unit-toggle:hover { border-color: var(--border-hi); }
.unit-choice {
    padding: 6px 11px; border-radius: var(--r-pill);
    color: var(--dim); white-space: nowrap;
    transition: color .18s;
    position: relative;
}
.unit-choice.active {
    background: linear-gradient(180deg, var(--accent-hi), var(--accent));
    color: var(--accent-ink);
    box-shadow: 0 1px 0 oklch(1 0 0 / .3) inset, 0 2px 6px -2px color-mix(in oklab, var(--accent) 60%, transparent);
}
.unit-swap { display:none; }   /* the segmented pill speaks for itself */

/* ── BOTTOM NAV ────────────────────────────────────────────────────────── */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: color-mix(in oklab, var(--card) 92%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-top: 1px solid var(--border);
    display: flex; z-index: 100;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom)) 4px;
    box-shadow: 0 -1px 0 oklch(1 0 0 / .04) inset, 0 -8px 24px -10px oklch(0 0 0 / .55);
}
.nav-item {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 8px 4px 4px; min-height: 52px;
    cursor:pointer; border:none; background:none;
    color: var(--mute); font-size:.66em; font-weight:600;
    gap: 4px;
    font-family: inherit;
    position: relative;
    transition: color .18s;
}
.nav-item .nav-icon {
    font-size: 1.45em; line-height: 1;
    transition: transform .2s, filter .2s;
}
.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--accent-hi); }
.nav-item.active .nav-icon {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 10px color-mix(in oklab, var(--accent) 55%, transparent));
}
.nav-item.active::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px; border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, var(--accent-hi), var(--accent));
    box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 60%, transparent);
}

/* ── VIEWS ─────────────────────────────────────────────────────────────── */
.view { display:none; padding: 18px 16px; max-width:680px; margin:0 auto; }
.view.active { display:block; animation: viewIn .22s ease; }
@keyframes viewIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: none; } }

h2 {
    font-size:1.35em; font-weight:800; letter-spacing:-.01em;
    margin-bottom: 14px;
    color: var(--text);
}

/* ── CARDS ─────────────────────────────────────────────────────────────── */
.card {
    background:
        linear-gradient(180deg, oklch(1 0 0 / .025) 0%, transparent 36%),
        var(--card);
    border:1px solid var(--border);
    border-radius: var(--r);
    padding:18px;
    margin-bottom: 12px;
    box-shadow: var(--sh-2);
    position: relative;
}
.card::before {
    /* hairline top-edge highlight, like warm light grazing the surface */
    content:""; position:absolute; left:14px; right:14px; top:0;
    height:1px; pointer-events:none;
    background: linear-gradient(90deg, transparent, oklch(1 0 0 / .12), transparent);
}

/* Stat tile variant — used inside .stat-grid */
.stat-grid .card {
    padding: 14px 14px 13px;
    background:
        radial-gradient(140% 80% at 0% 0%, var(--accent-softer) 0%, transparent 55%),
        linear-gradient(180deg, oklch(1 0 0 / .03), transparent 40%),
        var(--card);
}
.ct {
    font-size:.7em; color:var(--mute);
    margin-bottom:6px; font-weight:700;
    text-transform:uppercase; letter-spacing:.8px;
}
.cv {
    font-size: 1.9em; font-weight: 800;
    color: var(--accent-hi);
    letter-spacing:-.02em; line-height: 1.05;
    text-shadow: 0 0 22px color-mix(in oklab, var(--accent) 25%, transparent);
}
.cs { font-size:.78em; color:var(--dim); margin-top:4px; }
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; container-type: inline-size; }
/* Container-query so the breakpoint fires based on the grid's actual width, not the
   viewport — crucial since the app is mobile-first and the topbar/nav frame the content. */
@container (min-width: 520px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
/* Fallback for older engines without @container: only switch to 4-col on real tablet+ */
@supports not (container-type: inline-size) {
    @media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
}

/* ── BEER GLASS ─────────────────────────────────────────────────────────── */
.dashboard-scope-bar {
    display:flex;
    justify-content:flex-end;
    margin:-2px 0 10px;
}
.dashboard-scope-toggle {
    display:inline-flex;
    align-items:center;
    gap:10px;
    max-width:100%;
    min-height:42px;
    padding:7px 12px 7px 8px;
    border:1px solid var(--border);
    border-radius:var(--r-pill);
    background:
        linear-gradient(180deg, oklch(1 0 0 / .035), transparent 48%),
        var(--card);
    color:var(--text);
    cursor:pointer;
    font-family:inherit;
    box-shadow:var(--sh-1);
    transition:border-color .16s, background .16s, transform .16s;
}
.dashboard-scope-toggle:hover {
    border-color:var(--accent);
    background:
        linear-gradient(180deg, oklch(1 0 0 / .05), transparent 48%),
        color-mix(in oklab, var(--card) 78%, var(--accent-softer));
}
.dashboard-scope-toggle:active { transform:translateY(1px); }
.dashboard-scope-track {
    position:relative;
    width:42px;
    height:24px;
    border-radius:var(--r-pill);
    background:var(--bg-deep);
    border:1px solid var(--border);
    flex:0 0 auto;
    box-shadow:0 1px 2px oklch(0 0 0 / .35) inset;
}
.dashboard-scope-thumb {
    position:absolute;
    width:18px;
    height:18px;
    top:2px;
    left:3px;
    border-radius:50%;
    background:var(--dim);
    box-shadow:0 1px 4px oklch(0 0 0 / .35);
    transition:transform .18s ease, background .18s ease;
}
.dashboard-scope-toggle.active .dashboard-scope-track {
    background:linear-gradient(180deg, var(--accent-hi), var(--accent));
    border-color:transparent;
}
.dashboard-scope-toggle.active .dashboard-scope-thumb {
    transform:translateX(17px);
    background:var(--accent-ink);
}
.dashboard-scope-copy {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
    min-width:0;
    line-height:1.1;
}
.dashboard-scope-state {
    color:var(--text);
    font-size:.88em;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:190px;
}
.dashboard-scope-next {
    color:var(--dim);
    font-size:.68em;
    font-weight:700;
    white-space:nowrap;
}
@media (max-width:520px) {
    .dashboard-scope-bar { justify-content:stretch; }
    .dashboard-scope-toggle { width:100%; }
    .dashboard-scope-copy { flex:1; }
    .dashboard-scope-state { max-width:100%; }
}
.beer-glass-pair {
    display: flex;
    gap: 10px;
}
.beer-glass-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.beer-glass-outer {
    position: relative;
    width: 84px;
    height: 118px;
}
.beer-glass-body {
    position: absolute;
    inset: 0;
    clip-path: polygon(13% 0%, 87% 0%, 73% 100%, 27% 100%);
    background: rgba(255,255,255,0.035);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.beer-fill-stack {
    width: 100%;
    height: 0%;
    transition: height 1.3s cubic-bezier(.22,.61,.36,1);
    position: relative;
    overflow: hidden;
    background: linear-gradient(to top,
        #7c3800 0%,
        #b05e0c 22%,
        #ce820e 48%,
        #e8a020 72%,
        #f5bc30 88%,
        #fdd252 100%
    );
}
.beer-foam-band {
    position: absolute;
    top: -4px; left: -12%; right: -12%;
    height: 14px;
    background:
        radial-gradient(circle at 28% 45%, rgba(255,255,255,0.98) 0%, transparent 38%),
        radial-gradient(circle at 68% 35%, rgba(255,255,255,0.92) 0%, transparent 32%),
        radial-gradient(circle at 50% 65%, rgba(255,255,255,0.88) 0%, transparent 42%),
        radial-gradient(circle at 85% 55%, rgba(255,255,255,0.8) 0%, transparent 28%),
        rgba(255,255,255,0.72);
    border-radius: 50% 50% 40% 40%;
    pointer-events: none;
    z-index: 1;
}
.beer-bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.62);
    animation: beer-bubble-rise 2.6s ease-in infinite;
}
.beer-drip-left, .beer-drip-right {
    position: absolute;
    top: 0;
    width: 5px;
    height: 20px;
    background: linear-gradient(to bottom, #f0a820 0%, #d48510 55%, transparent 100%);
    border-radius: 0 0 50% 50%;
    transform: scaleY(0);
    transform-origin: top center;
    animation: beer-drip-fall 2.6s ease-in-out infinite;
    z-index: 3;
}
.beer-drip-left  { left: 22%; }
.beer-drip-right { right: 22%; animation-delay: 1.3s; }
@keyframes beer-drip-fall {
    0%   { transform: scaleY(0) translateY(0);    opacity: 0; }
    12%  { transform: scaleY(0.35) translateY(0); opacity: .95; }
    45%  { transform: scaleY(1) translateY(0);    opacity: .9; }
    72%  { transform: scaleY(1) translateY(8px);  opacity: .75; }
    90%  { transform: scaleY(.7) translateY(18px); opacity: .3; }
    100% { transform: scaleY(0) translateY(24px); opacity: 0; }
}
.beer-puddle {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 70px;
    height: 10px;
    background: radial-gradient(ellipse at center,
        rgba(230, 155, 20, 0.55) 0%,
        rgba(200, 120, 10, 0.28) 55%,
        transparent 100%);
    border-radius: 50%;
    animation: puddle-spread 0.9s cubic-bezier(.22,.61,.36,1) 0.3s both;
}
@keyframes puddle-spread {
    from { transform: translateX(-50%) scaleX(0.05); opacity: 0; }
    to   { transform: translateX(-50%) scaleX(1);    opacity: 1; }
}
.beer-prev-label {
    font-size: .68em;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: center;
    letter-spacing: .3px;
    margin-bottom: 4px;
}
@keyframes beer-bubble-rise {
    0%   { transform: translateY(0)   scale(1);   opacity: .55; }
    70%  { opacity: .25; }
    100% { transform: translateY(-130px) scale(.4); opacity: 0; }
}
.beer-glass-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}
.beer-glass-label {
    text-align: center;
    width: 100%;
}
.beer-label-total {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--accent-hi);
    letter-spacing: -.02em;
    line-height: 1.1;
    text-shadow: 0 0 18px color-mix(in oklab, var(--accent) 22%, transparent);
    font-variant-numeric: tabular-nums;
}
.beer-label-name {
    font-size: .88em;
    font-weight: 700;
    color: var(--text);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.beer-label-scope {
    font-size: .65em;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-weight: 600;
    margin-top: 1px;
}

/* ── SECTIONS ──────────────────────────────────────────────────────────── */
.sh { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap: wrap; }
.st { font-size:1.05em; font-weight:700; letter-spacing:-.01em; }

/* ── CHART ─────────────────────────────────────────────────────────────── */
.chart-wrap { position:relative; height:220px; }

.h2h-controls { display:flex; gap:8px; flex-wrap:wrap; }
.h2h-controls select { min-width:145px; margin:0; }
.h2h-board {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:10px;
    align-items:center;
}
.h2h-person {
    display:flex; align-items:center; gap:10px;
    min-width:0;
    background:var(--card2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px;
}
.h2h-person.right { justify-content:flex-end; text-align:right; }
.h2h-person div:not(.avatar) { min-width:0; display:flex; flex-direction:column; gap:2px; }
.h2h-person strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.94em; }
.h2h-person small { color:var(--accent-hi); font-weight:800; font-size:.78em; }
.h2h-vs { color:var(--dim); font-size:.78em; font-weight:800; text-transform:uppercase; }
.h2h-metrics { grid-column:1/-1; display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.h2h-row {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(94px,auto) minmax(0,1fr);
    align-items:center; gap:8px;
    border:1px solid var(--border);
    border-radius:9px;
    background:color-mix(in oklab, var(--card2) 74%, transparent);
    padding:7px 9px;
}
.h2h-label { text-align:center; color:var(--dim); font-size:.74em; font-weight:700; }
.h2h-val { font-weight:800; font-size:.86em; color:var(--text); min-width:0; }
.h2h-val:last-child { text-align:right; }
.h2h-val.win { color:var(--green); text-shadow:0 0 16px color-mix(in oklab, var(--green) 30%, transparent); }

@media (max-width:520px) {
    .h2h-board { grid-template-columns:1fr; }
    .h2h-vs { text-align:center; }
    .h2h-person.right { justify-content:flex-start; text-align:left; }
    .h2h-row { grid-template-columns:1fr; text-align:left; }
    .h2h-label { text-align:left; order:-1; }
    .h2h-val:last-child { text-align:left; }
}

/* ── FILTER PILLS ──────────────────────────────────────────────────────── */
.tf { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.fb {
    padding:6px 14px; border-radius: var(--r-pill);
    border:1px solid var(--border);
    background: var(--card2);
    color: var(--dim);
    cursor:pointer; font-size:.82em; font-weight:600;
    font-family:inherit;
    transition: all .18s;
}
.fb:hover { border-color: var(--border-hi); color: var(--text); }
.fb.active {
    background: linear-gradient(180deg, var(--accent-hi), var(--accent));
    color: var(--accent-ink); border-color: transparent; font-weight:700;
    box-shadow: 0 1px 0 oklch(1 0 0 / .3) inset, 0 4px 14px -6px color-mix(in oklab, var(--accent) 60%, transparent);
}
.tf.tight { margin-bottom:0; }

/* ── DRINK LIST ────────────────────────────────────────────────────────── */
.di { display:flex; align-items:center; padding:11px 0; border-bottom:1px solid var(--border); gap:12px; }
.di:last-child { border-bottom:none; }
.dico {
    font-size:1.35em; flex-shrink:0; line-height:1;
    width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: var(--accent-softer);
    border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
}
.dinf { flex:1; min-width:0; }
.dn { font-weight:600; font-size:.94em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.dm { font-size:.78em; color:var(--dim); margin-top:2px; }
.dr { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.dg { font-weight:800; color:var(--accent-hi); font-size:.92em; letter-spacing:-.01em; }
.del { background:none; border:none; color:var(--dim); cursor:pointer; font-size:.78em; line-height:1; font-family:inherit; }
.del:hover { color:var(--red); }
.del-txt { border:1px solid var(--border); border-radius:7px; padding:4px 8px; line-height:1.2; background:var(--card2); }
.del-txt:hover { border-color:var(--red); background: color-mix(in oklab, var(--red) 12%, transparent); color: var(--red); }
.manage-drink:first-child { padding-top:0; }
.manage-drink:last-child { padding-bottom:0; }

/* ── FEED ──────────────────────────────────────────────────────────────── */
.feed-load-more { display:flex; justify-content:center; padding:16px 0 4px; }
.feed-item { padding:14px 0; border-bottom:1px solid var(--border); }
.feed-item:first-child { padding-top: 4px; }
.feed-item:last-child { border-bottom:none; padding-bottom: 4px; }
.feed-item.achievement {
    background:
        radial-gradient(80% 100% at 0% 50%, var(--accent-soft) 0%, transparent 60%),
        var(--accent-softer);
    margin:6px -8px; padding:14px 12px;
    border-radius:12px; border:1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
    box-shadow: 0 0 24px -12px color-mix(in oklab, var(--accent) 50%, transparent);
}
.feed-head { display:flex; align-items:flex-start; gap:11px; }
.feed-head .dinf .dn { white-space:normal; }

.feed-actions { display:flex; flex-wrap:wrap; gap:6px; margin: 10px 0 6px 50px; align-items:center; }
.react-btn {
    border:1px solid var(--border);
    background: var(--card2);
    color: var(--dim);
    border-radius: var(--r-pill);
    padding: 5px 10px; cursor: pointer;
    font-size:.82em; font-weight:600;
    line-height:1; min-width:40px;
    font-family:inherit;
    transition: transform .15s, border-color .15s, background .15s, color .15s;
}
.react-btn:hover { transform: translateY(-1px) scale(1.05); border-color: var(--accent); color: var(--accent-hi); }
.react-btn:active { transform: translateY(0) scale(.96); }
.react-btn.active {
    border-color: var(--accent);
    color: var(--accent-hi);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-soft), 0 4px 14px -8px color-mix(in oklab, var(--accent) 50%, transparent);
}
.react-detail-btn {
    border:none; background:transparent; color:var(--dim);
    cursor:pointer; font-size:.78em; padding:5px 4px;
    font-family:inherit; font-weight:600;
}
.react-detail-btn:hover { color: var(--accent-hi); }
.react-details {
    margin: 0 0 8px 50px;
    background: var(--card2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    display:flex; flex-direction:column; gap:6px;
}
.react-detail-row {
    display:grid; grid-template-columns:26px 1fr; gap:8px;
    color:var(--dim); font-size:.82em; line-height:1.4;
}
.feed-comments { margin-left:50px; display:flex; flex-direction:column; gap:6px; }
.feed-comment {
    background: var(--card2);
    border:1px solid var(--border);
    border-radius:10px; padding:8px 10px;
    font-size:.86em; line-height:1.45;
}
.feed-comment-meta { color:var(--dim); font-size:.82em; margin-bottom:3px; display:flex; justify-content:space-between; gap:8px; }
.feed-comment-form { display:flex; gap:8px; margin:10px 0 0 50px; }
.feed-comment-form input { padding:9px 11px; font-size:.9em; }
.feed-comment-form button { width:auto; padding:9px 14px; font-size:.84em; }
.feed-disabled { margin:8px 0 0 50px; color:var(--dim); font-size:.8em; }
.feed-disabled.global { margin:0 0 10px; background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:9px 11px; }

/* ── LEADERBOARD ───────────────────────────────────────────────────────── */
.lb-tools { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 180px)); gap:10px; margin-bottom:10px; align-items:end; }
.lb-tools .fg { margin-bottom:0; }
.lb-note { color:var(--dim); font-size:.8em; margin:-2px 0 12px; }

.lbr {
    display:flex; align-items:flex-start;
    padding: 14px 10px; gap:12px;
    border-bottom:1px solid var(--border);
    border-radius:10px;
    position: relative;
}
.lbr:last-child { border-bottom:none; }
.lbr.me {
    background: var(--accent-softer);
    border-bottom-color: transparent;
}

/* Top 3 — gold/silver/bronze flourish */
.lbr:has(.r1), .lbr:has(.r2), .lbr:has(.r3) {
    background: linear-gradient(180deg, oklch(1 0 0 / .025), transparent 60%);
}
.lbrank {
    font-size:1.05em; font-weight:800;
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    flex-shrink:0; padding:0;
    background: var(--card2); border:1px solid var(--border);
    color: var(--text); font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 0 oklch(1 0 0 / .06) inset, 0 2px 6px -3px oklch(0 0 0 / .4);
}
.r1, .r2, .r3 { font-size:1.3em; }
.r1 {
    background:
        radial-gradient(60% 60% at 30% 30%, oklch(1 0.05 90) 0%, transparent 60%),
        linear-gradient(180deg, var(--gold) 0%, oklch(0.7 0.16 75) 100%);
    border-color: color-mix(in oklab, var(--gold) 60%, var(--border));
    color: oklch(0.2 0.05 65);
    box-shadow:
        0 0 0 2px color-mix(in oklab, var(--gold) 35%, transparent),
        0 0 26px -4px color-mix(in oklab, var(--gold) 70%, transparent),
        0 1px 0 oklch(1 0 0 / .4) inset;
}
.r2 {
    background:
        radial-gradient(60% 60% at 30% 30%, oklch(1 0 0) 0%, transparent 65%),
        linear-gradient(180deg, var(--silver) 0%, oklch(0.7 0.012 250) 100%);
    border-color: color-mix(in oklab, var(--silver) 60%, var(--border));
    color: oklch(0.22 0.01 250);
    box-shadow:
        0 0 0 2px color-mix(in oklab, var(--silver) 30%, transparent),
        0 0 22px -6px color-mix(in oklab, var(--silver) 60%, transparent),
        0 1px 0 oklch(1 0 0 / .35) inset;
}
.r3 {
    background:
        radial-gradient(60% 60% at 30% 30%, oklch(0.85 0.08 55) 0%, transparent 60%),
        linear-gradient(180deg, var(--bronze) 0%, oklch(0.5 0.11 45) 100%);
    border-color: color-mix(in oklab, var(--bronze) 60%, var(--border));
    color: oklch(0.95 0.03 60);
    box-shadow:
        0 0 0 2px color-mix(in oklab, var(--bronze) 28%, transparent),
        0 0 22px -6px color-mix(in oklab, var(--bronze) 60%, transparent),
        0 1px 0 oklch(1 0 0 / .25) inset;
}

.lbmain { flex:1; min-width:0; }
.lbtop { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.lbn { font-weight:700; font-size:.96em; min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.metag { font-size:.72em; color:var(--accent-hi); margin-left:5px; font-weight:600; }
.lbmeta { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:9px; }
.lbchip {
    background: var(--card2);
    border:1px solid var(--border);
    border-radius: var(--r-pill);
    color:var(--dim); font-size:.74em; line-height:1;
    padding:5px 9px; white-space:nowrap; font-weight:500;
}
.lbchip strong { color:var(--text); font-weight:700; }
.bar-wrap {
    width:100%; height:7px;
    background: var(--bg-deep);
    border-radius: 4px; overflow:hidden;
    border: 1px solid var(--border);
    box-shadow: 0 1px 1px oklch(0 0 0 / .25) inset;
}
.bar {
    height:100%; border-radius:3px;
    transition: width .4s cubic-bezier(.4,.6,.2,1);
    /* Beer-in-a-glass: foam top + amber body */
    background-image: linear-gradient(180deg, color-mix(in oklab, white 25%, transparent) 0%, transparent 35%);
    box-shadow: 0 0 8px -2px color-mix(in oklab, currentColor 50%, transparent);
}
.lbg { font-weight:800; font-size:.96em; min-width:60px; text-align:right; color:var(--accent-hi); letter-spacing:-.01em; }

/* ── LIVE BADGE ────────────────────────────────────────────────────────── */
.live-badge {
    display:inline-flex; align-items:center; gap:6px;
    background: color-mix(in oklab, var(--green) 18%, var(--card2));
    color: oklch(0.92 0.08 145);
    border:1px solid color-mix(in oklab, var(--green) 35%, var(--border));
    padding:4px 11px; border-radius: var(--r-pill);
    font-size:.74em; font-weight:700; letter-spacing:.2px;
    box-shadow: 0 0 14px -6px color-mix(in oklab, var(--green) 55%, transparent), 0 1px 0 oklch(1 0 0 / .08) inset;
}
.live-dot {
    width:7px; height:7px; border-radius:50%;
    background: var(--green);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 70%, transparent);
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 70%, transparent); opacity:1; }
    70%  { box-shadow: 0 0 0 7px color-mix(in oklab, var(--green) 0%, transparent); opacity:.85; }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 0%, transparent); opacity:1; }
}

@media (max-width: 520px) {
    .lb-tools { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .lbtop { flex-direction:column; gap:4px; }
    .lbg { text-align:left; }
    .feed-actions, .feed-comments, .feed-comment-form, .feed-disabled, .react-details { margin-left:0; }
}

/* ── ACHIEVEMENTS ──────────────────────────────────────────────────────── */
.ach-user-card {
    background:
        linear-gradient(180deg, oklch(1 0 0 / .025), transparent 40%),
        var(--card);
    border:1px solid var(--border);
    border-radius: var(--r);
    padding:18px;
    margin-bottom: 14px;
    box-shadow: var(--sh-2);
}
.ach-user-card.me {
    border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
    background:
        radial-gradient(100% 80% at 100% 0%, var(--accent-soft) 0%, transparent 50%),
        var(--card);
    box-shadow: var(--sh-2), 0 0 30px -14px color-mix(in oklab, var(--accent) 60%, transparent);
}
.ach-user-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ach-user-main { flex:1; min-width:0; }
.ach-user-name { font-weight:800; font-size:1.02em; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ach-user-meta { color:var(--dim); font-size:.82em; margin-top:3px; line-height:1.45; }

.streak-badge {
    border:1px solid var(--border);
    border-radius: var(--r-pill);
    padding:7px 12px;
    font-size:.78em; font-weight:700;
    white-space:nowrap;
    display:flex; align-items:center; gap:5px;
    background: var(--card2); color: var(--dim);
    transition: all .25s;
}
.streak-badge strong { font-variant-numeric: tabular-nums; }
.streak-badge.live {
    border-color: transparent;
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--accent) 22%, var(--card2)),
        color-mix(in oklab, var(--red) 18%, var(--card2)));
    color: var(--accent-hi);
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent),
        0 0 22px -6px color-mix(in oklab, var(--accent) 55%, transparent);
}
.streak-badge.live span { animation: emberFlicker 1.8s ease-in-out infinite; display:inline-block; }
@keyframes emberFlicker {
    0%, 100% { transform: translateY(0) rotate(-3deg); filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent) 70%, transparent)); }
    40%      { transform: translateY(-1px) rotate(2deg);  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--accent) 80%, transparent)); }
    70%      { transform: translateY(0) rotate(-1deg);    filter: drop-shadow(0 0 5px color-mix(in oklab, var(--red) 60%, transparent)); }
}
.streak-badge.dead { opacity:.7; filter: grayscale(.4); }

.ach-stat-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.ach-stat-row span {
    background: var(--card2);
    border:1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--dim);
    font-size:.76em; padding:5px 10px; font-weight:500;
}
.ach-stat-row strong { color: var(--text); font-weight:700; }

.ach-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.ach-badge {
    display:grid; grid-template-columns: 38px 1fr;
    gap:11px; align-items:flex-start;
    border:1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
    background:
        radial-gradient(80% 100% at 0% 0%, var(--accent-softer) 0%, transparent 55%),
        var(--card2);
    border-radius: 12px;
    padding: 12px;
    min-height: 92px;
    position: relative;
    transition: transform .15s, box-shadow .15s;
}
.ach-badge.unlocked {
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent),
        0 8px 22px -12px color-mix(in oklab, var(--accent) 50%, transparent);
}
.ach-badge.unlocked:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent), 0 10px 26px -10px color-mix(in oklab, var(--accent) 60%, transparent); }
.ach-badge.locked {
    border-color: var(--border);
    background: var(--card2);
    opacity: .58;
    filter: saturate(.4);
}
.ach-badge.locked .ach-icon { filter: grayscale(1) blur(.3px); }
.ach-icon {
    width:38px; height:38px;
    border-radius:10px;
    background:
        radial-gradient(80% 80% at 30% 30%, oklch(1 0 0 / .12), transparent 60%),
        color-mix(in oklab, var(--accent) 18%, var(--card3));
    border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
    display:flex; align-items:center; justify-content:center;
    font-size:1.25em; line-height:1;
    box-shadow: 0 1px 0 oklch(1 0 0 / .15) inset, 0 4px 10px -6px color-mix(in oklab, var(--accent) 50%, transparent);
}
.ach-name { font-weight:800; font-size:.88em; line-height:1.25; }
.ach-desc { color:var(--dim); font-size:.76em; line-height:1.4; margin-top:3px; }
.ach-progress { color:var(--accent-hi); font-size:.74em; font-weight:800; margin-top:7px; letter-spacing:.2px; }
.ach-share { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:.7em; margin-top:8px; }
.ach-share-bar {
    flex:1; height:5px;
    background: var(--bg-deep);
    border-radius: 4px; overflow:hidden;
    border:1px solid var(--border);
}
.ach-share-bar span {
    display:block; height:100%;
    background: linear-gradient(90deg, var(--accent-lo), var(--accent), var(--accent-hi));
    border-radius: 4px;
}

.profile-list { display:flex; flex-direction:column; gap:7px; }
.profile-row {
    width:100%;
    border:1px solid var(--border);
    background: var(--card2);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    display:flex; align-items:center; gap:11px;
    cursor:pointer; text-align:left;
    font-family:inherit;
    transition: border-color .15s, background .15s, transform .12s;
}
.profile-row:hover { border-color:var(--accent); background: var(--card3); }
.profile-row:active { transform: translateY(1px); }
.profile-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.profile-main strong { font-size:.92em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-main small { color:var(--dim); font-size:.78em; }
.profile-arrow { color:var(--accent-hi); font-size:1.25em; line-height:1; }

@media (max-width: 560px) {
    .ach-user-head { align-items:flex-start; }
    .streak-badge { align-self:flex-start; }
    .ach-grid { grid-template-columns:1fr; }
}

/* ── DRINK TYPES ───────────────────────────────────────────────────────── */
.dti { display:flex; align-items:center; padding:13px 0; border-bottom:1px solid var(--border); gap:12px; }
.dti:last-child { border-bottom:none; }
.dtinf { flex:1; min-width:0; }
.dtn { font-weight:600; color:var(--text); }
.dtm { font-size:.8em; color:var(--dim); margin-top:3px; }
.badge {
    display:inline-block; padding:3px 9px;
    border-radius: var(--r-pill);
    font-size:.72em; font-weight:700;
    background: var(--accent-softer);
    color: var(--accent-hi);
    border:1px solid color-mix(in oklab, var(--accent) 25%, var(--border));
    letter-spacing:.2px;
}

/* ── EVENTS ────────────────────────────────────────────────────────────── */
.event-row, .group-row { align-items:end; }
.event-row .fg, .group-row .fg { margin-bottom:0; }
.event-action, .group-action { width:auto; min-width:115px; padding:11px 16px; }
.event-card, .group-card { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); }
.event-card:last-child, .group-card:last-child { border-bottom:none; }
.event-card.active, .group-card.active {
    background:
        radial-gradient(60% 100% at 0% 50%, var(--accent-soft) 0%, transparent 60%),
        var(--accent-softer);
    margin:0 -8px; padding:13px 12px;
    border-radius:10px; border:1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
    border-bottom-color: color-mix(in oklab, var(--accent) 28%, var(--border));
}
.event-main, .group-main { flex:1; min-width:0; }
.event-name, .group-name { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-meta, .group-meta { color:var(--dim); font-size:.8em; margin-top:4px; }
.event-stats, .group-muted {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    color:var(--dim);
    font-size:.76em;
    margin-top:7px;
}
.event-stats span {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--card2);
    border:1px solid var(--border);
    border-radius:var(--r-pill);
    padding:4px 8px;
}
.event-stats strong { color:var(--text); }
.event-leader { color:var(--accent-hi); font-weight:700; }
.event-meta strong, .group-meta strong, #group-board-meta strong {
    color:var(--accent-hi); letter-spacing:.6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight:700;
    background: var(--card2);
    padding: 1px 6px; border-radius: 4px;
    border:1px solid var(--border);
}
.event-actions, .group-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.group-summary {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:12px 0 10px;
}
.group-stat {
    background:
        radial-gradient(140% 80% at 0% 0%, var(--accent-softer) 0%, transparent 55%),
        var(--card2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    min-width:0;
}
.group-stat .cv {
    font-size:1.45em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.group-leader-value { font-size:1.1em !important; }
.group-ranked { margin-top:10px; }
.group-filter-card { padding:14px 16px; }
.group-filter-field { margin-bottom:0; }
.group-tools-card { padding:10px; }
.group-tools-toggle {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card2);
    color:var(--text);
    cursor:pointer;
    font-family:inherit;
    font-weight:800;
    padding:11px 13px;
    text-align:left;
}
.group-tools-toggle:hover,
.group-tools-toggle[aria-expanded="true"] {
    border-color:var(--accent);
    background:var(--accent-softer);
}
.group-tools-toggle strong {
    color:var(--accent-hi);
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing:1px;
    line-height:1;
    padding-bottom:4px;
}
.group-tools-panel {
    display:none;
    flex-direction:column;
    gap:9px;
    margin-top:10px;
}
.group-tools-panel.open { display:flex; }
.group-tool-form input + .menu-inline { margin-top:7px; }
@media (max-width: 520px) {
    .scope-select:not(.menu-scope) { max-width:130px; }
    .event-row, .event-card, .group-row, .group-card { flex-direction:column; align-items:stretch; }
    .event-action, .event-actions .btn, .event-actions .icon-btn,
    .group-action, .group-actions .btn, .group-actions .icon-btn { width:100%; }
    .group-summary { grid-template-columns:1fr; }
}

/* ── ADMIN / 404 ───────────────────────────────────────────────────────── */
.admin-grid { margin-bottom:14px; }
.admin-section { margin-bottom:14px; }
.admin-list { display:flex; flex-direction:column; gap:0; }
.admin-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid var(--border);
}
.admin-row:last-child { border-bottom:none; }
.admin-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.admin-main strong, .admin-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main span { color:var(--text); font-size:.9em; }
.admin-main small, .admin-muted { color:var(--dim); font-size:.82em; line-height:1.5; }
.admin-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.not-found-card { text-align:center; padding:34px 22px; }
.not-found-code {
    color:var(--accent-hi);
    font-size:3.8em;
    line-height:1;
    font-weight:900;
    margin-bottom:8px;
    font-variant-numeric:tabular-nums;
}
.not-found-card p { color:var(--dim); margin:8px 0 18px; }

@media (max-width: 560px) {
    .admin-row { flex-direction:column; align-items:stretch; }
    .admin-actions, .admin-row .btn { width:100%; }
}

/* ── PREVIEW BOX ───────────────────────────────────────────────────────── */
.prev-box {
    background:
        radial-gradient(100% 100% at 0% 0%, var(--accent-softer) 0%, transparent 60%),
        var(--card2);
    border:1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:14px;
    font-size:.88em; color:var(--dim);
}
.prev-g {
    font-size: 2em; font-weight: 800;
    color: var(--accent-hi); display:block; margin-top:4px;
    letter-spacing:-.01em;
    text-shadow: 0 0 18px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* ── EMPTY / LOADING ───────────────────────────────────────────────────── */
.empty {
    text-align:center; color:var(--dim);
    padding:40px 20px; font-size:.93em; line-height:1.7;
}
.empty::before {
    content: "🍺"; display:block; font-size:2.4em; margin-bottom:8px;
    filter: drop-shadow(0 6px 18px color-mix(in oklab, var(--accent) 45%, transparent));
    opacity:.85;
}
.empty strong { color: var(--text); }
.vload { text-align:center; padding:40px 20px; color:var(--dim); font-size:.88em; }
.vload .spinner { margin:0 auto 14px; width:28px; height:28px; border-width:2px; }

/* ── TOAST ─────────────────────────────────────────────────────────────── */
.toast {
    position:fixed; bottom:96px; left:50%; transform:translateX(-50%);
    padding:11px 20px; border-radius: var(--r-pill);
    font-weight:600; font-size:.92em;
    z-index:400; white-space:nowrap;
    animation: ta 2.8s forwards;
    pointer-events:none;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        0 1px 0 oklch(1 0 0 / .25) inset,
        0 18px 38px -14px oklch(0 0 0 / .65);
}
.toast.ok {
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--green) 78%, var(--card)),
        color-mix(in oklab, var(--green) 55%, var(--card)));
    color:#fff;
    border:1px solid color-mix(in oklab, var(--green) 45%, transparent);
}
.toast.err {
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--red) 80%, var(--card)),
        color-mix(in oklab, var(--red) 55%, var(--card)));
    color:#fff;
    border:1px solid color-mix(in oklab, var(--red) 45%, transparent);
}
@keyframes ta {
    0%   { opacity:0; transform: translateX(-50%) translateY(14px) scale(.96); }
    10%  { opacity:1; transform: translateX(-50%) translateY(0)   scale(1);    }
    80%  { opacity:1; transform: translateX(-50%) translateY(0)   scale(1);    }
    100% { opacity:0; transform: translateX(-50%) translateY(6px) scale(.98);  }
}

/* ── MISC ──────────────────────────────────────────────────────────────── */
.row { display:flex; gap:10px; }
.row > * { flex:1; }

hr { border:none; border-top:1px solid var(--border); margin: 14px 0; }

/* ── REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .live-dot { animation: none; }
    .streak-badge.live span { animation: none; }
    .spinner { animation: spin 1.4s linear infinite; }
}