:root {
  color-scheme: dark;
  --bg: #071020;
  --panel: rgba(14, 25, 52, .78);
  --panel-strong: #111d3a;
  --line: rgba(159, 184, 255, .16);
  --text: #f4f7ff;
  --muted: #aab6d2;
  --primary: #7c9cff;
  --primary-2: #7f6cff;
  --success: #45d6aa;
  --danger: #ff7d8a;
  --warning: #ffd16a;
  --shadow: 0 30px 90px rgba(0, 0, 0, .42);
  --radius-xl: 30px;
  --radius-lg: 20px;
  --radius-md: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 5%, rgba(58, 99, 215, .24), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(114, 74, 204, .2), transparent 30%),
    linear-gradient(155deg, #071020 0%, #0a1227 54%, #080e1d 100%);
  overflow-x: hidden;
}

button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.ambient {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .18;
  pointer-events: none;
}
.ambient-one { top: -120px; left: -100px; background: #4d7dff; }
.ambient-two { right: -120px; bottom: -120px; background: #7a5cff; }

.page-shell {
  position: relative;
  width: min(1060px, calc(100% - 32px));
  margin: 0 auto;
  padding: 64px 0 32px;
}

.hero-card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 60px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(18, 33, 68, .92), rgba(10, 18, 39, .76));
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,.05), transparent 30%);
  pointer-events: none;
}

.brand-row { display: flex; align-items: center; gap: 18px; position: relative; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(182, 202, 255, .34);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(124,156,255,.35), rgba(127,108,255,.15));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
}
.eyebrow, .result-kicker {
  margin: 0 0 5px;
  color: #9fb4f7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}
h1 { margin: 0; font-size: clamp(31px, 5vw, 52px); line-height: 1.06; letter-spacing: -.04em; }
.lead { position: relative; max-width: 720px; margin: 26px 0 34px; color: var(--muted); font-size: 17px; line-height: 1.8; }

.setup-alert {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 28px;
  padding: 16px;
  border: 1px solid rgba(255, 209, 106, .28);
  border-radius: 16px;
  background: rgba(255, 209, 106, .08);
}
.setup-alert span { color: var(--muted); }
.setup-alert a { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.1); text-decoration: none; }

.validator-form { position: relative; max-width: 700px; }
.validator-form > label { display: block; margin-bottom: 10px; color: #d8e1fa; font-weight: 700; }
.input-wrap { position: relative; }
.input-icon {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: #9fb4f7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
input {
  width: 100%;
  height: 66px;
  padding: 0 56px 0 58px;
  border: 1px solid rgba(166, 187, 245, .22);
  border-radius: 18px;
  outline: none;
  color: var(--text);
  background: rgba(4, 10, 24, .54);
  font-size: clamp(20px, 4vw, 27px);
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
input::placeholder { color: #697796; font-size: 16px; letter-spacing: .03em; }
input:focus { border-color: rgba(124,156,255,.78); box-shadow: 0 0 0 5px rgba(124,156,255,.12); }
input:disabled { opacity: .55; cursor: not-allowed; }
.clear-button {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translateY(-50%) scale(.8);
  border: 0;
  border-radius: 12px;
  color: #b8c4df;
  background: rgba(255,255,255,.07);
  font-size: 24px;
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
}
.clear-button.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.input-help { margin: 9px 0 20px; color: #7f8caa; font-size: 13px; }

.primary-button, .secondary-button {
  min-height: 54px;
  padding: 0 24px;
  border-radius: 15px;
  font-weight: 800;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.primary-button {
  position: relative;
  min-width: 180px;
  border: 0;
  color: #081126;
  background: linear-gradient(110deg, #9bb2ff, #9b8cff);
  box-shadow: 0 14px 32px rgba(108, 112, 255, .26);
}
.primary-button:hover:not(:disabled), .secondary-button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.primary-button:disabled { opacity: .55; cursor: not-allowed; }
.primary-button.compact { min-width: 0; }
.secondary-button { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.045); }
.button-loader {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(6, 15, 34, .25);
  border-top-color: #071020;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.is-loading .button-label { display: none; }
.is-loading .button-loader { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.privacy-strip {
  position: relative;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-top: 34px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}
.shield { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 10px; color: #061a15; background: var(--success); font-weight: 900; }
.privacy-strip strong { display: block; margin-bottom: 3px; }
.privacy-strip p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.info-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(12, 21, 45, .62); backdrop-filter: blur(14px); }
.info-grid span { color: #849cf0; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.info-grid h2 { margin: 18px 0 8px; font-size: 18px; }
.info-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
footer { padding: 25px 8px 0; color: #687590; text-align: center; font-size: 12px; }

.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; visibility: hidden; opacity: 0; transition: .22s ease; }
.modal.is-open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2, 7, 18, .76); backdrop-filter: blur(13px); }
.modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88vh, 850px);
  overflow: auto;
  padding: clamp(25px, 5vw, 42px);
  border: 1px solid rgba(170, 190, 246, .2);
  border-radius: 28px;
  outline: none;
  background: linear-gradient(160deg, #152342, #0c152c 65%);
  box-shadow: 0 35px 120px rgba(0,0,0,.58);
  transform: translateY(16px) scale(.98);
  transition: transform .22s ease;
}
.modal.is-open .modal-panel { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 17px; right: 17px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; color: #c8d2e9; background: rgba(255,255,255,.05); font-size: 27px; }
.result-icon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 22px; border-radius: 20px; font-size: 30px; font-weight: 900; }
.result-icon.valid { color: #05261d; background: var(--success); box-shadow: 0 16px 36px rgba(69,214,170,.22); }
.result-icon.invalid { color: #35070d; background: var(--danger); box-shadow: 0 16px 36px rgba(255,125,138,.2); }
.modal-panel h2 { margin: 0; padding-right: 45px; font-size: clamp(27px, 5vw, 39px); letter-spacing: -.035em; }
.result-message { margin: 12px 0 25px; color: var(--muted); line-height: 1.75; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.detail-card { min-height: 128px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.035); }
.detail-card span { display: block; margin-bottom: 11px; color: #8290ae; font-size: 12px; font-weight: 700; }
.detail-card strong { display: block; font-size: 19px; }
.detail-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.limitations { margin-top: 16px; padding: 20px; border: 1px solid rgba(255,209,106,.18); border-radius: 17px; background: rgba(255,209,106,.055); }
.limitations h3 { margin: 0 0 10px; color: #ffe09a; font-size: 14px; }
.limitations ul { margin: 0; padding-left: 20px; color: #c9c2ad; font-size: 13px; line-height: 1.7; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.modal-open { overflow: hidden; }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 20px, 680px); padding-top: 22px; }
  .hero-card { border-radius: 24px; }
  .info-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .setup-alert { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}