@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
:root {
  color-scheme: dark;
  --gold: #d4a037;
  --gold-light: #ffe09a;
  --green: #43f783;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; min-height: 100%; }
html { background: #050505; }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background: radial-gradient(circle at 50% 0%, rgb(212 160 55 / 8%), transparent 35%), #050505;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgb(212 160 55 / 2.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(212 160 55 / 2.5%) 1px, transparent 1px);
  background-size: 60px 60px;
}
#sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffe7a8;
  box-shadow: 0 0 5px rgb(255 225 155 / 70%);
  animation: blink var(--blink) ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.meteor {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--length);
  height: 2px;
  opacity: 0;
  border-radius: 999px;
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgb(212 160 55 / 10%), rgb(255 223 140 / 65%), #fff8d8);
  filter: drop-shadow(0 0 4px rgb(255 220 135 / 50%));
  animation: meteorMove var(--speed) linear var(--delay) infinite;
  will-change: transform, opacity;
}
.meteor::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff8dc;
  box-shadow: 0 0 7px rgb(255 225 145 / 80%);
}
@keyframes meteorMove {
  0% { opacity: 0; transform: translate3d(0, -160px, 0) rotate(var(--angle)); }
  12% { opacity: 1; }
  75% { opacity: .85; }
  100% { opacity: 0; transform: translate3d(var(--move-x), var(--move-y), 0) rotate(var(--angle)); }
}
.page {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 46px 14px;
}
.border-wrap {
  position: relative;
  width: min(100%, 430px);
  padding: 1px;
  border-radius: 26px;
  background: rgb(212 160 55 / 26%);
  isolation: isolate;
}
.border-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  padding: 3px;
  border-radius: 28px;
  background: conic-gradient(from var(--border-angle), transparent 0deg, transparent 310deg, rgb(212 160 55 / 12%) 320deg, rgb(255 224 154 / 60%) 333deg, #fffadc 344deg, rgb(255 224 154 / 80%) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgb(255 225 155 / 90%)) drop-shadow(0 0 15px rgb(212 160 55 / 50%));
  animation: borderRun 4s linear infinite;
  pointer-events: none;
}
@keyframes borderRun { to { --border-angle: 360deg; } }
.card {
  position: relative;
  width: 100%;
  padding: 78px 32px 28px;
  border-radius: 25px;
  text-align: center;
  background: linear-gradient(180deg, #111, #070707);
  box-shadow: 0 25px 65px rgb(0 0 0 / 62%);
}
.status {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: rgb(8 8 8 / 92%);
  border: 1px solid rgb(212 160 55 / 38%);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px rgb(58 243 124 / 90%); }
.status-label { color: #e8d6a8; }
.status-active { color: var(--green); font-weight: 900; }
.status-active[data-state="pending"] { color: var(--gold-light); }
.status-active[data-state="error"] { color: #ffcaca; }
.status:has([data-state="pending"]) .status-dot { background: var(--gold-light); box-shadow: none; }
.status:has([data-state="error"]) .status-dot { background: #ffcaca; box-shadow: none; }
.age {
  position: absolute;
  top: -28px;
  right: 24px;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #050505;
  font-size: 21px;
  font-weight: 900;
  background: linear-gradient(145deg, #ffe09a, #d4a037);
  border: 4px solid #050505;
  box-shadow: 0 0 20px rgb(212 160 55 / 32%);
}
.icon { width: 58px; height: 58px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 17px; color: var(--gold-light); background: rgb(212 160 55 / 7%); border: 1px solid rgb(212 160 55 / 30%); }
.icon svg { width: 34px; height: 34px; }
h1 { margin: 0 0 18px; font-size: clamp(21px, 5vw, 29px); line-height: 1.1; white-space: nowrap; color: var(--gold-light); }
.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 23px; font-size: 12px; }
.links a { color: #b7b0a3; text-decoration: underline; text-underline-offset: 3px; }
button {
  width: 100%;
  padding: 16px 15px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 900 15px Arial, Helvetica, sans-serif;
  color: #050505;
  background: linear-gradient(90deg, #d4a037, #ffe09a);
  transition: transform .15s ease, opacity .15s ease;
}
button svg { width: 20px; height: 20px; flex-shrink: 0; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 2px solid #fff3d2; outline-offset: 4px; }
.loading { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; color: var(--gold-light); font-size: 12px; line-height: 1.5; }
.turnstile-widget { display: flex; justify-content: center; min-width: 0; }
.turnstile-widget:not(:empty) { margin-top: 12px; }
.spinner { width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid rgb(255 224 154 / 25%); border-top-color: var(--gold-light); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error, .no-script { margin: 13px 0 0; padding: 11px 12px; border-radius: 10px; color: #ffcaca; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; background: rgb(100 20 20 / 19%); border: 1px solid rgb(255 90 90 / 22%); }
.divider { display: flex; align-items: center; gap: 13px; margin: 25px 0 20px; color: #aaa295; font-size: 11px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgb(212 160 55 / 30%); }
.captcha-info { color: #b7b0a3; font-size: 13px; }
.provider-notice { margin: 9px 0 20px; color: #aaa295; font-size: 10px; line-height: 1.6; }
footer { color: #aaa295; font-size: 10px; }
@media (max-height: 700px) { .page { padding-top: 38px; padding-bottom: 38px; } }
@media (max-width: 500px) {
  .page { padding: 34px 12px; }
  .card { padding: 76px 20px 24px; }
  .age { width: 58px; height: 58px; top: -24px; right: 16px; font-size: 19px; }
  .status { top: 18px; left: 16px; }
  h1 { font-size: clamp(19px, 6vw, 26px); }
}
@media (max-width: 360px) {
  .status { font-size: 10.5px; gap: 4px; padding: 8px; }
  .status-dot { width: 7px; height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}