:root {
  --pro-bg: #07111f;
  --pro-bg-soft: #0d1830;
  --pro-surface: linear-gradient(180deg, rgba(9, 18, 36, 0.76), rgba(7, 13, 28, 0.74));
  --pro-surface-soft: linear-gradient(180deg, rgba(12, 22, 42, 0.58), rgba(8, 14, 30, 0.56));
  --pro-surface-strong: linear-gradient(180deg, rgba(9, 18, 36, 0.88), rgba(7, 13, 28, 0.86));
  --pro-border: rgba(151, 184, 255, 0.12);
  --pro-border-strong: rgba(151, 184, 255, 0.22);
  --pro-text: #f5f8ff;
  --pro-muted: #b4c0da;
  --pro-faint: #8d9ab7;
  --pro-accent: #4a86ff;
  --pro-accent-strong: #265ee8;
  --pro-success: #2bd18b;
  --pro-warning: #f5a623;
  --pro-danger: #ef5454;
  --pro-shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.26);
  --pro-shadow-md: 0 14px 42px rgba(0, 0, 0, 0.18);
  --pro-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.12);
  --pro-radius-xl: 28px;
  --pro-radius-lg: 22px;
  --pro-radius-md: 18px;
  --pro-radius-sm: 14px;
}

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

body {
  color: var(--pro-text);
  background:
    linear-gradient(rgba(6, 10, 20, 0.32), rgba(6, 10, 20, 0.54)),
    var(--cc-hero-image, var(--theme-bg, url('/assets/yggdrasil.png'))) center center / cover no-repeat fixed !important;
  background-color: var(--pro-bg) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 146, 94, 0.14), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(107, 160, 255, 0.12), transparent 22%),
    linear-gradient(180deg, rgba(8, 12, 24, 0.06), rgba(8, 12, 24, 0.28)),
    var(--cc-hero-image, var(--theme-bg, url('/assets/yggdrasil.png'))) center center / cover no-repeat fixed;
  opacity: 0.92;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at top center, rgba(255,255,255,0.06), transparent 32%),
    linear-gradient(180deg, rgba(5, 9, 18, 0.02), rgba(5, 9, 18, 0.16));
}

body, button, input, textarea, select {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; }

.topbar,
.hero,
.heroWide,
.compactHero,
.dashboardHero,
.dashboardHeroCompact,
.card,
.cardSurface,
.section,
.summaryBox,
.shellCard,
.offerCard,
.checkoutCard,
.checkoutPanel,
.worldImportCard,
.configCard,
.serverHero,
.consoleCard,
.sideStatsCard,
.lowerInfoCard,
.passwordConfirmDialog,
.auth-showcase,
.auth-container,
.auth-shell > div,
.choiceCard,
.panelBox,
.infoNote,
.emptyBox,
.selectedInfoHero,
.summaryCardHeader,
.box,
.profileBox,
.serverBox,
.createCard,
.miniCreateBlock,
.ticketCreateCard,
.ticketCreatePanel,
.auditCompactItem,
.auditItem,
.entryCard,
.latestEntryCard,
.paymentBox,
.propertiesCard,
.infoCard,
.priceBox,
.selectedInfo,
.serverPreviewCard,
.gameCard,
.lifecyclePage .card,
.ordersPage .card,
.container > .card,
.container > .topbar,
.page > .card,
.page > .topbar {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius-lg) !important;
  box-shadow: var(--pro-shadow-lg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar,
.hero,
.dashboardHero,
.serverHero,
.checkoutHeader,
.sectionHeaderBar,
.headerRow,
.titleBlock {
  position: relative;
  overflow: hidden;
}

.topbar::before,
.hero::before,
.dashboardHero::before,
.serverHero::before,
.checkoutCard::before,
.card::before,
.section::before,
.panelBox::before,
.auth-showcase::before,
.auth-container::before,
.profileBox::before,
.serverBox::before,
.createCard::before,
.choiceCard::before,
.gameCard::before,
.lifecyclePage .card::before,
.ordersPage .card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.045), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 28%);
}

