/* =====================================================================
   STOCKDROP — styles
   Dark, minimal, terminal-inspired. Mobile-first.
   ===================================================================== */

:root{
  --bg: #060706;
  --bg-raised: #0b0d0b;
  --line: rgba(255,255,255,0.10);
  --line-soft: rgba(255,255,255,0.06);
  --text: #F1F1EC;
  --text-dim: #8B8D87;
  --text-dimmer: #55564F;
  --green: #7BE38A;
  --green-dim: rgba(123,227,138,0.16);
  --green-text: #A9EFB2;
  --red-text: #E28A8A;
  --red-dim: rgba(226,138,138,0.14);
  --radius: 3px;
  --maxw: 700px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0.01em;
}

a{ color:inherit; text-decoration:none; }
::selection{ background:var(--green-dim); color:var(--green-text); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* ---------- header ---------- */

header{
  position:sticky; top:0; z-index:50;
  background:rgba(6,7,6,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:13px 20px;
  display:flex; align-items:center; justify-content:space-between;
}

.brand{ display:flex; align-items:center; gap:9px; }
.brand img{ width:24px; height:24px; object-fit:contain; display:block; }
.brand span{ font-weight:700; font-size:15px; letter-spacing:0.01em; }

nav.desktop-nav{ display:flex; align-items:center; gap:26px; }
nav.desktop-nav a{ font-size:13px; color:var(--text-dim); transition:color .15s ease; }
nav.desktop-nav a:hover{ color:var(--text); }

.menu-btn{
  display:none; background:none; border:1px solid var(--line); color:var(--text);
  width:32px; height:32px; border-radius:var(--radius); font-size:16px; cursor:pointer;
}

.mobile-nav{ display:none; flex-direction:column; border-bottom:1px solid var(--line); background:var(--bg); }
.mobile-nav.open{ display:flex; }
.mobile-nav a{ padding:13px 20px; font-size:13px; color:var(--text-dim); border-top:1px solid var(--line-soft); }

@media (max-width:640px){
  nav.desktop-nav{ display:none; }
  .menu-btn{ display:block; }
}

/* ---------- hero ---------- */

.hero{ padding:60px 20px 40px; text-align:center; }

.hero-mark{
  font-size:13px; color:var(--green-text); letter-spacing:0.14em;
  text-transform:uppercase; margin-bottom:18px; opacity:0.9;
}

.hero h1{
  font-size:clamp(26px, 6vw, 38px); font-weight:700; line-height:1.28;
  letter-spacing:-0.01em; max-width:480px; margin:0 auto;
}

.hero p.desc{
  max-width:400px; margin:18px auto 0; color:var(--text-dim);
  font-size:13.5px; line-height:1.7; white-space:pre-line;
}

.network-label{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:22px; font-size:12px; color:var(--text-dimmer);
  border:1px solid var(--line); padding:6px 12px; border-radius:var(--radius);
}

/* ---------- generic ---------- */

section{ padding:44px 20px; border-top:1px solid var(--line); }

.eyebrow{
  font-size:11px; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--text-dimmer); margin-bottom:16px;
}

.section-title{
  font-size:13px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text); margin-bottom:20px;
}

.dot{ width:6px; height:6px; border-radius:50%; background:var(--text-dimmer); flex-shrink:0; }
.dot.live{ background:var(--green); box-shadow:0 0 0 3px var(--green-dim); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.dot.live{ animation:pulse 2.4s ease-in-out infinite; }

/* ---------- claim card ---------- */

.claim-card{
  max-width:var(--maxw); margin:0 auto; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--bg-raised); padding:22px;
}

.claim-card-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}
.claim-card-head .section-title{ margin-bottom:0; }

.reward-line{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px dashed var(--line);
}
.reward-line .sym{ font-size:20px; font-weight:700; }
.reward-line .amt{ font-size:20px; font-weight:700; color:var(--green-text); }

.meta-row{
  display:flex; gap:18px; font-size:11.5px; color:var(--text-dimmer);
  margin-bottom:20px; flex-wrap:wrap;
}
.meta-row span b{ color:var(--text-dim); font-weight:600; }

label.field-label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-dimmer); margin-bottom:8px;
}

input#walletInput{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
  font-family:inherit; font-size:13px; padding:12px 13px; border-radius:var(--radius);
  outline:none; transition:border-color .15s ease;
}
input#walletInput:focus{ border-color:rgba(123,227,138,0.4); }
input#walletInput::placeholder{ color:var(--text-dimmer); }

.input-error{
  font-size:11.5px; color:var(--red-text); margin-top:8px; display:none;
}
.input-error.show{ display:block; }

.hold-req{
  font-size:12px; color:var(--text-dimmer); margin-top:10px; margin-bottom:20px;
}
.hold-req b{ color:var(--text-dim); }

.btn{
  display:inline-block; font-family:inherit; font-size:14px; font-weight:600;
  letter-spacing:0.01em; padding:13px 26px; border:1px solid var(--green);
  color:var(--green-text); background:transparent; border-radius:var(--radius);
  cursor:pointer; transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.btn:hover{ background:var(--green-dim); }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }
.btn-full{ width:100%; }

/* ---------- eligibility result panel ---------- */

.result-panel{
  margin-top:18px; padding:16px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--bg); display:none;
}
.result-panel.show{ display:block; }

.result-panel .result-title{
  font-size:13px; font-weight:700; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.result-panel.state-eligible .result-title{ color:var(--green-text); }
.result-panel.state-not-eligible .result-title,
.result-panel.state-claimed .result-title,
.result-panel.state-empty .result-title{ color:var(--red-text); }

.result-panel p{ font-size:12.5px; color:var(--text-dim); line-height:1.6; }

.result-row{
  display:flex; justify-content:space-between; font-size:12.5px;
  padding:8px 0; border-bottom:1px dashed var(--line-soft);
}
.result-row:last-of-type{ border-bottom:none; }
.result-row .label{ color:var(--text-dim); }
.result-row .value{ color:var(--text); font-weight:600; }

.result-caption{
  font-size:10.5px; color:var(--text-dimmer); margin-top:12px;
  border-top:1px solid var(--line-soft); padding-top:10px;
}

.claim-note{ text-align:center; font-size:11px; color:var(--text-dimmer); margin-top:14px; }

/* ---------- claim history ---------- */

.claim-history-head{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto 20px;
}
.claim-history-head .section-title{ margin-bottom:0; }

.history-summary{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px dashed var(--line);
  font-size:12.5px;
}
.history-summary .label{ color:var(--text-dim); }
.history-summary .value{ font-weight:700; font-size:14px; }

.history-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft);
  font-size:12.5px;
}
.history-row:last-child{ border-bottom:none; }
.history-row .addr{ color:var(--text); font-weight:600; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-row .amt{ color:var(--green-text); font-weight:600; flex-shrink:0; }
.history-row .ago{ color:var(--text-dimmer); flex-shrink:0; width:64px; text-align:right; }

/* ---------- current drop / stat blocks ---------- */

.stat-card{
  max-width:var(--maxw); margin:0 auto; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--bg-raised); padding:20px;
}

.stat-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.stat-head .sym{ font-size:16px; font-weight:700; }
.status-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11px;
  letter-spacing:0.08em; color:var(--green-text); border:1px solid var(--line);
  padding:4px 9px; border-radius:var(--radius);
}
.status-badge:has(.dot:not(.live)){ color:var(--text-dimmer); }

.stat-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.stat-cell{ border-top:1px solid var(--line-soft); padding-top:10px; }
.stat-cell .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dimmer); margin-bottom:5px; }
.stat-cell .v{ font-size:15px; font-weight:700; }
.stat-cell .v.accent{ color:var(--green-text); }

/* ---------- next session ---------- */

