:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-synthesis: none;
  --bg: #050817;
  --surface: #070b1a;
  --surface-strong: #0b1021;
  --ink: #f2f6ff;
  --muted: #8794ae;
  --accent: #55d8ff;
  --accent-alt: #9a8cff;
  --line: rgba(172, 194, 230, .16);
  --control: rgba(8, 14, 34, .58);
  --hover: rgba(85, 216, 255, .05);
  --dialog-backdrop: rgba(1, 4, 13, .74);
  --shadow: rgba(0, 0, 0, .48);
}

:root[data-theme="day"] {
  color-scheme: light;
  --bg: #f2f4f1;
  --surface: #f3f5f1;
  --surface-strong: #fafbf8;
  --ink: #172131;
  --muted: #697383;
  --accent: #245fc8;
  --accent-alt: #168c80;
  --line: rgba(45, 63, 85, .18);
  --control: rgba(250, 251, 248, .64);
  --hover: rgba(36, 95, 200, .055);
  --dialog-backdrop: rgba(8, 13, 22, .42);
  --shadow: rgba(41, 52, 67, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--bg); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { letter-spacing: 0; }
.app-shell { min-height: 100vh; overflow: hidden; }

.topbar {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  height: 76px;
  padding: 0 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent), transparent);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; transition: opacity .55s ease; }
