/* Tronsoft Games Portal v6.28.21
   Unified Design System and Theme Engine */

:root,
html[data-theme="tronsoft-blue"]{
  --tg-bg:#071019;
  --tg-bg-elevated:#0b1724;
  --tg-surface:#102235;
  --tg-surface-2:#162d43;
  --tg-surface-3:#1c3852;
  --tg-border:#3a5d7a;
  --tg-border-soft:#29445d;
  --tg-text:#f7fbff;
  --tg-text-secondary:#d8e4ef;
  --tg-text-muted:#b9c9d7;
  --tg-link:#86cbff;
  --tg-link-hover:#c8e9ff;
  --tg-primary:#2f9cff;
  --tg-primary-hover:#55b0ff;
  --tg-primary-text:#ffffff;
  --tg-success:#41c979;
  --tg-success-bg:#143d27;
  --tg-warning:#ffd166;
  --tg-warning-bg:#4a390f;
  --tg-danger:#ff7183;
  --tg-danger-bg:#431a22;
  --tg-info:#56b6ff;
  --tg-info-bg:#12354f;
  --tg-input:#081521;
  --tg-input-text:#ffffff;
  --tg-shadow:0 16px 42px rgba(0,0,0,.28);
  --tg-radius:14px;
  --tg-radius-small:9px;
}

html[data-theme="dark"]{
  --tg-bg:#111315;
  --tg-bg-elevated:#171a1d;
  --tg-surface:#1d2125;
  --tg-surface-2:#252a2f;
  --tg-surface-3:#2d3339;
  --tg-border:#555f68;
  --tg-border-soft:#384047;
  --tg-text:#ffffff;
  --tg-text-secondary:#e5e7eb;
  --tg-text-muted:#c5cbd1;
  --tg-link:#8dc8ff;
  --tg-link-hover:#c8e5ff;
  --tg-primary:#348fe2;
  --tg-primary-hover:#5ba9ef;
  --tg-primary-text:#ffffff;
  --tg-success:#4ed184;
  --tg-success-bg:#163a27;
  --tg-warning:#ffd166;
  --tg-warning-bg:#46360d;
  --tg-danger:#ff7283;
  --tg-danger-bg:#441c23;
  --tg-info:#63b9fa;
  --tg-info-bg:#18364d;
  --tg-input:#13171a;
  --tg-input-text:#ffffff;
  --tg-shadow:0 16px 42px rgba(0,0,0,.32);
}

html[data-theme="light"]{
  color-scheme:light;
  --tg-bg:#eef3f7;
  --tg-bg-elevated:#ffffff;
  --tg-surface:#ffffff;
  --tg-surface-2:#f4f7fa;
  --tg-surface-3:#e8eef3;
  --tg-border:#9aabb9;
  --tg-border-soft:#c7d2dc;
  --tg-text:#16212b;
  --tg-text-secondary:#2f3e4c;
  --tg-text-muted:#536575;
  --tg-link:#005fae;
  --tg-link-hover:#003f78;
  --tg-primary:#0878d1;
  --tg-primary-hover:#0067b7;
  --tg-primary-text:#ffffff;
  --tg-success:#177a43;
  --tg-success-bg:#dff5e8;
  --tg-warning:#8a5b00;
  --tg-warning-bg:#fff2c6;
  --tg-danger:#b42335;
  --tg-danger-bg:#fde3e7;
  --tg-info:#075f9c;
  --tg-info-bg:#dceefb;
  --tg-input:#ffffff;
  --tg-input-text:#111827;
  --tg-shadow:0 12px 28px rgba(28,49,67,.14);
}

html[data-theme="midnight"]{
  --tg-bg:#030712;
  --tg-bg-elevated:#07101f;
  --tg-surface:#0b1830;
  --tg-surface-2:#102344;
  --tg-surface-3:#17315b;
  --tg-border:#355b8f;
  --tg-border-soft:#213f6a;
  --tg-text:#f8fbff;
  --tg-text-secondary:#d9e7fa;
  --tg-text-muted:#b8cbe5;
  --tg-link:#79b8ff;
  --tg-link-hover:#b9dcff;
  --tg-primary:#2678e8;
  --tg-primary-hover:#5297ef;
  --tg-primary-text:#ffffff;
  --tg-success:#45d189;
  --tg-success-bg:#103927;
  --tg-warning:#ffd467;
  --tg-warning-bg:#44350c;
  --tg-danger:#ff7184;
  --tg-danger-bg:#421724;
  --tg-info:#58abff;
  --tg-info-bg:#102f56;
  --tg-input:#061124;
  --tg-input-text:#ffffff;
  --tg-shadow:0 18px 55px rgba(0,0,0,.38);
}

