/* ============================================================================
   EinDenny – ZENTRALE THEME-STEUERUNG
   Farben, Hintergrund und Animationswerte ausschließlich HIER ändern.
   Die übrigen Regeln verwenden nur diese Variablen – keine zweite Farbquelle.
   ============================================================================ */
@import url("/panel/assets/theme-core.css");
:root {
  --theme-glow-display: none;
  /* --------------------------------------------------------------------------
     1) Grundfläche / Schwarz
     -------------------------------------------------------------------------- */
  --theme-bg: #070706;
  --theme-bg-rgb: 7,7,6;
  --theme-bg-2: #0c0b08;
  --theme-bg-2-rgb: 12,11,8;
  --theme-bg-3: #11100c;
  --theme-bg-3-rgb: 17,16,12;
  --theme-surface: #15120c;
  --theme-surface-rgb: 21,18,12;
  --theme-surface-2: #1a160e;
  --theme-surface-2-rgb: 26,22,14;
  --theme-surface-3: #211a10;
  --theme-surface-3-rgb: 33,26,16;
  --theme-surface-deep: #0a0907;
  --theme-surface-deep-rgb: 10,9,7;
  /* --------------------------------------------------------------------------
     2) EinDenny Gold / Bronze – bewusst dunkler als im ersten Gold-Design
     -------------------------------------------------------------------------- */
  --brand-primary: #b77a1e;
  --brand-primary-rgb: 183,122,30;
  --brand-primary-hover: #c98b2a;
  --brand-primary-hover-rgb: 201,139,42;
  --brand-secondary: #70470f;
  --brand-secondary-rgb: 112,71,15;
  --brand-accent: #d59f3d;
  --brand-accent-rgb: 213,159,61;
  --brand-soft: #e6cc8a;
  --brand-soft-rgb: 230,204,138;
  --brand-muted: #9d7b3e;
  --brand-muted-rgb: 157,123,62;
  --brand-ink: #171006;
  --brand-ink-rgb: 23,16,6;
  /* Aktive Navigation / große Buttons – absichtlich dunkler für bessere Lesbarkeit */
  --nav-active-start: #322109;
  --nav-active-start-rgb: 50,33,9;
  --nav-active-end: #694613;
  --nav-active-end-rgb: 105,70,19;
  --nav-active-text: #f3dfad;
  --button-start: #5d3d0f;
  --button-end: #8d611b;
  --button-text: #fff2ce;
  /* --------------------------------------------------------------------------
     3) Texte
     -------------------------------------------------------------------------- */
  --theme-text: #f4f1e8;
  --theme-text-dim: #b9b09d;
  --theme-text-faint: #817866;
  --theme-text-inverse: #171006;
  /* --------------------------------------------------------------------------
     4) Rahmen / Schatten
     -------------------------------------------------------------------------- */
  --theme-border: rgba(183,122,30,.22);
  --theme-border-hover: rgba(213,159,61,.48);
  --theme-shadow: rgba(0,0,0,.48);
  --theme-gold-glow: rgba(183,122,30,.24);
  --theme-gold-glow-strong: rgba(213,159,61,.34);
  /* --------------------------------------------------------------------------
     5) Statusfarben – ebenfalls nur hier ändern
     -------------------------------------------------------------------------- */
  --status-ok: #3bc985;
  --status-ok-rgb: 59,201,133;
  --status-warn: #d5aa4d;
  --status-warn-rgb: 213,170,77;
  --status-danger: #df626d;
  --status-danger-rgb: 223,98,109;
  --status-info: #69b6c7;
  --status-info-rgb: 105,182,199;
  --status-blue: #6f9fd6;
  --status-blue-rgb: 111,159,214;
  /* --------------------------------------------------------------------------
     6) Arena / Game-Akzente
     Kein Bunny-Lila mehr als Standard-Akzent. Einzelne Spiele behalten bewusst
     unterschiedliche Farben, damit man sie schnell auseinanderhalten kann.
     -------------------------------------------------------------------------- */
  --game-cases: #b77a1e;
  --game-crash: #d85d66;
  --game-plinko: #67b7c8;
  --game-blackjack: #d5aa4d;
  --game-duell: #d58d36;
  --game-royale: #cf7b31;
  --game-chicken: #4fbd83;
  --game-roulette: #bd8a32;
  /* --------------------------------------------------------------------------
     7) Sammelsystem / Rarity – bewusst eigene Inhaltsfarben
     Diese Farben sind KEIN Panel-Branding und dürfen sich unterscheiden.
     -------------------------------------------------------------------------- */
  --rarity-common: #7e9bb8;
  --rarity-rare: #5d93cf;
  --rarity-epic: #c9874f;
  --rarity-legendary: #d5aa4d;
  --rarity-mythic: #df626d;
  /* --------------------------------------------------------------------------
     8) Externe Plattformen
     Offizielle Plattformfarben dürfen sichtbar bleiben. Wenn du wirklich ALLES
     gold haben willst, kannst du auch diese Werte hier ersetzen.
     -------------------------------------------------------------------------- */
  --social-twitch: #9146ff;
  --social-twitch-rgb: 145,70,255;
  --social-twitch-soft: #b995ff;
  --social-youtube: #ff0033;
  --social-youtube-rgb: 255,0,51;
  --social-youtube-soft: #ff6a82;
  --social-instagram: #e04f89;
  --social-instagram-rgb: 224,79,137;
  --social-instagram-soft: #ef8a5f;
  --social-tiktok: #66d7d1;
  --social-tiktok-rgb: 102,215,209;
  --social-tiktok-soft: #df5368;
  --social-discord: #7289da;
  --social-discord-rgb: 114,137,218;
  --social-discord-soft: #9eaee9;
  /* --------------------------------------------------------------------------
     9) Kompatibilitätsvariablen für bestehende Module
     -------------------------------------------------------------------------- */
  --bg: var(--theme-bg);
  --bg-2: var(--theme-bg-2);
  --bg-1: var(--theme-bg-2);
  --surface: rgba(var(--theme-surface-rgb),.76);
  --surface-strong: rgba(var(--theme-surface-2-rgb),.92);
  --border: var(--theme-border);
  --border-hover: var(--theme-border-hover);
  --text: var(--theme-text);
  --text-dim: var(--theme-text-dim);
  --text-faint: var(--theme-text-faint);
  --violet: var(--brand-primary);
  --violet-2: var(--brand-secondary);
  --magenta: var(--brand-accent);
  --ok: var(--status-ok);
  --warn: var(--status-warn);
  --down: var(--status-danger);
  --cyan: var(--status-info);
  --blue: var(--status-blue);
  /* ------------------------------------------------------------------------
     EIN DENNY HINTERGRUND – Farben unverändert, Bewegung wieder wie Bunny
     ------------------------------------------------------------------------ */
  --theme-background-color: #050504;
  --theme-background-saturation: 1;
  --theme-base-background-image: url("/panel/assets/img/eindenny-background.png");
  --theme-base-background-position: center center;
  --theme-base-background-size: cover;
  --theme-base-background-repeat: no-repeat;
  /* Bewegtes Gold-Hex-Raster – technisch identisch zu Bunny.
     Das statische Hintergrundbild bleibt unverändert; dieser transparente
     Layer sorgt ausschließlich für die sichtbare Hexagon-Bewegung. */
  --theme-hex-overlay-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22138.00%22%20height%3D%2279.67%22%20viewBox%3D%220%200%20138.00%2079.67%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28183%2C122%2C30%2C0.20%29%22%20stroke-width%3D%221.1%22%3E%3Cpath%20d%3D%22M46.00%2C0.00%20L23.00%2C39.84%20L-23.00%2C39.84%20L-46.00%2C0.00%20L-23.00%2C-39.84%20L23.00%2C-39.84%20Z%22%2F%3E%3Cpath%20d%3D%22M115.00%2C39.84%20L92.00%2C79.67%20L46.00%2C79.67%20L23.00%2C39.84%20L46.00%2C0.00%20L92.00%2C0.00%20Z%22%2F%3E%3Cpath%20d%3D%22M184.00%2C0.00%20L161.00%2C39.84%20L115.00%2C39.84%20L92.00%2C0.00%20L115.00%2C-39.84%20L161.00%2C-39.84%20Z%22%2F%3E%3Cpath%20d%3D%22M-23.00%2C39.84%20L-46.00%2C79.67%20L-92.00%2C79.67%20L-115.00%2C39.84%20L-92.00%2C0.00%20L-46.00%2C0.00%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  /* Exakt auf die Hexagon-Geometrie des 1672×941-Hintergrundbildes skaliert.
     max(vw, vh) folgt derselben Cover-Skalierung wie das Basisbild, damit die
     animierten Hexagons auf 16:9, Ultrawide und kleineren Fenstern gleich groß
     wie die Hexagons im Hintergrund bleiben. */
  --theme-hex-overlay-size: max(23.86vw, 42.40vh) max(13.78vw, 24.48vh);
  --theme-hex-overlay-repeat: repeat;
  --theme-hex-overlay-opacity: .36;
  --theme-hex-motion: 70s;
  --theme-hex-drift-x: max(47.72vw, 84.80vh);
  --theme-hex-drift-y: max(27.56vw, 48.96vh);
  /* Die großen Glow-Flächen sind bewusst unsichtbar.
     Dadurch wird der Bildschirm beim Animieren nicht mehr heller; nur das
     Hexagon-Raster bewegt sich. Die Technik bleibt im Core vorhanden, falls
     du den Effekt später über diese vier Werte wieder aktivieren möchtest. */
  --theme-glow-a: var(--brand-accent);
  --theme-glow-b: var(--brand-primary);
  --theme-glow-size: 52vw;
  --theme-glow-max: 760px;
  --theme-glow-blur: 82px;
  --theme-glow-blend: normal;
  --theme-motion-a: 26s;
  --theme-motion-b: 32s;
  --theme-glow-a-opacity-from: 0;
  --theme-glow-a-opacity-to: 0;
  --theme-glow-b-opacity-from: 0;
  --theme-glow-b-opacity-to: 0;
  /* ------------------------------------------------------------------------
     MOD-LOG PILLS – semantische Farben, auf Schwarz/Gold etwas gedeckter.
     Nur diese Variablen ändern, wenn du die Mod-Log-Farben anpassen willst.
     ------------------------------------------------------------------------ */
  --modlog-danger-rgb: 223,98,109;
  --modlog-danger-text: #f0a2aa;
  --modlog-warning-rgb: 213,170,77;
  --modlog-warning-text: #e8cb86;
  --modlog-success-rgb: 59,201,133;
  --modlog-success-text: #9adfbd;
  --modlog-neutral-rgb: 142,135,121;
  --modlog-neutral-text: #c8c0b0;
  --modlog-account-rgb: 164,124,207;
  --modlog-account-text: #d6bce8;
  --modlog-wheel-rgb: 183,122,30;
  --modlog-wheel-text: #e6c47d;
  --modlog-vip-rgb: 213,159,61;
  --modlog-vip-text: #efd18f;
  --modlog-subathon-rgb: 190,92,147;
  --modlog-subathon-text: #dda9c8;
  --modlog-poll-rgb: 89,145,191;
  --modlog-poll-text: #aecce5;
  --modlog-giveaway-rgb: 200,105,112;
  --modlog-giveaway-text: #e5afb4;
  --modlog-bingo-rgb: 199,123,64;
  --modlog-bingo-text: #e5b58f;
  --modlog-challenge-rgb: 78,166,121;
  --modlog-challenge-text: #a9d9bf;
  --modlog-arena-rgb: 207,123,49;
  --modlog-arena-text: #e8b587;
  --modlog-chat-rgb: 105,182,199;
  --modlog-chat-text: #b0d8df;
  --modlog-automod-rgb: 205,92,99;
  --modlog-automod-text: #e4a9ad;
  --modlog-points-rgb: 190,151,60;
  --modlog-points-text: #e2c882;
  --modlog-timed-rgb: 113,126,170;
  --modlog-timed-text: #bdc5df;
  --modlog-goals-rgb: 83,162,171;
  --modlog-goals-text: #acd4d8;
  --modlog-moderation-rgb: 151,118,173;
  --modlog-moderation-text: #ceb9db;
  --modlog-skin-rgb: 171,104,165;
  --modlog-skin-text: #d8b2d4;
  --modlog-creature-rgb: 83,161,118;
  --modlog-creature-text: #acd5bd;
  --modlog-generic-rgb: 132,124,108;
  --modlog-generic-text: #cbc2af;
  /* Login/Sonderseiten */
  --theme-auth-card-start-rgb: 28,22,12;
  --theme-auth-card-end-rgb: 8,7,5;
  --theme-auth-card-start-alpha: .78;
  --theme-auth-card-end-alpha: .93;
  /* Logo – Bewegung ja, Schimmer bewusst sehr dezent */
}

