/* AABBGG88 轻量原创主题：保留原有结构，更新视觉层次并加入文章系统 */
:root {
  --primary-color: #091426;
  --secondary-color: #79e2dc;
  --accent-color: #7357e8;
  --highlight-color: #f4c96b;
  --text-color: #f7f9ff;
  --text-secondary: #bcc7da;
  --bg-dark: #0d1b31;
  --card-bg: rgba(16, 31, 56, 0.88);
  --border-color: rgba(121, 226, 220, 0.18);
  --gradient: linear-gradient(135deg, #79e2dc 0%, #7357e8 58%, #f4c96b 115%);
  --gradient-dark: linear-gradient(135deg, #171d48 0%, #0b4d5a 60%, #091426 100%);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  --radius: 20px;
}

body {
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 8% 8%, rgba(115, 87, 232, 0.20), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(121, 226, 220, 0.13), transparent 30rem),
    var(--primary-color);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

header {
  background: rgba(9, 20, 38, 0.91);
  border-bottom: 1px solid rgba(121, 226, 220, 0.18);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.logo { letter-spacing: .025em; text-shadow: 0 0 26px rgba(121,226,220,.2); flex-shrink:0; white-space:nowrap; }
.logo-icon { color: var(--secondary-color); filter: drop-shadow(0 0 8px rgba(121,226,220,.55)); }
.logo > span:not(.logo-icon) { margin-left:.42rem; padding-left:.5rem; border-left:1px solid rgba(244,201,107,.35); }

nav a { border-radius: 10px; position:relative; }
nav a::after { content:""; position:absolute; left:50%; right:50%; bottom:.22rem; height:2px; background:var(--gradient); transition:.25s ease; }
nav a:hover::after, nav a[aria-current="page"]::after { left:.7rem; right:.7rem; }
nav a:hover, nav a[aria-current="page"] { background:rgba(121,226,220,.07); }

.banner, .service-hero {
  position:relative;
  background:
    linear-gradient(112deg, rgba(9,20,38,.98), rgba(24,29,72,.88) 55%, rgba(11,77,90,.78)),
    radial-gradient(circle at 82% 15%, rgba(244,201,107,.18), transparent 23rem);
  border-bottom:1px solid rgba(121,226,220,.18);
  overflow:hidden;
}
.banner::before, .service-hero::before { content:""; position:absolute; width:360px; height:360px; right:-110px; top:-175px; border:1px solid rgba(121,226,220,.18); transform:rotate(28deg); border-radius:46px; box-shadow:0 0 0 38px rgba(115,87,232,.04),0 0 0 76px rgba(121,226,220,.025); }
.banner::after, .service-hero::after { content:""; position:absolute; inset:auto 8% 0; height:1px; background:linear-gradient(90deg,transparent,rgba(121,226,220,.75),rgba(244,201,107,.55),transparent); pointer-events:none; }

.eyebrow, .section-kicker { letter-spacing:.16em; text-transform:uppercase; }
.section-title h2::after { width:76px; height:3px; background:var(--gradient); box-shadow:0 0 18px rgba(121,226,220,.3); }

.btn { color:#07111f; border:1px solid rgba(255,255,255,.18); box-shadow:0 13px 30px rgba(72,63,190,.25); }
.btn-outline { color:#9af2eb; border-color:rgba(121,226,220,.65); background:rgba(9,20,38,.34); }
.btn-outline:hover { color:#07111f; background:#79e2dc; }

.service-link-card, .feature-card, .step-card, .download-card, .contact-card, .service-info-card, .faq-list details, .service-notice-panel, .article-card, .sidebar-card, .article-content {
  background:linear-gradient(145deg,rgba(20,37,67,.94),rgba(10,25,46,.94));
  border:1px solid rgba(121,226,220,.15);
  box-shadow:0 16px 42px rgba(0,0,0,.22);
}
.service-link-card, .feature-card, .step-card, .service-info-card, .article-card { position:relative; overflow:hidden; }
.service-link-card::before, .feature-card::before, .step-card::before, .service-info-card::before, .article-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--gradient); opacity:.9; }
.service-link-card::after, .article-card::after { content:""; position:absolute; width:92px; height:92px; right:-48px; top:-48px; border:1px solid rgba(244,201,107,.18); transform:rotate(45deg); }
.service-link-card:hover, .feature-card:hover, .download-card:hover, .service-info-card:hover, .article-card:hover { border-color:rgba(121,226,220,.42); box-shadow:0 22px 54px rgba(0,0,0,.32); transform:translateY(-5px); }
.domain-tip, .security-note, .service-notice-panel { border-left:3px solid var(--secondary-color); }
footer { background:linear-gradient(180deg,#0c1930,#050b15); border-top:1px solid rgba(121,226,220,.16); }

/* 首页和目录文章卡片 */
.articles-preview-section { background:linear-gradient(180deg,rgba(115,87,232,.045),rgba(121,226,220,.025)); }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; }
.article-card { border-radius:var(--radius); padding:1.65rem; transition:.3s ease; min-height:290px; display:flex; flex-direction:column; }
.article-card-number { font-size:2.3rem; line-height:1; font-weight:800; color:rgba(121,226,220,.16); margin-bottom:.8rem; }
.article-card-tag { color:var(--secondary-color); font-size:.78rem; letter-spacing:.12em; margin-bottom:.55rem; }
.article-card h2, .article-card h3 { font-size:1.18rem; line-height:1.65; margin-bottom:.75rem; }
.article-card h2 a, .article-card h3 a { color:var(--text-color); }
.article-card p { color:var(--text-secondary); flex-grow:1; }
.article-card-link { display:inline-flex; margin-top:1.1rem; color:var(--secondary-color); font-weight:700; }
.article-card-meta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.9rem; color:var(--text-secondary); font-size:.84rem; }

/* 文章目录与正文 */
.article-directory-hero .service-hero-content, .article-hero .service-hero-content { max-width:980px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; margin-bottom:1.25rem; color:var(--text-secondary); font-size:.9rem; }
.breadcrumb a { color:var(--secondary-color); }
.article-meta { display:flex; flex-wrap:wrap; gap:.75rem 1.3rem; margin-top:1.3rem; color:var(--text-secondary); font-size:.92rem; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:2rem; align-items:start; }
.article-content { border-radius:24px; padding:clamp(1.35rem,3vw,2.7rem); }
.article-lead { font-size:1.08rem; line-height:2; color:#dce5f3; padding:1.25rem 1.35rem; border-radius:16px; background:rgba(121,226,220,.055); border:1px solid rgba(121,226,220,.15); }
.article-section { margin-top:2rem; }
.article-section h2 { font-size:1.4rem; margin-bottom:.8rem; color:var(--secondary-color); }
.article-section p { color:var(--text-secondary); line-height:2.05; font-size:1.03rem; text-align:justify; }
.article-notice { margin-top:2.2rem; padding:1.5rem; border-radius:16px; }
.article-notice h2 { font-size:1.25rem; margin-bottom:.65rem; }
.article-navigation { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.article-nav-link { display:flex; flex-direction:column; gap:.45rem; padding:1.1rem 1.2rem; border-radius:14px; border:1px solid rgba(121,226,220,.17); background:rgba(9,20,38,.45); }
.article-nav-link.next { text-align:right; }
.article-nav-link span { color:var(--secondary-color); font-size:.82rem; }
.article-nav-link strong { color:var(--text-color); line-height:1.55; }
.article-sidebar { position:sticky; top:104px; display:grid; gap:1rem; }
.sidebar-card { border-radius:18px; padding:1.35rem; }
.sidebar-card h2 { font-size:1.15rem; margin-bottom:.9rem; }
.sidebar-card ul { list-style:none; display:grid; gap:.62rem; }
.sidebar-card li { padding-bottom:.62rem; border-bottom:1px solid rgba(121,226,220,.09); }
.sidebar-card li:last-child { border-bottom:0; }
.sidebar-card li a { color:var(--text-secondary); font-size:.9rem; line-height:1.55; }
.sidebar-card li a:hover { color:var(--secondary-color); }
.sidebar-card.compact p { color:var(--text-secondary); margin:.35rem 0; word-break:break-all; }
.sidebar-btn { width:100%; margin-top:1rem; text-align:center; }

@media (min-width:769px) {
  nav ul { gap:.12rem; }
  nav a { padding-left:.68rem; padding-right:.68rem; }
  .banner-content { max-width:920px; }
}
@media (min-width:1024px) {
  header { padding:.76rem 0; }
  .logo { font-size:1.08rem; line-height:1.15; }
  .logo-icon { margin-right:.34rem; font-size:1.25rem; }
  .logo > span:not(.logo-icon) { font-size:.78em; }
  nav li { margin-left:.22rem; }
  nav a { padding:.42rem .44rem; font-size:.86rem; }
}
@media (max-width:980px) {
  .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:1fr; }
  .article-sidebar { position:static; }
}
@media (max-width:768px) {
  nav { background:rgba(9,20,38,.99); }
  nav a { border-radius:0; }
  nav a::after { display:none; }
  .logo > span:not(.logo-icon) { margin-left:.28rem; padding-left:.34rem; }
  .article-grid { grid-template-columns:1fr; }
  .article-card { min-height:auto; }
  .article-navigation { grid-template-columns:1fr; }
  .article-nav-link.next { text-align:left; }
  .article-content { padding:1.15rem; }
  .article-section p { text-align:left; }
}