:root {
  color-scheme: dark light;
  --canvas: #020617;
  --surface: #0b1220;
  --surface-raised: #111c2d;
  --ink: #f8fafc;
  --muted: #b3c0d1;
  --faint: #7e8ea3;
  --line: #26354b;
  --accent: #6ee7b7;
  --accent-ink: #032419;
  --accent-soft: rgba(110, 231, 183, .13);
  --radius: 14px;
  --max: 1200px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: radial-gradient(circle at 82% -8%, rgba(30, 78, 80, .36), transparent 31rem), var(--canvas);
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
button, a { font: inherit; }
a { color: inherit; }
.wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 10; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--canvas) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent); backdrop-filter: blur(18px); }
.header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: max-content; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 800 15px/1 Inter, ui-sans-serif, sans-serif; box-shadow: 0 8px 18px rgba(16, 185, 129, .2); }
.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { font-size: 15px; letter-spacing: -.02em; }
.brand-text em { color: var(--muted); font-size: 11px; font-style: normal; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out); }
.site-nav a:hover { color: var(--ink); }
.site-nav .nav-cta { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); padding: 6px 12px; border-radius: 999px; }
.site-nav .nav-cta:hover { background: var(--accent); color: var(--accent-ink); }

.hero { padding: clamp(70px, 9vw, 124px) 0 88px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); gap: clamp(40px, 7vw, 120px); align-items: end; }
.hero-copy { max-width: 720px; }
.hero h1 { max-width: 690px; margin: 0; font-size: clamp(46px, 6vw, 78px); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.hero h1 span { color: var(--accent); }
.hero-sub { max-width: 31rem; margin: 24px 0 28px; color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 750; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.btn:active, .wechat-trigger:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #a7f3d0; box-shadow: 0 10px 24px rgba(16, 185, 129, .2); }
.text-link { color: var(--muted); font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.text-link:hover { color: var(--ink); }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 56px 0 0; border-top: 1px solid var(--line); }
.hero-stats div { padding: 14px 14px 0 0; }
.hero-stats dt { color: var(--faint); font-size: 12px; font-weight: 650; }
.hero-stats dd { margin: 2px 0 0; color: var(--ink); font-family: Inter, ui-sans-serif, sans-serif; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.hero-stats div:last-child dd { color: var(--accent); font-size: 15px; padding-top: 4px; }

.watchlist { position: relative; isolation: isolate; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(17, 28, 45, .88), rgba(11, 18, 32, .76)); box-shadow: 0 22px 54px rgba(0, 0, 0, .2); overflow: hidden; }
.watchlist::before { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; right: -74px; top: -84px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 68%); }
.watchlist h2 { max-width: 16ch; margin: 0; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.22; letter-spacing: -.035em; }
.model-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 24px 0 20px; margin: 0; list-style: none; color: var(--muted); font-size: 13px; }
.model-list li { border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.watchlist-note { max-width: 28ch; margin: 0; color: var(--faint); font-size: 13px; }

.intelligence { padding: 84px 0 96px; }
.list-head { max-width: 660px; }
.list-head h2, .about h2, .submit h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.list-status { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.filters { display: flex; gap: 8px; margin: 30px 0 36px; }
.chip { appearance: none; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); padding: 8px 15px; font-size: 13px; font-weight: 700; cursor: pointer; transition: color .18s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out); }
.chip:hover { border-color: var(--muted); color: var(--ink); }
.chip.is-active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: 0 14px 34px rgba(0, 0, 0, .12); transition: border-color .2s var(--ease-out), background .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.card:hover { border-color: color-mix(in srgb, var(--accent) 68%, var(--line)); background: var(--surface-raised); transform: translateY(-3px); box-shadow: 0 22px 46px rgba(0, 0, 0, .24); }
.card-badge { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line)); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.card-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.card.is-limited .card-top { padding-right: 92px; }
.card-top { display: grid; gap: 10px; }
.card-name { margin: 0; font-size: 19px; line-height: 1.32; letter-spacing: -.025em; }
.card-tags { display: flex; align-items: flex-start; }
.card-modality { color: var(--muted); font-size: 12px; line-height: 1.5; }
.card-rating { display: flex; align-items: center; gap: 9px; margin: 15px 0 18px; color: var(--accent); font-size: 14px; letter-spacing: 1px; }
.card-rating .dim { color: var(--line); }
.card-type { color: var(--faint); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.card-row { margin-top: 16px; font-size: 13px; line-height: 1.7; }
.card-row .k { display: block; margin-bottom: 3px; color: var(--faint); font-size: 11px; font-weight: 750; }
.card-row .v { color: var(--muted); }
.card-row .v strong { color: var(--ink); font-weight: 750; }
.how-row .v { color: var(--faint); }
.card-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; }
.card-link { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out); }
.card-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: transform .18s var(--ease-out); }
.card-link:hover { border-color: #a7f3d0; background: #a7f3d0; color: var(--accent-ink); box-shadow: 0 8px 18px rgba(16, 185, 129, .2); text-decoration: none; }.card-link:hover svg { transform: translateX(2px); }
.card-link:active { transform: scale(.98); }
.card-date { grid-column: 3; justify-self: end; color: var(--faint); font-family: Inter, ui-sans-serif, sans-serif; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-state { padding: 36px 0; color: var(--muted); }

.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 8vw, 140px); padding: 82px 0; border-top: 1px solid var(--line); }
.about-copy { max-width: 37rem; color: var(--muted); font-size: 17px; }
.about-copy p { margin: 0 0 18px; }
.about-copy p:last-child { color: var(--faint); font-size: 14px; }
.submit { border-top: 1px solid var(--line); background: transparent; }
.submit-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(360px, 1.2fr); align-items: center; gap: clamp(48px, 9vw, 150px); padding: 72px 0; }
.submit-action-block { width: min(100%, 38rem); }
.submit-action-block > p { margin: 0; color: var(--muted); }
.submit-actions { display: flex; align-items: center; gap: 14px; margin-top: 27px; }
.wechat-trigger { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); padding: 10px 16px; font-size: 14px; font-weight: 750; cursor: pointer; transition: background .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out); }
.wechat-trigger:hover { background: var(--surface-raised); border-color: var(--muted); }
.qrcode-box { width: min(280px, 100%); margin-top: 22px; padding: 22px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); text-align: center; }
.qrcode-box[hidden] { display: none; }
.qrcode-box img { display: block; width: 100%; height: auto; border-radius: 6px; }
.qrcode-box p { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.site-footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; padding: 30px 0; color: var(--faint); font-size: 13px; }
.footer-inner div { display: grid; gap: 3px; }.footer-inner strong { color: var(--ink); font-size: 14px; }
.back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 10; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised); color: var(--ink); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), background .18s var(--ease-out); }
.back-to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