/* ============================================================================
   GLOBALE EIN DENNY-OPTIK
   Ab hier möglichst nur Variablen benutzen – keine neuen festen Markenfarben.
   ============================================================================ */


.sidebar {
  background: linear-gradient(180deg, rgba(var(--theme-bg-3-rgb),.99), rgba(var(--theme-bg-rgb),.995)), var(--theme-bg-2) !important;
  border-right-color: rgba(var(--brand-primary-rgb),.18) !important;
}

.sidebar-brand,
.sidebar-nav a {
  color: var(--theme-text) !important;
}

.sidebar-brand .sub,
.sidebar-nav a:not(.active),
.sidebar-section-label {
  color: var(--theme-text-dim);
}

.sidebar-area-label.mod {
  color: var(--brand-soft) !important;
}

.sidebar-area-label.streamer {
  color: var(--brand-accent) !important;
}

.sidebar-nav a:hover:not(.active) {
  background: rgba(var(--brand-primary-rgb),.075) !important;
  border-color: rgba(var(--brand-primary-rgb),.16) !important;
}

.sidebar-nav a.active {
  background: linear-gradient(135deg, var(--nav-active-start), var(--nav-active-end)) !important;
  border-color: rgba(var(--brand-accent-rgb),.48) !important;
  color: var(--nav-active-text) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 10px 24px -15px rgba(var(--brand-primary-rgb),.56) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.46);
}

.sidebar-nav a.active svg,
.sidebar-nav a.active i {
  color: var(--brand-soft) !important;
}

.sidebar-nav a.active .soon-tag,
.sidebar-nav a.active .account-nav-soon {
  color: var(--brand-soft) !important;
}

.topbar {
  background: linear-gradient(140deg, rgba(var(--brand-primary-rgb),.055), rgba(var(--theme-bg-2-rgb),.76)) !important;
  border-color: rgba(var(--brand-primary-rgb),.2) !important;
  box-shadow: 0 22px 50px -34px rgba(var(--brand-primary-rgb),.34) !important;
}

.glow-card,
.card,
.panel-card,
.stat-card {
  border-color: var(--theme-border);
}

.glow-card {
  background: linear-gradient(155deg, rgba(var(--theme-surface-2-rgb),.76), rgba(var(--theme-bg-2-rgb),.86)) !important;
  box-shadow: 0 24px 58px -38px rgba(var(--brand-primary-rgb),.26), 0 22px 54px -32px rgba(0,0,0,.52) !important;
}

.glow-card:hover {
  border-color: rgba(var(--brand-accent-rgb),.38) !important;
  box-shadow: 0 28px 66px -36px rgba(var(--brand-primary-rgb),.28), 0 26px 58px -30px rgba(0,0,0,.5) !important;
}

