/* =========================
   StreetEmpire — UI Styles
   ========================= */

/* ---------- Design tokens ---------- */
:root{
  --bg:#0b0f14;
  --bg-2:#0f141b;
  --panel:#121923;
  --panel-2:#0e151e;
  --line:#1f2a36;
  --line-soft:#1a2431;
  --text:#e8eaed;
  --muted:#9aa0a6;
  --accent:#3b82f6;
  --accent-2:#22d3ee;
  --good:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-soft:0 8px 20px rgba(0,0,0,.25);
  --maxw:1100px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(59,130,246,.15), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg,#0a0d12 0%, #0b0f14 60%, #0a0d12 100%);
}

/* Subtle urban skyline (optional) */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,.5), transparent 40%),
    url('../images/skyline-bg.png') center bottom / cover no-repeat;
  opacity:.14;
  mix-blend-mode:soft-light;
  z-index:-1;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--text); text-decoration:none}
a:hover{opacity:.9}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw); margin:0 auto; padding:0 16px}
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(10,14,20,.65);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  display:flex; align-items:center; gap:14px;
  min-height:64px; padding:10px 0;
}
.logo img{height:42px; width:auto}
.site-content{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 16px 28px;
  width:100%;
}
.site-footer{
  border-top:1px solid var(--line);
  background:rgba(10,14,20,.6);
  padding:16px; text-align:center; color:var(--muted);
}

