:root {
  --primary: #0EA5E9;
  --secondary: #8B5CF6;
  --accent: #F59E0B;
  --bg-light: #F0F9FF;
  --bg-soft: #E0F2FE;
  --text-main: #0F172A;
  --text-muted: #64748B;
}

html { scroll-behavior: smooth; }
body { background: var(--bg-light); color: var(--text-main); overflow-x: hidden; }
img { max-width: 100%; height: auto; }

.btn-liquid {
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
  background-size: 200% auto;
  transition: all 0.4s ease;
}
.btn-liquid:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35); }

.btn-capsule {
  border: 2px solid rgba(14, 165, 233, 0.3);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.btn-capsule:hover { border-color: var(--primary); background: rgba(255, 255, 255, 0.95); transform: scale(1.03); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.2); }

.btn-outline { border: 2px solid var(--primary); color: var(--primary); transition: all 0.3s ease; }
.btn-outline:hover { background: var(--primary); color: #fff; transform: scale(1.03); }

.btn-3d { background: linear-gradient(180deg, var(--accent), #D97706); box-shadow: 0 6px 0 #92400E, 0 10px 16px rgba(245, 158, 11, 0.25); transition: all 0.15s ease; }
.btn-3d:active { transform: translateY(6px); box-shadow: 0 0 0 #92400E, 0 4px 8px rgba(245, 158, 11, 0.25); }

.card-glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.35s ease;
}
.card-glass:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12); }

.card-flat {
  background: #fff;
  border: 1px solid #E2E8F0;
  transition: all 0.3s ease;
}
.card-flat:hover { transform: scale(1.02); border-color: var(--primary); box-shadow: 0 12px 32px rgba(14, 165, 233, 0.15); }

.card-image { background: #fff; border-radius: 1.5rem; overflow: hidden; border: 1px solid #E2E8F0; transition: all 0.4s ease; }
.card-image:hover { transform: translateY(-6px) rotate(1deg); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14); }

.card-solid { background: #fff; border-left: 4px solid var(--primary); border-radius: 0 1rem 1rem 0; transition: all 0.3s ease; }
.card-solid:hover { transform: translateX(6px); box-shadow: 0 12px 32px rgba(14, 165, 233, 0.12); }

.card-tip { background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(139,92,246,0.08)); border: 1px dashed var(--primary); border-radius: 1rem; }

.card-step { background: #fff; border-radius: 1rem; border: 1px solid #E2E8F0; transition: all 0.3s ease; }
.card-step:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(14, 165, 233, 0.12); border-color: var(--primary); }

.code-card { background: #fff; border-radius: 1.25rem; border: 1px solid #E2E8F0; transition: all 0.35s ease; position: relative; overflow: hidden; }
.code-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transform: scaleX(0); transition: transform 0.35s ease; }
.code-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(14, 165, 233, 0.14); }
.code-card:hover::before { transform: scaleX(1); }

.code-sticker { background: linear-gradient(135deg, #fff 0%, var(--bg-light) 100%); border: 2px dashed var(--primary); border-radius: 1rem; transform: rotate(-1deg); transition: all 0.3s ease; }
.code-sticker:hover { transform: rotate(1deg) scale(1.02); box-shadow: 0 12px 28px rgba(14, 165, 233, 0.15); }

.news-card { background: #fff; border-radius: 1.5rem; overflow: hidden; border: 1px solid #E2E8F0; transition: all 0.35s ease; }
.news-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12); }
.news-card:hover .news-img { transform: scale(1.08); }
.news-img { transition: transform 0.6s ease; }
.news-list-item { background: #fff; border-radius: 1rem; border: 1px solid #E2E8F0; transition: all 0.3s ease; }
.news-list-item:hover { border-color: var(--primary); transform: translateX(6px); box-shadow: 0 12px 24px rgba(14, 165, 233, 0.1); }

.article-body { background: #fff; border-radius: 1.5rem; border: 1px solid #E2E8F0; }
.article-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; color: var(--text-main); }
.article-body h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: var(--text-main); }
.article-body p { color: var(--text-muted); line-height: 1.9; margin-bottom: 1.25rem; }
.article-body ul { list-style: disc; padding-left: 1.5rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.article-body li { margin-bottom: 0.5rem; }

.article-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; color: var(--text-main); }
.article-content h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: var(--text-main); }
.article-content p { color: var(--text-muted); line-height: 1.8; margin-bottom: 1rem; }
.article-content ul { list-style: disc; padding-left: 1.5rem; color: var(--text-muted); margin-bottom: 1rem; }
.article-content li { margin-bottom: 0.5rem; }

.highlight-box { background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(139,92,246,0.08)); border-left: 4px solid var(--primary); border-radius: 0 1rem 1rem 0; }
.info-card { background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(14,165,233,0.08)); border-radius: 1rem; border: 1px solid #E2E8F0; }

.title-line { display: inline-block; }
.title-line::after { content: ''; display: block; width: 64px; height: 4px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); }

.title-icon { display: inline-flex; align-items: center; gap: 10px; }
.title-icon::before { content: '\f0e7'; font-family: 'FontAwesome'; color: var(--accent); font-size: 0.85em; }

.title-badge { display: inline-flex; align-items: center; gap: 8px; }
.title-badge::after { content: '\f005'; font-family: 'FontAwesome'; color: var(--accent); font-size: 0.7em; }

.title-stroke { position: relative; display: inline-block; }
.title-stroke::before { content: attr(data-text); position: absolute; left: 2px; top: 2px; color: rgba(14, 165, 233, 0.18); z-index: -1; }

.title-ribbon { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(90deg, var(--primary), var(--secondary)); color: #fff; padding: 0.25rem 1rem; border-radius: 999px; }

.title-handwrite { font-family: '"PingFang SC"', cursive; display: inline-flex; align-items: center; gap: 8px; }
.title-handwrite::after { content: '—'; color: var(--accent); }

.status-tag { font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 600; }

.toc-link { transition: all 0.25s ease; }
.toc-link.active, .toc-link:hover { color: var(--primary); padding-left: 8px; border-left: 3px solid var(--primary); }

.float-anim { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.pulse-glow { animation: pulseGlow 2.4s ease-in-out infinite; }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.35); } 50% { box-shadow: 0 0 24px 8px rgba(14, 165, 233, 0.18); } }

.nav-hidden { transform: translateY(-100%); }
.nav-visible { transform: translateY(0); }

.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.mobile-menu.open { max-height: 400px; }

.section-pad { padding: 72px 0; }
@media (max-width: 767px) { .section-pad { padding: 48px 0; } }

.copy-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--text-main); color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 0.875rem; opacity: 0; transition: all 0.3s ease; z-index: 100; }
.copy-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }