/* ===== Revive: 16-bit Arcade Dashboard (GLOBAL) ===== */
:root { color-scheme: dark; }
html, body { background:#000 !important; }

.rg-arcade{
  --pix:'Press Start 2P','VT323','Pixelify Sans',ui-monospace,Menlo,monospace;
  --ink:#E6ECF5;
  --ink-dim:#A6B3C7;
  --glow:#8B5CF6;
  --glow2:#22D3EE;
  --bg-0:#0B1020;
  --bg-1:#0A0F1A;
  --line:rgba(230,236,245,.18);
  --dash:rgba(230,236,245,.12);
  --chip:rgba(230,236,245,.08);
  position:relative;
  isolation:isolate;
  width:min(1440px, 100% - 40px);
  margin:18px auto 24px;
  color:var(--ink);
}
.rg-arcade *{ box-sizing:border-box; }

/* Subtle plate */
.rg-arcade::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:18px;
  background:
    radial-gradient(1200px 300px at -10% -30%, rgba(139,92,246,.12), transparent 58%),
    radial-gradient(900px 240px at 115% -35%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  box-shadow:0 14px 34px -24px rgba(0,0,0,.65);
}

/* ---------- HERO (GLOBAL DASHBOARD HERO) ---------- */
.rg-hero{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(139,92,246,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  min-height:96px;
  height:auto;
  overflow:hidden;
}
.rg-hero::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:16px;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(34,211,238,.12) inset,
    0 0 18px rgba(139,92,246,.16) inset;
}

/* Center logo overlay (dashboard behavior) */
.rg-hero-center{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:360px;
  pointer-events:none;
  z-index:0;
}
.rg-hero-logo{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 8px rgba(139,92,246,.35));
}

