/* ==========================================================================
   Cadence Virtuoso .cdsenv Knowledge Base - Stylesheet
   ========================================================================== */

/* ---------- Reset & Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: #f5f7fa;
    color: #1a202c;
    line-height: 1.6;
    font-size: 14px;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: #111827; font-weight: 600; }
code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "JetBrains Mono", Consolas, Monaco, monospace;
    font-size: 12.5px;
    color: #be185d;
}
table { border-collapse: collapse; width: 100%; }

/* ---------- Navbar ---------- */
.navbar {
    background: #ffffff;
    color: #1a1a1a;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #eaecef;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-brand:hover { text-decoration: none; }
.brand-icon { width: 26px; height: 26px; border-radius: 6px; }
.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.nav-search {
    width: 280px;
    max-width: 36vw;
}
.nav-search form {
    display: flex;
    background: #f2f3f5;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 3px 4px 3px 14px;
    transition: border-color 0.2s, background 0.2s;
}
.nav-search form:focus-within {
    background: #fff;
    border-color: #4338ca;
}
.nav-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #1a1a1a;
    padding: 6px 4px;
    font-size: 14px;
    min-width: 0;
}
.nav-search input::placeholder { color: #9aa0a6; }
.nav-search button {
    background: #4338ca;
    border: none;
    border-radius: 16px;
    width: 34px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
    transition: background 0.15s;
}
.nav-search button:hover { background: #3730a3; }
.nav-lang {
    border: 1px solid #e2e5ea;
    background: #fff;
    color: #555;
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.nav-lang:hover { color: #4338ca; border-color: #c7d2fe; }
.nav-links {
    list-style: none;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.nav-links a {
    color: #333;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 15px;
    transition: color 0.2s;
    text-decoration: none;
    position: relative;
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 2px;
    background: #4338ca;
    transform: scaleX(0);
    transition: transform 0.2s;
}
.nav-links a:hover, .nav-links a.active {
    color: #4338ca;
    background: transparent;
}
.nav-links a:hover::after, .nav-links a.active::after {
    transform: scaleX(1);
}

/* ---------- Main Content ---------- */
.main-content {
    min-height: calc(100vh - 120px);
    padding: 28px 0 40px;
}
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Footer ---------- */
.footer {
    background: #f5f6f7;
    color: #333;
    padding: 48px 0 28px;
    font-size: 13px;
    border-top: 1px solid #e6e8eb;
}
.footer-inner {
    display: block;
}
.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e6e8eb;
}
.footer-col h4 {
    font-size: 14px;
    color: #1a1a1a;
    margin: 0 0 14px;
    font-weight: 700;
}
.footer-col a {
    display: block;
    color: #555;
    text-decoration: none;
    padding: 5px 0;
    font-size: 13px;
    transition: color 0.2s;
}
.footer-col a:hover { color: #4338ca; }
.footer-follow .footer-qr {
    width: 118px;
    height: auto;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.footer-follow-tip {
    color: #888;
    margin: 10px 0 0;
    font-size: 12px;
}
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
}
.footer-bottom-links a {
    color: #666;
    font-size: 12px;
    margin-right: 18px;
    text-decoration: none;
}
.footer-bottom-links a:hover { color: #4338ca; }
.footer-copy {
    color: #999;
    font-size: 12px;
    margin: 0;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; padding-bottom: 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- Hero Section ---------- */
.hero {
    background: #ffffff;
    color: #111827;
    padding: 0;
    border-radius: 20px;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid #f1f5f9;
}
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.06), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 64px 56px;
    min-height: 480px;
}
.hero-text { text-align: left; }
.hero-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6366f1;
    margin-bottom: 18px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #eef2ff;
}
.hero h1 {
    color: #111827;
    margin-bottom: 20px;
    line-height: 1.1;
}
.hero-title-en {
    display: block;
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111827;
}
.hero-title-zh {
    display: block;
    font-size: clamp(30px, 4.2vw, 48px);
    font-weight: 800;
    margin-top: 8px;
    color: #111827;
}
.hero .highlight {
    background: #eef2ff;
    color: #4338ca;
    padding: 2px 10px;
    border-radius: 8px;
    font-family: Consolas, monospace;
    font-weight: 600;
}
.hero-subtitle {
    font-size: 18px;
    color: #374151;
    margin-bottom: 8px;
    font-weight: 500;
}
.hero-meta {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 28px;
}
.hero-search {
    max-width: 520px;
    margin: 0 0 18px;
}
.hero-search form {
    display: flex;
    background: #f8fafc;
    padding: 5px;
    border-radius: 32px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.hero-search form:focus-within {
    border-color: #c7d2fe;
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.12);
}
.hero-search input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 28px;
    background: transparent;
    color: #111827;
}
.hero-search input::placeholder { color: #94a3b8; }
.hero-search button {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 28px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.hero-search button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35); }
.hero-tags {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 28px;
}
.hero-tags .tag {
    display: inline-block;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 14px;
    margin: 0 4px;
    color: #475569;
    font-size: 12px;
    transition: all 0.2s;
}
.hero-tags .tag:hover { background: #e2e8f0; color: #2563eb; text-decoration: none; }
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #dc2626;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.hero-cta:hover { color: #b91c1c; text-decoration: none; }
.hero-cta-arrow {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.2s;
}
.hero-cta:hover .hero-cta-arrow { transform: translateX(4px); }
.hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hero-infinity {
    width: 100%;
    max-width: 520px;
    height: auto;
    animation: heroFloat 6s ease-in-out infinite alternate;
}
.hero-app-icons rect { animation: iconPulse 3s ease-in-out infinite alternate; }
.hero-app-icons rect:nth-child(2) { animation-delay: 0.4s; }
.hero-app-icons rect:nth-child(3) { animation-delay: 0.8s; }
.hero-app-icons rect:nth-child(4) { animation-delay: 1.2s; }
.hero-app-icons rect:nth-child(5) { animation-delay: 1.6s; }
.hero-app-icons rect:nth-child(6) { animation-delay: 2s; }
@keyframes heroFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
}
@keyframes iconPulse {
    from { opacity: 0.75; }
    to { opacity: 1; }
}

/* ---------- Hero 轮播（主 Banner + 3 专题，共 4 张，尺寸统一） ---------- */
.hero-track {
    display: flex;
    align-items: stretch;
    width: 100%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.hero-slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: flex;
}
.hero-slide > .hero-content { flex: 1; }

.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
    color: #4338ca;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    z-index: 5;
    transition: opacity .25s ease, background .25s ease, transform .2s ease;
}
.hero:hover .hero-nav { opacity: 1; }
.hero-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.hero-prev { left: 18px; }
.hero-next { right: 18px; }

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 5;
}
.hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: all .3s ease;
}
.hero-dot.active { width: 24px; background: #6366f1; }

/* 专题 Slide 视觉 */
.topic-slide {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.topic-slide:hover { transform: translateY(-1px); }
.topic-slide .hero-cta { color: var(--ht-accent); }
.topic-slide .hero-cta:hover { color: var(--ht-accent); }
.hero-text { min-width: 260px; }
.topic-orb {
    position: relative;
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ht-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    animation: heroFloat 6s ease-in-out infinite alternate;
}
.topic-emoji {
    font-size: clamp(72px, 11vw, 118px);
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}
.topic-chip {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}
.topic-chip.c1 { top: 12%; left: -4%; animation: heroFloat 5s ease-in-out infinite alternate; }
.topic-chip.c2 { bottom: 20%; left: -8%; animation: heroFloat 6s ease-in-out infinite alternate; animation-delay: .6s; }
.topic-chip.c3 { top: 40%; right: -10%; animation: heroFloat 5.5s ease-in-out infinite alternate; animation-delay: 1.1s; }

@media (max-width: 768px) {
    .hero-nav { display: none; }
    .hero-text { min-width: auto; }
}

/* ---------- Section Titles ---------- */
.section-title {
    font-size: 22px;
    margin: 0 0 20px;
    padding-left: 12px;
    border-left: 4px solid #6366f1;
}
.page-header {
    margin-bottom: 28px;
}
.page-header h1 {
    font-size: 28px;
    margin-bottom: 8px;
}
.page-subtitle {
    color: #6b7280;
    margin-bottom: 20px;
}

/* ---------- 版块通用 header（标题 + 查看全部） ---------- */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.section-head .section-title { margin: 0; }
.section-more {
    font-size: 14px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    white-space: nowrap;
}
.section-more:hover { text-decoration: underline; }

/* ---------- 首页博客推荐 ---------- */
.blog-rec-section { margin-bottom: 40px; }
.blog-rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.blog-rec-card { text-decoration: none; color: inherit; }
.blog-rec-cover {
    height: 150px;
    background: #f1f5f9;
    overflow: hidden;
}
.blog-rec-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Stats Cards ---------- */
.stats-section { margin-bottom: 40px; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.stat-card {
    background: white;
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 26px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.stat-number {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}
.stat-label {
    color: #6b7280;
    font-size: 13px;
}

/* ---------- Tools Grid ---------- */
.tools-section { margin-bottom: 40px; }
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
.tools-grid.large {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.tool-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    text-decoration: none;
    display: block;
    transition: all 0.2s;
    border: 1px solid #e5e7eb;
    color: inherit;
}
.tool-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99,102,241,0.12);
    border-color: #c7d2fe;
}
.tool-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.tool-name {
    font-family: Consolas, monospace;
    font-size: 16px;
    font-weight: 700;
    color: #3730a3;
}
.tool-card.large .tool-name { font-size: 18px; }
.tool-count {
    background: #eef2ff;
    color: #4338ca;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.tool-desc-zh {
    font-size: 13.5px;
    color: #374151;
    margin-bottom: 8px;
    line-height: 1.5;
}
.tool-desc-en {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}
.tool-header-comments {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}
.tool-header-comments span {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}
.badge.large {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 12px;
}
.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: Consolas, monospace;
}
.type-badge.large {
    padding: 5px 12px;
    font-size: 13px;
    border-radius: 8px;
}
.type-string { background: #dbeafe; color: #1d4ed8; }
.type-boolean { background: #dcfce7; color: #15803d; }
.type-int { background: #fef3c7; color: #b45309; }
.type-float { background: #fde68a; color: #92400e; }
.type-cyclic { background: #fce7f3; color: #be185d; }
.type-toggle { background: #ede9fe; color: #6d28d9; }

.partition-tag {
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    color: #475569;
    font-family: Consolas, monospace;
}
.status-private {
    background: #fef2f2;
    color: #dc2626;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
}
.status-private.large {
    padding: 5px 12px;
    font-size: 13px;
    border-radius: 8px;
}
.status-public {
    background: #f0fdf4;
    color: #16a34a;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
}
.status-public.large {
    padding: 5px 12px;
    font-size: 13px;
    border-radius: 8px;
}
.status-none {
    color: #9ca3af;
    font-size: 11px;
}

/* ---------- Filter Bar ---------- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 14px 18px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.filter-bar input[type="text"] {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.filter-bar input[type="text"]:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.filter-info {
    color: #6b7280;
    font-size: 13px;
    white-space: nowrap;
}

/* ---------- Tool Detail ---------- */
.breadcrumb {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}
.breadcrumb a { color: #6366f1; }
.tool-info-card {
    background: white;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
}
.tool-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.tool-info-header h1 {
    font-size: 30px;
    font-family: Consolas, monospace;
    color: #3730a3;
}
.tool-desc {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 10px;
    color: #374151;
}
.tool-desc.en {
    font-size: 13.5px;
    color: #6b7280;
}
.tool-header-comments-detail {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
}
.tool-header-comments-detail h4 {
    font-size: 13px;
    margin-bottom: 8px;
    color: #475569;
}
.tool-header-comments-detail ul {
    padding-left: 20px;
    font-size: 12.5px;
    color: #64748b;
}
.tool-header-comments-detail li { margin-bottom: 4px; }
.tool-file-path {
    margin-top: 14px;
    font-size: 12px;
    color: #94a3b8;
    font-family: Consolas, monospace;
}

/* ---------- Variables Table ---------- */
.variables-container {
    background: white;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.variables-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}
.toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.toolbar-left label {
    font-size: 13px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
}
.toolbar-left select,
.toolbar-left input[type="text"] {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: white;
}
.toolbar-left select:focus,
.toolbar-left input[type="text"]:focus {
    border-color: #6366f1;
}
.toolbar-left input[type="text"] {
    min-width: 200px;
}
.toolbar-right {
    font-size: 13px;
    color: #6b7280;
}
.variables-table-container {
    overflow-x: auto;
}
.variables-table {
    width: 100%;
    font-size: 13px;
}
.variables-table th {
    background: #f8fafc;
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
    font-size: 12.5px;
    white-space: nowrap;
}
.variables-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.variables-table tbody tr:hover {
    background: #fafbff;
}
.text-center { text-align: center; color: #94a3b8; padding: 30px 0 !important; }
.text-muted { color: #94a3b8; }
.text-error { color: #dc2626 !important; }
.var-name-cell { font-family: Consolas, monospace; }
.var-name-link {
    color: #4338ca;
    font-weight: 600;
    cursor: pointer;
}
.var-name-link:hover { text-decoration: underline; }
.default-value-cell {
    font-family: Consolas, monospace;
    font-size: 12px;
    color: #be185d;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.comment-cell {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
    font-size: 12.5px;
}
.btn-icon {
    background: #eef2ff;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}
.btn-icon:hover { background: #c7d2fe; }

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    flex-wrap: wrap;
}
.pagination > span {
    color: #6b7280;
    font-size: 13px;
    margin-right: 10px;
}
.pagination button {
    padding: 7px 13px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: all 0.15s;
}
.pagination button:hover:not(:disabled) {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}
.pagination button.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: transparent;
    color: white;
    font-weight: 600;
}
.pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.page-ellipsis {
    color: #9ca3af;
    padding: 0 4px;
}

/* ---------- Search Page ---------- */
.advanced-search-form {
    background: white;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-top: 20px;
}
.search-main {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.search-main input {
    flex: 1;
    padding: 12px 18px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}
.search-main input:focus {
    border-color: #6366f1;
}
.btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    padding: 12px 26px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.35);
    text-decoration: none;
    color: white;
}
.btn-secondary {
    background: white;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}
.btn-secondary:hover {
    background: #eef2ff;
    text-decoration: none;
}
.btn-link {
    color: #4338ca;
    font-size: 13px;
    margin-right: 10px;
    cursor: pointer;
    text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

.search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.search-filters label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}
.search-filters select {
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 13px;
    outline: none;
    background: white;
    min-width: 120px;
}
.search-status {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
}
.search-status.searching { background: #fef3c7; color: #92400e; }
.search-status.success { background: #dcfce7; color: #166534; }
.search-status.info { background: #e0f2fe; color: #075985; }
.search-status.error { background: #fee2e2; color: #991b1b; }
.search-status em {
    font-style: normal;
    background: #fef08a;
    padding: 1px 6px;
    border-radius: 4px;
}

/* ---------- Search Results ---------- */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.search-result-card {
    background: white;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
}
.search-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(99,102,241,0.12);
    border-color: #c7d2fe;
}
.result-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.result-var-name {
    font-family: Consolas, monospace;
    font-weight: 700;
    font-size: 16px;
    color: #3730a3;
}
.result-tool {
    margin-left: auto;
    font-size: 12px;
    color: #6b7280;
}
.result-comments {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 12px;
}
.result-comments p {
    margin-bottom: 6px;
    color: #374151;
}
.result-comments strong { color: #111827; }
.result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}
.result-meta span {
    background: #f8fafc;
    padding: 3px 8px;
    border-radius: 5px;
}
mark {
    background: #fef08a;
    color: #854d0e;
    padding: 0 2px;
    border-radius: 2px;
}
.result-blog-title {
    font-weight: 700;
    font-size: 16px;
    color: #111827;
}
.result-blog .result-header {
    margin-bottom: 10px;
}
.result-blog-excerpt {
    font-size: 13px;
    line-height: 1.6;
    color: #4b5563;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.category-badge {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}
.result-type-tag {
    font-size: 12px;
    color: #9ca3af;
    margin-left: auto;
}
.no-results {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}
.no-results-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.5;
}
.no-results h3 { margin-bottom: 10px; color: #374151; }

/* ---------- Modal ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal.hidden { display: none; }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}
.modal-content {
    position: relative;
    background: white;
    border-radius: 14px;
    max-width: 720px;
    width: 92%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: modalIn 0.22s ease-out;
}
@keyframes modalIn {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-header {
    padding: 16px 22px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 {
    font-size: 16px;
    font-family: Consolas, monospace;
    color: #3730a3;
}
.modal-close {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}
.modal-close:hover { background: #e2e8f0; transform: rotate(90deg); }
.modal-body {
    padding: 22px;
    overflow-y: auto;
}

/* ---------- Variable Detail Page ---------- */
.variable-detail-container {
    padding-bottom: 40px;
}
.var-detail-header {
    background: linear-gradient(135deg, #3730a3 0%, #6366f1 100%);
    color: white;
    padding: 28px 30px;
    border-radius: 14px;
    margin-bottom: 24px;
}
.var-detail-name {
    font-family: Consolas, monospace;
    font-size: 30px;
    color: white;
    margin-bottom: 14px;
    word-break: break-all;
}
.var-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.var-detail-tags .badge,
.var-detail-tags .status-private.large,
.var-detail-tags .status-public.large,
.var-detail-tags .type-badge.large {
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    backdrop-filter: blur(5px);
}

.var-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 28px;
}
.detail-card {
    background: white;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}
.detail-card.full { grid-column: 1 / -1; }
.detail-card h3 {
    font-size: 15px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef2ff;
}
.detail-comment {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
}
.detail-comment.en {
    color: #64748b;
    font-size: 13px;
}

/* 参数解析结构化展示 */
.param-analysis {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
}
.param-analysis .analysis-head {
    font-size: 15px;
    margin-bottom: 16px;
    color: #111827;
}
.param-analysis h4 {
    font-size: 14px;
    margin: 16px 0 10px;
    color: #1f2937;
    font-weight: 600;
}
.param-analysis ul {
    margin: 0 0 12px 18px;
    padding: 0;
}
.param-analysis ul ul {
    margin-top: 6px;
    margin-bottom: 6px;
}
.param-analysis li {
    margin-bottom: 8px;
}
.param-analysis li strong {
    color: #111827;
}
.param-analysis code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12.5px;
    color: #be185d;
}
.param-analysis p {
    margin-bottom: 10px;
}
.analysis-content.en .param-analysis {
    color: #475569;
    font-size: 13px;
}
.analysis-content.en .param-analysis .analysis-head {
    color: #334155;
}

/* 字段拆解表格 */
.param-analysis .field-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 6px;
    font-size: 13.5px;
}
.param-analysis .field-table tbody tr {
    border-bottom: 1px solid #eef2f7;
}
.param-analysis .field-table tbody tr:last-child {
    border-bottom: none;
}
.param-analysis .field-table td {
    padding: 8px 10px;
    vertical-align: top;
    line-height: 1.6;
}
.param-analysis .field-table td:first-child {
    width: 36%;
    white-space: nowrap;
}
.param-analysis .field-table code {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 500;
}

/* envSetVal 等效写法代码块 */
.param-analysis pre.envsetval {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 6px 0 4px;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.6;
}
.param-analysis pre.envsetval code {
    background: transparent;
    color: #7dd3fc;
    padding: 0;
    font-size: 12.5px;
}
.analysis-content.en .param-analysis pre.envsetval code {
    color: #7dd3fc;
}
.detail-info-table {
    font-size: 13.5px;
}
.detail-info-table th {
    text-align: left;
    padding: 9px 14px 9px 0;
    font-weight: 500;
    color: #64748b;
    width: 120px;
    vertical-align: top;
}
.detail-info-table td {
    padding: 9px 0;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}
.default-value-display {
    background: #fdf2f8;
    color: #be185d;
    padding: 5px 10px;
    font-size: 13px;
}
.choices-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.choice-chip {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4338ca;
    padding: 6px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-family: Consolas, monospace;
    font-weight: 500;
}
.minmax-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-radius: 10px;
}
.minmax-min, .minmax-max {
    font-family: Consolas, monospace;
    font-size: 22px;
    font-weight: 700;
    color: #15803d;
}
.minmax-arrow {
    font-size: 28px;
    color: #86efac;
}
.tool-desc-block h4 {
    font-size: 16px;
    color: #4338ca;
    margin-bottom: 8px;
    font-family: Consolas, monospace;
}
.tool-desc-block p {
    font-size: 14px;
    margin-bottom: 6px;
    color: #374151;
}
.tool-desc-block p.en {
    font-size: 13px;
    color: #64748b;
}
.var-detail-actions {
    display: flex;
    gap: 12px;
}

/* ---------- Structured Comment Display ---------- */
.sc-comment {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.sc-section {
    display: flex;
    flex-direction: row;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s;
}
.sc-section:last-child {
    border-bottom: none;
}
.sc-section:hover {
    background: #f8fafc;
}
.sc-section-header {
    flex: 0 0 auto;
    width: 110px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-right: 2px solid #e5e7eb;
    padding-right: 14px;
    margin-right: 4px;
}
.sc-section-icon {
    font-size: 18px;
    line-height: 1;
}
.sc-section-label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}
.sc-section-body {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: #334155;
}
.sc-section-body p {
    margin: 0 0 6px 0;
}
.sc-section-body p:last-child {
    margin-bottom: 0;
}
.sc-section-body ul.md-list {
    margin: 4px 0 8px 0;
    padding-left: 20px;
    list-style: disc;
}
.sc-section-body ul.md-list li {
    margin-bottom: 4px;
    line-height: 1.7;
}
.sc-section-body strong {
    color: #0f172a;
    font-weight: 600;
}
.sc-section-body code.md-code {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    color: #be185d;
    font-family: Consolas, Monaco, monospace;
}
.sc-cdsenv-line {
    background: #1e293b;
    color: #e2e8f0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: Consolas, Monaco, monospace;
    overflow-x: auto;
    margin: 0;
}
.sc-cdsenv-line code {
    background: transparent;
    color: #7dd3fc;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}

/* Section color themes */
.sc-def .sc-section-header { border-right-color: #818cf8; }
.sc-def .sc-section-label { color: #4f46e5; }
.sc-meaning .sc-section-header { border-right-color: #a78bfa; }
.sc-meaning .sc-section-label { color: #7c3aed; }
.sc-what .sc-section-header { border-right-color: #34d399; }
.sc-what .sc-section-label { color: #059669; }
.sc-usage .sc-section-header { border-right-color: #fbbf24; }
.sc-usage .sc-section-label { color: #d97706; }
.sc-notes .sc-section-header { border-right-color: #f87171; }
.sc-notes .sc-section-label { color: #dc2626; }
.sc-source .sc-section-header { border-right-color: #94a3b8; }
.sc-source .sc-section-label { color: #475569; }

.no-comment {
    color: #94a3b8;
    font-style: italic;
    font-size: 14px;
}

/* ---------- Stats Page ---------- */
.stats-overview { margin-bottom: 32px; }
.stats-detail-section { }
.stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.stats-chart-card {
    background: white;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}
.stats-row > .stats-chart-card:last-child:first-child {
    grid-column: 1 / -1;
}
.stats-chart-card h2 {
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eef2ff;
}
.chart-container { max-height: 450px; overflow-y: auto; }
.bar-row {
    display: grid;
    grid-template-columns: 140px 1fr 60px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.bar-label {
    font-family: Consolas, monospace;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3730a3;
    font-weight: 600;
}
.bar-track {
    height: 22px;
    background: #f1f5f9;
    border-radius: 11px;
    overflow: hidden;
    position: relative;
}
.bar-track.small { height: 16px; border-radius: 8px; }
.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: inherit;
    transition: width 0.4s ease-out;
}
.bar-value {
    font-family: Consolas, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    text-align: right;
}
.type-stat-row {
    display: grid;
    grid-template-columns: 1fr 160px;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}
.type-stat-left {
    display: flex;
    align-items: center;
    font-size: 13px;
}
.table-container {
    max-height: 600px;
    overflow-y: auto;
}
.stats-table {
    width: 100%;
    font-size: 13px;
}
.stats-table th {
    background: #f8fafc;
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
}
.stats-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.stats-table tbody tr:hover { background: #fafbff; }
.rank-num {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    background: #f1f5f9;
    font-weight: 600;
    font-size: 12px;
    color: #475569;
}
.rank-num.top {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
}
.inline-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inline-bar-fill {
    height: 8px;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    border-radius: 4px;
    min-width: 3px;
    transition: width 0.3s;
}
.inline-bar span {
    font-size: 12px;
    color: #64748b;
    font-family: Consolas, monospace;
    min-width: 50px;
}

.error-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}
.error-state h2 {
    margin-bottom: 12px;
    color: #dc2626;
}
.error-state p { margin-bottom: 24px; }

/* ---------- Loading Spinner ---------- */
.loading-spinner {
    text-align: center;
    color: #94a3b8;
    padding: 40px;
    font-size: 14px;
}
.loading-spinner.large {
    font-size: 16px;
    padding: 80px 0;
}
.loading-spinner::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #c7d2fe;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}
.loading-spinner.large::before {
    width: 30px;
    height: 30px;
    border-width: 3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 2000;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    animation: toastIn 0.3s ease-out;
}
.toast.hidden { display: none; }
.toast.success { background: #16a34a; color: white; }
.toast.error { background: #dc2626; color: white; }
.toast.warning { background: #d97706; color: white; }
.toast.info { background: #2563eb; color: white; }
@keyframes toastIn {
    from { transform: translate(-50%, -20px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .stats-row { grid-template-columns: 1fr; }
    .var-detail-grid { grid-template-columns: 1fr; }
    .search-results { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .nav-container { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
    .nav-right { order: 3; width: 100%; margin-left: 0; }
    .nav-search { width: 100%; max-width: none; }
    .nav-lang { display: none; }
    .nav-links { order: 2; width: 100%; flex-wrap: wrap; gap: 2px; border-top: 1px solid #f0f0f0; padding-top: 8px; }
    .hero { padding: 0; }
    .hero-content {
        grid-template-columns: 1fr;
        padding: 36px 24px 40px;
        gap: 28px;
        text-align: center;
        min-height: auto;
    }
    .hero-text { text-align: center; }
    .hero-visual { order: -1; }
    .hero-infinity { max-width: 300px; }
    .hero-search { margin: 0 auto 18px; }
    .hero h1 { font-size: 26px; }
    .hero-title-en { font-size: 28px; }
    .hero-title-zh { font-size: 26px; }
    .bar-row { grid-template-columns: 100px 1fr 50px; gap: 6px; }
    .type-stat-row { grid-template-columns: 1fr 100px; }
    .tools-grid.large { grid-template-columns: 1fr; }
    .main-content { padding: 20px 0; }
    .container { padding: 0 16px; }
    .sc-section { flex-direction: column; gap: 8px; padding: 12px 14px; }
    .sc-section-header { width: auto; border-right: none; border-bottom: 2px solid #e5e7eb; padding-right: 0; padding-bottom: 6px; margin-right: 0; flex-direction: row; align-items: center; gap: 8px; }
    .sc-section-icon { font-size: 16px; }
    .sc-section-label { white-space: nowrap; }
}
@media (max-width: 480px) {
    .nav-links a { padding: 6px 10px; font-size: 13px; }
    .hero-content { padding: 28px 18px 36px; }
    .hero-title-en { font-size: 24px; }
    .hero-title-zh { font-size: 22px; }
    .hero-subtitle { font-size: 15px; }
    .hero h1 { font-size: 22px; }
    .var-detail-tags { flex-direction: column; align-items: flex-start; }
    .var-detail-name { font-size: 22px; }
}

/* ==================== 博客 & 管理后台样式 ==================== */

/* 通用按钮 */
.btn { display: inline-block; padding: 8px 20px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; text-decoration: none; transition: all .2s; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #e5e7eb; color: #374151; }
.btn-secondary:hover { background: #d1d5db; }
.btn-ghost { background: transparent; color: #6b7280; border: 1px solid #d1d5db; }
.btn-ghost:hover { background: #f3f4f6; }
.btn-link { color: #2563eb; text-decoration: none; font-size: 14px; }
.btn-link:hover { text-decoration: underline; }

/* 分类徽章 */
.category-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff; }
.category-sos { background: #e5322d; }
.category-lsf { background: #3b82f6; }
.category-skill { background: #10b981; }
.category-etx { background: #f97316; }
.category-linux { background: #f59e0b; }
.category-eda { background: #8b5cf6; }
.category-others { background: #6b7280; }

/* 博客列表页 */
.blog-list-section { margin-top: 24px; }
.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.category-tab { padding: 6px 16px; border: 1px solid #d1d5db; border-radius: 20px; background: #fff; cursor: pointer; font-size: 14px; color: #374151; transition: all .2s; }
.category-tab:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.category-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.blog-card { background: #fff; border: 1px solid #eef0f3; border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow .2s, border-color .2s, transform .2s; display: flex; flex-direction: column; }
.blog-card:hover { box-shadow: 0 10px 28px rgba(37,99,235,0.10); border-color: #bfdbfe; transform: translateY(-3px); }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: 10px; }
.blog-date { font-size: 12px; color: #9ca3af; }
.blog-title { font-size: 17px; font-weight: 600; color: #1f2937; margin: 0; line-height: 1.45; transition: color .15s; }
.blog-card:hover .blog-title { color: #2563eb; }
.blog-excerpt { font-size: 13px; color: #6b7280; line-height: 1.6; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #9ca3af; margin-top: 4px; }
.blog-views { font-size: 12px; }
.blog-read-more { color: #2563eb; font-size: 12px; font-weight: 600; }

/* 空状态 & 加载 */
.empty-state { text-align: center; padding: 60px 20px; color: #9ca3af; font-size: 16px; }
.loading-spinner { text-align: center; padding: 40px; color: #9ca3af; }
.loading-spinner.small { padding: 10px; display: inline-block; }
.text-error { color: #e5322d; }
.text-center { text-align: center; }
.page-ellipsis { padding: 0 4px; color: #9ca3af; }

/* 博客详情页 - 完全参照华为新闻页风格：去卡片化、内容拉宽、标题居中 */
.blog-detail-section { margin-top: 24px; max-width: 1080px; margin-left: auto; margin-right: auto; padding: 0 24px; }
.blog-detail-section .breadcrumb { margin-bottom: 22px; }
.blog-detail-section .breadcrumb a { color: #2563eb; text-decoration: none; }
.blog-detail-section .breadcrumb a:hover { color: #1d4ed8; text-decoration: underline; }

/* 全文容器：去掉白卡片/阴影/圆角 */
.blog-article {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    font-family: "HarmonyOS Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 标题区：完全居中、加大字号 */
.blog-article-header {
    text-align: center;
    margin-bottom: 6px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ebedf0;
}
.blog-article-title {
    font-size: 38px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 18px;
    line-height: 1.4;
    letter-spacing: -0.015em;
}
.blog-article-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #999;
    flex-wrap: wrap;
}
.blog-article-meta .dot { color: #d6d6d6; }
.blog-article-meta .pin-badge { color: #C7000B; font-weight: 600; }

/* 居中的横线 + 社交分享按钮（点击微信图标弹层二维码） */
.blog-article-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 22px 0 28px;
    margin: 14px 0 0;
    border-bottom: 1px solid #ebedf0;
}
.blog-article-share .share-label { font-size: 13px; color: #888; }
.blog-article-share .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.blog-article-share .share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.blog-article-share .share-weibo   { background: #E6162D; }
.blog-article-share .share-wechat  { background: #07C160; position: relative; }
.blog-article-share .share-copy    { background: #5b5b5b; }

/* 微信二维码弹层 */
.wechat-qr-popover {
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    white-space: nowrap;
    z-index: 10;
}
.wechat-qr-popover img { width: 160px; height: 160px; display: block; border-radius: 4px; }
.wechat-qr-popover::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #eef0f3;
    border-top: 1px solid #eef0f3;
}
.wechat-qr-popover p { margin: 6px 0 0; font-size: 12px; color: #555; text-align: center; }


/* 封面大图 */
.blog-article-cover { margin: 28px 0 4px; }
.blog-article-cover img { width: 100%; height: auto; border-radius: 10px; display: block; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.blog-article-content { font-size: 17px; line-height: 1.95; color: #2c2c2c; word-wrap: break-word; margin-top: 26px; }
.blog-article-content h1 { font-size: 25px; margin: 30px 0 14px; color: #1a1a1a; font-weight: 700; }
.blog-article-content h2 { font-size: 23px; margin: 32px 0 14px; color: #1a1a1a; font-weight: 700; position: relative; padding-left: 14px; }
.blog-article-content h2::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 4px; background: #2563eb; border-radius: 2px; }
.blog-article-content h3 { font-size: 19px; margin: 24px 0 10px; color: #1a1a1a; font-weight: 600; }
.blog-article-content p { margin: 0 0 20px; }
.blog-article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; }
.blog-article-content a { color: #C7000B; border-bottom: 1px solid rgba(199,0,11,0.28); text-decoration: none; transition: border-color .15s; }
.blog-article-content a:hover { border-bottom-color: #C7000B; }
.blog-article-content pre { background: #f5f5f5; padding: 16px; border-radius: 8px; overflow-x: auto; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #ececec; }
.blog-article-content pre code { display: block; padding: 0; background: transparent; border-radius: 0; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; color: #c0341d; }
.blog-article-content code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; color: #c0341d; }
.blog-article-content ul, .blog-article-content ol { margin: 0 0 20px 22px; }
.blog-article-content li { margin-bottom: 10px; }
.blog-article-content blockquote { border-left: 4px solid #ebedf0; background: #fafafa; padding: 12px 16px; margin: 18px 0; border-radius: 0 6px 6px 0; color: #555; }
.blog-article-content blockquote p { margin: 0; }
/* 表格横向滚动容器（JS 自动包裹，宽表在手机上可左右滑动） */
.blog-table-wrap {
    margin: 18px 0 26px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* 正文表格通用样式：不再要求带 .blog-table，
   历史文章（微信公众号导入 / Markdown 生成）的裸 <table> 同样生效 */
.blog-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 26px;
    font-size: 14px;
    line-height: 1.7;
    background: #fff;
    border: 1px solid #e5e7eb;
}
.blog-article-content .blog-table-wrap > table { margin: 0; }
.blog-article-content table th,
.blog-article-content table td {
    padding: 11px 13px;
    border-bottom: 1px solid #eef0f3;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
.blog-article-content table th {
    background: #fafafa;
    font-weight: 600;
    color: #1a1a1a;
}
.blog-article-content table tbody tr:last-child td { border-bottom: none; }
.blog-article-content table tbody tr:hover { background: #fafafa; }

/* ===== ETX 帮助文档（Admin Profiles 章节）专用样式 ===== */
.blog-article-content dl.settings { margin: 16px 0 24px; }
.blog-article-content dl.settings dt { font-weight: 600; color: #1a1a1a; margin-top: 14px; }
.blog-article-content dl.settings dd { margin: 0 0 12px 18px; padding-left: 12px; border-left: 2px solid #e5e7eb; color: #2c2c2c; }
.blog-article-content blockquote.note { border-left: 4px solid #f59e0b; background: #fffbeb; padding: 12px 16px; margin: 16px 0; border-radius: 0 6px 6px 0; color: #78350f; }
.blog-article-content blockquote.note p { margin: 0; }
.blog-article-content .note-icon { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; display: inline-block; }
.blog-article-content b.guilabel { background: #fdeaea; color: #C7000B; padding: 1px 6px; border-radius: 4px; font-weight: 600; font-size: 0.92em; }
.blog-article-content i.emphasis { font-style: italic; }

/* 微信公众号代码块修复 */
.blog-article-content .code-snippet__line-index { display: none !important; }

/* 相关文章：纯文字标题列表（hover 走整站通用文字链接样式，不使用红色） */
/* 具体样式见 templates/blog_detail.html 内联 .related-* 规则 */
.blog-article-content .code-snippet__fix, .blog-article-content [class*="code-snippet"] { white-space: pre-wrap; }
.blog-article-content [class*="code-snippet__"] code { display: block; white-space: pre-wrap; }
.error-state { text-align: center; padding: 40px; color: #e5322d; }
.error-state .btn-link { display: inline-block; margin-top: 12px; }

/* 管理后台登录 */
.hidden { display: none !important; }
.admin-login-section { max-width: 400px; margin: 80px auto; }
.login-card { background: #fff; border-radius: 12px; padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.login-title { text-align: center; margin: 0 0 8px 0; font-size: 22px; }
.login-subtitle { text-align: center; color: #6b7280; font-size: 14px; margin: 0 0 24px 0; }
.login-form .form-group { margin-bottom: 16px; }
.login-form label { display: block; margin-bottom: 6px; font-size: 14px; color: #374151; }
.login-form input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 15px; box-sizing: border-box; }
.login-form input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.login-btn { width: 100%; padding: 12px; font-size: 15px; margin-top: 8px; }
.login-error { color: #e5322d; font-size: 14px; text-align: center; margin-top: 12px; }

/* 管理后台 */
/* 管理后台模块切换 Tab */
.admin-tabs {
    display: flex;
    gap: 6px;
    margin: 24px 0 18px;
    border-bottom: 1px solid #e5e7eb;
}
.admin-tab {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all .15s;
}
.admin-tab:hover { color: #374151; }
.admin-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

/* 变量编辑模态框（表单较长，适当加宽） */
.var-modal-content { max-width: 760px; }

.admin-dashboard-section { margin-top: 0; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.admin-title { font-size: 22px; font-weight: 600; }
.admin-actions { display: flex; gap: 10px; }
.admin-table-container { overflow-x: auto; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.admin-posts-table { width: 100%; border-collapse: collapse; }
.admin-posts-table th { background: #f9fafb; padding: 12px 16px; text-align: left; font-size: 13px; color: #6b7280; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.admin-posts-table td { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
.admin-posts-table tr:hover { background: #f9fafb; }
.post-title-cell a { color: #1f2937; text-decoration: none; }
.post-title-cell a:hover { color: #2563eb; }
.actions-col { white-space: nowrap; text-align: right; }
.btn-icon { background: none; border: none; cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 4px; transition: background .2s; }
.btn-icon:hover { background: #f3f4f6; }

/* 状态徽章 */
.status-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.status-published { background: #d1fae5; color: #065f46; }
.status-draft { background: #fef3c7; color: #92400e; }

/* 编辑器 */
.admin-edit-section { margin-top: 24px; max-width: 860px; margin-left: auto; margin-right: auto; }
.admin-edit-topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.admin-edit-form { background: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.form-row { margin-bottom: 18px; }
.form-row > label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #374151; }
.form-row-inline { display: flex; gap: 20px; }
.form-group { flex: 1; }
.form-group label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #374151; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; box-sizing: border-box; font-family: inherit; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.form-textarea { resize: vertical; }

.editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px; background: #f9fafb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 6px 6px 0 0; }
.editor-toolbar button { padding: 4px 10px; border: 1px solid transparent; border-radius: 4px; background: #fff; cursor: pointer; font-size: 14px; color: #374151; transition: all .15s; }
.editor-toolbar button:hover { background: #e5e7eb; border-color: #d1d5db; }
.toolbar-divider { width: 1px; background: #d1d5db; margin: 0 4px; }

.editor-wrapper { border: 1px solid #d1d5db; border-radius: 0 0 6px 6px; overflow: hidden; }
.editor-content { min-height: 320px; max-height: 600px; overflow-y: auto; padding: 16px 20px; font-size: 15px; line-height: 1.8; outline: none; }
.editor-content:empty::before { content: attr(data-placeholder); color: #9ca3af; }
.editor-content h2 { font-size: 20px; margin: 16px 0 8px; border-left: 4px solid #2563eb; padding-left: 12px; }
.editor-content h3 { font-size: 17px; margin: 14px 0 6px; }
.editor-content p { margin: 6px 0; }
.editor-content pre { background: #f4f4f4; padding: 12px; border-radius: 6px; overflow-x: auto;
  white-space: pre-wrap; word-break: break-word; margin: 10px 0;
  font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 13px; line-height: 1.55; }
.editor-content pre code { display: block; background: none; padding: 0; font-size: inherit;
  font-family: inherit; line-height: inherit; white-space: pre; }
.editor-content code { background: #f4f4f4; padding: 2px 6px; border-radius: 4px;
  font-family: Consolas, Monaco, monospace; font-size: 13px; }
.editor-content ul, .editor-content ol { margin: 8px 0 8px 24px; }
.editor-content li { margin: 4px 0; line-height: 1.7; }
.editor-content blockquote { border-left: 4px solid #d1d5db; padding: 4px 12px; margin: 8px 0; color: #4b5563; background: #f9fafb; border-radius: 0 4px 4px 0; }
.editor-content table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.editor-content table th, .editor-content table td { border: 1px solid #d1d5db; padding: 6px 12px; }
.editor-content table th { background: #f9fafb; }
.editor-markdown.hidden { display: none; }
.hidden { display: none !important; }
.img-loading { display: inline-block; padding: 8px 16px; background: #f3f4f6; border-radius: 6px; color: #9ca3af; font-size: 14px; margin: 4px 0; }

.form-actions { display: flex; gap: 12px; margin-top: 24px; }
.required { color: #dc2626; margin-left: 2px; }
.form-row input[type="password"]:invalid { box-shadow: none; }

/* 响应式 */
@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .admin-posts-table { font-size: 13px; }
    .admin-posts-table th, .admin-posts-table td { padding: 8px 10px; }
    .form-row-inline { flex-direction: column; gap: 12px; }
    .admin-edit-form { padding: 16px; }
    .admin-topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===== 置顶角标 ===== */
.pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    white-space: nowrap;
    vertical-align: middle;
}
.pin-badge.large { font-size: 13px; padding: 3px 10px; }

/* ==========================================================================
   首页专题滚动 Banner
   ========================================================================== */
.topic-banner {
    position: relative;
    margin: 0 0 28px;
    border-radius: 18px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
}
.bn-track {
    display: flex;
    width: 100%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.bn-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    display: block;
    color: #fff;
    padding: 30px 34px;
    overflow: hidden;
    text-decoration: none;
    background: linear-gradient(120deg, var(--bn-c1) 0%, var(--bn-c2) 100%);
}
.bn-slide:hover { text-decoration: none; color: #fff; }
.bn-slide .bn-glow {
    position: absolute;
    right: -60px;
    top: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%);
}
.bn-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.bn-emoji {
    font-size: 54px;
    line-height: 1;
    animation: tpFloat 4s ease-in-out infinite alternate;
}
.bn-text { flex: 1; min-width: 240px; }
.bn-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 3px 10px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .35);
}
.bn-text h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.bn-text p { color: rgba(255, 255, 255, .9); font-size: 14px; margin: 0; }
.bn-cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    transition: transform .25s ease;
}
.bn-slide:hover .bn-cta { transform: translateX(4px); }
.bn-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, .45);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    z-index: 3;
    transition: opacity .25s ease, background .25s ease;
}
.topic-banner:hover .bn-nav { opacity: 1; }
.bn-nav:hover { background: rgba(15, 23, 42, .75); }
.bn-prev { left: 12px; }
.bn-next { right: 12px; }
.bn-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
}
.bn-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: all .3s ease;
}
.bn-dot.active { width: 26px; background: #fff; }

/* ==========================================================================
   专题落地页 (topic.html)
   ========================================================================== */
.topic-page { --theme: #3b82f6; }
.tp-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 0;
    margin-bottom: 34px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .08);
}
.tp-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.tp-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 23, 42, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .04) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(circle at 80% 50%, #000, transparent 75%);
    mask-image: radial-gradient(circle at 80% 50%, #000, transparent 75%);
}
.tp-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 56px 48px;
}
.tp-hero-text { text-align: left; }
.tp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: var(--theme);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}
.tp-hero-emoji { font-size: 18px; }
.tp-hero-title {
    color: #0f172a;
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 900;
    margin: 0 0 10px;
    line-height: 1.12;
}
.tp-hero-slogan {
    color: #1f2937;
    font-size: clamp(16px, 2.4vw, 21px);
    font-weight: 700;
    margin: 0 0 6px;
}
.tp-hero-sub { color: #475569; font-size: 15px; margin: 0 0 14px; }
.tp-hero-desc { color: #64748b; font-size: 14px; max-width: 640px; margin: 0 0 26px; line-height: 1.8; }
.tp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 22px; }
.tp-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .05);
    border: 1px solid rgba(15, 23, 42, .08);
    font-size: 12.5px;
    color: #475569;
}
.tp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease;
}
.tp-btn:hover { text-decoration: none; transform: translateY(-2px); }
.tp-btn-primary { background: var(--theme); color: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .15); }
.tp-btn-ghost { background: rgba(15, 23, 42, .04); color: #334155; border: 1px solid rgba(15, 23, 42, .1); }
.tp-btn-lg { padding: 14px 30px; font-size: 16px; }

.tp-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tp-infinity {
    width: 100%;
    max-width: 480px;
    height: auto;
    animation: tpFloat 6s ease-in-out infinite alternate;
}
.tp-app-icons rect { animation: tpPulse 3s ease-in-out infinite alternate; }
.tp-app-icons rect:nth-child(2) { animation-delay: .4s; }
.tp-app-icons rect:nth-child(3) { animation-delay: .8s; }
.tp-app-icons rect:nth-child(4) { animation-delay: 1.2s; }
.tp-app-icons rect:nth-child(5) { animation-delay: 1.6s; }
.tp-app-icons rect:nth-child(6) { animation-delay: 2s; }

.tp-section { margin-bottom: 36px; }
.tp-section-head { margin-bottom: 18px; text-align: center; }
.tp-section-title { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.tp-section-sub { color: #64748b; font-size: 14px; margin: 0; }

.tp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.tp-feature {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    border: 1px solid #e8edf3;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tp-feature:hover {
    transform: translateY(-5px);
    border-color: var(--theme);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
}
.tp-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
    background: var(--theme);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
}
.tp-feature-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.tp-feature-text { color: #64748b; font-size: 13.5px; margin: 0; line-height: 1.7; }

.tp-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.tp-post {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8edf3;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tp-post:hover {
    transform: translateY(-6px);
    border-color: var(--theme);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .14);
    text-decoration: none;
}
.tp-post-cover {
    position: relative;
    height: 130px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--theme) 16%, #ffffff);
}
.tp-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.tp-post-ph span { font-size: 40px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .12)); }
.tp-pin {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 11.5px;
    font-weight: 700;
}
.tp-post-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.tp-post-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.5;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-post:hover .tp-post-title { color: var(--theme); }
.tp-post-excerpt {
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
    margin: 0 0 12px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-post-meta { display: flex; gap: 14px; color: #94a3b8; font-size: 12px; }
.tp-empty { text-align: center; color: #94a3b8; padding: 40px 0; }

.tp-cta {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 44px 30px;
    text-align: center;
    background: color-mix(in srgb, var(--theme) 12%, #ffffff);
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .06);
}
.tp-cta-inner { position: relative; z-index: 2; }
.tp-cta h2 { color: #0f172a; font-size: clamp(22px, 3.5vw, 30px); font-weight: 800; margin: 0 0 10px; }
.tp-cta p { color: #64748b; margin: 0 0 22px; font-size: 14.5px; }

@keyframes tpFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-14px); }
}
@keyframes tpPulse {
    from { opacity: .72; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .bn-slide { padding: 22px 20px 30px; }
    .bn-emoji { font-size: 40px; }
    .bn-text h3 { font-size: 19px; }
    .bn-cta { padding: 8px 14px; font-size: 13px; }
    .tp-hero-inner {
        grid-template-columns: 1fr;
        padding: 36px 24px 40px;
        gap: 28px;
        text-align: center;
    }
    .tp-hero-text { text-align: center; }
    .tp-hero-visual { order: -1; }
    .tp-infinity { max-width: 300px; }
    .tp-cta { padding: 32px 20px; }
}