/* 888 Lotto Admin v3.10.39 — compact black-gold polish and record pagination */
:root {
  --bg: #050505 !important;
  --surface: rgba(14, 14, 14, .90) !important;
  --surface-solid: #101010 !important;
  --surface-soft: #171510 !important;
  --surface-hover: #211d14 !important;
  --border: rgba(219, 181, 77, .15) !important;
  --border-strong: rgba(236, 201, 103, .30) !important;
  --text: #f7f1df !important;
  --muted: #a99f85 !important;
  --primary: #d5ad3f !important;
  --primary-2: #f0d67d !important;
  --primary-soft: rgba(213, 173, 63, .12) !important;
  --gold: #e2bd58 !important;
  --gold-soft: rgba(226, 189, 88, .11) !important;
  --sidebar-width: 246px !important;
  --radius-sm: 8px !important;
  --radius-md: 13px !important;
  --radius-lg: 18px !important;
  --shadow: 0 20px 55px rgba(0, 0, 0, .44) !important;
}

html { font-size: 14px; }
body {
  font-size: 13px;
  background:
    radial-gradient(circle at 78% -10%, rgba(226, 189, 88, .10), transparent 31%),
    radial-gradient(circle at 8% 8%, rgba(166, 123, 30, .07), transparent 26%),
    linear-gradient(145deg, #050505 0%, #090806 46%, #040404 100%) !important;
}

.sidebar,
.topbar,
.panel,
.stat-card,
.table-wrap,
.modal-card,
.notification-panel,
.ui-dialog-card,
.cs-modal-card,
.drawer,
.sheet {
  border-color: rgba(226, 189, 88, .14) !important;
  background: linear-gradient(145deg, rgba(19, 18, 15, .91), rgba(7, 7, 7, .95)) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 239, 185, .025) !important;
  backdrop-filter: blur(17px) saturate(112%);
  -webkit-backdrop-filter: blur(17px) saturate(112%);
}

.sidebar {
  background: linear-gradient(180deg, rgba(15, 14, 12, .98), rgba(5, 5, 5, .99)) !important;
  box-shadow: 10px 0 38px rgba(0, 0, 0, .34) !important;
}

.content { padding: 18px 22px 34px !important; }
.topbar { min-height: 66px !important; padding: 9px 18px !important; }
.sidebar-header { padding: 15px 14px 12px !important; }
.sidebar-nav { padding: 8px 9px 16px !important; gap: 3px !important; }
.sidebar-footer { padding: 12px !important; }
.nav-button { min-height: 39px !important; padding: 8px 10px !important; border-radius: 10px !important; font-size: 12px !important; }
.nav-icon { width: 18px !important; height: 18px !important; }

.page-heading,
.view-heading { margin-bottom: 15px !important; }
.page-heading h1,
.page-heading h2,
.view-heading h1,
.view-heading h2 { font-size: clamp(23px, 2.1vw, 31px) !important; letter-spacing: -.035em !important; }
.page-heading p,
.view-heading p { font-size: 12px !important; line-height: 1.45 !important; }

.panel,
.stat-card { border-radius: 15px !important; }
.panel { padding: 15px !important; }
.stat-card { padding: 14px !important; min-height: 104px !important; }
.panel-grid { gap: 12px !important; }
.panel-header { gap: 10px !important; margin-bottom: 12px !important; }
.panel-title,
.panel h2,
.panel h3 { font-size: 16px !important; letter-spacing: -.02em !important; }
.stat-label { font-size: 10px !important; letter-spacing: .055em !important; }
.stat-value { font-size: clamp(20px, 2vw, 28px) !important; }

.input,
.select,
.textarea,
input,
select,
textarea {
  border-radius: 9px !important;
  border-color: rgba(226, 189, 88, .18) !important;
  background: rgba(5, 5, 5, .68) !important;
  color: #f7f1df !important;
}
.input,
.select,
input:not([type="checkbox"]):not([type="radio"]),
select { min-height: 38px !important; padding: 8px 10px !important; }
.textarea,
textarea { padding: 9px 10px !important; }
.input:focus,
.select:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(239, 205, 109, .58) !important;
  box-shadow: 0 0 0 3px rgba(226, 189, 88, .09) !important;
}