@media (prefers-color-scheme: light) {
  :root { --canvas: #f4f7f8; --surface: #eaf0f1; --surface-raised: #ffffff; --ink: #10202b; --muted: #4f6270; --faint: #70818d; --line: #c9d5d9; --accent: #087f5b; --accent-ink: #f1fff9; --accent-soft: rgba(8, 127, 91, .1); }
  .site-header { background: color-mix(in srgb, var(--canvas) 92%, transparent); }
  body { background: radial-gradient(circle at 82% -8%, rgba(110, 231, 183, .26), transparent 31rem), var(--canvas); }
  .btn-primary { color: var(--accent-ink); }.btn-primary:hover { background: #056646; }
  .card-link:hover { border-color: #056646; background: #056646; color: var(--accent-ink); }
  .watchlist { background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(234, 240, 241, .78)); box-shadow: 0 22px 54px rgba(18, 51, 65, .1); }
  .card { background: rgba(255, 255, 255, .72); box-shadow: 0 14px 34px rgba(18, 51, 65, .07); }.card:hover { background: #fff; box-shadow: 0 22px 46px rgba(18, 51, 65, .12); }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .watchlist { max-width: 610px; }
  .submit-inner { grid-template-columns: 1fr; }
}

@media (max-width: 980px) and (min-width: 621px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .wrap { width: min(var(--max), calc(100% - 36px)); }
  .header-inner { min-height: 60px; }.site-nav { gap: 14px; }.site-nav a:not(.nav-cta) { display: none; }
  .hero { padding: 54px 0 60px; }.hero h1 { font-size: clamp(42px, 13vw, 58px); }.hero-stats { grid-template-columns: 1fr 1fr; gap: 16px 0; margin-top: 40px; }.hero-stats div { padding-top: 0; }
  .model-list { grid-template-columns: 1fr; }.watchlist { padding-left: 20px; }
  .intelligence { padding: 58px 0 68px; }.filters { overflow-x: auto; padding-bottom: 3px; }.chip { flex: none; }.cards { grid-template-columns: 1fr; gap: 14px; }.card { padding: 20px; }
  .about { grid-template-columns: 1fr; gap: 28px; padding: 62px 0; }.submit-inner { padding: 58px 0; gap: 32px; }.submit-actions { align-items: stretch; flex-direction: column; }.submit-actions > * { width: 100%; }
  .footer-inner { flex-direction: column; }.back-to-top { right: 16px; bottom: 16px; }
}

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