/* ═══════════════════════════════════════════════════════════
   yu.ai Design System v2
   所有页面引用: <link rel="stylesheet" href="/shared.css">
   字体额外加载: <link rel="stylesheet" href="/fonts/lxgwwenkai-regular.css">
                 <link rel="stylesheet" href="/fonts/lxgwwenkai-bold.css">
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Reset ──────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}

/* ── 2. Design Tokens ──────────────────────────────────── */
:root{
  /* Color — RGB triplets for alpha derivation */
  --bg-base:23 13 2;
  --mid-base:245 240 232;
  --dim-base:154 150 142;
  --accent-base:237 255 69;
  --warn-base:255 189 56;
  --danger-base:255 138 107;

  /* Semantic colors */
  --bg:rgb(var(--bg-base));
  --mid:rgb(var(--mid-base));
  --dim:rgb(var(--dim-base));
  --accent:rgb(var(--accent-base));
  --warn:rgb(var(--warn-base));
  --danger:rgb(var(--danger-base));

  /* Alpha-derived */
  --border:rgb(var(--mid-base) / .12);
  --border-strong:rgb(var(--mid-base) / .24);
  --hover:rgb(var(--mid-base) / .05);
  --hover-strong:rgb(var(--mid-base) / .08);
  --code-bg:rgb(var(--mid-base) / .06);
  --accent-soft:rgb(var(--accent-base) / .04);
  --warn-soft:rgb(var(--warn-base) / .04);

  /* Typography */
  --sans:system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --serif:'LXGW WenKai',Georgia,'Noto Serif SC','Source Han Serif SC',serif;
  --mono:'Courier New','Menlo',monospace;

  /* Spacing */
  --page-max:900px;
  --page-pad:60px;
  --section-gap:48px;
}

[data-theme="light"]{
  --bg-base:245 245 245;
  --mid-base:23 13 2;
  --dim-base:138 122 102;
  --accent-base:0 0 200;
  --border:rgb(var(--mid-base) / .14);
  --border-strong:rgb(var(--mid-base) / .26);
  --hover:rgb(var(--mid-base) / .04);
  --hover-strong:rgb(var(--mid-base) / .07);
  --code-bg:rgb(var(--mid-base) / .06);
  --accent-soft:rgb(var(--accent-base) / .05);
}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg-base:245 245 245;--mid-base:23 13 2;--dim-base:138 122 102;--accent-base:0 0 200;
    --border:rgb(var(--mid-base) / .14);--border-strong:rgb(var(--mid-base) / .26);
    --hover:rgb(var(--mid-base) / .04);--hover-strong:rgb(var(--mid-base) / .07);
    --code-bg:rgb(var(--mid-base) / .06);--accent-soft:rgb(var(--accent-base) / .05);
  }
}

/* ── 3. Base ───────────────────────────────────────────── */
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--sans);background:var(--bg);color:var(--mid);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--bg);-webkit-background-clip:text}
img{max-width:100%;height:auto}

/* ── 4. Links ──────────────────────────────────────────── */
a{color:var(--accent);text-decoration:none;opacity:.85;transition:opacity .2s}
a:hover{opacity:1}

/* ── 5. Typography ─────────────────────────────────────── */
h1,.h1{font-family:var(--serif);font-size:2.4rem;font-weight:700;line-height:1.2}
h2,.h2{font-family:var(--serif);font-size:1.4rem;font-weight:700}
h3,.h3{font-family:var(--serif);font-size:1.1rem;font-weight:600;margin:24px 0 8px}
h4,.h4{font-family:var(--mono);font-size:.75rem;letter-spacing:.12rem;text-transform:uppercase;opacity:.5}
p{margin:8px 0;opacity:.85;line-height:1.8}
ul,ol{margin:8px 0 8px 24px;opacity:.85}
li{margin:4px 0}
strong{font-weight:600}

/* Display — large hero title with gradient */
.display{font-family:var(--serif);font-size:3.5rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;background:linear-gradient(180deg,rgb(var(--mid-base)) 0%,rgb(var(--mid-base) / .5) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.display small{font-family:var(--mono);font-size:.5em;font-weight:400;letter-spacing:.15em;opacity:.5;margin-left:8px;text-transform:lowercase;-webkit-text-fill-color:rgb(var(--mid-base) / .5)}

/* Title — nav/logo text */
.title{font-family:var(--serif);font-size:2.625rem;font-weight:700;line-height:1;letter-spacing:.0525rem}

/* Subtitle */
.sub{font-family:var(--serif);font-size:1rem;opacity:.5;letter-spacing:.15rem}

/* Chinese classical text */
.cn{font-family:var(--serif);font-size:.85rem;letter-spacing:.3rem;opacity:.4}

/* Labels */
.label{font-family:var(--mono);font-size:.75rem;letter-spacing:.12rem;text-transform:uppercase}
.label-sm{font-size:.65rem;letter-spacing:.1rem;text-transform:uppercase}
.label-xs{font-size:.6rem;letter-spacing:.08rem;text-transform:uppercase;opacity:.5}

/* Opacity utilities */
.op-3{opacity:.3}.op-4{opacity:.4}.op-5{opacity:.5}.op-6{opacity:.6}.op-7{opacity:.7}

/* ── 6. Layout ─────────────────────────────────────────── */
.page{max-width:var(--page-max);margin:0 auto;padding:var(--page-pad) 24px 80px}

/* ── 7. Hero ───────────────────────────────────────────── */
.hero{text-align:center;padding:80px 0 48px}
.hero .glyph{font-family:var(--serif);font-size:5rem;line-height:1;color:var(--accent);opacity:.85;margin-bottom:8px}
.hero .display{margin:8px 0}
.hero .sub{margin:4px 0}
.hero .cn{margin-top:6px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.hero .cta a{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:1px solid var(--border);font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;opacity:1;transition:all .2s}
.hero .cta a:hover{border-color:var(--accent);color:var(--accent)}
.hero .cta a.primary{border-color:var(--accent);color:var(--accent)}
.hero .cta a.primary:hover{background:var(--accent);color:var(--bg)}

/* ── 8. Section ────────────────────────────────────────── */
.section{margin-top:var(--section-gap)}
.section-head{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.section-head .num{font-family:var(--serif);font-size:2rem;color:var(--accent);opacity:.7;line-height:1}
.section-head h2{margin:0}

/* Huiwen separator — replaces border-top */
.huiwen{position:relative;padding-top:16px;margin-top:var(--section-gap)}
.huiwen::before{content:"";display:block;width:100%;height:8px;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8' viewBox='0 0 32 8'%3E%3Cpath d='M0 4h4v4h8V4h4v4h8V4h4V0h-4v4H16V0h-4v4H4V0H0z' fill='%23f5f5f5' fill-opacity='.6'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:32px 8px;margin-bottom:16px}
[data-theme="light"] .huiwen::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8' viewBox='0 0 32 8'%3E%3Cpath d='M0 4h4v4h8V4h4v4h8V4h4V0h-4v4H16V0h-4v4H4V0H0z' fill='%23170d02' fill-opacity='.15'/%3E%3C/svg%3E")}

/* ── 9. Grid ───────────────────────────────────────────── */
.row{display:grid;grid-template-columns:1fr;border:1px solid var(--border)}
.row+.row{margin-top:-1px}
.cell{padding:16px;border-right:1px solid var(--border);min-width:0;display:flex;align-items:center}
.cell.s1{grid-column:span 1}.cell.s2{grid-column:span 2}.cell.s4{grid-column:span 4}.cell.s6{grid-column:1/-1}
@media(min-width:1024px){.row{grid-template-columns:1fr 2fr 1fr 1fr 1fr}}
@media(max-width:1023px){.row{grid-template-columns:1fr;border-left:none}.cell{border-right:none}}

/* ── 10. Card Grid ─────────────────────────────────────── */
.cards{display:grid;grid-template-columns:1fr;border:1px solid var(--border)}
.cards>*{padding:20px;border-bottom:1px solid var(--border);transition:background .25s}
.cards>*:last-child{border-bottom:none}
.cards>*:hover{background:var(--hover)}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}.cards>*{border-right:1px solid var(--border)}.cards>*:nth-child(2n){border-right:none}.cards>*:last-child{border-right:none;border-bottom:none}}
@media(min-width:1024px){.cards{grid-template-columns:1fr 1fr 1fr}.cards>*:nth-child(3n){border-right:none}.cards>*:nth-last-child(-n+3){border-bottom:none}}

/* Card content */
.card-icon{font-family:var(--serif);font-size:2rem;color:var(--accent);opacity:.8;margin-bottom:4px}
.card-title{font-family:var(--serif);font-size:1.1rem;font-weight:600;margin-bottom:4px}
.card-desc{font-size:.9rem;opacity:.7;line-height:1.7}
.card-meta{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;opacity:.5;margin-top:8px}

/* ── 11. Code ──────────────────────────────────────────── */
pre{font-family:var(--mono);font-size:.82rem;line-height:1.6;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:4px;padding:14px 16px;margin:12px 0;overflow-x:auto;opacity:.92}
code{font-family:var(--mono);font-size:.88em;background:var(--code-bg);border:1px solid var(--border);padding:2px 6px;border-radius:3px;color:var(--accent)}
pre code{background:none;border:none;padding:0;color:inherit;font-size:1em}

/* ── 12. Table ─────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
th,td{padding:10px 14px;border:1px solid var(--border);text-align:left}
th{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}

/* ── 13. Callout ───────────────────────────────────────── */
.tip{padding:12px 16px;border-left:3px solid var(--accent);background:var(--accent-soft);margin:16px 0;font-size:.9rem;opacity:.85}
.warn{padding:12px 16px;border-left:3px solid var(--warn);background:var(--warn-soft);margin:16px 0;font-size:.9rem;opacity:.85}

/* ── 14. Nav ───────────────────────────────────────────── */
.nav-link{position:relative;display:flex;align-items:center;width:100%;height:100%;color:inherit;cursor:pointer;background:none;border:none;text-align:left;padding:0;font:inherit;letter-spacing:inherit}
.nav-link .blink{display:none}
.nav-link:hover .blink,.nav-link:focus-visible .blink{display:inline-block}
.nav-link:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
.nav-link::before{content:"";position:absolute;inset:-12px;background:var(--mid);pointer-events:none;opacity:0;transition:opacity .25s;z-index:-1}
.nav-link:hover::before{opacity:.05}

/* ── 15. Footer ────────────────────────────────────────── */
.footer{margin-top:64px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;opacity:.5}

/* ── 16. Theme Toggle ──────────────────────────────────── */
.theme-toggle{position:fixed;top:20px;right:20px;background:none;border:1px solid var(--border);cursor:pointer;color:var(--mid);opacity:.5;padding:8px;border-radius:4px;z-index:100;transition:opacity .2s}
.theme-toggle:hover{opacity:1}

/* ── 17. Responsive ────────────────────────────────────── */
@media(max-width:640px){
  :root{--page-pad:40px}
  .display{font-size:2.2rem}
  .hero{padding:50px 0 32px}
  .hero .glyph{font-size:3.5rem}
  .hero .cta a{padding:9px 16px;font-size:.72rem}
}

/* ── 18. Animations ────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.fade-up{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.6,.2,1) forwards}
.fade-up.d1{animation-delay:.05s}.fade-up.d2{animation-delay:.18s}.fade-up.d3{animation-delay:.32s}.fade-up.d4{animation-delay:.5s}.fade-up.d5{animation-delay:.7s}
.blink{display:inline-block;width:1ch;height:1.1em;background:currentColor;vertical-align:text-bottom;animation:blink 1.2s step-end infinite}

@media(prefers-reduced-motion:reduce){
  .fade-up,.blink{animation:none;opacity:1;transform:none}
}

/* Card hover effects */
.cards > div {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.cards > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.cards > div:active {
  transform: translateY(-2px);
}

/* Focus styles */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Link hover animation */
a {
  position: relative;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover::after {
  width: 100%;
}

/* Card icon animation */
.card-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cards > div:hover .card-icon {
  transform: scale(1.1);
}

/* Version badge */
.card-meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.cards > div:hover .card-meta {
  opacity: 1;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .display {
    font-size: 2.5rem;
  }
  .title {
    font-size: 2rem;
  }
  :root {
    --page-pad: 24px;
    --section-gap: 32px;
  }
}

@media (max-width: 480px) {
  .display {
    font-size: 2rem;
  }
  .title {
    font-size: 1.5rem;
  }
  :root {
    --page-pad: 16px;
    --section-gap: 24px;
  }
}

/* Dark mode improvements */
@media (prefers-color-scheme: dark) {
  .cards > div {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .cards > div:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
  }
}

/* Print styles */
@media print {
  .bg-i, .bg-n, .bg-g { display: none; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
  .cards > div { break-inside: avoid; }
}