:root {
  --bg: #0b0f19;
  --bg2: #0f1b2d;
  --fg: #eaf0ff;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.09);
  --brand: #7cf7c5;
  --brand2: #68a2ff;
  --muted: rgba(234,240,255,0.72);
  --border: rgba(234,240,255,0.14);
  --shadow: 0 18px 60px rgba(0,0,0,0.35);
}
*,
*::before,
*::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(104,162,255,0.28), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgba(124,247,197,0.22), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--fg);
}
.top { padding: 0; background: transparent; border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.nav { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 14px; }
.brand { font-weight: 900; letter-spacing: -0.03em; }
.brand a { color: var(--fg); text-decoration: none; }
.navlinks { display: flex; gap: 10px; flex: 1; justify-content: center; flex-wrap: wrap; }
.navlinks a { color: var(--fg); text-decoration: none; padding: 8px 10px; border-radius: 10px; opacity: 0.88; }
.navlinks a:hover { background: rgba(255,255,255,0.06); opacity: 1; }
.navright { display: flex; gap: 10px; align-items: center; }
.pill { background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; font-size: 12px; color: var(--muted); }

/* Compact header buttons (Dashboard / Logout etc.) */
.navright .btn,
.navright button.copy {
  height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}

/* Center modal (guest click -> login) */
.drawer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}
.drawer.is-open { display: block; }
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
.drawer__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 28px));
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #121c2d, #0c1423);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.drawer__title {
  font-weight: 900;
  letter-spacing: -0.02em;
}
.drawer__close {
  height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  background: rgba(255,255,255,0.10);
  color: var(--fg);
  border: 1px solid var(--border);
}
.drawer__cta {
  width: 100%;
  margin-top: 12px;
  height: 46px;
  border-radius: 14px;
  max-width: 100%;
}

/* Floating user panel on wide screens (does not shrink cards grid) */
/* Park it next to the centered main container (1100px) instead of screen edge */
.floatpanel {
  position: fixed;
  left: calc(50% + 550px + 14px);
  top: 78px;
  width: 360px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}
@media (max-width: 1499px) {
  .floatpanel { display: none !important; }
}

.shareInput {
  width: 100%;
  min-width: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
main { max-width: 1100px; margin: 0 auto; padding: 20px; }
.muted { color: var(--muted); }
.refbox { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 18px; box-shadow: var(--shadow); }
.refbox h2 { margin: 0 0 6px; font-size: 16px; }
.refrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.refrow input {
  flex: 1 1 240px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  background: rgba(0,0,0,0.18);
  color: var(--fg);
}
.refout { margin-top: 10px; }
.refline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.refline code { background: rgba(0,0,0,0.18); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: inline-block; color: var(--fg); }
.copy { background: rgba(255,255,255,0.08); border: 1px solid var(--border); }
.checkrow { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.checkrow input { margin-top: 3px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.thumb { height: 150px; border-radius: 14px; border: 1px solid var(--border); margin-bottom: 12px; overflow: hidden; background: rgba(0,0,0,0.18); position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.placeholder { background: radial-gradient(180px 120px at 40% 40%, rgba(104,162,255,0.25), transparent 70%), rgba(0,0,0,0.18); }
.thumb.locked img { filter: blur(10px) saturate(0.9) contrast(0.9); transform: scale(1.08); }
.thumb.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
}
.card h3 { font-size: 16px; margin: 0 0 8px; line-height: 1.25; }
.price { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.price .now { color: var(--brand); font-weight: 900; font-size: 18px; }
.price .was { color: rgba(234,240,255,0.6); text-decoration: line-through; font-size: 13px; }
.meta { display: none; }
.chip { display: none; }
button, .btn {
  border: 1px solid rgba(0,0,0,0.0);
  border-radius: 12px;
  padding: 11px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  height: 44px;
  background: rgba(255,255,255,0.10);
  color: var(--fg);
}
.btn:visited { color: var(--fg); }

/* Auth visibility baseline (so Login never disappears if JS fails) */
[data-auth="in"] { display: none; }
[data-auth="out"] { display: inline-flex; }

.btn-sm {
  height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}
.btn-primary {
  background: linear-gradient(90deg, #68a2ff, #2b6bff);
  color: #071018;
  box-shadow: 0 10px 26px rgba(43,107,255,0.22);
}
.btn-secondary {
  background: linear-gradient(90deg, #7cf7c5, #25d09a);
  color: #071018;
  box-shadow: 0 10px 26px rgba(37,208,154,0.20);
}
button.copy { color: var(--fg); background: rgba(255,255,255,0.10); border: 1px solid var(--border); font-weight: 800; }
.btn.copy { color: var(--fg); background: rgba(255,255,255,0.10); border: 1px solid var(--border); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0,0,0,0.18); color: var(--muted); font-size: 12px; }
.pulse { animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-1px); opacity: 0.85; } 100% { transform: translateY(0); opacity: 1; } }
.locked { filter: blur(4px); user-select: none; }
#leaderboard { background: rgba(0,0,0,0.18); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; }

.actions {
  margin-top: auto;
  padding-top: 12px;
  justify-content: center;
}
.actions .btn,
.actions button.btn {
  width: min(320px, 100%);
  min-width: 200px;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
tr:hover td { background: rgba(255,255,255,0.04); }

.lbhead { display:flex; gap:12px; justify-content: space-between; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; }
.lbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lbcard { border: 1px solid var(--border); border-radius: 16px; background: rgba(0,0,0,0.18); padding: 12px; }
.lbtop { display:flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rank { font-weight: 900; color: var(--brand); }
.refcode { font-weight: 900; letter-spacing: -0.01em; }
.lbmeta { margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap; }
.kpi { border: 1px solid var(--border); background: rgba(255,255,255,0.06); border-radius: 999px; padding: 5px 8px; font-size: 12px; color: var(--muted); }
.kpi b { color: var(--fg); }

@media (max-width: 720px) {
  .nav { padding: 12px 14px; flex-wrap: wrap; }
  .navlinks { justify-content: flex-start; }
  .navright { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  main { padding: 14px; }
}