/* Neon Arcade — admin console at #/admin (app/admin.js). The console's building blocks (.na-admin shell, KPI tiles, panels,
   charts, tables, drawer, dialog, badges) live in design/ui.css §23 and follow design/admin-preview.html; this file adds the
   page integration (site chrome hidden, scoped fixes for class names shared with design/pages.css) and the few pieces the
   preview did not draw: gate screens, 2-step setup, game order list, content cards, report cards, menus.
   Made by Vortaxis Studio. */

/* ---- page integration: the console replaces the site chrome ---- */
body[data-page="admin"] .gc-header, body[data-page="admin"] .gc-footer, body[data-page="admin"] .gc-tabbar,
body[data-page="admin"] .na-seo-links { display: none !important; }
body[data-page="admin"].gc { padding-bottom: 0; }
body[data-page="admin"] .gc-view { animation: none; min-height: 100dvh; }      /* no transform: fixed drawers stay fixed */
.na-admin .na-main { display: flex; flex-direction: column; padding-bottom: 0; }  /* pages.css also uses .na-main */
.na-admin .na-profile .na-badges { margin: 8px 0 0; gap: 6px; }
.na-admin .na-kpi--live .na-kpi__label::before { animation: na-live 1.6s ease-in-out infinite; }
@keyframes na-live { 50% { box-shadow: 0 0 0 6px rgba(61,255,160,0); } }
.na-admin a { color: inherit; }
.na-admin .gc-sr, .na-layer .gc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.na-body:focus { outline: none; }
.na-body > [data-out] { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (max-width: 899px) { .na-body > [data-out] { gap: 16px; } .na-admin .na-me .gc-avatar { display: inline-grid; } .na-admin .na-me { padding: 4px; } }
.na-body > * { min-width: 0; }

/* sidebar extras */
.na-side__brand { text-decoration: none; }
.na-side__foot a { color: var(--gc-cyan); text-decoration: none; }
.na-side__foot a:hover { text-decoration: underline; }
.na-side__foot p { margin: 0 0 6px; }

/* top bar: account menu */
.na-menu { position: relative; }
.na-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 200px; display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: #15112d; border: 1px solid var(--gc-border-strong); box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.na-menu__list[hidden] { display: none; }
.na-menu__list a, .na-menu__list button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--gc-text-muted); font: 600 13px/1 var(--gc-font-body); text-decoration: none; text-align: start; cursor: pointer; }
.na-menu__list a:hover, .na-menu__list button:hover { background: var(--na-surface-2); color: var(--gc-text); }
.na-menu__list small { display: block; padding: 8px 12px 6px; color: var(--gc-text-dim); font-size: 12px; border-bottom: 1px solid var(--na-line); margin-bottom: 4px; }
.na-env--local { color: var(--gc-coin); border-color: rgba(255,200,61,.45); background: rgba(255,200,61,.08); }

/* page head: small meta line */
.na-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gc-text-dim); font-size: 12px; }
.na-sample { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px/1.2 var(--gc-font-body); color: var(--gc-text-muted); background: var(--na-surface-2); border: 1px dashed var(--gc-border-strong); }
.na-sample::before { content: "i"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--na-line); color: var(--gc-text); font: 800 10px/1 var(--gc-font-body); }

/* KPI tile as a link */
a.na-kpi { text-decoration: none; transition: border-color .18s; }
a.na-kpi:hover { border-color: var(--gc-border-strong); }
.na-kpi__value--dim { color: var(--gc-text-dim); }

