/* ==========================================================
   TelegramPCDL - 纯白底 + Telegram蓝按钮
   风格：仿 telegram.org 官方极简风
   ========================================================== */

/* --- 变量 --- */
:root {
  --blue: #0088cc;
  --blue-hover: #006da3;
  --blue-light: #e8f4fd;
  --green: #4fae4e;
  --green-hover: #3d8e3d;
  --white: #ffffff;
  --bg: #ffffff;
  --bg-gray: #f7f7f7;
  --bg-dark: #1a1a1a;
  --text: #222222;
  --text-gray: #666666;
  --text-light: #999999;
  --border: #e5e5e5;
  --border-light: #eeeeee;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 50px;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-hover: 0 6px 24px rgba(0,0,0,0.1);
  --shadow-blue: 0 4px 14px rgba(0,136,204,0.25);
  --font: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', 'Courier New', monospace;
  --max: 1120px;
  --ease: 0.2s ease;
}

/* --- 基础重置 --- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font);
  color: var(--text-gray);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--blue); text-decoration:none; transition:color var(--ease); }
a:hover { color:var(--blue-hover); }
ul,ol { list-style:none; }
h1,h2,h3,h4,h5,h6 { color:var(--text); font-weight:700; line-height:1.3; }
strong { color:var(--text); }

.container { max-width:var(--max); margin:0 auto; padding:0 20px; }

/* --- 面包屑 --- */
.breadcrumb { background:var(--bg-gray); padding:8px 0; border-bottom:1px solid var(--border-light); }
.breadcrumb-inner {
  display:flex; align-items:center; gap:6px;
  padding:6px 0; font-size:0.82rem; color:var(--text-light);
}
.breadcrumb-inner a { color:var(--text-light); }
.breadcrumb-inner a:hover { color:var(--blue); }
.breadcrumb-inner .sep { color:#ddd; }
.breadcrumb-inner .cur { color:var(--text); font-weight:500; }

/* ==========================================================
   HEADER
   ========================================================== */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--white);
  border-bottom:1px solid var(--border);
  height:60px;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.logo {
  display:flex; align-items:center; gap:8px;
  text-decoration:none; height:60px;
}
.logo svg { width:36px; height:36px; }
.logo span {
  font-size:1.08rem; font-weight:700;
  color:var(--blue); letter-spacing:-0.01em;
}

.nav { display:flex; align-items:center; gap:0; }
.nav a {
  color:var(--text-gray); font-size:0.88rem; font-weight:500;
  padding:18px 14px; height:60px;
  display:flex; align-items:center;
  border-bottom:3px solid transparent;
  transition:all var(--ease);
}
.nav a:hover,
.nav a.active {
  color:var(--blue);
  border-bottom-color:var(--blue);
}

/* Dropdown */
.nav-drop { position:relative; }
.nav-drop-menu {
  display:none; position:absolute; top:60px; left:50%;
  transform:translateX(-50%); min-width:160px;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:4px;
  box-shadow:var(--shadow);
}
.nav-drop:hover .nav-drop-menu {
  display:block; animation:fadeIn 0.15s ease;
}
.nav-drop-menu a {
  display:block; padding:9px 14px; height:auto;
  font-size:0.86rem; border-bottom:none;
  border-radius:4px; color:var(--text-gray);
}
.nav-drop-menu a:hover,
.nav-drop-menu a.active {
  background:var(--blue-light); color:var(--blue);
  border-bottom:none;
}

/* Mobile toggle */
.menu-btn {
  display:none; background:none; border:none;
  cursor:pointer; padding:8px;
  flex-direction:column; gap:5px;
}
.menu-btn span {
  display:block; width:22px; height:2px;
  background:var(--text); border-radius:1px;
  transition:all var(--ease);
}
.menu-btn.on span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-btn.on span:nth-child(2) { opacity:0; }
.menu-btn.on span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  background:var(--blue);
  padding:90px 0 64px;
  text-align:center;
  margin-top:60px;
}
.hero-title {
  font-size:2.4rem; font-weight:800;
  color:#fff; margin-bottom:14px;
}
.hero-sub {
  font-size:1.05rem; color:rgba(255,255,255,0.72);
  max-width:520px; margin:0 auto 30px; line-height:1.8;
}
.hero-btns {
  display:flex; gap:12px; justify-content:center;
  flex-wrap:wrap; margin-bottom:36px;
}
.hero-stats {
  display:flex; gap:44px; justify-content:center;
  padding-top:24px; border-top:1px solid rgba(255,255,255,0.15);
}
.hero-stat .n {
  font-size:1.4rem; font-weight:800; color:#fff;
  font-family:var(--mono);
}
.hero-stat .l {
  font-size:0.78rem; color:rgba(255,255,255,0.45); margin-top:2px;
}

/* Page hero */
.pg-hero {
  background:var(--blue); padding:70px 0 40px; text-align:center;
}
.pg-hero h1 { font-size:1.85rem; color:#fff; margin-bottom:10px; }
.pg-hero p { color:rgba(255,255,255,0.68); font-size:0.98rem; margin-bottom:22px; }

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 28px;
  border-radius:var(--radius-pill);
  font-size:0.92rem; font-weight:600;
  font-family:var(--font);
  border:none; cursor:pointer;
  transition:all var(--ease);
  text-decoration:none; white-space:nowrap;
}
.btn-blue {
  background:var(--blue); color:#fff;
  box-shadow:var(--shadow-blue);
}
.btn-blue:hover {
  background:var(--blue-hover);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,136,204,0.3);
  color:#fff;
}
.btn-green {
  background:var(--green); color:#fff;
}
.btn-green:hover {
  background:var(--green-hover);
  transform:translateY(-1px);
  color:#fff;
}
.btn-white {
  background:#fff; color:var(--blue);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.btn-white:hover {
  background:#f5f5f5; color:var(--blue-hover);
}
.btn-outline-w {
  background:transparent;
  border:1.5px solid rgba(255,255,255,0.4);
  color:#fff;
}
.btn-outline-w:hover {
  border-color:#fff;
  background:rgba(255,255,255,0.1);
  color:#fff;
}
.btn-outline-b {
  background:transparent;
  border:1.5px solid var(--blue);
  color:var(--blue);
}
.btn-outline-b:hover {
  background:var(--blue); color:#fff;
}
.btn-lg { padding:14px 34px; font-size:1rem; }
.btn-sm { padding:8px 18px; font-size:0.84rem; }
.btn-block { width:100%; }

/* ==========================================================
   SECTION
   ========================================================== */
.section { padding:56px 0; }
.section-alt { background:var(--bg-gray); }
.sec-title {
  font-size:1.7rem; text-align:center; margin-bottom:8px;
}
.sec-sub {
  text-align:center; color:var(--text-light);
  font-size:0.96rem; margin-bottom:40px;
}

/* ==========================================================
   CARDS: DOWNLOAD
   ========================================================== */
.dl-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
}
.dl-card {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px 22px;
  text-align:center;
  transition:all var(--ease);
}
.dl-card:hover {
  border-color:var(--blue);
  box-shadow:var(--shadow-hover);
  transform:translateY(-3px);
}
.dl-card-icon {
  width:60px; height:60px;
  margin:0 auto 14px;
  background:var(--blue-light);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem;
}
.dl-card h3 { font-size:1.08rem; margin-bottom:4px; }
.dl-card .ver {
  font-family:var(--mono); font-size:0.76rem;
  color:var(--text-light); margin-bottom:2px;
}
.dl-card .sz {
  font-size:0.8rem; color:var(--text-light); margin-bottom:16px;
}
.dl-card .btn { width:100%; }

/* ==========================================================
   CARDS: FEATURE
   ========================================================== */
.feat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:18px;
}
.feat-card {
  padding:26px 20px;
  border-radius:var(--radius);
  border:1px solid var(--border-light);
  transition:all var(--ease);
}
.feat-card:hover {
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.feat-icon {
  width:46px; height:46px;
  background:var(--blue-light);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; margin-bottom:12px;
}
.feat-card h3 { font-size:1rem; margin-bottom:6px; }
.feat-card p { font-size:0.88rem; color:var(--text-light); line-height:1.7; }

/* ==========================================================
   CONTENT / ARTICLE
   ========================================================== */
.content { padding:40px 0 56px; }
.content-grid {
  display:grid;
  grid-template-columns:1fr 260px;
  gap:32px;
  align-items:start;
}
.article {
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  padding:36px;
}
.article h2 {
  font-size:1.3rem; margin:28px 0 12px;
  padding-top:22px;
  border-top:1px solid var(--border-light);
}
.article h2:first-child {
  margin-top:0; padding-top:0; border-top:none;
}
.article h3 { font-size:1.06rem; margin:20px 0 8px; }
.article p { margin-bottom:12px; line-height:1.85; }
.article ul,.article ol { margin-bottom:12px; padding-left:20px; }
.article ul { list-style:disc; }
.article ol { list-style:decimal; }
.article li { margin-bottom:5px; line-height:1.7; }
.article a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.article a:hover { color:var(--blue-hover); }

/* Steps */
.step-list { counter-reset:step; margin:16px 0; }
.step-item {
  counter-increment:step;
  display:flex; gap:14px;
  margin-bottom:14px; padding:16px;
  background:var(--bg-gray);
  border-radius:var(--radius-sm);
  border:1px solid var(--border-light);
}
.step-item::before {
  content:counter(step);
  flex-shrink:0;
  width:36px; height:36px;
  background:var(--blue); color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.92rem;
}
.step-content h4 { font-size:0.96rem; margin-bottom:4px; }
.step-content p { color:var(--text-light); margin-bottom:0; font-size:0.88rem; }

/* Info / Warn */
.info-box {
  background:var(--blue-light);
  border-left:3px solid var(--blue);
  border-radius:4px;
  padding:14px 16px; margin:16px 0;
}
.info-box p { margin-bottom:0; }
.warn-box {
  background:#fff8e1;
  border-left:3px solid #ffc107;
  border-radius:4px;
  padding:14px 16px; margin:16px 0;
}
.warn-box p { margin-bottom:0; }

/* Code */
.code-block {
  background:#1e1e1e; color:#d4d4d4;
  padding:14px 16px; border-radius:6px;
  overflow-x:auto;
  font-family:var(--mono); font-size:0.82rem;
  line-height:1.7; margin:14px 0;
}

/* Table */
.article-table {
  width:100%; border-collapse:collapse;
  margin:16px 0; font-size:0.88rem;
}
.article-table th {
  background:var(--blue); color:#fff;
  padding:10px 14px; text-align:left;
  font-weight:600; font-size:0.84rem;
}
.article-table th:first-child { border-radius:6px 0 0 0; }
.article-table th:last-child { border-radius:0 6px 0 0; }
.article-table td {
  padding:10px 14px;
  border-bottom:1px solid var(--border-light);
}
.article-table tr:last-child td { border-bottom:none; }
.article-table tr:nth-child(even) { background:var(--bg-gray); }

/* Req grid */
.req-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin:16px 0;
}
.req-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--bg-gray);
  border-radius:var(--radius-sm);
  border:1px solid var(--border-light);
}
.req-ic {
  width:34px; height:34px;
  background:var(--blue-light);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; flex-shrink:0;
}
.req-l { font-size:0.76rem; color:var(--text-light); }
.req-v { font-weight:600; font-size:0.88rem; }

/* Update */
.upd-list { margin:16px 0; }
.upd-item {
  display:flex; gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border-light);
}
.upd-item:last-child { border-bottom:none; }
.upd-date {
  flex-shrink:0;
  font-family:var(--mono); font-size:0.78rem;
  color:var(--text-light); padding-top:2px;
}
.upd-c h4 { font-size:0.9rem; margin-bottom:3px; }
.upd-c p { font-size:0.84rem; color:var(--text-light); margin-bottom:0; }

/* Related */
.rel-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px; margin:16px 0;
}
.rel-card {
  display:flex; align-items:center; gap:12px;
  padding:16px;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  transition:all var(--ease);
}
.rel-card:hover { border-color:var(--blue); box-shadow:var(--shadow); }
.rel-ic {
  width:38px; height:38px;
  background:var(--blue-light);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.rel-card h4 { font-size:0.88rem; margin-bottom:1px; }
.rel-card span { font-size:0.76rem; color:var(--text-light); }

/* ==========================================================
   SIDEBAR
   ========================================================== */
.sidebar { position:sticky; top:76px; }
.sb-card {
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  padding:18px; margin-bottom:12px;
}
.sb-card h4 {
  font-size:0.9rem; margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border-light);
}
.sb-card ul li { margin-bottom:5px; }
.sb-card ul li a {
  color:var(--text-light); font-size:0.86rem;
  display:block; padding:5px 8px;
  border-radius:4px; transition:all var(--ease);
}
.sb-card ul li a:hover {
  background:var(--blue-light); color:var(--blue);
}

.sb-dl {
  background:var(--blue); border-color:transparent; text-align:center;
}
.sb-dl h4 { color:#fff; border-bottom-color:rgba(255,255,255,0.15); }
.sb-dl p { color:rgba(255,255,255,0.55); font-size:0.82rem; margin-bottom:10px; }
.sb-dl .btn { width:100%; }

/* TOC */
.toc { list-style:none; padding:0; margin:0; }
.toc li { margin-bottom:2px; }
.toc a {
  display:block; padding:5px 10px;
  font-size:0.82rem; color:var(--text-light);
  border-radius:4px;
  border-left:2px solid transparent;
  transition:all var(--ease);
}
.toc a:hover, .toc a.active {
  color:var(--blue); background:var(--blue-light);
  border-left-color:var(--blue);
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq-list { max-width:740px; margin:0 auto; }
.faq-item {
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--radius-sm);
  margin-bottom:8px; overflow:hidden;
  transition:all var(--ease);
}
.faq-item:hover { border-color:rgba(0,136,204,0.15); }
.faq-q {
  width:100%; display:flex; align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font); font-size:0.94rem;
  font-weight:600; color:var(--text);
  text-align:left; gap:10px;
}
.faq-ic {
  flex-shrink:0; width:22px; height:22px;
  background:var(--blue-light);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--ease);
  color:var(--blue); font-size:0.95rem;
}
.faq-item.on .faq-ic {
  background:var(--blue); color:#fff;
  transform:rotate(45deg);
}
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height 0.3s ease;
}
.faq-a-inner {
  padding:0 18px 16px;
  color:var(--text-gray);
  line-height:1.8; font-size:0.9rem;
}
.faq-a-inner p { margin-bottom:8px; }

/* ==========================================================
   CTA
   ========================================================== */
.cta {
  background:var(--blue);
  padding:52px 0; text-align:center;
}
.cta h2 { font-size:1.6rem; color:#fff; margin-bottom:8px; }
.cta p { color:rgba(255,255,255,0.6); margin-bottom:22px; }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  background:var(--bg-gray);
  border-top:1px solid var(--border);
  padding:40px 0 20px;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:32px; margin-bottom:32px;
}
.footer-brand p {
  color:var(--text-light);
  font-size:0.84rem; line-height:1.7;
  max-width:260px; margin-top:8px;
}
.footer-col h4 {
  color:var(--text); font-size:0.88rem;
  margin-bottom:12px;
}
.footer-col a {
  display:block; color:var(--text-light);
  font-size:0.84rem; padding:3px 0;
  transition:color var(--ease);
}
.footer-col a:hover { color:var(--blue); }
.footer-bottom {
  padding-top:16px;
  border-top:1px solid var(--border);
  display:flex; align-items:center;
  justify-content:space-between;
  flex-wrap:wrap; gap:6px;
}
.footer-bottom p { color:var(--text-light); font-size:0.76rem; }
.footer-bottom a { color:var(--text-light); }
.footer-bottom a:hover { color:var(--blue); }

/* ==========================================================
   BACK TO TOP
   ========================================================== */
.top-btn {
  position:fixed; bottom:24px; right:24px;
  width:40px; height:40px;
  background:var(--blue); color:#fff;
  border:none; border-radius:50%;
  cursor:pointer; font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-blue);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:all var(--ease);
  z-index:100;
}
.top-btn.show { opacity:1; visibility:visible; transform:translateY(0); }
.top-btn:hover { background:var(--blue-hover); transform:translateY(-2px); }

/* ==========================================================
   ANIMATIONS
   ========================================================== */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeUp {
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

.reveal {
  opacity:1; transform:translateY(18px);
  transition:opacity 0.45s ease, transform 0.45s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

.stag .reveal:nth-child(2) { transition-delay:0.06s; }
.stag .reveal:nth-child(3) { transition-delay:0.12s; }
.stag .reveal:nth-child(4) { transition-delay:0.18s; }
.stag .reveal:nth-child(5) { transition-delay:0.24s; }
.stag .reveal:nth-child(6) { transition-delay:0.30s; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media(max-width:1024px) {
  .content-grid { grid-template-columns:1fr; }
  .sidebar {
    position:static;
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
}
@media(max-width:768px) {
  .menu-btn { display:flex; }
  .nav {
    position:fixed; top:60px; left:0; right:0;
    background:var(--white);
    flex-direction:column; padding:8px;
    border-bottom:1px solid var(--border);
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition:all var(--ease);
  }
  .nav.open { transform:translateY(0); opacity:1; visibility:visible; }
  .nav a { padding:12px 14px; width:100%; height:auto; border-bottom:none; border-radius:6px; }
  .nav a:hover,.nav a.active { border-bottom:none; }
  .nav-drop-menu {
    position:static; transform:none;
    box-shadow:none; border:none;
    background:var(--bg-gray); margin-top:2px; display:none;
  }
  .nav-drop.open .nav-drop-menu { display:block; }
  .hero { padding:70px 0 48px; }
  .hero-title { font-size:1.65rem; }
  .hero-sub { font-size:0.92rem; }
  .hero-stats { gap:18px; flex-wrap:wrap; }
  .hero-stat .n { font-size:1.2rem; }
  .section { padding:40px 0; }
  .sec-title { font-size:1.4rem; }
  .dl-grid { grid-template-columns:1fr; }
  .feat-grid { grid-template-columns:1fr; }
  .article { padding:20px 16px; }
  .pg-hero h1 { font-size:1.45rem; }
  .sidebar { grid-template-columns:1fr; }
  .req-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:18px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .hero-btns { flex-direction:column; align-items:center; }
  .hero-btns .btn { width:100%; max-width:300px; }
}
@media(max-width:480px) {
  html { font-size:15px; }
  .container { padding:0 14px; }
  .hero-title { font-size:1.45rem; }
  .btn-lg { padding:12px 22px; font-size:0.92rem; }
}