/* Festivenomics shell tokens — SPECIFICATIONS.md v0.1 (2026-07) */
:root{
  --bg:#0A0A0A; --card:#161616; --card2:#1D1D1D; --line:#2A2A2A;
  --txt:#F2F2F2; --dim:#C9C9C9; --mut:#9A9A9A;
  --orange:#FF8A47; --cyan:#64EEFF; --yellow:#FFFA34; --yellow2:#FFFE7B;
  --good:#7DDB7D; --bad:#F09595;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --display:"Space Grotesk",Inter,system-ui,sans-serif;
  --r-sm:8px; --r-md:14px; --r-lg:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--sans); font-weight:400;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}

/* ambient glows — subtle, never loud */
.bg-fx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg-fx::before,.bg-fx::after{content:""; position:absolute; border-radius:50%; filter:blur(100px); opacity:.14}
.bg-fx::before{width:560px;height:560px; top:-180px; right:-140px;
  background:radial-gradient(circle, var(--cyan), transparent 70%)}
.bg-fx::after{width:600px;height:600px; bottom:-240px; left:-180px;
  background:radial-gradient(circle, var(--orange), transparent 70%)}

.wrap{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:0 24px}

/* top bar — the shell bar, dark surface */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 0; border-bottom:1px solid var(--line); margin-bottom:64px}
.brand{display:flex; align-items:center; gap:14px}
.brand-logo{height:34px; width:auto; display:block}
.wordmark{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.14em; color:var(--txt)}
.wm-accent{color:var(--orange)}
.streak{display:inline-block; height:3px; width:46px; border-radius:2px; margin-left:10px;
  background:linear-gradient(90deg, var(--orange), var(--yellow) 55%, var(--cyan))}

/* hero */
.hero{max-width:680px; margin-bottom:56px}
.kicker{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--cyan); margin:0 0 18px}
h1{font-family:var(--display); font-weight:700; font-size:clamp(40px, 6.4vw, 68px);
  line-height:1.04; letter-spacing:-.02em; margin:0 0 22px; text-wrap:balance}
.accent-cyan{color:var(--cyan)}
.accent-orange{color:var(--orange)}
.accent-yellow{color:var(--yellow)}
.lede{color:var(--dim); font-size:18px; max-width:560px; margin:0 0 28px}
.lede strong{color:var(--txt); font-weight:600}

/* card */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:40px; max-width:680px; box-shadow:0 24px 60px rgba(0,0,0,.35)}
.card h2{font-family:var(--display); font-weight:700; font-size:26px; margin:0 0 8px}
.card .sub{color:var(--mut); margin:0 0 28px; font-size:15px}

/* form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-size:13px; font-weight:500; color:var(--dim)}
.field label .req{color:var(--orange)}
input,select,textarea{
  font-family:var(--sans); font-size:15px; color:var(--txt);
  background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; width:100%; transition:border-color .15s, box-shadow .15s}
textarea{resize:vertical; min-height:92px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(100,238,255,.14)}
::placeholder{color:#6b6b6b}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A9A9A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
select:invalid{color:#6b6b6b}
.hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:15px;
  border-radius:var(--r-sm); padding:13px 26px; cursor:pointer;
  border:1px solid transparent; transition:transform .12s, box-shadow .12s, background .12s}
#wlForm .btn{margin-top:26px}
.btn-primary{background:var(--orange); color:#0A0A0A}
.btn-primary:hover{background:#ffa36b; box-shadow:0 6px 22px rgba(255,138,71,.28)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent; color:var(--dim); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--mut); color:var(--txt)}
.btn:focus-visible, a:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.btn:disabled{opacity:.55; cursor:not-allowed}

.form-err{display:none; color:var(--bad); font-size:14px; margin:14px 0 0;
  font-family:var(--mono)}
.form-err.show{display:block}
.form-note{font-family:var(--mono); font-size:12px; color:var(--mut); margin:22px 0 0;
  border-top:1px solid var(--line); padding-top:16px}
.form-note .note-link{color:var(--yellow2); text-decoration:none; border-bottom:1px solid var(--line)}
.form-note .note-link:hover{color:var(--yellow)}

/* success state */
.success{display:none; text-align:left}
.success.show{display:block; animation:rise .35s ease}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.succ-mark{width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(125,219,125,.12); border:1px solid var(--good); margin-bottom:20px}
.succ-mark svg{width:20px; height:20px}
.succ-num{font-family:var(--mono); font-weight:700; font-size:clamp(44px, 8vw, 64px);
  color:var(--cyan); line-height:1; letter-spacing:-.02em}
.succ-num .hash{color:var(--mut); font-weight:400}
.succ-title{font-family:var(--display); font-weight:700; font-size:26px; margin:10px 0 8px}
.succ-copy{color:var(--dim); margin:0 0 6px}
.succ-row{display:flex; gap:26px; margin-top:26px; padding-top:20px;
  border-top:1px solid var(--line); font-size:13px}
.succ-cell b{display:block; font-family:var(--mono); font-weight:400;
  color:var(--yellow2); font-size:15px}
.succ-cell span{color:var(--mut)}

/* footer */
.footer{border-top:1px solid var(--line); margin-top:72px; padding:22px 0 40px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
.footer p{margin:0; font-size:12px; color:var(--mut)}
.footer .mono-num{color:var(--yellow2)}

/* ---------- viewer ---------- */
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin:28px 0}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px}
.stat b{display:block; font-family:var(--mono); font-weight:700; font-size:30px;
  color:var(--cyan); line-height:1.1}
.stat span{font-size:12px; color:var(--mut); letter-spacing:.08em; text-transform:uppercase}
.table-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; margin-bottom:36px}
.table-scroll{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:14px}
table.data th{font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut); text-align:left; padding:12px 18px;
  border-bottom:1px solid var(--line); background:var(--card2)}
table.data td{padding:13px 18px; border-bottom:1px solid var(--line); color:var(--dim)}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:rgba(100,238,255,.03)}
td.mono, .mono{font-family:var(--mono)}
td.ts{font-family:var(--mono); font-size:13px; color:var(--yellow2); white-space:nowrap}
td.email{font-family:var(--mono); color:var(--cyan)}
.tag{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--dim)}
.tag-eo{color:var(--cyan); border-color:rgba(100,238,255,.35)}
.tag-ll{color:var(--orange); border-color:rgba(255,138,71,.35)}
.tag-os{color:var(--yellow); border-color:rgba(255,250,52,.35)}
.tag-all{color:var(--yellow2); border-color:rgba(255,254,123,.4)}
.tag-empty{color:var(--mut)}

/* lock screen */
.lock{min-height:100vh; display:grid; place-items:center; padding:24px}
.lock-card{max-width:420px; width:100%}
.lock .brand{justify-content:center; margin-bottom:6px}
.lock h2{font-family:var(--display); font-weight:700; font-size:22px; margin:0 0 6px; text-align:center}
.lock .sub{color:var(--mut); text-align:center; margin:0 0 24px; font-size:14px}
.toolbar{display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap}

/* responsive */
@media (max-width:640px){
  .topbar{flex-direction:column; align-items:flex-start; margin-bottom:40px}
  .card{padding:28px}
  .form-grid{grid-template-columns:1fr}
  h1{font-size:clamp(34px, 9vw, 46px)}
}

/* reduced motion — spec requirement */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}