.input,
select,
textarea,
input[type="text"],
input[type="number"],
input[type="search"],
input[type="url"] {
  background-color: rgba(var(--theme-surface-rgb),.92);
}

.input:hover {
  border-color: rgba(var(--brand-primary-rgb),.34) !important;
}

.input:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: rgba(var(--brand-accent-rgb),.72) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb),.11) !important;
}

.custom-select-list {
  background: var(--theme-surface-2) !important;
}

.custom-select-item.selected {
  background: rgba(var(--brand-primary-rgb),.18) !important;
  color: var(--brand-soft) !important;
}

/* Primäre Buttons: dunkles Bronze statt sehr hellem Gelb */
.btn:not(.secondary):not(.btn-ghost):not(.btn-discord):not(.btn-twitch):not(.danger),
.btn-brand,
button.btn-brand {
  background: linear-gradient(135deg, var(--button-start), var(--button-end)) !important;
  border-color: rgba(var(--brand-accent-rgb),.42) !important;
  color: var(--button-text) !important;
  box-shadow: 0 10px 24px -15px rgba(var(--brand-primary-rgb),.52) !important;
}

.btn:not(.secondary):not(.btn-ghost):not(.btn-discord):not(.btn-twitch):not(.danger):hover,
.btn-brand:hover {
  filter: brightness(1.08);
  border-color: rgba(var(--brand-accent-rgb),.62) !important;
}

