/* ═══════════════════════════════════════════════════════════
   DrakoX Panel — Multi Language Liquid Glass UI
   Gray / White / Black · Monochrome Icons · Full Animation
═══════════════════════════════════════════════════════════ */
/* Google Fonts dimuat via <link> di head — tidak perlu @import di sini */

:root {
  /* Multi Language Gray Glass Palette */
  --ios-bg:          #1c1c1e;
  --ios-bg2:         #2c2c2e;
  --ios-bg3:         #3a3a3c;
  --ios-surface:     rgba(58,58,60,0.72);
  --ios-surface2:    rgba(72,72,74,0.60);
  --ios-glass:       rgba(255,255,255,0.08);
  --ios-glass2:      rgba(255,255,255,0.12);
  --ios-glass3:      rgba(255,255,255,0.06);
  --ios-border:      rgba(255,255,255,0.10);
  --ios-border2:     rgba(255,255,255,0.16);
  --ios-divider:     rgba(255,255,255,0.08);

  /* Text */
  --t1:  rgba(255,255,255,0.92);
  --t2:  rgba(255,255,255,0.55);
  --t3:  rgba(255,255,255,0.30);
  --t4:  rgba(255,255,255,0.15);

  /* iOS system gray tones (monochrome accent) */
  --acc:       rgba(255,255,255,0.75);
  --acc-soft:  rgba(255,255,255,0.12);
  --acc-glow:  rgba(255,255,255,0.06);

  /* Radius — Multi Language aggressively rounded */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Blur */
  --blur-sm:  blur(16px) saturate(160%);
  --blur-md:  blur(28px) saturate(180%);
  --blur-lg:  blur(40px) saturate(200%);

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);

  /* Timing */
  --ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-ios:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.18s;
  --dur-mid:  0.32s;
  --dur-slow: 0.5s;
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--ios-bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 20% 10%,  rgba(80,80,90,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 90%,  rgba(60,60,70,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(30,30,32,0.4) 0%, transparent 100%);
  background-attachment: fixed;
  font-family: 'Inter', -apple-system, 'SF Pro Display', BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'ss01','cv01';
  color: var(--t1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }

/* ── TYPOGRAPHY ────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: -0.025em; }
.mono { font-family: 'SF Mono','Fira Code',monospace; font-size: 0.85em; letter-spacing: 0.03em; }

/* ═══════════════════════════════════════════════════════
   PAGE TRANSITION — iOS slide-from-right
═══════════════════════════════════════════════════════ */
#page-shell {
  animation: iosSlideIn var(--dur-slow) var(--ease-spring);
  will-change: transform, opacity;
}
@keyframes iosSlideIn {
  from { opacity:0; transform: translateX(28px); }
  to   { opacity:1; transform: translateX(0); }
}

/* ── PAGE LOADER ─────────────────────────────────────── */
#pageLoader {
  position: fixed; inset: 0;
  background: var(--ios-bg);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  transition: opacity var(--dur-mid) var(--ease-ios),
              visibility var(--dur-mid) var(--ease-ios);
}
.ios-spinner {
  width: 40px; height: 40px;
  border: 2.5px solid rgba(255,255,255,0.10);
  border-top-color: rgba(255,255,255,0.65);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════
   NAVBAR — iOS liquid glass sticky
═══════════════════════════════════════════════════════ */
.ios-nav {
  position: sticky; top: 0; z-index: 900;
  background: rgba(28,28,30,0.80);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 0.5px solid var(--ios-border);
  padding: 0;
  height: 52px;
  display: flex; align-items: center;
  transition: background var(--dur-mid) var(--ease-ios);
}
.ios-nav .nav-inner {
  width: 100%; max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex; align-items: center;
  gap: 0;
}
.ios-nav .brand {
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t1);
  text-decoration: none;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.ios-nav .brand img.brand-logo {
  width: 28px; height: 28px;
  border-radius: 7px;
  object-fit: cover;
}
.ios-nav .brand-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--t2);
  display: inline-block;
  flex-shrink: 0;
}

/* Nav links row (desktop) */
.ios-nav .nav-links {
  display: flex; align-items: center;
  gap: 2px; margin-left: 16px; flex: 1;
  list-style: none;
}
.ios-nav .nav-links a {
  color: var(--t2);
  font-size: 0.82rem; font-weight: 500;
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  display: flex; align-items: center; gap: 5px;
  transition: background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}
.ios-nav .nav-links a:hover,
.ios-nav .nav-links a.active {
  color: var(--t1);
  background: var(--ios-glass2);
}
.ios-nav .nav-links i {
  font-size: 0.85rem;
  color: var(--t3);
  flex-shrink: 0;
}

/* Right side: balance + user */
.ios-nav .nav-right {
  display: flex; align-items: center;
  gap: 8px; margin-left: auto;
  list-style: none;
}
.balance-pill {
  background: var(--ios-glass);
  border: 0.5px solid var(--ios-border);
  border-radius: var(--r-pill);
  padding: 0.28rem 0.85rem;
  font-size: 0.75rem; color: var(--t2);
  display: flex; align-items: center; gap: 5px;
}
.balance-pill i { color: var(--t3); font-size: 0.78rem; }

/* Avatar button */
.avatar-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ios-surface);
  border: 0.5px solid var(--ios-border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
  color: var(--t1);
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.avatar-btn:hover { transform: scale(1.06); box-shadow: var(--shadow-sm); }

/* Dropdown */
.ios-dropdown {
  background: rgba(44,44,46,0.95);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 0.5px solid var(--ios-border2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 210px;
  animation: dropIn 0.18s var(--ease-spring);
  overflow: hidden;
}
@keyframes dropIn {
  from { opacity:0; transform: translateY(-8px) scale(0.96); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.dropdown-menu { /* Bootstrap override */
  background: rgba(44,44,46,0.97) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 0.5px solid var(--ios-border2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
  animation: dropIn 0.18s var(--ease-spring);
}
.dropdown-item {
  color: var(--t2) !important;
  font-size: 0.83rem !important;
  border-radius: var(--r-sm) !important;
  padding: 0.55rem 0.85rem !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  transition: background var(--dur-fast), color var(--dur-fast) !important;
}
.dropdown-item:hover { background: var(--ios-glass2) !important; color: var(--t1) !important; }
.dropdown-item i { color: var(--t3) !important; font-size: 0.85rem !important; flex-shrink: 0; }
.dropdown-item.text-danger { color: rgba(255,80,80,0.85) !important; }
.dropdown-item.text-danger:hover { background: rgba(255,60,60,0.10) !important; }
.dropdown-divider { border-color: var(--ios-divider) !important; margin: 4px 0 !important; }
.dropdown-item.text-muted {
  color: var(--t3) !important; font-size: 0.72rem !important;
  text-transform: uppercase; letter-spacing: 0.07em; pointer-events: none;
}

/* Hamburger — mobile */
.ios-hamburger {
  position: relative; z-index: 960;
  display: none;
  flex-direction: column; gap: 4px;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  cursor: pointer; margin-left: auto;
  border: none; background: var(--ios-glass);
  border-radius: var(--r-sm);
  border: 0.5px solid var(--ios-border);
  transition: background var(--dur-fast);
}
.ios-hamburger span {
  display: block; width: 16px; height: 1.5px;
  background: var(--t2); border-radius: 2px;
  transition: all var(--dur-mid) var(--ease-spring);
}
.ios-hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ios-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ios-hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── SLIDE DRAWER (mobile) ─────────────────────────────── */
.ios-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: 1040; /* FIX: was 800, must be > nav (900) */
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-ios);
}
.ios-drawer-overlay.visible { display: block; opacity: 1; }
.ios-drawer {
  position: fixed; top: 0; right: -100%;
  width: min(300px, 82vw); height: 100%;
  background: rgba(28,28,30,0.97);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-left: 0.5px solid var(--ios-border2);
  z-index: 1045; /* FIX: was 850, must be > overlay (1040) */
  transition: right var(--dur-slow) var(--ease-spring);
  display: flex; flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.ios-drawer.open { right: 0; }
.ios-drawer-header {
  padding: 56px 20px 16px;
  border-bottom: 0.5px solid var(--ios-divider);
  display: flex; align-items: center; gap: 12px;
}
.ios-drawer-header img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.ios-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 10px 8px;
}
.drawer-section-title {
  font-size: 0.68rem; font-weight: 600;
  color: var(--t3); text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 8px 12px 4px;
}
.drawer-item {
  display: flex; align-items: center; gap: 10px;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-md);
  color: var(--t2);
  font-size: 0.88rem; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.drawer-item:hover, .drawer-item:active {
  background: var(--ios-glass2); color: var(--t1);
  transform: translateX(2px);
}
.drawer-item i {
  width: 28px; height: 28px;
  background: var(--ios-glass);
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; color: var(--t3);
  flex-shrink: 0;
}
.drawer-item.danger i { background: rgba(255,60,60,0.10); color: rgba(255,80,80,0.7); }
.drawer-item.danger { color: rgba(255,80,80,0.8); }

/* ═══════════════════════════════════════════════════════
   GLASS CARDS
═══════════════════════════════════════════════════════ */
.card {
  background: var(--ios-surface) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 0.5px solid var(--ios-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform var(--dur-mid) var(--ease-spring),
              box-shadow var(--dur-mid) var(--ease-spring) !important;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg) !important;
}
.card-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 0.5px solid var(--ios-divider) !important;
  color: var(--t1) !important;
  padding: 12px 18px !important;
  font-size: 0.78rem !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.card-body { padding: 18px !important; }

/* Stat card */
.stat-card {
  background: var(--ios-glass);
  border: 0.5px solid var(--ios-border);
  border-radius: var(--r-lg);
  padding: 16px;
  transition: transform var(--dur-mid), box-shadow var(--dur-mid);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--ios-glass2);
  border: 0.5px solid var(--ios-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; color: var(--t2);
}

/* ═══════════════════════════════════════════════════════
   FORMS — iOS style
═══════════════════════════════════════════════════════ */
.form-control, .form-select {
  background: var(--ios-glass) !important;
  border: 0.5px solid var(--ios-border2) !important;
  border-radius: var(--r-md) !important;
  color: var(--t1) !important;
  font-size: 0.9rem !important;
  padding: 0.7rem 0.95rem !important;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast) !important;
  -webkit-appearance: none;
}
.form-control:focus, .form-select:focus {
  background: var(--ios-glass2) !important;
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.07) !important;
  color: var(--t1) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--t3); }