.brand-mark, .hero-mark { position: relative; display: block; flex: 0 0 auto; }
.brand-mark { width: 27px; height: 24px; }
.brand-mark i, .hero-mark i { position: absolute; display: block; border-radius: 3px; }
.brand-mark i:nth-child(1), .hero-mark i:nth-child(1) { left: 0; top: 22%; width: 58%; height: 58%; background: #34a97a; }
.brand-mark i:nth-child(2), .hero-mark i:nth-child(2) { right: 0; top: 0; width: 29%; height: 29%; background: #5395de; }
.brand-mark i:nth-child(3), .hero-mark i:nth-child(3) { right: 0; bottom: 0; width: 25%; height: 25%; background: #e6ad3e; }
.topbar-right, .portal-controls, .account-user { display: flex; align-items: center; }
.topbar-right { gap: 18px; }
.portal-controls { gap: 10px; }
.control-button, .account-button {
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.control-button:hover, .control-button[aria-pressed="true"], .account-button:hover { color: var(--ink); border-color: var(--accent); }
.control-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.control-button span, .account-button { font-size: 12px; }
.account-area { min-width: 148px; display: flex; justify-content: flex-end; }
.account-user { gap: 12px; }
.account-identity { display: grid; justify-items: end; gap: 2px; font-size: 12px; }
.account-management-link { color: var(--accent); font-size: 10px; }
.account-management-link:hover { text-decoration: underline; }

.hero { position: relative; width: 100%; height: 100svh; min-height: 720px; overflow: hidden; isolation: isolate; }
#portal-canvas { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; }
.amap-history {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 66.6667vw;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6%);
  transition: opacity 1.15s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.amap-history::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  bottom: 34px;
  left: 0;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(90deg, #030611, transparent);
}
.amap-loaded body[data-scene-phase="map"] .amap-history,
.amap-loaded body[data-scene-phase="title"] .amap-history,
.amap-loaded body[data-scene-phase="ready"] .amap-history {
  opacity: .94;
  transform: translateX(0);
}
.amap-loaded body[data-scene-phase="ready"] .amap-history { pointer-events: auto; }
[data-theme="day"] .amap-history { display: none; }
.map-zoom-controls {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: clamp(18px, 2.2vw, 38px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .25s ease;
}
.map-zoom-controls button {
  width: 38px;
  height: 38px;
  padding: 0;
  color: #dcecff;
  background: rgba(3, 9, 24, .82);
  border: 1px solid rgba(172, 194, 230, .26);
  border-radius: 0;
  cursor: pointer;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  backdrop-filter: blur(8px);
}
.map-zoom-controls button + button { border-top: 0; }
.map-zoom-controls button:hover { color: #fff; border-color: #55d8ff; background: rgba(9, 22, 45, .92); }
.amap-loaded body[data-scene-phase="ready"] .map-zoom-controls { opacity: 1; pointer-events: auto; }
[data-theme="day"] .map-zoom-controls { display: none; }
.history-place { position: relative; display: block; width: 0; height: 0; color: #dcecff; }
.history-place-dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #55d8ff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(85, 216, 255, .16), 0 0 18px rgba(85, 216, 255, .7);
}
.history-place-label {
  position: absolute;
  top: var(--label-y, -29px);
  width: max-content;
  padding: 5px 7px;
  display: grid;
  gap: 1px;
  background: rgba(3, 9, 24, .82);
  border-left: 1px solid rgba(85, 216, 255, .72);
  backdrop-filter: blur(7px);
}
.history-place.is-right .history-place-label { left: 15px; }
.history-place.is-left .history-place-label { right: 15px; }
.history-place-label b { font-size: 10px; font-weight: 600; line-height: 1.2; }
.history-place-label small { color: #899db9; font-size: 8px; line-height: 1.3; }
.history-place.is-next .history-place-dot {
  width: 12px;
  height: 12px;
  left: -6px;
  top: -6px;
  border-color: #fff;
}
.history-place.is-next .history-place-label { color: #fff; border-left-color: #b8eaff; }
.history-place.is-next small { color: #80ddff; }
.history-traveler {
  display: block;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px #fff, 0 0 13px #55d8ff;
}
.scene-shade { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
[data-theme="night"] .scene-shade {
  background:
    linear-gradient(90deg, rgba(3, 6, 17, .76) 0%, rgba(3, 6, 17, .38) 34%, transparent 63%),
    linear-gradient(180deg, rgba(3, 6, 17, .18), transparent 42%, rgba(3, 6, 17, .52)),
    radial-gradient(circle at 66% 45%, transparent 16%, rgba(3, 6, 17, .16) 62%, rgba(3, 6, 17, .64));
}
[data-theme="day"] .scene-shade {
  background:
    radial-gradient(circle at 50% 47%, rgba(247, 248, 245, .84) 0%, rgba(247, 248, 245, .55) 12%, transparent 31%),
    linear-gradient(180deg, rgba(242, 244, 241, .08), transparent 48%, rgba(242, 244, 241, .4));
  transition: background .9s ease;
}
[data-theme="day"].intro-running .scene-shade {
  background:
    radial-gradient(circle at 50% 47%, rgba(247, 248, 245, .12) 0%, rgba(247, 248, 245, .08) 10%, transparent 26%),
    linear-gradient(180deg, rgba(242, 244, 241, .04), transparent 56%, rgba(242, 244, 241, .2));
}
.hero-content {
  position: absolute;
  z-index: 2;
  left: clamp(76px, 10.5vw, 178px);
  top: 45%;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(calc(-50% + 26px));
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.scene-title-ready .hero-content { opacity: 1; transform: translateY(-50%); }
.hero-mark { width: 54px; height: 49px; }
.hero-content h1 { margin: 0; font-size: clamp(62px, 5.6vw, 88px); line-height: 1.05; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
[data-theme="day"] .hero-content { left: 50%; top: 49%; transform: translate(-50%, 26px); }
[data-theme="day"].scene-title-ready .hero-content { transform: translate(-50%, -50%); }
[data-theme="day"] .hero-content h1 { font-size: clamp(82px, 7.4vw, 116px); text-shadow: 0 10px 44px rgba(255, 255, 255, .72); }
[data-theme="day"] .hero-mark { width: 62px; height: 56px; }
.intro-running .brand { opacity: 0; }
.corridor-initials { position: absolute; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; }
.corridor-initial {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 32px;
  padding: 3px 7px;
  color: var(--traveler-color);
  background: rgba(255, 255, 255, .58);
  border: 1px solid color-mix(in srgb, var(--traveler-color) 46%, transparent);
  border-radius: 3px;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--traveler-color) 18%, transparent);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  will-change: transform, opacity;
}
[data-theme="night"] .corridor-initials { display: none; }

.tools-section { min-height: 280px; padding: 72px 7vw 92px; color: var(--ink); background: var(--surface); border-top: 1px solid var(--line); }
.portal-tools-entry { display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(960px,100%); min-height:88px; margin:0 auto; padding:22px 26px; color:#fff; background:#197456; border:1px solid #197456; font-size:19px; font-weight:700; transition:background .18s,transform .18s,box-shadow .18s; }
.portal-tools-entry small { margin-left:auto; color:#d5eee4; font-size:12px; font-weight:400; }
.portal-tools-entry:hover { background:#125d44; box-shadow:0 14px 30px rgba(25,116,86,.22); transform:translateY(-2px); }
.portal-tools-entry span { font-size:24px; }
.tool-catalog { max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--line); }
.catalog-group { display: grid; grid-template-columns: 190px 1fr; border-bottom: 1px solid var(--line); }
.catalog-heading { padding: 30px 20px 30px 0; }
.catalog-heading small { color: var(--accent); font-size: 9px; }
.catalog-heading h2 { margin: 13px 0 0; font-size: 24px; font-weight: 500; }
.catalog-heading p { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.catalog-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.tool-link { min-width: 0; min-height: 136px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: color .2s ease, background .2s ease; }
.tool-link:nth-child(3n) { border-right: 0; }
.tool-link:hover { color: var(--accent); background: var(--hover); }
.tool-link strong { font-size: 15px; font-weight: 500; }
.tool-link em { margin-left: 7px; padding: 3px 6px; color: var(--accent-alt); border: 1px solid color-mix(in srgb, var(--accent-alt) 36%, transparent); font-size: 9px; font-style: normal; vertical-align: 2px; }
.tool-link > span { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; color: var(--muted); }
.tool-link small { max-width: 88%; font-size: 10px; line-height: 1.55; }
.tool-link svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-link.is-unavailable { opacity: .62; cursor: default; }
.empty-tools, .load-error { margin: 0; padding: 32px; color: var(--muted); font-size: 13px; }
.load-error { max-width: 1200px; margin: 0 auto; border: 1px solid var(--line); }

.footer { min-height: 100px; padding: 0 clamp(20px, 7vw, 112px); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); font-size: 11px; }
.footer-records { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 22px; }
.public-security-record { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.public-security-record img { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; }
.footer a:hover { color: var(--ink); }

.login-dialog { width: min(440px, calc(100% - 36px)); padding: 0; color: var(--ink); background: transparent; border: 0; }

/* Primary portal entrance: two theme-specific silhouettes, sharing the portal's
   existing entrance timing while keeping the label compact and unmistakable. */
.hero-tools-entry { position: relative; isolation: isolate; overflow: visible; justify-content: center; width: min(420px, calc(100% - 48px)); min-height: 76px; padding: 18px 36px; border: 0; font-size: 0; letter-spacing: .18em; text-align: center; }
.hero-tools-entry span { display: none; }
.hero-tools-entry::before { content: '进入工具'; position: relative; z-index: 2; font-size: 20px; font-weight: 750; letter-spacing: .2em; }
[data-theme="night"] .hero-tools-entry { color: #eaf7ff; background: #101a3d; border: 1px solid #5ad9ff; clip-path: polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%); box-shadow: 0 0 0 1px rgba(154,140,255,.55), 0 0 28px rgba(85,216,255,.25), inset 0 0 25px rgba(85,216,255,.1); }
[data-theme="night"] .hero-tools-entry::after { display:none; }
[data-theme="day"] .hero-tools-entry { color: #173b68; background: #fbfdff; border: 2px solid #4d82d4; border-radius: 999px; box-shadow: 0 10px 28px rgba(36,95,200,.2), inset 0 0 0 5px rgba(221,235,255,.8); }
[data-theme="day"] .hero-tools-entry::after { display:none; }
@keyframes portal-stars { 0%,100% { opacity:.18; transform:scale(.82); } 50% { opacity:1; transform:scale(1.2); } }
@keyframes portal-ribbon { 0%,100% { transform:rotate(-2deg) scaleX(.96); } 50% { transform:rotate(2deg) scaleX(1.02); } }
[data-theme="night"] .hero-tools-entry::before, [data-theme="day"] .hero-tools-entry::before { animation: portal-label-in .7s cubic-bezier(.2,.8,.2,1) .45s both; }
@keyframes portal-label-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.login-dialog::backdrop { background: var(--dialog-backdrop); backdrop-filter: blur(5px); }
.dialog-card { position: relative; padding: 38px 36px 32px; display: grid; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 28px 80px var(--shadow); }
.close-button { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; color: var(--muted); background: transparent; border: 0; cursor: pointer; font-size: 24px; font-weight: 300; }
.close-button:hover { color: var(--ink); }
.dialog-eyebrow { margin: 0 0 10px; color: var(--accent); font-size: 11px; font-weight: 600; }
.dialog-card h2 { margin: 0; font-size: 24px; font-weight: 600; }
.dialog-copy { margin: 12px 0 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.field-label { margin: 13px 0 7px; color: var(--muted); font-size: 12px; }
.field-input { width: 100%; height: 42px; padding: 0 12px; color: var(--ink); background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--line); border-radius: 4px; outline: none; }
.field-input:focus { border-color: var(--accent); }
.form-error { min-height: 20px; margin: 10px 0; color: #d55858; font-size: 12px; }
.submit-button { height: 42px; color: var(--surface); background: var(--ink); border: 0; border-radius: 4px; cursor: pointer; font-weight: 600; }
.submit-button:disabled { opacity: .56; cursor: wait; }

@media (max-width: 900px) {
  .topbar { height: 68px; padding: 0 18px; }
  .brand { font-size: 16px; }
  .brand-mark { display: none; }
  .topbar-right { gap: 8px; }
  .portal-controls { gap: 6px; }
  .control-button { width: 36px; padding: 0; }
  .control-button span { display: none; }
  .account-area { min-width: auto; }
  .account-identity { display: none; }
  .hero { min-height: 680px; }
  .amap-history { inset: 0; width: 100%; height: 100%; }
  .amap-history::after { width: 8%; }
  .map-zoom-controls { top: 48%; right: 14px; }
  .hero-content, [data-theme="day"] .hero-content { left: 50%; top: 45%; width: calc(100% - 32px); justify-content: center; transform: translate(-50%, 24px); }
  [data-theme="night"] .hero-content { top: 73%; }
  .scene-title-ready .hero-content, [data-theme="day"].scene-title-ready .hero-content { transform: translate(-50%, -50%); }
  .hero-content h1, [data-theme="day"] .hero-content h1 { font-size: clamp(42px, 13vw, 66px); white-space: normal; }
  .hero-mark, [data-theme="day"] .hero-mark { width: 42px; height: 38px; }
  .tools-section { padding: 64px 18px 72px; }
  .catalog-group { grid-template-columns: 1fr; }
  .catalog-heading { padding: 24px 0; }
  .catalog-links { grid-template-columns: 1fr; border-top: 1px solid var(--line); border-left: 0; }
  .tool-link, .tool-link:nth-child(3n) { min-height: 110px; border-right: 0; }
  .footer { min-height: 120px; padding: 24px 18px; align-items: flex-start; flex-direction: column; justify-content: center; }
  .footer-records { align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 12px; }
}

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