/* ─── Article Hero ─────────────────────────────────────────── */ .art-hero { padding: 110px 0 0; background: linear-gradient(160deg, #f5f3ff 0%, #f8f9ff 40%, #fff 100%); border-bottom: 1px solid rgba(0,0,0,.07); }
.art-hero-inner { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: end; }
.art-hero-text { padding-bottom: 52px; }
.art-hero .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: #9ca3af; margin-bottom: 22px; }
.art-hero .breadcrumb a { color: #6b7280; text-decoration: none; }
.art-hero .breadcrumb a:hover { color: #6000ff; }
.art-hero .breadcrumb i { font-size: .55rem; }
.art-hero .cat-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2); color: #3b82f6; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.art-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -.025em; color: #0d0a1f; font-weight: 800; margin: 0 0 16px; }
.art-hero .art-lead { color: #525266; font-size: 1rem; line-height: 1.7; max-width: 580px; margin: 0 0 24px; }
.art-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.art-meta span { display: inline-flex; align-items: center; gap: 6px; color: #9ca3af; font-size: .8rem; }
.art-meta i { color: #3b82f6; font-size: .75rem; }
.art-meta .badge-new { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; background: linear-gradient(120deg,rgba(59,130,246,.12),rgba(96,0,255,.1)); border: 1px solid rgba(96,0,255,.15); color: #6000ff; font-size: .7rem; font-weight: 600; }
.art-hero-img { align-self: end; display: flex; align-items: flex-end; justify-content: center; padding: 28px 28px 0; }
.art-hero-img img { width: 100%; max-width: 260px; height: 200px; object-fit: contain; display: block; }
/* ─── Article Shell ─────────────────────────────────────────── */ .art-shell { padding: 64px 0 100px; background: #fafafb; }
.art-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
/* ─── Sidebar ──────────────────────────────────────────────── */ .art-sidebar { position: sticky; top: 100px; }
.art-toc { background: #fff; border: 1px solid rgba(96,0,255,.1); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(96,0,255,.06), 0 1px 3px rgba(0,0,0,.04); margin-bottom: 18px; }
.art-toc h6 { display: flex; align-items: center; gap: 7px; font-size: .67rem; font-weight: 700; letter-spacing: .01em; text-transform: none; color: #9ca3af; margin: 0; padding: 13px 16px 11px; border-bottom: 1px solid rgba(0,0,0,.05); }
.art-toc h6 i { color: #c4b5fd; font-size: .72rem; }
.art-nav { padding: 8px; counter-reset: toc; }
.art-nav a { counter-increment: toc; display: flex; align-items: flex-start; gap: 9px; padding: 6px 8px; border-radius: 8px; font-size: .81rem; color: #525266; text-decoration: none; line-height: 1.35; transition: all .15s ease; border-left: 2px solid transparent; }
.art-nav a::before { content: counter(toc, decimal-leading-zero); font-size: .62rem; font-weight: 700; color: #d1d5db; min-width: 16px; padding-top: 2px; flex-shrink: 0; transition: color .15s; font-variant-numeric: tabular-nums; }
.art-nav a:hover { background: #f5f3ff; color: #6000ff; border-left-color: rgba(96,0,255,.3); }
.art-nav a:hover::before { color: #a78bfa; }
.art-nav a.active { background: #f3f4f6; color: #374151; font-weight: 600; border-left-color: #9ca3af; }
.art-nav a.active::before { color: #9ca3af; }
/* Light promo card */ .art-promo { background: #fff; border-radius: 16px; text-decoration: none; display: block; border: 1px solid rgba(96,0,255,.15); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.art-promo:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -10px rgba(96,0,255,.2); }
.art-promo-hd { background: linear-gradient(135deg, #6000ff, #ff1e80); padding: 16px 18px; }
.art-promo-hd h5 { color: #fff; font-size: .88rem; font-weight: 700; margin: 0; line-height: 1.35; }
.art-promo-bd { padding: 14px 18px 18px; }
.art-promo-bd p { font-size: .8rem; color: #6b7280; margin: 0 0 14px; line-height: 1.55; }
.art-promo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px; background: linear-gradient(135deg, #6000ff, #ff1e80); color: #fff; font-size: .77rem; font-weight: 600; }
/* ─── Main Content ──────────────────────────────────────────── */ .art-main { min-width: 0; }
.art-section { margin-bottom: 52px; padding-bottom: 52px; border-bottom: 1px solid rgba(0,0,0,.06); }
.art-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.art-section h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; color: #0d0a1f; margin: 0 0 18px; line-height: 1.2; }
.art-section h3 { font-size: 1.05rem; font-weight: 700; color: #1a1730; margin: 28px 0 12px; line-height: 1.3; }
.art-section h4 { font-size: .93rem; font-weight: 700; color: #1a1730; margin: 22px 0 8px; }
.art-section p { font-size: .93rem; line-height: 1.78; color: #374151; margin: 0 0 14px; }
.art-section ul, .art-section ol { margin: 0 0 16px 0; padding-left: 1.4em; }
.art-section li { font-size: .93rem; line-height: 1.7; color: #374151; margin-bottom: 7px; }
.art-section code { font-family: var(--font-mono); font-size: .82em; background: #f0f0f8; padding: 2px 7px; border-radius: 4px; color: #6000ff; }
.art-section pre code { background: none; padding: 0; border-radius: 0; color: inherit; font-size: inherit; }
.art-section a { color: #6000ff; text-decoration: none; }
.art-section a:hover { text-decoration: underline; }
/* Callout boxes */ .kp { display: flex; gap: 16px; background: #f5f3ff; border: 1px solid rgba(96,0,255,.12); border-radius: 14px; padding: 18px 20px; margin: 20px 0; }
.kp.kp-warn { background: #fffbeb; border-color: rgba(245,158,11,.2); }
.kp-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #6000ff; font-size: .9rem; }
.kp.kp-warn .kp-icon { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #d97706; }
.kp-body h5 { font-size: .85rem; font-weight: 700; color: #1a1730; margin: 0 0 5px; }
.kp-body p { font-size: .84rem; line-height: 1.6; color: #525266; margin: 0; }
/* Stats */ .stat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 20px 0; }
.stat-box { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 14px; padding: 20px; text-align: center; }
.stat-num { display: block; font-size: 1.8rem; font-weight: 800; color: #6000ff; letter-spacing: -.02em; line-height: 1; }
.stat-lbl { display: block; font-size: .78rem; color: #6b7280; margin-top: 7px; line-height: 1.4; }
/* Example box */ .ex-box { background: #f9fafb; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 18px 20px; margin: 18px 0; }
.ex-box h5 { font-size: .8rem; font-weight: 700; color: #1a1730; margin: 0 0 8px; text-transform: none; letter-spacing: .01em; }
/* Code blocks */ .code-block { background: #111827; border-radius: 12px; padding: 0; margin: 16px 0; overflow: hidden; }
.code-block-header { background: #1f2937; padding: 8px 14px; display: flex; align-items: center; gap: 6px; }
.code-block-header .dot-r, .code-block-header .dot-y, .code-block-header .dot-g { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.code-block-header .dot-r { background: #ef4444; }
.code-block-header .dot-y { background: #f59e0b; }
.code-block-header .dot-g { background: #10b981; }
.code-block-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.code-block-header .code-lang { font-size: .65rem; color: #6b7280; font-family: var(--font-mono); letter-spacing: .06em; }
.code-copy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 5px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #9ca3af; font-size: .65rem; font-family: var(--font-mono); cursor: pointer; transition: all .15s; line-height: 1.4; }
.code-copy-btn:hover { background: rgba(255,255,255,.13); color: #e5e7eb; }
.code-copy-btn.copied { color: #10b981; border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.08); }
.code-block-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px; }
.code-block pre { margin: 0; font-family: var(--font-mono); font-size: .79rem; line-height: 1.7; color: #e5e7eb; white-space: pre; }
.cc { color: #6b7280; }
.cs { color: #a5d6ff; }
.ck { color: #ff7b72; }
.cf { color: #d2a8ff; }
/* Platform tabs */ .p-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; border-bottom: 2px solid #e5e7eb; padding-bottom: 8px; }
.p-tab { padding: 6px 14px; font-size: .8rem; font-weight: 600; color: #6b7280; background: transparent; border: none; cursor: pointer; border-radius: 6px 6px 0 0; transition: all .2s; }
.p-tab:hover { color: #6000ff; background: #f5f3ff; }
.p-tab.active { color: #6000ff; background: #f5f3ff; box-shadow: inset 0 -2px 0 #6000ff; margin-bottom: -2px; }
.p-content { display: none; }
.p-content.active { display: block; }
/* Tables */ .tbl-wrap { overflow-x: auto; margin: 16px 0; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); }
.tbl { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tbl th { background: #f9fafb; padding: 11px 16px; text-align: left; font-weight: 700; color: #374151; border-bottom: 1px solid rgba(0,0,0,.08); font-size: .78rem; letter-spacing: .04em; }
.tbl td { padding: 11px 16px; color: #4b5563; border-bottom: 1px solid rgba(0,0,0,.05); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #fafaf9; }
/* Best-practices grid */ .bp-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 16px 0; }
/* ─── Similar Articles ──────────────────────────────────────── */ .art-related { background: #fff; padding: 72px 0 80px; border-top: 1px solid rgba(0,0,0,.06); }
.art-related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.art-related-head h2 { font-size: 1.35rem; font-weight: 800; color: #0d0a1f; letter-spacing: -.02em; margin: 0; }
.art-related-head a { font-size: .82rem; color: #6000ff; text-decoration: none; font-weight: 600; }
.art-related-head a:hover { text-decoration: underline; }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rel-card { background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.07); overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.rel-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -8px rgba(0,0,0,.12); }
.rel-card-img { aspect-ratio: 16/9; background: #f3f4f8; position: relative; overflow: hidden; flex-shrink: 0; }
.rel-card-img img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
.rel-card-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.rel-card-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.rel-card-title { font-size: .88rem; font-weight: 700; color: #0d0a1f; line-height: 1.35; margin: 0 0 8px; }
.rel-card-excerpt { font-size: .79rem; color: #6b7280; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ─── TL;DR Box ─────────────────────────────────────────────── */ .art-tldr-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; border-top: 0 solid transparent; }
.art-tldr-panel.open { max-height: 400px; border-top: 1px solid rgba(0,0,0,.08); padding: 18px 0 22px; }
.art-tldr-panel ul { font-size: .88rem; line-height: 1.7; color: #4b5563; margin: 0; padding-left: 1.3em; }
.art-tldr-panel li { margin-bottom: 5px; }
.art-tldr-panel li:last-child { margin-bottom: 0; }
.share-btn.active { background: #f3f4f6; border-color: rgba(0,0,0,.15); }
/* ─── Share Strip ────────────────────────────────────────────── */ .art-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.art-share-label { font-size: .72rem; font-weight: 600; color: #9ca3af; text-transform: none; letter-spacing: .01em; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .77rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(0,0,0,.1); background: #fff; color: #374151; cursor: pointer; transition: all .15s ease; font-family: inherit; }
.share-btn:hover { background: #f3f4f6; border-color: rgba(0,0,0,.18); color: #0d0a1f; }
.share-btn i { font-size: .78rem; }
.share-btn.share-x i { color: #000; }
.share-btn.share-li i { color: #0a66c2; }
.share-btn.share-copy i { color: #6000ff; }
/* ─── FAQ ────────────────────────────────────────────────────── */ .art-faq-item { border-bottom: 1px solid rgba(0,0,0,.07); padding: 18px 0; }
.art-faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.art-faq-q { font-size: .95rem; font-weight: 700; color: #0d0a1f; margin: 0 0 8px; line-height: 1.4; }
.art-faq-a { font-size: .88rem; color: #525266; line-height: 1.65; margin: 0; }
/* ─── Author Card ────────────────────────────────────────────── */ .art-author-section { background: #fff; border-top: 1px solid rgba(0,0,0,.07); padding: 56px 0; }
.art-author-card { display: flex; align-items: flex-start; gap: 28px; max-width: 780px; }
.art-author-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid #f3f4f6; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.art-author-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 0%; display: block; }
.art-author-info { flex: 1; }
.art-author-label { font-size: .67rem; font-weight: 700; letter-spacing: .01em; text-transform: none; color: #9ca3af; margin-bottom: 5px; }
.art-author-name { font-size: 1.15rem; font-weight: 800; color: #0d0a1f; margin: 0 0 3px; letter-spacing: -.02em; }
.art-author-title { font-size: .83rem; color: #6b7280; margin: 0 0 14px; line-height: 1.55; }
.art-author-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.art-author-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: #f3f4f6; font-size: .75rem; color: #374151; font-weight: 500; }
.art-author-tag i { color: #9ca3af; font-size: .68rem; }
.art-hero-inner { grid-template-columns: 1fr; }
.art-hero-img { display: none; }
.art-hero-text { padding-bottom: 44px; }
.art-layout { grid-template-columns: 1fr; }
.art-sidebar { position: static; }
.art-toc { display: none; }
.stat-grid { grid-template-columns: repeat(2,1fr); }
.bp-grid { grid-template-columns: 1fr; }
.rel-grid { grid-template-columns: repeat(2,1fr); }
.stat-grid { grid-template-columns: 1fr 1fr; }
.rel-grid { grid-template-columns: 1fr; }
.art-author-card { flex-direction: column; gap: 16px; }
/* ── Category Hero ──────────────────────────────────────────── */ .cat-hero { padding: 110px 0 52px; background: linear-gradient(160deg, #f5f3ff 0%, #f8f9ff 40%, #fff 100%); border-bottom: 1px solid rgba(0,0,0,.07); }
.cat-hero .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: #9ca3af; margin-bottom: 22px; }
.cat-hero .breadcrumb a { color: #6b7280; text-decoration: none; }
.cat-hero .breadcrumb a:hover { color: #6000ff; }
.cat-hero .breadcrumb i { font-size: .55rem; }
.cat-hero-inner { display: flex; align-items: flex-start; gap: 20px; }
.cat-icon-wrap { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); display: grid; place-items: center; font-size: 1.4rem; color: #10b981; }
.cat-hero h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; color: #0d0a1f; margin: 0 0 10px; line-height: 1.15; }
.cat-hero-desc { font-size: .95rem; color: #525266; line-height: 1.65; margin: 0 0 18px; }
.cat-hero-stats { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cat-hero-stats span { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #9ca3af; }
.cat-hero-stats i { color: #10b981; font-size: .72rem; }
.cat-count-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); color: #10b981; font-size: .75rem; font-weight: 600; }
/* ── Article List ───────────────────────────────────────────── */ .cat-shell { padding: 52px 0 80px; background: #fafafb; }
.car-row { display: flex; align-items: center; gap: 24px; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.07); text-decoration: none; padding: 20px; margin-bottom: 14px; transition: transform .2s, box-shadow .2s, border-color .2s; border-left: 3px solid #10b981; }
.car-row:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -8px rgba(0,0,0,.12); border-color: #10b981; }
.car-img { flex-shrink: 0; width: 110px; height: 78px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.car-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.car-body { flex: 1; min-width: 0; }
.car-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.car-meta span { font-size: .75rem; color: #9ca3af; }
.car-meta i { font-size: .7rem; }
.car-featured { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(120deg,rgba(255,30,128,.1),rgba(96,0,255,.1)); border: 1px solid rgba(160,123,255,.25); color: #7c3aed; font-size: .67rem; font-weight: 600; }
.car-title { font-size: 1rem; font-weight: 700; color: #0d0a1f; margin: 0 0 6px; line-height: 1.3; }
.car-row:hover .car-title { color: #6000ff; }
.car-excerpt { font-size: .84rem; color: #6b7280; line-height: 1.55; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.car-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.car-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #f3f4f6; font-size: .7rem; color: #6b7280; }
.car-arrow { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #f9fafb; border: 1px solid rgba(0,0,0,.07); display: grid; place-items: center; color: #9ca3af; font-size: .8rem; transition: all .2s; }
.car-row:hover .car-arrow { background: #10b981; color: #fff; border-color: #10b981; }
/* ── Pagination ─────────────────────────────────────────────── */ .pag-nav { display: flex; align-items: center; gap: 8px; justify-content: center; padding-top: 40px; flex-wrap: wrap; }
.pag-btn, .pag-num { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 10px; text-decoration: none; font-size: .84rem; font-weight: 600; transition: all .18s; }
.pag-num { padding: 9px 14px; background: #fff; border: 1px solid rgba(0,0,0,.09); color: #374151; }
.pag-num:hover { background: #f5f3ff; color: #6000ff; border-color: rgba(96,0,255,.2); }
.pag-num.pag-active { background: linear-gradient(135deg,#6000ff,#ff1e80); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(96,0,255,.3); }
.pag-btn { background: #fff; border: 1px solid rgba(0,0,0,.09); color: #374151; }
.pag-btn:hover { background: #f5f3ff; color: #6000ff; border-color: rgba(96,0,255,.2); }
/* ── Page summary ───────────────────────────────────────────── */ .cat-summary { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.cat-summary-text { font-size: .85rem; color: #9ca3af; }
.cat-summary-text strong { color: #374151; }
.back-to-learn { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: #6000ff; text-decoration: none; }
.back-to-learn:hover { text-decoration: underline; }
.car-row { flex-wrap: wrap; padding: 16px; }
.car-img { width: 100%; height: 120px; }
.car-arrow { display: none; }
.cat-hero { padding: 100px 0 40px; }
.cat-icon-wrap { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); display: grid; place-items: center; font-size: 1.4rem; color: #3b82f6; }
.cat-hero-stats i { color: #3b82f6; font-size: .72rem; }
.cat-count-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); color: #3b82f6; font-size: .75rem; font-weight: 600; }
.car-row { display: flex; align-items: center; gap: 24px; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.07); text-decoration: none; padding: 20px; margin-bottom: 14px; transition: transform .2s, box-shadow .2s, border-color .2s; border-left: 3px solid #3b82f6; }
.car-row:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -8px rgba(0,0,0,.12); border-color: #3b82f6; }
.car-row:hover .car-arrow { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.cat-icon-wrap { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); display: grid; place-items: center; font-size: 1.4rem; color: #f59e0b; }
.cat-hero-stats i { color: #f59e0b; font-size: .72rem; }
.cat-count-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); color: #f59e0b; font-size: .75rem; font-weight: 600; }
.car-row { display: flex; align-items: center; gap: 24px; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.07); text-decoration: none; padding: 20px; margin-bottom: 14px; transition: transform .2s, box-shadow .2s, border-color .2s; border-left: 3px solid #f59e0b; }
.car-row:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -8px rgba(0,0,0,.12); border-color: #f59e0b; }
.car-row:hover .car-arrow { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.cat-icon-wrap { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2); display: grid; place-items: center; font-size: 1.4rem; color: #8b5cf6; }
.cat-hero-stats i { color: #8b5cf6; font-size: .72rem; }
.cat-count-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2); color: #8b5cf6; font-size: .75rem; font-weight: 600; }
.car-row { display: flex; align-items: center; gap: 24px; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.07); text-decoration: none; padding: 20px; margin-bottom: 14px; transition: transform .2s, box-shadow .2s, border-color .2s; border-left: 3px solid #8b5cf6; }
.car-row:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -8px rgba(0,0,0,.12); border-color: #8b5cf6; }
.car-row:hover .car-arrow { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }
.cat-icon-wrap { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); display: grid; place-items: center; font-size: 1.4rem; color: #ef4444; }
.cat-hero-stats i { color: #ef4444; font-size: .72rem; }
.cat-count-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; font-size: .75rem; font-weight: 600; }
.car-row { display: flex; align-items: center; gap: 24px; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.07); text-decoration: none; padding: 20px; margin-bottom: 14px; transition: transform .2s, box-shadow .2s, border-color .2s; border-left: 3px solid #ef4444; }
.car-row:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -8px rgba(0,0,0,.12); border-color: #ef4444; }
.car-row:hover .car-arrow { background: #ef4444; color: #fff; border-color: #ef4444; }
.ln-hero{padding:130px 0 60px;text-align:center}
.ln-hero .eyebrow{justify-content:center;color:rgba(255,255,255,.7)}
.ln-hero .eyebrow::before{background:rgba(255,255,255,.45)}
.ln-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.1;letter-spacing:-.02em;margin:18px auto 18px;color:#fff;font-weight:700;max-width:900px}
.ln-hero .lead{max-width:740px;margin:0 auto;color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.6}
.ln-pills{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;margin-top:36px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start}
.ln-pills::-webkit-scrollbar{display:none}
.ln-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);font-size:.86rem;font-weight:500;text-decoration:none;transition:all .2s ease;cursor:pointer;white-space:nowrap}
.ln-pill:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.ln-pill.active{background:linear-gradient(135deg,rgba(255,30,128,.25),rgba(96,0,255,.25));border-color:rgba(160,123,255,.4);color:#fff}
.ln-pill i{font-size:.82rem;opacity:.85}
.ln-shell{padding:80px 0 110px;background:#fafafb}
.ln-section{margin-bottom:72px;scroll-margin-top:96px}
.ln-section:last-child{margin-bottom:0}
.ln-sec-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.ln-sec-head .ttl{display:flex;align-items:center;gap:14px}
.ln-sec-head h2{font-size:clamp(1.4rem,2.2vw,1.7rem);line-height:1.2;letter-spacing:-.01em;margin:0;color:#0d0a1f;font-weight:700}
.ln-sec-head .sec-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#FFE5EE,#E8DCFF);color:#9C32B0;font-size:1rem}
.ln-sec-head .desc{color:#525266;font-size:.92rem;margin:0;flex-basis:100%;margin-top:-4px;padding-left:52px}
.ln-sec-head .view-all{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.74rem;text-transform:none;letter-spacing: .01em;color:#6000ff;text-decoration:none;font-weight:600}
.ln-sec-head .view-all i{transition:transform .2s ease}
.ln-sec-head .view-all:hover i{transform:translateX(3px)}
.ln-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ln-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ln-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -20px rgba(0,0,0,.16);border-color:rgba(96,0,255,.18);text-decoration:none;color:inherit}
.ln-card .img{aspect-ratio:16/9;overflow:hidden;background:#f3f4f8;position:relative}
.ln-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ln-card .img img[src$=".svg"]{object-fit:contain;padding:20px}
.ln-card.feat .img.svg-img::after{display:none}
.ln-card:hover .img img{transform:scale(1.04)}
.ln-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.ln-card .cat{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:#9C32B0;font-weight:600;margin-bottom:10px}
.ln-card .title{font-size:1.05rem;font-weight:700;line-height:1.3;margin:0 0 10px;color:#0d0a1f;letter-spacing:-.005em}
.ln-card .ex{font-size:.88rem;line-height:1.55;color:#525266;margin:0 0 16px;flex:1}
.ln-card .meta{display:flex;align-items:center;gap:14px;color:#525266;font-size:.78rem;font-family:var(--font-mono);letter-spacing:.04em;border-top:1px solid rgba(0,0,0,.05);padding-top:14px;flex-wrap:wrap}
.ln-card .meta i{font-size:.74rem;margin-right:5px;color:#9C32B0}
.ln-card .badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:linear-gradient(120deg,rgba(255,30,128,.1),rgba(96,0,255,.12));color:#6000ff;font-size:.7rem;font-weight:600}
.ln-card.feat{grid-column:span 2;flex-direction:row;background:linear-gradient(135deg,#170A33 0%, #0A0520 100%);color:#fff;border-color:rgba(255,255,255,.1);position:relative;overflow:hidden}
.ln-card.feat::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 100% 0%, rgba(255,30,128,.18), transparent 60%),radial-gradient(ellipse 60% 80% at 0% 100%, rgba(96,0,255,.22), transparent 60%);pointer-events:none}
.ln-card.feat:hover{transform:translateY(-6px);box-shadow:0 24px 50px -22px rgba(96,0,255,.4);color:#fff}
.ln-card.feat .img{flex:0 0 46%;aspect-ratio:auto}
.ln-card.feat .img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 50%,rgba(15,5,35,.85) 100%)}
.ln-card.feat .ln-card-body{padding:36px 36px 36px 32px;justify-content:center;position:relative;z-index:1}
.ln-card.feat .cat{color:rgba(255,30,128,.9)}
.ln-card.feat .title{color:#fff;font-size:1.4rem;line-height:1.25}
.ln-card.feat .ex{color:rgba(255,255,255,.78);font-size:.95rem}
.ln-card.feat .cta{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:.9rem;margin-top:6px;padding:10px 20px;border-radius:999px;background:linear-gradient(135deg,#FF1E80,#6000FF);width:fit-content;border:0}
.ln-card.feat .cta i{transition:transform .2s ease}
.ln-card.feat:hover .cta i{transform:translateX(3px)}
.ln-loading{padding:60px 0;text-align:center;color:#525266;font-size:.95rem}
.ln-loading .spinner{width:32px;height:32px;border:3px solid rgba(96,0,255,.15);border-top-color:#6000FF;border-radius:50%;animation:lnspin 1s linear infinite;margin:0 auto 14px}
to{transform:rotate(360deg)}
.ln-grid{grid-template-columns:1fr}
.ln-card.feat{grid-column:span 1;flex-direction:column}
.ln-card.feat .img{flex:0 0 auto;aspect-ratio:16/9}
.ln-card.feat .img::after{display:none}
.ln-card.feat .ln-card-body{padding:24px}
.ln-hero{padding:110px 0 50px}
.ln-shell{padding:60px 0 90px}
.ln-grid{grid-template-columns:repeat(2,1fr)}
.ln-card.feat{grid-column:span 2}