.form-label {
  font-size: 0.72rem; font-weight: 600;
  color: var(--t3); text-transform: uppercase;
  letter-spacing: 0.07em; margin-bottom: 5px;
  display: block;
}
.form-check-input {
  background-color: var(--ios-glass) !important;
  border-color: var(--ios-border2) !important;
  border-radius: 4px !important;
}
.form-check-input:checked {
  background-color: var(--t2) !important;
  border-color: var(--t2) !important;
  box-shadow: none !important;
}
.form-check-label { color: var(--t2); font-size: 0.85rem; }

/* Input group icons */
.input-wrapper {
  position: relative;
}
.input-wrapper .field-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--t3); font-size: 0.88rem; pointer-events: none;
  transition: color var(--dur-fast);
}
.input-wrapper .form-control:focus ~ .field-icon { color: var(--t2); }
.input-wrapper .form-control { padding-left: 2.5rem !important; }
.input-wrapper .eye-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--t3); cursor: pointer;
  font-size: 0.88rem; transition: color var(--dur-fast); padding: 0;
}
.input-wrapper .eye-btn:hover { color: var(--t2); }

/* ═══════════════════════════════════════════════════════
   BUTTONS — iOS pill style
═══════════════════════════════════════════════════════ */
.btn {
  border-radius: var(--r-md) !important;
  font-size: 0.88rem !important; font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: all var(--dur-fast) var(--ease-ios) !important;
  border: none !important;
  padding: 0.7rem 1.2rem !important;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(0.97) !important; }
.btn-primary {
  background: rgba(255,255,255,0.88) !important;
  color: #1c1c1e !important;
  box-shadow: 0 2px 12px rgba(255,255,255,0.12) !important;
}
.btn-primary:hover {
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 4px 20px rgba(255,255,255,0.18) !important;
}
.btn-outline-light {
  background: var(--ios-glass) !important;
  color: var(--t2) !important;
  border: 0.5px solid var(--ios-border2) !important;
}
.btn-outline-light:hover {
  background: var(--ios-glass2) !important; color: var(--t1) !important;
}
.btn-outline-danger {
  background: rgba(255,60,60,0.07) !important;
  color: rgba(255,80,80,0.8) !important;
  border: 0.5px solid rgba(255,60,60,0.18) !important;
}
.btn-outline-danger:hover { background: rgba(255,60,60,0.14) !important; }
.btn-sm { padding: 0.38rem 0.75rem !important; font-size: 0.78rem !important; }

/* ─── iOS Toggle Switch ─── */
.ios-toggle {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.ios-toggle input { display: none; }
.ios-toggle-track {
  width: 44px; height: 26px;
  border-radius: 13px;
  background: var(--ios-bg3);
  position: relative;
  transition: background var(--dur-fast);
  flex-shrink: 0;
}
.ios-toggle-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  position: absolute; top: 2px; left: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.ios-toggle input:checked ~ .ios-toggle-track { background: rgba(255,255,255,0.55); }
.ios-toggle input:checked ~ .ios-toggle-track .ios-toggle-thumb {
  transform: translateX(18px);
}

/* ═══════════════════════════════════════════════════════
   BADGE / PILL
═══════════════════════════════════════════════════════ */
.badge {
  border-radius: var(--r-pill) !important;
  font-size: 0.7rem !important; font-weight: 600 !important;
  padding: 0.25em 0.65em !important;
}
.badge.text-primary { background: var(--ios-glass2) !important; color: var(--t2) !important; }
.badge.text-dark   { background: var(--ios-glass)  !important; color: var(--t3) !important; }
.badge.text-muted  { background: var(--ios-glass)  !important; color: var(--t3) !important; }
code {
  background: var(--ios-glass2) !important;
  color: var(--t2) !important;
  border-radius: var(--r-xs) !important;
  padding: 0.15em 0.5em !important; font-size: 0.8em !important;
}

/* ═══════════════════════════════════════════════════════
   TABLE — minimal iOS style
═══════════════════════════════════════════════════════ */
.table {
  color: var(--t2) !important;
  font-size: 0.82rem !important;
}
.table thead tr th {
  background: rgba(255,255,255,0.03) !important;
  color: var(--t3) !important;
  font-size: 0.68rem !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 0.5px solid var(--ios-divider) !important;
  padding: 10px 14px !important;
  white-space: nowrap;
}
.table tbody tr td {
  border-bottom: 0.5px solid var(--ios-divider) !important;
  padding: 10px 14px !important; vertical-align: middle;
}
.table tbody tr:hover td { background: var(--ios-glass3); }
.table tbody tr:last-child td { border-bottom: none !important; }

/* ═══════════════════════════════════════════════════════
   CAPTCHA — iOS math verification
═══════════════════════════════════════════════════════ */
.ios-captcha {
  background: var(--ios-glass);
  border: 0.5px solid var(--ios-border2);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 14px;
}
.ios-captcha-label {
  font-size: 0.68rem; font-weight: 700;
  color: var(--t3); text-transform: uppercase;
  letter-spacing: 0.09em; margin-bottom: 10px;
}
.ios-captcha-question {
  font-size: 1.5rem; font-weight: 700;
  color: var(--t1); text-align: center;
  letter-spacing: 0.08em;
  font-family: 'SF Mono','Fira Code',monospace;
  margin-bottom: 10px;
  user-select: none;
  background: var(--ios-glass);
  border-radius: var(--r-md);
  padding: 10px;
}
.ios-captcha input.form-control {
  text-align: center !important;
  font-size: 1.1rem !important; font-weight: 600 !important;
  letter-spacing: 0.1em;
}
.captcha-refresh {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; margin-top: 8px;
  font-size: 0.73rem; color: var(--t3);
  cursor: pointer;
  background: none; border: none;
  transition: color var(--dur-fast);
}
.captcha-refresh:hover { color: var(--t2); }
.captcha-refresh i { font-size: 0.72rem; }

/* ═══════════════════════════════════════════════════════
   AUTH PAGES (Login / Register)
═══════════════════════════════════════════════════════ */
.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px;
}
.auth-card {
  width: 100%; max-width: 380px;
  animation: iosSlideIn var(--dur-slow) var(--ease-spring);
}
.auth-logo {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  object-fit: cover;
  box-shadow: var(--shadow-md);
  display: block; margin: 0 auto 12px;
}
.auth-logo-icon {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: var(--ios-glass2);
  border: 0.5px solid var(--ios-border2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  box-shadow: var(--shadow-md);
}
.auth-logo-icon i { font-size: 1.6rem; color: var(--t2); }
.auth-title { font-size: 1.5rem; font-weight: 700; text-align: center; letter-spacing: -0.04em; }
.auth-subtitle { font-size: 0.82rem; color: var(--t3); text-align: center; margin-top: 4px; }

/* lang pills */
.lang-row { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.lang-pill {
  background: var(--ios-glass); border: 0.5px solid var(--ios-border);
  border-radius: var(--r-pill); padding: 0.22rem 0.72rem;
  font-size: 0.72rem; color: var(--t3); cursor: pointer;
  transition: all var(--dur-fast);
}
.lang-pill.active, .lang-pill:hover {
  background: var(--ios-glass2); border-color: var(--ios-border2);
  color: var(--t1);
}

/* ═══════════════════════════════════════════════════════
   MISC — breadcrumb, alerts, footer
═══════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--r-md) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  background: var(--ios-glass) !important;
  color: var(--t2) !important;
  font-size: 0.85rem !important;
  backdrop-filter: var(--blur-sm) !important;
  padding: 12px 16px !important;
}
.alert-danger  { border-color: rgba(255,60,60,0.2)  !important; background: rgba(255,60,60,0.06) !important; color: rgba(255,100,100,0.9) !important; }
.alert-success { border-color: rgba(50,200,100,0.2) !important; background: rgba(50,200,100,0.06) !important; color: rgba(80,200,120,0.9) !important; }
.alert-warning { border-color: rgba(255,190,0,0.2)  !important; background: rgba(255,190,0,0.06) !important; color: rgba(255,200,50,0.9) !important; }
.btn-close { filter: invert(1); opacity: 0.4; }

footer.fixed-bottom {
  background: rgba(28,28,30,0.80) !important;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border-top: 0.5px solid var(--ios-divider);
}

/* Spinner ring (loading btn) */
.spinner-ring {
  display: inline-block; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.5);
  animation: spin 0.65s linear infinite;
}

/* ── NEON COUNTDOWN ─────────────────────────────────── */
#exp {
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: clamp(1.2rem,4vw,2rem); font-weight: 500;
  color: var(--t1);
  letter-spacing: 0.06em;
}

/* ── Section stagger animation ─────────────────────── */
.stagger-item {
  opacity: 0; transform: translateY(16px);
  animation: staggerUp var(--dur-mid) var(--ease-spring) forwards;
}
@keyframes staggerUp {
  to { opacity: 1; transform: translateY(0); }
}
.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.12s; }
.stagger-item:nth-child(3) { animation-delay: 0.19s; }
.stagger-item:nth-child(4) { animation-delay: 0.26s; }
.stagger-item:nth-child(5) { animation-delay: 0.33s; }
.stagger-item:nth-child(6) { animation-delay: 0.40s; }

