/* ============================================================
   ROOT & RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange:  #f97316;
  --red:     #ef4444;
  --dark:    #080810;
  --dark2:   #0f0f1a;
  --dark3:   #16162a;
  --card-bg: rgba(15, 15, 26, 0.85);
  --border:  rgba(249, 115, 22, 0.25);
  --text:    #f1f5f9;
  --muted:   #94a3b8;
  --success: #22c55e;
  --danger:  #ef4444;
  --glow:    rgba(249, 115, 22, 0.4);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--dark);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  padding: 24px 20px 40px;
}

/* ============================================================
   BACKGROUND
   ============================================================ */
.bg-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

.particle {
  position: absolute; border-radius: 50%; opacity: 0;
  animation: floatUp var(--dur,8s) ease-in var(--delay,0s) infinite;
  background: radial-gradient(circle, var(--orange), transparent);
}
@keyframes floatUp {
  0%   { opacity:0; transform:translateY(100vh) scale(0); }
  10%  { opacity:0.6; }
  90%  { opacity:0.2; }
  100% { opacity:0; transform:translateY(-10vh) scale(1.5); }
}

.orb { position:fixed; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; animation:orbPulse 6s ease-in-out infinite alternate; }
.orb-1 { width:400px;height:400px;top:-100px;left:-100px; background:radial-gradient(circle,rgba(249,115,22,.18),transparent 70%); animation-delay:0s; }
.orb-2 { width:500px;height:500px;bottom:-150px;right:-150px; background:radial-gradient(circle,rgba(239,68,68,.14),transparent 70%); animation-delay:-3s; }
.orb-3 { width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(249,115,22,.06),transparent 70%); animation-delay:-1.5s; }
@keyframes orbPulse { from{transform:scale(1);opacity:.6} to{transform:scale(1.2);opacity:1} }

/* ============================================================
   PAGE WRAP
   ============================================================ */
.page-wrap {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============================================================
   HEADER
   ============================================================ */
.header { display:flex; align-items:center; justify-content:space-between; }

.logo-wrap { display:flex; align-items:center; gap:12px; }

.logo-icon {
  width:44px;height:44px;
  background:linear-gradient(135deg,rgba(249,115,22,.15),rgba(239,68,68,.08));
  border:1px solid var(--border); border-radius:12px;
  display:flex;align-items:center;justify-content:center;padding:6px;
  box-shadow:0 0 20px rgba(249,115,22,.2);
}

.logo-title {
  font-family:'Rajdhani',sans-serif; font-size:1.05rem; font-weight:700;
  background:linear-gradient(90deg,var(--orange),var(--red));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.2; letter-spacing:.04em;
}
.logo-sub { font-size:.68rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase; }

.badge-live {
  display:flex;align-items:center;gap:6px;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);
  color:#4ade80;font-size:.65rem;font-weight:700;letter-spacing:.12em;
  padding:5px 10px;border-radius:20px;
}
.dot-live { width:6px;height:6px;background:#4ade80;border-radius:50%;animation:blink 1.4s ease infinite; }
@keyframes blink { 0%,100%{opacity:1;box-shadow:0 0 6px #4ade80} 50%{opacity:.3;box-shadow:none} }

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* ============================================================
   LEFT CARD
   ============================================================ */
.card {
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:24px;overflow:hidden;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(249,115,22,.08),0 25px 60px rgba(0,0,0,.6),0 0 40px rgba(249,115,22,.08) inset;
  transition:box-shadow .4s;
}
.card:hover { box-shadow:0 0 0 1px rgba(249,115,22,.15),0 30px 70px rgba(0,0,0,.7),0 0 60px rgba(249,115,22,.12) inset; }

.card-inner { padding:32px 28px;display:flex;flex-direction:column;gap:24px; }

.card-shimmer {
  position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.04) 50%,transparent 70%);
  animation:shimmerSweep 5s ease-in-out infinite;pointer-events:none;
}
@keyframes shimmerSweep { 0%{left:-80%} 100%{left:160%} }

/* card header */
.card-header-section { text-align:center; }

.card-logo-icon {
  width:70px;height:70px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(239,68,68,.06));
  border:1.5px solid rgba(249,115,22,.3);border-radius:18px;padding:10px;
  box-shadow:0 0 30px rgba(249,115,22,.25);
  animation:logoGlow 3s ease-in-out infinite alternate;
}
@keyframes logoGlow {
  from{box-shadow:0 0 20px rgba(249,115,22,.2),0 0 40px rgba(249,115,22,.06);transform:translateY(0)}
  to  {box-shadow:0 0 35px rgba(249,115,22,.4),0 0 70px rgba(249,115,22,.15);transform:translateY(-4px)}
}

