:root{
  --navy:#082b57;--navy2:#061f40;--blue:#1769e0;--green:#0a8a36;
  --text:#10233f;--muted:#60708a;--line:#dbe5f1;--card:#fff;--bg:#f7faff;
  --shadow:0 12px 30px rgba(25,55,95,.10)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);
background:radial-gradient(circle at 8% 12%,rgba(49,141,255,.09),transparent 25rem),var(--bg)}
body.dark{--text:#eaf2ff;--muted:#aab8cc;--line:#29405d;--card:#10243d;--bg:#07182b}
button,input{font:inherit}.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
.topbar{background:linear-gradient(90deg,var(--navy2),var(--navy));color:#fff;font-size:13px}
.topbar-content{min-height:40px;display:flex;align-items:center;gap:28px}.topbar-right{margin-left:auto}
.header{background:rgba(255,255,255,.96);border-bottom:1px solid #e5edf7;position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}
.dark .header{background:rgba(10,29,50,.94);border-color:var(--line)}
.header-content{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px;color:var(--navy);text-decoration:none}.dark .brand{color:#fff}
.brand-icon{width:50px;height:58px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(160deg,#2878ef,#0c55c5);color:#fff;font-size:35px}
.brand strong{display:block;font-size:29px;line-height:1}.brand strong span{color:var(--green)}.brand small{display:block;color:var(--muted);margin-top:7px}
.nav{display:flex;gap:8px}.nav a{color:var(--text);text-decoration:none;font-weight:700;padding:12px 13px;border-radius:9px}.nav a:hover,.nav a.active{background:rgba(23,105,224,.10);color:var(--blue)}
.theme-button{border:1px solid var(--line);background:var(--card);color:var(--text);width:44px;height:44px;border-radius:50%;cursor:pointer}
.hero{padding:54px 0;background:linear-gradient(135deg,rgba(229,241,255,.78),rgba(240,255,246,.75))}
.dark .hero{background:linear-gradient(135deg,rgba(17,61,105,.5),rgba(11,63,39,.35))}
.hero-content{display:flex;align-items:center;justify-content:space-between;gap:30px}.eyebrow,.section-heading span{font-size:12px;font-weight:900;letter-spacing:1.4px;color:var(--blue)}
.hero h1{font-size:clamp(35px,5vw,54px);line-height:1.08;margin:12px 0;color:var(--navy);max-width:780px}.dark .hero h1{color:#fff}
.hero p{font-size:18px;line-height:1.6;color:var(--muted);max-width:760px}.hero-icon{font-size:90px}
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;padding:34px 0}.section-heading h2{font-size:30px;margin:6px 0 20px}
.posts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.post-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:.2s}.post-card:hover{transform:translateY(-5px)}
.post-image{height:170px;display:grid;place-items:center;font-size:64px}.blue-image{background:linear-gradient(135deg,#dcecff,#f4f9ff)}.green-image{background:linear-gradient(135deg,#def7e7,#f4fff8)}.purple-image{background:linear-gradient(135deg,#eee4ff,#faf7ff)}.orange-image{background:linear-gradient(135deg,#fff0d7,#fffaf1)}
.post-content{padding:20px}.category{display:inline-block;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:1px;background:#e9f3ff;border-radius:999px;padding:7px 10px}
.post-content h3{font-size:21px;line-height:1.3;margin:13px 0 9px}.post-content p{color:var(--muted);line-height:1.55}.post-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:16px;font-size:12px}.post-footer a{color:var(--blue);font-weight:900;text-decoration:none}
.sidebar{display:flex;flex-direction:column;gap:18px}.side-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}.side-card h2{font-size:18px;margin:0 0 15px}.side-card>a{display:block;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);padding:11px 0}.search-box{display:flex}.search-box input{width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:8px 0 0 8px;background:var(--card);color:var(--text)}.search-box button{border:0;background:var(--blue);color:#fff;border-radius:0 8px 8px 0;padding:0 13px;font-weight:800}.calculator-card{text-align:center;background:linear-gradient(145deg,var(--navy),#10539b);color:#fff}.calculator-card>span{font-size:48px}.calculator-card p{color:#dceaff}.calculator-card a{display:inline-block!important;background:#fff;color:var(--navy)!important;padding:12px 16px!important;border:0!important;border-radius:8px;font-weight:900}
.article-page{max-width:900px;padding:46px 0}.article-header{text-align:center;margin-bottom:35px}.article-header h1{font-size:clamp(35px,5vw,54px);line-height:1.12;margin:16px 0}.article-subtitle{font-size:19px;line-height:1.6;color:var(--muted);max-width:760px;margin:0 auto}.article-meta{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:20px;color:var(--muted);font-size:13px}
.article-content{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(22px,5vw,48px);box-shadow:var(--shadow);font-size:18px;line-height:1.8}.article-content h2{font-size:30px;line-height:1.25;margin:40px 0 12px;color:var(--navy)}.dark .article-content h2{color:#fff}.article-content h3{font-size:23px}.article-content p{margin:0 0 20px}.article-content li{margin:8px 0}.highlight-box,.example-box{padding:18px;border-radius:10px;margin:24px 0}.highlight-box{background:#fff5dd;border-left:5px solid #e79a00}.example-box{background:#eaf6ef;border-left:5px solid var(--green)}.dark .highlight-box{background:#493a16}.dark .example-box{background:#143b26}
.article-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:24px;border-radius:14px;background:linear-gradient(135deg,var(--navy),#1262b6);color:#fff}.article-cta span{font-size:13px}.article-cta h2{margin:5px 0 0}.article-cta a{background:#fff;color:var(--navy);padding:13px 18px;border-radius:8px;font-weight:900;text-decoration:none;white-space:nowrap}.article-warning{margin:18px 0;background:#edf5ff;border:1px solid #cfe1fb;border-radius:8px;padding:14px;color:#2f5683;font-size:13px}.back-link{color:var(--blue);font-weight:800;text-decoration:none}
footer{background:linear-gradient(90deg,var(--navy2),var(--navy));color:#fff}.footer-content{min-height:72px;display:flex;align-items:center;justify-content:space-between;font-size:13px}
@media(max-width:900px){.nav{display:none}.blog-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.hero-icon{display:none}}
@media(max-width:640px){.topbar-right{display:none}.topbar-content{justify-content:center;font-size:11px}.brand strong{font-size:22px}.brand-icon{width:42px;height:48px}.posts-grid,.sidebar{grid-template-columns:1fr}.hero{text-align:center}.post-footer,.article-cta,.footer-content{flex-direction:column;text-align:center}.article-content{font-size:17px}.article-content h2{font-size:25px}.article-meta{gap:9px}}