/* ─── pageFadeIn compat ──── */
@keyframes pageFadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width: 768px) {
  .ios-nav .nav-links { display: none; } /* hide desktop nav-links on mobile */
  .ios-nav .nav-right .balance-pill { display: none; } /* desktop balance hidden; mobile one shown via HTML */
  /* Hide desktop language+version badges on mobile */
  .ios-nav .d-none.d-md-flex { display: none !important; }
  .ios-hamburger {
    position: relative; z-index: 1050; display: flex !important; /* FIX: was 960, must be > drawer (1045) */
    margin-left: auto; flex-shrink: 0;
    min-width: 44px; min-height: 44px; /* bigger tap target */
    /* Larger tap target for mobile */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .ios-nav .nav-right { gap: 4px; }
  .ios-nav .nav-right .d-none.d-md-flex { display: none !important; }
  .auth-card { max-width: 100%; }
  /* Hide user avatar on mobile — only hamburger */
  .ios-nav .avatar-btn { display: none !important; }
  /* Drawer lang buttons responsive */
  .drawer-lang-btn { font-size: 0.75rem !important; }
  /* Mobile balance pill shown via d-flex d-md-none in HTML */
  .ios-nav .nav-right li.d-flex.d-md-none .balance-pill { display: inline-flex !important; }
}
@media (max-width: 380px) {
  .ios-nav { height: 48px; }
}
@media (max-width: 480px) {
  .card-body { padding: 14px !important; }
  .ios-nav { height: 48px; }
}

/* ═══════════════════════════════════════════════════════
   DATATABLES — Full Dark Theme Override
═══════════════════════════════════════════════════════ */
/* Import DataTables Bootstrap5 skin — dioverride sepenuhnya */
table.dataTable thead th,
table.dataTable thead td {
  background: rgba(255,255,255,0.03) !important;
  color: var(--t3) !important;
  border-bottom: 0.5px solid var(--ios-divider) !important;
  font-size: 0.68rem !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.08em;
}
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_desc::after {
  color: var(--t4) !important;
}
table.dataTable tbody tr { background: transparent !important; }
table.dataTable tbody tr:hover td { background: var(--ios-glass3) !important; }
table.dataTable tbody td { border-color: var(--ios-divider) !important; color: var(--t2) !important; }
table.dataTable.no-footer { border-bottom: none !important; }

/* Wrapper controls */
.dataTables_wrapper { color: var(--t2) !important; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing { color: var(--t3) !important; font-size: 0.78rem !important; }

/* Length select & filter input */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--ios-glass) !important;
  border: 0.5px solid var(--ios-border2) !important;
  border-radius: var(--r-sm) !important;
  color: var(--t1) !important;
  padding: 4px 10px !important;
  font-size: 0.82rem !important;
  outline: none !important;
  transition: border-color var(--dur-fast) !important;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06) !important;
}
.dataTables_wrapper .dataTables_filter input::placeholder { color: var(--t4) !important; }

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--ios-glass) !important;
  border: 0.5px solid var(--ios-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--t3) !important;
  margin: 0 2px !important;
  font-size: 0.78rem !important;
  transition: all var(--dur-fast) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ios-glass2) !important;
  color: var(--t1) !important;
  border-color: var(--ios-border2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: rgba(147,51,234,0.25) !important;
  border-color: rgba(147,51,234,0.4) !important;
  color: #c084fc !important;
  font-weight: 700 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.3 !important;
  cursor: default !important;
}

/* ─── Bootstrap Select / form-select dark ─── */
select.form-select option,
select option {
  background: #2c2c2e !important;
  color: var(--t1) !important;
}

/* ─── Bootstrap Modal dark ─── */
.modal-content {
  background: rgba(28,28,30,0.97) !important;
  backdrop-filter: var(--blur-lg) !important;
  -webkit-backdrop-filter: var(--blur-lg) !important;
  border: 0.5px solid var(--ios-border2) !important;
  border-radius: var(--r-xl) !important;
  color: var(--t1) !important;
}
.modal-header {
  border-bottom: 0.5px solid var(--ios-divider) !important;
  background: rgba(255,255,255,0.03) !important;
}
.modal-footer {
  border-top: 0.5px solid var(--ios-divider) !important;
  background: rgba(255,255,255,0.02) !important;
}
.modal-title { color: var(--t1) !important; }
.modal-backdrop { backdrop-filter: blur(4px); }

/* ─── Popover / Tooltip dark ─── */
.tooltip-inner {
  background: rgba(44,44,46,0.97) !important;
  color: var(--t1) !important;
  border: 0.5px solid var(--ios-border2) !important;
  border-radius: var(--r-sm) !important;
  font-size: 0.78rem !important;
}

/* ─── SweetAlert2 dark fix ─── */
.swal2-popup {
  background: rgba(28,28,30,0.98) !important;
  border: 0.5px solid var(--ios-border2) !important;
  border-radius: var(--r-xl) !important;
  color: var(--t1) !important;
}
.swal2-title { color: var(--t1) !important; }
.swal2-html-container { color: var(--t2) !important; }
.swal2-input, .swal2-select, .swal2-textarea {
  background: var(--ios-glass) !important;
  border: 0.5px solid var(--ios-border2) !important;
  color: var(--t1) !important;
  border-radius: var(--r-md) !important;
}

/* ─── Admin/Server page white background fix ─── */
.bg-white, .bg-light { background: var(--ios-surface) !important; }
.text-dark { color: var(--t1) !important; }
.text-muted { color: var(--t3) !important; }

/* ─── Scrollable table container ─── */
.table-responsive {
  border-radius: var(--r-lg);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}


/* ─── duration select options dark ─── */
.duration-options option,
select[name="duration"] option {
  background: #6d28d9;
  color: #fff;
  padding: 10px;
}
.menu-logout {
  background: rgba(42,10,10,0.92);
  border-radius: 12px;
}

/* ════════════════════════════════════════════════════════════
   XDRAKO — GLOBAL DARK TABLE / DATATABLES THEME  (fix white-on-white)
   Applies to every .table & DataTables wrapper across the panel
   ════════════════════════════════════════════════════════════ */