/* ---- gate screens (signed out · not staff · 2-step setup first) ---- */
.na-gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(700px 380px at 50% 0%, rgba(123,92,255,.18), transparent 70%), var(--gc-bg); }
.na-gate__card { width: min(520px, 100%); display: grid; gap: 16px; padding: 28px 24px; border-radius: 22px; background: var(--na-surface); border: 1px solid var(--gc-border-strong); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.na-gate__card--wide { width: min(640px, 100%); }
.na-gate__brand { display: flex; align-items: center; gap: 10px; }
.na-gate__brand img { height: 24px; width: auto; }
.na-gate__brand span { font: 700 10px/1 var(--gc-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gc-coin); padding: 3px 6px; border: 1px solid rgba(255,200,61,.45); border-radius: 6px; }
.na-gate h1 { margin: 0; font: 800 22px/1.2 var(--gc-font-display); }
.na-gate p { margin: 0; color: var(--gc-text-muted); font-size: 14px; line-height: 1.55; }
.na-gate__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.na-gate__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--na-line); font-size: 12px; color: var(--gc-text-dim); }
.na-gate__foot button { border: 0; background: none; color: var(--gc-cyan); font: 600 12px/1 var(--gc-font-body); cursor: pointer; padding: 0; }

/* ---- 2-step login setup ---- */
.na-totp { display: grid; gap: 16px; }
.na-totp__steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--gc-text-muted); font-size: 14px; }
.na-totp__pair { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; }
.na-totp__qr { display: block; width: 180px; aspect-ratio: 1; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 3px #0b0820, 0 0 0 5px rgba(123,92,255,.6), 0 0 26px rgba(123,92,255,.35); }
.na-totp__qr svg { display: block; width: 100%; height: 100%; }
.na-totp__secret { display: block; padding: 10px 12px; border-radius: 10px; background: #0f0c22; border: 1px solid var(--na-line); font: 600 15px/1.5 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: var(--gc-text); word-break: break-all; user-select: all; }
.na-totp__code { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.na-totp__code .na-field { flex: 1 1 180px; }
.na-otp { font: 700 22px/1 ui-monospace, Menlo, monospace !important; letter-spacing: .4em !important; text-align: center; }
.na-status-line { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(61,255,160,.06); border: 1px solid rgba(61,255,160,.3); color: var(--gc-text); font-size: 14px; }
.na-status-line::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(61,255,160,.16); color: var(--na-ok); font-weight: 900; flex: none; }
.na-status-line--off { background: rgba(255,176,46,.06); border-color: rgba(255,176,46,.35); }
.na-status-line--off::before { content: "!"; background: rgba(255,176,46,.16); color: var(--na-warn); }
.na-formerr { margin: 0; min-height: 1.2em; color: var(--na-bad); font-size: 13px; }

/* ---- small table helpers ---- */
.na-table--compact td, .na-table--compact th { padding: 8px 12px; }
.na-table td.is-wrap { white-space: normal; min-width: 180px; }
.na-table .is-pos { color: var(--na-ok); } .na-table .is-neg { color: var(--na-bad); }
.na-table tr.is-clickable { cursor: pointer; }
.na-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--gc-text-dim); }
.na-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--na-surface-2); border: 1px solid var(--na-line); color: var(--gc-text-muted); font: 600 11px/1 var(--gc-font-body); white-space: nowrap; }
.na-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.na-badge--warn { color: var(--na-warn); background: rgba(255,176,46,.1); border-color: rgba(255,176,46,.4); }
.na-badge--ok { color: var(--na-ok); background: rgba(61,255,160,.08); border-color: rgba(61,255,160,.35); }
.na-badge--ok::before { content: "✓"; font-size: 9px; }
.na-tablebar .na-check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gc-text-muted); }
.na-tablebar .na-check-inline input { width: 16px; height: 16px; accent-color: var(--gc-cyan); }
.na-tablebar__end { margin-inline-start: auto; display: flex; gap: 8px; }
.na-drawer .na-table-wrap { max-height: none; border: 1px solid var(--na-line); border-radius: 12px; }
.na-sub { margin: 0 0 8px; font: 700 12px/1.2 var(--gc-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--gc-text-dim); }
.na-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.na-kv dt { color: var(--gc-text-dim); }
.na-kv dd { margin: 0; color: var(--gc-text); min-width: 0; overflow-wrap: anywhere; }

/* ---- games: order list ---- */
.na-glist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.na-glist li { display: grid; grid-template-columns: auto 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--na-line); background: var(--na-surface-2); }
.na-glist li.is-dragging { opacity: .45; }
.na-glist li.is-over { border-color: var(--gc-cyan); box-shadow: 0 0 0 2px rgba(34,228,255,.25); }
.na-glist__handle { cursor: grab; color: var(--gc-text-dim); font-size: 16px; padding: 4px; user-select: none; }
.na-glist__thumb { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; font-size: 22px; background: var(--gc-grad-brand); }
.na-glist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.na-glist__info { min-width: 0; display: grid; gap: 4px; }
.na-glist__info b { color: var(--gc-text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-glist__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--gc-text-dim); }
.na-glist__act { display: flex; gap: 4px; align-items: center; }
.na-orderbar { position: sticky; bottom: 12px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #15112d; border: 1px solid var(--gc-cyan); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 13px; }
.na-orderbar[hidden] { display: none; }
.na-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.na-checks label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--na-line); background: #0f0c22; font: 600 12px/1 var(--gc-font-body); color: var(--gc-text-muted); cursor: pointer; }
.na-checks input { accent-color: var(--gc-cyan); width: 14px; height: 14px; margin: 0; }
.na-checks label:has(input:checked) { border-color: var(--gc-cyan); color: var(--gc-text); background: rgba(34,228,255,.08); }

/* ---- content cards ---- */
.na-clist { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.na-citem { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px; border-radius: 14px; border: 1px solid var(--na-line); background: var(--na-surface-2); }
.na-citem__tone { align-self: stretch; border-radius: 4px; background: var(--_tone, var(--gc-cyan)); }
.na-citem__body { min-width: 0; display: grid; gap: 6px; }
.na-citem__body b { color: var(--gc-text); font-size: 14px; }
.na-citem__body p { margin: 0; color: var(--gc-text-muted); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.na-citem__act { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }

/* ---- moderation report cards ---- */
.na-rlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.na-report { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--na-line); background: var(--na-surface-2); }
.na-report__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.na-report__top b { color: var(--gc-text); font-size: 14px; }
.na-report__meta { font-size: 12px; color: var(--gc-text-dim); }
.na-report blockquote { margin: 0; padding: 8px 12px; border-inline-start: 3px solid var(--gc-border-strong); color: var(--gc-text-muted); font-size: 13px; background: rgba(255,255,255,.02); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.na-report__act { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- connector form ---- */
.na-connector__logo--adsense { background: #1a73e8; } .na-connector__logo--admanager { background: #0f9d58; }
.na-connector__logo--h5games { background: #7b5cff; } .na-connector__logo--admob { background: #c97d00; }

/* ---- drawer layer ---- */
.na-layer .na-drawer { z-index: 96; }
.na-layer .na-scrim { z-index: 95; }
.na-layer .na-dialog { z-index: 120; }
.na-drawer__body > section { display: grid; gap: 8px; min-width: 0; }
.na-facts--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.na-drawer__foot[hidden] { display: none; }
[data-for][hidden] { display: none; }

/* ---- responsive ---- */
@media (max-width: 899px) {
  .na-admin .na-top__title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .na-totp__pair { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .na-totp__pair > div { width: 100%; }
  .na-glist li { grid-template-columns: 40px minmax(0, 1fr); }
  .na-glist__handle { display: none; }
  .na-glist__thumb { width: 40px; height: 40px; font-size: 18px; }
  .na-glist__act { grid-column: 2; justify-content: flex-start; }
  .na-citem { grid-template-columns: 6px minmax(0, 1fr); }
  .na-citem__act { grid-column: 2; justify-content: flex-start; }
  .na-tablebar .na-search { max-width: none; flex: 1 1 100%; }
  .na-tablebar__end { margin-inline-start: 0; }
  .na-hide-sm { display: none; }
  .na-panel__head .na-seg { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 480px) {
  .na-kpi__foot { flex-wrap: wrap; }
  .na-facts--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .na-head__actions { width: 100%; }
}