.btn-twitch {
  background: rgba(var(--brand-primary-rgb),.09) !important;
  border-color: rgba(var(--brand-primary-rgb),.32) !important;
  color: var(--brand-soft) !important;
}

.btn-twitch:hover {
  background: rgba(var(--brand-primary-rgb),.15) !important;
  border-color: rgba(var(--brand-accent-rgb),.5) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--brand-primary-rgb),.28) !important;
  background-clip: padding-box !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--brand-primary-rgb),.46) !important;
  background-clip: padding-box !important;
}

/* ============================================================================
   ZUSCHAUER / ACCOUNT
   ============================================================================ */

.account-notification-drawer {
  border-left-color: rgba(var(--brand-primary-rgb),.28) !important;
  background:
    radial-gradient(circle at 90% 3%, rgba(var(--brand-primary-rgb),.12), transparent 28%),
    linear-gradient(160deg, var(--theme-bg-3), var(--theme-bg) 70%) !important;
}

.account-message-tabs button.active,
.account-notification-item.unread,
.notification-icon,
.mail-letter-avatar,
.mail-bubble-mine,
.mail-bubble-staff {
  border-color: rgba(var(--brand-primary-rgb),.3) !important;
  background-color: rgba(var(--brand-primary-rgb),.09) !important;
}

.mail-letter-avatar,
.notification-icon.mail {
  background: linear-gradient(145deg, rgba(var(--brand-accent-rgb),.13), rgba(var(--brand-primary-rgb),.10)) !important;
}

.account-notification-empty span {
  filter: drop-shadow(0 0 18px rgba(var(--brand-primary-rgb),.42)) !important;
}

.account-gift-button span {
  background: var(--brand-accent) !important;
}

.mail-prize-badge .mail-prize-name {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-soft), var(--brand-accent), var(--brand-primary)) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* ============================================================================
   ARENA – alle großen Flächen jetzt Schwarz/Gold statt Bunny-Lila
   ============================================================================ */

.game-hub-intro {
  border-color: rgba(var(--brand-primary-rgb),.28) !important;
  background:
    radial-gradient(circle at 76% 30%, rgba(var(--status-info-rgb),.07), transparent 25%),
    radial-gradient(circle at 90% 15%, rgba(var(--brand-primary-rgb),.15), transparent 29%),
    linear-gradient(120deg, rgba(var(--theme-surface-2-rgb),.98), rgba(var(--theme-bg-rgb),.98)) !important;
  box-shadow: inset 0 0 55px rgba(var(--brand-primary-rgb),.045), 0 18px 45px rgba(0,0,0,.22) !important;
}

.arena-casino-art {
  filter: drop-shadow(0 0 18px rgba(var(--brand-primary-rgb),.38)) !important;
}

.arena-casino-art span {
  background: linear-gradient(145deg, rgba(var(--theme-surface-3-rgb),.96), rgba(var(--theme-bg-rgb),.98)) !important;
}

.arena-casino-art span:first-child {
  color: var(--status-info) !important;
}

.arena-casino-art span:nth-child(2),
.arena-casino-art b {
  color: var(--brand-accent) !important;
  text-shadow: 0 0 18px rgba(var(--brand-accent-rgb),.44) !important;
}

.arena-casino-art i {
  color: var(--brand-soft) !important;
  border-color: var(--brand-soft) !important;
}

.game-hub-card {
  background:
    radial-gradient(circle at 8% 78%, color-mix(in srgb,var(--game-accent) 9%,transparent), transparent 29%),
    linear-gradient(145deg, rgba(var(--theme-surface-rgb),.97), rgba(var(--theme-bg-rgb),.99)) !important;
}