.rg-hero-left,
.rg-hero-actions{
  position:relative;
  z-index:1;
}
.rg-hero-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.rg-hero-avatar{
  width:70px;
  height:70px;
  border-radius:12px;
  object-fit:cover;
  object-position:center;
  background:#111;
}
.rg-hero-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.rg-hero-title{
  font-family:var(--pix);
  margin:0;
  font-size:clamp(18px,2.1vw,26px);
  letter-spacing:.02em;
  text-shadow:
    0 0 10px rgba(139,92,246,.45),
    0 0 2px rgba(139,92,246,.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rg-hero-sub{
  font-family:var(--pix);
  font-weight: 600;
  margin:4px 0 0;
  color:var(--ink-dim);
  font-size:.78rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rg-hero-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}

/* Buttons */
.btn-coin{
  font-family:var(--pix);
  text-decoration:none;
  color:#0B1020;
  background:#E6ECF5;
  border:1.4px solid #94A3B8;
  border-radius:10px;
  padding:.18rem .42rem;
  box-shadow:inset 0 -2px 0 #94A3B8, 0 1px 0 rgba(0,0,0,.2);
  font-size:.78rem;
}
.btn-coin.sm{ padding:.14rem .36rem; font-size:.78rem; }
.btn-coin.xs{ padding:.10rem .30rem; font-size:.68rem; letter-spacing:.02em; }
.btn-coin.ghost{
  background:transparent;
  color:var(--ink);
  border-color:rgba(226,232,240,.6);
  box-shadow:inset 0 -2px 0 rgba(226,232,240,.28), 0 1px 0 rgba(0,0,0,.2);
}

/* ---------- QA TABS ---------- */
.rg-qa{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:10px 0 8px;
  flex-wrap:wrap;
}
.qa-tab{
  font-family:var(--pix);
  font-size:.82rem;
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  color:#0B1020;
  text-decoration:none;
}
.qa-tab.is-active{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color:var(--ink);
  border-color:rgba(139,92,246,.5);
  box-shadow:0 0 0 2px rgba(139,92,246,.18) inset;
}

/* Show only active QA */
.qa-section{ display:none; }
.rg-arcade[data-qa-active="dashboard"]  .qa-section[data-qa="dashboard"],
.rg-arcade[data-qa-active="events"]     .qa-section[data-qa="events"],
.rg-arcade[data-qa-active="quests"]     .qa-section[data-qa="quests"],
.rg-arcade[data-qa-active="social"]     .qa-section[data-qa="social"],
.rg-arcade[data-qa-active="inventory"]  .qa-section[data-qa="inventory"],
.rg-arcade[data-qa-active="shop"]       .qa-section[data-qa="shop"],
.rg-arcade[data-qa-active="settings"]   .qa-section[data-qa="settings"]{
  display:block;
}

/* ---------- KPI rail (GLOBAL / DASHBOARD) ---------- */
.rg-kpi-rail{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:8px;
  border:1px solid rgba(139,92,246,.28);
  border-radius:12px;
  padding:7px;
  margin:9px 0 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.rg-arcade:not([data-qa-active="dashboard"]) .rg-kpi-rail{
  display:none;
}
.rg-kpi{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px dashed var(--dash);
}
.rg-kpi__label{
  font-family:var(--pix);
  font-size:.70rem;
  color:var(--ink-dim);
}
.rg-kpi__value{
  font-family:var(--pix);
  font-size:1rem;
  padding:.1rem .38rem;
  border-radius:8px;
  text-align:right;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.25);
}
.rg-kpi__value.value-center{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.2ch;
}

/* ---------- Grid + Cabinets ---------- */
.rg-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px 20px;
}
.span-12{ grid-column:span 12; }
.span-6{ grid-column:span 12; }
@media (min-width:860px){
  .span-6{ grid-column:span 6; }
}

.cabinet{
  position:relative;
  padding:16px 14px;
  border-radius:16px;
  border:1px solid rgba(139,92,246,.32);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:
    0 12px 26px -18px rgba(0,0,0,.9),
    0 1px 1px rgba(255,255,255,.05) inset;
  background-clip:padding-box;
}
.cabinet::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:16px;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(34,211,238,.12) inset,
    0 0 18px rgba(139,92,246,.16) inset;
}
.cab-title{
  font-family:var(--pix);
  margin:0 0 8px;
  color:#E6ECF5;
  font-size:clamp(13px,1.35vw,16px);
  letter-spacing:.02em;
  text-shadow:0 0 5px rgba(139,92,246,.25);
}
.sub{
  margin:10px 0 6px;
  font-family:var(--pix);
  font-size:.75rem;
  color:var(--ink-dim);
}
.info{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.muted{ color:var(--ink-dim); }

/* ===== Profile & Identity layout ===== */
.ident{
  display:grid;
  grid-template-columns: 1fr 110px;
  gap:14px;
  align-items:start;
}
.ident .avatar-col{
  grid-column:2;
  justify-self:end;
  align-self:start;
}
.ident .formlist{
  grid-column:1;
  grid-row:1;
  margin-top:0;
}

.avatar-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.avatar-lg{
  width:84px;
  height:84px;
  border-radius:12px;
  object-fit:cover;
  background:#111;
}
.avatar-choose{
  width:100%;
  padding:.18rem .32rem;
  font-size:.72rem;
}

/* two-column rows inside content */
.formlist{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.row{
  display:grid;
  grid-template-columns: 160px 1fr;
  align-items:center;
  gap:10px;
}
.row .lab{
  font-family:var(--pix);
  font-size:.74rem;
  color:var(--ink-dim);
  line-height:1;
}
.row .val{ display:block; }
.row.row-bio{ align-items:center; }

.inline-input,
.inline-textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(226,232,240,.25);
  background:#0c1326;
  color:var(--ink);
}
.inline-textarea{ resize:none; }
.inline-textarea.tall{ min-height:140px; }
.inline-textarea.no-resize{ resize:none; }

/* chips */
.rg-chip{
  font-family:var(--pix);
  padding:.12rem .34rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--chip);
  font-size:.60rem;
  vertical-align:middle;
}
.rg-chip--rank.same{ font-size:.60rem; }
.lvl-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.2ch;
  padding:.06rem .34rem;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.25);
  font-family:var(--pix);
  font-size:.86rem;
}

