:root{
  --brand:#ef4444;
  --brand-dark:#cc0000;
  --text:#eef2f7;
  --muted:#cbd5e1;
  --panel:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.78)),
    url('https://i.imgur.com/YBYXHXd.jpeg') center/cover fixed no-repeat;
}

/* header only shows the status chip */
.site-header{ max-width:1200px; width:100%; margin:0 auto; padding: 16px 20px; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.status-chip{ display:inline-flex; align-items:center; gap:8px; background: rgba(2,8,23,.5); color:#cde1ff;
  padding:8px 12px; border-radius:999px; box-shadow: inset 0 0 0 1px rgba(99,102,241,.25); font-size:13px;
}
.status-chip .dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.3); }

.toasts{ position: fixed; top: 12px; right: 12px; display: grid; gap: 8px; z-index: 40; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  color: #fff; font-weight:700;
  border-radius: 18px; padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 40px rgba(0,0,0,.35);
  font-size: 18px;
  animation: slidein .35s ease, fadeout .35s ease 6.2s forwards;
  pointer-events: none;
}
@keyframes slidein{ from{ opacity:0; transform: translateY(-8px);} to{ opacity:1; transform:translateY(0);} }
@keyframes fadeout{ to{ opacity:0; transform: translateY(-4px);} }