/* ---------- Navigation ---------- */
.nav{
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  width:100%;
}
.nav ul{
  display:flex;
  gap:10px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex:1 1 auto;
  min-width:0;
}
.nav > ul > li > a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px;
  border:1px solid transparent;
}
.nav > ul > li > a:hover{background:rgba(255,255,255,.05); border-color:var(--line-soft)}
/* Active helper (server-side voeg class .active toe) */
.nav a.active{background:linear-gradient(135deg, rgba(59,130,246,.15), rgba(34,211,238,.10)); border-color:#213047}

/* Dropdown */
.nav .dropdown{position:relative}
.nav .dropdown > a::after{content:"▾"; font-size:.8em; margin-left:6px; opacity:.7}
.dropdown-menu{
  position:absolute; top:110%; left:0; min-width:210px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:8px; display:none;
}
.dropdown-menu a{
  display:flex; gap:8px; padding:10px 10px; border-radius:10px; color:var(--text);
}
.dropdown-menu a:hover{background:#0f1722}
.dropdown:hover .dropdown-menu{display:block}

/* ---------- Cards, grids ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.card + .card{margin-top:14px}
.card h1,.card h2,.card h3{margin:0 0 10px}

.grid{display:grid; gap:12px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 1000px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:10px;
  border:1px solid #1e293b; cursor:pointer;
  background:linear-gradient(135deg, #172131, #131d2c);
  color:var(--text); text-decoration:none; transition:.15s ease;
}
.btn:hover{transform:translateY(-1px); border-color:#2b3a51}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent}
.btn.primary{background:linear-gradient(135deg, #1f3a63, #1a2c4b); border-color:#27466f}
.btn.success{border-color:#1d3b2e; background:linear-gradient(135deg,#143022,#13271f); color:#d1fae5}
.btn.warn{border-color:#3f3317; background:linear-gradient(135deg,#2c2412,#261e10); color:#fde68a}
.btn.danger{border-color:#3a1f1f; background:linear-gradient(135deg,#2a1515,#271515); color:#fecaca}
.btn[disabled], .btn.disabled{opacity:.55; cursor:not-allowed}

/* ---------- Forms ---------- */
.input, select, textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid #1f2a36; background:#0e151e; color:var(--text);
}
.input:focus, select:focus, textarea:focus{
  outline:none; border-color:#2b3b52; box-shadow:0 0 0 3px rgba(59,130,246,.15)
}
label{display:block; font-size:.92rem; color:#cbd5e1; margin:4px 0 6px}

/* Input rows */
.form-row{display:grid; gap:10px; grid-template-columns:1fr 1fr}
@media (max-width: 900px){ .form-row{grid-template-columns:1fr} }

/* ---------- Tables ---------- */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  overflow:hidden; border-radius:12px; border:1px solid var(--line);
}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:0}
.table th{background:#121a25; text-align:left; color:#cdd3da; font-weight:600}
.table tr:hover td{background:rgba(255,255,255,.02)}

/* ---------- Alerts ---------- */
.alert{padding:10px 12px; border-radius:10px; border:1px solid #273244; background:#0f1722}
.alert-success{border-color:#123225; background:rgba(16,185,129,.08); color:#d1fae5}
.alert-danger{border-color:#3a1f1f; background:rgba(239,68,68,.08); color:#fee2e2}
.alert-warning{border-color:#3a321f; background:rgba(245,158,11,.10); color:#fde68a}

/* ---------- Badges ---------- */
.badge{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:.82rem;
  border:1px solid var(--line); background:#0f1722; color:#cbd5e1;
}
.badge.vip{background:linear-gradient(135deg, rgba(250,204,21,.15), rgba(250,204,21,.08)); border-color:#7c6f25; color:#fde68a}
.badge.good{background:rgba(16,185,129,.12); border-color:#14532d; color:#bbf7d0}
.badge.warn{background:rgba(245,158,11,.12); border-color:#713f12; color:#fde68a}
.badge.bad{background:rgba(239,68,68,.12); border-color:#7f1d1d; color:#fecaca}

/* ---------- Progress ---------- */
.progress{
  height:12px; width:100%; border-radius:999px; background:#0f1117; border:1px solid #232731; overflow:hidden
}
.progress > .bar{height:100%; background:linear-gradient(135deg, var(--accent), var(--accent-2))}

/* ---------- Header navigation helper ---------- */
.site-header .nav a{
  position:relative;
}
.site-header .nav a::before{
  content:"";
  position:absolute; inset:auto 10px -6px 10px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.7), rgba(34,211,238,.7), transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .18s ease;
}
.site-header .nav a:hover::before,
.site-header .nav a.active::before{ transform:scaleX(1) }

/* ---------- Utility ---------- */
.m-0{margin:0}.mt-6{margin-top:6px}.mt-10{margin-top:10px}.mt-14{margin-top:14px}.mb-10{margin-bottom:10px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-8{gap:8px}.wrap{flex-wrap:wrap}
.right{margin-left:auto}
.text-muted{color:var(--muted)}
.center{text-align:center}

/* ---------- Components: Chat ---------- */
.chat-box{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden
}
.chat-messages{max-height:420px; overflow:auto; padding:10px}
.chat-input{display:flex; gap:8px; border-top:1px solid var(--line); padding:10px; background:#111823}

/* ---------- Components: Messages ---------- */
.messages-layout{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:18px;
  align-items:flex-start;
}
@media (max-width: 1024px){
  .messages-layout{grid-template-columns:1fr;}
}
.messages-panel{
  background:rgba(9,13,20,.85);
  border:1px solid rgba(148,163,184,.16);
  border-radius:16px;
  padding:18px;
  box-shadow:0 16px 34px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  gap:14px;
  position:sticky;
  top:86px;
}
@media (max-width: 960px){
  .messages-panel{position:static; top:auto;}
}
.messages-tabs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.messages-tabs a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.7);
  color:#d1d5db;
  font-weight:600;
  text-decoration:none;
}
.messages-tabs a.is-active{
  border-color:rgba(59,130,246,.55);
  background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(34,211,238,.14));
  color:#e5edff;
  box-shadow:0 10px 18px rgba(2,6,23,.35);
}
.messages-compose{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
.messages-compose input,
.messages-compose textarea{
  background:#0b1220;
  border:1px solid rgba(148,163,184,.25);
  border-radius:12px;
  padding:10px 12px;
  color:#e2e8f0;
}
.messages-compose textarea{min-height:140px; resize:vertical;}
.messages-recipient{
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
}
.messages-suggest{
  display:none;
  position:absolute;
  left:0; right:0;
  top:100%;
  margin-top:6px;
  background:rgba(9,14,22,.97);
  border:1px solid rgba(59,130,246,.35);
  border-radius:12px;
  padding:6px 0;
  list-style:none;
  max-height:220px;
  overflow:auto;
  box-shadow:0 14px 28px rgba(0,0,0,.45);
  z-index:40;
}
.messages-suggest.is-open{display:block;}
.messages-suggest li{
  padding:8px 12px;
  cursor:pointer;
  color:#e5e7eb;
}
.messages-suggest li:hover{background:rgba(59,130,246,.16);}
.messages-suggest li.empty{
  color:#94a3b8;
  cursor:default;
}
.messages-flash,
.messages-errors{
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
}
.messages-flash{
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);
  color:#befae3;
}
.messages-errors{
  background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.28);
  color:#fecdd3;
}
.messages-errors ul{
  margin:4px 0 0;
  padding-left:18px;
}
.messages-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}
.messages-list__item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 12px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.75);
  border-radius:14px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.messages-list__item:hover{
  background:rgba(30,41,59,.9);
  border-color:rgba(59,130,246,.35);
  transform:translateY(-1px);
}
.messages-list__item.unread{
  border-color:rgba(59,130,246,.55);
  box-shadow:0 12px 20px rgba(2,6,23,.38);
}
.messages-list__meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#94a3b8;
  font-size:12px;
}
.messages-list__subject{
  margin:0;
  color:#e2e8f0;
  font-size:15px;
  letter-spacing:.01em;
}
.messages-empty{
  padding:14px 16px;
  border:1px dashed rgba(148,163,184,.4);
  border-radius:14px;
  color:#94a3b8;
  background:rgba(11,17,26,.6);
}
.messages-detail{
  background:rgba(9,13,20,.82);
  border:1px solid rgba(148,163,184,.16);
  border-radius:18px;
  box-shadow:0 20px 34px rgba(0,0,0,.42);
  padding:18px;
  min-height:420px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.messages-detail__header{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:1px solid rgba(148,163,184,.12);
  padding-bottom:10px;
}
.messages-detail__header h2{
  margin:0;
  color:#f8fafc;
}
.messages-detail__body{
  background:rgba(15,23,42,.72);
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  padding:12px 14px;
  color:#e5e7eb;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

/* ---------- Components: Chat (live chat) ---------- */
.hq--chat{gap:22px;}
.chat-grid{
  display:grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(220px, 0.9fr);
  gap:16px;
}
@media (max-width: 960px){
  .chat-grid{grid-template-columns:1fr;}
}
.chat-panel{
  background:rgba(9,14,22,.88);
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  box-shadow:0 18px 32px rgba(0,0,0,.45);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chat-panel__head h2{
  margin:0;
  color:#e2e8f0;
  font-size:1rem;
}
.chat-panel__head p{
  margin:2px 0 0;
  color:#94a3b8;
  font-size:0.9rem;
}
.chat-panel--log{min-height:520px;}
.chat-ban-banner{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(248,113,113,.12);
  border:1px solid rgba(248,113,113,.35);
  color:#fecdd3;
  font-weight:600;
}
.chat-log{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:transparent;
  border:none;
  padding:6px 4px 8px;
  max-height:480px;
  overflow:auto;
  position:relative;
}
.chat-load{
  align-self:center;
  margin-bottom:4px;
}
.chat-empty{
  margin:0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(15,23,42,.75);
  border:1px dashed rgba(148,163,184,.35);
  color:#94a3b8;
}
.chat-row{
  position:relative;
  padding:8px 6px;
  border-radius:0;
  border:0;
  border-bottom:1px solid rgba(148,163,184,.14);
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.95rem;
}
.chat-row.mine{
  border-left:3px solid rgba(59,130,246,.75);
  background:rgba(59,130,246,.06);
}
.chat-row__delete{
  position:absolute;
  top:8px;
  right:8px;
  border:1px solid rgba(248,113,113,.35);
  background:transparent;
  color:#fecdd3;
  border-radius:6px;
  padding:2px 8px;
  cursor:pointer;
  font-weight:700;
}
.chat-row__delete:hover{background:rgba(248,113,113,.18);}
.chat-row__line{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-start;
  color:#e5e7eb;
  font-size:0.95rem;
}
.chat-row__name a{
  color:#38bdf8;
  font-weight:700;
  text-decoration:none;
}
.chat-row__name a:hover{text-decoration:underline;}
.chat-row__dash{color:#64748b;}
.chat-row__message a{color:#93c5fd;}
.chat-row__message a:hover{text-decoration:underline;}
.chat-row__meta{
  color:#94a3b8;
  font-size:12px;
}
.chat-form{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:6px;
  flex-wrap:wrap;
}
.chat-input-wrapper{
  position:relative;
  flex:1 1 360px;
}
.chat-input-field{
  width:100%;
  background:#0b1220;
  border:1px solid rgba(148,163,184,.25);
  border-radius:12px;
  padding:12px 12px;
  color:#e2e8f0;
  font-size:0.95rem;
}
.chat-input-field:focus{border-color:rgba(59,130,246,.45); outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.15);}
.chat-send{
  align-self:stretch;
  background:linear-gradient(135deg,#1f3a63,#0ea5e9);
  border-color:rgba(14,165,233,.5);
  color:#e0f2fe;
}
.chat-mentions{
  position:absolute;
  left:0; right:0;
  top:100%;
  margin-top:6px;
  background:rgba(9,14,22,.96);
  border:1px solid rgba(59,130,246,.35);
  border-radius:12px;
  box-shadow:0 14px 28px rgba(0,0,0,.45);
  z-index:45;
  padding:6px 0;
}
.friends-mentions{
  position:static;
  margin-top:8px;
  left:auto; right:auto; top:auto;
  width:100%;
  display:none;
  box-shadow:0 12px 24px rgba(0,0,0,0.35);
}
.friends-mentions.is-open{display:block;}
.chat-mentions__list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:220px;
  overflow:auto;
}
.chat-mentions__button{
  width:100%;
  text-align:left;
  padding:8px 12px;
  background:transparent;
  border:none;
  color:#e5e7eb;
  cursor:pointer;
}
.chat-mentions__button:hover,
.chat-mentions__button.is-active{
  background:rgba(59,130,246,.18);
}
.chat-error{
  margin-top:6px;
}
.chat-note{
  margin:4px 0 0;
  color:#94a3b8;
  font-size:0.9rem;
}
.chat-panel--online ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-online__empty{
  margin:0;
  padding:10px 12px;
  background:rgba(15,23,42,.7);
  border:1px dashed rgba(148,163,184,.35);
  border-radius:12px;
  color:#94a3b8;
}
.chat-online li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  background:rgba(11,17,26,.7);
  border:1px solid rgba(148,163,184,.18);
  border-radius:12px;
}
.chat-online__info{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.chat-online__user{
  color:#e2e8f0;
  font-weight:700;
  text-decoration:none;
}
.chat-online__user:hover{text-decoration:underline;}
.chat-online__vip{
  width:20px; height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fcd34d;
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.32);
  border-radius:50%;
}
.chat-online__actions button{
  border:none;
  background:rgba(248,113,113,.2);
  color:#fecdd3;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.chat-online__actions button:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.chat-hero{
  align-items:center;
}
.chat-hero__stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.chat-hero__stats article{
  flex:1 1 140px;
  background:rgba(15,23,42,.75);
  border:1px solid rgba(148,163,184,.2);
  border-radius:12px;
  padding:10px 12px;
  color:#e2e8f0;
}
.chat-hero__stats span{
  display:block;
  color:#94a3b8;
  font-size:0.85rem;
}
.chat-hero__stats strong{
  display:block;
  font-size:1.2rem;
  margin-top:4px;
}
.chat-refresh{
  align-self:flex-start;
}

/* ---------- Components: Minimap / World ---------- */
.minimap{
  border:1px solid var(--line); background:#0e151e; border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-soft)
}
.tile{width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; font-size:12px}
.tile--city{background:#0f1d2b}
.tile--forest{background:#0f2b1d}
.tile--danger{background:#2b0f12}

/* ---------- Crime: events & logs ---------- */
.crime-events{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.crime-events__item{
  background:rgba(11, 18, 32, .82);
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(148, 163, 184, .12);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.crime-events__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.crime-events__header strong{
  color:#f8fafc;
  font-size:.95rem;
}
.crime-events__time{
  color:var(--muted, #94a3b8);
  font-size:.75rem;
  white-space:nowrap;
}
.crime-events__badge{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(59, 130, 246, .18);
  border:1px solid rgba(59, 130, 246, .32);
  color:#dbeafe;
  font-size:.8rem;
  letter-spacing:.01em;
}
.crime-logs{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.crime-log{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148, 163, 184, .18);
  background:rgba(10, 16, 24, .72);
}
.crime-log__body{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.crime-log__body strong{
  color:#e2e8f0;
}
.crime-log__details{
  color:#cbd5f5;
  font-size:.82rem;
  line-height:1.3;
}
.crime-log__time{
  color:var(--muted, #94a3b8);
  font-size:.76rem;
  white-space:nowrap;
  margin-top:2px;
}
.crime-log--success{
  border-color:rgba(34, 197, 94, .35);
  background:rgba(22, 101, 52, .16);
}
.crime-log--fail{
  border-color:rgba(248, 113, 113, .35);
  background:rgba(127, 29, 29, .18);
}

/* ---------- Animations ---------- */
.fade-in{animation:fade .25s ease both}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 840px){
  .site-header .inner{min-height:56px}
  .nav ul{gap:6px; flex-wrap:wrap}
  .nav > ul > li > a{padding:8px 10px}
  .dropdown:hover .dropdown-menu{display:none}
  .dropdown:focus-within .dropdown-menu{display:block}
}

/* === Layout: shell & menu (from header.php) === */
    /* Skyline background */
    body {
      margin:0;
      min-height:100vh;
      background:
        radial-gradient(900px 600px at 70% 10%, rgba(59,130,246,0.08), transparent 60%),
        radial-gradient(700px 500px at 15% 15%, rgba(56,189,248,0.06), transparent 60%),
        linear-gradient(to top, rgba(6,10,18,0.9) 0px, rgba(6,10,18,0.85) 140px, transparent 240px),
        linear-gradient(to top, #0d1628 0px, #0c1424 180px, transparent 320px),
        repeating-linear-gradient(
          to right,
          rgba(15,22,36,0.95) 0px,
          rgba(15,22,36,0.95) 36px,
          rgba(11,17,28,0.95) 36px,
          rgba(11,17,28,0.95) 72px,
          rgba(9,13,22,0.94) 72px,
          rgba(9,13,22,0.94) 108px
        ),
        linear-gradient(180deg, #030712 0%, #0b1120 60%, #05070d 100%);
      color:#e2e8f0;
      font-family:"Inter","Segoe UI",system-ui,sans-serif;
    }
    .site-shell {
      display:flex;
      min-height:100vh;
      width:100%;
    }
    .site-sidebar {
      width:clamp(160px,17vw,210px);
      background:#070b12;
      border-right:1px solid rgba(59,130,246,0.12);
      padding:18px 14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      position:sticky;
      top:0;
      align-self:flex-start;
      min-height:100vh;
      box-shadow:8px 0 26px rgba(2,6,23,0.45);
    }
    .site-sidebar .brand {
      display:flex;
      flex-direction:column;
      gap:2px;
      padding:0 2px 10px;
      border-bottom:1px solid rgba(148,163,184,0.16);
    }
    .site-sidebar .brand strong {
      font-size:0.9rem;
      letter-spacing:0.1em;
      text-transform:uppercase;
      color:#e5e7eb;
    }
    .site-sidebar .brand span {
      color:#94a3b8;
      font-size:0.72rem;
    }
    .sidebar-menu {
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .nav-section {
      border:1px solid rgba(71,85,105,0.6);
      border-radius:6px;
      overflow:hidden;
      background:linear-gradient(180deg,#111821,#0a1018);
      box-shadow:inset 0 1px 0 rgba(148,163,184,0.08);
    }
    .nav-section__title {
      margin:0;
      padding:6px 10px;
      background:linear-gradient(180deg,#4b5563,#374151);
      color:#eceff5;
      font-size:0.75rem;
      letter-spacing:0.08em;
      text-transform:uppercase;
    }
    .nav-section__list {
      list-style:none;
      margin:0;
      padding:0;
    }
    .nav-section__list li + li .nav-item {
      border-top:1px solid rgba(15,23,42,0.85);
    }
    .nav-item {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:7px 10px;
      text-decoration:none;
      color:#d1d5db;
      font-weight:600;
      font-size:0.78rem;
      background:rgba(10,15,25,0.9);
      transition:background .15s ease,color .15s ease,padding-left .15s ease;
    }
    .nav-item:hover {
      background:#1b2430;
      color:#f8fafc;
      padding-left:12px;
    }
    .nav-item.active {
      background:#283341;
      color:#fff;
      border-left:3px solid #5fa8f3;
      padding-left:11px;
    }
    .nav-item__label {
      position:relative;
      padding-left:12px;
      flex:1;
    }
    .nav-item__label::before {
      content:'+';
      position:absolute;
      left:0;
      color:#6b7280;
      font-weight:700;
    }
    .nav-item.active .nav-item__label::before {
      color:#f8fafc;
    }
    .nav-badge {
      font-size:0.68rem;
      text-transform:uppercase;
      padding:1px 6px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.4);
      background:rgba(15,23,42,0.7);
      color:#e2e8f0;
    }
    .nav-badge--info {
      background:rgba(59,130,246,0.2);
      color:#93c5fd;
      border-color:rgba(59,130,246,0.35);
    }
    .nav-badge--danger {
      background:rgba(239,68,68,0.2);
      color:#fecaca;
      border-color:rgba(239,68,68,0.45);
    }
    .nav-badge--muted {
      background:rgba(148,163,184,0.2);
      color:#cbd5f5;
      border-color:rgba(148,163,184,0.35);
    }
    .site-sidebar .nav .nav-pill--danger {
      background:linear-gradient(135deg,#ef4444,#b91c1c);
      border-color:rgba(248,113,113,0.65);
      box-shadow:0 6px 16px rgba(239,68,68,0.35);
    }
    .site-sidebar .nav .nav-pill--info {
      background:linear-gradient(135deg,#38bdf8,#0ea5e9);
      border-color:rgba(125,211,252,0.6);
      box-shadow:0 6px 16px rgba(14,165,233,0.35);
    }
    .site-sidebar .nav .dropdown-menu {
      position:absolute;
      top:calc(100% + 10px);
      left:0;
      padding:12px;
      border-radius:16px;
      background:rgba(15,23,42,0.95);
      border:1px solid rgba(148,163,184,0.22);
      box-shadow:0 18px 34px rgba(15,23,42,0.45);
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width:200px;
      z-index:30;
    }
    .site-sidebar .nav .dropdown-menu[hidden] { display:none; }
    .site-sidebar .nav .dropdown-menu a {
      display:flex;
      align-items:center;
      gap:6px;
      padding:8px 12px;
      border-radius:12px;
      color:#e5e7eb;
      text-decoration:none;
      background:rgba(30,41,59,0.55);
      border:1px solid rgba(71,85,105,0.35);
      transition:background .2s ease, color .2s ease, transform .2s ease;
    }
    .site-sidebar .nav .dropdown-menu a:hover {
      background:rgba(59,130,246,0.28);
      color:#fff;
      transform:translateX(2px);
    }
    .nav .nav-quick-action form { display:inline-block; margin:0; }
    .nav .btn-nav-collect {
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 14px;
      border-radius:999px;
      border:none;
      background:linear-gradient(135deg,#f472b6,#6366f1);
      color:#fff;
      font-weight:600;
      font-size:13px;
      cursor:pointer;
      box-shadow:0 10px 22px rgba(99,102,241,0.35);
      transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    }
    .nav .btn-nav-collect:hover {
      transform:translateY(-1px);
      box-shadow:0 14px 26px rgba(99,102,241,0.4);
    }
    .nav .btn-nav-collect:disabled {
      opacity:.6;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }
    .site-main {
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:100vh;
      background:radial-gradient(circle at top,#0f172a 0%,#020617 60%);
    }
    .site-topbar {
      padding:16px 32px;
      border-bottom:1px solid rgba(148,163,184,0.12);
      display:flex;
      justify-content:flex-end;
      align-items:center;
      background:rgba(2,6,23,0.85);
      backdrop-filter:blur(12px);
      position:sticky;
      top:0;
      z-index:30;
      min-height:64px;
    }
    .topbar-user {
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      font-size:0.92rem;
      color:#cbd5f5;
    }
    .topbar-user strong {
      font-size:1rem;
      color:#f8fafc;
    }
    .topbar-user span {
      color:#94a3b8;
      font-size:0.9rem;
    }
    .topbar-user a {
      color:#38bdf8;
      text-decoration:none;
      font-weight:600;
    }
    .topbar-user a:hover { color:#fff; }
    .heat-chip {
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.08);
      background:rgba(255,255,255,0.05);
      color:#e2e8f0;
      font-size:12px;
      line-height:1;
      white-space:nowrap;
    }
    .heat-chip em {
      font-style:normal;
      color:#cbd5e1;
      letter-spacing:0.2px;
    }
    .heat-chip__bar {
      position:relative;
      width:82px;
      height:6px;
      border-radius:999px;
      background:rgba(255,255,255,0.12);
      overflow:hidden;
    }
    .heat-chip__bar span {
      display:block;
      height:100%;
      background:#ef4444;
      transition:width 0.2s ease;
    }
    .heat-chip__value {
      color:#f8fafc;
      font-weight:600;
    }
    /* Poker */
    .poker {
      background:linear-gradient(135deg, rgba(30,41,59,0.92), rgba(15,23,42,0.94));
      border:1px solid rgba(148,163,184,0.25);
      box-shadow:0 20px 40px rgba(0,0,0,0.32);
      overflow:hidden;
    }
    .poker__header {
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      padding:12px 12px 0;
    }
    .poker__balance small {
      display:block;
      color:#94a3b8;
      margin-top:4px;
    }
    .poker-result {
      margin:12px;
      border-radius:14px;
      padding:10px 14px;
      border:1px solid rgba(255,255,255,0.06);
      background:rgba(255,255,255,0.04);
      color:#e2e8f0;
    }
    .poker-result__title { font-weight:700; letter-spacing:0.4px; }
    .poker-result--player { background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.35); color:#bbf7d0; }
    .poker-result--dealer { background:rgba(248,113,113,0.12); border-color:rgba(248,113,113,0.35); color:#fecdd3; }
    .poker-result--push { background:rgba(59,130,246,0.12); border-color:rgba(59,130,246,0.35); color:#bfdbfe; }
    .poker-table {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:18px;
      padding:12px;
    }
    .poker-side {
      background:rgba(15,23,42,0.55);
      border:1px solid rgba(148,163,184,0.18);
      border-radius:12px;
      padding:12px;
      min-height:160px;
    }
    .poker-side__label {
      text-transform:uppercase;
      font-size:12px;
      letter-spacing:0.6px;
      color:#94a3b8;
      margin-bottom:6px;
    }
    .poker-hand { display:flex; flex-direction:column; gap:8px; }
    .poker-cards { display:flex; gap:8px; flex-wrap:wrap; }
    .poker-card {
      position:relative;
      width:66px;
      aspect-ratio:2.5/3.5;
      border-radius:10px;
      background:#0f172a;
      border:1px solid rgba(148,163,184,0.25);
      box-shadow:0 10px 20px rgba(0,0,0,0.25);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      color:#e2e8f0;
      font-weight:700;
    }
    .poker-card__rank { font-size:18px; line-height:1; }
    .poker-card__suit { font-size:18px; }
    .poker-card--hearts .poker-card__rank,
    .poker-card--diamonds .poker-card__rank,
    .poker-card--hearts .poker-card__suit,
    .poker-card--diamonds .poker-card__suit { color:#f87171; }
    .poker-hand__label { color:#cbd5e1; font-weight:600; }
    .poker-hand__placeholder { color:#64748b; margin:6px 0 0; }
    .poker-vs {
      font-weight:800;
      color:#cbd5e1;
      background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:50%;
      width:52px;
      height:52px;
      display:grid;
      place-items:center;
      text-transform:uppercase;
      letter-spacing:0.6px;
    }
    .poker-form {
      padding:0 12px 12px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:flex-end;
    }
    .poker-form__input label { display:block; color:#94a3b8; margin-bottom:6px; }
    .poker-form__input input {
      background:rgba(15,23,42,0.65);
      border:1px solid rgba(148,163,184,0.25);
      color:#e2e8f0;
      padding:10px 12px;
      border-radius:10px;
      min-width:140px;
    }
    .poker-form__hint { color:#94a3b8; margin:4px 0 0; font-size:13px; }
    .poker-bottom { padding:0 12px 14px 12px; display:grid; gap:12px; }
    .poker-rules { color:#94a3b8; font-size:13px; line-height:1.6; }
    .poker-history { background:rgba(15,23,42,0.55); border:1px solid rgba(148,163,184,0.2); }
    .poker-history__list { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
    .poker-history__item { display:flex; justify-content:space-between; color:#cbd5e1; font-size:14px; }
    .poker-history__delta { font-weight:700; }
    .site-content {
      flex:1;
      padding:28px 32px;
    }
    .mobile-menu-toggle {
      display:none;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(148,163,184,0.18);
      background:linear-gradient(135deg,#0b1220,#0f172a);
      color:#e2e8f0;
      font-weight:700;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      box-shadow:0 10px 22px rgba(2,6,23,0.35);
    }
    .mobile-menu-toggle__icon { font-size:18px; line-height:1; }
    .mobile-menu-toggle:hover {
      border-color:rgba(148,163,184,0.35);
      box-shadow:0 12px 24px rgba(2,6,23,0.4);
    }
    .mobile-menu-toggle:active { transform:translateY(1px); }
    .mobile-menu-toggle:focus-visible { outline:2px solid #38bdf8; outline-offset:2px; }
    .mobile-nav-backdrop { display:none; }
    .breakout-toast {
      position:fixed;
      right:24px;
      bottom:24px;
      background:linear-gradient(135deg,#22c55e,#16a34a);
      color:#ecfdf5;
      padding:20px 24px 18px;
      border-radius:18px;
      box-shadow:0 20px 38px rgba(22,163,74,0.35);
      max-width:320px;
      z-index:120;
      display:flex;
      flex-direction:column;
      gap:8px;
      border:1px solid rgba(74,222,128,0.35);
      animation:toast-in .35s ease both;
    }
    .breakout-toast.is-hidden {
      animation:toast-out .25s ease forwards;
    }
    .breakout-toast__eyebrow {
      font-size:11px;
      letter-spacing:0.2em;
      text-transform:uppercase;
      opacity:0.9;
    }
    .breakout-toast__close {
      position:absolute;
      top:10px;
      right:14px;
      border:none;
      background:transparent;
      color:#fff;
      font-size:18px;
      cursor:pointer;
      opacity:0.8;
    }
    .breakout-toast__close:hover {
      opacity:1;
    }
    .pm-toast {
      position:fixed;
      bottom:24px;
      right:24px;
      width:320px;
      padding:18px;
      background:rgba(15,23,42,0.96);
      border-radius:16px;
      border:1px solid rgba(148,163,184,0.25);
      box-shadow:0 20px 40px rgba(2,6,23,0.55);
      color:#e2e8f0;
      z-index:1500;
      animation:toast-in 0.25s ease-out;
    }
    .pm-toast.is-hidden {
      animation:toast-out 0.2s ease-in forwards;
    }
    .pm-toast__title {
      font-size:0.85rem;
      text-transform:uppercase;
      letter-spacing:0.08em;
      color:#38bdf8;
    }
    .pm-toast__subject {
      margin:6px 0;
      font-weight:600;
    }
    .pm-toast__meta {
      color:#94a3b8;
      font-size:0.85rem;
    }
    .pm-toast__actions {
      margin-top:12px;
      display:flex;
      gap:8px;
      justify-content:flex-end;
      flex-wrap:wrap;
    }
    @media (max-width:640px){
      .pm-toast {
        left:16px;
        right:16px;
        width:auto;
      }
    }
    @keyframes toast-in {
      from { transform:translateY(12px) scale(0.95); opacity:0; }
      to { transform:translateY(0) scale(1); opacity:1; }
    }
    @keyframes toast-out {
      to { transform:translateY(10px) scale(0.9); opacity:0; }
    }
    @media (max-width:960px){
      .site-shell {
        flex-direction:column;
        position:relative;
        min-height:100vh;
      }
      .site-sidebar {
        position:fixed;
        inset:0 auto 0 0;
        transform:translateX(-100%);
        width:min(86vw, 340px);
        max-width:360px;
        min-height:100vh;
        overflow-y:auto;
        padding:18px 14px 24px;
        box-shadow:0 18px 32px rgba(0,0,0,0.45);
        border-right:1px solid rgba(59,130,246,0.16);
        border-bottom:none;
        background:#070b12;
        transition:transform .2s ease, box-shadow .2s ease;
        z-index:1200;
      }
      .site-shell.is-nav-open .site-sidebar {
        transform:translateX(0);
      }
      .sidebar-menu {
        width:100%;
      }
      .site-topbar {
        justify-content:space-between;
        gap:12px;
        padding:14px 16px;
      }
      .topbar-user {
        flex:1;
        flex-wrap:nowrap;
        overflow-x:auto;
        white-space:nowrap;
        gap:10px;
        padding:2px 0 4px;
        scrollbar-color:rgba(148,163,184,0.4) transparent;
      }
      .topbar-user::-webkit-scrollbar { height:6px; }
      .topbar-user::-webkit-scrollbar-thumb {
        background:rgba(148,163,184,0.4);
        border-radius:10px;
      }
      .site-content {
        padding:20px 16px 24px;
      }
      .mobile-menu-toggle {
        display:inline-flex;
      }
      .mobile-nav-backdrop {
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.55);
        backdrop-filter:blur(2px);
        opacity:0;
        visibility:hidden;
        transition:opacity .2s ease;
        z-index:1100;
      }
      .site-shell.is-nav-open .mobile-nav-backdrop {
        opacity:1;
        visibility:visible;
      }
      body.mobile-nav-open { overflow:hidden; }
    }

/* === Dashboard components (from pages/dashboard.php) === */
.dash {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 48px;
}

.dash-card {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.88));
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 24px 45px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}

.dash-card h1,
.dash-card h2,
.dash-card h3 {
  margin: 0;
  color: #f8fafc;
}

.dash-card p {
  margin: 8px 0 0;
  color: #cbd5f5;
}

.dash-hero {
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 320px;
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.35), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(168, 85, 247, 0.35), transparent 60%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(15, 23, 42, 0.88));
}

.dash-hero__eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 3px;
  color: #38bdf8;
  margin-bottom: 12px;
}

.dash-hero__progress {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-statline {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #94a3b8;
}

.dash-progress {
  width: 100%;
  height: 10px;
  background: rgba(51, 65, 85, 0.55);
  border-radius: 999px;
  overflow: hidden;
}

.dash-progress__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #22d3ee);
  border-radius: 999px;
}

.dash-hero__tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dash-hero__tags span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 14px;
  background: rgba(59, 130, 246, 0.18);
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #e0f2fe;
  font-size: 13px;
  max-width: 100%;
  white-space: normal;
}

.dash-hero__alert {
  margin-top: 18px;
  color: #fbbf24;
  font-weight: 600;
}

.dash-hero__visual img {
  width: 100%;
  max-width: 320px;
  display: block;
  filter: drop-shadow(0 18px 35px rgba(56, 189, 248, 0.45));
}

.dash-grid {
  display: grid;
  gap: 24px;
}

.dash-grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.dash-grid--overview {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.dash-grid--actions {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.dash-card--stat,
.dash-card--resource {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.dash-card--stat .dash-card__body,
.dash-card--resource .dash-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

  .dash-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(140deg, rgba(59, 130, 246, 0.22), rgba(30, 64, 175, 0.34));
    color: #dbeafe;
    flex-shrink: 0;
  }

  .dash-card--resource .dash-card__icon {
    background: linear-gradient(140deg, rgba(14, 165, 233, 0.26), rgba(45, 212, 191, 0.28));
    color: #cffafe;
  }

.dash-card__art {
  width: 72px;
  border-radius: 18px;
  flex-shrink: 0;
  box-shadow: 0 18px 32px rgba(15, 118, 110, 0.35);
}

.dash-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.dash-card__label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #94a3b8;
}

.dash-card__body h3 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 24px;
  line-height: 1.2;
}

.dash-card__body h3 span {
  font-weight: 700;
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dash-card__note {
  font-size: 13px;
  color: #94a3b8;
  word-break: break-word;
}

.dash-card--timers header,
.dash-card--crew header,
.dash-card--actions header,
.dash-card--events header,
.dash-card--recent header {
  margin-bottom: 16px;
}

.dash-card--combat .dash-card__note {
  margin-top: 0;
}

.dash-card--referral {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dash-referral-share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-referral-share .btn.copied {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.4);
  color: #bbf7d0;
}

.dash-referral-input {
  flex: 1;
  font-weight: 600;
}

.dash-referral-note {
  margin: 0;
  font-size: 13px;
  color: #cbd5f5;
}

.dash-referral-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dash-referral-stats li {
  min-width: 120px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.24);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-referral-stats span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.dash-referral-stats strong {
  font-size: 18px;
  color: #f8fafc;
}

.dash-combat-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dash-combat-stats div {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #94a3b8;
  font-size: 12px;
}

.dash-combat-stats strong {
  font-size: 16px;
  color: #f8fafc;
}

.dash-combat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-combat-list__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-combat-list__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #94a3b8;
}

.dash-combat-list__empty {
  text-align: center;
  color: #94a3b8;
  padding: 12px;
  background: rgba(30, 41, 59, 0.45);
  border-radius: 12px;
}

.badge.success {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #86efac;
}

.dash-timers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-timers li {
  display: block;
}

.dash-timer-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  color: #e2e8f0;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, border 0.2s ease;
  border: 1px solid transparent;
}

.dash-timer-link span {
  font-weight: 600;
}

.dash-timer-link strong {
  font-weight: 700;
  color: #38bdf8;
  min-width: 80px;
  text-align: right;
}

.dash-timer-link--disabled strong {
  color: #94a3b8;
}

.dash-timer-link:hover {
  background: rgba(30, 64, 175, 0.28);
  transform: translateY(-1px);
  border: 1px solid rgba(96, 165, 250, 0.35);
}

.dash-timer-link--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.dash-timer-link--disabled:hover {
  transform: none;
  background: rgba(15, 23, 42, 0.55);
  border-color: transparent;
}

.dash-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.dash-tags li {
  background: rgba(15, 23, 42, 0.55);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-tags li strong {
  color: #f8fafc;
  font-size: 18px;
}

.dash-tags li span {
  color: #94a3b8;
  font-size: 13px;
}

.dash-crew p {
  margin: 6px 0;
}

.dash-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.dash-form[data-disabled="1"] {
  opacity: 0.85;
}

.dash-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #e2e8f0;
  font-size: 14px;
}

.dash-form__hint {
  color: #94a3b8;
  font-size: 13px;
}

.dash-footnote {
  margin-top: 24px;
  color: #94a3b8;
  font-size: 13px;
}

.dash-events {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-event {
  background: rgba(15, 23, 42, 0.55);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-event__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.dash-events__actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.dash-card--business {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-business {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dash-business li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.dash-business__label span {
  font-weight: 600;
  display: block;
  color: #f8fafc;
}
.dash-business__label small {
  display: block;
  color: rgba(226, 232, 240, 0.7);
}
.dash-business__values {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-business__values strong {
  font-size: 18px;
  color: #38bdf8;
}
.dash-business__values small {
  color: rgba(226, 232, 240, 0.7);
}
.dash-business__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  font-weight: 600;
}
.dash-business__footer strong {
  color: #38bdf8;
  font-size: 18px;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.dash-table th,
.dash-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  text-align: left;
  font-size: 13px;
  color: #e2e8f0;
}

.dash-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.12);
}

.dash-empty {
  color: #94a3b8;
  font-size: 14px;
}

.dash-flash .alert {
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #334155, #1f2937);
  color: #f8fafc;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(148, 163, 184, 0.24);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn.success {
  background: linear-gradient(135deg, #15803d, #22c55e);
}

.btn.ghost {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.25);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 600;
}

.badge.danger {
  background: rgba(220, 38, 38, 0.28);
  color: #fecaca;
}

.badge.vip {
  background: rgba(124, 58, 237, 0.35);
  color: #ede9fe;
}

.badge.ghost {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
}

.input {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.65);
  color: #f8fafc;
}

.alert {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(30, 64, 175, 0.4);
  color: #f8fafc;
  margin-top: 4px;
}

.alert-success {
  background: rgba(22, 163, 74, 0.45);
}

.alert-danger {
  background: rgba(185, 28, 28, 0.45);
}

.alert-warning {
  background: rgba(180, 83, 9, 0.45);
}

.levelup-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1100;
}

.levelup-modal.open {
  display: block;
}

.levelup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 15, 0.7);
  backdrop-filter: blur(3px);
}

.levelup-sheet {
  position: relative;
  max-width: 640px;
  margin: 7vh auto;
  background: linear-gradient(160deg, rgba(15,23,42,0.96), rgba(8,15,32,0.94));
  border-radius: 22px;
  padding: 28px;
  border: 1px solid rgba(148,163,184,0.25);
  box-shadow: 0 28px 60px rgba(2,6,23,0.55);
  animation: dash-pop 0.2s ease-out;
}

@keyframes dash-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0.5; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.levelup-hero {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.levelup-bubble {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: rgba(34,197,94,0.2);
  border: 1px solid rgba(34,197,94,0.45);
  color: #bbf7d0;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.levelup-hero__copy h3 {
  margin: 0;
  color: #f8fafc;
}

.levelup-hero__copy p {
  margin: 4px 0;
  color: rgba(226,232,240,0.9);
}

.levelup-message {
  color: #38bdf8;
  font-weight: 600;
}

.levelup-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 26px;
  cursor: pointer;
}

.levelup-summary {
  margin: 22px 0 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.levelup-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(148,163,184,0.16);
}

.levelup-card__icon {
  font-size: 20px;
}

.levelup-card strong {
  color: #f8fafc;
  display: block;
}

.levelup-card small {
  color: rgba(148,163,184,0.8);
}

.levelup-timeline h4 {
  margin: 12px 0;
  color: #f8fafc;
}

.levelup-timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 320px;
  overflow-y: auto;
}

.levelup-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 16px;
  background: rgba(15,23,42,0.75);
  border: 1px solid rgba(148,163,184,0.18);
}

.levelup-item__level {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(59,130,246,0.2);
  color: #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.levelup-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.levelup-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,0.18);
  color: #dbeafe;
  font-size: 12px;
}

.levelup-item__body small {
  color: rgba(148,163,184,0.8);
}

.levelup-item__message {
  margin: 6px 0 0;
  color: rgba(248,250,252,0.85);
  font-size: 0.95rem;
}

.levelup-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 600px) {
  .levelup-sheet {
    margin: 6vh 16px;
    padding: 20px;
  }
  .levelup-hero {
    flex-direction: column;
  }
  .levelup-close {
    align-self: flex-end;
  }
  .levelup-summary {
    grid-template-columns: 1fr;
  }
  .levelup-item {
    flex-direction: column;
  }
  .levelup-item__level {
    width: 100%;
    height: 44px;
  }
  .levelup-actions {
    flex-direction: column;
  }
}
.hq {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #d1d5db;
}
.hq-hero {
  background: linear-gradient(180deg,#0b111b,#04070d);
  border:1px solid rgba(148,163,184,0.25);
  border-radius:14px;
  padding:18px;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  box-shadow:0 18px 32px rgba(2,6,23,0.6) inset,0 8px 18px rgba(0,0,0,0.55);
}
.hq-hero__body {
  flex:1;
  min-width:220px;
}
.hq-hero__eyebrow {
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:0.75rem;
  color:#cbd5f5;
  margin:0 0 6px;
}
.hq-hero__body h1 {
  margin:0;
  font-size:1.4rem;
  color:#f8fafc;
}
.hq-hero__progress {
  margin-top:12px;
  background:rgba(15,23,42,0.8);
  border:1px solid rgba(59,130,246,0.25);
  border-radius:8px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hq-progress {
  height:6px;
  border-radius:4px;
  background:rgba(51,65,85,0.7);
  overflow:hidden;
}
.hq-progress span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#4ade80,#22d3ee);
}
.hq-hero__alert {
  margin:12px 0 0;
  color:#fbbf24;
  font-weight:600;
}
.hq-hero__stats {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}
.hq-hero__stats li {
  flex:1 1 120px;
  background:rgba(15,23,42,0.8);
  border:1px solid rgba(148,163,184,0.2);
  border-radius:8px;
  padding:10px;
}
.hq-hero__stats span {
  font-size:0.75rem;
  color:#94a3b8;
}
.hq-hero__stats strong {
  display:block;
  color:#f8fafc;
  font-size:1.1rem;
}
.hq-hero__badge { display:flex; justify-content:flex-end; }
.badge-circle {
  width:150px;
  height:150px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(59,130,246,0.32), transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(14,165,233,0.22), transparent 70%),
    linear-gradient(145deg, rgba(37,99,235,0.9), rgba(14,165,233,0.85));
  box-shadow:0 14px 30px rgba(14,165,233,0.25);
  border:1px solid rgba(148,163,184,0.22);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#e2e8f0;
  text-align:center;
  padding:12px;
  gap:6px;
}
.badge-circle span { font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#cbd5e1; }
.badge-circle strong { font-size:15px; color:#fff; }
.hq-flash {
  background:rgba(59,130,246,0.12);
  border:1px solid rgba(59,130,246,0.35);
  border-radius:8px;
  padding:10px 14px;
}
.hq-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.hq-panel {
  border:1px solid rgba(71,85,105,0.5);
  border-radius:8px;
  background:rgba(5,8,20,0.9);
  box-shadow:0 8px 18px rgba(0,0,0,0.45);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hq-panel header h2 {
  margin:0;
  font-size:0.92rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#f1f5f9;
}
.hq-empty {
  margin:0;
  padding:8px;
  background:rgba(15,23,42,0.6);
  border-radius:6px;
  font-size:0.85rem;
  color:#94a3b8;
}
.hq-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hq-list__row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border:1px solid rgba(51,65,85,0.6);
  border-radius:10px;
  padding:10px 12px;
  background:rgba(10,15,25,0.9);
  text-decoration:none;
  color:inherit;
  min-height:46px;
}
.hq-list__row--wait {
  background:rgba(76,29,29,0.4);
  border-color:rgba(248,113,113,0.4);
}
.hq-list__row--ready {
  background:rgba(10,15,25,0.9);
  border-color:rgba(51,65,85,0.6);
}
.hq-list__row:hover {
  border-color:rgba(148,163,184,0.9);
}
.hq-list__label {
  font-size:0.82rem;
  color:#94a3b8;
}
.hq-list__value {
  font-weight:700;
  color:#f8fafc;
}
.hq-bar {
  height:4px;
  border-radius:4px;
  background:rgba(51,65,85,0.6);
  margin-top:4px;
  overflow:hidden;
}
.hq-bar span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#f472b6,#fb923c);
}
.hq-list__meta {
  margin:4px 0 0;
  font-size:0.75rem;
  color:#94a3b8;
}
.hq-panel__footer {
  margin-top:6px;
  font-size:0.82rem;
  color:#cbd5f5;
}
.hq-panel__actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.hq-panel--actions .dash-form,
.hq-panel--referral .dash-form {
  border:1px solid rgba(59,130,246,0.25);
  border-radius:6px;
  padding:8px 10px;
  background:rgba(15,23,42,0.7);
}
.hq-panel--referral .dash-referral-share {
  display:flex;
  gap:8px;
  flex-direction:column;
}
.hq-panel--referral .dash-referral-note {
  font-size:0.8rem;
  color:#94a3b8;
}
.hq-panel--referral .dash-referral-stats {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.hq-panel--referral .dash-referral-stats li {
  flex:1 1 100px;
  background:rgba(15,23,42,0.7);
  border:1px solid rgba(148,163,184,0.2);
  border-radius:6px;
  padding:8px;
  text-align:center;
}
.hq-panel--referral .dash-referral-stats span {
  display:block;
  font-size:0.72rem;
  color:#94a3b8;
}
.hq-panel--referral .dash-referral-stats strong {
  color:#f8fafc;
}
.hq-panel--actions form {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hq-panel--actions label {
  font-size:0.85rem;
  color:#cbd5f5;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.hq-panel--actions .dash-footnote {
  font-size:0.78rem;
  color:#94a3b8;
}
@media (max-width: 720px) {
  .hq-hero {
    flex-direction:column;
  }
  .hq-hero__stats {
    flex-direction:column;
  }
}

/* === Businesses page styles === */
.business-page {
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:48px;
}
.business-header {
  width:100%;
  align-items:flex-start;
  gap:20px;
}
.business-header__body {
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-width:260px;
}
.business-header__eyebrow {
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.7rem;
  color:#60a5fa;
}
.business-header__body h1 {
  margin:0;
  font-size:1.6rem;
  color:#f8fafc;
}
.business-header__body p {
  margin:0;
  color:#cbd5f5;
}
.business-collect-all {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:6px;
}
.business-collect-all__form {
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.business-collect-all__btn {
  font-weight:600;
}
.business-collect-all__hint {
  margin:0;
  font-size:0.8rem;
  color:#94a3b8;
}
.business-flash {
  margin-top:6px;
}
.business-grid {
  grid-template-columns:1fr;
  gap:18px;
}
.business-tabs-panel__head h2 {
  margin:0;
  font-size:0.9rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#e2e8f0;
}
.business-tabs-panel__head p {
  margin:4px 0 0;
  font-size:0.85rem;
  color:#94a3b8;
}
.business-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.business-tabs__link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.25);
  background:rgba(15,23,42,0.6);
  color:#cbd5f5;
  font-weight:600;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.business-tabs__link:hover {
  background:rgba(59,130,246,0.25);
  color:#fff;
  transform:translateY(-1px);
}
.business-tabs__link.active {
  background:linear-gradient(135deg,#6366f1,#f472b6);
  border-color:transparent;
  color:#fff;
  box-shadow:0 12px 26px rgba(99,102,241,0.4);
}
.business-tabs__icon {
  font-size:1rem;
}
.hq-panel.business-active {
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
}
.escort {
  display:flex;
  flex-direction:column;
  gap:22px;
}
.escort-card {
  position:relative;
  background:rgba(9,13,24,0.95);
  border:1px solid rgba(59,130,246,0.15);
  border-radius:18px;
  padding:20px;
  box-shadow:0 18px 32px rgba(3,7,18,0.55);
}
.escort-card h1,
.escort-card h2,
.escort-card h3 {
  margin:0;
  color:#f8fafc;
}
.escort-card p {
  margin:0;
  color:#cbd5f5;
}
.escort-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,320px);
  gap:24px;
  align-items:center;
  background:linear-gradient(135deg,rgba(79,70,229,0.2),rgba(236,72,153,0.15));
}
.escort-hero__content {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.escort-hero__eyebrow {
  text-transform:uppercase;
  font-size:0.75rem;
  letter-spacing:0.28em;
  color:#f472b6;
}
.escort-hero__progress {
  display:flex;
  flex-direction:column;
  gap:8px;
  background:rgba(2,6,23,0.85);
  border:1px solid rgba(59,130,246,0.2);
  border-radius:10px;
  padding:12px;
}
.escort-statline {
  display:flex;
  justify-content:space-between;
  font-size:0.85rem;
  color:#cbd5f5;
}
.escort-progress {
  height:6px;
  border-radius:4px;
  background:rgba(15,23,42,0.6);
  overflow:hidden;
}
.escort-progress__fill {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#34d399,#38bdf8);
}
.escort-hero__tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.escort-hero__tags span {
  font-size:0.75rem;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.25);
  color:#e2e8f0;
  background:rgba(15,23,42,0.6);
}
.escort-hero__alert {
  font-weight:600;
  color:#fbbf24;
}
.escort-hero__visual img {
  width:100%;
  border-radius:16px;
  box-shadow:0 12px 24px rgba(0,0,0,0.45);
}
.escort-flash {
  border-radius:10px;
  padding:10px 12px;
  background:rgba(59,130,246,0.12);
  border:1px solid rgba(59,130,246,0.3);
}
.escort-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.escort-card--stat {
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:center;
}
.escort-card__art {
  width:48px;
  height:48px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(148,163,184,0.3);
  margin-bottom:4px;
}
.escort-card__label {
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:#94a3b8;
}
.escort-card__note {
  font-size:0.85rem;
  color:#cbd5f5;
}
.escort-card--summary ul {
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.escort-empty {
  margin:0;
  padding:10px;
  border-radius:10px;
  background:rgba(15,23,42,0.5);
  color:#cbd5f5;
  font-size:0.85rem;
}
.escort-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.escort-list li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(2,6,23,0.8);
  border:1px solid rgba(148,163,184,0.18);
  font-size:0.85rem;
}
.escort-list--highlight {
  border-color:rgba(34,197,94,0.4);
  background:rgba(22,163,74,0.15);
}
.escort-form {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.escort-input-group {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.escort-input {
  background:rgba(2,6,23,0.9);
  border:1px solid rgba(148,163,184,0.3);
  border-radius:10px;
  padding:10px 12px;
  color:#f8fafc;
  width:100%;
}
.escort-input-hint {
  font-size:0.8rem;
  color:#94a3b8;
}
.escort-form-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.escort-subnote {
  font-size:0.8rem;
  color:#94a3b8;
  margin:0;
}
.escort-footnote {
  font-size:0.78rem;
  color:#94a3b8;
  margin-top:8px;
}
.escort-tags {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.escort-tags li {
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.25);
  color:#cbd5f5;
  font-size:0.75rem;
  background:rgba(15,23,42,0.5);
}
.escort-card--log {
  overflow:auto;
}
.escort-table {
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
}
.escort-table th,
.escort-table td {
  text-align:left;
  padding:8px;
  border-bottom:1px solid rgba(148,163,184,0.15);
}
.escort-table th {
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.75rem;
  color:#94a3b8;
}
.escort-table tr:hover td {
  background:rgba(15,23,42,0.6);
}
.lab-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
.lab-card {
  border:1px solid rgba(148,163,184,0.2);
  border-radius:14px;
  background:rgba(6,10,20,0.92);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lab-card__header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.lab-card__title {
  margin:0;
  font-size:1rem;
  color:#f8fafc;
}
.lab-card__subtitle {
  margin:0;
  font-size:0.8rem;
  color:#94a3b8;
}
.lab-card__stats {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:0.85rem;
  color:#cbd5f5;
}
.lab-card__actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.lab-card__actions .btn {
  flex:1 1 auto;
}
.lab-card__note {
  font-size:0.78rem;
  color:#94a3b8;
}
.lab-card__group {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lab-card__group strong {
  color:#f8fafc;
}
.lab-card__chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.lab-card__chips span {
  padding:4px 8px;
  border-radius:8px;
  background:rgba(15,23,42,0.65);
  border:1px solid rgba(148,163,184,0.3);
  font-size:0.75rem;
  color:#cbd5f5;
}
.lab-card__status {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.8rem;
  color:#cbd5f5;
}
.lab-card__status strong {
  color:#f8fafc;
}
.escort-card table .label {
  color:#94a3b8;
}
.escort-card table .value {
  color:#f8fafc;
  font-weight:600;
}
.escort-card--actions .escort-list {
  margin-top:10px;
}
.escort-card--actions .escort-list li {
  background:rgba(4,7,17,0.8);
}
.escort-card--actions .escort-list strong {
  color:#f8fafc;
}
.business-active .escort,
.business-active .escort-card {
  width:100%;
}
.business-active .escort-grid--actions .escort-card {
  background:rgba(5,10,20,0.95);
}
.business-active .escort-card--log {
  overflow-x:auto;
}
.business-active .escort-card--log table {
  min-width:480px;
}
.business-active .escort-card--log td:last-child,
.business-active .escort-card--log th:last-child {
  text-align:right;
}
.business-active .escort-card--summary strong {
  font-size:1rem;
}
.business-active .escort-card--summary span {
  color:#94a3b8;
}
.business-active .escort-card--modifiers {
  background:rgba(10,15,28,0.9);
}
.business-active .escort-card--modifiers ul {
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.business-active .escort-card--modifiers li {
  display:flex;
  justify-content:space-between;
  color:#e2e8f0;
  font-size:0.85rem;
}
@media (max-width: 900px) {
  .escort-hero {
    grid-template-columns:1fr;
  }
  .business-grid {
    grid-template-columns:1fr;
  }
  .hq-panel.business-active {
    grid-column:1 / -1;
  }
}

/* ---------- Profile ---------- */
.profile-hero{
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  padding:24px;
  background:linear-gradient(135deg, rgba(12,18,28,0.95), rgba(8,13,22,0.95));
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.profile-hero::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-120px;
  bottom:-80px;
  background:radial-gradient(circle, rgba(59,130,246,0.3), transparent 65%);
  pointer-events:none;
}
.profile-hero > *{position:relative; z-index:1}
.profile-hero__identity{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.profile-avatar{
  width:96px;
  height:96px;
  border-radius:999px;
  position:relative;
  --profile-avatar-hue:210deg;
  background:linear-gradient(135deg,
    hsl(var(--profile-avatar-hue), 70%, 55%),
    hsl(calc(var(--profile-avatar-hue) + 30deg), 70%, 45%));
  border:2px solid rgba(34,211,238,0.4);
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
.profile-avatar__ring{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:inherit;
  color:#f8fafc;
  text-transform:uppercase;
  gap:4px;
  position:relative;
  overflow:hidden;
}
.profile-avatar__ring span{
  font-size:2rem;
  font-weight:700;
}
.profile-avatar__ring small{
  font-size:.72rem;
  letter-spacing:.08em;
  position:absolute;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(5,10,18,0.8);
  padding:2px 8px;
  border-radius:999px;
}
.profile-avatar__image{
  width:100%;
  height:100%;
  display:block;
  border-radius:inherit;
  object-fit:cover;
}
.profile-avatar__ring--img span{
  display:none;
}
.profile-avatar__ring--img small{
  bottom:8px;
  background:rgba(8,11,19,0.85);
  border:1px solid rgba(59,130,246,0.35);
}
.profile-hero__text h1{
  margin:6px 0;
  font-size:2rem;
}
.profile-hero__eyebrow{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.78rem;
  color:var(--muted);
}
.profile-meta{
  list-style:none;
  margin:6px 0 0;
  padding:0;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.9rem;
}
.profile-meta li{display:flex; align-items:center; gap:6px}
.profile-meta a{
  color:var(--text);
  border-bottom:1px dotted rgba(255,255,255,0.2);
}
.profile-hero__stats{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.profile-chip{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(5,10,18,0.75);
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:110px;
}
.profile-chip span{
  color:var(--muted);
  font-size:.85rem;
}
.profile-chip strong{
  font-size:1.3rem;
}
.profile-chip small{
  color:var(--muted);
  font-size:.8rem;
}
.profile-progress{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.profile-progress__label{
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
  color:var(--muted);
}
.profile-progress__hint{
  font-size:.85rem;
  color:var(--muted);
}
.profile-layout{
  margin-top:18px;
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(260px, 1fr);
  gap:14px;
  align-items:start;
}
.profile-main,
.profile-side{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.profile-panel{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.profile-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.profile-panel__header h2{
  margin:0;
}
.profile-panel__header p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}
.profile-panel--compact{
  gap:12px;
}
.profile-stats{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.profile-stat{
  padding:14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel-2);
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:130px;
}
.profile-stat header{
  font-size:.9rem;
  color:var(--muted);
}
.profile-stat__value{
  font-size:1.4rem;
  font-weight:600;
}
.profile-stat small{
  font-size:.8rem;
  color:var(--muted);
}
.profile-reputation{
  display:grid;
  grid-template-columns:minmax(0, 240px) minmax(0, 1fr);
  gap:16px;
}
.profile-reputation ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.profile-reputation li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.9rem;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
}
.profile-reputation li:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.profile-reputation strong{
  color:#f8fafc;
}
.profile-bio{
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  background:rgba(255,255,255,0.02);
  color:#d4d8df;
  line-height:1.6;
}
.profile-bio p{
  margin:0;
}
.profile-trophies{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.profile-trophies li{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:var(--panel-2);
}
.profile-trophies__icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,130,246,0.18);
  border:1px solid rgba(59,130,246,0.4);
  font-size:1.1rem;
}
.profile-trophies__body strong{
  display:block;
}
.profile-trophies__body span{
  font-size:.82rem;
  color:var(--muted);
}
.profile-trophies__points{
  margin-left:auto;
  font-weight:600;
  color:var(--accent-2);
}
.profile-activity{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.profile-activity li{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:flex-start;
  gap:14px;
  border-left:2px solid var(--line);
  padding-left:14px;
}
.profile-activity__icon{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#111827;
  color:#e2e8f0;
  align-self:center;
}
.profile-activity__body{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.profile-activity strong{
  display:block;
}
.profile-activity span{
  font-size:.85rem;
  color:var(--muted);
}
.profile-activity p{
  margin:4px 0 0;
  font-size:.85rem;
  color:#cbd5e1;
}
.profile-activity small{
  color:var(--muted);
  white-space:nowrap;
  text-align:right;
  font-size:.8rem;
}
.profile-activity__icon--crime{
  border-color:rgba(239,68,68,0.4);
  background:rgba(127,29,29,0.4);
  color:#fecaca;
}
.profile-activity__icon--race{
  border-color:rgba(59,130,246,0.4);
  background:rgba(37,99,235,0.25);
  color:#bfdbfe;
}
.profile-activity__icon--combat{
  border-color:rgba(245,158,11,0.4);
  background:rgba(120,53,15,0.35);
  color:#fde68a;
}
.profile-activity__icon--trophy{
  border-color:rgba(250,204,21,0.5);
  background:rgba(161,98,7,0.35);
  color:#fef08a;
}
.profile-intel{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.profile-intel li{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
  font-size:.9rem;
}
.profile-intel li:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.profile-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.profile-actions .btn{
  width:100%;
}
.profile-actions__form{
  margin:0;
}
@media (max-width: 1100px) {
  .profile-layout{
    grid-template-columns:1fr;
  }
}
@media (max-width: 900px) {
  .profile-reputation{
    grid-template-columns:1fr;
  }
  .profile-hero{
    padding:20px;
  }
}




/* Landowner page */
.landowner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 36px;
}
.land-hero {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0,1.2fr) 220px;
  align-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(56,189,248,0.30), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(168,85,247,0.30), transparent 60%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(15, 23, 42, 0.88));
}
.land-hero__eyebrow {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 3px;
  color: #38bdf8;
  margin-bottom: 12px;
}
.land-hero__lead {
  color: #cbd5e1;
  margin: 10px 0 0;
}
.land-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.land-hero__tags span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.2);
  background: rgba(30,41,59,0.6);
  color: #e2e8f0;
  font-size: 12px;
  letter-spacing: .06em;
}
.land-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.land-hero__orb {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 700;
  color: #0f172a;
  position: relative;
  z-index: 1;
}
.land-hero__glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.35), transparent 60%);
  filter: blur(12px);
}
.land-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}
.land-status--owned {
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.35);
  color: #bbf7d0;
}
.land-status--free {
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.35);
  color: #fecaca;
}
.land-flash {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.land-flash__item {
  padding: 10px 12px;
  border-radius: 12px;
  color: #0f172a;
  font-weight: 600;
}
.land-flash__item.success { background: #86efac; }
.land-flash__item.error { background: #fecaca; }

.land-card h2 {
  margin-bottom: 8px;
}
.land-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.land-stats li {
  display: flex;
  justify-content: space-between;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  padding: 10px 12px;
  color: #e2e8f0;
}
.land-stats span { color: #94a3b8; }
.land-note {
  color: #94a3b8;
  font-size: 12px;
  margin-top: 8px;
}

.land-map {
  position: relative;
  height: 300px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 20%, rgba(56,189,248,0.22), transparent 42%),
    radial-gradient(circle at 82% 14%, rgba(139,92,246,0.18), transparent 38%),
    radial-gradient(circle at 30% 80%, rgba(16,185,129,0.12), transparent 35%),
    linear-gradient(135deg, rgba(15,23,42,0.95), rgba(15,23,42,0.82));
  background-size: cover;
  border: 1px solid rgba(148,163,184,0.25);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 40px rgba(0,0,0,0.35);
}
.land-map::before,
.land-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.land-map::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(148,163,184,0.08), rgba(148,163,184,0.08) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(148,163,184,0.08), rgba(148,163,184,0.08) 1px, transparent 1px, transparent 34px);
  mix-blend-mode: lighten;
}
.land-map::after {
  background: radial-gradient(circle at 70% 80%, rgba(59,130,246,0.12), transparent 40%);
}
.land-map__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(56,189,248,0.8);
  background: rgba(8,12,26,0.85);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.land-map__marker:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 16px 32px rgba(0,0,0,0.4);
}
.land-map__marker.mine { border-color: rgba(34,197,94,0.85); box-shadow: 0 10px 25px rgba(34,197,94,0.3); }
.land-map__marker.free { border-color: rgba(59,130,246,0.85); }
.land-map__marker--taken { border-color: rgba(139,92,246,0.8); }
.land-map__marker .land-pin__label,
.land-map__marker .land-pin__dot,
.land-map__marker strong,
.land-map__marker small { display: none; }
.land-map__marker::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(56,189,248,0.3);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.land-map__marker.mine::after { background: rgba(34,197,94,0.3); }
.land-map__marker:hover::after {
  opacity: 0.9;
  transform: scale(1.05);
}
.land-tooltip {
  position: absolute;
  background: rgba(8,12,26,0.96);
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 12px;
  padding: 10px 12px;
  color: #e2e8f0;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  font-size: 13px;
  min-width: 180px;
  z-index: 5;
  display: none;
}
.land-tooltip strong { display: block; color: #f8fafc; }
.land-tooltip small { display: block; color: #94a3b8; margin-top: 4px; }
.land-map__legend {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.land-legend {
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.7);
  color: #e2e8f0;
  font-size: 12px;
}
.land-legend--free { border-color: rgba(59,130,246,0.5); }
.land-legend--mine { border-color: rgba(34,197,94,0.5); }
.land-map__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(15,23,42,0.6), rgba(15,23,42,0.65));
}

.land-table-card { display: flex; flex-direction: column; gap: 12px; }
.land-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.land-table__head,
.land-table__row {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,0.6fr) minmax(0,1fr) minmax(0,0.8fr);
  gap: 12px;
  align-items: start;
}
.land-table__head {
  color: #94a3b8;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}
.land-table__row {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 16px;
  padding: 12px 14px;
  color: #e2e8f0;
}
.land-table__row strong { color: #f8fafc; display: block; }
.land-table__row small { color: #94a3b8; display: block; margin-top: 4px; }

.land-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.land-pill--free { background: rgba(59,130,246,0.18); border: 1px solid rgba(59,130,246,0.35); color: #dbeafe; }
.land-pill--mine { background: rgba(34,197,94,0.18); border: 1px solid rgba(34,197,94,0.35); color: #bbf7d0; }

.land-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.land-btn {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  border: 1px solid rgba(59,130,246,0.5);
  color: #e0f2fe;
  border-radius: 12px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
}
.land-btn--duel { background: linear-gradient(135deg, #ef4444, #b91c1c); border-color: rgba(239,68,68,0.55); color: #fee2e2; }
.land-btn--claim { background: linear-gradient(135deg, #22c55e, #16a34a); border-color: rgba(34,197,94,0.55); color: #ecfdf3; }
.land-btn:hover { opacity: 0.95; }
.land-meta {
  color: #94a3b8;
  font-size: 12px;
}
.land-note-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.land-note-form input[type="text"] {
  width: 100%;
  background: rgba(15,23,42,0.7);
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 10px;
  padding: 8px 10px;
  color: #e2e8f0;
}
.land-note-form input:focus { outline: 1px solid #38bdf8; }

@media (max-width: 960px) {
  .land-hero { grid-template-columns: 1fr; text-align: left; }
  .land-hero__visual { order: -1; justify-content: flex-start; }
  .land-table__head { display: none; }
  .land-table__row { grid-template-columns: 1fr; }
}


/* Migrated inline styles */
/* pages/bank.php */
.bank-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 48px;
}

.bank-hero {
  background: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.25), transparent 55%),
              radial-gradient(circle at 80% 0%, rgba(168, 85, 247, 0.25), transparent 60%),
              linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(15, 23, 42, 0.88));
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 260px;
  border-radius: 28px;
}

.bank-hero__tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.bank-hero__tags span {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.15);
  font-size: 13px;
  color: #e0f2fe;
}

.bank-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.bank-hero__actions form {
  margin: 0;
}

.bank-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bank-hero__icon {
  font-size: 64px;
  filter: drop-shadow(0 16px 32px rgba(56, 189, 248, 0.45));
}

.bank-hero__glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%);
  z-index: -1;
}

.bank-hero__stats {
  grid-column: 1 / -1;
  margin-top: 12px;
}

.bank-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bank-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bank-panel__head h2 {
  margin: 0;
}

.bank-panel__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bank-panel__alert {
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fecaca;
}

.bank-panel--insight.is-warning {
  border-color: rgba(248, 113, 113, 0.4);
}

.bank-metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.bank-metrics li {
  flex: 1 1 140px;
  min-width: 140px;
  border-radius: 18px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.bank-metrics span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
}

.bank-metrics strong {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
  color: #f8fafc;
}

.bank-forms {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.bank-form-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 20px;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.bank-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bank-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: #e2e8f0;
}

.bank-form__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bank-form__hint {
  font-size: 13px;
  color: #94a3b8;
}

.bank-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bank-history li {
  padding: 16px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.bank-history__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.bank-history__main strong {
  color: #f8fafc;
}

.bank-history__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.bank-empty {
  color: #94a3b8;
}

@media (max-width: 900px) {
  .bank-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .bank-hero__visual {
    order: -1;
  }

  .bank-hero__actions {
    justify-content: center;
  }
}

/* pages/achievements.php */
.ach-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 48px;
}

.ach-hero {
  border-radius: 28px;
  background: radial-gradient(circle at 10% 10%, rgba(59,130,246,0.25), transparent 60%),
              radial-gradient(circle at 75% 0, rgba(168,85,247,0.25), transparent 60%),
              linear-gradient(135deg, rgba(15,23,42,0.95), rgba(15,23,42,0.88));
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 220px;
}

.ach-hero__lead {
  color: rgba(226,232,240,0.75);
}

.ach-hero__tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ach-hero__tags span {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,0.35);
  background: rgba(59,130,246,0.15);
  font-size: 13px;
  color: #e0f2fe;
}

.ach-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ach-hero__icon {
  font-size: 56px;
  filter: drop-shadow(0 20px 32px rgba(59,130,246,0.35));
}

.ach-hero__glow {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.35), transparent 70%);
  z-index: -1;
}

.ach-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.ach-card {
  display: flex;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

.ach-card.is-unlocked {
  border-color: rgba(34,197,94,0.45);
  box-shadow: 0 20px 44px rgba(34,197,94,0.18);
}

.ach-card__icon {
  font-size: 30px;
  filter: drop-shadow(0 6px 14px rgba(148,163,184,0.35));
}

.ach-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ach-card__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.ach-card__header h2 {
  margin: 0;
  font-size: 18px;
  color: #f8fafc;
}

.ach-card__header p {
  margin: 6px 0 0;
  color: #cbd5f5;
  font-size: 13px;
}

.ach-card__points {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 14px;
  background: rgba(99,102,241,0.22);
  color: #c7d2fe;
  font-size: 12px;
  font-weight: 600;
}

.ach-card__progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #94a3b8;
}

.ach-card__status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ach-card__status small {
  color: #64748b;
  font-size: 11px;
}

.ach-card__status.is-success {
  color: #34d399;
}

.ach-card__pct {
  font-weight: 600;
  color: #e2e8f0;
}

.ach-card__bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.75);
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.16);
}

.ach-card__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(59,130,246,0.85), rgba(147,197,253,0.85));
  transition: width .4s ease;
}

@media (max-width: 760px) {
  .ach-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ach-hero__visual {
    order: -1;
  }
  .ach-hero__tags {
    justify-content: center;
  }
  .ach-card {
    flex-direction: column;
  }
}

/* pages/escorts.php */
.escort {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 48px;
}

.escort-card {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.88));
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 24px 45px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}

.escort-card h1,
.escort-card h2,
.escort-card h3 {
  margin: 0;
  color: #f8fafc;
}

.escort-card p {
  margin: 8px 0 0;
  color: #cbd5f5;
}

.escort-hero {
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 320px;
  background:
    radial-gradient(circle at 20% 20%, rgba(236, 72, 153, 0.35), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(79, 70, 229, 0.35), transparent 60%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(15, 23, 42, 0.88));
}

.escort-hero__eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 3px;
  color: #f472b6;
  margin-bottom: 12px;
}

.escort-hero__progress {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.escort-statline {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #94a3b8;
}

.escort-progress {
  width: 100%;
  height: 10px;
  background: rgba(51, 65, 85, 0.55);
  border-radius: 999px;
  overflow: hidden;
}

.escort-progress__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f472b6, #6366f1);
  border-radius: 999px;
}

.escort-hero__tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.escort-hero__tags span {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(236, 72, 153, 0.18);
  border-radius: 999px;
  border: 1px solid rgba(244, 114, 182, 0.35);
  color: #fce7f3;
  font-size: 13px;
}

.escort-hero__alert {
  margin-top: 18px;
  color: #fbbf24;
  font-weight: 600;
}

.escort-hero__visual img {
  width: 100%;
  max-width: 320px;
  display: block;
  filter: drop-shadow(0 18px 35px rgba(236, 72, 153, 0.45));
}

.escort-grid {
  display: grid;
  gap: 24px;
}

.escort-grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.escort-grid--overview {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.escort-grid--actions {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.escort-card--stat {
  display: flex;
  align-items: center;
  gap: 18px;
}

.escort-card__art {
  width: 96px;
  border-radius: 22px;
  flex-shrink: 0;
  box-shadow: 0 18px 32px rgba(236, 72, 153, 0.35);
}

.escort-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.escort-card__label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #94a3b8;
}

.escort-card__note {
  font-size: 13px;
  color: #94a3b8;
}

.escort-card--summary header,
.escort-card--modifiers header,
.escort-card--actions header,
.escort-card--log header {
  margin-bottom: 16px;
}

.escort-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.escort-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
}

.escort-list--highlight {
  background: rgba(251, 191, 36, 0.22) !important;
}

.escort-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.escort-tags li {
  background: rgba(15, 23, 42, 0.55);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.escort-tags strong {
  color: #f8fafc;
  font-size: 18px;
}

.escort-tags span {
  color: #94a3b8;
  font-size: 13px;
}

.escort-crew p {
  margin: 6px 0;
}

.escort-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.escort-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.escort-input-hint {
  color: #94a3b8;
  font-size: 13px;
}

.escort-subnote {
  color: #cbd5f5;
  font-size: 13px;
  margin-top: -6px;
}

.escort-footnote {
  margin-top: 14px;
  color: #94a3b8;
  font-size: 13px;
}

.escort-events__actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.escort-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.escort-table th,
.escort-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  text-align: left;
  font-size: 13px;
  color: #e2e8f0;
}

.escort-table tbody tr:hover {
  background: rgba(236, 72, 153, 0.12);
}

.escort-empty {
  color: #94a3b8;
  font-size: 14px;
}

.escort-flash .alert {
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #f472b6, #6366f1);
  color: #f8fafc;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(236, 72, 153, 0.24);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn.ghost {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

.input {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.65);
  color: #f8fafc;
  max-width: 140px;
}

.alert {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.25);
  color: #f8fafc;
}

.alert-success { background: rgba(22, 163, 74, 0.45); }
.alert-danger  { background: rgba(185, 28, 28, 0.45); }
.alert-warning { background: rgba(180, 83, 9, 0.45); }

@media (max-width: 960px) {
  .escort-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .escort-hero__tags { justify-content: center; }
  .escort-hero__visual { order: -1; }
  .escort-events__actions { flex-direction: column; }
}

@media (max-width: 640px) {
  .escort-card { padding: 22px; }
  .escort-card--stat { flex-direction: column; text-align: center; }
  .escort-card__art { width: 100%; max-width: 160px; }
  .escort-form { align-items: stretch; }
  .escort-input-group { flex-direction: column; align-items: flex-start; }
  .escort-events__actions { flex-direction: column; }
}

/* pages/drugslab.php */
.stats {
  gap:16px;
}
.stat {
  padding:16px;
  border-radius:12px;
  background:rgba(15,23,42,0.45);
  border:1px solid rgba(148,163,184,0.2);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stat-label {
  text-transform:uppercase;
  font-size:12px;
  color:rgba(148,163,184,0.8);
  letter-spacing:0.08em;
}
.stat-value {
  font-size:22px;
  font-weight:700;
  color:#f8fafc;
}
.lab-group {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.lab-group__header h2 {
  margin:0;
  font-size:24px;
}
.lab-grid {
  gap:16px;
}
.lab-card {
  background:linear-gradient(135deg, rgba(30,58,138,0.35), rgba(30,64,175,0.18));
  border:1px solid rgba(148,163,184,0.25);
  border-radius:14px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 16px 32px rgba(15,23,42,0.25);
}
.lab-card__header {
  display:flex;
  gap:12px;
  align-items:center;
}
.lab-icon {
  font-size:32px;
}
.lab-card__stats {
  display:grid;
  gap:6px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.lab-card__stats .stat-label {
  font-size:11px;
}
.lab-card__stats .stat-value {
  font-size:18px;
}
@media (max-width: 900px) {
  .grid.cols-3.stats {
    grid-template-columns: repeat(1, minmax(0,1fr));
  }
  .lab-grid {
    grid-template-columns: repeat(1, minmax(0,1fr));
  }
}

/* pages/credits_stub_checkout.php */
.stub-wrapper {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.stub-card {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  padding: 28px;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stub-card h1 {
  margin: 0;
}
.stub-details {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 18px;
  margin: 0;
}
.stub-details dt {
  color: rgba(148, 163, 184, 0.85);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.stub-details dd {
  margin: 0;
  font-weight: 600;
}
.text-muted {
  color: rgba(148, 163, 184, 0.85);
}
.stub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}
.btn-primary {
  background: linear-gradient(130deg, #6366f1, #ec4899);
  color: #f8fafc;
}
.btn-primary:hover {
  box-shadow: 0 16px 30px rgba(99, 102, 241, 0.35);
}
.btn.ghost {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.2);
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 600;
}
.badge.ghost {
  background: rgba(148, 163, 184, 0.25);
  color: #e2e8f0;
}
.alert {
  padding: 12px 16px;
  border-radius: 12px;
}
.alert-danger { background: rgba(185, 28, 28, 0.45); color: #fee2e2; }
.alert-success { background: rgba(22, 163, 74, 0.45); color: #dcfce7; }
@media (max-width: 520px) {
  .stub-details {
    grid-template-columns: 1fr;
  }
  .stub-actions {
    flex-direction: column;
  }
  .stub-actions .btn {
    width: 100%;
  }
}

/* pages/dashboard.php */
.dash-referral-list { margin-top: 14px; }
      .dash-referral-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
      .dash-referral-table th, .dash-referral-table td { padding: 8px 10px; border-bottom: 1px solid rgba(148,163,184,0.25); text-align: left; }
      .dash-referral-table th { color: #cbd5e1; font-weight: 600; }
      .dash-referral-table td { color: #e2e8f0; }
      .dash-referral-table .referral-check { text-align: center; }

/* pages/credits_return.php */
.credit-return {
  display: flex;
  justify-content: center;
}
.credit-return__card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  padding: 28px;
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.credit-return__card h1 {
  margin: 0;
  font-size: 28px;
}
.credit-return__perks h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.credit-return__perks ul {
  margin: 0;
  padding-left: 20px;
  color: rgba(226, 232, 240, 0.92);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.credit-return__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; font-weight:600; }
.btn-primary { background:linear-gradient(130deg,#6366f1,#ec4899); color:#f8fafc; }
.btn-primary:hover { box-shadow:0 12px 24px rgba(99,102,241,0.35); }
.btn.ghost { background:transparent; border:1px solid rgba(148,163,184,0.35); color:#e2e8f0; }
.alert { padding:12px 16px; border-radius:12px; margin:0; }
.alert-success{ background:rgba(22,163,74,0.45); color:#dcfce7; }
.alert-warning{ background:rgba(180,83,9,0.45); color:#ffedd5; }
.alert-danger{  background:rgba(185,28,28,0.45); color:#fee2e2; }
@media (max-width: 520px) {
  .credit-return__actions { flex-direction: column; }
  .btn { width: 100%; }
}

/* pages/crime.php */
.crime {
  display: grid;
  gap: 28px;
}

.crime-card {
  background: var(--panel, rgba(15, 23, 42, 0.88));
  border: 1px solid var(--line, rgba(30, 41, 59, 0.6));
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow-soft, 0 18px 40px rgba(0, 0, 0, 0.35));
}

.crime-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.crime-hero__content h1 {
  margin: 0 0 14px;
  font-size: clamp(1.85rem, 3vw, 2.8rem);
}

.crime-hero__content p {
  margin: 0;
  color: #cbd5f5;
  max-width: 520px;
}

.crime-hero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  color: var(--muted, #94a3b8);
  margin-bottom: 14px;
}

.crime-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.crime-hero__tags span {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.18);
  color: #e2e8f0;
  font-size: 0.82rem;
}

.crime-hero__visual {
  position: relative;
  min-height: 220px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.35), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(244, 114, 182, 0.35), transparent 65%),
    linear-gradient(135deg, rgba(9, 13, 20, 0.85), rgba(8, 12, 18, 0.6));
  overflow: hidden;
}

.crime-hero__orb {
  position: absolute;
  inset: auto 18% 40% 18%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.8), rgba(15, 23, 42, 0.1));
  filter: blur(0.5px);
  opacity: 0.9;
}

.crime-hero__grid {
  position: absolute;
  inset: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  opacity: 0.35;
}

.crime-hero__grid span {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.25);
}

.crime-flash .alert {
  margin: 0;
}

.crime-status {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.crime-status__item {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.78));
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  padding: 16px 18px;
  display: grid;
  gap: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.crime-status__item.is-alert {
  border-color: rgba(248, 113, 113, 0.45);
  box-shadow: 0 12px 30px rgba(248, 113, 113, 0.18);
}

.crime-status__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted, #94a3b8);
  margin: 0;
}

.crime-status__value {
  font-size: 1.35rem;
  color: #f8fafc;
  margin: 0;
}

.crime-status__hint {
  color: var(--muted, #94a3b8);
  margin: 0;
  font-size: 0.92rem;
}

.crime-card__header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 22px;
}

.crime-card__sub {
  margin: 6px 0 0;
  color: #cbd5f5;
  max-width: 540px;
}

.crime-card__meta {
  display: flex;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--muted, #94a3b8);
}

.crime-options__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.crime-option {
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
}

.crime-option.is-disabled {
  opacity: 0.65;
}

.crime-simple__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.crime-simple__head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.crime-option__description {
  margin: 4px 0 0;
  color: #cbd5f5;
  font-size: 0.9rem;
}

.crime-simple__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.crime-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
  font-size: 0.78rem;
}

.crime-chip--vip {
  background: rgba(250, 204, 21, 0.18);
  border-color: rgba(250, 204, 21, 0.45);
  color: #fde68a;
  font-weight: 600;
}

.crime-chip--muted {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecdd3;
}

.crime-simple__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.crime-simple__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 8px 10px;
  color: #e2e8f0;
}

.crime-simple__list li span {
  color: #cbd5f5;
  font-size: 0.9rem;
}

.crime-simple__list li strong {
  font-weight: 700;
  font-size: 0.95rem;
}

.crime-option__action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.crime-button-simple {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(56, 189, 248, 0.14);
  color: #e0f2fe;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.crime-button-simple:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.crime-bottom {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
}

.crime-bottom__panel {
  display: grid;
  gap: 16px;
}

.crime-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.crime-events__item {
  background: rgba(11, 18, 32, 0.82);
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crime-events__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.crime-events__header strong {
  color: #f8fafc;
  font-size: 0.95rem;
}

.crime-events__time {
  color: var(--muted, #94a3b8);
  font-size: 0.75rem;
  white-space: nowrap;
}

.crime-events__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.32);
  color: #dbeafe;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.crime-modifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crime-modifiers__item {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #bfdbfe;
  font-size: 0.82rem;
}

.crime-logs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.crime-log {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(10, 16, 24, 0.72);
}

.crime-log__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crime-log__body strong {
  color: #e2e8f0;
}

.crime-log__details {
  color: #cbd5f5;
  font-size: 0.82rem;
  line-height: 1.3;
}

.crime-log__time {
  color: var(--muted, #94a3b8);
  font-size: 0.76rem;
  white-space: nowrap;
  margin-top: 2px;
}

.crime-log--success {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(22, 101, 52, 0.16);
}

.crime-log--fail {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.18);
}

.crime-muted {
  color: var(--muted, #94a3b8);
}

.crime-tips ul {
  margin: 0;
  padding-left: 18px;
  color: #cbd5f5;
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .crime-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .crime-hero__visual {
    order: -1;
    min-height: 180px;
  }
  .crime-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .crime-card {
    padding: 22px;
  }
  .crime-option__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crime-option__action {
    flex-direction: column;
    align-items: flex-start;
  }
  .crime-card__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .crime-card__meta {
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .crime-status {
    grid-template-columns: 1fr;
  }
  .crime-option__facts {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* pages/credits.php */
.creditshop-page {
  gap: 18px;
}
.creditshop-tabs {
  display: flex;
  gap: 8px;
  margin-top: -4px;
  flex-wrap: wrap;
}
.creditshop-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.25);
  color: #cbd5f5;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.creditshop-tab.is-active {
  background: linear-gradient(120deg,#6366f1,#ec4899);
  border-color: transparent;
  color: #f8fafc;
}
.creditshop-hero {
  position: relative;
  overflow: hidden;
}
.creditshop-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(59,130,246,0.25), transparent 60%), radial-gradient(circle at 85% 10%, rgba(236,72,153,0.18), transparent 55%);
  opacity: 0.85;
  pointer-events: none;
}
.creditshop-pill {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,0.4);
  color: #dbeafe;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(15,23,42,0.8);
}
.creditshop-hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 90px;
}
.creditshop-hero-stats li strong {
  font-size: 1.3rem;
}
.creditshop-hero-stats li small {
  color: #94a3b8;
  font-size: 0.78rem;
}
.creditshop-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.creditshop-grid--spend {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.creditshop-panel header p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.85rem;
}
.creditshop-panel--bundles,
.creditshop-panel--faq {
  grid-column: 1 / -1;
}
.creditshop-panel--spend header p {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 0.82rem;
}
.creditshop-bundles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.credit-card {
  position: relative;
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 12px;
  padding: 16px;
  background: rgba(10,15,30,0.92);
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.7);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.credit-card--featured {
  border-color: rgba(236,72,153,0.55);
  box-shadow: 0 8px 30px rgba(236,72,153,0.18);
}
.credit-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(236,72,153,0.6);
  color: #f472b6;
  background: rgba(236,72,153,0.18);
}
.credit-card__head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #f8fafc;
}
.credit-card__head p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: #cbd5f5;
}
.credit-card__description {
  margin: 0;
  color: #94a3b8;
  font-size: 0.85rem;
}
.credit-card__perks {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #e2e8f0;
  font-size: 0.82rem;
}
.credit-card__perks li {
  display: flex;
  gap: 6px;
  align-items: center;
}
.credit-card__perks li::before {
  content: '•';
  color: #38bdf8;
}
.credit-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.credit-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.credit-card__price-old {
  color: #94a3b8;
  font-size: 0.78rem;
  text-decoration: line-through;
}
.credit-card__price-now {
  font-size: 1.2rem;
  font-weight: 700;
  color: #f8fafc;
}
.credit-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(120deg,#6366f1,#ec4899);
  color: #f8fafc;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.credit-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(99,102,241,0.35);
}
.creditshop-panel__foot {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(15,23,42,0.7);
  color: #94a3b8;
  font-size: 0.82rem;
}
.creditshop-faq-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.creditshop-faq-grid article {
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 8px;
  padding: 12px;
  background: rgba(15,23,42,0.65);
}
.creditshop-faq-grid h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: #f8fafc;
}
.creditshop-faq-grid p {
  margin: 0;
  color: #cbd5f5;
  font-size: 0.82rem;
}
.creditshop-support {
  margin-top: 12px;
  border-radius: 8px;
  border: 1px dashed rgba(45,212,191,0.45);
  padding: 12px;
  color: #a7f3d0;
  font-size: 0.82rem;
  background: rgba(6,78,59,0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.creditshop-support span {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}
/* === Friends page === */
.friends-page{display:flex; flex-direction:column; gap:18px}
.friends-hq-hero{margin-bottom:10px; border:1px solid rgba(59,130,246,0.25); box-shadow:0 16px 32px rgba(0,0,0,0.35)}
.friends-hero__stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; padding:10px 0 0; margin:12px 0 0;}
.friends-hero__stats li{list-style:none; padding:10px 12px; border-radius:12px; border:1px solid rgba(148,163,184,0.18); background:rgba(255,255,255,0.04); display:flex; flex-direction:column; gap:4px;}
.friends-hero__stats span{color:#cbd5f5; font-size:12px; letter-spacing:.06em; text-transform:uppercase;}
.friends-hero__stats strong{color:#f8fafc; font-size:22px;}
.friends-alert{margin:0}
.friends-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start;}
.friends-card,.friends-panel{display:flex; flex-direction:column; gap:12px; border-radius:14px; background:rgba(8,12,24,0.92); border:1px solid rgba(148,163,184,0.16); box-shadow:0 14px 30px rgba(0,0,0,0.32); padding:14px;}
.friends-card__head h2{margin:0; font-size:1.1rem;}
.friends-card__head p{margin:4px 0 0; color:#94a3b8}
.friends-card--primary{border:1px solid rgba(59,130,246,0.45); box-shadow:0 18px 36px rgba(59,130,246,0.28); background:linear-gradient(135deg, rgba(59,130,246,0.12), rgba(34,211,238,0.14));}
.friends-form{display:flex; flex-direction:column; gap:10px}
.friends-field{display:flex; flex-direction:column; gap:6px; color:#cbd5f5; font-size:.9rem}
.friends-autocomplete{position:relative;}
.friends-autocomplete__list{position:absolute; top:calc(100% + 6px); left:0; right:0; background:#0b1220; border:1px solid rgba(148,163,184,0.35); border-radius:12px; margin:0; padding:6px; list-style:none; max-height:220px; overflow:auto; display:none; box-shadow:0 12px 28px rgba(0,0,0,0.38); z-index:110;}
.friends-autocomplete__list.is-open{display:block;}
.friends-autocomplete__list li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; transition:background .15s ease;}
.friends-autocomplete__list li:hover{background:rgba(59,130,246,0.14);}
.friends-autocomplete__list strong{color:#f8fafc;}
.friends-autocomplete__list small{color:#94a3b8;}
.friends-autocomplete__list .tag{background:rgba(59,130,246,0.16); color:#bfdbfe; border:1px solid rgba(59,130,246,0.3); border-radius:999px; padding:4px 8px; font-size:12px;}
.friends-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.friends-list__row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid rgba(148,163,184,0.16); border-radius:12px; background:rgba(15,23,42,0.7);}
.friends-list__row strong{color:#f8fafc;}
.friends-list__row .text-muted{display:block;}
.friends-list--grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); display:grid}
.friends-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.friends-card--list .friends-list__row{align-items:center}

.friends-table-wrapper{overflow:auto;}
.friends-table{width:100%; border-collapse:separate; border-spacing:0; min-width:100%;}
.friends-table th,
.friends-table td{padding:10px 8px; border-bottom:1px solid rgba(148,163,184,0.16); text-align:left; color:#e2e8f0; vertical-align:middle;}
.friends-table th{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; color:#94a3b8;}
.friends-table__actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start;}
.friends-table__actions .btn{white-space:nowrap;}

.creditshop-spend-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.creditshop-spend-card {
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 10px;
  padding: 14px;
  background: rgba(8,12,24,0.95);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 140px;
}
.creditshop-spend-card.is-disabled {
  opacity: 0.6;
}
.creditshop-spend-card__body {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.creditshop-spend-card__body h3 {
  margin: 0;
  font-size: 1rem;
  color: #f8fafc;
}
.creditshop-spend-card__body p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.85rem;
}
.creditshop-spend-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.creditshop-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(59,130,246,0.2);
  color: #bfdbfe;
}
.creditshop-badge.ghost {
  background: transparent;
  border: 1px solid rgba(148,163,184,0.4);
  color: #e2e8f0;
}
.creditshop-spend-card__cta {
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: linear-gradient(120deg,#0ea5e9,#6366f1);
  color: #f8fafc;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.creditshop-spend-card__cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.creditshop-spend-card__cta:not(:disabled):hover {
  transform: translateY(-1px);
}
.creditshop-flash {
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(148,163,184,0.35);
  font-weight: 600;
}
.creditshop-flash--success {
  background: rgba(22,163,74,0.18);
  border-color: rgba(22,163,74,0.4);
  color: #bbf7d0;
}
.creditshop-flash--warning {
  background: rgba(234,179,8,0.18);
  border-color: rgba(234,179,8,0.4);
  color: #fef3c7;
}
.creditshop-flash--danger {
  background: rgba(248,113,113,0.18);
  border-color: rgba(248,113,113,0.4);
  color: #fee2e2;
}
@media (max-width: 720px) {
  .credit-card__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .credit-card__cta {
    width: 100%;
  }
  .creditshop-spend-card__body {
    flex-direction: column;
  }
  .creditshop-spend-card__meta {
    justify-content: flex-start;
  }
  .creditshop-spend-card__cta {
    width: 100%;
    text-align: center;
  }
}

/* pages/home.php */
.landing {
  display: grid;
  gap: 32px;
  margin: 0 auto;
  max-width: 1180px;
  padding: 24px;
}

.card {
  background: rgba(12, 18, 35, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 48px rgba(8, 11, 24, 0.35);
}

.hero {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: stretch;
}

.hero__copy .eyebrow {
  display: inline-flex;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  color: #38bdf8;
  margin-bottom: 12px;
}

.hero__copy h1 {
  font-size: 2.8rem;
  margin: 0 0 12px;
  color: #f8fafc;
}

.hero__copy p {
  max-width: 520px;
  color: #cbd5f5;
  margin: 0 0 24px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn.primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #0b1120;
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.35);
}

.btn.ghost {
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
  background: transparent;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
}

.hero__stats {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.hero__stats li {
  display: grid;
  gap: 4px;
}

.hero__stats strong {
  font-size: 1.6rem;
  color: #f8fafc;
}

.hero__stats span {
  font-size: 0.85rem;
  color: rgba(226, 232, 240, 0.75);
}

.hero__media {
  display: grid;
  gap: 18px;
}

.media-card {
  padding: 22px;
  border-radius: 16px;
}

.glass {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.glass h3 {
  margin-top: 0;
  color: #f8fafc;
}

.glass ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: #cbd5f5;
}

.glass li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
}

.diffused {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.85), rgba(14, 165, 233, 0.6));
  color: #f8fafc;
}

.features h2,
.testimonials h2,
.faq h2,
.cta h2 {
  margin: 0 0 18px;
  color: #f8fafc;
  text-align: center;
}

.features__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card {
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(8, 11, 24, 0.35);
}

.feature-card__icon {
  font-size: 24px;
  margin-bottom: 12px;
}

.feature-card h3 {
  margin: 0 0 10px;
  color: #e2e8f0;
}

.feature-card p {
  margin: 0;
  color: rgba(203, 213, 225, 0.88);
}

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta p {
  margin: 8px 0 0;
  color: #cbd5f5;
}

.testimonials__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.testimonial blockquote {
  margin: 0 0 12px;
  color: #e2e8f0;
  line-height: 1.5;
}

.testimonial figcaption {
  display: grid;
  gap: 4px;
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.9rem;
}

.faq details {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  cursor: pointer;
}

.faq summary {
  font-weight: 600;
  color: #e2e8f0;
}

.faq p {
  margin: 10px 0 0;
  color: rgba(203, 213, 225, 0.9);
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .landing {
    padding: 18px;
  }

  .features__grid,
  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  .cta {
    flex-direction: column;
    align-items: stretch;
  }
}

/* pages/jail.php */
.jail-page {
  display: grid;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}
.jail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 860px) {
  .jail-grid {
    grid-template-columns: 1fr;
  }
}
.jail-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jail-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.jail-card--status {
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.jail-card--breakouts {
  gap: 14px;
}
.jail-card__icon {
  font-size: 2.6rem;
  line-height: 1;
}
.jail-card__content h1 {
  margin: 0 0 8px;
}
.jail-card__hint {
  font-size: 0.9rem;
  color: var(--muted, #94a3b8);
}
.jail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.jail-game {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jail-game__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jail-game__board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.jail-game__slot {
  padding: 14px 0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 36, 0.9);
  color: #f8fafc;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.jail-game__slot:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.55);
}
.jail-game__slot:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.jail-game__slot.is-success {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.18);
}
.jail-game__slot.is-fail {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(248, 113, 113, 0.14);
}
.jail-game__status {
  transition: color 0.15s ease;
}
.jail-game__status[data-tone="success"] {
  color: #86efac;
}
.jail-game__status[data-tone="fail"] {
  color: #fca5a5;
}
.jail-card--tips ul {
  margin: 0;
  padding-left: 18px;
  color: #cbd5f5;
  line-height: 1.55;
}
.jail-card--tips li + li {
  margin-top: 6px;
}
@media (max-width: 540px) {
  .jail-card--status {
    flex-direction: column;
    align-items: flex-start;
  }
  .jail-game__board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.jail-breakout-table th,
.jail-breakout-table td {
  font-size: 0.95rem;
}
.jail-breakout-table td:last-child {
  text-align: right;
}
.jail-breakout-form {
  margin: 0;
}
.jail-breakout-form .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* pages/combat.php */
.combat-wrap {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:24px;
  margin-bottom:40px;
}
.combat-card {
  background:linear-gradient(135deg, rgba(15,23,42,0.94), rgba(15,23,42,0.88));
  border-radius:24px;
  border:1px solid rgba(148,163,184,0.18);
  padding:26px;
  box-shadow:0 22px 44px rgba(15,23,42,0.4);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.combat-card h2 {
  margin:0;
  color:#f8fafc;
  font-size:20px;
}
.combat-stats {
  display:grid;
  gap:12px;
}
.combat-stat {
  background:rgba(30,41,59,0.55);
  border:1px solid rgba(148,163,184,0.18);
  border-radius:18px;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  color:#e2e8f0;
  font-weight:600;
}
.combat-actions form {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.combat-actions label {
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#cbd5f5;
  font-size:13px;
}
.combat-actions input[type="text"] {
  background:rgba(15,23,42,0.6);
  border:1px solid rgba(148,163,184,0.25);
  border-radius:14px;
  padding:10px 14px;
  color:#f8fafc;
}
.combat-actions button {
  align-self:flex-start;
}
.battle-replay {
  position:sticky;
  top:12px;
  z-index:20;
  background:rgba(15,23,42,0.92);
  border-radius:18px;
  border:1px solid rgba(96,165,250,0.25);
  padding:18px;
  margin-bottom:18px;
  box-shadow:0 18px 40px rgba(15,23,42,0.4);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.battle-replay__title {
  margin:0;
  color:#f8fafc;
  font-size:16px;
}
.battle-replay__subtitle {
  margin:0;
  color:#94a3b8;
  font-size:13px;
}
.battle-replay__list {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:220px;
  overflow:auto;
}
.battle-replay__item {
  background:rgba(30,41,59,0.55);
  border:1px solid rgba(96,165,250,0.25);
  border-radius:14px;
  padding:10px 12px;
  color:#e2e8f0;
  font-size:13px;
}
.battle-replay__item span {
  display:block;
  color:#94a3b8;
  font-size:12px;
  margin-top:4px;
}
.combat-flash, .combat-errors {
  border-radius:16px;
  padding:12px 16px;
  font-size:13px;
}
.combat-flash {
  background:rgba(34,197,94,0.16);
  border:1px solid rgba(34,197,94,0.35);
  color:#bbf7d0;
}
.combat-errors {
  background:rgba(239,68,68,0.16);
  border:1px solid rgba(239,68,68,0.35);
  color:#fecaca;
}
.combat-log {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.combat-log__item {
  background:rgba(15,23,42,0.6);
  border:1px solid rgba(148,163,184,0.16);
  border-radius:18px;
  padding:14px 16px;
  color:#e2e8f0;
}
.combat-log__item strong { color:#facc15; }
.combat-log__meta {
  display:flex;
  justify-content:space-between;
  color:#94a3b8;
  font-size:12px;
}
.combat-log__rounds {
  margin-top:8px;
  color:#94a3b8;
  font-size:12px;
  line-height:1.4;
}

/* pages/help.php */
.help-layout {
  display:grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap:20px;
  align-items:start;
}
.help-card {
  background:rgba(15,23,42,0.75);
  border:1px solid rgba(148,163,184,0.25);
  border-radius:18px;
  padding:20px;
  box-shadow:0 18px 32px rgba(15,23,42,0.35);
}
.help-card h2 {
  margin:0 0 12px;
  color:#f8fafc;
}
.help-form label {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
  font-size:13px;
  color:#e2e8f0;
}
.help-form input,
.help-form select,
.help-form textarea {
  background:rgba(15,23,42,0.6);
  border:1px solid rgba(148,163,184,0.35);
  border-radius:12px;
  color:#f8fafc;
  padding:10px 12px;
  font-size:13px;
}
.help-form textarea {
  min-height:140px;
  resize:vertical;
}
.help-flash,
.help-errors {
  margin-bottom:12px;
  border-radius:14px;
  padding:12px 16px;
  font-size:13px;
}
.help-flash {
  background:rgba(34,197,94,0.16);
  border:1px solid rgba(34,197,94,0.35);
  color:#bbf7d0;
}
.help-errors {
  background:rgba(239,68,68,0.16);
  border:1px solid rgba(239,68,68,0.35);
  color:#fecaca;
}
.help-ticket-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.help-ticket {
  background:rgba(15,23,42,0.55);
  border:1px solid rgba(148,163,184,0.2);
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.help-ticket a {
  color:#f8fafc;
  text-decoration:none;
}
.help-ticket__meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  color:#94a3b8;
}
.help-ticket__title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.help-ticket__title strong {
  font-size:14px;
  color:#f8fafc;
}
.help-detail {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.help-thread {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.help-message {
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.2);
  background:rgba(30,41,59,0.6);
}
.help-message.admin {
  background:rgba(59,130,246,0.18);
  border-color:rgba(59,130,246,0.45);
}
.help-message__meta {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#cbd5f5;
  margin-bottom:6px;
}
.help-message__body {
  color:#e2e8f0;
  font-size:13px;
  white-space:pre-wrap;
}
.help-ticket-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.help-empty {
  background:rgba(15,23,42,0.5);
  border:1px dashed rgba(148,163,184,0.25);
  border-radius:14px;
  padding:18px;
  color:#94a3b8;
  text-align:center;
  font-size:13px;
}
@media (max-width:1024px) {
  .help-layout {
    grid-template-columns:1fr;
  }
}

/* pages/garage_motos.php */
.card { background:#00000022; padding:16px; border-radius:14px; }
.text-muted { color:#cbd5e180; }
.grid { display:grid; gap:12px; }
.grid.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width:1000px){ .grid.cols-2{ grid-template-columns:1fr; } }
.form-row .input { min-width:140px; }
.btn { display:inline-block; padding:8px 12px; border-radius:10px; background:#334155; color:#fff; text-decoration:none; border:none; cursor:pointer; }
.btn.ghost{ background:transparent; border:1px solid #475569; color:#e2e8f0; }
.btn.danger{ background:#b00020; }
.badge { display:inline-block; background:#475569; color:#fff; padding:2px 8px; border-radius:999px; font-size:12px; }
.badge.ghost{ background:transparent; border:1px solid #475569; color:#e2e8f0; }
.bar-outer { height:10px; background:#0b1220; border-radius:999px; overflow:hidden; }
.bar-inner.en { height:100%; background:#2563eb; }



/* Migrated inline styles */
/* pages/operation_echo.php */
.echo {display:flex;flex-direction:column;gap:18px;color:#e2e8f0;}
.echo-card {background:rgba(15,23,42,0.85);border:1px solid rgba(148,163,184,0.2);border-radius:14px;padding:18px;}
.echo-hero {display:flex;flex-direction:column;gap:14px;}
.echo-eyebrow {text-transform:uppercase;letter-spacing:0.08em;font-size:0.75rem;color:#60a5fa;margin:0;}
.echo-hero__stats {display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;font-size:0.85rem;color:#cbd5f5;}
.echo-hero__stats strong {display:block;font-size:1.2rem;color:#f8fafc;}
.echo-alert {border-radius:12px;padding:10px 14px;}
.echo-alert--error {border:1px solid rgba(248,113,113,0.4);background:rgba(127,29,29,0.2);} 
.echo-alert--ok {border:1px solid rgba(34,197,94,0.4);background:rgba(22,101,52,0.2);} 
.echo-status {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.echo-pill {padding:4px 10px;border-radius:999px;font-size:0.7rem;text-transform:uppercase;}
.echo-pill--safe {background:rgba(34,197,94,0.2);color:#4ade80;}
.echo-pill--warn {background:rgba(251,191,36,0.2);color:#fbbf24;}
.echo-pill--critical {background:rgba(248,113,113,0.2);color:#f87171;}
.echo-pill--dead {background:rgba(15,23,42,0.9);color:#f87171;border:1px solid rgba(248,113,113,0.4);}
.echo-pill--info {background:rgba(59,130,246,0.15);color:#60a5fa;}
.echo-qte {border:1px solid rgba(248,113,113,0.3);background:rgba(127,29,29,0.15);}
.echo-qte__form {display:flex;flex-direction:column;gap:8px;}
.echo-qte__form label {display:flex;gap:8px;align-items:center;}
.echo-radio {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;color:#cbd5f5;}
.echo-actions {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.echo-action header {display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.echo-action__meta {display:flex;flex-direction:column;gap:4px;color:#94a3b8;font-size:0.8rem;margin-bottom:10px;}
.echo-btn {background:#3b82f6;color:#fff;border:none;padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:600;}
.echo-btn--ghost {background:transparent;border:1px solid rgba(59,130,246,0.5);color:#93c5fd;}
.echo-btn--warn {background:#f97316;color:#fff;}
.echo-log,.echo-history,.echo-npc {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.echo-log li,.echo-history li {display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(148,163,184,0.2);padding-bottom:8px;}
.echo-history__meta {display:flex;gap:8px;font-size:0.8rem;color:#93c5fd;flex-wrap:wrap;}
.echo-lower {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.echo-npc span {color:#94a3b8;font-size:0.8rem;}
.echo-npc p {margin:4px 0 0;color:#cbd5f5;}
@media (max-width:700px){.echo-hero__stats{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* pages/register.php */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.register-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.register-form .input {
  width: 100%;
}
.register-form__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.register-form button {
  align-self: flex-start;
}
.register-form p.text-muted {
  margin: 0;
}

/* pages/races.php */
.race-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.race-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.input {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
}

.input.small {
  padding: 6px 8px;
  font-size: 0.85rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #334155, #1e293b);
  color: #f8fafc;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(30, 64, 175, 0.28);
}

.btn.success {
  background: linear-gradient(135deg, #059669, #10b981);
}

.btn.success.small {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn.danger {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

.btn.danger.small {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn.small {
  padding: 6px 10px;
  font-size: 0.85rem;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge.success { background: rgba(34, 197, 94, 0.2); color: #bbf7d0; }
.badge.danger  { background: rgba(239, 68, 68, 0.2); color: #fecaca; }
.badge.ghost   { background: rgba(148, 163, 184, 0.18); color: #e2e8f0; }

.text-muted {
  color: #94a3b8;
}

@media (max-width: 960px) {
  .grid.cols-2 {
    grid-template-columns: 1fr !important;
  }

  .race-inline-form {
    flex-direction: column;
    align-items: stretch;
  }
}

/* pages/marketplace.php */
.market-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.market-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.market-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.8));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.market-card__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.market-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #cbd5e1;
  font-size: 0.9rem;
}
.market-card__actions {
  display: flex;
  justify-content: flex-end;
}
.market-price {
  font-weight: 700;
  font-size: 1.1rem;
}

/* pages/pve.php */
.pve-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pve-hero {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: center;
}
.pve-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: #38bdf8;
}
.pve-progress {
  margin: 16px 0;
}
.pve-progress__bar {
  background: rgba(15,23,42,0.5);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}
.pve-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #c084fc);
}
.pve-progress__info {
  display: flex;
  justify-content: space-between;
  color: rgba(226,232,240,0.85);
  margin-top: 6px;
}
.pve-hero__stats {
  display: grid;
  gap: 12px;
}
.pve-hero__stats article {
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 16px;
  padding: 12px 16px;
  background: rgba(15,23,42,0.8);
}
.pve-hero__stats span {
  display: block;
  font-size: 0.85rem;
  color: rgba(148,163,184,0.8);
}
.pve-hero__stats strong {
  font-size: 1.4rem;
  color: #f8fafc;
}
.pve-prestige-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pve-trees {
  display: grid;
  gap: 18px;
}
.pve-tree {
  border-bottom: 1px solid rgba(148,163,184,0.15);
  padding-bottom: 18px;
}
.pve-tree:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.pve-tree__nodes {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.pve-node {
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 16px;
  padding: 12px 16px;
  background: rgba(15,23,42,0.7);
}
.pve-node.has-rank {
  border-color: rgba(168,85,247,0.4);
}
.pve-node.is-locked {
  opacity: 0.55;
}
.pve-node__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.pve-node__header strong {
  display: block;
  color: #f8fafc;
}
.pve-node__header span {
  color: rgba(226,232,240,0.8);
}
.pve-node__rank {
  font-size: 0.85rem;
  color: rgba(148,163,184,0.85);
}
.pve-node__actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pve-node__actions span {
  color: rgba(148,163,184,0.85);
}
@media (max-width: 960px) {
  .pve-hero {
    grid-template-columns: 1fr;
  }
}

/* pages/shop.php */
.card { background:#00000022; padding:16px; border-radius:14px; }
.grid { display:grid; gap:12px; }
.grid.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr} .grid.cols-2{grid-template-columns:1fr} }

.kpi { display:flex; justify-content:space-between; padding:12px; border-radius:12px; background:#1112; }
.kpi .big { font-size:1.25rem; font-weight:700; }

.shop-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:700px){ .shop-grid { grid-template-columns: 1fr; } }
.product { border:1px solid #ffffff14; border-radius:12px; padding:12px; background:#0b1220; display:flex; flex-direction:column; gap:10px; min-height:132px; }
.product__head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.p-title { font-weight:700; font-size:16px; }
.p-meta { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.p-desc { margin:0; color:#cbd5e1cc; font-size:13px; line-height:1.4; }

.text-muted { color:#cbd5e180; }
.badge { display:inline-block; background:#475569; color:#fff; padding:2px 8px; border-radius:999px; font-size:12px; }
.badge.ghost { background:transparent; border:1px solid #475569; color:#e2e8f0; }

.btn { display:inline-block; padding:8px 12px; border-radius:10px; background:#334155; color:#fff; text-decoration:none; border:none; cursor:pointer; }
.product form { margin-top:auto; }
.product form .btn { width:100%; text-align:center; }

/* pages/settings.php */
.hq--settings{display:flex;flex-direction:column;gap:24px;margin-bottom:48px;}
.settings-hero__stats{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;}
.settings-hero__stats article{min-width:150px;padding:12px 16px;border-radius:16px;border:1px solid rgba(148,163,184,0.18);background:rgba(15,23,42,0.55);}
.settings-hero__stats span{display:block;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;}
.settings-hero__stats strong{font-size:1.4rem;color:#f8fafc;}
.settings-hero__user{min-width:220px;background:rgba(15,23,42,0.7);border:1px solid rgba(96,165,250,0.45);border-radius:22px;padding:18px;text-align:right;display:flex;flex-direction:column;gap:4px;}
.settings-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.settings-panel header h2{margin:0;}
.settings-panel header p{margin:4px 0 0;color:#94a3b8;}
.settings-form{display:flex;flex-direction:column;gap:16px;margin-top:12px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.settings-avatar-input{display:flex;flex-direction:column;gap:10px;}
.settings-avatar-preview{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;border:1px solid rgba(148,163,184,0.2);background:rgba(15,23,42,0.6);}
.settings-avatar-preview img{width:72px;height:72px;border-radius:12px;object-fit:cover;border:1px solid rgba(148,163,184,0.4);background:#0f1722;}
.settings-avatar-remove{display:inline-flex;align-items:center;gap:8px;font-size:0.85rem;color:#e2e8f0;}
.settings-avatar-remove input{accent-color:#2563eb;}
.input,.textarea{padding:10px 12px;border-radius:10px;border:1px solid rgba(148,163,184,0.2);background:rgba(15,23,42,0.75);color:#f8fafc;}
.textarea{min-height:140px;resize:vertical;}
.field-hint{font-size:0.75rem;}
.form-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;}
.form-actions .btn{min-width:180px;}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:10px;border:none;background:#2563eb;color:#f8fafc;font-weight:600;cursor:pointer;transition:background 0.2s ease;}
.btn:hover{background:#1d4ed8;}
.btn.danger{background:#b91c1c;}
.btn.danger:hover{background:#991b1b;}
.text-muted{color:#94a3b8;}
@media (max-width:720px){
  .settings-hero__user{text-align:left;}
  .form-actions{justify-content:stretch;}
  .form-actions .btn{flex:1;}
}

/* pages/skill_progress.php */

/* pages/stats.php */
.stats-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 48px;
}

.stats-hero {
  border-radius: 28px;
  background: radial-gradient(circle at 20% 20%, rgba(56,189,248,0.25), transparent 55%),
              radial-gradient(circle at 80% 0, rgba(168,85,247,0.25), transparent 60%),
              linear-gradient(135deg, rgba(17,24,39,0.95), rgba(15,23,42,0.88));
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: minmax(0,1fr) 260px;
}

.stats-hero__lead {
  color: rgba(226,232,240,0.75);
}

.stats-hero__tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.stats-hero__tags span {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,0.35);
  background: rgba(59,130,246,0.15);
  font-size: 13px;
  color: #e0f2fe;
}

.stats-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stats-hero__icon {
  font-size: 64px;
  filter: drop-shadow(0 16px 32px rgba(56,189,248,0.45));
}

.stats-hero__glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.35), transparent 70%);
  z-index: -1;
}

.stats-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stats-hero__stats small {
  color: rgba(148,163,184,0.8);
}

.stats-grid {
  display: grid;
  gap: 24px;
}

.stats-panel__head h2 {
  margin: 0;
}

.stats-panel__head p {
  margin: 4px 0 0;
  color: rgba(226,232,240,0.65);
}

.stats-panel--wide {
  grid-column: 1 / -1;
}

.stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.stats-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid rgba(148,163,184,0.12);
  padding-bottom: 10px;
}

.stats-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stats-list span {
  color: rgba(226,232,240,0.75);
}

.stats-list strong {
  font-size: 1.4rem;
  color: #f8fafc;
}

.stats-list small {
  color: rgba(148,163,184,0.8);
}

.stats-economy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-economy__total span {
  color: rgba(226,232,240,0.7);
}

.stats-economy__total strong {
  font-size: 2rem;
  color: #f8fafc;
}

.stats-economy__bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(15,23,42,0.6);
  overflow: hidden;
}

.stats-economy__fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
}

.stats-economy__legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(226,232,240,0.75);
}

.stats-economy__extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.stats-economy__extra span {
  color: rgba(226,232,240,0.7);
}

.stats-economy__extra strong {
  font-size: 1.3rem;
  color: #f8fafc;
}

.stats-records {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-records li {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stats-records__value {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(59,130,246,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #f8fafc;
}

.stats-records__details span {
  color: rgba(226,232,240,0.85);
}

.stats-records__details small {
  color: rgba(148,163,184,0.75);
}

.stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.stats-table th,
.stats-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.12);
}

.stats-table th {
  text-align: left;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148,163,184,0.75);
}

.stats-table td {
  color: #f8fafc;
}

.stats-table td strong {
  display: block;
  color: #f8fafc;
}

.stats-table td small {
  color: rgba(148,163,184,0.75);
}

.stats-table td:nth-child(n+2) {
  text-align: right;
}

.stats-empty {
  color: rgba(148,163,184,0.85);
}

.crime-live__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.25);
}

.crime-live__meta span {
  color: rgba(226,232,240,0.7);
}

.crime-live__meta strong {
  color: #f8fafc;
  font-size: 1.1rem;
}

.crime-live__meta small {
  color: rgba(148,163,184,0.8);
}

.crime-live__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crime-live__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15,23,42,0.65);
  border: 1px solid rgba(148,163,184,0.12);
}

.crime-live__label strong {
  color: #f8fafc;
}

.crime-live__label small {
  color: rgba(148,163,184,0.8);
}

.crime-live__rate {
  text-align: right;
}

.crime-live__rate strong {
  color: #22d3ee;
}

.crime-live__rate small {
  color: rgba(148,163,184,0.8);
}

.crime-meter {
  height: 10px;
  background: rgba(148,163,184,0.15);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.08);
}

.crime-meter__fill {
  height: 100%;
  background: linear-gradient(90deg, #22d3ee, #6366f1);
}

.crime-earnings {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.crime-earnings__total {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34,211,238,0.12), rgba(99,102,241,0.12));
  border: 1px solid rgba(99,102,241,0.25);
}

.crime-earnings__total span {
  color: rgba(226,232,240,0.75);
}

.crime-earnings__total strong {
  font-size: 1.6rem;
  color: #f8fafc;
}

.crime-earnings__total small {
  color: rgba(148,163,184,0.8);
}

.crime-earnings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.crime-earnings__block {
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 12px;
  padding: 12px;
}

.crime-earnings__block h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #e2e8f0;
}

.crime-taglist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crime-taglist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.1);
}

.crime-taglist li:last-child {
  border-bottom: none;
}

.crime-taglist strong {
  color: #f8fafc;
}

.crime-taglist small {
  color: rgba(148,163,184,0.8);
}

.crime-chip {
  background: rgba(34,211,238,0.16);
  border: 1px solid rgba(34,211,238,0.35);
  color: #e0f2fe;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.crime-leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crime-leaderboard__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.18);
}

.crime-leaderboard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crime-leaderboard__rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(99,102,241,0.16);
  border: 1px solid rgba(99,102,241,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #c7d2fe;
}

.crime-leaderboard__meta strong {
  color: #f8fafc;
}

.crime-leaderboard__meta small {
  color: rgba(148,163,184,0.8);
}

.crime-leaderboard__value {
  color: #f8fafc;
  font-weight: 700;
}

@media (max-width: 900px) {
  .stats-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .stats-hero__visual {
    order: -1;
  }
  .stats-hero__tags {
    justify-content: center;
  }
}

/* pages/steal.php */
.theft-v4 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.theft-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theft-tabs {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.theft-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
  min-width: 120px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.theft-tab:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(96, 165, 250, 0.75);
}

.theft-tab.is-active {
  border-color: rgba(124, 58, 237, 0.8);
  background: linear-gradient(120deg, rgba(124, 58, 237, 0.32), rgba(59, 130, 246, 0.28));
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.18);
  color: #f8fafc;
}

.theft-tab__label {
  font-weight: 700;
  font-size: 0.95rem;
}

.theft-panel {
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 18px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.theft-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.theft-panel__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
}

.theft-panel__head h3 {
  margin: 4px 0;
  color: #e2e8f0;
}

.theft-panel__lead {
  margin: 0;
  color: #94a3b8;
}

.theft-panel__body {
  margin-top: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin: 0 4px 4px 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
  font-weight: 600;
  font-size: 0.9rem;
}

.pill--dark {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.pill--accent {
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #0f172a;
  border: none;
}

.pill--ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.theft-empty {
  padding: 24px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px dashed rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
  text-align: center;
}

@media (max-width: 960px) {
}

@media (max-width: 720px) {
  .theft-tabs {
    flex-direction: column;
  }

  .theft-tab {
    width: 100%;
  }

  .theft-panel__head {
    flex-direction: column;
  }
}

/* pages/skills.php */
.hq--skills { display:flex; flex-direction:column; gap:24px; margin-bottom:48px; }
.skills-hero { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; }
.skills-hero__stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; }
.skills-hero__stats div { background:rgba(15,23,42,0.55); border:1px solid rgba(148,163,184,0.2); border-radius:16px; padding:12px 16px; min-width:140px; }
.skills-hero__stats span { display:block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:#94a3b8; }
.skills-hero__stats strong { font-size:1.4rem; color:#f8fafc; }
.skills-hero__points { min-width:240px; background:rgba(15,23,42,0.7); border:1px solid rgba(96,165,250,0.4); border-radius:22px; padding:18px; display:flex; flex-direction:column; gap:6px; text-align:right; }
.skills-hero__points span { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:#94a3b8; }
.skills-hero__points strong { font-size:2rem; color:#f8fafc; }
.skills-hero__points small { color:#cbd5f5; }
.skills-panel { gap:16px; }
.skills-bonus-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.skills-bonus-item { padding:16px; border-radius:16px; background:rgba(15,23,42,0.65); border:1px solid rgba(148,163,184,0.16); display:flex; flex-direction:column; gap:4px; }
.skills-bonus__value { font-size:1.1rem; font-weight:700; color:#f8fafc; }
.skills-bonus__label { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:#94a3b8; }
.skills-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.skill-card { display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:18px; background:linear-gradient(155deg,rgba(15,23,42,0.9),rgba(17,24,39,0.82)); border:1px solid rgba(148,163,184,0.18); box-shadow:0 12px 24px rgba(2,6,23,0.45); }
.skill-card.is-max { border-color:rgba(59,130,246,0.55); }
.skill-card__header { display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; }
.skill-chip { padding:3px 10px; border-radius:999px; border:1px solid rgba(96,165,250,0.35); color:#93c5fd; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; }
.skill-card__level { font-size:0.78rem; color:#94a3b8; }
.skill-card__icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:14px; border:1px solid rgba(96,165,250,0.3); background:rgba(37,99,235,0.15); font-size:1.2rem; color:#f8fafc; }
.skill-card__description { margin:0; color:#cbd5f5; font-size:0.9rem; }
.skill-card__progress { height:5px; border-radius:999px; background:rgba(148,163,184,0.2); overflow:hidden; }
.skill-card__progress span { display:block; height:100%; background:linear-gradient(90deg,#38bdf8,#2563eb); }
.skill-card__effects { font-size:0.85rem; color:#e2e8f0; display:flex; flex-direction:column; gap:4px; }
.skill-card__effects span { display:inline-block; min-width:110px; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:#94a3b8; margin-right:4px; }
.skill-card__effects p { display:flex; gap:6px; margin:0; }
.skill-card__actions { margin-top:auto; }
.skill-card__actions form { display:flex; }
.btn { padding:10px 16px; border-radius:12px; border:none; background:linear-gradient(135deg,#2563eb,#0ea5e9); color:#f8fafc; font-weight:600; cursor:pointer; }
.btn:disabled,.btn.btn-disabled { background:rgba(15,23,42,0.7); color:#94a3b8; cursor:not-allowed; }
.skills-flash { margin-top:-8px; }
.skills-flash:empty { display:none; }
@media (max-width:720px) {
  .skills-hero__points { text-align:left; }
}

/* pages/stocks.php */
.hq--stocks .hq-grid--stocks {
  gap: 24px;
}
.hq--stocks .hq-list--market .hq-list__row--gain .hq-list__value,
.hq--stocks .hq-list__row--gain .hq-list__value,
.hq--stocks .text-profit {
  color: #22c55e;
}
.hq--stocks .hq-list--market .hq-list__row--loss .hq-list__value,
.hq--stocks .hq-list__row--loss .hq-list__value,
.hq--stocks .text-loss {
  color: #f87171;
}
.hq--stocks .stock-chart__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.hq--stocks .stock-chart__tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.85rem;
}
.hq--stocks .stock-chart__tab.active {
  background: linear-gradient(120deg, #22d3ee, #6366f1);
  border-color: transparent;
  color: #0f172a;
}
.hq--stocks .stock-chart__canvas {
  width: 100%;
  height: 240px;
}
.hq--stocks .stock-chart__canvas svg {
  width: 100%;
  height: 100%;
}
.hq--stocks .stock-chart__canvas polyline {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 2;
}
.hq--stocks .stock-chart__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-top: 8px;
  color: #94a3b8;
}
.hq--stocks .stock-chart__meta {
  margin-top: 10px;
  font-weight: 600;
  font-size: 0.9rem;
}
.hq--stocks .stock-chart__meta.profit {
  color: #22c55e;
}
.hq--stocks .stock-chart__meta.loss {
  color: #f87171;
}
.hq--stocks .stock-portfolio__summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hq--stocks .stock-portfolio__summary article {
  flex: 1 1 140px;
  min-width: 160px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  padding: 12px 14px;
}
.hq--stocks .stock-portfolio__summary span {
  display: block;
  font-size: 0.8rem;
  color: #94a3b8;
}
.hq--stocks .stock-portfolio__summary strong {
  font-size: 1.2rem;
}
.hq--stocks .stock-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.hq--stocks .dash-form {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hq--stocks .dash-form h3 {
  margin: 0;
  font-size: 1.1rem;
}
.hq--stocks .dash-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}
.hq--stocks .dash-form .input,
.hq--stocks .dash-form input[type="number"],
.hq--stocks .dash-form select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.6);
  color: #f8fafc;
}
.hq--stocks .stock-forms .btn {
  align-self: flex-start;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}
.hq--stocks .stock-forms .btn.success {
  background: linear-gradient(120deg, #06b6d4, #6366f1);
  color: #0f172a;
}
.hq--stocks .stock-forms .btn.danger {
  background: #ef4444;
  color: #fff;
}
@media (max-width: 720px) {
  .hq--stocks .stock-chart__labels {
    flex-direction: column;
    gap: 4px;
  }
  .hq--stocks .stock-forms {
    grid-template-columns: 1fr;
  }
}

/* pages/strength_shop.php */
.strength-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strength-hero__icon {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 16px 30px rgba(56, 189, 248, 0.45));
}

.strength-hero__glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.3), transparent 70%);
  z-index: -1;
}

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

.strength-card__facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.strength-card__facts li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #cbd5f5;
}

.strength-card__facts strong {
  color: #f8fafc;
}

.strength-card__form {
  margin-top: 18px;
}

/* Heist page */
.heist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.heist-card {
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 16px;
  background: rgba(15,23,42,0.85);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.heist-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.heist-card__head h3 { margin: 0; color: #f8fafc; }
.heist-card__head span { color: #cbd5f5; font-weight: 600; }
.heist-card__desc { margin: 0; color: #cbd5f5; }
.heist-card__reward { margin: 0; color: #e2e8f0; font-weight: 600; }
.heist-tags, .heist-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.heist-tags span, .heist-roles .badge {
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(96,165,250,0.28);
  color: #dbeafe;
  font-size: 0.85rem;
}
.heist-roles .badge.ghost {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.25);
  color: #e2e8f0;
}
.heist-hint {
  margin: 4px 0;
  color: #94a3b8;
  font-size: 0.9rem;
}
.heist-reqs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #dbeafe;
}
.heist-reqs li {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(15,23,42,0.65);
  border: 1px solid rgba(148,163,184,0.18);
}
.heist-card__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.heist-role-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.heist-role-picker.inline { align-items: center; }
.heist-role-picker .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,0.7);
  border: 1px solid rgba(148,163,184,0.35);
  color: #e2e8f0;
  cursor: pointer;
}
.heist-role-picker .chip input { accent-color: #38bdf8; }
.heist-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.heist-board,
.heist-log {
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 16px;
  background: rgba(15,23,42,0.85);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.heist-board__list,
.heist-log__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.heist-board__list li,
.heist-log__list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(10,15,25,0.9);
  border: 1px solid rgba(51,65,85,0.6);
}
.heist-board__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.heist-log__list span { color: #cbd5f5; }
.heist-log__meta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.heist-log__meta .badge.success { background: rgba(34,197,94,0.15); color: #bbf7d0; border: 1px solid rgba(34,197,94,0.3); }
.heist-log__meta .badge.danger { background: rgba(248,113,113,0.15); color: #fecaca; border: 1px solid rgba(248,113,113,0.3); }
.heist-log__meta .badge.neutral { background: rgba(148,163,184,0.18); color: #e2e8f0; border: 1px solid rgba(148,163,184,0.3); }
.heist-board__list .text-muted { color: #94a3b8; }
@media (max-width: 720px) {
  .heist-card__head { flex-direction: column; align-items: flex-start; }
  .heist-board__list li { flex-direction: column; }
  .heist-board__actions { align-items: flex-start; }
}

.strength-card.is-owned {
  border-color: rgba(34, 197, 94, 0.35);
}

@media (max-width: 860px) {
  .dash-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .strength-hero__visual {
    order: -1;
  }
}

/* pages/world_map.php */
.worldmap-container {
  display: grid;
  gap: 32px;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}
.worldmap-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
}
.worldmap-panel {
  display: grid;
  gap: 24px;
}
.worldmap-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.worldmap-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.worldmap-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.worldmap-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(73, 56, 32, 0.35);
  color: #3f2f1d;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.worldmap-stat strong {
  font-size: 15px;
  letter-spacing: 0.03em;
  color: #2c1e0e;
}
.worldmap-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(130, 101, 60, 0.16);
  border: 1px solid rgba(130, 101, 60, 0.5);
  color: #3f2f1d;
}
.btn.small {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.2;
}
.worldmap-board {
  position: relative;
  padding: 24px;
  border-radius: 18px;
  border: 2px solid #4a3821;
  background: radial-gradient(circle at 42% 32%, rgba(255, 255, 255, 0.16), rgba(246, 225, 173, 0.92) 58%, rgba(221, 189, 132, 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 22px 38px rgba(40, 28, 16, 0.32);
  overflow: hidden;
}
.worldmap-board::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 1px solid rgba(73, 56, 32, 0.35);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
#worldCanvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 3px solid #3b2918;
  background: #f4e4c1;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 16px 28px rgba(255, 245, 214, 0.35),
    0 18px 30px rgba(40, 28, 16, 0.28);
  image-rendering: pixelated;
  cursor: pointer;
}
.worldmap-overlay {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(46, 35, 20, 0.92);
  color: #f8f4e6;
  font-size: 12px;
  border: 1px solid rgba(130, 101, 60, 0.5);
  box-shadow:
    0 18px 32px -16px rgba(30, 22, 14, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.worldmap-overlay strong {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff7e0;
}
.worldmap-tooltip {
  position: absolute;
  background: rgba(58, 43, 28, 0.92);
  color: #f9f1db;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 11px;
  pointer-events: none;
  transform: translate(-50%, -140%);
  white-space: nowrap;
  border: 1px solid rgba(130, 101, 60, 0.45);
  box-shadow: 0 14px 28px -18px rgba(30, 22, 14, 0.85);
  display: none;
}
.worldmap-board:hover .worldmap-tooltip {
  display: block;
}
.worldmap-legend-card {
  align-self: stretch;
  min-width: 260px;
  display: grid;
  gap: 18px;
}
.worldmap-legend-card h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3f2f1d;
}
.worldmap-legend {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.worldmap-legend li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(73, 56, 32, 0.25);
  background: linear-gradient(135deg, rgba(255, 248, 227, 0.92), rgba(230, 206, 158, 0.55));
  box-shadow:
    0 12px 24px -18px rgba(40, 28, 16, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.worldmap-legend li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.35), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.8;
}
.legend-chip {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--legend-color, #b87534);
  box-shadow:
    0 10px 18px -10px var(--legend-color, rgba(0,0,0,0.25)),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
.legend-chip::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), transparent);
  opacity: 0.72;
}
.legend-text {
  display: grid;
  gap: 4px;
}
.legend-text strong {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3f2f1d;
}
.legend-text span {
  font-size: 12px;
  color: rgba(60, 45, 25, 0.72);
}
.worldmap-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.worldmap-tip {
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(130, 101, 60, 0.55);
  background: linear-gradient(135deg, rgba(246, 225, 173, 0.45), rgba(255, 239, 201, 0.32));
  font-size: 13px;
  color: #3f2f1d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.worldmap-tip.alt {
  border-color: rgba(152, 116, 70, 0.6);
  background: linear-gradient(135deg, rgba(221, 189, 132, 0.45), rgba(246, 225, 173, 0.35));
}
.worldmap-modal-backdrop[hidden] {
  display: none !important;
}
.worldmap-modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(18, 13, 8, 0.78);
  backdrop-filter: blur(3px);
  z-index: 1040;
}
.worldmap-modal-backdrop.visible {
  display: flex;
}
.worldmap-modal {
  position: relative;
  width: min(520px, 100%);
  display: grid;
  gap: 18px;
  padding: 28px 28px 26px;
  border-radius: 20px;
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.16), rgba(54, 39, 24, 0.94) 58%, rgba(32, 23, 14, 0.96));
  border: 1px solid rgba(212, 183, 122, 0.38);
  box-shadow:
    0 36px 52px -24px rgba(10, 6, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #f3ecdd;
}
.worldmap-modal::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.worldmap-modal-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 32px;
}
.worldmap-modal-header h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.worldmap-modal-subtitle {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: rgba(243, 236, 221, 0.7);
}
.worldmap-tile-badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(212, 183, 122, 0.2);
  border: 1px solid rgba(212, 183, 122, 0.45);
  color: #f8f0d9;
}
.worldmap-modal-body {
  display: grid;
  gap: 12px;
}
.worldmap-modal-monster {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 11, 6, 0.55);
  border: 1px solid rgba(212, 183, 122, 0.18);
}
.worldmap-modal-monster strong {
  font-size: 16px;
  letter-spacing: 0.02em;
}
.worldmap-modal-monster .statline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(243, 236, 221, 0.78);
}
.worldmap-modal-monster .statline em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 234, 192, 0.8);
}
.worldmap-modal-monster .statline.alt em {
  color: rgba(187, 208, 255, 0.75);
}
.worldmap-modal-monster .stat-values {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 600;
  color: rgba(255, 246, 205, 0.94);
}
.worldmap-modal-monster .statline.alt .stat-values {
  color: rgba(199, 225, 255, 0.9);
}
.worldmap-modal-log {
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(12, 9, 6, 0.52);
  border: 1px solid rgba(212, 183, 122, 0.14);
  scrollbar-width: thin;
}
.worldmap-modal-log-entry {
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 2px solid rgba(212, 183, 122, 0.26);
}
.worldmap-modal-log-entry strong {
  color: #fce3a6;
}
.worldmap-modal-log-entry.error {
  border-left-color: rgba(255, 99, 71, 0.6);
  background: rgba(255, 99, 71, 0.12);
}
.worldmap-modal-log-entry.success {
  border-left-color: rgba(72, 187, 120, 0.65);
  background: rgba(72, 187, 120, 0.16);
}
.worldmap-modal-log-entry.warning {
  border-left-color: rgba(255, 213, 79, 0.55);
  background: rgba(255, 213, 79, 0.16);
}
.worldmap-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.worldmap-modal-actions .btn {
  min-width: 120px;
}
.worldmap-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(212, 183, 122, 0.24);
  background: rgba(12, 8, 5, 0.6);
  color: #f3ecdd;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.worldmap-modal-close:hover {
  background: rgba(212, 183, 122, 0.25);
  transform: translateY(-1px);
}
.worldmap-modal-close:disabled,
.worldmap-modal-close[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
body.worldmap-modal-open {
  overflow: hidden;
}
body.worldmap-modal-open .worldmap-board {
  pointer-events: none;
  filter: saturate(0.9) brightness(0.85);
  transition: filter 0.18s ease;
}
@media (max-width: 720px) {
  .worldmap-overlay {
    top: 12px;
    right: 12px;
    font-size: 11px;
  }
  .worldmap-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* pages/tuning.php */
.tune-wrapper {
  background: linear-gradient(145deg, #0f172a, #111827);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.4);
}
.tune-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.tune-header h2 {
  margin: 0;
  font-size: 28px;
  color: #f8fafc;
}
.tune-header p {
  margin: 6px 0 0;
  color: #94a3b8;
  max-width: 520px;
}
.tune-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  color: #cbd5e1;
}
.tune-balance span {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.tune-balance strong {
  font-size: 22px;
  color: #e2e8f0;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #1e293b;
  color: #f8fafc;
}
.badge.vip {
  background: #1e3a8a;
  color: #bfdbfe;
}
.badge-max {
  background: #0f172a;
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
}
.badge.skill {
  background: #0f172a;
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}
.tune-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tune-card {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tune-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.tune-card h3 {
  margin: 0;
  font-size: 18px;
  color: #f8fafc;
}
.tune-card.is-active {
  transform: translateY(-2px);
  border-color: #38bdf8;
  box-shadow: 0 12px 28px rgba(56, 189, 248, 0.15);
}
.tune-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tune-stat {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.tune-stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}
.tune-stat-label {
  font-weight: 600;
  color: #f8fafc;
}
.tune-level-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.tune-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #1e293b;
  overflow: hidden;
}
.tune-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #6366f1);
  transition: width 0.2s ease;
}
.tune-actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tune-cost {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
}
.tune-actions form {
  margin: 0;
}
.tune-actions .btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: #2563eb;
  border: none;
  color: #f8fafc;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tune-actions .btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}
.tune-actions .btn:active {
  transform: translateY(0);
}
.tune-actions .btn.btn-disabled {
  background: #1e293b;
  color: #94a3b8;
  cursor: not-allowed;
}
.tune-hint {
  margin-top: 6px;
  font-size: 12px;
}
.tune-footnote {
  margin-top: 22px;
  font-size: 13px;
}
.tune-wrapper .text-muted {
  color: #94a3b8;
}
@media (max-width: 640px) {
  .tune-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .tune-balance {
    align-items: flex-start;
    text-align: left;
  }
}

/* pages/training.php */
.training-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}

.training-hero {
  background:
    radial-gradient(circle at 12% 22%, rgba(56, 189, 248, 0.28), transparent 55%),
    radial-gradient(circle at 90% 0%, rgba(248, 113, 113, 0.25), transparent 60%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88));
}

.training-hero__stats li strong {
  font-size: 24px;
}

.training-hero__stats li small {
  color: #cbd5f5;
  font-size: 11px;
}

.training-hero__discount strong {
  color: #34d399;
}

.training-hero__discount:not(.is-active) strong {
  color: #e2e8f0;
}

.training-hero__discount:not(.is-active) small {
  color: #94a3b8;
}

.training-flash ul {
  margin: 0;
  padding-left: 18px;
}

.training-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.training-panel header h2 {
  margin: 0;
}

.training-panel__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.training-panel__badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.45);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bfdbfe;
}

.training-panel__programs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.training-program {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.training-program__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.training-program__head strong {
  font-size: 18px;
  display: block;
}

.training-program__head span {
  color: #94a3b8;
  font-size: 13px;
}

.training-program__range {
  font-size: 13px;
  color: #f8fafc;
  white-space: nowrap;
}

.training-program__stats {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: #94a3b8;
}

.training-program__stats span {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: #64748b;
}

.training-program__stats strong {
  font-size: 16px;
  color: #f8fafc;
}

.training-program__note {
  display: block;
  color: #93c5fd;
  font-size: 11px;
  margin-top: 2px;
}

.training-program.is-disabled {
  opacity: 0.65;
}

.training-program.is-disabled button {
  pointer-events: none;
}

.training-program button {
  align-self: flex-start;
}

@media (max-width: 860px) {
  .training-hero {
    grid-template-columns: 1fr;
  }

  .training-panel__title {
    flex-direction: column;
    align-items: flex-start;
  }

  .training-program__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .training-program__range {
    white-space: normal;
  }
}

/* pages/terms.php */
.terms.card {
  max-width: 820px;
  margin: 0 auto;
  color: #e2e8f0;
  background: rgba(12, 18, 35, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 18px 48px rgba(8, 11, 24, 0.45);
}

.terms h1 {
  margin-top: 0;
  font-size: 2.2rem;
  color: #f8fafc;
}

.terms .lead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.84);
}

.terms section {
  margin-top: 28px;
}

.terms h2 {
  font-size: 1.2rem;
  color: #bfdbfe;
  margin-bottom: 10px;
}

.terms ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
  color: rgba(203, 213, 225, 0.9);
}

.terms p {
  margin: 0;
  line-height: 1.6;
  color: rgba(203, 213, 225, 0.92);
}

.terms a {
  color: #38bdf8;
  text-decoration: none;
}

.terms a:hover {
  text-decoration: underline;
}

.cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  color: #0b1120;
  background: #f8fafc;
}

.btn.primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #0b1120;
}

.btn.ghost {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
}

@media (max-width: 640px) {
  .terms.card {
    padding: 24px;
  }
}
/* === Black market === */
.blackmarket-page{display:flex; flex-direction:column; gap:16px}
.blackmarket-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.blackmarket-card.is-owned{opacity:0.7; border-color:rgba(34,197,94,0.35); box-shadow:0 12px 24px rgba(34,197,94,0.18)}
.blackmarket-card__title{display:flex; align-items:center; gap:8px; justify-content:space-between}
.blackmarket-chip{padding:4px 8px; border-radius:999px; background:rgba(56,189,248,0.16); border:1px solid rgba(56,189,248,0.35); color:#bae6fd; font-size:12px}
.blackmarket-stats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px}
.blackmarket-stats li{display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:10px; border:1px solid rgba(148,163,184,0.16); background:rgba(15,23,42,0.55); color:#e2e8f0}
.blackmarket-stats span{color:#94a3b8; font-size:12px}
/* === Members page layout === */
.hq--members .hq-grid{display:grid; grid-template-columns:320px 1fr; gap:14px; align-items:start;}
@media (max-width: 980px){ .hq--members .hq-grid{grid-template-columns:1fr;} }
.hq-panel--filters{position:sticky; top:10px; align-self:start;}
.hq-members-form-grid{display:grid; gap:10px; grid-template-columns:1fr;}
.hq-members-field{display:flex; flex-direction:column; gap:6px; color:#cbd5f5; font-size:14px;}
.hq-members-input{background:#0b1220; border:1px solid rgba(148,163,184,0.3); border-radius:10px; padding:10px 12px; color:#e2e8f0;}
.hq-members-actions{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.hq-members-chips{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.hq-members-actions__buttons{display:flex; gap:10px; flex-wrap:wrap;}
.hq-members-panel-header{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.hq-members-tabs{display:flex; gap:8px; flex-wrap:wrap;}
.members-tab{border:1px solid rgba(148,163,184,0.25); background:#0d1624; color:#e2e8f0; border-radius:12px; padding:8px 12px; cursor:pointer;}
.members-tab.active{border-color:rgba(59,130,246,0.6); background:rgba(59,130,246,0.12);}
.hq-members-sort{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.hq-members-sort__links a{color:#93c5fd; text-decoration:none;}
.hq-members-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.hq-members-row{border:1px solid rgba(148,163,184,0.2); border-radius:12px; background:rgba(15,23,42,0.55); padding:10px;}
.hq-members-row--online{border-color:rgba(34,197,94,0.45); box-shadow:0 10px 20px rgba(34,197,94,0.2);}
.hq-members-row__main{display:flex; flex-direction:column; gap:6px;}
.hq-members-row__name{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-weight:700;}
.hq-members-row__stats{display:flex; gap:12px; flex-wrap:wrap; color:#cbd5f5; font-size:13px;}
.hq-members-row__values{display:flex; gap:12px; flex-wrap:wrap; font-weight:700; color:#e2e8f0;}
.hq-list__meta{margin:6px 0 0; color:#94a3b8; font-size:12px;}
.hq-members-pagination{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.hq-members-pagination .btn{padding:8px 10px;}
.members-tabpanel{display:none;}
.members-tabpanel.active{display:block;}