.topbar::after,
.hero::after,
.dashboardHero::after,
.serverHero::after,
.checkoutCard::after,
.card::after,
.section::after,
.panelBox::after,
.auth-showcase::after,
.auth-container::after,
.profileBox::after,
.serverBox::after,
.createCard::after,
.choiceCard::after,
.gameCard::after,
.lifecyclePage .card::after,
.ordersPage .card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.dashboardSummaryCard,
.dashboardIdentityCard,
.statCard,
.miniStatCard,
.miniInfoCard,
.inlineStat,
.ticketListItem,
.ticketBubble,
.auditRow,
.auditMeta,
.summaryItem,
.serverMeta,
.serverMetaRow,
.serverInfoItem,
.serverGrid > div,
.tableWrap,
.formGroup,
.actionsGrid .choiceCard,
.filtersRow .input,
.selectInline,
.searchBar,
.toolbarCard,
.statusCard {
  background: var(--pro-surface-soft) !important;
  border: 1px solid rgba(151, 184, 255, 0.10) !important;
  border-radius: var(--pro-radius-md) !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

h1, h2, h3, h4, h5, .title, .sectionTitle, .brandName, .heroTitle, .miniCreateTitle, .summaryOfferName {
  color: var(--pro-text) !important;
  letter-spacing: -0.02em;
}

p, .muted, .subtitle, .sectionSub, .helperNote, .checkoutEyebrow, .dashboardEyebrow, .eyebrow, .infoPill, .statLabel, .auth-container p, .auth-showcase p, .auth-showcase li, .serverSub, .subtle, .card p {
  color: var(--pro-muted) !important;
}

.eyebrow,
.dashboardEyebrow,
.checkoutEyebrow,
.auth-badge,
.brandBadge,
.pill,
.badge,
.infoPill {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--pro-text) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

button,
.btn,
.linkBtn,
a.btn,
a.linkBtn,
button[type="submit"],
.posterBtn,
.btnPrimary,
.btn-primary,
.button-primary {
  border-radius: 14px !important;
  border: 1px solid rgba(126, 165, 255, 0.22) !important;
  background: linear-gradient(180deg, rgba(76, 134, 255, 0.96), rgba(37, 96, 232, 0.98)) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(36, 97, 231, 0.24) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
}

button:hover,
.btn:hover,
.linkBtn:hover,
a.btn:hover,
a.linkBtn:hover,
button[type="submit"]:hover,
.posterBtn:hover,
.btnPrimary:hover,
.btn-primary:hover,
.button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(36, 97, 231, 0.28) !important;
  filter: brightness(1.04);
}

.secondary,
.btn.secondary,
.linkBtn.secondary,
.btnGhost,
.btnGray,
.btn-secondary,
.button-secondary,
button.secondary,
a.secondary,
#backToLoginBtn {
  background: linear-gradient(180deg, rgba(121, 136, 165, 0.88), rgba(88, 102, 129, 0.92)) !important;
  border-color: rgba(214, 222, 238, 0.12) !important;
  color: #f6f9ff !important;
  box-shadow: 0 8px 22px rgba(10, 16, 30, 0.14) !important;
}

.warning,
.btn.warning,
.warningBtn,
button.warning {
  background: linear-gradient(180deg, rgba(245, 170, 36, 0.96), rgba(213, 122, 13, 0.98)) !important;
  border-color: rgba(255, 213, 141, 0.18) !important;
}

.danger,
.btn.danger,
.dangerBtn,
button.danger,
.btnRed {
  background: linear-gradient(180deg, rgba(241, 86, 86, 0.96), rgba(196, 44, 44, 0.98)) !important;
  border-color: rgba(255, 176, 176, 0.18) !important;
}

.success,
.btn.success,
.successBtn,
button.success,
.btnGreen {
  background: linear-gradient(180deg, rgba(45, 206, 139, 0.96), rgba(18, 158, 101, 0.98)) !important;
  border-color: rgba(146, 247, 205, 0.18) !important;
}

input,
select,
textarea,
.formInput,
.input,
.field input,
.field select,
.field textarea {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: var(--pro-text) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

input::placeholder,
textarea::placeholder {
  color: rgba(194, 205, 229, 0.72) !important;
}

input:focus,
select:focus,
textarea:focus,
.formInput:focus,
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(118, 162, 255, 0.26) !important;
  box-shadow: 0 0 0 3px rgba(74, 134, 255, 0.14) !important;
  background: rgba(255,255,255,0.06) !important;
}

.status,
#result,
#dashboardStatus,
.pageStatus,
.infoNote,
.notice,
.banner,
.alert {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.status.success, .successBanner, .alert-success {
  background: rgba(20, 115, 74, 0.30) !important;
  color: #dcfce7 !important;
}
.status.error, .errorBanner, .alert-error {
  background: rgba(124, 24, 24, 0.34) !important;
  color: #fee2e2 !important;
}
.status.loading, .alert-info {
  background: rgba(41, 57, 86, 0.34) !important;
  color: #e8efff !important;
}

.tableWrap,
table,
.dataTable {
  color: var(--pro-text);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  color: #d7e4ff !important;
  background: rgba(4, 13, 30, 0.20) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

tbody td,
tbody th {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

tbody tr:hover {
  background: rgba(255,255,255,0.018) !important;
}

.topbar,
.headerRow,
.ticketCreateHeaderRow,
.sectionHeaderInline,
.sectionHeaderBar,
.checkoutHeader,
.dashboardHeroActions,
.actionsRow,
.topButtons {
  gap: 12px;
}

.ticketListItem.active,
.navLink.active,
.navLink:hover,
.sidebarLink.active,
.tabBtn.active {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.10) !important;
}

.posterOverlay,
.heroBackdrop {
  opacity: 0.68 !important;
}

@media (max-width: 900px) {
  .topbar,
  .hero,
  .dashboardHero,
  .card,
  .section,
  .checkoutCard,
  .auth-showcase,
  .auth-container {
    border-radius: 20px !important;
  }
}

/* =========================================================
   TARGETED TUNING - remove big ugly blue blocks on admin pages
========================================================= */

/* Admin offers: sidebar game cards + hero stats + detail cards */
.rootOffersPage .rootOffersHeroCard,
.rootOffersPage .rootGamesSidebar,
.rootOffersPage .rootGameDetailCard,
.rootOffersPage .rootOffersPanel,
.rootOffersPage .rootOfferCard,
.rootOffersPage .rootOfferCardCompact {
  background: linear-gradient(180deg, rgba(9, 18, 36, 0.72), rgba(7, 13, 28, 0.68)) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18) !important;
}

.rootOffersPage .rootOfferHeroStat,
.rootOffersPage .rootOfferSpec,
.rootOffersPage .rootOfferField {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.07) !important;
}

.rootOffersPage .rootGameNavItem {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.022)) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.rootOffersPage .rootGameNavItem:hover,
.rootOffersPage .rootGameNavItem.is-active {
  background: linear-gradient(180deg, rgba(103, 142, 223, 0.18), rgba(48, 81, 152, 0.14)) !important;
  border-color: rgba(138, 175, 255, 0.22) !important;
  box-shadow: 0 10px 24px rgba(10,16,30,0.14), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.rootOffersPage .rootGameHero,
.rootOffersPage .rootOfferHero {
  background: linear-gradient(180deg, rgba(8, 16, 32, 0.44), rgba(8, 16, 32, 0.18)) !important;
}

.rootOffersPage .rootGamePills .pill,
.rootOffersPage .rootOfferBadge {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

/* Admin promos: keep form readable but avoid electric blue selects */
.rootPromosPage .rootPromosFormCard,
.rootPromosPage .rootPromosListCard,
.rootPromosPage .rootPromoCard {
  background: linear-gradient(180deg, rgba(9, 18, 36, 0.74), rgba(7, 13, 28, 0.70)) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18) !important;
}

.rootPromosPage .rootOfferSelect,
.rootPromosPage select,
.rootPromosPage input,
.rootPromosPage textarea {
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* Changelog admin: selected cards were too blue */
.changelogAdminPage .changelogHero,
.changelogAdminPage .changelogComposer,
.changelogAdminPage .changelogWorkspace,
.changelogAdminPage .changelogListPanel,
.changelogAdminPage .changelogDetailPanel,
.changelogAdminPage .quickStat,
.changelogAdminPage .detailMetaCard,
.changelogAdminPage .contentCard,
.changelogAdminPage .commentsCard {
  background: linear-gradient(180deg, rgba(9, 18, 36, 0.74), rgba(7, 13, 28, 0.70)) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18) !important;
}

.changelogAdminPage .changelogItem {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.022)) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.changelogAdminPage .changelogItem:hover {
  background: linear-gradient(180deg, rgba(101, 140, 218, 0.16), rgba(56, 86, 151, 0.12)) !important;
  border-color: rgba(134, 171, 255, 0.20) !important;
}

.changelogAdminPage .changelogItem.active {
  background: linear-gradient(180deg, rgba(104, 145, 230, 0.22), rgba(55, 87, 162, 0.16)) !important;
  border-color: rgba(143, 179, 255, 0.24) !important;
  box-shadow: 0 12px 26px rgba(8, 14, 28, 0.18), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.changelogAdminPage .changelogStatusBar {
  background: rgba(28, 110, 74, 0.28) !important;
  border-color: rgba(100, 204, 154, 0.18) !important;
}

/* Lifecycle page: keep same DA but soften saturated controls */
.lifecyclePage .statCard,
.lifecyclePage .filters,
.lifecyclePage .tableCard,
.lifecyclePage .card {
  box-shadow: 0 18px 44px rgba(0,0,0,0.18) !important;
}

.lifecyclePage select,
.lifecyclePage .filters select,
.lifecyclePage .filters button:not(.warning):not(.danger):not(.success),
.lifecyclePage .filters .btn:not(.warning):not(.danger):not(.success) {
  background: linear-gradient(180deg, rgba(101, 140, 218, 0.18), rgba(50, 84, 156, 0.14)) !important;
  border-color: rgba(136, 172, 255, 0.20) !important;
  box-shadow: 0 8px 20px rgba(10,16,30,0.12) !important;
}


/* Fix dropdown visibility on admin-lifecycle */
.lifecyclePage,
.lifecyclePage .headerRow,
.lifecyclePage .filtersRow,
.lifecyclePage .filtersRow > * {
  position: relative;
}

.lifecyclePage .filtersRow {
  z-index: 40;
}

.lifecyclePage .filtersRow .selectInline,
.lifecyclePage .filtersRow select,
.lifecyclePage .filtersRow .input {
  position: relative;
  z-index: 60;
}

.lifecyclePage .filtersRow,
.lifecyclePage .filtersRow > div,
.lifecyclePage .card,
.lifecyclePage .tableWrap {
  overflow: visible !important;
}

.lifecyclePage section.card:nth-of-type(2) {
  position: relative;
  z-index: 50;
}

.lifecyclePage section.card:nth-of-type(3) {
  position: relative;
  z-index: 10;
}
/* Ajustement espacement label / valeur dans les stats lifecycle */
.lifecyclePage .statsGrid .statCard,
.lifecyclePage .lifecycleStatsWrap .statCard,
.lifecyclePage .summaryGrid .statCard {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
}

.lifecyclePage .statsGrid .statCard .label,
.lifecyclePage .lifecycleStatsWrap .statCard .label,
.lifecyclePage .summaryGrid .statCard .label,
.lifecyclePage .statsGrid .statCard .statLabel,
.lifecyclePage .lifecycleStatsWrap .statCard .statLabel,
.lifecyclePage .summaryGrid .statCard .statLabel {
  display: block !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.08em !important;
}

.lifecyclePage .statsGrid .statCard .value,
.lifecyclePage .lifecycleStatsWrap .statCard .value,
.lifecyclePage .summaryGrid .statCard .value,
.lifecyclePage .statsGrid .statCard .statValue,
.lifecyclePage .lifecycleStatsWrap .statCard .statValue,
.lifecyclePage .summaryGrid .statCard .statValue {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
}
/* ===== V3 soft premium refresh ===== */
:root {
  --pro-bg: #09111b;
  --pro-bg-soft: #111a28;
  --pro-surface: linear-gradient(180deg, rgba(10, 18, 30, 0.82), rgba(9, 15, 26, 0.78));
  --pro-surface-soft: linear-gradient(180deg, rgba(18, 28, 44, 0.56), rgba(11, 18, 31, 0.54));
  --pro-surface-strong: linear-gradient(180deg, rgba(12, 22, 38, 0.9), rgba(9, 16, 28, 0.88));
  --pro-border: rgba(180, 205, 255, 0.11);
  --pro-border-strong: rgba(143, 183, 255, 0.22);
  --pro-text: #f3f7ff;
  --pro-muted: #c4d0e3;
  --pro-faint: #95a4bd;
  --pro-accent: #8a7dff;
  --pro-accent-strong: #5a6cff;
  --pro-shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.32);
}

body::before {
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 129, 78, 0.16), transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(122, 135, 255, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(8, 12, 24, 0.12), rgba(8, 12, 24, 0.36)),
    var(--cc-hero-image, var(--theme-bg, url('/assets/yggdrasil.png'))) center center / cover no-repeat fixed;
  opacity: 0.96;
}

.topbar {
  background: linear-gradient(180deg, rgba(11, 18, 30, 0.84), rgba(9, 14, 24, 0.8)) !important;
  border-color: rgba(173, 194, 255, 0.13) !important;
}

.brandBadge {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.brandBadge img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.brandName {
  letter-spacing: -0.03em;
}

.heroBackdrop {
  filter: brightness(0.54) saturate(1.02) !important;
}

.hero h1,
.auth-showcase h1,
.dashboardHero h1 {
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

.hero p,
.auth-showcase p,
.sectionIntro,
.catalogSubcopy {
  color: rgba(231, 238, 250, 0.86) !important;
}

.linkBtn,
button,
.posterBtn {
  border-radius: 14px !important;
}

.linkBtn:not(.secondary),
button:not(.secondary):not(.ghostBtn):not(.linkBtn.secondary),
.posterBtn:not(.mutedBtn) {
  background: linear-gradient(135deg, #6f7cff, #ff8a5b) !important;
  border: none !important;
  box-shadow: 0 14px 30px rgba(65, 85, 180, 0.24) !important;
}

.linkBtn.secondary,
button.secondary,
.posterBtn.mutedBtn,
.navLink.active {
  background: rgba(255, 255, 255, 0.06) !important;
}

.gameCard,
.choiceCard,
.summaryBox,
.auth-container,
.auth-showcase,
.miniStatCard,
.salesBanner,
.catalogBlock {
  backdrop-filter: blur(12px) !important;
}

.gameDesc,
.muted,
.cardHint,
.hint,
.summaryLine,
.catalogMeta,
.selectedInfo {
  color: var(--pro-muted) !important;
}