.table{color:var(--t1)!important;border-color:var(--ios-border)!important;--bs-table-bg:transparent;--bs-table-color:var(--t1);margin-bottom:0;}
.table > :not(caption) > * > *{background-color:transparent!important;color:var(--t1)!important;box-shadow:none!important;border-bottom-color:var(--ios-divider)!important;}
.table thead th,.table > thead > tr > th{
  background:rgba(20,10,35,.9)!important;color:var(--t2)!important;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.4px;font-weight:600;
  border-bottom:1px solid var(--ios-border)!important;white-space:nowrap;
}
.table tbody tr{background:rgba(44,44,46,.35)!important;}
.table-hover tbody tr:hover > *{background:rgba(147,51,234,.10)!important;color:#fff!important;}
.table-bordered,.table-bordered > :not(caption) > * , .table-bordered > :not(caption) > * > *{border-color:var(--ios-border)!important;}
.table .text-muted{color:var(--t3)!important;}
.table .fw-semibold{color:var(--t1)!important;}
.table-dark{--bs-table-bg:transparent;}

/* DataTables chrome (search, length, info, paging) — dark */
.dataTables_wrapper{color:var(--t2)!important;}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background:rgba(28,28,30,.85)!important;border:1px solid var(--ios-border)!important;
  color:var(--t1)!important;border-radius:8px;padding:5px 10px;outline:none;
}
.dataTables_wrapper .dataTables_filter input::placeholder{color:var(--t3)!important;}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{color:var(--t2)!important;}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:var(--t2)!important;background:rgba(255,255,255,.04)!important;
  border:1px solid var(--ios-border)!important;border-radius:8px!important;margin:0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:linear-gradient(135deg,#7c3aed,#a855f7)!important;color:#fff!important;border:none!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{opacity:.4;}
table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{color:var(--t2)!important;}

/* Cards on dark theme should not force white text-on-white for inner tables */
.card{background:var(--ios-surface)!important;border:1px solid var(--ios-border)!important;color:var(--t1);}
.card .card-body{color:var(--t1);}

/* Badges keep good contrast */
.badge.bg-success{background:rgba(74,222,128,.16)!important;color:#4ade80!important;}
.badge.bg-danger {background:rgba(248,113,113,.16)!important;color:#f87171!important;}
.badge.bg-warning{background:rgba(251,191,36,.16)!important;color:#fbbf24!important;}
.badge.bg-primary{background:rgba(147,51,234,.20)!important;color:#c084fc!important;}
.badge.bg-info   {background:rgba(56,189,248,.16)!important;color:#38bdf8!important;}
.badge.bg-secondary{background:rgba(255,255,255,.10)!important;color:var(--t1)!important;}

/* ── Mobile: keep table controls visible + smooth horizontal scroll ── */
@media (max-width:768px){
  .table-responsive{-webkit-overflow-scrolling:touch;border-radius:12px;}
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter{float:none!important;text-align:center!important;margin:4px 0;}
  .dataTables_wrapper .dataTables_filter input{width:70%!important;}
  #datatable, #usersTable{min-width:640px;}       /* force scroll instead of squashing */
  .table td, .table th{white-space:nowrap;}
}

/* ── Reveal helper for GSAP (fallback visible if JS off) ── */
[data-anim="fade-up"]{will-change:transform,opacity;}
.no-js [data-anim]{opacity:1!important;transform:none!important;}

/* ═══════════════════════════════════════════════════════════
   XDRAKO DARK TABLE — BULLETPROOF (v4)
   Menutup semua sumber "tabel putih": Bootstrap vars, striped,
   hover, accent, DataTables. Berlaku global untuk semua .table.
   ═══════════════════════════════════════════════════════════ */
.table,
.table.table-bordered,
.table.table-hover,
table.dataTable {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--t1, #fff) !important;
  --bs-table-striped-bg: rgba(255,255,255,.03) !important;
  --bs-table-striped-color: var(--t1, #fff) !important;
  --bs-table-active-bg: rgba(147,51,234,.14) !important;
  --bs-table-active-color: #fff !important;
  --bs-table-hover-bg: rgba(147,51,234,.12) !important;
  --bs-table-hover-color: #fff !important;
  --bs-table-accent-bg: transparent !important;
  color: var(--t1, #fff) !important;
  background-color: transparent !important;
}
.card .table,
.card-body .table,
.table-responsive .table {
  background-color: transparent !important;
}
.table > :not(caption) > * > *,
.table > tbody > tr > td,
.table > tbody > tr > th,
table.dataTable > tbody > tr > td {
  background-color: transparent !important;
  color: var(--t1, #fff) !important;
}
.table > tbody > tr,
table.dataTable > tbody > tr {
  background-color: rgba(44,44,46,.35) !important;
}
.table > tbody > tr:nth-of-type(odd),
table.dataTable > tbody > tr.odd {
  background-color: rgba(44,44,46,.45) !important;
}
.table-hover > tbody > tr:hover > *,
table.dataTable.table-hover > tbody > tr:hover > * {
  background-color: rgba(147,51,234,.14) !important;
  color: #fff !important;
}
.table > thead > tr > th,
table.dataTable > thead > tr > th {
  background: rgba(20,10,35,.92) !important;
  color: rgba(255,255,255,.55) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

/* ═══════════════════════════════════════════════════════════
   XDRAKO V5 — purple glass polish + adaptive performance
   Final overrides intentionally live last so legacy rules stay compatible.
═══════════════════════════════════════════════════════════ */
:root{
  --ios-bg:#08030e;--ios-bg2:#12081f;--ios-bg3:#241236;
  --ios-surface:rgba(24,13,39,.76);--ios-surface2:rgba(42,24,66,.68);
  --ios-glass:rgba(255,255,255,.055);--ios-glass2:rgba(168,85,247,.13);--ios-glass3:rgba(192,132,252,.075);
  --ios-border:rgba(192,132,252,.14);--ios-border2:rgba(192,132,252,.24);--ios-divider:rgba(216,180,254,.09);
  --t1:rgba(250,245,255,.96);--t2:rgba(233,213,255,.72);--t3:rgba(216,180,254,.52);--t4:rgba(216,180,254,.25);
  --acc:#a855f7;--acc-soft:rgba(168,85,247,.16);--acc-glow:rgba(168,85,247,.18);
  --shadow-sm:0 4px 14px rgba(3,0,8,.3);--shadow-md:0 16px 44px rgba(3,0,8,.42);--shadow-lg:0 26px 76px rgba(3,0,8,.58);
  --blur-sm:blur(10px) saturate(145%);--blur-md:blur(18px) saturate(155%);--blur-lg:blur(24px) saturate(165%);
}
html{scrollbar-gutter:stable;scroll-padding-top:72px}
body{min-height:100dvh;background:#08030e;color:var(--t1);text-rendering:optimizeLegibility}
main{min-height:calc(100dvh - 58px);padding-bottom:64px}
#page-shell{width:100%;max-width:1180px;margin-inline:auto;will-change:auto}
.ios-nav{height:58px;background:rgba(10,4,18,.78);border-color:rgba(192,132,252,.14);box-shadow:0 8px 32px rgba(0,0,0,.24)}
.ios-nav .nav-inner{max-width:1180px}
.ios-nav .brand img.brand-logo{box-shadow:0 5px 16px rgba(147,51,234,.3)}
.balance-pill{background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(217,70,239,.1));border-color:rgba(192,132,252,.2);color:#e9d5ff}
.ios-drawer,.dropdown-menu{background:rgba(14,7,24,.94)!important}
.drawer-item:hover,.drawer-item:active{background:linear-gradient(90deg,rgba(124,58,237,.2),rgba(168,85,247,.08));color:#fff}
.drawer-item i{background:rgba(168,85,247,.11);color:#c084fc}
.card{background:linear-gradient(145deg,rgba(31,17,49,.82),rgba(16,8,27,.78))!important;border:1px solid rgba(192,132,252,.14)!important;box-shadow:var(--shadow-md)!important;transform:translateZ(0)}
.card-header{background:linear-gradient(90deg,rgba(168,85,247,.09),rgba(255,255,255,.02))!important}
.btn-primary{background:linear-gradient(135deg,#6d28d9,#a855f7 58%,#c026d3)!important;color:#fff!important;box-shadow:0 10px 28px rgba(124,58,237,.32)!important}
.btn-primary:hover{background:linear-gradient(135deg,#7c3aed,#b45cf8 58%,#d946ef)!important;box-shadow:0 14px 38px rgba(147,51,234,.42)!important}
.form-control:focus,.form-select:focus{border-color:rgba(192,132,252,.5)!important;box-shadow:0 0 0 3px rgba(168,85,247,.12)!important}
.auth-wrap{min-height:calc(100dvh - 58px);padding-block:32px}
.auth-card{max-width:420px}
footer.fixed-bottom{background:rgba(9,4,16,.84)!important;border-color:rgba(192,132,252,.12)}
button,a,input,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c084fc!important;outline-offset:3px}

@media(hover:none){.card:hover,.stat-card:hover{transform:none!important;box-shadow:var(--shadow-md)!important}}
@media(max-width:768px){
  html{scrollbar-gutter:auto}
  main{padding-bottom:0}
  #page-shell{padding:16px 14px 24px!important}
  .ios-nav{height:56px}
  .ios-nav .nav-inner{padding-inline:12px}
  .ios-nav .brand{font-size:1rem}
  .ios-drawer{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
  .card{backdrop-filter:blur(12px) saturate(145%)!important;-webkit-backdrop-filter:blur(12px) saturate(145%)!important;border-radius:22px!important}
  .card-body{padding:16px!important}
  footer.fixed-bottom{position:relative!important;inset:auto!important;margin-top:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))!important}
  .xdrako-aurora .aura-blob{filter:blur(46px);opacity:.38}
  .xdrako-aurora .aura-grid{opacity:.55}
}
@media(max-width:390px){.ios-nav .brand{font-size:.9rem}.ios-nav .brand img.brand-logo{width:26px;height:26px}.auth-wrap{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
/* DataTables wrapper controls (search/length/pagination) tetap gelap */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--t2, #ddd) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid rgba(147,51,234,.3) !important;
  border-radius: 8px !important;
}

/* ═══════════════════════════════════════════════════════════
   XDRAKO V6 — centered Keys Registered mobile card layout
   Keeps every field inside the viewport instead of a clipped wide table.
═══════════════════════════════════════════════════════════ */
.key-registry-card {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  overflow: hidden;
}
.key-registry-title { min-width: 0; }
.key-registry-actions { justify-content: flex-end; }
.key-registry-card #datatable_wrapper { width: 100%; }

@media (max-width: 768px) {
  .key-registry-card {
    width: min(100%, 680px);
    margin-inline: auto;
    border-radius: 24px !important;
  }
  .key-registry-header {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 16px 12px !important;
    text-align: center;
  }
  .key-registry-title {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
  }
  .key-registry-actions {
    width: 100%;
    justify-content: center;
    gap: 7px !important;
  }
  .key-registry-actions .btn {
    min-height: 38px;
    border-radius: 12px !important;
  }
  .key-registry-card .card-body { padding: 12px !important; }
  .key-registry-card .key-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }
  .key-registry-card #datatable_wrapper,
  .key-registry-card #datatable_wrapper > .row,
  .key-registry-card #datatable_wrapper > .row > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  .key-registry-card #datatable_wrapper > .row:first-child {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: end;
    gap: 10px;
    margin-bottom: 14px !important;
  }
  .key-registry-card .dataTables_length,
  .key-registry-card .dataTables_filter {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .key-registry-card .dataTables_length label,
  .key-registry-card .dataTables_filter label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    margin: 0;
  }
  .key-registry-card .dataTables_length select,
  .key-registry-card .dataTables_filter input {
    width: 100% !important;
    min-height: 42px;
    margin: 0 !important;
    text-align: center;
    border-radius: 12px !important;
  }
  .key-registry-card #datatable {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: separate !important;
  }
  .key-registry-card #datatable thead { display: none !important; }
  .key-registry-card #datatable tbody {
    display: grid !important;
    width: 100% !important;
    gap: 14px;
  }
  .key-registry-card #datatable tbody tr,
  .key-registry-card #datatable tbody tr.odd,
  .key-registry-card #datatable tbody tr.even {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 14px !important;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(45,24,70,.88), rgba(18,8,31,.94)) !important;
    border: 1px solid rgba(192,132,252,.17) !important;
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(3,0,8,.36), inset 0 1px rgba(255,255,255,.035);
  }
  .key-registry-card #datatable tbody tr::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -56px;
    top: -62px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168,85,247,.22), transparent 70%);
    pointer-events: none;
  }
  .key-registry-card #datatable tbody td {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }
  .key-registry-card #datatable tbody td::before {
    content: attr(data-label);
    color: rgba(216,180,254,.48);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1;
    text-transform: uppercase;
  }
  .key-registry-card #datatable tbody td:nth-child(1):not(.dataTables_empty) { display: none !important; }
  .key-registry-card #datatable tbody td.dataTables_empty {
    display: block !important;
    grid-column: 1 / -1;
    padding: 26px 12px !important;
    text-align: center !important;
  }
  .key-registry-card #datatable tbody td.dataTables_empty::before { display: none; }
  .key-registry-card #datatable tbody td:nth-child(2),
  .key-registry-card #datatable tbody td:nth-child(3),
  .key-registry-card #datatable tbody td:nth-child(8),
  .key-registry-card #datatable tbody td:nth-child(9) {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center !important;
  }
  .key-registry-card #datatable tbody td:nth-child(2)::before { display: none; }
  .key-registry-card .game-badge {
    width: min(100%, 310px);
    justify-content: center;
    padding: 10px 12px;
    border-radius: 15px;
    text-align: left;
  }
  .key-registry-card .game-badge img.game-logo,
  .key-registry-card .game-badge .game-logo-fallback {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }
  .key-registry-card .game-name-text { font-size: .86rem; }
  .key-registry-card .key-cell {
    max-width: 100%;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid rgba(74,222,128,.18);
    border-radius: 12px;
    background: rgba(6,78,59,.1);
  }
  .key-registry-card .key-mono {
    max-width: calc(100vw - 130px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .key-registry-card .creator-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .key-registry-card .exp-wrap { align-items: center; }
  .key-registry-card #datatable tbody td:nth-child(9) > div {
    justify-content: center;
    gap: 8px !important;
  }
  .key-registry-card .dt-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .key-registry-card #datatable_wrapper > .row:last-child {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-top: 16px !important;
    text-align: center;
  }
  .key-registry-card .dataTables_info,
  .key-registry-card .dataTables_paginate {
    float: none !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  .key-registry-actions .btn-primary,
  .key-registry-actions a.btn-outline-light {
    flex: 1 1 118px;
  }
  .key-registry-card #datatable_wrapper > .row:first-child {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .key-registry-card #datatable tbody tr { padding: 14px 12px !important; }
}

/* ═══════════════════════════════════════════════════════════
   XDRAKO V7 — luminous hierarchy, brighter glass and child nodes
   Visual-only overrides; existing data/actions remain untouched.
═══════════════════════════════════════════════════════════ */
:root {
  --ios-bg: #130720;
  --ios-bg2: #24103b;
  --ios-bg3: #3c1c5f;
  --ios-surface: rgba(48, 27, 73, .82);
  --ios-surface2: rgba(72, 41, 105, .72);
  --ios-glass: rgba(255, 255, 255, .085);
  --ios-glass2: rgba(192, 132, 252, .18);
  --ios-glass3: rgba(233, 213, 255, .105);
  --ios-border: rgba(216, 180, 254, .23);
  --ios-border2: rgba(233, 213, 255, .36);
  --ios-divider: rgba(233, 213, 255, .15);
  --t1: rgba(255, 252, 255, .98);
  --t2: rgba(245, 232, 255, .82);
  --t3: rgba(233, 213, 255, .65);
  --t4: rgba(216, 180, 254, .38);
  --shadow-sm: 0 6px 18px rgba(18, 3, 34, .28);
  --shadow-md: 0 18px 50px rgba(14, 2, 28, .38), 0 0 34px rgba(126, 34, 206, .08);
  --shadow-lg: 0 28px 84px rgba(12, 1, 24, .48), 0 0 48px rgba(168, 85, 247, .1);
}

body {
  background:
    radial-gradient(circle at 12% 9%, rgba(168, 85, 247, .27), transparent 29rem),
    radial-gradient(circle at 88% 42%, rgba(217, 70, 239, .16), transparent 34rem),
    linear-gradient(155deg, #170825 0%, #28103f 43%, #13071f 100%);
  background-attachment: fixed;
}

.ios-nav {
  background: linear-gradient(110deg, rgba(31, 12, 49, .92), rgba(52, 23, 77, .86)) !important;
  border-color: rgba(233, 213, 255, .22) !important;
  box-shadow: 0 10px 38px rgba(12, 1, 24, .32), 0 1px rgba(255, 255, 255, .06) inset !important;
}

.ios-drawer,
.dropdown-menu {
  background: linear-gradient(155deg, rgba(40, 19, 61, .97), rgba(23, 9, 37, .97)) !important;
  border-color: rgba(216, 180, 254, .24) !important;
}

.card {
  background:
    linear-gradient(145deg, rgba(69, 38, 101, .84), rgba(34, 17, 54, .88)) !important;
  border-color: rgba(216, 180, 254, .23) !important;
  box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, .075) !important;
}

.card-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(105deg, rgba(192, 132, 252, .18), rgba(168, 85, 247, .07) 55%, rgba(255, 255, 255, .045)) !important;
  border-bottom-color: rgba(233, 213, 255, .15) !important;
}

.card-header::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 213, 255, .75), rgba(168, 85, 247, .9), transparent);
  box-shadow: 0 0 12px rgba(192, 132, 252, .56);
  pointer-events: none;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.key-registry-title,
.auth-title {
  color: #fff !important;
  letter-spacing: .045em;
  text-shadow: 0 2px 14px rgba(192, 132, 252, .3);
}

.btn,
.form-control,
.form-select,
.dataTables_wrapper input,
.dataTables_wrapper select {
  border-color: rgba(233, 213, 255, .23) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055);
}

.btn-outline-light {
  color: rgba(255, 250, 255, .88) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(168, 85, 247, .08)) !important;
}

.key-registry-card {
  border-color: rgba(233, 213, 255, .27) !important;
  box-shadow: 0 24px 70px rgba(13, 1, 27, .42), 0 0 46px rgba(126, 34, 206, .12) !important;
}

.key-registry-header::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  left: 50%;
  top: -132px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 213, 255, .38), rgba(168, 85, 247, .14) 45%, transparent 72%);
  pointer-events: none;
}

