:root {
  color-scheme: dark;
  --portal-bg: #0f1d1a;
  --portal-bg-2: #132622;
  --portal-surface: rgba(19, 31, 28, 0.84);
  --portal-border: rgba(177, 196, 188, 0.12);
  --portal-text: #eff9f4;
  --portal-muted: #9cb1aa;
  --portal-accent: #85e7b9;
  --portal-accent-2: #ffd36d;
  --portal-accent-3: #88a7ff;
  --portal-shadow: 0 28px 92px rgba(0, 0, 0, 0.36);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.portal-page {
  margin: 0;
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--portal-text);
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 12%, rgba(133, 231, 185, 0.16), transparent 22%),
    radial-gradient(circle at 82% 10%, rgba(136, 167, 255, 0.14), transparent 22%),
    linear-gradient(180deg, var(--portal-bg), var(--portal-bg-2));
}

a { color: inherit; text-decoration: none; }

.portal-skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 20;
  padding: 0.75rem 1rem; border-radius: 999px; background: #fff; color: #111;
  transition: top 0.2s ease;
}
.portal-skip:focus { top: 1rem; }

.portal-header {
  position: sticky; top: 0; z-index: 15;
  background: rgba(15, 29, 26, 0.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(177, 196, 188, 0.1);
}

.portal-shell {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  min-height: 4.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.portal-brand { display: inline-flex; align-items: center; gap: 0.85rem; }
.portal-mark {
  width: 2.9rem; aspect-ratio: 1; border-radius: 1rem;
  background: linear-gradient(145deg, rgba(133, 231, 185, 0.14), rgba(136, 167, 255, 0.12));
  border: 1px solid rgba(177, 196, 188, 0.14); position: relative;
}
.portal-mark span:first-child {
  position: absolute; left: 0.56rem; top: 0.58rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--portal-accent);
}
.portal-mark span:last-child {
  position: absolute; right: 0.48rem; bottom: 0.56rem; width: 0.94rem; height: 0.28rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--portal-accent-3), var(--portal-accent-2));
}
.portal-brand strong { display: block; font-size: 1rem; }
.portal-brand small { display: block; color: var(--portal-muted); }

.portal-nav { display: flex; align-items: center; gap: 1.15rem; }
.portal-nav a { color: var(--portal-muted); font-size: 0.95rem; }

