:root{
  --tp-bg:#F8F9FA;
  --tp-card:#FFFFFF;
  --tp-ink:#0D1B2A;
  --tp-ink-light:#1B3A4B;
  --tp-body:#3D4F5F;
  --tp-muted:#8A95A1;
  --tp-line:#E8ECF0;
  --tp-accent:#D4782F;
  --tp-accent-light:#FFF5EB;
  --tp-blue:#2C5F7C;
  --tp-blue-bg:#EDF2F7;
  --tp-radius:14px;
  --tp-radius-sm:8px;
  --tp-shadow:0 1px 3px rgba(13,27,42,.05);
  --tp-shadow-md:0 6px 20px rgba(13,27,42,.07);
  --tp-shadow-lg:0 16px 48px rgba(13,27,42,.10);
}

html{scroll-behavior:smooth}
body{margin:0;padding:0;background:var(--tp-bg);color:var(--tp-body);font-family:var(--font);min-height:100vh;display:flex;flex-direction:column}

/* ===== Header ===== */
.tp-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--tp-line)}
.tp-header-inner{max-width:1400px;margin:0 auto;padding:0 40px;height:72px;display:flex;align-items:center;gap:28px}
.tp-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.tp-logo img{width:38px;height:38px;border-radius:8px}
.tp-logo span{font-size:16px;font-weight:700;color:var(--tp-ink);letter-spacing:.3px}
.tp-nav{margin-left:auto;display:flex;gap:6px}
.tp-nav a{padding:8px 18px;border-radius:8px;font-size:14px;color:var(--tp-muted);text-decoration:none;transition:.2s;font-weight:500}
.tp-nav a:hover{color:var(--tp-accent);background:var(--tp-accent-light)}
.tp-nav a.active{color:var(--tp-accent);background:var(--tp-accent-light);font-weight:700}
.tp-cta{padding:9px 24px;background:var(--tp-ink);color:#fff;border-radius:24px;font-size:13px;font-weight:700;text-decoration:none;transition:.25s;flex-shrink:0}
.tp-cta:hover{background:var(--tp-accent);transform:translateY(-1px)}

/* ===== Footer ===== */
.tp-footer{background:var(--tp-ink);margin-top:auto}
.tp-footer-inner{max-width:1400px;margin:0 auto;padding:48px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.tp-footer-brand{display:flex;align-items:center;gap:12px}
.tp-footer-brand img{width:36px;height:36px;border-radius:8px}
.tp-footer-brand span{font-size:15px;font-weight:700;color:rgba(255,255,255,.9)}
.tp-footer-links{display:flex;gap:32px}
.tp-footer-links a{font-size:14px;color:rgba(255,255,255,.45);text-decoration:none;transition:.2s;font-weight:500}
.tp-footer-links a:hover{color:#F5A623}
.tp-footer-copy{font-size:13px;color:rgba(255,255,255,.3)}

/* ===== Mobile ===== */
.tp-menu-btn{display:none;background:none;border:none;color:var(--tp-ink);font-size:22px;cursor:pointer;padding:4px}
.tp-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90}
.tp-nav-overlay.show{display:block}

@media(max-width:768px){
  .tp-header-inner{padding:0 16px;height:56px}
  .tp-logo img{width:32px;height:32px}
  .tp-logo span{font-size:13px}
  .tp-logo .logo-sub{display:none}
  .tp-nav{display:none;position:absolute;top:56px;left:0;right:0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);flex-direction:column;padding:8px 16px;box-shadow:0 4px 16px rgba(0,0,0,.08);border-bottom:1px solid var(--tp-line);z-index:95}
  .tp-nav.open{display:flex}
  .tp-nav a{padding:12px 16px;border-radius:8px;font-size:15px}
  .tp-menu-btn{display:block;margin-left:auto}
  .tp-footer-inner{flex-direction:column;text-align:center;padding:32px 20px}
}

/* ===== Topics Detail Page ===== */
/* ===== Hero Title Area ===== */
  .tp-hero{background:linear-gradient(160deg,var(--tp-ink) 0%,var(--tp-ink-light) 60%,#24506A 100%);position:relative;overflow:hidden}
  .tp-hero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40h80M40 0v80' stroke='rgba(255,255,255,.025)' stroke-width='1'/%3E%3C/svg%3E")}
  .tp-hero::after{content:"";position:absolute;right:-10%;top:-30%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(212,120,47,.12) 0%,transparent 70%)}
  .tp-hero-inner{max-width:1400px;margin:0 auto;padding:80px 40px 60px;position:relative;z-index:1}

  .tp-breadcrumb{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:28px}
  .tp-breadcrumb a{color:rgba(255,255,255,.6);text-decoration:none;transition:.2s}
  .tp-breadcrumb a:hover{color:var(--tp-accent)}
  .tp-breadcrumb .sep{margin:0 10px;opacity:.4}
  .tp-breadcrumb .current{color:rgba(255,255,255,.85)}

  .tp-hero-cat{display:inline-block;padding:6px 16px;background:rgba(212,120,47,.2);border:1px solid rgba(212,120,47,.35);color:#F5A623;font-size:12px;font-weight:700;border-radius:6px;margin-bottom:24px;letter-spacing:1px;text-transform:uppercase}
  .tp-hero h1{font-size:42px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:28px;letter-spacing:-.3px}
  .tp-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:20px;font-size:14px;color:rgba(255,255,255,.6)}
  .tp-hero-meta .meta-author{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);font-weight:600}
  .tp-hero-meta .meta-author img{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.15)}
  .tp-hero-meta .meta-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}
  .tp-hero-meta .meta-tag{padding:3px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:4px;font-size:12px;color:rgba(255,255,255,.6)}

  /* ===== Cover Image (full bleed) ===== */
  .tp-article{padding-top:48px}

  /* ===== Article Body ===== */
  .tp-article{max-width:1100px;margin:0 auto;padding:56px 40px 80px}

  /* Lead paragraph */
  .tp-lead{font-size:18px;color:var(--tp-ink-light);line-height:2;font-weight:500;padding:28px 32px;background:var(--tp-blue-bg);border-radius:var(--tp-radius);border-left:4px solid var(--tp-blue);margin-bottom:40px}
  .tp-lead strong{color:var(--tp-ink)}

  /* Typography */
  .tp-article h2{font-size:28px;font-weight:800;color:var(--tp-ink);margin:52px 0 20px;line-height:1.35;letter-spacing:-.2px;position:relative;padding-bottom:14px}
  .tp-article h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;background:var(--tp-accent);border-radius:2px}
  .tp-article h3{font-size:20px;font-weight:700;color:var(--tp-ink-light);margin:36px 0 14px}
  .tp-article p{font-size:17px;color:var(--tp-body);margin-bottom:24px;line-height:1.95}
  .tp-article p strong{color:var(--tp-ink)}
  .tp-article a{color:var(--tp-blue);text-decoration:none;border-bottom:1px solid rgba(44,95,124,.3);transition:.2s}
  .tp-article a:hover{color:var(--tp-accent);border-bottom-color:var(--tp-accent)}
  .tp-article ul,.tp-article ol{margin:0 0 24px 0;padding-left:0;list-style:none}
  .tp-article li{position:relative;padding-left:28px;margin-bottom:14px;font-size:17px;line-height:1.9}
  .tp-article ul li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--tp-accent)}
  .tp-article ol{counter-reset:item}
  .tp-article ol li{counter-increment:item}
  .tp-article ol li::before{content:counter(item);position:absolute;left:0;top:2px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--tp-ink);color:#fff;font-size:12px;font-weight:700;border-radius:6px}

  /* Blockquote */
  .tp-article blockquote{margin:32px 0;padding:28px 32px;background:#fff;border-radius:var(--tp-radius);position:relative;font-style:normal;border:1px solid var(--tp-line);box-shadow:var(--tp-shadow)}
  .tp-article blockquote::before{content:"\"";position:absolute;top:8px;left:16px;font-size:56px;color:var(--tp-accent);opacity:.25;font-family:Georgia,serif;line-height:1}
  .tp-article blockquote p{margin-bottom:0;font-size:17px;color:var(--tp-ink-light);line-height:1.95}
  .tp-article blockquote cite{display:block;margin-top:16px;font-size:14px;color:var(--tp-muted);font-style:normal;font-weight:600}
  .tp-article blockquote cite::before{content:"— "}

  /* Highlight box */
  .tp-highlight{margin:36px 0;padding:28px 32px;background:linear-gradient(135deg,#fff,var(--tp-accent-light));border-radius:var(--tp-radius);border:1px solid rgba(212,120,47,.15);position:relative;overflow:hidden}
  .tp-highlight::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--tp-accent),#F5A623)}
  .tp-highlight h4{font-size:14px;font-weight:800;color:var(--tp-accent);margin-bottom:12px;letter-spacing:1px;text-transform:uppercase}
  .tp-highlight p{margin-bottom:0;color:var(--tp-ink-light)}

  /* Data table */
  .tp-table-wrap{margin:32px 0;border-radius:var(--tp-radius);overflow:hidden;border:1px solid var(--tp-line);box-shadow:var(--tp-shadow)}
  .tp-table{width:100%;border-collapse:collapse;font-size:15px}
  .tp-table thead{background:var(--tp-ink)}
  .tp-table th{padding:14px 18px;color:#fff;text-align:left;font-weight:600;font-size:14px;letter-spacing:.3px}
  .tp-table td{padding:14px 18px;border-bottom:1px solid var(--tp-line);color:var(--tp-body)}
  .tp-table tbody tr:last-child td{border-bottom:none}
  .tp-table tbody tr:nth-child(even){background:#FAFBFC}
  .tp-table td b{color:var(--tp-ink)}

  /* Images */
  .tp-article figure{margin:36px 0}
  .tp-article figure img{width:100%;border-radius:var(--tp-radius);display:block;border:1px solid var(--tp-line);box-shadow:var(--tp-shadow)}
  .tp-article figcaption{text-align:center;font-size:13px;color:var(--tp-muted);margin-top:12px}

  /* Divider */
  .tp-divider{display:flex;align-items:center;gap:16px;margin:48px 0;color:var(--tp-line)}
  .tp-divider::before,.tp-divider::after{content:"";flex:1;height:1px;background:var(--tp-line)}
  .tp-divider span{font-size:20px;color:var(--tp-accent);opacity:.5}

  /* ===== Ad Slots ===== */
  .tp-ad{margin:48px 0;padding:36px 40px;background:#fff;border-radius:var(--tp-radius);border:1px solid var(--tp-line);position:relative;overflow:hidden;box-shadow:var(--tp-shadow)}
  .tp-ad-inner{display:flex;align-items:center;gap:36px}
  .tp-ad-content{flex:1}
  .tp-ad-title{font-size:22px;font-weight:800;color:var(--tp-ink);margin-bottom:10px}
  .tp-ad-desc{font-size:15px;color:var(--tp-body);margin-bottom:20px;line-height:1.7}
  .tp-ad-btn{display:inline-block;padding:10px 28px;background:var(--tp-ink);color:#fff;font-size:14px;font-weight:700;border-radius:24px;text-decoration:none;transition:.25s;border:none;cursor:pointer}
  .tp-ad-btn:hover{background:var(--tp-accent);transform:translateY(-1px)}
  @media(max-width:768px){
    .tp-ad-inner{flex-direction:column;align-items:flex-start}
    .tp-ad{padding:28px}
  }

  /* QR Modal */
  .tp-qr-modal{position:fixed;inset:0;z-index:200;background:rgba(13,27,42,.5);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
  .tp-qr-modal.show{opacity:1;pointer-events:auto}
  .tp-qr-box{background:#fff;border-radius:var(--tp-radius);padding:32px;text-align:center;position:relative;box-shadow:var(--tp-shadow-lg);min-width:280px}
  .tp-qr-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:24px;color:var(--tp-muted);cursor:pointer;line-height:1;padding:0}
  .tp-qr-close:hover{color:var(--tp-ink)}
  .tp-qr-title{font-size:16px;font-weight:700;color:var(--tp-ink);margin-bottom:16px}
  .tp-qr-img{width:180px;height:180px;margin:0 auto 12px;border-radius:8px;overflow:hidden;border:1px solid var(--tp-line)}
  .tp-qr-img img{width:100%;height:100%;object-fit:cover}
  .tp-qr-hint{font-size:13px;color:var(--tp-muted)}

  /* ===== Article Footer ===== */
  .tp-article-footer{margin-top:64px;padding-top:36px;border-top:2px solid var(--tp-line)}
  .tp-share{display:flex;align-items:center;gap:14px;margin-bottom:36px}
  .tp-share span{font-size:14px;font-weight:700;color:var(--tp-ink)}
  .tp-share-btn{padding:8px 18px;background:#fff;border:1px solid var(--tp-line);border-radius:8px;font-size:13px;color:var(--tp-body);cursor:pointer;transition:.2s;font-weight:500}
  .tp-share-btn:hover{border-color:var(--tp-blue);color:var(--tp-blue)}

  /* Prev/Next */
  .tp-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .tp-nav-card{padding:24px;background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);text-decoration:none;transition:.25s;position:relative;overflow:hidden}
  .tp-nav-card:hover{border-color:var(--tp-accent);box-shadow:var(--tp-shadow-lg);transform:translateY(-2px)}
  .tp-nav-card .nav-label{font-size:12px;font-weight:700;color:var(--tp-muted);margin-bottom:8px;letter-spacing:.5px;text-transform:uppercase}
  .tp-nav-card .nav-title{font-size:16px;font-weight:700;color:var(--tp-ink);line-height:1.5}
  .tp-nav-card.nav-prev{padding-left:48px}
  .tp-nav-card.nav-prev::before{content:"←";position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--tp-muted)}
  .tp-nav-card.nav-next{text-align:right;padding-right:48px}
  .tp-nav-card.nav-next::before{content:"→";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--tp-muted)}

  /* ===== Related Section ===== */
  .tp-related{max-width:1100px;margin:0 auto;padding:0 40px 80px}
  .tp-related-header{font-size:18px;font-weight:800;color:var(--tp-ink);margin-bottom:16px;display:flex;align-items:center;gap:10px}
  .tp-related-header::before{content:"";width:5px;height:20px;background:var(--tp-accent);border-radius:3px}
  .tp-related-list{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
  .tp-related-item{padding:16px 0;border-bottom:1px solid var(--tp-line);cursor:pointer;text-decoration:none;transition:.2s}
  .tp-related-item:hover .tp-related-title{color:var(--tp-blue)}
  .tp-related-title{font-size:15px;font-weight:700;color:var(--tp-ink);line-height:1.55;margin-bottom:6px;transition:.2s;letter-spacing:-.2px}
  .tp-related-meta{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--tp-muted)}
  .tp-related-meta .meta-dot{width:3px;height:3px;border-radius:50%;background:var(--tp-line)}
  .tp-related-meta .cat{font-size:12px;color:var(--tp-muted);font-weight:600}

  /* ===== Scroll Progress ===== */
  .tp-progress{position:fixed;top:0;left:0;height:2px;background:var(--tp-accent);z-index:200;transition:width .1s}

  /* ===== Back to Top ===== */
  .tp-totop{position:fixed;right:28px;bottom:28px;z-index:150;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--tp-line);box-shadow:var(--tp-shadow-md);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:all .3s}
  .tp-totop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
  .tp-totop:hover{background:var(--tp-ink);border-color:var(--tp-ink)}
  .tp-totop:hover svg{color:#fff}
  .tp-totop svg{width:18px;height:18px;color:var(--tp-muted);transition:.2s}

  /* ===== Mobile ===== */
  @media(max-width:900px){
    .tp-hero-inner{padding:48px 24px 40px}
    .tp-header-inner{padding:0 20px}
    .tp-hero h1{font-size:28px}
    .tp-article{padding-top:32px}
    .tp-article{padding:36px 24px 56px}
    .tp-related{padding:0 24px 56px}
    .tp-related-list{grid-template-columns:1fr}
    .tp-nav-grid{grid-template-columns:1fr}
    .tp-ad-inner{flex-direction:column;align-items:flex-start}
    .tp-ad-img{width:100%;height:180px}
    .tp-footer-inner{flex-direction:column;text-align:center;padding:32px 24px}
    .tp-nav{display:none}
  }