.hero{ padding: 40px 16px 24px; text-align:center; }
.hero-title{ font-weight:800; font-size: clamp(40px, 6vw, 48px); margin: 12px 0 6px 0; background: linear-gradient(180deg, #fff, rgba(255,255,255,.85)); -webkit-background-clip: text; background-clip:text; color:transparent; }
.hero-subtitle{ font-size: clamp(16px, 2vw, 20px); color:#dbeafe; margin: 0 0 6px 0; }
.hero-meta{ color:#cbd5e1; font-size:14px; opacity:.9; margin-top:8px; }

.server-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content:center; gap: 22px; padding: 8px 16px 20px; max-width:1100px; margin: 0 auto;
}
.server-card{
  width:100%; min-height:200px; border-radius:22px; border:0; color:#fff; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  box-shadow: 0 24px 48px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
  text-decoration:none;
}
.server-card:hover{ transform: translateY(-2px); filter: brightness(1.02); }
.server-card .icon{ width:56px; height:56px; object-fit:contain; filter: brightness(0) invert(1); }
.server-card h3{ font-size:22px; font-weight:800; letter-spacing:.2px; margin:4px 0 0; }
.server-card .status{ font-size:12px; color:#a7f3d0; display:flex; align-items:center; gap:6px; margin:0; }
.server-card .status .s-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25); }
.pills{ display:flex; gap:6px; justify-content:center; margin-top:6px; flex-wrap:wrap; }
.pill{ font-size:11px; padding:4px 8px; border-radius:999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.26); color:#fff; }

.server-card.red{ background: linear-gradient(135deg, #ef4444 0%, #b91c1c 55%, #8b1c1c 100%); }
.server-card.purple{ background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); }
.server-card.indigo{ background: linear-gradient(135deg, #7c83ff 0%, #4338ca 60%, #2e1065 100%); }

/* Panels */
.main{ padding: 16px; }
.panel{
  width:min(900px, 92vw); margin: clamp(20px, 9vh, 64px) auto;
  background:#fff; color:#0b1220; border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,.28);
}
.panel-head{ display:flex; align-items:center; justify-content:flex-end; gap:12px; padding: 16px 18px; border-bottom:1px solid #eee; }
.panel-title{ font-size: clamp(24px, 3vw, 32px); font-weight:800; color:#1B1B1B; text-align:center; margin: 8px 0 6px 0; }
.panel-subtitle{ color:#393B3D; text-align:center; margin: 0 0 10px 0; }
.panel-body{ padding: 18px; }

.panel-form{ margin-top: 12px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.avatar-row{ display:flex; justify-content:center; margin-bottom:10px; }
.avatar-wrap{ width:72px; height:72px; border-radius:999px; overflow:hidden; border:2px solid #e5e7eb; box-shadow:0 10px 20px rgba(0,0,0,.08); display:none; }
.avatar-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }

.input-wrap{ position:relative; width:min(720px,92%); }
.input-wrap .input-icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#898989;
  background: currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><circle cx=\'11\' cy=\'11\' r=\'8\'/><path d=\'m21 21-4.3-4.3\'/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><circle cx=\'11\' cy=\'11\' r=\'8\'/><path d=\'m21 21-4.3-4.3\'/></svg>') center/contain no-repeat;
  pointer-events:none;
}
.input-wrap input{
  width:100%; height:56px; border-radius:14px; padding:0 14px 0 46px; font-size:16px; outline:none;
  background:#fff; color:#393B3D; border:2px solid #DEE1E3;
}
.input-wrap input:focus{ border-color:#00A2FF; box-shadow:0 0 0 4px rgba(0,162,255,.18); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:14px; cursor:pointer; }
.btn.primary{ height:56px; background: var(--brand); color:#fff; font-weight:800; font-size:18px; box-shadow:0 10px 20px rgba(239,68,68,.25); padding:0 18px; }
.btn.primary:hover{ background: var(--brand-dark); }
.btn.ghost{ background:#F2F4F5; color:#1b1b1b; font-weight:700; height:56px; }

.actions{ display:flex; justify-content:center; gap:12px; margin-top:14px; }
.panel .btn.primary{ width: clamp(220px, 60%, 420px); margin-left:auto; margin-right:auto; display:block; }

.metrics{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:18px; }
.metric{ background:#F8F9FA; border:1px solid #DEE1E3; border-radius:14px; padding:12px 10px; text-align:center; }
.metric .big{ font-size:16px; font-weight:800; color:#1B1B1B; }
.metric .small{ color:#6B7280; font-size:12px; }

/* Amount cards */
.amount-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; margin-top:12px; }
.amount-card{ background:#fff; border:2px solid #DEE1E3; border-radius:14px; padding:18px; text-align:center; cursor:pointer; position:relative; }
.amount-card img{ width:32px; height:32px; }
.amount-card .value{ font-size:28px; font-weight:800; color:#1B1B1B; }
.amount-card .unit{ color:#898989; }
.amount-card:hover{ border-color:#ff0000; box-shadow: 0 16px 32px rgba(0,0,0,.12); }
.amount-card:hover .value{ color:#ff0000; }
.amount-card .ribbon{ position:absolute; top:8px; right:-6px; background:#22c55e; color:#031; padding:4px 8px; border-radius: 6px; font-size: 11px; font-weight:700; box-shadow:0 10px 20px rgba(0,0,0,.15); transform: rotate(2deg); }
.amount-card.featured{ border-color:#22c55e; }
.amount-card.selected{ outline: 3px solid #ef4444; }

/* Processing */
.processing-body { text-align:center; padding: 8px 0 6px; }
.processing-mark { width:72px; height:72px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%; background:#FFF4E5; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.processing-mark img { width:40px; height:40px; object-fit:contain; }
.processing-title { font-size: clamp(22px, 3.2vw, 28px); margin: 6px 0 4px; }
.processing-sub   { color:#6b7280; margin:0 0 14px; }
.progress { height: 10px; width: min(560px, 92%); margin: 0 auto 10px; background: rgba(0,0,0,.08); border-radius:999px; overflow:hidden; }
.progress-bar { height:100%; width:0%; background: linear-gradient(90deg,#ef4444,#ef4444); transition: width .45s ease; }
.processing-hint { color:#6b7280; margin: 4px 0 0; }

.verify-mark{width:96px;height:96px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#FFF4E5;margin: 0 auto 10px; }
.verify-mark img{ width:56px; height:56px; object-fit:contain; }
.notice{ background:#FFF4E5; border-left: 4px solid #FFB800; padding: 12px 14px; display:flex; align-items:flex-start; gap:10px; border-radius: 8px; max-width:min(680px,92%); margin: 0 auto; }
.shield{ width:20px; height:20px; margin-top:2px; background:#FFB800;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\'/></svg>') center/contain no-repeat; }
.notice-copy{ color:#855C00; }
.notice-title{ font-weight:600; }
.notice-list{ margin:6px 0; padding-left: 18px; }
.notice-foot{ font-weight:600; }

/* Locker modal (iframe) */
.offers-modal { padding: 0; border: none; width: min(92vw, 900px); max-width: 900px; background: transparent; }
.offers-modal::backdrop { background: rgb(0 0 0 / 65%); }
.modal-card { margin: 0; border-radius: 20px; background: #fff; color: #1b1b1b; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: grid; grid-template-rows: auto auto 1fr auto; max-height: min(85vh, 980px); overflow: hidden; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #eee; }
.modal-head h2 { font-size: clamp(18px, 2.6vw, 22px); margin: 0; }
.icon-btn { margin-left: auto; font-size: 24px; line-height: 1; background: transparent; border: 0; cursor: pointer; color: #666; }
.modal-sub { padding: 12px 18px 0; color: #475467; font-size: 14px; }
.locker-embed { padding: 12px 0 0; }
.locker-embed iframe { width: 100%; height: min(68vh, 760px); border: 0; display: block; background: #fff; }
.modal-foot { padding: 12px 18px 16px; border-top: 1px solid #eee; }
.actions { display: flex; justify-content: center; gap: 10px; }

/* Mobile tweaks */
@media (max-width: 640px){
  .site-header{ padding:10px 12px; gap:8px; }
  .hero{ padding-top: 16px; }
  .server-grid{ grid-template-columns:1fr; gap:14px; padding:0 12px; max-width:520px; margin:0 auto; }
  .server-card{ min-height:150px; padding:18px 16px; }
  .panel{ width:calc(100% - 24px); margin:12px auto; padding:0; border-radius:16px; }
  .panel-body{ padding:16px; }
  .panel-title{ font-size:24px; }
  .panel-subtitle{ font-size:16px; }
  .panel-form input{ height:52px; font-size:16px; }
  .btn{ height:52px; font-size:16px; width:100%; }
  .amount-grid{ grid-template-columns:1fr; gap:12px; }
  .toasts{ right:auto; left:50%; transform:translateX(-50%); bottom:16px; top:auto; }
  .toast{
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  color: #fff; font-weight:700;
  border-radius: 18px; padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 40px rgba(0,0,0,.35);
  font-size: 18px;
  animation: slidein .35s ease, fadeout .35s ease 6.2s forwards;
  pointer-events: none;
}
}

/* --- Pro Processing (centered card) --- */
.pro-proc-bg{ background:
  linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.70)),
  url('https://i.imgur.com/YBYXHXd.jpeg') center/cover fixed no-repeat;
}
.proproc-wrap{ min-height: calc(100vh - 70px); display:grid; place-items:center; padding: 12px; }
.pro-card{ width: min(980px, 92vw); background:#fff; border-radius:32px; box-shadow: 0 30px 80px rgba(0,0,0,.35); padding: 30px 32px; text-align:center; }
.pro-logo{ width:72px; height:72px; margin: 0 auto 18px; display:grid; place-items:center; background:#f6f7fb; border-radius:16px; }
.pro-logo img{ width:46px; height:46px; object-fit:contain; filter: none; }
.pro-progress{ height:12px; width: 100%; background:#e6e8ef; border-radius:999px; overflow:hidden; box-shadow: inset 0 1px 0 rgba(0,0,0,.04); }
.pro-progress-bar{ height:100%; width:0; background: linear-gradient(90deg,#7c3aed,#3b82f6,#06b6d4); transition: width .45s ease; }
.pro-label{ font-size: clamp(18px, 2.6vw, 24px); color:#1b2437; margin-top: 18px; font-weight:700; }
@media (max-width:640px){
  .pro-card{ border-radius:22px; padding: 22px 18px; }
  .pro-logo{ width:56px; height:56px; border-radius:12px; margin-bottom:12px; }
  .pro-logo img{ width:36px; height:36px; }
  .pro-progress{ height:10px; }
  .pro-label{ font-size:18px; }
}

.ticon{ opacity:.9; color:#88a7ff; flex:0 0 auto; }
.toast strong{ font-weight:800; }

.toast.hide{ opacity:0; transform: translateY(-4px); transition: .45s ease; }

/* Online fake user chip */
.online-chip{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border: 1.5px solid rgba(255,255,255,.28); border-radius:16px; padding:8px 12px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28); font-size:13px;
}
.online-chip .ico{ color:#76a7ff; display:grid; place-items:center; }
.online-chip.pop{ animation: popin .35s ease; }
@keyframes popin{ 0%{ transform: translateY(-4px); opacity:.6; } 100%{ transform:none; opacity:1; } }