.portal-menu {
  display: none; width: 3rem; height: 3rem; border: 1px solid var(--portal-border); border-radius: 999px;
  background: rgba(255,255,255,.06); align-items: center; justify-content: center; flex-direction: column; gap: .22rem;
}
.portal-menu span { width: 1rem; height: 1.5px; border-radius: 999px; background: #fff; }

.portal-hero, .portal-entries, .portal-devices, .portal-issues, .portal-recovery, .portal-faq, .portal-footer {
  width: min(1200px, calc(100% - 2rem)); margin: 0 auto;
}

.portal-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.96fr); gap: 2rem; align-items: center;
  padding: 4rem 0 2rem;
}
.portal-eyebrow, .portal-section-kicker {
  margin: 0 0 0.85rem; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--portal-muted);
}
.portal-copy h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: .96; letter-spacing: -.07em; }
.portal-copy h1 span { display: block; }
.portal-lead {
  margin: 1.35rem 0 0; max-width: 38rem; color: var(--portal-muted); line-height: 1.88; font-size: 1.03rem;
}
.portal-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.portal-button {
  min-height: 3.25rem; padding: .8rem 1.25rem; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; gap: .5rem; border: 1px solid transparent; font-weight: 700;
}
.portal-button-primary {
  background: linear-gradient(135deg, #effaf2, #baf4d8); color: #0f1d1a; box-shadow: 0 18px 34px rgba(133, 231, 185, .12);
}
.portal-button-secondary { background: rgba(255,255,255,.04); border-color: var(--portal-border); }
.portal-note { margin-top: 1rem; color: var(--portal-muted); }

.portal-vault {
  position: relative; min-height: 560px; border-radius: 2rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(133, 231, 185, 0.12), transparent 22%),
    radial-gradient(circle at 78% 16%, rgba(136, 167, 255, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(19, 31, 28, 0.92), rgba(12, 22, 19, 0.96));
  border: 1px solid rgba(177, 196, 188, 0.12); box-shadow: var(--portal-shadow); overflow: hidden;
}
.portal-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(136, 167, 255, 0.18); }
.portal-ring-a { width: 20rem; height: 20rem; right: 1.8rem; top: 1.8rem; }
.portal-ring-b { width: 13rem; height: 13rem; left: 1.6rem; bottom: 1.6rem; }
.portal-gate {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(72%, 320px); min-height: 260px; border-radius: 1.8rem; padding: 1.5rem;
  background: rgba(255,255,255,.92); color: #10211c; border: 1px solid rgba(177, 196, 188, 0.16);
  box-shadow: 0 18px 32px rgba(0,0,0,.14); display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.portal-gate span {
  display: inline-flex; width: fit-content; align-self: center; padding: .3rem .65rem; border-radius: 999px;
  background: rgba(133, 231, 185, 0.14); color: #2f8b61; font-size: .8rem;
}
.portal-gate strong { margin-top: 1rem; font-size: 1.55rem; }
.portal-gate p { margin: .75rem 0 0; color: #5d6661; line-height: 1.8; }
.portal-chip {
  position: absolute; padding: .45rem .75rem; border-radius: 999px; background: rgba(255,255,255,.08);
  color: #fff; letter-spacing: .14em; font-size: .8rem;
}
.portal-chip-top { top: 2rem; left: 2rem; }
.portal-chip-bottom { right: 2rem; bottom: 2rem; }

.portal-entries {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; padding: 1rem 0 1.2rem;
}
.portal-entry-card {
  padding: 1.25rem; border-radius: 1.35rem; background: rgba(255,255,255,.05); border: 1px solid var(--portal-border);
  box-shadow: 0 16px 28px rgba(0,0,0,.12);
}
.portal-entry-card.is-active { background: linear-gradient(180deg, rgba(133,231,185,.1), rgba(255,255,255,.04)); }
.portal-entry-card span {
  display: inline-flex; padding: .28rem .6rem; border-radius: 999px; background: rgba(133,231,185,.12); color: var(--portal-accent);
}
.portal-entry-card h2 { margin: .85rem 0 .45rem; }
.portal-entry-card p { margin: 0; color: var(--portal-muted); line-height: 1.8; }
.portal-entry-card a { display: inline-flex; gap: .45rem; margin-top: .95rem; color: var(--portal-accent); font-weight: 700; }

.portal-devices {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(280px, .92fr); gap: 1rem; padding: 1rem 0 1.2rem;
}
.portal-device-card, .portal-device-panel {
  border-radius: 1.35rem; background: rgba(255,255,255,.05); border: 1px solid var(--portal-border);
  box-shadow: 0 16px 28px rgba(0,0,0,.12); padding: 1.35rem;
}
.portal-device-card h2, .portal-issues-head h2, .portal-faq-head h2 { margin: 0; font-size: clamp(1.55rem, 2.2vw, 2.35rem); }
.portal-device-card p { color: var(--portal-muted); line-height: 1.85; }
.portal-device-row {
  display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-top: 1px solid rgba(177,196,188,.1);
}
.portal-device-row:first-child { border-top: 0; }
.portal-device-row span { color: var(--portal-muted); }

.portal-issues { padding: 1rem 0 1.2rem; }
.portal-issue-grid { display: flex; flex-wrap: wrap; gap: .75rem; }
.portal-issue-chip {
  border: 1px solid var(--portal-border); background: rgba(255,255,255,.04); color: var(--portal-text); border-radius: 999px;
  padding: .8rem 1rem; font: inherit; font-weight: 700;
}
.portal-issue-chip.is-active { background: linear-gradient(135deg, rgba(133,231,185,.16), rgba(136,167,255,.14)); }
.portal-issue-detail {
  margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 1.25rem; background: rgba(255,255,255,.04);
  border: 1px solid var(--portal-border); color: var(--portal-muted); line-height: 1.85;
}

.portal-recovery {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; padding: 1rem 0 1.2rem;
}
.portal-recovery-card {
  padding: 1.1rem; border-radius: 1.2rem; background: rgba(255,255,255,.04); border: 1px solid var(--portal-border);
}
.portal-recovery-card span { color: var(--portal-accent); letter-spacing: .18em; font-size: .8rem; }
.portal-recovery-card h3 { margin: .7rem 0 .45rem; }
.portal-recovery-card p { margin: 0; color: var(--portal-muted); line-height: 1.8; }

.portal-faq { padding: 1rem 0 2rem; }
.portal-faq-head { margin-bottom: 1rem; }
.portal-faq-list { display: grid; gap: .9rem; }
.portal-faq-item {
  border-radius: 1.2rem; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid var(--portal-border);
}
.portal-faq-item summary { cursor: pointer; list-style: none; padding: 1.05rem 1.1rem; font-weight: 700; }
.portal-faq-item summary::-webkit-details-marker { display: none; }
.portal-faq-item p { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--portal-muted); line-height: 1.85; }

.portal-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0 2.4rem; color: var(--portal-muted);
}
.portal-footer strong { color: var(--portal-text); }
.portal-footer p { margin: .35rem 0 0; }

@media (max-width: 1100px) {
  .portal-hero, .portal-devices { grid-template-columns: 1fr; }
  .portal-entries, .portal-recovery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .portal-nav { display: none; }
  .portal-menu { display: inline-flex; }
  .portal-nav.is-open {
    display: flex; position: absolute; left: 1rem; right: 1rem; top: 4.7rem; flex-direction: column; padding: 1rem;
    border-radius: 1rem; background: rgba(15,29,26,.98); border: 1px solid var(--portal-border); box-shadow: var(--portal-shadow);
  }
  .portal-entries, .portal-recovery { grid-template-columns: 1fr; }
  .portal-hero { padding-top: 2.4rem; }
}
@media (max-width: 560px) {
  .portal-shell { width: min(100%, calc(100% - 1rem)); }
  .portal-hero, .portal-entries, .portal-devices, .portal-issues, .portal-recovery, .portal-faq, .portal-footer {
    width: calc(100% - 1rem);
  }
  .portal-copy h1 { font-size: clamp(2.2rem, 13vw, 3.7rem); }
  .portal-footer { flex-direction: column; align-items: flex-start; }
}