:root {
  color-scheme: dark;
  --ui-bg: #0b1020;
  --ui-surface: #121a2d;
  --ui-surface-raised: #18233a;
  --ui-border: rgba(166, 184, 224, .13);
  --ui-text: #f3f6ff;
  --ui-muted: #9aa8c2;
  --ui-accent: #8b7bff;
  --ui-accent-2: #44d5e6;
  --ui-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

body.public-shell,
body.admin-shell {
  color: var(--ui-text) !important;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(80, 83, 190, .16), transparent 34rem),
    radial-gradient(ellipse at 90% 15%, rgba(35, 155, 177, .08), transparent 32rem),
    var(--ui-bg) !important;
  --text-color: linear-gradient(110deg, #a396ff, #45d6e5);
  --background-color: linear-gradient(110deg, #7668f5, #35bdcf);
  --border-color: #8174ff;
}

body.public-shell {
  max-width: 100%;
}

body.public-shell .bg-murky-900,
body.admin-shell .bg-murky-900 {
  background-color: transparent;
}

body.public-shell .bg-murky-800,
body.admin-shell .bg-murky-800 {
  background-color: var(--ui-surface);
}

body.public-shell .bg-murky-700,
body.admin-shell .bg-murky-700 {
  background-color: var(--ui-surface-raised);
}

body.public-shell .border-murky-800,
body.admin-shell .border-murky-800,
body.public-shell .border-murky-600,
body.admin-shell .border-murky-600 {
  border-color: var(--ui-border);
}

body.public-shell nav,
body.admin-shell nav {
  background: rgba(11, 16, 32, .88);
  border-color: var(--ui-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.public-shell nav a,
body.admin-shell nav a {
  text-decoration: none;
}

body.public-shell aside,
body.admin-shell aside {
  background: #0e1527;
  border-color: var(--ui-border);
}

body.public-shell aside a,
body.admin-shell aside a,
body.admin-shell aside button {
  border-radius: 10px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

body.public-shell aside a:hover,
body.admin-shell aside a:hover,
body.admin-shell aside button:hover {
  background-color: rgba(139, 123, 255, .13) !important;
  color: #fff;
}

body.public-shell .content,
body.admin-shell .content-body {
  color: var(--ui-text);
}

body.public-shell .bg-section-one {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(99, 91, 220, .11), transparent 54%),
    transparent;
}

body.public-shell .swiper-container {
  border-radius: 22px;
}

body.public-shell .swiper-slide img {
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: var(--ui-shadow);
  object-fit: cover;
}

body.public-shell .skeleton-banner,
body.public-shell .skeleton-fs,
body.public-shell .skeleton-card,
body.public-shell .skeleton-berita {
  background: linear-gradient(110deg, #172139 8%, #202c47 18%, #172139 33%);
  background-size: 200% 100%;
  animation: ui-shimmer 1.5s linear infinite;
}

@keyframes ui-shimmer {
  to { background-position-x: -200%; }
}

body.public-shell .cards-games,
body.public-shell .cards-populer {
  gap: 16px;
}

body.public-shell .cards-games .card,
body.public-shell .card-populer {
  background: linear-gradient(150deg, rgba(27, 38, 62, .98), rgba(17, 25, 43, .98));
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.public-shell .cards-games .card:hover,
body.public-shell .card-populer:hover {
  border-color: rgba(139, 123, 255, .7);
  box-shadow: 0 14px 34px rgba(60, 67, 151, .22);
  transform: translateY(-4px);
}

body.public-shell .cards-games .card img,
body.public-shell .card-populer img {
  object-fit: cover;
}

body.public-shell .overlay {
  background: linear-gradient(0deg, rgba(9, 14, 27, .96), rgba(9, 14, 27, .12));
}

body.public-shell .tab {
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease;
}

body.public-shell .tab:not(.active):hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--ui-border);
}

body.public-shell .tab.active,
body.public-shell .x-bg-g,
body.public-shell .x-btn-g {
  background-image: var(--background-color);
  box-shadow: 0 8px 20px rgba(82, 105, 226, .2);
}

body.public-shell .x-color-g {
  background: var(--text-color);
  -webkit-background-clip: text;
  background-clip: text;
}

body.public-shell input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.public-shell select,
body.public-shell textarea,
body.admin-shell input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.admin-shell select,
body.admin-shell textarea,
body.public-shell .custom-input,
body.admin-shell .custom-input {
  color: var(--ui-text) !important;
  background-color: #0e1729 !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  box-shadow: none;
}

body.public-shell input::placeholder,
body.admin-shell input::placeholder,
body.public-shell textarea::placeholder,
body.admin-shell textarea::placeholder {
  color: #7f8eaa;
}

body.public-shell input:focus,
body.public-shell select:focus,
body.public-shell textarea:focus,
body.admin-shell input:focus,
body.admin-shell select:focus,
body.admin-shell textarea:focus,
body.public-shell .custom-input:focus,
body.admin-shell .custom-input:focus {
  border-color: rgba(139, 123, 255, .8) !important;
  box-shadow: 0 0 0 3px rgba(139, 123, 255, .13) !important;
  outline: 0;
}

body.public-shell button,
body.admin-shell button,
body.public-shell .btn,
body.admin-shell .btn {
  transition: filter .18s ease, transform .18s ease;
}

body.public-shell button:hover,
body.admin-shell button:hover,
body.public-shell .btn:hover,
body.admin-shell .btn:hover {
  filter: brightness(1.08);
}

body.public-shell .bg-murky-800.rounded-lg,
body.public-shell .bg-murky-700.rounded-lg,
body.admin-shell .bg-murky-800.rounded-lg,
body.admin-shell .bg-murky-700.rounded-lg,
body.public-shell .bg-murky-800.rounded-xl,
body.admin-shell .bg-murky-800.rounded-xl {
  border: 1px solid var(--ui-border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

body.public-shell table,
body.admin-shell table {
  color: #dce5f7;
  border-color: var(--ui-border);
}

body.public-shell thead,
body.admin-shell thead {
  color: #aebbd2;
}

body.public-shell tbody tr,
body.admin-shell tbody tr {
  border-color: var(--ui-border) !important;
}

body.public-shell tbody tr:nth-child(even),
body.admin-shell tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, .025);
}

body.public-shell tbody tr:hover,
body.admin-shell tbody tr:hover {
  background-color: rgba(139, 123, 255, .055);
}

body.admin-shell {
  max-width: 100%;
}

body.admin-shell #logo-sidebar {
  background: rgba(13, 20, 36, .97);
}

body.admin-shell .content-body > section {
  padding: 2px 0;
}

body.admin-shell [role="alert"] {
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
}

body.admin-shell [role="alert"].bg-green-200,
body.admin-shell [role="alert"].bg-blue-200,
body.admin-shell [role="alert"].bg-yellow-100,
body.admin-shell [role="alert"].bg-red-200 {
  color: var(--ui-text);
  background: linear-gradient(145deg, rgba(28, 39, 62, .98), rgba(17, 25, 43, .98));
}

body.admin-shell [role="alert"] .text-gray-900 {
  color: var(--ui-text) !important;
}

body.admin-shell .dataTables_wrapper,
body.public-shell .dataTables_wrapper {
  color: var(--ui-muted);
}

body.admin-shell .dataTables_wrapper .dataTables_paginate .paginate_button,
body.public-shell .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  border-radius: 8px;
}

body.admin-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.public-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #fff !important;
  background: var(--background-color) !important;
  border-color: transparent !important;
}

body.public-shell #searchResults {
  background: rgba(14, 21, 39, .98);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  box-shadow: var(--ui-shadow);
}

body.public-shell .search-result a {
  border-color: var(--ui-border);
  color: var(--ui-text);
  text-decoration: none;
}

body.public-shell .search-result a:hover {
  background: rgba(139, 123, 255, .1);
}

body.public-shell .progress-container {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
}

@media (max-width: 767px) {
  body.public-shell nav,
  body.admin-shell nav {
    padding-top: env(safe-area-inset-top);
  }

  body.public-shell .cards-games,
  body.public-shell .cards-populer {
    gap: 10px;
  }

  body.public-shell .cards-games .card,
  body.public-shell .card-populer {
    border-radius: 12px;
  }

  body.admin-shell .content-body {
    overflow-x: hidden;
  }

  body.admin-shell .content-body table,
  body.public-shell .content table {
    min-width: 620px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-shell *,
  body.admin-shell * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}