.key-registry-title,
.key-registry-actions {
  position: relative;
  z-index: 1;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: linear-gradient(145deg, rgba(95, 55, 133, .48), rgba(42, 22, 65, .68)) !important;
  border-color: rgba(216, 180, 254, .33) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 8px 20px rgba(19, 2, 35, .18) !important;
}

@media (max-width: 768px) {
  .key-registry-card .card-body {
    background: linear-gradient(180deg, rgba(113, 63, 155, .08), rgba(35, 15, 56, .14));
  }

  .key-registry-card #datatable_wrapper > .row:first-child {
    position: relative;
    padding: 12px;
    border: 1px solid rgba(216, 180, 254, .18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(101, 57, 141, .22), rgba(42, 20, 66, .38));
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 10px 26px rgba(19, 2, 35, .16);
  }

  .key-registry-card #datatable_wrapper > .row:first-child::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, .7), transparent);
    box-shadow: 0 0 10px rgba(168, 85, 247, .45);
  }

  .key-registry-card #datatable tbody {
    gap: 20px;
  }

  .key-registry-card #datatable tbody tr,
  .key-registry-card #datatable tbody tr.odd,
  .key-registry-card #datatable tbody tr.even {
    gap: 12px;
    padding: 18px 14px !important;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% -10%, rgba(216, 180, 254, .2), transparent 42%),
      linear-gradient(150deg, rgba(91, 49, 130, .9), rgba(47, 23, 72, .94) 58%, rgba(31, 13, 49, .96)) !important;
    border: 1px solid rgba(233, 213, 255, .28) !important;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(14, 1, 28, .34), 0 0 28px rgba(147, 51, 234, .1), inset 0 1px rgba(255, 255, 255, .09);
  }

  .key-registry-card #datatable tbody tr::before {
    width: auto;
    height: 2px;
    left: 34px;
    right: 34px;
    top: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #f5d0fe, #a855f7, transparent);
    box-shadow: 0 0 16px rgba(192, 132, 252, .85);
    opacity: .88;
  }

  .key-registry-card #datatable tbody tr::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 98px;
    bottom: 47px;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(233, 213, 255, .18), rgba(192, 132, 252, .7) 40%, rgba(168, 85, 247, .2));
    box-shadow: 0 0 10px rgba(168, 85, 247, .7);
    pointer-events: none;
  }

  .key-registry-card #datatable tbody td {
    position: relative;
    z-index: 1;
    min-height: 72px;
    padding: 11px 12px !important;
    border: 1px solid rgba(216, 180, 254, .2) !important;
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(117, 70, 153, .28), rgba(46, 25, 68, .56)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 8px 20px rgba(18, 2, 33, .16);
  }

  .key-registry-card #datatable tbody td::before {
    display: block;
    width: 100%;
    padding-bottom: 7px;
    margin-bottom: 1px;
    color: rgba(245, 232, 255, .7);
    border-bottom: 1px solid rgba(216, 180, 254, .16);
    background: linear-gradient(90deg, rgba(245, 232, 255, .86), rgba(192, 132, 252, .58));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .key-registry-card #datatable tbody td:nth-child(2) {
    min-height: 92px;
    padding: 10px !important;
    background: linear-gradient(135deg, rgba(153, 92, 199, .33), rgba(76, 37, 110, .66)) !important;
    border-color: rgba(233, 213, 255, .3) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 28px rgba(41, 8, 66, .24), 0 0 20px rgba(168, 85, 247, .08);
  }

  .key-registry-card #datatable tbody td:nth-child(2)::before {
    display: none;
  }

  .key-registry-card #datatable tbody td:nth-child(3) {
    min-height: 86px;
    border-color: rgba(52, 211, 153, .25) !important;
    background: linear-gradient(145deg, rgba(19, 104, 82, .2), rgba(43, 35, 73, .62)) !important;
  }

  .key-registry-card #datatable tbody td:nth-child(8) {
    min-height: 80px;
    background: linear-gradient(145deg, rgba(78, 46, 112, .42), rgba(42, 25, 64, .58)) !important;
  }

  .key-registry-card #datatable tbody td:nth-child(9) {
    min-height: 90px;
    background: linear-gradient(145deg, rgba(94, 53, 130, .38), rgba(39, 21, 59, .62)) !important;
  }

  .key-registry-card .game-badge {
    width: min(100%, 340px);
    padding: 5px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .key-registry-card .game-badge img.game-logo,
  .key-registry-card .game-badge .game-logo-fallback {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(245, 232, 255, .3);
    box-shadow: 0 8px 22px rgba(13, 2, 26, .38), 0 0 18px rgba(192, 132, 252, .24);
  }

  .key-registry-card .game-name-text {
    color: #fff;
    font-size: .96rem;
    font-weight: 750;
    text-shadow: 0 2px 12px rgba(192, 132, 252, .24);
  }

  .key-registry-card .key-cell {
    background: rgba(5, 46, 47, .26) !important;
    border-color: rgba(52, 211, 153, .3) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 0 18px rgba(16, 185, 129, .07);
  }

  .key-registry-card .dt-action-btn {
    width: 40px;
    height: 40px;
    border-width: 1px;
    border-color: rgba(233, 213, 255, .3);
    background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(168, 85, 247, .11));
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 7px 16px rgba(17, 2, 31, .2);
  }

  .key-registry-card #datatable tbody td.dataTables_empty {
    min-height: 0;
    background: rgba(69, 36, 99, .35) !important;
  }
}

@media (max-width: 390px) {
  .key-registry-card #datatable tbody tr,
  .key-registry-card #datatable tbody tr.odd,
  .key-registry-card #datatable tbody tr.even {
    padding: 15px 11px !important;
    gap: 10px;
  }

  .key-registry-card #datatable tbody td {
    padding: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   XDRAKO V8 — persistent borders, wide license key and premium drawer
═══════════════════════════════════════════════════════════ */
@keyframes xdBrandTexture {
  0%, 100% { background-position: 0 0, 0 0, 0% 50%; }
  50% { background-position: 9px -5px, -7px 4px, 100% 50%; }
}

.brand-wordmark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: transparent !important;
  font-family: Impact, Haettenschweiler, "Arial Black", "Arial Narrow Bold", system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  -webkit-text-stroke: .45px rgba(255, 255, 255, .54);
  background:
    repeating-linear-gradient(116deg, transparent 0 7px, rgba(24, 5, 39, .95) 7px 8px, transparent 8px 15px),
    repeating-linear-gradient(63deg, transparent 0 11px, rgba(255, 255, 255, .56) 11px 12px, transparent 12px 21px),
    linear-gradient(105deg, #ffffff 0%, #e9d5ff 18%, #c084fc 42%, #f5d0fe 64%, #7dd3fc 82%, #ffffff 100%);
  background-size: 28px 28px, 35px 35px, 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(38, 8, 58, .95)) drop-shadow(0 0 9px rgba(192, 132, 252, .62));
  animation: xdBrandTexture 7s ease-in-out infinite;
}

.brand-wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 2;
  color: transparent;
  pointer-events: none;
  background:
    repeating-linear-gradient(126deg, transparent 0 9px, rgba(16, 3, 28, .88) 9px 10px, transparent 10px 18px),
    repeating-linear-gradient(54deg, transparent 0 15px, rgba(255, 255, 255, .6) 15px 16px, transparent 16px 27px);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: .78;
}

.drawer-brand-wordmark {
  font-size: 1.03rem;
  letter-spacing: .065em;
}

.card,
.stat-card,
.panel,
.wcard,
.ccard,
.plan {
  border: 1px solid rgba(233, 213, 255, .34) !important;
  box-shadow:
    0 18px 52px rgba(13, 1, 27, .38),
    0 0 0 1px rgba(168, 85, 247, .08) inset,
    0 1px rgba(255, 255, 255, .1) inset !important;
}

.btn,
.form-control,
.form-select,
.dropdown-menu,
.balance-pill,
.ios-hamburger,
.drawer-lang-btn {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(233, 213, 255, .31) !important;
}

.btn:focus,
.btn:active,
.btn:hover,
.form-control:focus,
.form-select:focus {
  border-color: rgba(245, 232, 255, .62) !important;
}

.ios-nav .brand {
  gap: 11px;
}

.ios-nav .brand img.brand-logo {
  border: 1px solid rgba(245, 232, 255, .36);
  box-shadow: 0 7px 22px rgba(62, 17, 91, .48), 0 0 15px rgba(192, 132, 252, .26) !important;
}

.ios-drawer-overlay {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  background: rgba(10, 2, 19, .58);
  transition: opacity .36s ease, visibility .36s ease;
}

.ios-drawer-overlay.visible {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.ios-drawer {
  right: 0 !important;
  width: min(354px, 88vw);
  transform: translate3d(103%, 0, 0);
  will-change: transform;
  background:
    radial-gradient(circle at 88% 6%, rgba(192, 132, 252, .2), transparent 16rem),
    linear-gradient(160deg, rgba(56, 28, 83, .98), rgba(23, 9, 38, .985) 58%, rgba(15, 5, 27, .99)) !important;
  border-left: 1px solid rgba(233, 213, 255, .3) !important;
  box-shadow: -24px 0 70px rgba(7, 1, 14, .55), -1px 0 25px rgba(168, 85, 247, .18);
  transition: transform .56s cubic-bezier(.16, 1, .3, 1) !important;
}

.ios-drawer.open {
  right: 0 !important;
  transform: translate3d(0, 0, 0);
}

.ios-drawer-header {
  position: relative;
  padding: max(54px, calc(env(safe-area-inset-top) + 24px)) 18px 18px;
  background: linear-gradient(120deg, rgba(168, 85, 247, .16), rgba(255, 255, 255, .045));
  border-bottom: 1px solid rgba(233, 213, 255, .2);
  box-shadow: 0 12px 34px rgba(12, 2, 23, .2);
}

.ios-drawer-header::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e9d5ff, #a855f7, transparent);
  box-shadow: 0 0 12px rgba(192, 132, 252, .7);
}

.ios-drawer-header > img {
  border: 1px solid rgba(245, 232, 255, .42);
  box-shadow: 0 8px 24px rgba(10, 1, 20, .4), 0 0 17px rgba(192, 132, 252, .25);
}

#iosDrawerClose {
  border: 1px solid rgba(233, 213, 255, .3) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(168, 85, 247, .12)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 7px 18px rgba(13, 2, 24, .24);
}

.ios-drawer-body {
  padding: 12px 11px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(192, 132, 252, .48) transparent;
}

.drawer-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 9px 6px;
  color: rgba(233, 213, 255, .72);
  font-weight: 800;
  letter-spacing: .13em;
}

.drawer-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(192, 132, 252, .55), transparent);
  box-shadow: 0 0 8px rgba(168, 85, 247, .4);
}

.drawer-item {
  position: relative;
  min-height: 48px;
  margin: 5px 1px;
  padding: .58rem .72rem .58rem .66rem;
  overflow: hidden;
  border: 1px solid rgba(216, 180, 254, .2) !important;
  border-radius: 14px;
  color: rgba(250, 245, 255, .86);
  background:
    linear-gradient(112deg, rgba(124, 58, 237, .16), rgba(192, 132, 252, .075) 48%, rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 8px 20px rgba(10, 1, 19, .13);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.drawer-item::before {
  content: "";
  width: 3px;
  align-self: stretch;
  border-radius: 99px;
  background: linear-gradient(180deg, #f5d0fe, #a855f7, #7c3aed);
  box-shadow: 0 0 10px rgba(192, 132, 252, .64);
  opacity: .64;
}

.drawer-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .075) 48%, transparent 72%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}

.drawer-item:hover,
.drawer-item:active,
.drawer-item.is-current {
  color: #fff;
  border-color: rgba(233, 213, 255, .48) !important;
  background: linear-gradient(112deg, rgba(124, 58, 237, .34), rgba(168, 85, 247, .17) 55%, rgba(217, 70, 239, .1));
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 10px 26px rgba(36, 7, 56, .25), 0 0 18px rgba(168, 85, 247, .1);
  transform: translateX(3px);
}

.drawer-item:hover::after,
.drawer-item:active::after,
.drawer-item.is-current::after {
  transform: translateX(120%);
}

.drawer-item i {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(233, 213, 255, .24);
  border-radius: 10px;
  color: #d8b4fe;
  background: linear-gradient(145deg, rgba(168, 85, 247, .26), rgba(76, 29, 149, .18));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 0 15px rgba(168, 85, 247, .12);
}

.drawer-item > span,
.drawer-item:not(:has(span)) {
  font-weight: 650;
  letter-spacing: .01em;
}

.drawer-item.danger {
  border-color: rgba(248, 113, 113, .3) !important;
  background: linear-gradient(112deg, rgba(127, 29, 29, .26), rgba(248, 113, 113, .07));
}

.drawer-lang-btn {
  min-height: 42px;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(113, 63, 153, .24), rgba(42, 22, 65, .52)) !important;
  border-color: rgba(216, 180, 254, .24) !important;
  color: rgba(250, 245, 255, .84) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 7px 16px rgba(10, 1, 19, .14);
}

.drawer-lang-btn.is-active {
  color: #fff !important;
  font-weight: 800 !important;
  border-color: rgba(245, 232, 255, .56) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, .66), rgba(192, 132, 252, .34)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 0 18px rgba(168, 85, 247, .28);
}

@media (max-width: 768px) {
  .key-registry-card {
    border: 1px solid rgba(245, 232, 255, .42) !important;
  }

  .key-registry-card #datatable tbody tr,
  .key-registry-card #datatable tbody tr.odd,
  .key-registry-card #datatable tbody tr.even {
    border: 1px solid rgba(245, 232, 255, .43) !important;
    box-shadow:
      0 18px 48px rgba(14, 1, 28, .36),
      0 0 30px rgba(147, 51, 234, .13),
      0 0 0 1px rgba(168, 85, 247, .1) inset,
      0 1px rgba(255, 255, 255, .12) inset;
  }

  .key-registry-card #datatable tbody td {
    border: 1px solid rgba(233, 213, 255, .38) !important;
    background: linear-gradient(145deg, rgba(127, 75, 166, .44), rgba(49, 27, 72, .72)) !important;
    box-shadow:
      0 0 0 1px rgba(168, 85, 247, .08) inset,
      0 1px rgba(255, 255, 255, .1) inset,
      0 9px 22px rgba(18, 2, 33, .2);
  }

  .key-registry-card #datatable tbody td:nth-child(3) {
    width: 100% !important;
    min-height: 96px;
    padding: 11px 12px !important;
    border-color: rgba(52, 211, 153, .42) !important;
    background: linear-gradient(145deg, rgba(12, 107, 82, .3), rgba(43, 35, 73, .78)) !important;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, .08) inset, 0 0 22px rgba(16, 185, 129, .08);
  }

  .key-registry-card .key-cell {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    width: 100% !important;
    max-width: 480px !important;
    min-height: 54px;
    margin-inline: auto;
    padding: 6px 7px !important;
    border: 1px solid rgba(110, 231, 183, .5) !important;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6, 95, 70, .36), rgba(36, 39, 69, .68)) !important;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, .08) inset, 0 0 20px rgba(16, 185, 129, .1);
  }

  .key-registry-card .key-cell::before {
    content: "";
    display: block;
    width: 38px;
  }

  .key-registry-card .key-cell .key-mono {
    grid-column: 2;
    width: 100%;
    max-width: none !important;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    font-size: clamp(.72rem, 3.6vw, .9rem);
    letter-spacing: .045em;
  }

  .key-registry-card .key-cell .dt-action-btn {
    grid-column: 3;
    width: 38px;
    height: 38px;
  }

  .key-registry-card .dt-action-btn {
    border: 1px solid rgba(233, 213, 255, .4) !important;
    box-shadow: 0 0 0 1px rgba(168, 85, 247, .06) inset, 0 8px 18px rgba(12, 2, 22, .22);
  }

  .key-registry-card .dt-action-btn.green {
    border-color: rgba(52, 211, 153, .45) !important;
  }

  .key-registry-card .dt-action-btn.danger {
    border-color: rgba(248, 113, 113, .45) !important;
  }
}