.next-session{
  max-width:var(--maxw); margin:0 auto; border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; display:flex;
  align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.next-session .left .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dimmer); margin-bottom:6px; }
.next-session .left .v{ font-size:12.5px; color:var(--text-dim); }
.next-session .timer{ font-size:22px; font-weight:700; color:var(--green-text); font-variant-numeric:tabular-nums; }

/* ---------- drop status strip ---------- */

.status-strip{
  max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.status-strip .cell{
  flex:1 1 120px; padding:14px 16px; border-right:1px solid var(--line-soft);
}
.status-strip .cell:last-child{ border-right:none; }
.status-strip .cell .k{ font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dimmer); margin-bottom:6px; }
.status-strip .cell .v{ font-size:13.5px; font-weight:700; }
.status-strip .cell .v.accent{ color:var(--green-text); }

/* ---------- how it works ---------- */

.steps{ max-width:var(--maxw); display:flex; flex-direction:column; }
.step{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.step:last-child{ border-bottom:none; }
.step .num{ font-size:12px; color:var(--text-dimmer); font-weight:700; flex-shrink:0; width:22px; padding-top:2px; }
.step .label{ font-size:14px; font-weight:600; }
.steps-desc{ margin-top:18px; font-size:13px; color:var(--text-dim); max-width:520px; line-height:1.7; }

/* ---------- rules / about ---------- */

.rules-list{ max-width:560px; }
.rules-list li{
  list-style:none; display:flex; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line-soft); font-size:13.5px; color:var(--text-dim); line-height:1.6;
}
.rules-list li:last-child{ border-bottom:none; }
.rules-list li::before{ content:"—"; color:var(--text-dimmer); flex-shrink:0; }

.about p{ max-width:540px; color:var(--text-dim); font-size:14px; line-height:1.8; }


/* ---------- drop token ---------- */

.token-card{
  max-width:var(--maxw); border:1px solid var(--line);
  border-radius:var(--radius); background:var(--bg-raised); padding:18px 20px;
}
.token-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:11px 0; border-bottom:1px solid var(--line-soft);
  font-size:13px;
}
.token-row:last-of-type{ border-bottom:none; }
.token-key{ color:var(--text-dimmer); text-transform:uppercase; letter-spacing:.07em; font-size:10.5px; }
.token-value{ color:var(--text); font-weight:600; text-align:right; }
.token-address-row{ align-items:flex-start; }
.token-address{
  border:0; background:transparent; color:var(--text);
  font:inherit; font-size:11.5px; line-height:1.5; text-align:right;
  max-width:68%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:0; cursor:pointer;
}
.token-address:hover{ color:var(--green-text); }
.token-note{
  margin:15px 0 0; color:var(--green-text);
  font-size:12.5px; line-height:1.6;
}

@media (max-width:560px){
  .token-row{ gap:12px; }
  .token-address{ max-width:62%; }
}

.debug-log-content{
  white-space:pre-wrap;
  word-break:break-word;
  font-size:11px;
  line-height:1.6;
  color:var(--red-text);
  max-height:280px;
  overflow-y:auto;
  margin:0;
  font-family:inherit;
}

/* ---------- footer ---------- */

footer{ padding:36px 20px 48px; border-top:1px solid var(--line); }
.footer-inner{ max-width:var(--maxw); margin:0 auto; }

.footer-brand{ font-weight:700; font-size:15px; margin-bottom:6px; }
.footer-tagline{ font-size:12.5px; color:var(--text-dim); margin-bottom:4px; }
.footer-network{ font-size:11.5px; color:var(--text-dimmer); margin-bottom:20px; }

.footer-links{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.footer-links a{
  font-size:12px; color:var(--text-dim); border:1px solid var(--line);
  padding:6px 12px; border-radius:var(--radius);
}
.footer-links a:hover{ color:var(--text); }

.disclaimer{ font-size:11px; color:var(--text-dimmer); line-height:1.6; max-width:var(--maxw); }