html[data-theme="high-contrast"]{
  --tg-bg:#000000;
  --tg-bg-elevated:#080808;
  --tg-surface:#111111;
  --tg-surface-2:#1b1b1b;
  --tg-surface-3:#242424;
  --tg-border:#ffffff;
  --tg-border-soft:#bcbcbc;
  --tg-text:#ffffff;
  --tg-text-secondary:#ffffff;
  --tg-text-muted:#e8e8e8;
  --tg-link:#7fd3ff;
  --tg-link-hover:#ffffff;
  --tg-primary:#006fd6;
  --tg-primary-hover:#148cff;
  --tg-primary-text:#ffffff;
  --tg-success:#68f0a0;
  --tg-success-bg:#073d1f;
  --tg-warning:#ffe066;
  --tg-warning-bg:#4d3d00;
  --tg-danger:#ff7183;
  --tg-danger-bg:#5d0d19;
  --tg-info:#75c7ff;
  --tg-info-bg:#00365f;
  --tg-input:#000000;
  --tg-input-text:#ffffff;
  --tg-shadow:none;
}

html[data-theme="steam"]{
  --tg-bg:#171d25;
  --tg-bg-elevated:#1b2838;
  --tg-surface:#21364b;
  --tg-surface-2:#263f57;
  --tg-surface-3:#2b4a66;
  --tg-border:#52718a;
  --tg-border-soft:#354f65;
  --tg-text:#f1f7fb;
  --tg-text-secondary:#d6e2ea;
  --tg-text-muted:#b7c6d1;
  --tg-link:#66c0f4;
  --tg-link-hover:#a8ddf8;
  --tg-primary:#66c0f4;
  --tg-primary-hover:#8cd1f6;
  --tg-primary-text:#10202b;
  --tg-success:#75d68f;
  --tg-success-bg:#173d26;
  --tg-warning:#f4d35e;
  --tg-warning-bg:#463a12;
  --tg-danger:#ef6b75;
  --tg-danger-bg:#441c24;
  --tg-info:#66c0f4;
  --tg-info-bg:#163a50;
  --tg-input:#152536;
  --tg-input-text:#ffffff;
  --tg-shadow:0 15px 40px rgba(0,0,0,.32);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb,var(--tg-primary) 15%,transparent), transparent 34%),
    var(--tg-bg);
  color:var(--tg-text);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.58;
}

body,button,input,select,textarea{font-size:16px}

.wrap,.admin-wrap,main{
  max-width:1180px;
  margin:0 auto;
  padding-left:22px;
  padding-right:22px;
}

h1,h2,h3,h4,h5,h6{
  color:var(--tg-text);
  line-height:1.2;
  letter-spacing:-.02em;
}

p,li,td,.muted,.help-text,.meta{
  color:var(--tg-text-secondary);
}

small,.muted{color:var(--tg-text-muted)!important}

a{
  color:var(--tg-link);
  text-decoration:none;
}

a:hover{
  color:var(--tg-link-hover);
  text-decoration:underline;
}

.hero{
  padding:40px;
  margin:28px 0 26px;
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--tg-primary) 18%,var(--tg-surface)),
    var(--tg-surface)
  );
  border:1px solid var(--tg-border);
  border-radius:20px;
  box-shadow:var(--tg-shadow);
}

.card,.article{
  background:var(--tg-surface);
  border:1px solid var(--tg-border);
  border-radius:var(--tg-radius);
  padding:22px;
  box-shadow:var(--tg-shadow);
}

.card+.card,.article+.article{margin-top:18px}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}

.stat{
  color:var(--tg-text);
  font-size:2rem;
  font-weight:800;
}

.badge{
  display:inline-flex;
  padding:5px 10px;
  border:1px solid var(--tg-border);
  border-radius:999px;
  background:var(--tg-surface-2);
  color:var(--tg-text);
  font-size:.8rem;
  font-weight:700;
}

.notice{
  padding:14px 16px;
  margin:14px 0;
  border-radius:var(--tg-radius-small);
  border:2px solid var(--tg-border);
  color:var(--tg-text);
}

.notice.ok{
  background:var(--tg-success-bg);
  border-color:var(--tg-success);
}

.notice.err{
  background:var(--tg-danger-bg);
  border-color:var(--tg-danger);
}

label{
  display:block;
  margin:14px 0 6px;
  color:var(--tg-text);
  font-weight:750;
}

input,select,textarea{
  width:100%;
  min-height:44px;
  padding:11px 13px;
  color:var(--tg-input-text);
  background:var(--tg-input);
  border:2px solid var(--tg-border);
  border-radius:10px;
  font:inherit;
}

