:root { color-scheme: dark; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#0b0b0f; color:#e9e9ee; }
.wrap { max-width: 980px; margin: 0 auto; padding: 18px; }
.card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.btn { cursor:pointer; border:1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color:#fff; padding:10px 12px; border-radius: 12px; }
.btn:disabled { opacity: .55; cursor:not-allowed; }
.muted { color: rgba(255,255,255,0.7); }
.topbar { position: sticky; top:0; z-index:10; backdrop-filter: blur(10px); background: rgba(11,11,15,0.7); border-bottom: 1px solid rgba(255,255,255,0.08); }
h1 { font-size: 22px; margin: 0 0 10px; }
input { background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:#fff; padding:10px 12px; border-radius: 12px; width: 220px; }
pre { white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.35); padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); }


.upg { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.18); margin-top:8px; }
.upg .meta { flex:1; }
.upg .name { font-weight:600; }
.upg .desc { font-size: 12px; color: rgba(255,255,255,0.72); margin-top:4px; }
.upg .pill { font-size: 12px; color: rgba(255,255,255,0.8); }


/* ===== Dashboards (v1.3.1) ===== */
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; }
@media (max-width: 900px){ .grid{ grid-template-columns: repeat(6,1fr);} }
@media (max-width: 520px){ .grid{ grid-template-columns: repeat(2,1fr);} }
.col-3{ grid-column: span 3; } .col-4{ grid-column: span 4; } .col-6{ grid-column: span 6; } .col-12{ grid-column: span 12; }
@media (max-width: 900px){ .col-3,.col-4{ grid-column: span 6; } .col-6{ grid-column: span 6; } }
@media (max-width: 520px){ .col-3,.col-4,.col-6{ grid-column: span 2; } }

.kpi { display:flex; gap:10px; align-items:center; }
.ico { width:34px; height:34px; border-radius: 12px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10);
}
.ico svg{ width:18px; height:18px; opacity:.95; }
.kpi .val{ font-size: 22px; font-weight: 700; line-height: 1.15; }
.kpi .lab{ font-size: 12px; color: rgba(255,255,255,0.70); margin-top:2px; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius: 999px;
  border:1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.20);
  font-size: 12px; color: rgba(255,255,255,0.85);
}
.hr { height:1px; background: rgba(255,255,255,0.08); margin: 12px 0; }
.table { width:100%; border-collapse: separate; border-spacing: 0 10px; }
.table th{ text-align:left; font-size: 12px; color: rgba(255,255,255,0.65); font-weight: 600; padding: 0 10px; }
.table td{ background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); padding: 10px; }
.table tr td:first-child{ border-radius: 12px 0 0 12px; }
.table tr td:last-child{ border-radius: 0 12px 12px 0; }
.small { font-size: 12px; color: rgba(255,255,255,0.70); }
.right { text-align:right; }


/* ===== Game UI polish (v1.3.3) ===== */
:root{ --pad: clamp(10px, 2.2vw, 16px); }
h1{ font-size: clamp(20px, 3.4vw, 34px); }
.btn{ font-size: clamp(12px, 1.8vw, 15px); padding: 10px 14px; border-radius: 14px; }
.card{ border-radius: 18px; }
.wallet-big{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(12px, 2.2vw, 18px);
  line-height: 1.2;
  word-break: break-all;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 1 1 240px;
}
.kpi .val{ font-size: clamp(18px, 2.6vw, 26px); }
.upg .meta .name{ font-size: clamp(14px, 2.0vw, 18px); }
.upg{ padding: 12px; border-radius: 18px; }


/* ===== Tiles UI (v1.3.4) ===== */
.tiles{ display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; }
@media (max-width: 980px){ .tiles{ grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 540px){ .tiles{ grid-template-columns: repeat(2, 1fr); } }

.tile{ grid-column: span 3; position:relative; overflow:hidden; padding:14px; border-radius:22px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.30);
  transform: translateY(0);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
@media (max-width: 980px){ .tile{ grid-column: span 3; } }
@media (max-width: 540px){ .tile{ grid-column: span 2; } }

.tile:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,0.18); background: rgba(0,0,0,0.26); }
.tile:active{ transform: translateY(-1px); }

.tile::before{
  content:"";
  position:absolute; inset:-80px -120px auto -120px;
  height: 160px;
  background: radial-gradient(circle at 50% 50%, rgba(71,255,178,0.14), rgba(71,255,178,0) 60%);
  transform: rotate(-8deg);
  pointer-events:none;
  animation: tileGlow 5.8s ease-in-out infinite;
}
@keyframes tileGlow{
  0%,100%{ opacity: .45; transform: translateX(0) rotate(-8deg); }
  50%{ opacity: .85; transform: translateX(18px) rotate(-8deg); }
}

.tile .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tile .lab{ font-size: 12px; color: rgba(255,255,255,0.70); }
.tile .val{ font-size: clamp(18px, 2.8vw, 28px); font-weight: 800; line-height: 1.12; }
.tile .sub{ font-size: 12px; color: rgba(255,255,255,0.62); margin-top:6px; }

.tile .ico{
  width:42px; height:42px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 auto;
  animation: floaty 3.6s ease-in-out infinite;
}
.tile .ico svg{ width:22px; height:22px; }
@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce){
  .tile::before, .tile .ico{ animation:none !important; }
  .tile{ transition:none; }
}


/* ===== Admin settings layout fix (v1.3.4.1) ===== */
.admin-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; }
.admin-col-3{ grid-column: span 3; } .admin-col-4{ grid-column: span 4; } .admin-col-6{ grid-column: span 6; } .admin-col-12{ grid-column: span 12; }
@media (max-width: 900px){
  .admin-col-3,.admin-col-4{ grid-column: span 6; }
  .admin-col-6{ grid-column: span 12; }
}
@media (max-width: 520px){
  .admin-col-3,.admin-col-4,.admin-col-6{ grid-column: span 12; }
}
.admin-setting{
  padding: 12px;
  border-radius: 18px;
}
.admin-setting input{
  width: 100%;
  box-sizing: border-box;
}
.admin-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
