/* ============================================================
   Riwius Inventar – "Coupon Vault"
   Signature: rarity-farbige Ticket-Karten mit Perforations-Spine
   ============================================================ */

:root {
    --vault:      #14131c;
    --vault-2:    #1b1a26;
    --vault-3:    #232234;
    --ink:        #ecEAF4;
    --muted:      #9b97ad;
    --line:       rgba(255, 255, 255, .08);
    --line-2:     rgba(255, 255, 255, .14);
    --amber:      #f4b740;
    --warn:       #f5a04a;
    --twitch:     #9146ff;
    --twitch-700: #772ce8;

    --r-common:    #8b93a7;
    --r-uncommon:  #4ade80;
    --r-rare:      #4aa3ff;
    --r-epic:      #b06cff;
    --r-legendary: #f4b740;

    --radius: 14px;
    --maxw: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(145, 70, 255, .12), transparent 60%),
        radial-gradient(900px 500px at 0% 0%, rgba(244, 183, 64, .06), transparent 55%),
        var(--vault);
    color: var(--ink);
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

em { font-style: normal; color: var(--amber); }

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--line);
    background: rgba(20, 19, 28, .7);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-left { display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .65rem; }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 40px;
    padding: 0 .55rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--amber), #e0962a);
    color: #1a1407;
    font-family: "Syne", sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: .02em;
    box-shadow: 0 4px 18px rgba(244, 183, 64, .25);
}

.brand-text {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .01em;
}

/* Topbar bleibt IMMER einzeilig. Reicht der Platz für die horizontale Navigation
   nicht, setzt JS die Klasse .is-collapsed und alles wandert ins Burgermenü. */
.topbar { flex-wrap: nowrap; }
.brand { min-width: 0; flex: 0 0 auto; }
.topbar-nav { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; margin-left: 1.25rem; }
.nav-group { display: flex; align-items: center; gap: .75rem; flex-wrap: nowrap; }
.nav-primary { justify-content: flex-start; }
.nav-secondary { margin-left: auto; justify-content: flex-end; }

/* Hamburger */
.nav-toggle {
    display: none; margin-left: auto;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 40px; padding: 0 11px; flex: 0 0 auto;
    background: var(--vault-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Eingeklappt (per JS gesetzt, sobald der Platz nicht reicht): Burgermenü als Dropdown. */
.topbar.is-collapsed .nav-toggle { display: inline-flex; }
.topbar.is-collapsed .topbar-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: .25rem clamp(1rem, 4vw, 2.5rem) 1rem;
    background: var(--vault-2); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .55);
    max-height: calc(100dvh - 64px); overflow-y: auto;
}
.topbar.is-collapsed .topbar-nav.open { display: flex; }
.topbar.is-collapsed .nav-group { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
.topbar.is-collapsed .nav-secondary { margin-left: 0; }
.topbar.is-collapsed .navlink { padding: .8rem .1rem; border-bottom: 1px solid var(--line); }
.topbar.is-collapsed .user-chip { margin-top: .7rem; align-self: flex-start; }
.topbar.is-collapsed .inline-form { margin-top: .7rem; }
.topbar.is-collapsed .inline-form .btn { width: 100%; }

.navlink { color: var(--muted); font-weight: 500; }
.navlink:hover { color: var(--ink); }
.navlink-admin { color: var(--amber); }
.navlink-admin:hover { color: color-mix(in srgb, var(--amber) 80%, white); }

/* Aktives Giveaway: Nav-Punkt leuchtet in Amber immer wieder auf */
/* Live-Reiter (Giveaway, Clip-Battle, Live-Route): amber mit sanftem Leuchten. */
.navlink-live { color: var(--amber); animation: navPulse 1.7s ease-in-out infinite; }
.navlink-live:hover { color: color-mix(in srgb, var(--amber) 80%, white); }
/* „Jetzt passiert etwas" (z. B. laufendes Clip-Battle-Voting): gleiche Farbe, kräftiger. */
.navlink-live.is-hot { animation: navPulseHot .9s ease-in-out infinite; }
@keyframes navPulseHot {
    0%, 100% { color: var(--amber); text-shadow: 0 0 6px rgba(244, 183, 64, .5); }
    50%      { color: #fff; text-shadow: 0 0 16px rgba(244, 183, 64, 1); }
}
@keyframes navPulse {
    0%, 100% { color: color-mix(in srgb, var(--amber) 55%, var(--muted)); text-shadow: none; }
    50%      { color: var(--amber); text-shadow: 0 0 12px rgba(244, 183, 64, .75); }
}

.inline-form { margin: 0; }

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .6rem .3rem .35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--vault-2);
}

.user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.user-name { font-weight: 600; font-size: .92rem; }

/* ---------- Buttons ---------- */
.btn {
    --bg: var(--vault-3);
    appearance: none;
    border: 1px solid var(--line-2);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    padding: .6rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .08s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-ghost:hover { color: var(--ink); border-color: var(--line-2); }

.btn-twitch {
    background: var(--twitch);
    border-color: var(--twitch);
    color: #fff;
}
.btn-twitch:hover { background: var(--twitch-700); border-color: var(--twitch-700); }

.btn-lg { padding: .85rem 1.5rem; font-size: 1.05rem; border-radius: 12px; }

/* ---------- Layout ---------- */
.page {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
    flex: 1 0 auto;
    min-width: 0;
}
/* Ausnahme-Seiten mit breiten Tabellen (z. B. Gegenstände verwalten). */
.page--wide { max-width: min(1500px, 96vw); }

/* Mobil-Sicherheitsnetze: nichts läuft horizontal über den Rand hinaus. */
img, video, iframe { max-width: 100%; }
.page :where(table) { max-width: 100%; }

/* ---------- Barrierefreiheit ---------- */
/* „Zum Inhalt springen" – nur bei Tastatur-Fokus sichtbar (WCAG 2.4.1) */
.skip-link {
    position: absolute; left: .5rem; top: -4rem; z-index: 100;
    background: var(--amber); color: #14140f; font-weight: 700;
    padding: .6rem 1rem; border-radius: 0 0 10px 10px; text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus { top: 0; }
main:focus { outline: none; }   /* Skip-Ziel bekommt keinen sichtbaren Kasten */

/* Sichtbarer Tastatur-Fokus auf ALLEN interaktiven Elementen (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 3px;
}

/* Nur für Screenreader (visuell verborgen, aber vorlesbar) */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
    padding: 1.25rem;
    display: flex;
    flex-flow: row wrap;
    gap: .4rem 1.2rem;
    align-items: center;
    justify-content: center;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.7;
}
.legal h1 {
    font-family: "Syne", sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    margin: 0 0 1.5rem;
}
.legal h2 {
    font-family: "Syne", sans-serif;
    font-size: 1.15rem;
    margin: 2rem 0 .5rem;
    color: var(--ink);
}
.legal p, .legal ul { color: var(--muted); margin: .5rem 0; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .25rem 0; }
.legal a { color: var(--amber); word-break: break-word; }
.legal code {
    background: var(--vault-3);
    border-radius: 5px;
    padding: .05rem .35rem;
    font-size: .9em;
}

/* ---------- Hero / Landing ---------- */
.hero { max-width: 720px; padding: clamp(1rem, 5vw, 3rem) 0; }

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    color: var(--amber);
    margin: 0 0 1rem;
}

.hero-title {
    font-family: "Syne", sans-serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    line-height: 1.02;
    margin: 0 0 1.2rem;
    letter-spacing: -.01em;
}

.hero-lead { color: var(--muted); font-size: 1.1rem; max-width: 56ch; margin: 0 0 2rem; }

.hero-points {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    display: grid;
    gap: .75rem;
    max-width: 60ch;
}
.hero-points li {
    padding-left: 1.4rem;
    position: relative;
    color: var(--muted);
}
.hero-points li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: .55rem; height: .55rem;
    border-radius: 2px;
    background: var(--amber);
    transform: rotate(45deg);
}
.hero-points strong { color: var(--ink); }

/* ---------- Dashboard (Home) ---------- */
.dash-head { margin-bottom: 1.75rem; }

/* Minimale Goalbar oben im Dashboard */
.dash-goal {
    display: block;
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    color: var(--ink);
    transition: border-color .15s ease;
}
.dash-goal:hover { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.dash-goal-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}
.dash-goal-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-goal-pct { font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dash-goal-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    overflow: hidden;
}
.dash-goal-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 70%, #e0962a), var(--amber));
    transition: width 500ms ease;
}
.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;              /* alle Kacheln gleich hoch, auch in der 2. Reihe */
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 900px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    color: var(--ink);
    min-height: 92px;
    transition: border-color .15s ease, transform .12s ease;
}
a.dash-tile:hover { border-color: color-mix(in srgb, var(--amber) 40%, transparent); transform: translateY(-2px); }

.dash-icon {
    font-size: 1.6rem;
    width: 48px; height: 48px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--vault);
    border: 1px solid var(--line);
}
.dash-tile-body { flex: 1; min-width: 0; }
.dash-tile-title { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1.1rem; margin: 0; }
.dash-tile-sub { color: var(--muted); margin: .15rem 0 0; font-size: .9rem; }
.dash-arrow { color: var(--muted); font-size: 1.2rem; flex-shrink: 0; }
a.dash-tile:hover .dash-arrow { color: var(--amber); }

/* Leaderboard-Kachel: zwei Platzierungen untereinander */
.dash-tile--wide { flex-direction: column; align-items: stretch; gap: .6rem; }
.dash-tile-head { display: flex; align-items: center; gap: 1rem; }
.dash-rank {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem .7rem;
    border-radius: 10px;
    background: var(--vault);
    border: 1px solid var(--line);
    color: var(--ink);
    transition: border-color .15s ease;
}
a.dash-rank:hover { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.dash-rank--static { cursor: default; }
.dash-rank-label { color: var(--muted); font-size: .9rem; }
.dash-rank-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Kombinierte Statistik-/Ranking-Kachel: eigene volle Breite (wie die Goalbar). */
.dash-tile--stats { margin-top: 1rem; }
.dash-ranks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;   /* alle Kacheln gleich hoch */
    gap: .5rem;
}
.dash-ranks .dash-rank { height: 100%; }
.dash-ranks > .gw-empty { grid-column: 1 / -1; }
@media (max-width: 820px) {
    .dash-ranks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .dash-ranks { grid-template-columns: 1fr; }
}