.game-hub-card-visual {
  background: radial-gradient(circle, color-mix(in srgb,var(--game-accent) 14%,transparent), rgba(var(--theme-bg-rgb),.88) 68%) !important;
}

.cases-card {
  --game-accent: var(--game-cases) !important;
}

.crash-card {
  --game-accent: var(--game-crash) !important;
}

.plinko-card {
  --game-accent: var(--game-plinko) !important;
}

.blackjack-card {
  --game-accent: var(--game-blackjack) !important;
}

.duell-card {
  --game-accent: var(--game-duell) !important;
}

.royale-card {
  --game-accent: var(--game-royale) !important;
}

.chicken-card {
  --game-accent: var(--game-chicken) !important;
}

.roulette-card {
  --game-accent: var(--game-roulette) !important;
}

.game-hub-card:hover .game-card-arrow {
  border-color: var(--brand-accent) !important;
  background: rgba(var(--brand-accent-rgb),.10) !important;
}

.game-live-chip.hot {
  color: var(--brand-soft) !important;
  border-color: rgba(var(--brand-accent-rgb),.48) !important;
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb),.35), rgba(var(--brand-secondary-rgb),.34)) !important;
  box-shadow: 0 0 16px rgba(var(--brand-primary-rgb),.20) !important;
}

.game-hub-card::after {
  background: radial-gradient(circle, rgba(var(--brand-primary-rgb),.14), transparent 68%) !important;
}

.premium-stack::before {
  background:
    radial-gradient(circle at 72% 22%, rgba(var(--brand-secondary-rgb),.12), transparent 31%),
    radial-gradient(circle at 36% 80%, rgba(var(--brand-primary-rgb),.055), transparent 34%) !important;
}

.premium-section-title > span {
  border-color: rgba(var(--brand-primary-rgb),.28) !important;
  background: linear-gradient(145deg, rgba(var(--brand-primary-rgb),.15), rgba(var(--brand-secondary-rgb),.08)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(var(--brand-secondary-rgb),.16) !important;
}

.premium-money-input {
  border-color: rgba(var(--brand-primary-rgb),.26) !important;
  background: rgba(var(--theme-bg-rgb),.72) !important;
}

.premium-empty span {
  filter: drop-shadow(0 0 16px rgba(var(--brand-primary-rgb),.36)) !important;
}

/* ============================================================================
   EXTRA COINS
   ============================================================================ */

.ec-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--brand-primary-rgb),.18), transparent 38%),
    linear-gradient(135deg, rgba(var(--theme-surface-3-rgb),.92), rgba(var(--theme-bg-2-rgb),.96)) !important;
  border-color: rgba(var(--brand-primary-rgb),.24) !important;
}

.ec-hero-glow {
  background: radial-gradient(circle, rgba(var(--brand-primary-rgb),.24), transparent 70%) !important;
}

.ec-hero-progress-fill {
  background: linear-gradient(90deg, var(--status-ok), var(--brand-primary), var(--brand-accent)) !important;
}

.ec-platform-card::before {
  background: var(--brand-primary) !important;
}

.ec-platform-card:hover {
  border-color: rgba(var(--brand-accent-rgb),.46) !important;
}

.ec-platform-icon {
  background: rgba(var(--theme-surface-3-rgb),.9) !important;
}

.ec-claim-btn:not(.approved-btn):not(.pending-btn) {
  background: linear-gradient(135deg, var(--button-start), var(--button-end)) !important;
  color: var(--button-text) !important;
}

.ec-platform-amount {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
  color: var(--brand-ink) !important;
  box-shadow: 0 2px 10px -2px rgba(var(--brand-primary-rgb),.34) !important;
}

/* ============================================================================
   BUNNYVERSE / CREATURE STUDIO / DROPS – Oberfläche gold, Karten dürfen ihre
   eigenen Inhalts-/Rarity-Farben behalten.
   ============================================================================ */

.cd-hero {
  border-color: rgba(var(--brand-primary-rgb),.28) !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(var(--brand-primary-rgb),.18), transparent 36%),
    linear-gradient(135deg, rgba(var(--theme-surface-3-rgb),.96), rgba(var(--theme-bg-2-rgb),.98)) !important;
}