@media (max-width: 390px) {
  .brand-wordmark { font-size: .98rem; }
  .key-registry-card .key-cell { grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .key-registry-card .key-cell::before { width: 34px; }
  .key-registry-card .key-cell .dt-action-btn { width: 34px; height: 34px; }
}

/* ═══════════════════════════════════════════════════════════
   XDRAKO V9 — compact mobile cards, compact drawer and fixed IP footer
   Motion is transform-only so high-refresh Android screens stay responsive.
═══════════════════════════════════════════════════════════ */
@keyframes xdDrawerIconFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -2px, 0) rotate(3deg); }
}

footer.fixed-bottom.xdrako-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 930;
  min-height: 38px;
  padding: 5px 0 max(5px, env(safe-area-inset-bottom)) !important;
  background: linear-gradient(90deg, rgba(15, 5, 27, .94), rgba(42, 16, 65, .94), rgba(15, 5, 27, .94)) !important;
  border-top: 1px solid rgba(233, 213, 255, .24) !important;
  box-shadow: 0 -8px 26px rgba(9, 1, 17, .36), 0 -1px 14px rgba(168, 85, 247, .14);
  backdrop-filter: blur(12px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
}

.xdrako-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  color: rgba(233, 213, 255, .48);
  font-size: .62rem;
  line-height: 1;
  white-space: nowrap;
}

.xdrako-footer-brand { flex: 0 0 auto; }

.xdrako-ip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 9px 4px 7px;
  overflow: hidden;
  color: #f5e9ff;
  font-weight: 750;
  letter-spacing: .035em;
  border: 1px solid rgba(216, 180, 254, .46);
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(109, 40, 217, .92), rgba(168, 85, 247, .82), rgba(126, 34, 206, .9));
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 0 13px rgba(168, 85, 247, .3);
}

.xdrako-ip-value {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
}

main { padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important; }