/* Zeitfilter in der Statistik-Kachel */
.dash-tile--stats .dash-tile-head { flex-wrap: wrap; }
.dash-periods {
    margin-left: auto;
    display: inline-flex;
    gap: .15rem;
    padding: .2rem;
    background: var(--vault);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.dash-period {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: .76rem;
    font-weight: 600;
    padding: .25rem .7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.dash-period:hover { color: var(--ink); }
.dash-period.is-active { background: var(--amber); color: #1a1407; }
.dash-period:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Giveaway-Kachel-Akzent (nur sichtbar, wenn aktiv) */
.dash-tile--giveaway { border-color: color-mix(in srgb, var(--twitch) 40%, transparent); }
.dash-tile--giveaway .dash-icon { border-color: color-mix(in srgb, var(--twitch) 40%, transparent); }

/* "bald verfügbar"-Kachel */
.dash-tile.is-soon { opacity: .55; }
.dash-badge {
    flex-shrink: 0;
    font-size: .7rem; font-weight: 700;
    color: var(--muted);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: .1rem .5rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---------- Inventar Kopf ---------- */
.inv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.inv-title {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    margin: 0;
}
.inv-sub { color: var(--muted); margin: .25rem 0 0; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--vault-2);
    font-size: .9rem;
    color: var(--muted);
}
.status-pill strong { color: var(--ink); text-transform: capitalize; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.status-pill.is-online .status-dot {
    background: var(--r-uncommon);
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .18);
}
.status-pill.is-offline .status-dot { background: #ef5e6e; }

/* ---------- Empty ---------- */
.empty {
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--ink);
}
.empty-hint { color: var(--muted); margin-top: .25rem; }

/* ---------- Rarity-Block ---------- */
.rarity-block { margin-bottom: 2.5rem; }

.rarity-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.rarity-name {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
}
.rarity-line { flex: 1; height: 1px; background: var(--line); }
.rarity-count {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .1rem .6rem;
}

/* Rarity-Akzent je Block */
.rarity-block[data-rarity="common"]    { --rc: var(--r-common); }
.rarity-block[data-rarity="uncommon"]  { --rc: var(--r-uncommon); }
.rarity-block[data-rarity="rare"]      { --rc: var(--r-rare); }
.rarity-block[data-rarity="epic"]      { --rc: var(--r-epic); }
.rarity-block[data-rarity="legendary"] { --rc: var(--r-legendary); }
.rarity-block[data-rarity] .rarity-name { color: var(--rc); }

/* ---------- Ticket-Grid ---------- */
.ticket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1rem;
}

.ticket {
    --rc: var(--r-common);
    position: relative;
    display: grid;
    grid-template-columns: 14px 84px 1fr;
    grid-template-areas: "spine thumb body" "spine thumb action";
    gap: 0 1rem;
    align-items: start;
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1rem 1rem 0;
    overflow: hidden;
    transition: border-color .15s ease, transform .12s ease;
}
.ticket:hover { border-color: color-mix(in srgb, var(--rc) 45%, transparent); transform: translateY(-2px); }

.ticket[data-rarity="common"]    { --rc: var(--r-common); }
.ticket[data-rarity="uncommon"]  { --rc: var(--r-uncommon); }
.ticket[data-rarity="rare"]      { --rc: var(--r-rare); }
.ticket[data-rarity="epic"]      { --rc: var(--r-epic); }
.ticket[data-rarity="legendary"] { --rc: var(--r-legendary); }

/* Perforierter Rarity-Spine als Signature */
.ticket-spine {
    grid-area: spine;
    align-self: stretch;
    background:
        radial-gradient(circle at 7px 0, transparent 4px, var(--rc) 4px) 0 0 / 14px 16px repeat-y;
    opacity: .9;
}

.ticket-thumb {
    grid-area: thumb;
    position: relative;
    width: 84px; height: 84px;
    border-radius: 10px;
    overflow: hidden;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px),
        color-mix(in srgb, var(--rc) 16%, var(--vault));
    display: grid; place-items: center;
    border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
}
.ticket-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-fallback {
    font-family: "Syne", sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    color: color-mix(in srgb, var(--rc) 75%, white);
}
.ticket-amount {
    position: absolute;
    bottom: 4px; right: 4px;
    background: rgba(10, 9, 15, .82);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.ticket-body { grid-area: body; min-width: 0; }
.ticket-name {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    margin: 0 0 .25rem;
}
.ticket-desc {
    color: var(--muted);
    font-size: .88rem;
    margin: 0 0 .6rem;
}

.ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.tag {
    font-size: .72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--rc) 70%, white);
    background: color-mix(in srgb, var(--rc) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
    border-radius: 6px;
    padding: .08rem .4rem;
}
.expires { font-size: .76rem; color: var(--muted); margin-left: auto; }

/* Hervorhebung für Items mit <= 7 Tagen Restlaufzeit */
.expires.is-expiring { color: var(--warn); font-weight: 600; }
.expires.is-expiring::before { content: "⏳ "; }
.ticket.is-expiring {
    border-color: rgba(245, 160, 74, .55);
    box-shadow: 0 0 0 1px rgba(245, 160, 74, .22), 0 10px 26px rgba(0, 0, 0, .25);
}
.ticket.is-expiring:hover { border-color: rgba(245, 160, 74, .8); }

.ticket-action { grid-area: action; margin-top: .8rem; }
.btn-use {
    width: 100%;
    background: color-mix(in srgb, var(--rc) 22%, var(--vault-3));
    border-color: color-mix(in srgb, var(--rc) 45%, transparent);
    color: #fff;
}
.btn-use:hover { background: color-mix(in srgb, var(--rc) 34%, var(--vault-3)); }
.btn-use:disabled {
    cursor: not-allowed;
    opacity: .45;
    transform: none;
    color: var(--muted);
    background: var(--vault-3);
    border-color: var(--line);
}
/* Exklusiv-Gruppe gesperrt: Cooldown-Button (läuft sichtbar runter). */
.btn-use.is-cooldown:disabled {
    opacity: 1;
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 14%, var(--vault-3));
    border-color: color-mix(in srgb, var(--amber) 40%, transparent);
    cursor: progress;
    font-variant-numeric: tabular-nums;
}

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(200%);
    background: var(--vault-3);
    color: var(--ink);
    border: 1px solid var(--line-2);
    border-left: 4px solid var(--amber);
    padding: .8rem 1.1rem;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    max-width: 90vw;
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    z-index: 50;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { border-left-color: #ef5e6e; }
.toast.success { border-left-color: var(--r-uncommon); }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
    .ticket {
        grid-template-columns: 10px 64px 1fr;
        gap: 0 .75rem;
    }
    .ticket-thumb { width: 64px; height: 64px; }
    .expires { margin-left: 0; width: 100%; }
}

/* ============================================================
   Giveaway
   ============================================================ */
:root { --gw-row-h: 44px; }

.gw-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}
.gw-main { display: grid; gap: 1.25rem; min-width: 0; }
.gw-side { display: grid; gap: 1rem; position: sticky; top: 88px; }

/* ---------- Gewinn-Karte ---------- */
.gw-prize-card {
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem 1.25rem;
    position: relative;
    overflow: hidden;
}
.gw-prize-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--amber), #e0962a);
}
.gw-prize-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.gw-prize-label {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    color: var(--amber);
}
.gw-drawtime { color: var(--muted); font-size: .9rem; }
.gw-drawtime strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.gw-prize {
    font-weight: 700;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    margin-top: .4rem;
    line-height: 1.25;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* ---------- Ziehungs-Bühne ---------- */
.gw-stage {
    background: radial-gradient(700px 260px at 30% -20%, rgba(145,70,255,.14), transparent 60%), var(--vault-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem 1.35rem;
    position: relative;
    overflow: hidden;
}
.gw-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.gw-stage-label {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .74rem;
    color: var(--muted);
}
.gw-countdown {
    font-family: "Syne", sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
    min-width: 1.6ch;
    text-align: right;
}

.gw-slot {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.22);
    overflow: hidden;
}
.gw-slot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to bottom, var(--vault-2), transparent 30%),
        linear-gradient(to top, var(--vault-2), transparent 30%);
}
.gw-slot::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(50% - var(--gw-row-h) / 2);
    height: var(--gw-row-h);
    z-index: 1;
    border-top: 1px solid rgba(244,183,64,.35);
    border-bottom: 1px solid rgba(244,183,64,.35);
    background: rgba(244,183,64,.06);
    pointer-events: none;
}
.gw-slot-viewport {
    height: calc(var(--gw-row-h) * 5);
    overflow: hidden;
    display: grid;
    align-content: start;
}
.gw-track { will-change: transform; }
.gw-name-row {
    height: var(--gw-row-h);
    line-height: var(--gw-row-h);
    text-align: center;
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: rgba(236,234,244,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 1rem;
    transition: color .12s ease, transform .12s ease;
}
.gw-name-row.active {
    color: var(--ink);
    transform: scale(1.04);
}

/* Konfetti-Overlay bei gezogenem Gewinner */
.gw-confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.gw-winner-box { margin-top: 1rem; }
.gw-winner-label {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    color: var(--muted);
}
.gw-winner {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    margin: .1rem 0 .75rem;
    color: var(--ink);
}
.gw-timer-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: .35rem;
}
.gw-timer-top span:first-child { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.gw-timer-bar-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--line);
    overflow: hidden;
}
.gw-timer-bar { height: 100%; width: 100%; background: var(--r-uncommon); transition: width .12s linear; }
.gw-timer-bar.warn { background: var(--warn); }
.gw-timer-bar.danger { background: #ef5e6e; }

.gw-confirm {
    margin-top: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(74,222,128,.35);
    background: rgba(74,222,128,.10);
    padding: 1.1rem 1.25rem;
    text-align: center;
}
.gw-confirm-badge {
    display: inline-block;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(74,222,128,.2);
    border: 1px solid rgba(74,222,128,.45);
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: .5rem;
}
.gw-confirm-winner {
    font-family: "Syne", sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    line-height: 1.1;
}
.gw-confirm-sub { color: var(--muted); margin-top: .25rem; }

/* ---------- Teilnehmerliste ---------- */
.gw-part-list {
    display: grid;
    gap: .3rem;
    max-height: 460px;
    overflow-y: auto;
}
.gw-part-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .7rem;
    border-radius: 10px;
    background: var(--vault-2);
    border: 1px solid var(--line);
}
.gw-part-row:nth-child(even) { background: var(--vault-3); }
.gw-part-rank {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    min-width: 2ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.gw-part-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gw-part-chance {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 700;
    padding: .12rem .5rem;
    border-radius: 999px;
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gw-ticket-badge {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 700;
    padding: .12rem .5rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--twitch) 40%, white);
    background: color-mix(in srgb, var(--twitch) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--twitch) 35%, transparent);
    font-variant-numeric: tabular-nums;
}
.gw-empty {
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    color: var(--muted);
}

/* ---------- Meine Tickets + Beitritt ---------- */
.gw-mine {
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    display: grid;
    gap: .6rem;
}
.gw-mine-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.gw-mine-label { color: var(--muted); font-size: .9rem; }
.gw-mine-value {
    font-family: "Syne", sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}
.gw-mine-row + .gw-mine-row .gw-mine-value { color: var(--ink); }

.gw-join {
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    display: grid;
    gap: .7rem;
}
.btn-join {
    background: var(--twitch);
    border-color: var(--twitch);
    color: #fff;
    width: 100%;
}
.btn-join:hover { background: var(--twitch-700); border-color: var(--twitch-700); }
.gw-join-extra { display: flex; gap: .5rem; }
.gw-extra-input {
    width: 5rem;
    flex-shrink: 0;
    background: var(--vault-3);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    padding: .55rem .6rem;
    text-align: center;
}
.btn-join-extra {
    flex: 1;
    background: color-mix(in srgb, var(--amber) 22%, var(--vault-3));
    border-color: color-mix(in srgb, var(--amber) 45%, transparent);
    color: var(--ink);
}
.btn-join-extra:hover { background: color-mix(in srgb, var(--amber) 34%, var(--vault-3)); }
.btn-join:disabled, .btn-join-extra:disabled, .gw-extra-input:disabled {
    cursor: not-allowed;
    opacity: .45;
    transform: none;
}
.gw-join-hint { color: var(--muted); font-size: .82rem; margin: 0; }
.gw-join-terms { margin: 0; font-size: .78rem; }
.gw-join-terms a { color: var(--muted); text-decoration: underline; }
.gw-join-terms a:hover { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .gw-grid { grid-template-columns: 1fr; }
    .gw-side { position: static; }
}

/* ============================================================
   Rangliste (Leaderboard)
   ============================================================ */
.lb-me {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--vault-2);
    font-size: .9rem;
    color: var(--muted);
}
.lb-me.is-ranked {
    border-color: color-mix(in srgb, var(--amber) 45%, transparent);
    background: color-mix(in srgb, var(--amber) 12%, var(--vault-2));
}
.lb-me-label { color: var(--muted); }
.lb-me-rank {
    font-family: "Syne", sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}
.lb-me-amount { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tabs */
.lb-tabs {
    display: flex;
    gap: .4rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: .1rem;
    flex-wrap: wrap;
}
.lb-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    padding: .55rem .9rem;
    margin-bottom: -1px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lb-tab:hover { color: var(--ink); background: var(--vault-2); }
.lb-tab.is-active { color: var(--ink); border-bottom-color: var(--amber); }
.lb-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Zeitfilter (Total / Jahr / Monat) */
.lb-periods {
    display: inline-flex;
    gap: .2rem;
    margin-bottom: 1rem;
    padding: .25rem;
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.lb-period {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    font-size: .85rem;
    padding: .35rem .95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lb-period:hover { color: var(--ink); }
.lb-period.is-active { background: var(--amber); color: #1a1407; }
.lb-period:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Suchleiste */
.lb-search { margin-bottom: 1rem; }
.lb-search input {
    width: 100%;
    max-width: 360px;
    background: var(--vault-2);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font: inherit;
    padding: .55rem .85rem;
    border-radius: 10px;
}
.lb-search input::placeholder { color: var(--muted); }
.lb-search input:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
    border-color: var(--amber);
}

/* Steuerzeile: Suche + Sortierung (einheitlich wie bei den Clips) */
.lb-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .6rem;
    margin-bottom: 1rem;
}
.lb-controls > * { height: 2.7rem; }
.lb-search-box { flex: 1 1 220px; min-width: 180px; }
.lb-search-box input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    font: inherit;
    padding: 0 .95rem;
}
.lb-search-box input::placeholder { color: var(--muted); }
.lb-search-box input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-color: var(--amber); }

.lb-award-note {
    margin: 0 0 1rem; padding: .6rem .9rem; border-radius: 10px;
    background: color-mix(in srgb, var(--amber) 8%, var(--vault-2));
    border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line));
    color: var(--muted); font-size: .88rem;
}
.lb-award-note strong { color: var(--ink); }
.lb-list { display: grid; gap: .4rem; }

.lb-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .65rem .9rem;
    border-radius: 12px;
    background: var(--vault-2);
    border: 1px solid var(--line);
}
.lb-row:nth-child(even) { background: var(--vault-3); }

.lb-rank {
    min-width: 2.4ch;
    text-align: right;
    font-family: "Syne", sans-serif;
    font-weight: 800;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
/* Podium-Akzente für die Top 3 */
.lb-row[data-rank="1"] .lb-rank { color: var(--r-legendary); }
.lb-row[data-rank="2"] .lb-rank { color: #cbd2dd; }
.lb-row[data-rank="3"] .lb-rank { color: #d08b52; }

.lb-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-amount {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
/* Watchstreak: "Geteilt am"-Datum zwischen Name und Wert */
.lb-shared {
    flex-shrink: 0;
    color: var(--muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 480px) { .lb-shared { display: none; } }

/* Eigene Platzierung hervorheben */
.lb-row.is-me {
    border-color: color-mix(in srgb, var(--amber) 55%, transparent);
    background: color-mix(in srgb, var(--amber) 14%, var(--vault-3));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent);
}
.lb-row.is-me .lb-name::after,
.lb-item.is-me .lb-name::after {
    content: "Du";
    margin-left: .5rem;
    font-size: .7rem;
    font-weight: 700;
    color: #1a1407;
    background: var(--amber);
    border-radius: 999px;
    padding: .05rem .45rem;
    vertical-align: middle;
}

/* Clip-Score: aufklappbare Zeile mit Punkte-Aufschlüsselung */
.lb-item {
    border-radius: 12px;
    background: var(--vault-2);
    border: 1px solid transparent;
    overflow: hidden;
}
.lb-list > .lb-item:nth-child(even) { background: var(--vault-3); }
.lb-item .lb-row--clip {
    background: transparent;
    list-style: none;
    cursor: pointer;
    width: 100%;
}
.lb-item .lb-row--clip::-webkit-details-marker { display: none; }
.lb-caret {
    flex-shrink: 0;
    color: var(--muted);
    font-size: .8rem;
    transition: transform .15s ease;
}
.lb-item[open] > .lb-row--clip .lb-caret { transform: rotate(180deg); }
.lb-item.is-me {
    border-color: color-mix(in srgb, var(--amber) 55%, transparent);
    background: color-mix(in srgb, var(--amber) 14%, var(--vault-3));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent);
}
.lb-break {
    padding: .2rem .9rem .75rem;
    display: grid;
    gap: .3rem;
}
.lb-break-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9rem;
    color: var(--muted);
    padding: .1rem 0;
}
.lb-break-v { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.lb-break-total {
    margin-top: .2rem;
    padding-top: .4rem;
    border-top: 1px solid var(--line);
    font-weight: 700;
    color: var(--ink);
}
.lb-break-total .lb-break-v { color: var(--amber); }

/* Info-Box: Punktevergabe (Leaderboard-Clips + Meine Clips) */
.score-info {
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
}
.score-info-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-family: "Syne", sans-serif;
    margin-bottom: .7rem;
}
.score-info-icon { font-size: 1.2rem; }

/* Eigene Clip-Punkte + Platzierung, direkt im Info-Box-Kopf (Meine Clips) */
.score-mine {
    margin-left: auto;
    display: flex;
    gap: .5rem;
}
.score-mystat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: .3rem .75rem;
    border-radius: 12px;
    background: var(--vault);
    border: 1px solid var(--line);
    text-decoration: none;
}
.score-mystat.is-link { transition: border-color .15s ease; }
.score-mystat.is-link:hover { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.score-mystat-label {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}
.score-mystat-val {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.score-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.score-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: var(--vault);
    border: 1px solid var(--line);
    font-size: .85rem;
    color: var(--muted);
}
.score-chip b { color: var(--amber); font-weight: 700; }
.score-info-note {
    margin: .7rem 0 0;
    font-size: .82rem;
    color: var(--muted);
}
.score-info-note a { color: var(--amber); }

/* ---------- Clips ---------- */
.clip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.1rem;
}
.clip-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s ease, transform .12s ease;
}
.clip-card:hover { border-color: color-mix(in srgb, var(--amber) 35%, transparent); transform: translateY(-2px); }

.clip-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}
.clip-media img,
.clip-media iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
.clip-media img { object-fit: cover; }
.clip-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: #fff;
    background: rgba(0, 0, 0, .28);
    transition: background .15s ease;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.clip-media:hover .clip-play { background: rgba(0, 0, 0, .12); }
.clip-media[data-playing] .clip-play,
.clip-media[data-playing] .clip-duration { display: none; }
.clip-duration {
    position: absolute;
    bottom: 6px; right: 6px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.clip-body { padding: .7rem .85rem .85rem; }
.clip-title {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    margin: 0 0 .4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .55rem;
    color: var(--muted);
    font-size: .82rem;
}
.clip-meta .clip-creator { color: var(--ink); font-weight: 600; }
.clip-noresults { color: var(--muted); }

/* Filterleiste – modern, einheitliche Höhe & Optik */
.clip-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .6rem;
    margin-bottom: 1.5rem;
}
.clip-filters > * { height: 2.7rem; }

.clip-search-wrap { flex: 1 1 220px; min-width: 180px; }
.clip-search-wrap input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    font: inherit;
    padding: 0 .95rem;
}
.clip-search-wrap input::placeholder { color: var(--muted); }
.clip-search-wrap input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-color: var(--amber); }

