:root {
  --primary:#0a4d8c; --primary-dark:#073868; --accent:#00a0e9; --accent2:#00c4b4;
  --bg:#f0f4f8; --surface:#fff; --border:#e2e8f0; --text:#1a1a2e; --text-2:#6b7280; --text-3:#94a3b8;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06); --shadow:0 2px 12px rgba(0,0,0,.08); --shadow-lg:0 8px 30px rgba(0,0,0,.12);
  --radius:8px; --radius-lg:12px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC",sans-serif;background:var(--bg);color:var(--text);line-height:1.7;}
a{text-decoration:none;color:var(--accent);}
a:hover{text-decoration:underline;}

/* HEADER */
.header{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;padding:10px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.header-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-size:20px;font-weight:800;display:flex;align-items:center;gap:6px;color:#fff;}
.logo-icon{width:28px;height:28px;background:var(--accent);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.nav{flex:1;display:flex;justify-content:center;gap:20px;align-items:center;}
.nav a{color:rgba(255,255,255,.85);font-size:14px;transition:color .2s;text-decoration:none;}
.nav a:hover{color:var(--accent);text-decoration:none;}
.nav .cta{background:var(--accent);color:#fff;padding:6px 14px;border-radius:5px;font-weight:600;font-size:13px;}
.nav-auth{flex-shrink:0;}

/* BREADCRUMB */
.breadcrumb{max-width:860px;margin:0 auto;padding:16px 20px 0;}
.breadcrumb a{color:var(--text-2);font-size:13px;}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb span{color:var(--text-3);font-size:13px;margin:0 6px;}
.breadcrumb .current{color:var(--text);font-size:13px;font-weight:500;}

/* ARTICLE */
.article-wrap{max-width:860px;margin:20px auto 60px;padding:0 20px;}
.article-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:40px 48px;}
@media(max-width:768px){.article-card{padding:24px 20px;}}
.article-card h1{font-size:28px;font-weight:800;color:var(--text);margin-bottom:8px;line-height:1.3;letter-spacing:-0.3px;}
.article-card 
.article-card .cat-badge{display:inline-block;background:var(--tag-bg,#eef4ff);color:var(--primary);font-size:12px;padding:3px 10px;border-radius:12px;border:1px solid var(--tag-border,#bfdbfe);margin-bottom:20px;}
.article-card h2{font-size:20px;font-weight:700;color:var(--primary-dark);margin:32px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--accent);display:inline-block;}
.article-card h3{font-size:16px;font-weight:600;color:var(--text);margin:24px 0 8px;}
.article-card p{margin:0 0 14px;font-size:15px;color:var(--text);line-height:1.8;}
.article-card ul,.article-card ol{margin:0 0 14px 20px;font-size:15px;}
.article-card li{margin-bottom:6px;line-height:1.7;}
.article-card table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14px;}
.article-card th{background:var(--primary);color:#fff;padding:10px 14px;text-align:left;font-weight:600;}
.article-card td{padding:9px 14px;border-bottom:1px solid var(--border);}
.article-card tr:hover td{background:var(--bg);}
.article-card blockquote{border-left:4px solid var(--accent);margin:14px 0;padding:12px 20px;background:var(--bg);border-radius:0 var(--radius) var(--radius) 0;font-size:14px;color:var(--text-2);}
.article-card .key-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0 20px;}
.article-card .spec-item{background:var(--bg);padding:14px;border-radius:var(--radius);}
.article-card .spec-label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.article-card .spec-value{font-size:15px;font-weight:600;color:var(--primary);}

/* TOC */
.toc{background:var(--bg);border-radius:var(--radius);padding:16px 20px;margin:20px 0;}
.toc-title{font-size:13px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;}
.toc ul{list-style:none;margin:0;padding:0;}
.toc li{margin:4px 0;}
.toc a{font-size:13.5px;color:var(--text-2);transition:color .15s;text-decoration:none;}
.toc a:hover{color:var(--primary);text-decoration:none;}

/* BACK LINK */
.back-link{margin-top:28px;padding-top:16px;border-top:1px solid var(--border);}
.back-link a{display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--accent);font-weight:500;}
.back-link a:hover{color:var(--primary);text-decoration:none;}

/* RESPONSIVE */
@media(max-width:768px){
  .article-card h1{font-size:22px;}
  .article-card h2{font-size:18px;}
  .header-inner{gap:8px;}
  .nav{gap:10px;}
  .nav a{font-size:12px;}
}

    /* Mobile hamburger menu */
    .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 4px;
        background: none;
        border: none;
    }
    .hamburger span {
        width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.3s;
    }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
    .mobile-nav {
        display: none;
        position: fixed; top: 48px; left: 0; right: 0; bottom: 0;
        background: rgba(10,77,140,0.97); z-index: 99;
        flex-direction: column; padding: 24px 20px; gap: 0;
        overflow-y: auto;
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav a {
        color: #fff; font-size: 17px; padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,0.12); text-decoration: none;
    }
    .mobile-nav a:hover { color: #00a0e9; text-decoration: none; }
    .mobile-nav .mobile-auth { margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; }
    .mobile-nav .mobile-auth a { border-bottom: none; }
    .mobile-nav .mobile-auth .cta-mobile {
        display: inline-block; background: #00a0e9; color: #fff;
        padding: 10px 24px; border-radius: 6px; font-weight: 600; font-size: 15px;
        margin-top: 12px; text-align: center; width: 100%; box-sizing: border-box;
    }
    @media (max-width: 768px) {
        .hamburger { display: flex; }
        .nav { display: none !important; }
        .nav-auth { display: none !important; }
        .mobile-nav .mobile-user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
        .mobile-nav .mobile-user-info img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); }
        .mobile-nav .mobile-user-info span { color: #fff; font-size: 15px; }
    }
    @media (min-width: 769px) {
        .mobile-nav { display: none !important; }
    }