/* Gold is the shared premium accent; functional icons keep their own color. */
.drawer-item i {
  color: #f6d365;
  border-color: rgba(251, 191, 36, .42) !important;
  background: linear-gradient(145deg, rgba(251, 191, 36, .17), rgba(124, 58, 237, .2)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 0 13px rgba(251, 191, 36, .13);
}

.drawer-item .bi-key,
.drawer-item .bi-cloud-upload { color: #67e8f9; }
.drawer-item .bi-plus-circle,
.drawer-item .bi-calendar2-plus { color: #fbbf24; }
.drawer-item .bi-bag-heart { color: #f9a8d4; }
.drawer-item .bi-gear { color: #e2e8f0; }
.drawer-item .bi-display { color: #60a5fa; }
.drawer-item .bi-arrow-counterclockwise { color: #fb923c; }
.drawer-item .bi-shield-check,
.drawer-item .bi-person-plus { color: #4ade80; }
.drawer-item .bi-lock { color: #c084fc; }
.drawer-item .bi-people { color: #93c5fd; }
.drawer-item .bi-link-45deg { color: #f0abfc; }
.drawer-item .bi-telegram { color: #38bdf8; }
.drawer-item .bi-box-arrow-right { color: #fb7185; }

.ios-drawer.open .drawer-item i {
  will-change: transform;
  animation: xdDrawerIconFloat 2.8s ease-in-out infinite;
}
.ios-drawer.open .drawer-item:nth-of-type(3n + 2) i { animation-delay: -.9s; }
.ios-drawer.open .drawer-item:nth-of-type(3n) i { animation-delay: -1.8s; }

@media (max-width: 768px) {
  #page-shell { padding: 10px 9px 18px !important; }

  .card {
    border-radius: 18px !important;
    backdrop-filter: blur(8px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(125%) !important;
  }

  .ios-nav { height: 52px; }
  .ios-nav .nav-inner { padding-inline: 9px; }
  .ios-nav .brand { gap: 7px; font-size: .92rem; }
  .ios-nav .brand img.brand-logo { width: 29px; height: 29px; }
  .ios-hamburger { width: 42px; height: 42px; border-radius: 12px; }

  .ios-drawer {
    width: min(276px, 76vw);
    backdrop-filter: blur(10px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
    transition-duration: .42s !important;
  }
  .ios-drawer-header {
    gap: 9px;
    padding: max(22px, calc(env(safe-area-inset-top) + 10px)) 12px 11px;
  }
  .ios-drawer-header > img { width: 31px !important; height: 31px !important; border-radius: 8px !important; }
  .drawer-brand-wordmark { font-size: .86rem; }
  #iosDrawerClose { width: 28px !important; height: 28px !important; }
  .ios-drawer-body { padding: 6px 7px 12px; }
  .drawer-section-title {
    gap: 7px;
    padding: 8px 6px 4px;
    font-size: .58rem;
    letter-spacing: .12em;
  }
  .drawer-item {
    min-height: 36px;
    gap: 6px;
    margin: 2px 0;
    padding: .29rem .42rem .29rem .36rem;
    border-radius: 10px;
    font-size: .76rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 5px 12px rgba(10, 1, 19, .1);
  }
  .drawer-item::before { width: 2px; box-shadow: 0 0 7px rgba(251, 191, 36, .48); }
  .drawer-item i { width: 24px; height: 24px; border-radius: 7px; font-size: .7rem; }
  .drawer-lang-btn { min-height: 31px; padding: 4px 6px !important; border-radius: 8px !important; font-size: .64rem !important; }

  .key-registry-card {
    width: 100%;
    border-radius: 18px !important;
    box-shadow: 0 12px 34px rgba(13, 1, 27, .3), 0 0 20px rgba(126, 34, 206, .08) !important;
  }
  .key-registry-header {
    gap: 7px !important;
    padding: 10px 8px !important;
  }
  .key-registry-title { font-size: .86rem; }
  .key-registry-actions { gap: 5px !important; }
  .key-registry-actions .btn {
    min-height: 32px;
    padding: .28rem .48rem !important;
    border-radius: 9px !important;
    font-size: .7rem !important;
  }
  .key-registry-card .card-body { padding: 8px !important; }
  .key-registry-card #datatable_wrapper > .row:first-child {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
    margin-bottom: 10px !important;
    border-radius: 13px;
  }
  .key-registry-card .dataTables_length label,
  .key-registry-card .dataTables_filter label { gap: 3px; font-size: .7rem; }
  .key-registry-card .dataTables_length select,
  .key-registry-card .dataTables_filter input {
    min-height: 35px;
    padding-block: 5px !important;
    border-radius: 9px !important;
    font-size: .75rem;
  }
  .key-registry-card #datatable tbody { gap: 12px; }
  .key-registry-card #datatable tbody tr,
  .key-registry-card #datatable tbody tr.odd,
  .key-registry-card #datatable tbody tr.even {
    gap: 7px;
    padding: 9px 8px !important;
    border-radius: 17px;
    box-shadow: 0 10px 26px rgba(14, 1, 28, .28), 0 0 16px rgba(147, 51, 234, .08), inset 0 1px rgba(255, 255, 255, .08);
  }
  .key-registry-card #datatable tbody tr::after { top: 70px; bottom: 38px; opacity: .62; }
  .key-registry-card #datatable tbody td {
    min-height: 48px;
    gap: 3px;
    padding: 7px 8px !important;
    border-radius: 11px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .065), 0 4px 10px rgba(18, 2, 33, .12);
  }
  .key-registry-card #datatable tbody td::before {
    padding-bottom: 4px;
    font-size: .52rem;
    letter-spacing: .09em;
  }
  .key-registry-card #datatable tbody td:nth-child(2) {
    min-height: 65px;
    padding: 6px 8px !important;
  }
  .key-registry-card #datatable tbody td:nth-child(3) {
    min-height: 61px;
    padding: 6px 8px !important;
  }
  .key-registry-card #datatable tbody td:nth-child(8) { min-height: 53px; }
  .key-registry-card #datatable tbody td:nth-child(9) { min-height: 56px; }
  .key-registry-card .game-badge { width: min(100%, 286px); padding: 3px !important; }
  .key-registry-card .game-badge img.game-logo,
  .key-registry-card .game-badge .game-logo-fallback {
    width: 43px;
    height: 43px;
    border-radius: 10px;
    box-shadow: 0 5px 13px rgba(13, 2, 26, .32), 0 0 11px rgba(192, 132, 252, .18);
  }
  .key-registry-card .game-name-text { font-size: .82rem; }
  .key-registry-card .game-ver-text { font-size: .57rem; }
  .key-registry-card .feature-tags { margin-top: 1px; }
  .key-registry-card .ftag { padding: 1px 4px; font-size: .53rem; }
  .key-registry-card .key-cell {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    min-height: 43px;
    padding: 4px 5px !important;
    border-radius: 11px;
  }
  .key-registry-card .key-cell::before { width: 32px; }
  .key-registry-card .key-cell .key-mono { font-size: clamp(.67rem, 3.35vw, .82rem); }
  .key-registry-card .key-cell .dt-action-btn { width: 32px; height: 32px; }
  .key-registry-card .dt-action-btn { width: 32px; height: 32px; border-radius: 9px; }
  .key-registry-card #datatable tbody td:nth-child(9) > div { gap: 5px !important; }
  .key-registry-card .creator-badge,
  .key-registry-card .status-active,
  .key-registry-card .status-expired,
  .key-registry-card .status-banned { font-size: .64rem; padding: 2px 6px; }
  .key-registry-card .dev-count { font-size: .67rem; }
  .key-registry-card .dev-bar { width: 46px; }
  .key-registry-card .exp-date-main { font-size: .66rem; }
  .key-registry-card #datatable_wrapper > .row:last-child { gap: 6px; margin-top: 10px !important; }

  .xdrako-aurora .aura-blob { filter: blur(36px) !important; opacity: .34 !important; }
  .xdrako-aurora .aura-grid { opacity: .42 !important; }
}

@media (max-width: 390px) {
  .xdrako-footer-row { font-size: .56rem; gap: 2px; }
  .xdrako-ip-badge { padding-inline: 6px; letter-spacing: .02em; }
  .ios-drawer { width: min(268px, 78vw); }
  .key-registry-card #datatable_wrapper > .row:first-child { grid-template-columns: 68px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ios-drawer.open .drawer-item i { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   XDRAKO V10 — instant mobile rendering / zero-scroll-delay mode
═══════════════════════════════════════════════════════════ */
html {
  color-scheme: dark;
  background: #130720 !important;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  background-color: #130720 !important;
  overscroll-behavior-y: none;
}

@media (max-width: 768px) {
  html,
  body {
    background: #130720 !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
  }

  .brand-wordmark { animation: none !important; }

  #page-shell,
  #page-shell [style*="animation:"],
  #page-shell .card,
  #page-shell .stat-card,
  #page-shell .panel,
  #page-shell .wcard,
  #page-shell .ccard,
  #page-shell .plan,
  #datatable tbody tr {
    animation: none !important;
  }

  .xd-scroll-reveal,
  .xd-scroll-revealed {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    will-change: auto !important;
  }

  .xd-fx-layer,
  .xd-fx-ripple,
  .xdrako-aurora .aura-blob {
    display: none !important;
  }

  .xdrako-aurora .aura-grid {
    animation: none !important;
    opacity: .2 !important;
  }

  .xdrako-aurora .aura-noise { opacity: .22 !important; }

  .ios-nav,
  .ios-drawer,
  .ios-drawer-overlay,
  footer.fixed-bottom.xdrako-footer,
  .card,
  .stat-card,
  .panel,
  .wcard,
  .ccard,
  .plan,
  .dropdown-menu,
  .modal-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .ios-nav {
    background: linear-gradient(110deg, rgba(31, 12, 49, .99), rgba(52, 23, 77, .99)) !important;
  }

  .ios-drawer {
    background: linear-gradient(160deg, #351b50, #190a29 58%, #10051c) !important;
  }

  footer.fixed-bottom.xdrako-footer {
    background: linear-gradient(90deg, #10051c, #2a1041, #10051c) !important;
    box-shadow: 0 -3px 10px rgba(9, 1, 17, .26) !important;
  }

  .card,
  .stat-card,
  .panel,
  .wcard,
  .ccard,
  .plan {
    box-shadow: 0 6px 18px rgba(13, 1, 27, .24), inset 0 1px rgba(255, 255, 255, .07) !important;
  }

  .key-registry-card #datatable tbody tr,
  .key-registry-card #datatable tbody tr.odd,
  .key-registry-card #datatable tbody tr.even {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: none !important;
    box-shadow: 0 5px 15px rgba(14, 1, 28, .24), inset 0 1px rgba(255, 255, 255, .07) !important;
  }

  .key-registry-card #datatable tbody td {
    box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
  }

  .ios-drawer.open .drawer-item i {
    animation: none !important;
    will-change: auto !important;
  }

  img,
  svg {
    opacity: 1;
    visibility: visible;
  }
}

/* ═══════════════════════════════════════════════════════════
   XDRAKO V11 — unclipped actions, luminous type and profile identities
   Static shadows keep the premium look without continuous paint work.
═══════════════════════════════════════════════════════════ */
.ios-nav,
#page-shell,
.ios-drawer,
.dropdown-menu,
footer.xdrako-footer,
.modal-content {
  text-shadow: 0 1px 1px rgba(5, 1, 12, .82), 0 0 7px rgba(216, 180, 254, .15);
}

h1, h2, h3, h4, h5, h6,
.card-header,
.key-registry-title,
.brand-wordmark,
.drawer-brand-wordmark {
  text-shadow: 0 1px 1px rgba(5, 1, 12, .9), 0 0 10px rgba(216, 180, 254, .27);
}

.form-control,
.form-select,
.btn,
button,
input,
select,
textarea {
  text-shadow: 0 1px 1px rgba(5, 1, 12, .7), 0 0 6px rgba(216, 180, 254, .12);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(233, 213, 255, .48) !important;
  text-shadow: 0 0 7px rgba(192, 132, 252, .12);
}

/* The registry menu must escape the card/header clipping context. */
.key-registry-card {
  position: relative !important;
  overflow: visible !important;
}

.key-registry-header {
  position: relative !important;
  z-index: 80 !important;
  overflow: visible !important;
  isolation: auto !important;
}

.key-registry-header > * {
  position: relative;
  z-index: 2;
}

.key-registry-card > .card-body {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
}

.registry-more-dropdown {
  position: relative !important;
  z-index: 120 !important;
}

.registry-more-dropdown .dropdown-menu {
  position: absolute !important;
  inset: auto 0 auto auto !important;
  top: calc(100% + 7px) !important;
  z-index: 3100 !important;
  width: max-content;
  min-width: min(244px, calc(100vw - 28px));
  max-height: min(390px, 62vh);
  margin: 0 !important;
  padding: 7px !important;
  overflow-x: hidden;
  overflow-y: auto;
  transform: none !important;
  border: 1px solid rgba(216, 180, 254, .44) !important;
  border-radius: 13px !important;
  background: linear-gradient(155deg, #34194e 0%, #1d0b2d 54%, #12071e 100%) !important;
  box-shadow: 0 18px 46px rgba(5, 1, 12, .72), 0 0 22px rgba(168, 85, 247, .22), inset 0 1px rgba(255, 255, 255, .11) !important;
  opacity: 1 !important;
}

.registry-more-dropdown .dropdown-item {
  min-height: 34px;
  margin: 1px 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #f3e8ff !important;
  background: rgba(255, 255, 255, .025) !important;
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
}

.registry-more-dropdown .dropdown-item:hover,
.registry-more-dropdown .dropdown-item:focus {
  color: #fff !important;
  border-color: rgba(216, 180, 254, .28);
  background: linear-gradient(90deg, rgba(126, 34, 206, .32), rgba(168, 85, 247, .12)) !important;
}

.registry-more-dropdown .dropdown-item.text-danger { color: #fda4af !important; }
.registry-more-dropdown .dropdown-divider { border-color: rgba(216, 180, 254, .18); }

/* Account media in navigation stays compact and still for mobile efficiency. */
.avatar-btn,
.drawer-profile-avatar {
  position: relative;
  overflow: hidden;
  padding: 2px !important;
  border: 1px solid rgba(216, 180, 254, .36) !important;
  background: linear-gradient(135deg, #c084fc, #6d28d9) !important;
  box-shadow: 0 0 15px rgba(168, 85, 247, .3);
}

.nav-profile-media,
.drawer-profile-media {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  color: #fff;
  background: #170923;
  font-weight: 850;
}

.nav-profile-media { border-radius: 50%; }
.drawer-profile-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; }
.drawer-profile-media { border-radius: 8px; font-size: .78rem; }

.avatar-btn.profile-tier-rising,
.drawer-profile-avatar.profile-tier-rising { border-color: rgba(125, 211, 252, .56) !important; box-shadow: 0 0 17px rgba(56, 189, 248, .38); }
.avatar-btn.profile-tier-elite,
.drawer-profile-avatar.profile-tier-elite { border-color: rgba(250, 204, 21, .62) !important; background: linear-gradient(135deg, #fde68a, #a855f7) !important; box-shadow: 0 0 19px rgba(250, 204, 21, .4); }
.avatar-btn.profile-tier-mythic,
.avatar-btn.profile-tier-legend,
.drawer-profile-avatar.profile-tier-mythic,
.drawer-profile-avatar.profile-tier-legend { border-color: rgba(251, 113, 133, .68) !important; background: linear-gradient(135deg, #fb7185, #c026d3, #6d28d9) !important; box-shadow: 0 0 21px rgba(244, 63, 94, .4), 0 0 32px rgba(168, 85, 247, .2); }
.avatar-btn.profile-tier-owner,
.drawer-profile-avatar.profile-tier-owner { border-color: rgba(254, 240, 138, .88) !important; background: linear-gradient(135deg, #fff7ae, #fb923c 48%, #ef4444 76%, #7f1d1d) !important; box-shadow: 0 0 8px rgba(255, 247, 174, .78), 0 0 21px rgba(249, 115, 22, .68), 0 0 36px rgba(239, 68, 68, .28); }

.creator-tier-elite { border-color: rgba(250, 204, 21, .34) !important; color: #fde68a !important; }
.creator-tier-mythic,
.creator-tier-legend { border-color: rgba(251, 113, 133, .38) !important; color: #fda4af !important; box-shadow: 0 0 11px rgba(244, 63, 94, .12); }

@media (max-width: 768px) {
  .key-registry-header { align-items: center !important; }
  .registry-more-dropdown .dropdown-menu { right: -2px !important; top: calc(100% + 6px) !important; }
  .key-registry-card .status-verified,
  .key-registry-card .status-blocked { padding: 2px 6px; font-size: .62rem; }
  .key-registry-card .dev-wrap { gap: 5px; padding: 3px 5px; }
  .key-registry-card .device-icon-shell { width: 25px; height: 25px; border-radius: 7px; font-size: .7rem; }
  .key-registry-card .device-copy { min-width: 45px; }
  .key-registry-card .creator-avatar { width: 18px; height: 18px; }
  .drawer-profile-avatar { width: 31px; height: 31px; border-radius: 8px; }
  .drawer-profile-media { border-radius: 6px; }
}