/* Zeitraum als ein kompakter Block */
.clip-daterange {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    box-sizing: border-box;
    padding: 0 .85rem;
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.clip-range-label { color: var(--muted); font-size: .8rem; }
.clip-daterange input[type="date"] {
    background: transparent;
    border: 0;
    color: var(--ink);
    font: inherit;
    color-scheme: dark;
    padding: 0;
}
.clip-daterange input[type="date"]:focus-visible { outline: none; }

/* Hervorgehoben als Toggle-Chip */
.clip-chip {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 1rem;
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.clip-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.clip-chip:hover { color: var(--ink); }
.clip-chip:has(input:checked) {
    background: color-mix(in srgb, var(--amber) 20%, var(--vault-2));
    border-color: color-mix(in srgb, var(--amber) 55%, transparent);
    color: var(--ink);
}
.clip-chip:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Sortier-Dropdown */
.clip-select {
    box-sizing: border-box;
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    font: inherit;
    padding: 0 .95rem;
    cursor: pointer;
    color-scheme: dark;
}
.clip-select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-color: var(--amber); }
.clip-star {
    position: absolute;
    top: 6px; left: 6px;
    z-index: 2;
    color: var(--amber);
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

/* ---------- Clip-Battle (öffentlich) ---------- */
.cb-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    margin-bottom: 1.1rem;
}
.cb-badge {
    font-weight: 700;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--vault-3);
    border: 1px solid var(--line-2);
}
.cb-badge.is-live { color: #ef5e6e; border-color: rgba(239,94,110,.5); animation: navPulse 1.4s ease-in-out infinite; }
.cb-badge.is-win { color: var(--r-uncommon); border-color: color-mix(in srgb, var(--r-uncommon) 45%, transparent); }
.cb-hint { color: var(--muted); }
.cb-timer {
    margin-left: auto;
    font-family: "Syne", sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}

.cb-clips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.cb-clip {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cb-clip.is-winner {
    border-color: color-mix(in srgb, var(--r-uncommon) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--r-uncommon) 40%, transparent), 0 10px 30px rgba(0,0,0,.3);
}
.cb-clip.is-highlight {
    border-color: color-mix(in srgb, var(--amber) 70%, transparent);
    box-shadow: 0 0 0 1px var(--amber), 0 0 26px color-mix(in srgb, var(--amber) 45%, transparent);
}
.cb-hl-badge {
    position: absolute; top: .5rem; right: .5rem; z-index: 3; font-size: 1.25rem; line-height: 1;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--amber) 70%, transparent));
}
.cb-num {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: rgba(10,9,15,.85);
    color: #fff;
    font-family: "Syne", sans-serif;
    font-weight: 800;
}
.cb-clip-body { padding: .7rem .85rem .85rem; }
.cb-vote { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; }
.cb-vote-track { flex: 1; height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.cb-vote-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb,var(--amber) 70%,#e0962a), var(--amber)); transition: width .4s ease; }
.cb-vote-num { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

/* Turnierbaum */
.cb-bracket { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.cb-bracket-title { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1.1rem; margin: 0 0 .8rem; }
.cb-round { margin-bottom: 1.4rem; }
.cb-round-name {
    text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
    color: var(--amber); font-weight: 700; margin-bottom: .6rem;
}
/* Paarungen untereinander gestapelt – volle Breite (wie die Clips darüber) */
.cb-round-matches { display: grid; gap: .6rem; }
.cb-bm {
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .5rem .7rem .65rem;
}
.cb-bm-no {
    display: block;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); margin-bottom: .4rem;
}
.cb-bm-vs { display: flex; align-items: center; gap: .7rem; }
.cb-bm-clip {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: .1rem;
    padding: .45rem .6rem;
    border-radius: 10px;
    background: var(--vault);
    border: 1px solid var(--line);
}
.cb-bm-clip--left { align-items: flex-end; text-align: right; }
.cb-bm-clip--right { align-items: flex-start; text-align: left; }
.cb-bm-title {
    max-width: 100%; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-bm-creator { font-size: .72rem; color: var(--muted); }
.cb-bm-clip.is-w {
    border-color: color-mix(in srgb, var(--amber) 55%, transparent);
    background: color-mix(in srgb, var(--amber) 14%, var(--vault));
}
.cb-bm-clip.is-w .cb-bm-title { color: var(--amber); }
.cb-bm-clip.is-w .cb-bm-title::after { content: " 👑"; }
/* Großes, gut sichtbares VS zwischen den Clips */
.cb-vs {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 999px;
    background: var(--vault-3);
    border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
    color: var(--amber);
    font-family: "Syne", sans-serif; font-weight: 800; font-size: .82rem;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 8%, transparent);
}
.cb-bm--group .cb-bm-vs { flex-wrap: wrap; }
.cb-vs--sm { width: auto; height: auto; padding: .12rem .4rem; font-size: .68rem; box-shadow: none; }
@media (max-width: 560px) {
    .cb-bm-vs { flex-direction: column; gap: .5rem; }
    .cb-bm-clip--left, .cb-bm-clip--right { align-items: center; text-align: center; width: 100%; }
}

/* Gewinner */
.cb-winner {
    display: flex; align-items: center; gap: 1.2rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--radius);
    background: radial-gradient(600px 200px at 20% 0%, color-mix(in srgb,var(--amber) 16%, transparent), transparent 60%), var(--vault-2);
    border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
}
.cb-trophy { font-size: 3rem; }
.cb-winner-title { font-family: "Syne", sans-serif; font-weight: 800; font-size: 1.6rem; }
.cb-winner-sub { color: var(--muted); margin-top: .2rem; }
.cb-winner-note { color: var(--amber); font-weight: 600; margin-top: .5rem; }

/* ---------- Clip-Battle (Admin) ---------- */
.cb-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.cb-panel { background: var(--vault-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.cb-panel-title { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1.15rem; margin: 0 0 1rem; }
.cb-field { margin-bottom: .8rem; }
.adm-input {
    width: 100%;
    background: var(--vault); border: 1px solid var(--line-2);
    color: var(--ink); font: inherit;
    padding: .55rem .7rem; border-radius: 10px;
    color-scheme: dark;
}
.adm-input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-color: var(--amber); }
.cb-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .8rem; }
.cb-buttons .btn { width: auto; }
/* Clips & Punkte: gestufte Aktualisierung (fast/mid/long) */
.cb-panel--wide { margin-top: 1rem; }
.cb-subsection { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.cb-subtitle { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1rem; margin: 0 0 .5rem; }
.cu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; margin: .5rem 0; }
.cu-tier { background: var(--vault-2); border: 1px solid var(--line-2); border-radius: 12px; padding: .8rem .85rem; display: flex; flex-direction: column; gap: .5rem; }
.cu-tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.cu-btn { width: 100%; }
.cu-btn:disabled { opacity: .5; cursor: default; }
.cu-last { margin: 0; font-size: .8rem; }
.cb-admin-status { margin-bottom: 1rem; }
.cb-admin-round { margin-bottom: .5rem; }
.cb-admin-clips { margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem; }
.cb-clip-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.cb-clip-actions .btn { width: auto; padding: .25rem .6rem; }
.cb-admin-winner { color: var(--amber); font-weight: 700; }

/* Battle abbrechen: destruktive Aktion, abgesetzt unter „Battle erstellen" */
.cb-abort-btn {
    margin-top: 1.1rem;
    border-color: color-mix(in srgb, #e5484d 45%, var(--line));
    color: color-mix(in srgb, #e5484d 80%, var(--ink));
}
.cb-abort-btn:hover:not(:disabled) { border-color: #e5484d; color: #e5484d; }
.cb-abort-btn:disabled { opacity: .5; }

/* Aktives Battle im Header */

/* Postfach-Glocke im Header */
.navlink-bell { position: relative; display: inline-flex; align-items: center; font-size: 1.05rem; }
.bell-badge {
    position: absolute;
    top: -6px; right: -9px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--amber);
    color: #1a1407;
    font-size: .64rem; font-weight: 800;
    line-height: 16px; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Postfach-Liste */
.pf-list { display: grid; gap: .6rem; }
.pf-item {
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.pf-item.is-unread {
    border-color: color-mix(in srgb, var(--amber) 45%, transparent);
    background: color-mix(in srgb, var(--amber) 8%, var(--vault-2));
}
.pf-head {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem 1rem; cursor: pointer;
}
.pf-head:hover { background: color-mix(in srgb, var(--amber) 5%, transparent); }
.pf-icon { font-size: 1.25rem; flex-shrink: 0; }
.pf-title {
    flex: 1; min-width: 0;
    font-family: "Syne", sans-serif; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-item.is-unread .pf-title::before {
    content: "●"; color: var(--amber); margin-right: .4rem; font-size: .7em; vertical-align: middle;
}
.pf-date { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pf-chevron { color: var(--muted); flex-shrink: 0; transition: transform .15s ease; }
.pf-item:not(.is-collapsed) .pf-chevron { transform: rotate(180deg); }
.pf-del {
    flex-shrink: 0; background: transparent; border: 0; color: var(--muted);
    font-size: 1rem; cursor: pointer; padding: .2rem .45rem; border-radius: 8px;
}
.pf-del:hover { color: #e5484d; background: rgba(229,72,77,.12); }
.pf-text { padding: 0 1rem .85rem; color: var(--ink); }

/* Markdown-Inhalte (Postfach-Body + Editor-Vorschau) */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: .5rem 0; overflow-wrap: anywhere; }
.md ul, .md ol { margin: .5rem 0; padding-left: 1.3rem; }
.md li { margin: .15rem 0; }
.md em { font-style: italic; color: inherit; }
.md strong { color: inherit; }
.md a { color: var(--amber); }
.md code { background: var(--vault); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .3rem; font-size: .9em; }
.md h3, .md h4, .md h5 { font-family: "Syne", sans-serif; margin: .6rem 0 .3rem; }

/* Markdown-Editor (Admin-Nachrichten) */
.md-toolbar { display: flex; align-items: center; gap: .3rem; margin-bottom: .4rem; }
.md-btn {
    min-width: 30px; height: 30px; padding: 0 .45rem;
    border: 1px solid var(--line-2); background: var(--vault); color: var(--ink);
    border-radius: 8px; cursor: pointer; font-size: .85rem; line-height: 1;
}
.md-btn:hover { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.md-hint { margin-left: auto; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.md-preview {
    margin-top: .5rem; padding: .6rem .8rem;
    border: 1px dashed var(--line-2); border-radius: 10px; background: var(--vault);
}
.md-preview::before {
    content: "Vorschau"; display: block;
    color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem;
}

/* Vergabe-History-Tabelle (Admin) */
.aw-table-wrap { overflow-x: auto; }
.aw-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.aw-table th, .aw-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.aw-table th { color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.aw-table td { color: var(--ink); }
.aw-table .aw-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aw-table .aw-empty { text-align: center; color: var(--muted); padding: 1rem; }
.aw-board { color: var(--muted); font-size: .78rem; }

/* ---------- Adminbereich: Übersichts-Kacheln ---------- */
.adm-section { margin-bottom: 1.6rem; }
.adm-section-title {
    font-family: "Syne", sans-serif; font-weight: 700; font-size: .95rem;
    color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
    margin: 0 0 .7rem;
}
.adm-tiles { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 1rem; }
@media (max-width: 720px) { .adm-tiles { grid-template-columns: 1fr; } }
.adm-tile {
    display: flex; align-items: flex-start; gap: 1rem;
    min-height: 6.5rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    transition: border-color .15s ease, transform .12s ease;
}
.adm-tile:hover { border-color: color-mix(in srgb, var(--amber) 40%, transparent); transform: translateY(-2px); }
.adm-tile-icon {
    font-size: 1.5rem; width: 46px; height: 46px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 12px;
    background: var(--vault); border: 1px solid var(--line);
}
.adm-tile-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.adm-tile-title { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1.05rem; }
.adm-tile-desc { color: var(--muted); font-size: .88rem; line-height: 1.4; }

/* Zurück-Link auf Admin-Unterseiten */
.adm-back { margin-bottom: 1.25rem; }
.adm-back-link { color: var(--muted); font-weight: 600; }
.adm-back-link:hover { color: var(--amber); }

/* Kontoübersicht */
.acc-user { display: inline-flex; align-items: center; gap: .55rem; }
.acc-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.acc-avatar--empty { display: grid; place-items: center; background: var(--vault); border: 1px solid var(--line); font-weight: 700; font-size: .8rem; color: var(--muted); }
.acc-login { color: var(--muted); }
.acc-stats-btn { padding: .3rem .7rem; font-size: .82rem; }
.acc-detail > td { background: var(--vault); }
.acc-stats { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .3rem 0; }
.acc-stats-note { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; width: 100%; }
.acc-stat {
    display: inline-flex; flex-direction: column; gap: .05rem;
    padding: .35rem .65rem; border-radius: 10px;
    background: var(--vault-2); border: 1px solid var(--line);
}
.acc-stat-label { color: var(--muted); font-size: .74rem; }
.acc-stat-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Sortierbare Spalten + Pagination */
.acc-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.acc-table th[data-sort]:hover { color: var(--ink); }
.acc-table th.sort-asc::after { content: " ▲"; font-size: .7em; color: var(--amber); }
.acc-table th.sort-desc::after { content: " ▼"; font-size: .7em; color: var(--amber); }
.acc-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.acc-pager .btn[disabled] { opacity: .4; cursor: default; }
.acc-pageinfo { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Nachrichten-Compose (Admin) */
.msg-icon { width: 5rem; text-align: center; font-size: 1.1rem; }
.msg-modes { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; }
.msg-mode { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--vault); color: var(--muted); font-weight: 600; cursor: pointer; }
.msg-mode:hover { color: var(--ink); }
.msg-mode.is-active { background: var(--amber); color: #1a1407; border-color: transparent; }
.msg-row { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.msg-field--icon { flex: 0 0 auto; margin-bottom: .8rem; }
.msg-field--grow { flex: 1; min-width: 200px; }

/* Empfänger-Combobox (Dropdown öffnet nur bei Fokus) */
.combo { position: relative; }
.combo > input { width: 100%; }
.combo-list {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .25rem);
    max-height: 260px; overflow-y: auto;
    margin: 0; padding: .25rem; list-style: none;
    background: var(--vault-2); border: 1px solid var(--line-2); border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
}
.combo-opt { padding: .4rem .55rem; border-radius: 7px; cursor: pointer; }
.combo-opt:hover { background: color-mix(in srgb, var(--amber) 20%, var(--vault)); }
.combo-empty { padding: .4rem .55rem; color: var(--muted); }

/* Riwi Coins */
.navlink-coins { display: inline-flex; align-items: center; gap: .3rem; }
.coins-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--amber); }
.coins-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
    background: color-mix(in srgb, var(--amber) 10%, var(--vault-2));
}
.coins-badge strong { color: var(--amber); font-variant-numeric: tabular-nums; }
.dash-tile--coins .dash-icon { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }

/* Shop – Coming soon */
.shop-soon {
    text-align: center; padding: clamp(2rem, 8vw, 5rem) 1rem;
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line); border-radius: var(--radius);
}
.shop-soon-icon { font-size: 3rem; }
.shop-soon-title { font-family: "Syne", sans-serif; font-size: 1.8rem; margin: .5rem 0; }
.shop-soon-text { color: var(--muted); max-width: 520px; margin: 0 auto; }

/* ---------- Shop: Lootboxen ---------- */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.lb-card {
    --rc: var(--r-common);
    position: relative; display: flex; flex-direction: column; gap: .5rem;
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line); border-top: 3px solid var(--rc);
    border-radius: var(--radius); padding: 1rem;
}
.lb-card[data-rarity="common"]    { --rc: var(--r-common); }
.lb-card[data-rarity="uncommon"]  { --rc: var(--r-uncommon); }
.lb-card[data-rarity="rare"]      { --rc: var(--r-rare); }
.lb-card[data-rarity="epic"]      { --rc: var(--r-epic); }
.lb-card[data-rarity="legendary"] { --rc: var(--r-legendary); }
.lb-card-top { display: flex; align-items: center; justify-content: space-between; }
.lb-card-icon { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 55%, transparent)); }
.lb-card-cost { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--amber); }
.lb-card-name { font-family: "Syne", sans-serif; font-size: 1.15rem; margin: 0; color: var(--rc); }
.lb-card-drop { color: var(--muted); font-size: .82rem; margin: 0; line-height: 1.4; flex: 1; }
.lb-card-actions { display: flex; gap: .5rem; }
.lb-card-actions .btn { width: auto; flex: 1; }
.lb-buy-btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
.lb-open-btn { width: 100%; }

/* Modal-Grundgerüst */
.lb-modal {
    position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(4, 4, 8, .78); backdrop-filter: blur(4px);
}
.lb-modal.hidden { display: none; }
.lb-modal-card {
    position: relative; width: min(680px, 100%); max-height: 86vh; overflow: auto;
    background: var(--vault-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem;
}
.lb-modal-close {
    position: absolute; top: .6rem; right: .6rem; width: 2rem; height: 2rem; border-radius: 50%;
    border: 1px solid var(--line); background: var(--vault-3); color: var(--fg, #eef); cursor: pointer; font-size: 1rem;
}

/* Info: mögliche Inhalte */
.lb-info-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.lb-info-title { font-family: "Syne", sans-serif; margin: 0; }
.lb-info-sub { color: var(--muted); font-size: .88rem; margin: .2rem 0 0; }
.lb-tiers { display: flex; flex-direction: column; gap: 1rem; }
.lb-tier { --rc: var(--r-common); border-left: 3px solid var(--rc); padding-left: .8rem; }
.lb-tier[data-rarity="common"]    { --rc: var(--r-common); }
.lb-tier[data-rarity="uncommon"]  { --rc: var(--r-uncommon); }
.lb-tier[data-rarity="rare"]      { --rc: var(--r-rare); }
.lb-tier[data-rarity="epic"]      { --rc: var(--r-epic); }
.lb-tier[data-rarity="legendary"] { --rc: var(--r-legendary); }
.lb-tier-head { font-weight: 700; color: var(--rc); margin-bottom: .5rem; }
.lb-tier-badge { display: inline-block; background: color-mix(in srgb, var(--rc) 22%, transparent); color: var(--rc); border-radius: 6px; padding: 0 .4rem; margin-right: .3rem; }
.lb-tier-items { display: flex; flex-wrap: wrap; gap: .5rem; }
.lb-poss { display: flex; flex-direction: column; align-items: center; width: 76px; text-align: center; gap: .25rem; }
.lb-poss img, .lb-thumb-fallback { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--vault-3); border: 1px solid var(--line); }
.lb-thumb-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--muted); }
.lb-poss-name { font-size: .72rem; color: var(--muted); line-height: 1.15; }
.lb-poss-empty { color: var(--muted); font-size: .82rem; }
.lb-poss { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.lb-poss:hover .lb-poss-name, .lb-poss:focus-visible .lb-poss-name { color: var(--rc, var(--amber)); }
.lb-info-tip { color: var(--muted); font-size: .8rem; margin: .2rem 0 .7rem; }
.lb-poss-detail { --rc: var(--r-common); position: sticky; top: -1px; z-index: 3; background: var(--vault-3); border: 1px solid color-mix(in srgb, var(--rc) 35%, var(--line)); border-left: 3px solid var(--rc); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .9rem; box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 0 18px color-mix(in srgb, var(--rc) 38%, transparent); animation: lb-detail-pop .25s ease-out; }
@keyframes lb-detail-pop { from { transform: scale(.98); opacity: .4; } to { transform: none; opacity: 1; } }
.lb-poss-detail.hidden { display: none; }
.lb-poss-detail[data-rarity="common"]    { --rc: var(--r-common); }
.lb-poss-detail[data-rarity="uncommon"]  { --rc: var(--r-uncommon); }
.lb-poss-detail[data-rarity="rare"]      { --rc: var(--r-rare); }
.lb-poss-detail[data-rarity="epic"]      { --rc: var(--r-epic); }
.lb-poss-detail[data-rarity="legendary"] { --rc: var(--r-legendary); }
.lb-detail-name { color: var(--rc); }
.lb-detail-desc { color: var(--muted); font-size: .85rem; margin: .3rem 0 0; line-height: 1.5; }

/* ---------- Scrollbars global aufhübschen (wie die Item-Tabelle) ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--amber) 55%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vault-2); border-radius: 999px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--amber) 50%, var(--line-2)); border-radius: 999px; border: 2px solid var(--vault-2); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--amber) 70%, var(--line-2)); }

/* ---------- Actionboard (Admin) ---------- */
#ab-list { margin-top: 1rem; }
.ab-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .6rem .7rem; background: var(--vault-3); border: 1px solid var(--line); border-left: 4px solid #444; border-radius: 10px; margin-bottom: .5rem; }
.ab-row.type-timer { border-left-color: #ffcc00; }
.ab-row.type-counter { border-left-color: #00e5ff; }
.ab-icon { font-size: 1.2rem; width: 1.8rem; text-align: center; }
.ab-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-val { font-family: "Consolas", monospace; font-weight: 800; min-width: 3.5rem; text-align: right; }
.ab-row.type-timer .ab-val { color: #ffcc00; }
.ab-row.type-counter .ab-val { color: #00e5ff; }
.ab-ctrls { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.ab-ctrls .btn { width: auto; padding: .22rem .5rem; }
.ab-custom { display: inline-flex; align-items: center; gap: .2rem; }
.ab-amount { width: 3.6rem; padding: .2rem .3rem; text-align: center; }

.ab-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.ab-quick-btn { --rc: var(--amber); width: auto; border: 1px solid var(--rc); color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.ab-quick-btn:hover { background: color-mix(in srgb, var(--rc) 24%, transparent); }

.ab-qb-config { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.ab-qb-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.ab-qb-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; background: var(--vault-3); border: 1px solid var(--line); border-radius: 8px; }
.ab-qb-swatch { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.ab-qb-label { font-weight: 600; }
.ab-qb-meta { flex: 1; color: var(--muted); font-size: .82rem; }
.ab-qb-item .btn { width: auto; padding: .2rem .5rem; }

/* Öffnen-Animation */
.lb-open-stage { width: min(640px, 100%); text-align: center; }
.lb-open-anim.hidden, .lb-open-result.hidden { display: none; }
.lb-box { position: relative; width: 160px; height: 160px; margin: 1rem auto 0; }
.lb-box-body, .lb-box-lid {
    position: absolute; left: 20px; right: 20px; border-radius: 12px;
    background: linear-gradient(180deg, #caa14a, #8a6b22); border: 2px solid #f4d98a;
}
.lb-box-body { bottom: 10px; top: 60px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.25); }
.lb-box-lid { top: 40px; height: 34px; transform-origin: bottom center; }
.lb-box-glow, .lb-rays { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.lb-box-glow { background: radial-gradient(circle, #fff6cf 0%, transparent 62%); }
.lb-rays { background: conic-gradient(from 0deg, transparent 0 12deg, rgba(255,235,150,.55) 12deg 20deg, transparent 20deg 30deg); }
.lb-open-hint { color: var(--muted); margin-top: 1.2rem; }

.lb-open-anim.is-playing .lb-box { animation: lb-shake .5s ease-in-out infinite; }
.lb-open-anim.is-playing .lb-box-glow { opacity: .35; animation: lb-pulse 1s ease-in-out infinite; }
.lb-open-anim.is-burst .lb-box { animation: lb-pop .5s ease-out forwards; }
.lb-open-anim.is-burst .lb-box-lid { animation: lb-lid .5s ease-out forwards; }
.lb-open-anim.is-burst .lb-box-glow { opacity: 1; animation: lb-flash .55s ease-out forwards; }
.lb-open-anim.is-burst .lb-rays { opacity: 1; animation: lb-spin .6s linear forwards; }

@keyframes lb-shake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-3deg); } 75% { transform: translateX(5px) rotate(3deg); } }
@keyframes lb-pulse { 50% { opacity: .6; } }
@keyframes lb-lid { to { transform: translateY(-30px) rotate(-32deg); opacity: 0; } }
@keyframes lb-pop { 40% { transform: scale(1.12); } to { transform: scale(.6); opacity: 0; } }
@keyframes lb-flash { 0% { transform: scale(.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes lb-spin { from { transform: rotate(0); opacity: .9; } to { transform: rotate(140deg); opacity: 0; } }

/* Ergebnis */
.lb-result-title { font-family: "Syne", sans-serif; text-align: center; }
.lb-result-items { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 1rem 0; }
.lb-won {
    --rc: var(--r-common); width: 128px; text-align: center; padding: .7rem; border-radius: 12px;
    background: var(--vault-3); border: 1px solid var(--line); border-top: 3px solid var(--rc);
    opacity: 0; animation: lb-reveal .45s ease-out forwards;
}
.lb-won[data-rarity="common"]    { --rc: var(--r-common); }
.lb-won[data-rarity="uncommon"]  { --rc: var(--r-uncommon); }
.lb-won[data-rarity="rare"]      { --rc: var(--r-rare); }
.lb-won[data-rarity="epic"]      { --rc: var(--r-epic); }
.lb-won[data-rarity="legendary"] { --rc: var(--r-legendary); box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent); }
.lb-won-thumb img, .lb-won-thumb .lb-thumb-fallback { width: 72px; height: 72px; margin: 0 auto; }
.lb-won-rar { color: var(--rc); font-weight: 700; font-size: .78rem; margin-top: .4rem; }
.lb-won-name { font-size: .85rem; margin-top: .1rem; }
.lb-won-amt { color: var(--muted); font-size: .72rem; margin-top: .2rem; }
.lb-result-note { color: var(--muted); font-size: .8rem; text-align: center; }
.lb-result-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; }
.lb-result-actions .btn { width: auto; }
@keyframes lb-reveal { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- Umfragen ---------- */
/* Home-Widget */
.home-poll { margin-bottom: 1.25rem; }
.hp-card { background: linear-gradient(180deg, var(--vault-2), var(--vault-3)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.hp-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .4rem; }
.hp-tag { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.hp-timer { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-status { color: var(--muted); font-size: .85rem; }
.hp-question { font-family: "Syne", sans-serif; font-size: 1.2rem; margin: 0 0 .8rem; }
.hp-options { display: grid; gap: .5rem; }
.hp-vote { text-align: left; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--vault); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.hp-vote:hover { border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: color-mix(in srgb, var(--amber) 10%, var(--vault)); }
.hp-vote:disabled { opacity: .6; cursor: default; }
/* Wahl-Button mit Live-Stimmen (vor dem Abstimmen) */
.hp-headr { display: flex; align-items: center; gap: .6rem; }
.hp-vote--live { display: block; width: 100%; }
.hp-vote--live .hp-res-top { margin-bottom: .35rem; font-weight: 600; }
.hp-vote-track { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.hp-vote-fill { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--amber) 45%, transparent); transition: width .4s ease; }
.hp-vote--live:hover .hp-vote-fill { background: color-mix(in srgb, var(--amber) 60%, transparent); }
.hp-results { display: grid; gap: .55rem; }
.hp-res-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; margin-bottom: .25rem; }
.hp-res-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.hp-res-fill { height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--amber) 70%, #e0962a); transition: width .4s ease; }
.hp-res.is-win .hp-res-fill { background: linear-gradient(90deg, var(--amber), #e0962a); }
.hp-res.is-win .hp-res-top { color: var(--ink); font-weight: 700; }
.hp-res.is-mine .hp-res-top { color: var(--amber); }
.hp-you { font-size: .72rem; color: var(--amber); }
.hp-hint { margin: .7rem 0 0; color: var(--muted); font-size: .85rem; }

/* Admin-Umfragen */
.pl-opt-row { display: flex; gap: .5rem; margin-bottom: .4rem; }
.pl-opt-row .pl-opt { flex: 1; }
.pl-card { background: var(--vault-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .6rem; overflow: hidden; }
.pl-card.is-current { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.pl-card summary { list-style: none; }
.pl-card summary::-webkit-details-marker { display: none; }
.pl-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; cursor: pointer; flex-wrap: wrap; }
.pl-card-q { font-weight: 700; }
.pl-card-meta { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.pl-badge { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pl-badge--live { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.pl-badge--cur { color: var(--r-uncommon); border-color: color-mix(in srgb, var(--r-uncommon) 45%, transparent); }
.pl-badge--pts { color: var(--amber); }
.pl-card-body { padding: 0 1rem 1rem; display: grid; gap: .5rem; }
.pl-card-date { color: var(--muted); font-size: .8rem; }
.pl-card-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.pl-card-actions .btn { width: auto; }
.pl-res-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.pl-res-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: .2rem; }
.pl-res-fill { height: 100%; background: color-mix(in srgb, var(--amber) 70%, #e0962a); }
.pl-voters { color: var(--muted); font-size: .8rem; margin-top: .2rem; }
textarea.adm-input { resize: vertical; min-height: 3rem; font: inherit; }

/* Gesperrte Admin-Kachel (keine Berechtigung) */
.adm-tile.is-locked { opacity: .5; cursor: not-allowed; }
.adm-tile.is-locked:hover { border-color: var(--line); transform: none; }
.adm-lock { font-size: .85em; }

/* Rollen-Badges */
.role-badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid var(--line); white-space: nowrap; }
.role-super { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.role-mod { color: var(--r-uncommon); border-color: color-mix(in srgb, var(--r-uncommon) 45%, transparent); background: color-mix(in srgb, var(--r-uncommon) 12%, transparent); }
.role-editor { color: var(--r-rare, #5b9dff); border-color: color-mix(in srgb, var(--r-rare, #5b9dff) 45%, transparent); background: color-mix(in srgb, var(--r-rare, #5b9dff) 12%, transparent); }
.role-user { color: var(--muted); }

/* Editorenbereich: Social + Content + Shorts */
.cb-back { margin-bottom: .8rem; }
.soc-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .6rem .2rem; border-bottom: 1px solid var(--line-2); }
.soc-plat { font-weight: 700; min-width: 8rem; }
.soc-label { flex: 1; min-width: 0; color: var(--muted); }
.soc-actions { display: inline-flex; gap: .4rem; }
.soc-actions .btn { width: auto; padding: .3rem .7rem; }
.soc-badge { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.soc-badge.is-on { background: rgba(63,191,106,.18); border: 1px solid rgba(63,191,106,.4); color: #7ee2a0; }
.soc-badge.is-off { background: rgba(224,96,96,.16); border: 1px solid rgba(224,96,96,.35); color: #ff9c9c; }
.cp-targets { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.cp-target { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; }
.cp-flags { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin: .4rem 0; }
.cp-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem .2rem; border-bottom: 1px solid var(--line-2); }
.cp-item-title { font-weight: 700; }
.cp-item-meta { color: var(--muted); font-size: .82rem; }
.cp-item-actions { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.cp-item-actions .btn { width: auto; padding: .3rem .7rem; }
.cp-badge { font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.cp-status-Published { color: #7ee2a0; border-color: rgba(63,191,106,.4); }
.cp-status-Failed { color: #ff9c9c; border-color: rgba(224,96,96,.4); }
.shorts-accounts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.shorts-acc { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 10px; background: var(--vault-2); border: 1px solid var(--line-2); cursor: pointer; color: inherit; font: inherit; }
.shorts-acc:hover { border-color: var(--amber); }
.shorts-acc.is-active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--vault-2)); }
.shorts-acc-plat { color: var(--muted); font-size: .78rem; }
.shorts-searchbar { margin-bottom: 1rem; display: flex; gap: .6rem; flex-wrap: nowrap; align-items: center; }
.shorts-searchbar #shorts-search { flex: 1 1 auto; min-width: 0; }
.shorts-searchbar #shorts-sort { flex: 0 0 auto; width: auto; }
.shorts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.shorts-card { position: relative; aspect-ratio: 9/16; background: var(--vault-2); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; cursor: pointer; padding: 0; color: inherit; font: inherit; text-align: left; }
.shorts-card:hover { border-color: var(--amber); }
.shorts-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shorts-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); opacity: .9; pointer-events: none; }
.shorts-views { position: absolute; top: .5rem; left: .5rem; padding: .2rem .5rem; font-size: .76rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.62); border-radius: 999px; pointer-events: none; letter-spacing: .01em; }
.shorts-card-title { position: absolute; left: 0; right: 0; bottom: 0; padding: .55rem .6rem; font-size: .84rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.85)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
.shorts-card.is-playing { border-color: var(--amber); }
.shorts-card.is-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shorts-card.is-playing video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.shorts-fs { position: absolute; top: .5rem; right: .5rem; z-index: 2; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; color: #fff; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; cursor: pointer; padding: 0; }
.shorts-fs:hover { background: rgba(0,0,0,.85); border-color: var(--amber); }

/* Overlay-Anzeige (Show/Hide/Deep-Hide) */
.overlay-ctrl .ov-state { font-size: .82rem; font-weight: 700; color: var(--muted); }
.overlay-ctrl .ov-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem 0; border-top: 1px solid var(--line-2); }
.overlay-ctrl .ov-row:first-of-type { border-top: 0; }
.overlay-ctrl .ov-btns { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.overlay-ctrl .btn { width: auto; }
.overlay-ctrl .ov-vis.is-active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, var(--vault-2)); color: #fff; }
.overlay-ctrl .ov-react.is-active { border-color: #ff6b6b; background: color-mix(in srgb, #ff6b6b 18%, var(--vault-2)); color: #fff; }

/* Rollen-Editor */
.role-editor { display: grid; gap: .8rem; padding: .3rem 0; }
.role-roles { display: flex; gap: 1.4rem; }
.role-roles label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.role-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .5rem; }
.perm-toggle { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .75rem; background: var(--vault-2); border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; font-size: .9rem; transition: border-color .15s ease, background .15s ease; }
.perm-toggle:hover { border-color: var(--amber); }
.perm-toggle:has(input:checked) { border-color: color-mix(in srgb, var(--amber) 55%, var(--line-2)); background: color-mix(in srgb, var(--amber) 12%, var(--vault-2)); }
.perm-toggle:has(input:disabled) { opacity: .5; cursor: default; }
.perm-toggle:has(input:disabled):hover { border-color: var(--line-2); }
.perm-toggle-label { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* Das hidden-Attribut muss display-Overrides (flex/grid) schlagen – sonst bleiben
   z. B. Banner/Pager trotz [hidden] sichtbar. */
[hidden] { display: none !important; }

/* Sound-Alerts admin */
.sa-linkrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .3rem 0; }
.sa-linkrow .adm-input { flex: 1; min-width: 200px; }
.sa-conn { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .7rem; background: var(--vault-3); border: 1px solid var(--line); border-radius: 8px; margin-bottom: .4rem; }
.sa-conn-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--r-uncommon); box-shadow: 0 0 8px var(--r-uncommon); flex: 0 0 auto; }
.sa-conn-dev { font-weight: 600; }
.sa-conn-meta { color: var(--muted); font-size: .82rem; }

/* Bot & Chat */
.bot-status { margin: .6rem 0; }
.bot-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.bot-actions .btn { width: auto; }
.bot-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--muted); margin-right: .4rem; vertical-align: middle; }
.bot-dot.is-on { background: #4ade80; box-shadow: 0 0 8px color-mix(in srgb, #4ade80 60%, transparent); }

/* „Ansehen als"-Banner */
.impersonation-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: .55rem 1rem; background: color-mix(in srgb, var(--amber) 22%, var(--vault-2)); border-bottom: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); color: var(--ink); font-size: .92rem; position: sticky; top: 0; z-index: 50; }
.impersonation-bar .btn { width: auto; padding: .3rem .7rem; }

/* Goalbar-Analyse: Donut + Legende + Verlauf */
.gb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gb-analysis { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .gb-analysis { grid-template-columns: 1fr; } }
.gb-chart-wrap { display: flex; flex-direction: column; gap: .8rem; }
.gb-donut { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.gb-donut-svg { transform: rotate(-90deg); display: block; }
.gb-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.gb-donut-total { font-family: "Syne", sans-serif; font-weight: 800; font-size: 1.4rem; }
.gb-donut-sub { color: var(--muted); font-size: .78rem; }
.gb-legend { display: grid; gap: .4rem; }
.gb-leg { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.gb-leg-dot { width: .8rem; height: .8rem; border-radius: 3px; flex: 0 0 auto; }
.gb-leg-name { font-weight: 600; flex: 1; min-width: 0; }
.gb-leg-val { color: var(--ink); font-variant-numeric: tabular-nums; }
.gb-log { max-height: 420px; overflow: auto; }
.gb-cats { display: grid; gap: .4rem; margin-top: .3rem; }
.gb-cat-row { display: flex; align-items: center; gap: .8rem; padding: .35rem .2rem; border-bottom: 1px solid var(--line-2); }
.gb-cat-row:last-child { border-bottom: none; }
.gb-cat-label { flex: 1; min-width: 0; font-weight: 600; }
.gb-cat-label small { color: var(--muted); font-weight: 400; }
.gb-cat-pts { max-width: 6.5rem; }
.gb-active-title { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1.1rem; }
.gb-head .btn { margin-top: 0; }
.gb-prog-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
#gb-edit { border-top: 1px solid var(--line-2); margin-top: .8rem; padding-top: .8rem; }
.gb-hist-analysis { grid-template-columns: 1fr; }

/* Sync-Historie: Rohdaten-Block */
.sh-data { max-height: 340px; overflow: auto; background: var(--vault-2); border: 1px solid var(--line-2); border-radius: 10px; padding: .7rem .85rem; margin: .5rem 0 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; line-height: 1.45; white-space: pre; color: var(--ink); }

/* Pagination-Steuerung (wiederverwendbar) */
.pg { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; margin: 1rem 0 .25rem; }
.pg-btn { background: var(--vault-2); border: 1px solid var(--line-2); color: var(--ink); font: inherit; font-weight: 600; padding: .45rem .85rem; border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pg-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: color-mix(in srgb, var(--amber) 10%, var(--vault-2)); }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-info { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }

/* Admin: Item-Gruppen */
.ig-row { display: flex; align-items: center; gap: .85rem; padding: .7rem .2rem; border-bottom: 1px solid var(--line-2); }
.ig-row:last-child { border-bottom: none; }
.ig-icon { font-size: 1.4rem; width: 2rem; text-align: center; flex: 0 0 auto; }
.ig-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ig-name { font-weight: 600; }
.ig-meta { color: var(--muted); font-size: .82rem; }
.ig-row.is-off .ig-name { color: var(--muted); }
.ig-row.is-off .ig-icon { filter: grayscale(1); opacity: .6; }
.ig-toggle { flex: 0 0 auto; }
.ig-row-actions { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.ig-row-actions .btn { width: auto; padding: .25rem .5rem; }
.ig-expand { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9rem; width: 1.4rem; flex: 0 0 auto; transition: transform .15s ease; }
.ig-expand.is-open { transform: rotate(90deg); color: var(--amber); }
.ig-items { padding: .2rem 0 .6rem 3.4rem; }
.ig-items ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }
.ig-items li { font-size: .86rem; color: var(--ink); }
.ig-it-id { color: var(--muted); font-variant-numeric: tabular-nums; }
.ig-badge { font-size: .8rem; color: var(--muted); }
.ig-newgroup { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; align-items: center; }
.ig-newgroup .btn { width: auto; flex: 0 0 auto; }
.ig-newgroup #ig-new-name { flex: 1; min-width: 160px; }

/* Ranglisten-Vergabehistorie: dezente Trennlinie je Verteilung */
.aw-table tr.rk-hist-group > td { border-top: 2px solid var(--line); }

/* Historien-Löschen (nur Super-Admin) */
.hist-del { width: auto; padding: .1rem .4rem; font-size: .95rem; line-height: 1; vertical-align: middle; }
.hist-del:hover { color: var(--r-legendary, #e5679a); }

/* Seite „Live-Route" (RealtimeIRL): großflächige Karte, nur bei IRL-Szenen */
.irl-stage {
    height: clamp(360px, calc(100dvh - 260px), 900px);
    background: var(--vault-3);
    border: 1px solid var(--line);
    border-radius: var(--radius, 14px);
    overflow: hidden;
}
.irl-stage iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Globale Tooltips im Box-Stil (ersetzt native title-Tooltips, siehe ui.js) */
.rw-tip {
    position: fixed; z-index: 9999; pointer-events: none;
    max-width: min(340px, 92vw);
    padding: .55rem .8rem;
    background: var(--vault-2); color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line));
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
    font-size: .95rem; font-weight: 600; line-height: 1.4;
    letter-spacing: .01em; white-space: pre-line;
    animation: rwTipIn .12s ease;
}
.rw-tip::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent;
}
.rw-tip[data-pos="above"]::after { top: 100%; border-top-color: var(--vault-2); }
.rw-tip[data-pos="below"]::after { bottom: 100%; border-bottom-color: var(--vault-2); }
@keyframes rwTipIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rw-tip { animation: none; } }

/* Giveaway-Admin: Button-Reihen nutzen die volle Panelbreite (1 oder 2 pro Reihe) */
.gw-btn-row { display: flex; gap: .6rem; margin-top: .6rem; }
.gw-btn-row .btn { flex: 1 1 0; width: auto; margin: 0; }

/* Giveaway-Admin: Teilnehmerverwaltung */
.gw-part-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.gw-part-add .adm-input[type="text"] { flex: 1; min-width: 160px; }
.gw-part-add .btn { width: auto; flex: 0 0 auto; }
.gw-part-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem .5rem .6rem; border-bottom: 1px solid var(--line-2); border-left: 3px solid transparent; }
.gw-part-row.is-valid { border-left-color: #3fbf6a; background: rgba(63, 191, 106, .08); }
.gw-part-row.is-invalid { border-left-color: #e06060; background: rgba(224, 96, 96, .08); }
.gw-part-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-part-ctrls { display: inline-flex; align-items: center; gap: .4rem; }
.gw-part-ctrls .btn { width: auto; padding: .3rem .6rem; }
.gw-valid-badge { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.gw-valid-badge.is-valid { background: rgba(63, 191, 106, .18); border: 1px solid rgba(63, 191, 106, .4); color: #7ee2a0; }
.gw-valid-badge.is-invalid { background: rgba(224, 96, 96, .18); border: 1px solid rgba(224, 96, 96, .4); color: #ff9c9c; }

/* Exklusiv-Gruppen (nur einer gleichzeitig aktiv, an Actionboard gekoppelt) */
.ig-newgroup .switch-row { white-space: nowrap; }
.ig-excl-badge { display: inline-flex; align-items: center; gap: .3rem; margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); font-size: .72rem; font-weight: 600; vertical-align: middle; }
/* Gruppe bearbeiten: alles in einer Reihe (bricht auf schmalen Screens sauber um). */
.ig-row--edit { flex-wrap: wrap; }
.ig-row--edit .ig-icon { width: auto; flex: 0 0 auto; }
.ig-edit-icon { width: 3.3rem; text-align: center; padding: .25rem; }
.ig-edit-name { flex: 1 1 10rem; min-width: 8rem; }
.ig-edit-excl { flex: 0 0 auto; margin: 0; white-space: nowrap; }

/* Gesamtsystem-Schalter */
.ig-system { display: flex; align-items: center; gap: 1rem; }
.ig-system-info { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.ig-system-state { font-weight: 700; font-family: "Syne", sans-serif; font-size: 1.05rem; }
.ig-system-hint { color: var(--muted); font-size: .85rem; }
.ig-expiry { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.ig-expiry-field { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Inventarverwaltung */
.ive-search { margin-bottom: .8rem; display: flex; gap: .5rem; align-items: center; }
.ive-search #ive-user-search { flex: 1 1 auto; min-width: 0; }
.ive-search #ive-user-sort { flex: 0 0 auto; width: auto; }
.ive-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
.ive-user { text-align: left; display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem; background: var(--vault-2); border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; color: inherit; }
.ive-user:hover { border-color: var(--amber); }
.ive-user-name { font-weight: 700; }
.ive-user-sub { color: var(--muted); font-size: .78rem; }
.ive-user-count { color: var(--muted); font-size: .8rem; }
.ive-inv-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ive-add { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; margin: .6rem 0 .2rem; }
.ive-amount-cell, .ive-expiry-cell { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.ive-amount-cell .btn, .ive-expiry-cell .btn { width: auto; padding: .3rem .7rem; }
.ive-line-search { margin: .8rem 0 .4rem; }
.ive-line-search input { max-width: 28rem; }

/* Itemsystem: Reiter */
.its-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 1rem; border-bottom: 1px solid var(--line-2); }
.its-tab { appearance: none; background: transparent; border: none; border-bottom: 3px solid transparent; color: var(--muted); font: inherit; font-weight: 700; padding: .55rem .9rem; cursor: pointer; border-radius: 8px 8px 0 0; }
.its-tab:hover { color: inherit; background: var(--vault-2); }
.its-tab.is-active { color: inherit; border-bottom-color: var(--amber); }
.its-pane { display: none; }
.its-pane.is-active { display: block; }
.ive-badge-exp { font-size: .72rem; padding: 2px 7px; border-radius: 999px; background: rgba(220, 80, 80, .18); border: 1px solid rgba(220, 80, 80, .35); color: #ff9c9c; font-weight: 700; }

/* Gegenstände verwalten */
.it-editor { background: var(--vault-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.it-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem 1rem; }
.it-usages { display: flex; flex-wrap: wrap; gap: 1rem; padding: .2rem 0; }
.it-usage-check { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .9rem; }
.it-editor-actions { display: flex; align-items: center; gap: .75rem; margin-top: .8rem; flex-wrap: wrap; }
.it-editor-actions .btn { width: auto; }
.it-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.it-toolbar .btn { width: auto; flex: 0 0 auto; }
.it-toolbar #it-search { flex: 1; min-width: 180px; }
.it-table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--amber) 55%, transparent) transparent; padding-bottom: .2rem; }
.it-table-wrap::-webkit-scrollbar { height: 10px; }
.it-table-wrap::-webkit-scrollbar-track { background: var(--vault-2); border-radius: 999px; }
.it-table-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--amber) 50%, var(--line-2)); border-radius: 999px; border: 2px solid var(--vault-2); }
.it-table-wrap::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--amber) 70%, var(--line-2)); }
.it-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.it-table th, .it-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.it-table th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.it-table .it-c-name { font-weight: 600; }
.it-table--sortable th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.it-table--sortable th[data-sort]:hover { color: var(--ink); }
.it-table--sortable th[data-sort]::after { content: "↕"; opacity: .35; margin-left: .3rem; font-size: .8em; }
.it-table--sortable th.sort-asc::after { content: "↑"; opacity: .9; color: var(--amber); }
.it-table--sortable th.sort-desc::after { content: "↓"; opacity: .9; color: var(--amber); }
.it-actions-cell { white-space: nowrap; }
.it-actions-cell .btn { width: auto; padding: .3rem .6rem; font-size: .8rem; margin-left: .3rem; }

/* Mein Inventar: Gruppen-Tag + Deaktiviert-Hinweis */
.inv-disabled-banner { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; background: color-mix(in srgb, var(--r-legendary, #d08bff) 12%, var(--vault-2)); border: 1px solid color-mix(in srgb, var(--r-legendary, #d08bff) 40%, transparent); border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1rem; font-size: .9rem; }
.inv-disabled-banner .idb-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--vault); border: 1px solid var(--line-2); border-radius: 999px; padding: .15rem .6rem; font-weight: 600; }
/* Gruppen-Badge (deutlich anders als die Nutzungs-Kategorien-Tags): eigene Zeile,
   Icon-Chip links, gefüllt statt umrandet. */
.ticket-group { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; margin-bottom: .35rem; padding: .16rem .55rem .16rem .16rem; border-radius: 999px; background: color-mix(in srgb, var(--amber) 18%, var(--vault)); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: color-mix(in srgb, var(--amber) 85%, var(--ink)); }
.ticket-group-ic { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: color-mix(in srgb, var(--amber) 30%, var(--vault-2)); font-size: .8rem; }
.ticket-group.is-off { background: color-mix(in srgb, #ff6b6b 16%, var(--vault)); border-color: color-mix(in srgb, #ff6b6b 45%, transparent); color: #ffb3b3; }
.ticket-group.is-off .ticket-group-ic { background: color-mix(in srgb, #ff6b6b 28%, var(--vault-2)); filter: grayscale(.3); }
.ticket.is-group-off { opacity: .72; }

/* Moderner Toggle-Schalter (wiederverwendbar) */
.switch-row { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; min-height: 2.5rem; font-size: .92rem; user-select: none; }
.switch-label { line-height: 1.3; }
.switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 44px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background .2s ease; }
.switch-slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .2s ease; }
.switch input:checked + .switch-slider { background: var(--amber); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
.switch input:focus-visible + .switch-slider { outline: 2px solid var(--amber); outline-offset: 2px; }
.switch input:disabled + .switch-slider { opacity: .5; }
.role-actions { display: flex; align-items: center; gap: .9rem; }
.role-msg { margin: 0; }

/* ---------- Community Goal (Goalbar) ---------- */
.gb-card {
    background: linear-gradient(180deg, var(--vault-2), var(--vault-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
}
.gb-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}
.gb-title {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
}
.gb-percent {
    font-family: "Syne", sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}
.gb-track {
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid var(--line);
    overflow: hidden;
}
.gb-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 70%, #e0962a), var(--amber));
    transition: width 500ms ease;
    min-width: 0;
}
.gb-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .7rem;
    color: var(--muted);
    font-size: .92rem;
}
.gb-value { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.gb-status { font-variant-numeric: tabular-nums; }

.gb-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}
.gb-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .65rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, .2);
    font-size: .82rem;
    color: var(--muted);
}
.gb-info-pts {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

@media (max-width: 520px) {
    .gb-info { grid-template-columns: 1fr; }
}

.gb-desc {
    margin: 1rem 0 0;
    color: var(--muted);
    line-height: 1.6;
    white-space: pre-wrap;
}
.gb-desc:empty { display: none; }
.gb-desc a { color: var(--amber); text-decoration: underline; overflow-wrap: anywhere; }
.gb-desc a:hover { color: color-mix(in srgb, var(--amber) 80%, white); }

/* Admin-Formular (Goalbar-Beschreibung) */
.adm-form { max-width: 100%; }
.adm-label { display: block; font-weight: 600; margin-bottom: .4rem; }
.adm-textarea {
    width: 100%;
    background: var(--vault-2);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font: inherit;
    line-height: 1.5;
    padding: .7rem .85rem;
    border-radius: 10px;
    resize: vertical;
}
.adm-textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-color: var(--amber); }
.adm-hint { color: var(--muted); font-size: .85rem; margin: .6rem 0 1rem; }
.adm-form-actions { display: flex; }
.adm-form .btn-use { --rc: var(--amber); width: auto; padding: .6rem 1.4rem; }
.adm-saved {
    max-width: 640px;
    margin-bottom: 1rem;
    padding: .7rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--r-uncommon) 14%, var(--vault-2));
    border: 1px solid color-mix(in srgb, var(--r-uncommon) 40%, transparent);
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Admin-Tabelle ---------- */
.adm-table { display: grid; gap: .4rem; }

.adm-row {
    display: grid;
    grid-template-columns: 1fr 130px 90px 90px;
    align-items: center;
    gap: 1rem;
    padding: .6rem .9rem;
}

.adm-head {
    color: var(--muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-bottom: .2rem;
}
.adm-head .adm-num { font-weight: 500; }

/* Aufklappbare Item-Zeile (<details>) */
.adm-details {
    --rc: var(--r-common);
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.adm-details:nth-of-type(even) { background: var(--vault-3); }
.adm-details[open] { border-color: color-mix(in srgb, var(--rc) 40%, transparent); }

.adm-details[data-rarity="common"]    { --rc: var(--r-common); }
.adm-details[data-rarity="uncommon"]  { --rc: var(--r-uncommon); }
.adm-details[data-rarity="rare"]      { --rc: var(--r-rare); }
.adm-details[data-rarity="epic"]      { --rc: var(--r-epic); }
.adm-details[data-rarity="legendary"] { --rc: var(--r-legendary); }

summary.adm-row { cursor: pointer; list-style: none; user-select: none; }
summary.adm-row::-webkit-details-marker { display: none; }
summary.adm-row:hover { background: rgba(255, 255, 255, .03); }

.adm-chevron {
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .15s ease, color .15s ease;
}
.adm-details[open] .adm-chevron { transform: rotate(90deg); color: var(--rc); }

.adm-item { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.adm-thumb {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--rc) 16%, var(--vault));
    border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
}
.adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-thumb-fallback { font-family: "Syne", sans-serif; font-weight: 800; color: color-mix(in srgb, var(--rc) 75%, white); }
.adm-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.adm-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Besitzer-Panel */
.adm-owners {
    border-top: 1px solid var(--line);
    padding: .45rem .9rem .65rem;
    display: grid;
    gap: .2rem;
    background: rgba(0, 0, 0, .18);
}
.adm-owner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: .35rem .5rem .35rem 2.1rem;
    border-radius: 8px;
    font-size: .9rem;
}
.adm-owner:hover { background: rgba(255, 255, 255, .03); }
.adm-owner-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-owner-amount { color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-owner-exp { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.adm-owner-exp.is-expiring { color: var(--warn); font-weight: 600; }
.adm-owner-exp.is-expiring::before { content: "⏳ "; }

/* VIP-Tabelle */
.vip-row {
    grid-template-columns: 1fr auto;
    background: var(--vault-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .7rem .9rem;
}
.vip-row:nth-child(even) { background: var(--vault-3); }
.vip-row.adm-head { background: transparent; border-color: transparent; padding: .6rem .9rem .2rem; }

.vip-name { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-weight: 600; min-width: 0; }
.vip-login { color: var(--muted); font-size: .82rem; font-weight: 500; }
.vip-last {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.vip-ago { color: var(--muted); font-size: .78rem; }
.vip-last.is-inactive { color: var(--warn); }
.vip-last.is-inactive .vip-ago { color: var(--warn); }

@media (max-width: 620px) {
    .adm-row { grid-template-columns: 1fr 64px 64px; }
    .vip-row { grid-template-columns: 1fr auto; }
    .adm-rarity { display: none; }
    .adm-owner { grid-template-columns: 1fr auto; padding-left: 1rem; }
    .adm-owner-amount { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .navlink-live { color: var(--amber); }
}