/* badge picker */
.badge-pick-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ===== Modal (global) ===== */
.rg-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
}
.rg-modal[aria-hidden="false"]{ display:flex; }
.rg-modal__dialog{
  width:min(720px,calc(100% - 40px));
  max-height:min(86vh,100%);
  overflow:auto;
  background:rgba(18,22,34,.92);
  border:1px solid rgba(139,92,246,.45);
  border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.6);
  padding:18px;
  position:relative;
}
.rg-modal__close{
  position:absolute;
  top:10px;
  right:12px;
}

/* ===== Servers list (shared styles only) ===== */
.srv-filterbar{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  overflow:auto;
  padding-bottom:2px;
  margin-bottom:6px;
}
.pill{
  font-family:var(--pix);
  font-size:.58rem;
  padding:.22rem .38rem;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.35);
  background:rgba(255,255,255,.08);
  color:var(--ink);
  white-space:nowrap;
}
.pill.is-active{
  border-color:rgba(139,92,246,.55);
  background:rgba(139,92,246,.25);
  box-shadow:0 0 0 2px rgba(139,92,246,.18) inset;
}
.srv-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.srv-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-radius:12px;
  border:1px dashed var(--dash);
  background:rgba(255,255,255,.02);
}
.srv-name{
  font-weight:700;
  letter-spacing:.01em;
}
.srv-meta{
  color:var(--ink-dim);
  font-size:.88rem;
}

/* ===== Form / Security / Settings bits ===== */
.form-grid{
  display:grid;
  row-gap:10px;
}
.frow label{
  display:block;
  margin:0 0 6px;
  font-family:var(--pix);
  font-size:.72rem;
  color:var(--ink-dim);
}
.frow input,
.frow select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(226,232,240,.25);
  background:#0c1326;
  color:var(--ink);
}
.frow .btn-coin{ margin-top:4px; }
.frow.chk label{
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.2;
}
.frow.chk input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#8B5CF6;
}

.rg-note{
  margin:12px 0;
  padding:10px 12px;
  border-radius:10px;
  background:#0e1833;
  border:1px solid rgba(34,211,238,.25);
}

/* Security layout */
.cabinet--security .cabinet-body{
  max-height:560px;
  overflow:auto;
  padding-right:6px;
}
.sec-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.sec-grid .span-2{ grid-column:1 / -1; }
.sec-field label{
  display:block;
  margin:0 0 6px;
  font-family:var(--pix);
  font-size:.70rem;
  color:var(--ink-dim);
}
.sec-field input{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(226,232,240,.25);
  background:#0c1326;
  color:var(--ink);
}

/* Helpers */
.mini{ font-size:.78rem; }
.list-tight{
  list-style:none;
  margin:0;
  padding:0;
}
.list-tight li{ margin:0 0 4px; }

/* Auto-height for cabinets */
.cabinet,
.cab,
.cab-box,
.cab-card,
.dash-cabinet,
.section-cab,
.rg-cab,
.rg-sec .subcab,
.rg-prof{
  height:auto !important;
  min-height:0 !important;
}
.cab-inner,
.cab-body,
.cab-content,
.cab-footer{
  height:auto !important;
  min-height:0 !important;
  overflow:visible;
}
.rg-grid,
.rg-grid--twocol,
.cabinet-row,
.cabinet-grid,
.section-grid{
  align-items:flex-start !important;
}
.cabinet::after,
.cab::after,
.cab-card::after{
  content:none !important;
}
.auto-h{ height:auto !important; min-height:0 !important; }

