/* nav-theme.css — chiikawa.space 导航体系共享主题 v2
   黄明上海天际线（手绘 SVG 剪影, 零版权风险）× 星空 × 流星 × 玻璃拟态 */
:root {
  --bg: #06070f; --text: #f5f6fa; --muted: #9aa0b4; --accent: #7db0ff;
  --card: rgba(9, 13, 28, .52); --card-border: rgba(255, 255, 255, .14);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; color: var(--text); background: var(--bg); overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  display: flex; flex-direction: column; align-items: center; padding: 60px 20px 72px;
}
/* ============ 黄昏天空 + 天际线 ============ */
.sky { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%0A%3Cg fill='%230d1226'%3E%0A%3Crect x='0' y='160' width='90' height='140'/%3E%3Crect x='34' y='126' width='6' height='36'/%3E%0A%3Crect x='100' y='120' width='60' height='180'/%3E%0A%3Crect x='170' y='180' width='60' height='120'/%3E%0A%3Crect x='240' y='150' width='60' height='150'/%3E%3Crect x='252' y='110' width='36' height='42'/%3E%3Crect x='262' y='80' width='16' height='32'/%3E%3Crect x='268' y='40' width='4' height='42'/%3E%0A%3Cpolygon points='300,300 330,300 340,214 320,228'/%3E%3Cpolygon points='380,300 350,300 340,214 360,228'/%3E%0A%3Crect x='337' y='150' width='6' height='66'/%3E%3Ccircle cx='340' cy='178' r='24'/%3E%3Ccircle cx='340' cy='118' r='15'/%3E%3Crect x='338' y='60' width='4' height='44'/%3E%0A%3Cpolygon points='400,300 410,120 425,66 445,58 462,150 470,300'/%3E%3Crect x='443' y='20' width='3' height='40'/%3E%0A%3Cpath d='M500,300 L508,150 L530,138 L552,150 L560,300 Z M516,158 h28 v34 h-28 Z' fill-rule='evenodd'/%3E%0A%3Crect x='580' y='150' width='46' height='150'/%3E%3Crect x='590' y='118' width='26' height='34'/%3E%0A%3Crect x='640' y='70' width='52' height='230'/%3E%3Crect x='663' y='22' width='4' height='48'/%3E%0A%3Crect x='710' y='170' width='60' height='130'/%3E%0A%3Crect x='790' y='130' width='44' height='170'/%3E%3Crect x='800' y='104' width='24' height='28'/%3E%3Crect x='808' y='86' width='8' height='20'/%3E%0A%3Crect x='850' y='100' width='58' height='200'/%3E%3Crect x='876' y='56' width='4' height='46'/%3E%0A%3Crect x='925' y='150' width='60' height='150'/%3E%0A%3Crect x='1000' y='115' width='46' height='185'/%3E%3Crect x='1058' y='150' width='42' height='150'/%3E%0A%3Crect x='1110' y='190' width='90' height='110'/%3E%0A%3C/g%3E%0A%3Cg fill='%23ffc27a' opacity='.95'%3E%3Crect x='108' y='140' width='4' height='6'/%3E%3Crect x='120' y='140' width='4' height='6'/%3E%3Crect x='108' y='156' width='4' height='6'/%3E%3Crect x='120' y='156' width='4' height='6'/%3E%3Crect x='132' y='172' width='4' height='6'/%3E%3Crect x='146' y='172' width='4' height='6'/%3E%3Crect x='178' y='196' width='4' height='6'/%3E%3Crect x='194' y='196' width='4' height='6'/%3E%3Crect x='206' y='212' width='4' height='6'/%3E%3Crect x='250' y='170' width='4' height='6'/%3E%3Crect x='262' y='170' width='4' height='6'/%3E%3Crect x='250' y='190' width='4' height='6'/%3E%3Crect x='274' y='214' width='4' height='6'/%3E%3Crect x='348' y='150' width='4' height='6'/%3E%3Crect x='360' y='164' width='4' height='6'/%3E%3Crect x='334' y='178' width='4' height='6'/%3E%3Crect x='418' y='110' width='4' height='6'/%3E%3Crect x='430' y='140' width='4' height='6'/%3E%3Crect x='442' y='180' width='4' height='6'/%3E%3Crect x='418' y='220' width='4' height='6'/%3E%3Crect x='430' y='250' width='4' height='6'/%3E%3Crect x='516' y='180' width='4' height='6'/%3E%3Crect x='534' y='180' width='4' height='6'/%3E%3Crect x='524' y='220' width='4' height='6'/%3E%3Crect x='516' y='250' width='4' height='6'/%3E%3Crect x='534' y='250' width='4' height='6'/%3E%3Crect x='592' y='180' width='4' height='6'/%3E%3Crect x='606' y='180' width='4' height='6'/%3E%3Crect x='592' y='210' width='4' height='6'/%3E%3Crect x='606' y='240' width='4' height='6'/%3E%3Crect x='652' y='120' width='4' height='6'/%3E%3Crect x='666' y='120' width='4' height='6'/%3E%3Crect x='652' y='160' width='4' height='6'/%3E%3Crect x='666' y='160' width='4' height='6'/%3E%3Crect x='652' y='200' width='4' height='6'/%3E%3Crect x='666' y='200' width='4' height='6'/%3E%3Crect x='652' y='240' width='4' height='6'/%3E%3Crect x='666' y='240' width='4' height='6'/%3E%3Crect x='724' y='200' width='4' height='6'/%3E%3Crect x='738' y='200' width='4' height='6'/%3E%3Crect x='724' y='230' width='4' height='6'/%3E%3Crect x='800' y='160' width='4' height='6'/%3E%3Crect x='812' y='160' width='4' height='6'/%3E%3Crect x='822' y='190' width='4' height='6'/%3E%3Crect x='862' y='130' width='4' height='6'/%3E%3Crect x='876' y='130' width='4' height='6'/%3E%3Crect x='890' y='160' width='4' height='6'/%3E%3Crect x='862' y='180' width='4' height='6'/%3E%3Crect x='876' y='210' width='4' height='6'/%3E%3Crect x='890' y='240' width='4' height='6'/%3E%3Crect x='938' y='180' width='4' height='6'/%3E%3Crect x='952' y='180' width='4' height='6'/%3E%3Crect x='966' y='210' width='4' height='6'/%3E%3Crect x='1012' y='150' width='4' height='6'/%3E%3Crect x='1026' y='150' width='4' height='6'/%3E%3Crect x='1012' y='180' width='4' height='6'/%3E%3Crect x='1026' y='210' width='4' height='6'/%3E%3Crect x='1068' y='180' width='4' height='6'/%3E%3Crect x='1082' y='180' width='4' height='6'/%3E%3Crect x='1068' y='210' width='4' height='6'/%3E%3C/g%3E%0A%3Cg fill='%23a8d4ff' opacity='.9'%3E%3Crect x='424' y='96' width='4' height='6'/%3E%3Crect x='444' y='150' width='4' height='6'/%3E%3Crect x='670' y='90' width='4' height='6'/%3E%3Crect x='870' y='110' width='4' height='6'/%3E%3Crect x='528' y='196' width='4' height='6'/%3E%3C/g%3E%0A%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%0A%3Cg fill='%232a3160' opacity='.85'%3E%0A%3Crect x='0' y='120' width='60' height='80'/%3E%3Crect x='70' y='90' width='46' height='110'/%3E%0A%3Crect x='124' y='132' width='56' height='68'/%3E%3Crect x='190' y='70' width='40' height='130'/%3E%0A%3Crect x='200' y='40' width='6' height='34'/%3E%3Crect x='240' y='110' width='64' height='90'/%3E%0A%3Crect x='315' y='95' width='44' height='105'/%3E%3Crect x='370' y='55' width='36' height='145'/%3E%0A%3Crect x='380' y='28' width='4' height='30'/%3E%3Crect x='420' y='125' width='70' height='75'/%3E%0A%3Crect x='500' y='85' width='48' height='115'/%3E%3Crect x='560' y='140' width='52' height='60'/%3E%0A%3Crect x='625' y='100' width='40' height='100'/%3E%3Crect x='680' y='60' width='44' height='140'/%3E%0A%3Crect x='690' y='30' width='5' height='34'/%3E%3Crect x='740' y='118' width='62' height='82'/%3E%0A%3Crect x='815' y='80' width='42' height='120'/%3E%3Crect x='870' y='130' width='66' height='70'/%3E%0A%3Crect x='950' y='95' width='40' height='105'/%3E%3Crect x='1005' y='65' width='38' height='135'/%3E%0A%3Crect x='1013' y='36' width='5' height='32'/%3E%3Crect x='1055' y='115' width='60' height='85'/%3E%0A%3Crect x='1130' y='135' width='70' height='65'/%3E%0A%3C/g%3E%3C/svg%3E"),
    radial-gradient(560px 420px at 74% 86%, rgba(255,168,92,.42), transparent 70%),
    radial-gradient(900px 600px at 20% 60%, rgba(120,74,160,.30), transparent 70%),
    linear-gradient(180deg, #070a1c 0%, #10173d 26%, #33255e 46%, #6d3567 64%, #b4536a 80%, #e88a5e 92%, #f4b06a 100%);
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
  background-size: auto 300px, auto 200px, auto, auto, auto;
  background-position: left bottom, left bottom, left bottom, center, center;
  animation: skybreath 26s ease-in-out infinite alternate;
}
@keyframes skybreath { to { filter: brightness(1.08) saturate(1.05); } }
.sky::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,8,20,.30) 0%, rgba(5,8,20,.42) 45%, rgba(5,8,20,.18) 78%, transparent 100%); }
.sky::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 12%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 6%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 41% 16%, rgba(200,225,255,.9) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 55% 8%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 67% 14%, rgba(255,240,220,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 78% 5%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 88% 11%, rgba(210,230,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 24%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 34% 28%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 61% 24%, rgba(255,235,210,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 26%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 94% 20%, rgba(220,235,255,.75) 50%, transparent 51%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 62%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
/* ============ 流星 ============ */
.sky i { position: absolute; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 55%, #fff 100%);
  box-shadow: 0 0 8px 1px rgba(190,220,255,.85);
  transform: rotate(35deg); animation: shoot linear infinite; }
.sky i:nth-child(1) { top: 9%; left: 80%; width: 150px; animation-duration: 11s; }
.sky i:nth-child(2) { top: 17%; left: 58%; width: 105px; animation-duration: 15s; animation-delay: 5.2s; }
.sky i:nth-child(3) { top: 4%; left: 34%; width: 175px; animation-duration: 19s; animation-delay: 11s; }
@keyframes shoot {
  0%       { opacity: 0; transform: rotate(35deg) translate(8vw, -5vw); }
  3%       { opacity: 1; }
  7%, 100% { opacity: 0; transform: rotate(35deg) translate(-46vw, 30vw); }
}
/* ============ 标题与文案 ============ */
h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 700; letter-spacing: .02em; text-align: center;
  background: linear-gradient(180deg, #ffffff 20%, #c8d6f2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
}
h1::after { content: ""; display: block; width: 72px; height: 2px; margin: 14px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); }
p.sub { color: var(--muted); margin: 12px 0 0; font-size: .95rem; text-align: center; letter-spacing: .12em;
  animation: rise .7s .08s cubic-bezier(.2,.8,.2,1) both; }
p.hint { color: #7d8496; margin: 8px 0 0; font-size: .78rem; text-align: center; animation: rise .7s .12s cubic-bezier(.2,.8,.2,1) both; }
/* ============ 网格与玻璃卡片 ============ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; width: 100%; max-width: 1020px; margin-top: 30px; }
a.card {
  position: relative; display: block; padding: 20px 22px; border-radius: 18px; overflow: hidden;
  text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--card-border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .35s;
  animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
}
a.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(115deg, transparent 32%, rgba(160,200,255,.16) 50%, transparent 68%); transition: opacity .3s; }
a.card::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190,215,255,.5), transparent); }
a.card:hover { transform: translateY(-5px); border-color: rgba(150,190,255,.65);
  box-shadow: 0 20px 50px rgba(10,25,70,.55), 0 0 24px rgba(110,150,255,.18), inset 0 0 0 1px rgba(150,190,255,.18); }
a.card:hover::before { opacity: 1; animation: sweep .85s ease; }
@keyframes sweep { to { transform: translateX(100%); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
a.card .t { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; }
a.card .d { color: var(--muted); font-size: .82rem; }
.grid > *:nth-child(1) { animation-delay: .10s } .grid > *:nth-child(2) { animation-delay: .16s }
.grid > *:nth-child(3) { animation-delay: .22s } .grid > *:nth-child(4) { animation-delay: .28s }
.grid > *:nth-child(5) { animation-delay: .34s } .grid > *:nth-child(6) { animation-delay: .40s }
.grid > *:nth-child(7) { animation-delay: .46s } .grid > *:nth-child(8) { animation-delay: .52s }
.grid > *:nth-child(n+9) { animation-delay: .58s }
h2.sec { font-size: 1.02rem; margin: 34px 0 0; width: 100%; max-width: 1020px; color: #d8deee; font-weight: 600;
  letter-spacing: .04em; display: flex; align-items: baseline; gap: 10px; animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
h2.sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(160,190,240,.3), transparent); }
h2.sec .n { color: #7d8496; font-weight: 400; font-size: .74rem; letter-spacing: .06em; }
.lv { display: inline-block; font-size: .68rem; padding: 2px 8px; margin-left: 8px; border-radius: 999px;
  border: 1px solid rgba(160,190,240,.4); color: #bcd4f5; background: rgba(100,140,230,.14); font-weight: 500; }
a.back { position: fixed; top: 20px; left: 20px; z-index: 10; color: var(--muted); text-decoration: none; font-size: .85rem;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--card-border);
  background: rgba(8,11,22,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: color .25s, border-color .25s, transform .25s; }
a.back:hover { color: #fff; border-color: rgba(150,190,255,.6); transform: translateX(-2px); }
p.muted { color: #8b91a4; font-size: .84rem; margin-top: 20px; text-align: center; animation: rise .7s .3s both; }
p.muted a { color: var(--accent); }
footer { margin-top: 52px; color: #6a7080; font-size: .78rem; letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }