:root {
  --bg: #14071d;
  --bg-soft: #1b0d27;
  --panel: rgba(33, 17, 48, 0.92);
  --card: rgba(255,255,255,0.04);
  --line: rgba(255,255,255,0.1);
  --gold: #f4c95d;
  --gold-soft: #ffe7a3;
  --pink: #ff7ae0;
  --pink-soft: rgba(255,122,224,0.18);
  --text: #fff7fd;
  --muted: #d8c9e3;
  --ok: #8ef0c3;
  --maxw: 1180px;
  --shadow: 0 24px 70px rgba(0,0,0,0.32);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255,122,224,0.18), transparent 24%),
    radial-gradient(circle at top right, rgba(244,201,93,0.14), transparent 20%),
    linear-gradient(180deg, #14071d 0%, #0e0515 100%);
  line-height: 1.7;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: .6rem;
}
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 2rem), var(--maxw)); margin: 0 auto; }
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 50;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: var(--gold-soft);
  color: #341046;
  font-weight: 800;
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus-visible { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); background: rgba(20,7,29,0.86); }
.site-header .inner, .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.site-header .inner { flex-wrap: wrap; }
.brand { display:flex; align-items:center; gap:.9rem; font-weight:800; }
.brand-badge { width:2.8rem; height:2.8rem; border-radius:1rem; display:grid; place-items:center; background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#341046; font-weight:900; }
.nav { display:flex; gap:1.2rem; flex-wrap:wrap; color:var(--muted); font-size:.95rem; }
.nav a:hover { color: var(--gold-soft); }
.hero { padding:4.8rem 0 3rem; border-bottom:1px solid var(--line); }
.hero-compact { padding: 3.6rem 0 2.2rem; }
.hero-grid, .trust-grid, .highlights, .article-grid, .faq-grid, .footer-grid, .related-list { display:grid; gap:1.15rem; }
.hero-grid { grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); align-items:start; }
.hero-grid-3 { grid-template-columns:minmax(0,1.05fr) minmax(260px,.72fr) minmax(240px,.63fr); }
.eyebrow, .tag { display:inline-flex; align-items:center; padding:.35rem .85rem; border-radius:999px; border:1px solid rgba(255,122,224,0.28); background:var(--pink-soft); color:#ffd5f6; font-size:.8rem; font-weight:800; letter-spacing:.08em; }
.hero h1, .section-title h2 { margin:0; line-height:1.1; }
.hero h1 { margin-top:1rem; font-size:clamp(2.4rem,5vw,4.7rem); }
.hero p, .section-title p, .article-card p, .faq-item p, .highlight-card p, .article-shell p, .article-shell li { color:var(--muted); }
.hero-note { margin-top: 1rem; font-size: .95rem; color: var(--gold-soft); }
.actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.5rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:.95rem 1.4rem; border-radius:999px; font-weight:800; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#341046; box-shadow:var(--shadow); }
.btn-secondary { border:1px solid var(--line); background:rgba(255,255,255,0.04); }
.panel, .highlight-card, .article-card, .faq-item, .article-shell, .toc-card, .article-intro-card, .article-callout { border:1px solid var(--line); background:var(--panel); border-radius:1.5rem; box-shadow:var(--shadow); }
.panel, .highlight-card, .article-card, .faq-item, .article-intro-card, .article-callout { padding:1.35rem; }
.hero-visual { display:grid; gap:1rem; }
.hero-image { width:100%; min-height:250px; object-fit:cover; border-radius:1rem; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(135deg,#5b1d73,#251334); }
.kicker { color:var(--gold-soft); font-size:.82rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.meta-list { margin:1rem 0 0; padding:0; list-style:none; }
.meta-list li { display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.meta-list li:last-child { border-bottom:0; }
.trust-grid { grid-template-columns:repeat(4,1fr); }
.trust-grid > div, .related-item { border:1px solid var(--line); border-radius:1rem; padding:1rem; background:rgba(255,255,255,0.03); color:var(--muted); }
.section { padding:4rem 0; }
.section-link-row { margin-top: 1.25rem; }
.section-tight { padding-top: 1.4rem; }
.section-journey { padding-top: 2.4rem; }
.section-title { display:flex; justify-content:space-between; gap:1.5rem; align-items:end; margin-bottom:1.5rem; }
.section-title h2 { font-size:clamp(1.9rem,3.5vw,3rem); }
.highlights { grid-template-columns:repeat(3,1fr); }
.journey-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; }
.journey-card {
  border: 1px solid rgba(244,201,93,0.18);
  border-radius: 1.5rem;
  padding: 1.35rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  box-shadow: var(--shadow);
  transition: .2s ease;
}
.journey-card:hover { transform: translateY(-2px); border-color: rgba(244,201,93,0.34); }
.journey-card h3 { margin: .65rem 0 .45rem; font-size: 1.18rem; }
.journey-card p, .journey-note p { color: var(--muted); margin: 0; }
.journey-step {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(244,201,93,0.12);
  color: var(--gold-soft);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.journey-note {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.article-grid { grid-template-columns:repeat(2,1fr); }
.article-card h3, .highlight-card h3, .faq-item h3 { margin:.55rem 0; font-size:1.24rem; }
.tag-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th, .compare-table td { padding:.9rem 1rem; text-align:left; border-bottom:1px solid rgba(255,255,255,0.08); }
.compare-table th { color:var(--gold-soft); }
.compare-table td { color:var(--muted); }
.section-trust { padding-top: 1rem; }
.trust-page-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.15rem; }
.trust-link { min-height: 100%; transition: .2s ease; }
.trust-link:hover { transform: translateY(-2px); border-color: rgba(244,201,93,0.3); }
.footer { border-top:1px solid var(--line); padding:1rem 0 2rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.95rem; }
.footer-links a:hover, .trust-link:hover h3 { color: var(--gold-soft); }
.footer-note { color:var(--muted); font-size:.95rem; }
.breadcrumbs { padding: 1.25rem 0 0; color: var(--muted); font-size: .92rem; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.25rem; padding:1.5rem 0 4rem; }
.article-shell { padding:2rem; }
.article-shell h1 { margin-top:.4rem; font-size:clamp(2rem,4vw,3.3rem); line-height:1.15; }
.article-shell h2 { margin-top:2.2rem; font-size:1.65rem; }
.article-shell h3 { margin-top:1.4rem; font-size:1.2rem; }
.article-shell strong { color: var(--text); }
.article-shell ul, .article-shell ol, .toc-card ul { padding-left:1.2rem; }
.article-shell table { width:100%; border-collapse:collapse; margin:1rem 0; }
.article-shell th, .article-shell td { padding:.8rem; border-bottom:1px solid rgba(255,255,255,0.08); text-align:left; }
.article-shell { overflow-wrap: anywhere; }
.article-shell table { display: block; overflow-x: auto; white-space: nowrap; }
.toc-card li + li { margin-top: .45rem; }
.related-item:hover, .related-item:focus-visible, .article-card:hover, .highlight-card:hover, .faq-item:hover {
  border-color: rgba(244,201,93,0.28);
}
.toc-card { padding:1.25rem; position:sticky; top:5.6rem; }
.toc-note { margin-top: 1rem; color: var(--muted); font-size: .92rem; }
.article-intro-card { display:grid; gap:.35rem; margin:1rem 0 1.2rem; background:linear-gradient(135deg, rgba(255,122,224,0.12), rgba(244,201,93,0.08)); }
.article-intro-card strong, .article-callout strong { color: var(--gold-soft); }
.article-callout { margin-top: 1.5rem; }
.article-callout p { margin: .45rem 0 0; }
.article-next-steps { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.08); }
.article-next-steps h2 { margin: .35rem 0 0; font-size: 1.4rem; }
.next-step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.related-list { grid-template-columns:repeat(3,1fr); margin-top:1.5rem; }
.not-found { min-height: 100vh; display: grid; place-items: center; padding: 2rem 0; }
.not-found-card { max-width: 640px; text-align: center; }
.not-found-card h1 { margin: .4rem 0 0.8rem; font-size: clamp(2rem, 4vw, 3.2rem); }
.not-found-card p { color: var(--muted); }
@media (max-width: 980px) {
  .hero-grid, .hero-grid-3, .trust-grid, .highlights, .journey-grid, .article-grid, .faq-grid, .article-layout, .related-list, .trust-page-grid, .next-step-grid { grid-template-columns:1fr; }
  .nav { display:none; }
  .section-title { flex-direction:column; align-items:start; }
  .toc-card { position: static; }
  .journey-note { flex-direction: column; }
}
@media (max-width: 720px) {
  .site-header .inner { flex-direction:column; align-items:flex-start; }
  .actions { flex-direction:column; }
  .btn { width:100%; }
  .article-shell { padding: 1.4rem; }
}