:root {
  --bg: radial-gradient(1100px 700px at 15% -10%, #1b214f 0%, transparent 55%),
    radial-gradient(900px 700px at 120% 110%, #3a1d5e 0%, transparent 55%),
    linear-gradient(180deg, #090d17, #0b1020);
  --panel: linear-gradient(180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.05));
  --panel-strong: linear-gradient(180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.06));
  --stroke: rgba(255, 255, 255, 0.14);
  --txt: #eef1ff;
  --txt2: #e6ebff;
  --mut: #a7b0d6;
  --brand: #7aa8ff;
  --brand2: #9c7dff;
  --accent: #67e7d6;
  --warn: #ffd166;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  --blur: 16px;
  --r: 16px;
  --r-sm: 12px;
  --rx: 22px;
  --fz-hero: 20px;
  --fz: 15px;
  --fz-sm: 12px;
  --font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

body {
  align-items: center;
  background: var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--txt);
  display: flex;
  font-family: var(--font-family);
  min-height:100vh ;
  justify-content: center;
  margin: 0;
  width: 100vw;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  padding: 1rem;
  margin: 1rem;
  position: relative;
  width: 100%;
  max-width: 600px;
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--rx);
  box-shadow: var(--shadow);
}

.header {
  display: flex;
  gap: 10px;
}

.header .icon-box {
  flex: 0 0 40px;
  align-items: center;

  display: flex;
  font-size: 25px;
  justify-content: center;
}

.header .icon-box>div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  box-shadow: 0 10px 28px rgba(124, 140, 255, 0.45);
  background: conic-gradient(from 0deg,
      var(--brand),
      var(--brand2),
      #6ee7f5,
      var(--brand));
}

.header hgroup h1 {
  /* letter-spacing: .1rem; */
  font-size: var(--fz-hero);
  font-weight: 600;
}

.header hgroup h2 {
  color: var(--mut);
  font-size: var(--fz-sm);
  font-weight: 400;
}

hr {
  background-image: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent);
  border: none;
  height: 0.8px;
  /* margin: -10px; */
}

.subtitle-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subtitle {
  display: flex;
  flex-direction: column;
  font-size: var(--fz);
  gap: .5rem;
}

.subtitle li {
  align-items: flex-start;
  color: var(--txt2);
  display: flex;
  gap: 5px;
  list-style: none;
}

.subtitle li i {
  flex: 0 0 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-radius: 3px;
  display: block;
  height: 9px;
  transform: translateY(5px);
  width: 9px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.turnstile-slot {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

form label {
  color: var(--txt2);
  display: flex;
  flex-direction: column;
  font-size: var(--fz);
  gap: 5px;
}

form input {
  background: var(--panel-strong);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  color: var(--txt2);
  font-family: var(--font-family);
  font-size: var(--fz);
  outline: none;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

form input::-moz-placeholder {
  color: var(--mut);
}

form input::placeholder {
  color: var(--mut);
}

form button {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: none;
  border-radius: var(--r-sm);
  box-shadow: 0 3px 28px rgba(124, 140, 255, 0.5);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--fz);
  font-weight: 600;
  letter-spacing: 0.1rem;
  padding: 10px;
  transition: background 0.3s ease;
}

form button:hover {
  background: linear-gradient(135deg, var(--brand2), var(--brand));
  box-shadow: 0 3px 25px var(--brand2);
}

form button span {
  display: block;
  transform: translateX(-0.5rem);
}

.notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: -5px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
  background: var(--panel-strong);
  color: var(--txt);
}

.notice--hidden {
  display: none;
}

.notice--success {
  border-color: rgba(103, 231, 214, 0.55);
}

.notice--error {
  border-color: rgba(255, 110, 110, 0.55);
}

.notice--warn {
  border-color: rgba(255, 209, 102, 0.55);
}

.notice--info {
  border-color: rgba(160, 175, 255, 0.45);
}

.notice__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.notice__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notice__title {
  margin: 0;
  font-size: var(--fz);
  font-weight: 600;
}

.notice__text,
.notice__detail {
  margin: 0;
  font-size: var(--fz-sm);
  color: var(--txt2);
}

.notice__detail {
  white-space: pre-wrap;
  word-break: break-word;
}

input[aria-invalid="true"] {
  border-color: rgba(255, 110, 110, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 110, 110, 0.3);
}

.sla-0 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
  color: var(--brand);
  text-decoration: underline dotted;
  outline: none;
  text-underline-offset: 2px;
}

.sla-0::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  width: min(18em, 80vw);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 20, 35, 0.95);
  color: var(--txt2);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  font-size: var(--fz-sm);
  line-height: 1.4;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  text-underline-offset: 2px;
}

.sla-0::after {
  content: "“0% SLA” 通常是指没有服务级别协议（Service Level Agreement），意味着服务提供商不对服务质量、可用性等做出任何书面承诺。";
}

.sla-0::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%) translateY(4px) rotate(45deg);
  background: rgba(15, 20, 35, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9;
}

.sla-0:hover::after,
.sla-0:focus-visible::after,
.no-sla:hover::after,
.no-sla:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sla-0:hover::before,
.sla-0:focus-visible::before,
.no-sla:hover::before,
.no-sla:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px) rotate(45deg);
}

.fff {
  color: #fff;
}

.bold {
  font-weight: bold;
}

.blue {
  color: #7EA2FF;
}

.warn {
  text-align: center;
  font-size: var(--fz-sm);
  color: var(--mut);
  margin: -0.5rem;
}