textarea{min-height:130px}

input::placeholder,textarea::placeholder{
  color:var(--tg-text-muted);
  opacity:1;
}

input:focus,select:focus,textarea:focus{
  outline:3px solid color-mix(in srgb,var(--tg-primary) 42%,transparent);
  outline-offset:1px;
  border-color:var(--tg-primary);
}

button,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 15px;
  color:var(--tg-primary-text);
  background:var(--tg-primary);
  border:2px solid color-mix(in srgb,var(--tg-primary) 68%,white);
  border-radius:10px;
  font-weight:750;
  cursor:pointer;
}

button:hover,.btn:hover{
  background:var(--tg-primary-hover);
  text-decoration:none;
}

.gray{
  background:var(--tg-surface-3)!important;
  color:var(--tg-text)!important;
  border-color:var(--tg-border)!important;
}

.gold{
  background:var(--tg-warning)!important;
  color:#17120a!important;
  border-color:#fff0a3!important;
}

.red{
  background:var(--tg-danger)!important;
  color:#ffffff!important;
  border-color:#ffc0c8!important;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--tg-surface);
  border:1px solid var(--tg-border);
  border-radius:12px;
  overflow:hidden;
}

th{
  background:var(--tg-surface-2);
  color:var(--tg-text);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.045em;
}

th,td{
  padding:13px 14px;
  border-bottom:1px solid var(--tg-border-soft);
  text-align:left;
  vertical-align:top;
}

tr:last-child td{border-bottom:none}

tbody tr:nth-child(even){
  background:color-mix(in srgb,var(--tg-surface-2) 32%,transparent);
}

tbody tr:hover{
  background:color-mix(in srgb,var(--tg-primary) 10%,var(--tg-surface));
}

nav,.site-nav,.admin-nav{
  background:color-mix(in srgb,var(--tg-bg-elevated) 92%,transparent);
  border-bottom:1px solid var(--tg-border);
  backdrop-filter:blur(14px);
}

nav a,.site-nav a,.admin-nav a{
  color:var(--tg-text-secondary);
}

nav a:hover,.site-nav a:hover,.admin-nav a:hover,
nav a[aria-current="page"]{
  color:var(--tg-text);
  background:var(--tg-surface-2);
  text-decoration:none;
}

code,pre{
  color:var(--tg-text);
  background:var(--tg-bg-elevated);
  border:1px solid var(--tg-border);
  border-radius:8px;
}

code{padding:2px 6px}
pre{padding:16px;overflow:auto}

.password-help,.password-strength-line{
  color:var(--tg-text)!important;
  background:var(--tg-info-bg)!important;
  border-color:var(--tg-info)!important;
}

.password-caps{
  color:#111111!important;
  background:var(--tg-warning)!important;
}

.password-match.ok,.field-message.success{
  color:var(--tg-text)!important;
  background:var(--tg-success-bg)!important;
  border-color:var(--tg-success)!important;
}

.password-match.err,.field-message.error{
  color:var(--tg-text)!important;
  background:var(--tg-danger-bg)!important;
  border-color:var(--tg-danger)!important;
}

.password-requirements{
  color:var(--tg-text)!important;
  background:var(--tg-surface-2)!important;
  border-color:var(--tg-border)!important;
}

.password-requirements li{
  color:var(--tg-text-secondary)!important;
}

.password-requirements li.valid{
  color:var(--tg-text)!important;
  background:var(--tg-success-bg)!important;
}

.password-requirements li.invalid{
  color:var(--tg-text)!important;
  background:var(--tg-danger-bg)!important;
}

.theme-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}

.theme-preview-card{
  border:2px solid var(--tg-border);
  border-radius:14px;
  overflow:hidden;
  background:var(--tg-surface);
}

.theme-preview-card.selected{
  border-color:var(--tg-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tg-primary) 24%,transparent);
}

.theme-swatch{
  height:110px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:8px;
  padding:14px;
  background:var(--preview-bg);
}

.theme-swatch span{
  display:block;
  border-radius:8px;
}

.theme-swatch .preview-main{background:var(--preview-surface)}
.theme-swatch .preview-accent{background:var(--preview-primary)}

.theme-preview-body{padding:14px}

@media(max-width:760px){
  .wrap,.admin-wrap,main{
    padding-left:14px;
    padding-right:14px;
  }

  .hero{padding:26px 20px}
  .card,.article{padding:17px}
  .grid{grid-template-columns:1fr}

  button,.btn{
    width:100%;
    margin-top:8px;
  }
}