.drop-live-card {
  border-color: rgba(var(--brand-primary-rgb),.34) !important;
  background: radial-gradient(circle at 85% 0, rgba(var(--brand-primary-rgb),.12), transparent 45%), rgba(255,255,255,.025) !important;
}

.drop-finish,
.cd-profile-note b,
.capture-head b {
  color: var(--brand-soft) !important;
}

.cd-profile-note,
.capture-settings {
  border-color: rgba(var(--brand-primary-rgb),.24) !important;
  background: rgba(var(--brand-primary-rgb),.055) !important;
}

.capture-checks input {
  accent-color: var(--brand-primary) !important;
}

.capture-summary i {
  border-color: rgba(var(--brand-primary-rgb),.25) !important;
  background: rgba(var(--brand-primary-rgb),.07) !important;
  color: var(--brand-soft) !important;
}

.cc-hero {
  border-color: rgba(var(--brand-primary-rgb),.28) !important;
  background:
    radial-gradient(circle at 82% 45%, rgba(var(--brand-primary-rgb),.17), transparent 28%),
    radial-gradient(circle at 66% 60%, rgba(var(--brand-secondary-rgb),.14), transparent 34%),
    linear-gradient(145deg, var(--theme-surface-3), var(--theme-bg) 72%) !important;
}

.cc-hero h1 span {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-soft), var(--brand-accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.cc-pill {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
  color: var(--brand-ink) !important;
}

.cc-stats article,
.dex-card {
  background: linear-gradient(145deg, rgba(var(--theme-surface-2-rgb),.94), rgba(var(--theme-bg-rgb),.98)) !important;
}

.cc-tabs {
  background: rgba(var(--theme-bg-rgb),.7) !important;
}

.cc-tabs button.active {
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb),.22), rgba(var(--brand-secondary-rgb),.18)) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb),.27) !important;
}

.dex-card:hover {
  border-color: rgba(var(--brand-primary-rgb),.33) !important;
}

/* Rarity-Tokens zentral */
.rarity-common {
  --tier: var(--rarity-common) !important;
}

.rarity-rare {
  --tier: var(--rarity-rare) !important;
}

.rarity-epic {
  --tier: var(--rarity-epic) !important;
}

.rarity-legendary {
  --tier: var(--rarity-legendary) !important;
}

.rarity-mythic {
  --tier: var(--rarity-mythic) !important;
}

/* ============================================================================
   LOGIN / SPLASH / FOOTER
   ============================================================================ */

.login-card.hero {
  background: linear-gradient(155deg, rgba(var(--theme-surface-3-rgb),.82), rgba(var(--theme-bg-rgb),.92)) !important;
  box-shadow: 0 34px 82px -44px rgba(var(--brand-primary-rgb),.30), 0 30px 70px -34px rgba(0,0,0,.65) !important;
}

.panel-splash.welcome,
.panel-splash.goodbye {
  background: radial-gradient(circle at 50% 40%, rgba(var(--brand-primary-rgb),.20), rgba(var(--theme-bg-rgb),.98) 70%) !important;
}

.panel-splash-title {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-soft), var(--brand-accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.sidebar-copyright .creator-credit,
.login-copyright .creator-credit {
  color: var(--brand-muted) !important;
}

.sidebar-copyright .creator-credit:hover,
.login-copyright .creator-credit:hover,
.creator-credit strong {
  color: var(--brand-soft) !important;
}

/* ============================================================================
   BARRIEREFREIHEIT / KONTRAST
   ============================================================================ */

::selection {
  background: rgba(var(--brand-primary-rgb),.34);
  color: var(--theme-text);
}

:focus-visible {
  outline-color: var(--brand-accent);
}

@media (prefers-contrast: more) {
  :root {
    --theme-text-dim: #d8d0bf;
    --theme-text-faint: #aaa18f;
    --theme-border: rgba(213,159,61,.42);
  }
}

/* Account-Logout-Splash wird von account-sidebar.js dynamisch erzeugt. */
.goodbye-splash {
  background: radial-gradient(circle at 50% 40%, rgba(var(--brand-primary-rgb),.20), rgba(var(--theme-bg-rgb),.98) 70%) !important;
}

.goodbye-splash-name {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-soft), var(--brand-accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}