:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --page: #edf4ff;
  --page-deep: #e4eefb;
  --surface: rgba(255, 255, 255, .78);
  --surface-solid: #fff;
  --ink: #26384f;
  --muted: #74849a;
  --line: rgba(86, 121, 168, .18);
  --blue: #397df4;
  --cyan: #20b9d4;
  --green: #24bb6f;
  --danger: #e35e73;
  --scan-progress: 0;
  color: var(--ink);
  background: var(--page);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #071120;
  --page-deep: #0a1729;
  --surface: rgba(13, 27, 47, .84);
  --surface-solid: #0e1d32;
  --ink: #edf5ff;
  --muted: #91a6c0;
  --line: rgba(137, 173, 218, .2);
  --blue: #659cff;
  --cyan: #3bcde0;
  --green: #42d287;
  --danger: #ff7890;
}

* { box-sizing: border-box; }
html { width: 100%; min-width: 320px; min-height: 100%; background: var(--page); }
body {
  width: 100%;
  min-width: 320px;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: linear-gradient(145deg, var(--page), #f5f8fd 56%, #e9f4f4);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
button { font: inherit; }
[hidden] { display: none !important; }

.line-ambient,
.ambient-orb,
.ambient-grid {
  position: fixed;
  pointer-events: none;
}
.line-ambient { z-index: 0; inset: 0; overflow: hidden; }
.line-ambient::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 16% 20%, rgba(70, 130, 245, .12), transparent 32%),
    radial-gradient(circle at 85% 78%, rgba(43, 187, 180, .11), transparent 34%),
    linear-gradient(130deg, rgba(255,255,255,.46), transparent 44% 70%, rgba(255,255,255,.32));
}
.ambient-orb {
  width: min(52vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .45;
  filter: blur(86px);
  transform: translate3d(0,0,0);
  animation: ambient-drift 14s ease-in-out infinite alternate;
}
.ambient-orb-one { top: -22%; left: -13%; background: rgba(79, 132, 245, .22); }
.ambient-orb-two { right: -18%; bottom: -28%; background: rgba(52, 190, 168, .19); animation-direction: alternate-reverse; animation-duration: 17s; }
.ambient-grid {
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(88, 118, 157, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 118, 157, .06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, #000, transparent 76%);
}

.line-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  width: min(1180px, 100%);
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(24px, calc(env(safe-area-inset-top) + 18px))
    max(24px, calc(env(safe-area-inset-right) + 20px))
    max(20px, calc(env(safe-area-inset-bottom) + 14px))
    max(24px, calc(env(safe-area-inset-left) + 20px));
  transition: opacity .42s ease, filter .42s ease, transform .42s cubic-bezier(.22,1,.36,1);
}

.security-card {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(520px, 100%);
  margin: 18px auto;
  padding: clamp(30px, 5vh, 48px) clamp(24px, 5vw, 48px) 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 36px;
  background: var(--surface);
  box-shadow: 0 34px 86px rgba(43, 66, 96, .16), inset 0 1px rgba(255,255,255,.94);
  backdrop-filter: blur(22px) saturate(120%);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  animation: card-arrive .66s .16s cubic-bezier(.22,1,.36,1) forwards;
  transition: border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.security-card::before {
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(57,125,244,.65), rgba(32,185,212,.48), transparent);
}
.security-card::after {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 310px;
  height: 190px;
  border-radius: 50%;
  content: "";
  background: rgba(57,125,244,.08);
  filter: blur(42px);
  transform: translateX(-50%);
  pointer-events: none;
}
.security-card.is-ready { border-color: rgba(36,187,111,.25); box-shadow: 0 34px 86px rgba(43,66,96,.15), 0 0 0 1px rgba(36,187,111,.05) inset; }
.security-card.is-error { border-color: rgba(227,94,115,.25); }

.security-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(57,125,244,.14);
  border-radius: 999px;
  color: #547296;
  background: rgba(237,244,255,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.security-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(36,187,111,.09); }
.security-card h1 { position: relative; z-index: 1; margin: 19px 0 0; color: #24384e; font-size: clamp(28px, 4.1vw, 38px); line-height: 1.18; letter-spacing: .05em; }
.security-subtitle { position: relative; z-index: 1; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.scan-orbit {
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(154px, 28vw, 190px);
  aspect-ratio: 1;
  margin: clamp(24px, 4.5vh, 38px) auto 24px;
  place-items: center;
  border-radius: 50%;
  isolation: isolate;
}
.scan-orbit::before {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  content: "";
  background: conic-gradient(from -90deg, var(--blue) 0 calc(var(--scan-progress) * 1%), rgba(86,121,168,.1) calc(var(--scan-progress) * 1%) 100%);
  filter: drop-shadow(0 6px 11px rgba(57,125,244,.19));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  transition: background .18s linear;
}
.scan-orbit::after {
  position: absolute;
  inset: 14px;
  border: 2px solid transparent;
  border-top-color: var(--cyan);
  border-right-color: rgba(32,185,212,.5);
  border-radius: 50%;
  content: "";
  animation: orbit-spin 3.6s linear infinite;
}
.scan-ring-secondary {
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(57,125,244,.13);
  border-bottom-color: rgba(36,187,111,.65);
  border-radius: 50%;
  animation: orbit-spin 5.2s linear infinite reverse;
}
.scan-core {
  position: relative;
  display: grid;
  width: 98px;
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(242,247,255,.88));
  box-shadow: 0 12px 34px rgba(54,83,123,.12), inset 0 1px #fff;
}
.scan-core strong { color: var(--blue); font-size: 47px; line-height: 1; font-variant-numeric: tabular-nums; }
.scan-core small { margin-top: 5px; color: #91a0b4; font-size: 7px; font-weight: 850; letter-spacing: .2em; }
.security-card.is-ready .scan-orbit::before { background: conic-gradient(var(--green) 0 100%); filter: drop-shadow(0 6px 11px rgba(36,187,111,.18)); }
.security-card.is-ready .scan-orbit::after { border-top-color: var(--green); border-right-color: rgba(36,187,111,.42); animation-duration: 8s; }
.security-card.is-ready .scan-core strong { color: var(--green); font-size: 43px; }
.security-card.is-error .scan-orbit::before { background: conic-gradient(var(--danger) 0 22%, rgba(227,94,115,.1) 22%); }
.security-card.is-error .scan-core strong { color: var(--danger); }

.connection-state {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  gap: 9px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #63758c;
  background: rgba(245,248,253,.66);
  font-size: 11px;
  font-weight: 720;
}
.state-orb { width: 7px; height: 7px; border-radius: 50%; background: #76cc91; box-shadow: 0 0 0 5px rgba(118,204,145,.1); animation: state-pulse 1.3s ease-in-out infinite; }
.connection-state.is-ready { color: #2f7d53; border-color: rgba(36,187,111,.18); background: rgba(232,249,240,.72); }
.connection-state.is-ready .state-orb { background: var(--green); }
.connection-state.is-error { color: #a1495a; border-color: rgba(227,94,115,.18); background: rgba(255,239,242,.68); }
.connection-state.is-error .state-orb { background: var(--danger); }

.scan-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.scan-steps::before { position: absolute; top: 7px; right: 16.5%; left: 16.5%; height: 1px; content: ""; background: var(--line); }
.scan-steps li { position: relative; display: grid; justify-items: center; gap: 7px; color: #a0adbd; font-size: 9px; font-weight: 750; }
.scan-steps li i { z-index: 1; width: 15px; height: 15px; border: 4px solid rgba(255,255,255,.92); border-radius: 50%; background: #cbd5e2; box-shadow: 0 0 0 1px rgba(101,127,163,.13); }
.scan-steps li.is-active { color: var(--blue); }
.scan-steps li.is-active i { background: var(--blue); box-shadow: 0 0 0 1px rgba(57,125,244,.2), 0 0 0 5px rgba(57,125,244,.08); }
.scan-steps li.is-complete { color: #4f8d6a; }
.scan-steps li.is-complete i { background: var(--green); }

.enter-button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  gap: 10px;
  margin: 22px 0 0;
  border: 1px solid rgba(57,125,244,.16);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(110deg, var(--blue), #5f7ff0 56%, var(--cyan));
  box-shadow: 0 12px 28px rgba(57,125,244,.22), inset 0 1px rgba(255,255,255,.25);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .08em;
  cursor: pointer;
  opacity: 1;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.enter-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.enter-button:disabled { color: #8796aa; border-color: var(--line); background: rgba(237,242,249,.72); box-shadow: none; cursor: wait; }
.enter-button:not(:disabled):hover { box-shadow: 0 16px 34px rgba(57,125,244,.28), inset 0 1px rgba(255,255,255,.3); transform: translateY(-1px); }
.enter-button:not(:disabled):active { transform: scale(.985); }
.film-timeline { width: calc(100% - 30px); height: 3px; margin: 16px auto 0; overflow: hidden; border-radius: 999px; background: rgba(90,119,157,.1); }
.film-timeline span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green)); box-shadow: 0 0 10px rgba(32,185,212,.28); transition: width .16s linear; }
.auto-hint { margin: 9px 0 0; color: #98a5b5; font-size: 9px; line-height: 1.5; letter-spacing: .05em; }

.fault-state {
  position: fixed;
  z-index: 5;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  left: max(18px, env(safe-area-inset-left));
  width: min(430px, calc(100% - 36px));
  margin: auto;
  padding: 14px 15px;
  border: 1px solid rgba(227,94,115,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 44px rgba(43,66,96,.15);
  backdrop-filter: blur(16px);
  text-align: center;
}
.fault-state strong, .fault-state span { display: block; }
.fault-state strong { font-size: 12px; }
.fault-state span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.fault-state button { min-height: 38px; margin-top: 9px; padding: 0 17px; border: 1px solid rgba(227,94,115,.18); border-radius: 12px; color: #a1495a; background: #fff2f4; font-size: 10px; font-weight: 800; cursor: pointer; }

.line-footer { display: flex; align-items: center; justify-content: center; gap: 11px; color: rgba(94,112,137,.62); font-size: 8px; font-weight: 760; letter-spacing: .12em; }
.line-footer i { width: 3px; height: 3px; border-radius: 50%; background: rgba(57,125,244,.4); }
.screen-reader-status { position: fixed; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.enter-button:focus-visible, .fault-state button:focus-visible { outline: 3px solid rgba(57,125,244,.25); outline-offset: 3px; }

body.is-leaving .cinema-stage { opacity: 0; filter: blur(9px); transform: scale(1.018); }
body.is-leaving .line-ambient { opacity: .55; transition: opacity .42s ease; }
body.is-suspended * { animation-play-state: paused !important; }

html[data-theme="dark"] body {
  background: linear-gradient(145deg, #071120, #0a1730 56%, #081d27);
}
html[data-theme="dark"] .line-ambient::before {
  background:
    radial-gradient(circle at 16% 20%, rgba(55, 112, 224, .2), transparent 34%),
    radial-gradient(circle at 85% 78%, rgba(34, 166, 159, .16), transparent 36%),
    linear-gradient(130deg, rgba(30,52,85,.25), transparent 44% 70%, rgba(20,54,63,.18));
}
html[data-theme="dark"] .ambient-orb-one { background: rgba(55, 104, 220, .24); }
html[data-theme="dark"] .ambient-orb-two { background: rgba(34, 165, 151, .2); }
html[data-theme="dark"] .ambient-grid {
  opacity: .16;
  background-image:
    linear-gradient(rgba(138,174,220,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,174,220,.08) 1px, transparent 1px);
}
html[data-theme="dark"] .security-card {
  border-color: rgba(147,181,224,.2);
  background: var(--surface);
  box-shadow: 0 36px 92px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05);
}
html[data-theme="dark"] .security-card::after { background: rgba(71,126,235,.11); }
html[data-theme="dark"] .security-card.is-ready {
  border-color: rgba(66,210,135,.28);
  box-shadow: 0 36px 92px rgba(0,0,0,.3), 0 0 0 1px rgba(66,210,135,.06) inset;
}
html[data-theme="dark"] .security-eyebrow {
  color: #adc4df;
  border-color: rgba(101,156,255,.2);
  background: rgba(31,54,86,.55);
}
html[data-theme="dark"] .security-card h1 { color: var(--ink); }
html[data-theme="dark"] .scan-orbit::before {
  background: conic-gradient(from -90deg, var(--blue) 0 calc(var(--scan-progress) * 1%), rgba(137,173,218,.13) calc(var(--scan-progress) * 1%) 100%);
}
html[data-theme="dark"] .scan-ring-secondary { border-color: rgba(137,173,218,.16); border-bottom-color: rgba(66,210,135,.65); }
html[data-theme="dark"] .scan-core {
  border-color: rgba(151,183,225,.16);
  background: linear-gradient(145deg, rgba(28,48,78,.96), rgba(12,27,49,.94));
  box-shadow: 0 14px 38px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.05);
}
html[data-theme="dark"] .scan-core small { color: #8398b2; }
html[data-theme="dark"] .connection-state {
  color: #aec0d6;
  background: rgba(18,38,64,.68);
}
html[data-theme="dark"] .connection-state.is-ready {
  color: #8ee8b6;
  background: rgba(20,67,51,.55);
}
html[data-theme="dark"] .connection-state.is-error {
  color: #ffb0be;
  background: rgba(82,28,44,.58);
}
html[data-theme="dark"] .scan-steps li { color: #71859f; }
html[data-theme="dark"] .scan-steps li i {
  border-color: rgba(14,29,50,.95);
  background: #52657d;
  box-shadow: 0 0 0 1px rgba(145,178,220,.16);
}
html[data-theme="dark"] .scan-steps li.is-active { color: #8cb4ff; }
html[data-theme="dark"] .scan-steps li.is-complete { color: #79dba5; }
html[data-theme="dark"] .enter-button:disabled {
  color: #758aa4;
  background: rgba(24,43,69,.72);
}
html[data-theme="dark"] .film-timeline { background: rgba(137,173,218,.12); }
html[data-theme="dark"] .auto-hint { color: #71849d; }
html[data-theme="dark"] .fault-state {
  border-color: rgba(255,120,144,.22);
  background: rgba(14,29,50,.94);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
html[data-theme="dark"] .fault-state button { color: #ffb0be; background: rgba(82,28,44,.62); }
html[data-theme="dark"] .line-footer { color: rgba(164,184,209,.58); }

@keyframes card-arrive { to { opacity: 1; transform: none; } }
@keyframes ambient-drift { to { opacity: .68; transform: translate3d(7%, 5%, 0) scale(1.08); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes state-pulse { 50% { opacity: .45; transform: scale(.72); } }

@media (max-width: 640px) {
  .ambient-orb { opacity: .3; filter: blur(58px); animation: none; }
  .line-stage { padding: max(16px, calc(env(safe-area-inset-top) + 10px)) max(13px, calc(env(safe-area-inset-right) + 11px)) max(15px, calc(env(safe-area-inset-bottom) + 10px)) max(13px, calc(env(safe-area-inset-left) + 11px)); }
  .security-card { margin: 12px auto; padding: 26px 20px 21px; border-radius: 27px; backdrop-filter: blur(10px); }
  .security-card h1 { margin-top: 16px; font-size: 28px; }
  .security-subtitle { font-size: 11px; }
  .scan-orbit { width: 154px; margin-top: 24px; margin-bottom: 20px; }
  .scan-core { width: 84px; }
  .scan-core strong { font-size: 40px; }
  .security-card.is-ready .scan-core strong { font-size: 37px; }
  .connection-state { min-height: 36px; padding: 0 13px; font-size: 10px; }
  .scan-steps { margin-top: 19px; }
  .enter-button { min-height: 48px; margin-top: 19px; border-radius: 14px; }
  .line-footer { gap: 8px; letter-spacing: .06em; }
}

@media (max-height: 700px) {
  .line-stage { min-height: max(100svh, 600px); min-height: max(100dvh, 600px); }
  .security-card { padding-top: 24px; padding-bottom: 20px; }
  .security-card h1 { margin-top: 13px; }
  .scan-orbit { width: 140px; margin-top: 17px; margin-bottom: 15px; }
  .scan-core { width: 78px; }
  .scan-core strong { font-size: 36px; }
  .scan-steps { margin-top: 16px; }
  .enter-button { min-height: 44px; margin-top: 15px; }
  .film-timeline { margin-top: 11px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  body { overflow-y: auto; }
  .line-stage { min-height: 610px; }
}

@media (prefers-reduced-transparency: reduce) {
  .security-card, .fault-state { background: var(--surface-solid); backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-orb, .scan-orbit::after, .scan-ring-secondary, .state-orb { animation: none !important; }
  .security-card { opacity: 1; transform: none; animation: none; }
  .line-stage, .enter-button { transition-duration: .01ms; }
}