.button,
.mobile-menu-button,
.notification-button,
.sidebar-collapse-button {
  min-height: 36px !important;
  padding: 7px 11px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  letter-spacing: .005em !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.button-small { min-height: 30px !important; padding: 5px 9px !important; font-size: 10px !important; }
.button-primary,
.button-success,
.button-warning {
  color: #211704 !important;
  background: linear-gradient(180deg, #f1d67b, #c99527) !important;
  border-color: rgba(255, 224, 126, .72) !important;
  box-shadow: 0 8px 19px rgba(142, 98, 13, .20) !important;
}
.button:hover:not(:disabled),
.nav-button:hover,
.sidebar-collapse-button:hover { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0) scale(.985); }

.table-wrap {
  border-radius: 13px !important;
  overflow-x: auto;
  background: rgba(8, 8, 8, .72) !important;
}
table { font-size: 11.5px !important; }
th,
td { padding: 9px 10px !important; line-height: 1.35 !important; }
th {
  color: #dfca8e !important;
  background: rgba(226, 189, 88, .065) !important;
  font-size: 9.5px !important;
  letter-spacing: .045em !important;
  white-space: nowrap;
}
td { background: rgba(7, 7, 7, .42) !important; border-color: rgba(226, 189, 88, .075) !important; }
tbody tr { transition: background .16s ease, box-shadow .16s ease !important; }
tbody tr:hover td { background: rgba(226, 189, 88, .055) !important; }
.status { padding: 5px 8px !important; font-size: 9.5px !important; }
.action-group { gap: 5px !important; }
.compact-metrics { gap: 5px !important; }
.compact-metric { padding: 6px 7px !important; border-radius: 8px !important; }
.compact-metric span,
.player-compact-meta,
.admin-method-meta { font-size: 9.5px !important; }
.player-tree-name-line strong { font-size: 11.5px !important; }
.player-tree-toggle { width: 24px !important; height: 24px !important; }

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 38px;
  padding: 7px 5px 3px;
  color: #a99f85;
  font-size: 10px;
}
.table-pagination.hidden { display: none !important; }
.table-pagination-actions { display: flex; align-items: center; gap: 5px; }
.pagination-button {
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid rgba(226, 189, 88, .17);
  border-radius: 8px;
  background: rgba(226, 189, 88, .07);
  color: #e8d49b;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.pagination-button:hover:not(:disabled) { background: rgba(226, 189, 88, .14); border-color: rgba(226, 189, 88, .32); transform: translateY(-1px); }
.pagination-button:disabled { opacity: .38; cursor: default; }
.table-pagination-page { min-width: 72px; text-align: center; color: #d4c18e; }
.table-pagination-count { margin-right: auto; }

.view[aria-hidden="false"],
.view:not(.hidden) { animation: adminViewIn .25s cubic-bezier(.2,.8,.2,1); }
.modal:not(.hidden) .modal-card,
.ui-dialog-overlay:not(.hidden) .ui-dialog-card { animation: adminModalIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes adminViewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes adminModalIn { from { opacity: 0; transform: translateY(9px) scale(.988); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  html { font-size: 13px; }
  .content { padding: 14px 12px 90px !important; }
  .topbar { min-height: 58px !important; padding: 8px 11px !important; }
  .panel { padding: 12px !important; }
  th, td { padding: 8px !important; }
  .table-pagination { position: sticky; left: 0; width: min(100%, 100vw); }
}

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

.record-page-hidden { display: none !important; }


/* v3.10.40 premium black-gold finish */
:root {
  --primary: #ddb34e !important;
  --primary-2: #f7df99 !important;
  --gold: #f0c967 !important;
  --gold-soft: rgba(240, 201, 103, .14) !important;
  --border: rgba(240, 201, 103, .18) !important;
  --border-strong: rgba(248, 220, 136, .36) !important;
}
body {
  background:
    radial-gradient(circle at 80% -8%, rgba(247, 214, 121, .15), transparent 30%),
    radial-gradient(circle at 6% 10%, rgba(166, 118, 24, .09), transparent 24%),
    linear-gradient(145deg, #030303 0%, #090705 48%, #040404 100%) !important;
}
.sidebar,
.topbar,
.panel,
.stat-card,
.table-wrap,
.modal-card,
.notification-panel,
.ui-dialog-card,
.cs-modal-card,
.drawer,
.sheet {
  border-color: rgba(243, 203, 91, .18) !important;
  background: linear-gradient(145deg, rgba(21, 18, 13, .93), rgba(8, 8, 8, .97)) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 240, 190, .05), inset 0 0 0 1px rgba(243, 203, 91, .03) !important;
}
.sidebar {
  background: linear-gradient(180deg, rgba(18, 15, 10, .98), rgba(5, 5, 5, .995)) !important;
}
.topbar {
  background: linear-gradient(180deg, rgba(23, 19, 13, .94), rgba(10, 9, 8, .95)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 -1px 0 rgba(243,203,91,.08) !important;
}
.button-primary,
.button-success,
.button-warning {
  background: linear-gradient(180deg, #f8e1a0, #ca9428) !important;
  border-color: rgba(255, 229, 143, .78) !important;
  box-shadow: 0 10px 22px rgba(176, 124, 20, .24) !important;
}
.nav-button.active {
  background: linear-gradient(180deg, rgba(247, 222, 145, .95), rgba(201, 145, 34, .96)) !important;
  color: #1e1504 !important;
  box-shadow: 0 12px 24px rgba(171, 118, 18, .20) !important;
}
.table-wrap { background: rgba(9, 8, 7, .76) !important; }
tbody tr:hover td { background: rgba(243, 203, 91, .07) !important; }