.card-title {
  font-family:'Rajdhani',sans-serif;font-size:1.8rem;font-weight:700;
  background:linear-gradient(90deg,var(--orange),var(--red),var(--orange));
  background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradShift 4s linear infinite;
}
@keyframes gradShift { 0%{background-position:0%} 100%{background-position:200%} }
.card-desc { color:var(--muted);font-size:.85rem;margin-top:6px;line-height:1.5; }

/* stats */
.stats-row {
  display:flex;align-items:center;
  background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);
  border-radius:14px;padding:14px 20px;
}
.stat-item { flex:1;text-align:center; }
.stat-num  { display:block;font-family:'Rajdhani',sans-serif;font-size:1.15rem;font-weight:700;color:var(--orange); }
.stat-num.online { color:#4ade80;font-size:.8rem;letter-spacing:.08em; }
.stat-label { font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em; }
.stat-divider { width:1px;height:30px;background:rgba(249,115,22,.2); }

/* form */
.form-section { display:flex;flex-direction:column;gap:14px; }

.input-label {
  display:flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;
}

.input-wrap { position:relative; }

.uid-input {
  width:100%;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(249,115,22,.2);border-radius:12px;
  padding:14px 18px;font-family:'Inter',sans-serif;font-size:1rem;
  color:var(--text);outline:none;
  transition:border-color .3s,box-shadow .3s,background .3s;
  letter-spacing:.04em;
}
.uid-input::placeholder { color:rgba(148,163,184,.4); }
.uid-input:focus {
  border-color:var(--orange);background:rgba(249,115,22,.05);
  box-shadow:0 0 0 3px rgba(249,115,22,.12),0 0 20px rgba(249,115,22,.1);
}

/* button */
.add-btn {
  position:relative;width:100%;
  background:linear-gradient(135deg,#f97316,#ef4444);
  border:none;border-radius:14px;padding:15px;
  color:#fff;font-family:'Rajdhani',sans-serif;font-size:1.1rem;
  font-weight:700;letter-spacing:.06em;cursor:pointer;overflow:hidden;
  transition:transform .2s,box-shadow .3s;
  box-shadow:0 4px 20px rgba(249,115,22,.4);
}
.add-btn:hover   { transform:translateY(-2px);box-shadow:0 8px 30px rgba(249,115,22,.55); }
.add-btn:active  { transform:scale(.97); }
.add-btn::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);pointer-events:none; }
.btn-text { display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s; }
.add-btn.loading .btn-text   { opacity:0; }
.add-btn.loading .btn-loader { display:block; }
.btn-loader {
  display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border:2.5px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin { to{transform:translate(-50%,-50%) rotate(360deg)} }

/* result */
.result-box {
  display:none;align-items:center;gap:12px;border-radius:12px;
  padding:14px 18px;border:1.5px solid;
  animation:slideIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideIn { from{opacity:0;transform:translateY(-10px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.result-box.success { background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.3); }
.result-box.error   { background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3); }
.result-icon { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;flex-shrink:0; }
.result-box.success .result-icon { background:rgba(34,197,94,.2);color:#4ade80; }
.result-box.error   .result-icon { background:rgba(239,68,68,.2);color:#f87171; }
.result-msg { font-size:.9rem;line-height:1.4; }
.result-box.success .result-msg { color:#86efac; }
.result-box.error   .result-msg { color:#fca5a5; }

/* ============================================================
   RIGHT PANEL — WHITELIST LOG
   ============================================================ */
.whitelist-panel {
  position: relative;
  background: var(--card-bg);
  border: 1px solid rgba(249,115,22,.2);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(249,115,22,.06), 0 25px 60px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

/* panel header */
.wl-header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(249,115,22,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.wl-title-row { display:flex;align-items:center;gap:10px; }

.wl-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(239,68,68,.08));
  border: 1px solid rgba(249,115,22,.3);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  box-shadow: 0 0 14px rgba(249,115,22,.2);
}

.wl-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  background: linear-gradient(90deg, var(--orange), var(--red));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.wl-meta { display:flex;align-items:center;gap:12px; }

.wl-count {
  font-size: .72rem; font-weight: 600;
  color: var(--orange);
  background: rgba(249,115,22,.1);
  border: 1px solid rgba(249,115,22,.2);
  border-radius: 20px;
  padding: 3px 10px;
}

.wl-refresh {
  display:flex;align-items:center;gap:5px;
  font-size:.68rem;color:var(--muted);letter-spacing:.05em;
}

/* list wrap */
.wl-list-wrap { flex:1;overflow-y:auto;padding:14px 20px; }
.wl-list-wrap::-webkit-scrollbar { width:4px; }
.wl-list-wrap::-webkit-scrollbar-track { background:transparent; }
.wl-list-wrap::-webkit-scrollbar-thumb { background:rgba(249,115,22,.3);border-radius:4px; }

/* empty state */
.wl-empty {
  display: flex;flex-direction:column;align-items:center;justify-content:center;
  height: 300px; gap:12px; color:var(--muted); text-align:center;
}
.wl-empty-icon { opacity:.25; color:var(--orange); }
.wl-empty p  { font-size:.9rem;font-weight:500; }
.wl-empty span { font-size:.75rem;opacity:.6; }

/* UID list */
.wl-list { list-style:none;display:flex;flex-direction:column;gap:8px; }

.wl-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: rgba(249,115,22,.04);
  border: 1px solid rgba(249,115,22,.1);
  border-radius: 12px;
  padding: 12px 16px;
  transition: background .2s, border-color .2s, transform .2s;
  animation: wlSlideIn .4s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
}
.wl-item:hover {
  background: rgba(249,115,22,.08);
  border-color: rgba(249,115,22,.25);
  transform: translateX(3px);
}
.wl-item::before {
  content: '';
  position: absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--orange), var(--red));
  border-radius: 3px 0 0 3px;
}

@keyframes wlSlideIn {
  from { opacity:0;transform:translateX(20px) scale(.96); }
  to   { opacity:1;transform:translateX(0) scale(1); }
}

/* rank badge */
.wl-rank {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, rgba(249,115,22,.2), rgba(239,68,68,.1));
  border: 1px solid rgba(249,115,22,.3);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem; font-weight: 700;
  color: var(--orange);
  flex-shrink: 0;
}

.wl-info { min-width:0; }

.wl-uid {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--text);
  letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wl-time { font-size: .68rem; color: var(--muted); margin-top: 2px; }

.wl-badge {
  flex-shrink: 0;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  padding: 4px 9px; border-radius: 20px;
  background: rgba(34,197,94,.12);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.25);
  text-transform: uppercase;
}

/* NEW badge flash */
.wl-item.is-new .wl-badge {
  background: rgba(249,115,22,.2);
  color: var(--orange);
  border-color: rgba(249,115,22,.4);
  animation: newFlash 1.5s ease-out;
}
@keyframes newFlash {
  0%,50%{ background:rgba(249,115,22,.35); }
  100%  { background:rgba(34,197,94,.12); }
}

/* panel footer */
.wl-footer {
  padding: 12px 24px;
  border-top: 1px solid rgba(249,115,22,.08);
  font-size: .68rem; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}

/* ============================================================
   PAGE FOOTER
   ============================================================ */
.footer { text-align:center;color:var(--muted);font-size:.78rem;line-height:1.6; }
.footer strong { color:var(--orange); }
.footer-sub { font-size:.7rem;opacity:.5; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .columns { grid-template-columns: 1fr; }
  .card-inner { padding:24px 18px; }
  .card-title  { font-size:1.5rem; }
  .whitelist-panel { min-height:340px; }
}