/* ===== Light-mode safety ===== */
@media (prefers-color-scheme: light){
  .rg-arcade::before{
    background:linear-gradient(180deg,#f8fafc,#eef2f7);
  }
  .rg-arcade,
  .rg-arcade *{
    color:#0b1020;
  }
  .cabinet,
  .rg-hero,
  .rg-kpi-rail{
    background:rgba(255,255,255,.96);
  }
  .cab-title{ text-shadow:none; }
}

/* ===== Global responsive tweaks ===== */
@media (max-width:720px){
  .ident{ grid-template-columns:1fr; }
  .avatar-col{
    flex-direction:row;
    justify-content:flex-start;
  }
  .avatar-choose{ width:auto; }
  .row{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .rg-arcade{
    width:calc(100% - 18px);
  }
  .rg-hero{
    grid-template-columns:1fr;
    row-gap:6px;
    text-align:left;
  }
  .rg-hero-center{
    position:static;
    transform:none;
    margin:0 auto -4px;
    order:2;
  }
  .rg-hero-actions{
    justify-content:flex-start;
    order:3;
  }
  .rg-kpi-rail{
    grid-template-columns:repeat(3, minmax(0,1fr));
    row-gap:6px;
  }
}
@media (max-width:600px){
  .rg-hero-title{ font-size:15px; }
  .rg-hero-sub{ font-size:8px; }
  .rg-hero-avatar{
    width:52px;
    height:52px;
  }
}

/* === Dashboard shell: align with Servers hero layout === */

body.page-template-page-dashboard .rg-arcade {
  margin: 10px auto 40px;
  width: calc(100% - 62px);
  max-width: 100%;
  box-sizing: border-box;
}

/* Match Servers hero styling on Dashboard (while keeping dashboard content) */
body.page-template-page-dashboard .rg-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 26px 22px;
  border-radius: 16px 16px 10px 10px;
  border: 1px solid rgba(139,92,246,.38);
  background:
    radial-gradient(820px 260px at -14% -40%, rgba(139,92,246,0.16), transparent 60%),
    radial-gradient(720px 220px at 118% -32%, rgba(34,211,238,0.12), transparent 65%),
    linear-gradient(180deg, #050816, #02040a);
  box-shadow:
    0 16px 40px -24px rgba(0,0,0,0.98),
    0 1px 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
}

body.page-template-page-dashboard .rg-hero-left {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  position: relative;
  z-index: 2;
}

body.page-template-page-dashboard .rg-hero-avatar {
  width: 70px;
  height: 70px;
  border-radius: 1px;
  object-fit: cover;
  background: #050816;
  box-shadow: 0 5px 12px rgba(0,0,0,0.75);
}

body.page-template-page-dashboard .rg-hero-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.page-template-page-dashboard .rg-hero-title {
  margin: 0;
  font-family: var(--pix);
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F9FAFB;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    0 0 16px rgba(15,23,42,0.95),
    0 0 42px rgba(15,23,42,0.9),
    0 0 2px rgba(139,92,246,0.55);
}

body.page-template-page-dashboard .rg-hero-sub {
  margin: 7px 0 0;
  font-family: var(--pix);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #8ab4ff;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  line-height: 1.6;
  position: relative;
  animation: none !important; /* JS can override if needed */
}

body.page-template-page-dashboard .rg-hero-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

body.page-template-page-dashboard .rg-hero-logo {
  display: block;
  width: 200px;
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(139,92,246,.35));
}

body.page-template-page-dashboard .rg-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

/* Buttons in dashboard hero should look like Servers hero buttons */
body.page-template-page-dashboard .rg-hero-actions .btn-coin {
  font-family: var(--pix);
  font-size: 0.9rem;
  padding: 0.45rem 1.7rem;
  border-radius: 999px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f9fafb;
  background:
    radial-gradient(circle at 0 0, rgba(148,163,253,0.92), rgba(129,140,248,0.42)),
    radial-gradient(circle at 100% 0, rgba(56,189,248,0.86), rgba(8,47,73,0.96));
  border: 1.4px solid rgba(191,219,254,0.96);
  box-shadow:
    0 12px 30px -16px rgba(15,23,42,1),
    0 0 0 1px rgba(15,23,42,0.98),
    0 0 0 1px rgba(15,23,42,1) inset;
  text-decoration: none;
}

body.page-template-page-dashboard .rg-hero-actions .btn-coin.ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(226,232,240,0.96);
  box-shadow:
    inset 0 -2px 0 rgba(148,163,184,0.42),
    0 2px 4px rgba(0,0,0,0.7);
}

/* KPI rail tweaks: line up with Servers look & center values on Dashboard only */
body.page-template-page-dashboard .rg-kpi-rail {
  margin: 0 0 1px;
  border-radius: 0 0 16px 16px;
  border-top: none;
}

body.page-template-page-dashboard .rg-kpi__value {
  text-align: center;
}