:root{
    --ink:#0a2540;
    --text:#243044;
    --muted:#697386;
    --soft:#f5f7fb;
    --paper:#ffffff;
    --line:#dfe5ef;
    --brand:#0f2b5b;
    --brand-dark:#0a2540;
    --aqua:#17bebb;
    --green:#12a36a;
    --amber:#f59e0b;
    --danger:#dc2626;
    --danger-dark:#991b1b;
    --shadow:0 18px 44px rgba(20,33,61,.10);
    --shadow-sm:0 10px 24px rgba(20,33,61,.08);
}
[data-theme="dark"]{
    --ink:#f8fafc;
    --text:#d8e1ef;
    --muted:#9aa8bc;
    --soft:#07111f;
    --paper:#0b1728;
    --line:#22344d;
    --brand:#60a5fa;
    --brand-dark:#93c5fd;
    --aqua:#00e6b8;
    --green:#00cc88;
    --shadow:0 18px 44px rgba(0,0,0,.34);
    --shadow-sm:0 10px 24px rgba(0,0,0,.26);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#f8fbff 0,#f3f6fb 420px,#f7f9fc 100%);color:var(--text);line-height:1.65}
[data-theme="dark"] body{background:linear-gradient(180deg,#07111f 0,#0a1727 420px,#07111f 100%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
main{max-width:1180px;margin:auto;padding:30px 20px}
h1,h2,h3{color:var(--ink);letter-spacing:0;line-height:1.15}
p{margin-top:0}

.reading-progress{position:fixed;top:0;left:0;z-index:80;height:3px;width:0;background:linear-gradient(90deg,var(--aqua),var(--brand));box-shadow:0 0 18px rgba(0,230,184,.45)}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:12px 28px;background:rgba(255,255,255,.88);border-bottom:1px solid rgba(223,229,239,.9);backdrop-filter:blur(18px);box-shadow:0 6px 24px rgba(20,33,61,.05)}
[data-theme="dark"] .site-header{background:rgba(7,17,31,.86);border-bottom-color:#22344d}
.brand{display:flex;align-items:center;gap:10px;font-size:1.22rem;font-weight:900;color:var(--ink);white-space:nowrap}
.brand:before{content:"";width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--aqua));box-shadow:0 10px 22px rgba(18,102,241,.24)}
.brand span{color:var(--brand)}
.brand small{display:none}
.main-nav{display:flex;gap:6px;flex:1;align-items:center}
.main-nav a{border-radius:8px;padding:9px 11px;font-weight:750;color:#42526a}
.main-nav a:hover{background:#edf6ff;color:var(--brand-dark)}
[data-theme="dark"] .main-nav a{color:#c7d7ee}
[data-theme="dark"] .main-nav a:hover{background:#132a45;color:#fff}
.nav-toggle{display:none}
.header-actions{display:flex;align-items:center;gap:8px}
.icon-button{width:42px;height:42px;padding:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:none;font-size:1.2rem}
.button-small{padding:10px 14px;white-space:nowrap}
.search-modal[hidden]{display:none}
.search-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:start center;padding:12vh 20px;background:rgba(7,17,31,.42);backdrop-filter:blur(8px)}
.search-backdrop{position:absolute;inset:0}
.search-panel{position:relative;width:min(680px,100%);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.search-panel h2{margin:6px 0 18px}
.search-panel input{font-size:1.05rem;margin-bottom:12px}
.search-close{position:absolute;right:14px;top:14px;width:36px;height:36px;padding:0;background:#eef3f8;color:var(--ink);box-shadow:none}
[data-theme="dark"] .search-close{background:#132a45}

input,textarea,select{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 13px;background:#fff;color:var(--text);font:inherit;outline:0;transition:border-color .18s,box-shadow .18s,background .18s}
textarea{resize:vertical}
input:focus,textarea:focus,select:focus{border-color:#8cc4ff;box-shadow:0 0 0 4px rgba(18,102,241,.12)}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:#101f33;color:#f8fafc;border-color:#22344d}
.header-search{width:250px}
.header-search input{background:#f8fafc}

.button,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;background:linear-gradient(135deg,var(--brand),#0d86d9);color:#fff;font-weight:850;padding:11px 16px;cursor:pointer;box-shadow:0 10px 22px rgba(18,102,241,.20);font:inherit;line-height:1.2}
.button:hover,button:hover{filter:brightness(.97);transform:translateY(-1px)}
.danger{background:linear-gradient(135deg,var(--danger),var(--danger-dark));box-shadow:0 10px 20px rgba(220,38,38,.18)}

.hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;align-items:center;padding:58px 0 44px}
.hero>div{position:relative}
.hero h1{font-size:clamp(2.25rem,5vw,4.55rem);line-height:1.02;margin:8px 0 18px;max-width:880px}
.hero p{font-size:1.15rem;color:var(--muted);max-width:760px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:900;color:var(--brand-dark);text-transform:uppercase;letter-spacing:0;font-size:.82rem}
.eyebrow:before{content:"";width:26px;height:3px;border-radius:99px;background:var(--aqua)}
.hero-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:24px;max-width:650px}
.hero-search input{min-height:48px;background:#fff}
[data-theme="dark"] .hero-search input,[data-theme="dark"] .header-search input{background:#101f33}
.hero-trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-trust span{border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:999px;padding:8px 12px;color:var(--ink);font-weight:800;font-size:.9rem}
[data-theme="dark"] .hero-trust span{background:#0b1728}
.hero-panel{background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:20px}
.hero-panel strong{display:block;margin-bottom:8px;color:var(--ink);font-size:1.05rem}
.hero-panel a{display:block;padding:14px 0;border-top:1px solid var(--line);font-weight:800;color:#20304a}
.hero-panel a:hover{color:var(--brand)}
.hero-panel span{display:block;color:var(--muted);font-size:.9rem;font-weight:650;margin-top:2px}
.hero-visual{border-radius:8px}
.mock-window{background:linear-gradient(145deg,#0a2540,#07111f);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:18px;box-shadow:0 28px 70px rgba(10,37,64,.32);color:#dbeafe;overflow:hidden}
.mock-bar{display:flex;gap:7px;margin-bottom:16px}
.mock-bar span{width:10px;height:10px;border-radius:50%;background:#00e6b8}
.mock-bar span:nth-child(2){background:#f59e0b}.mock-bar span:nth-child(3){background:#ef4444}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mock-grid div{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:12px;background:rgba(255,255,255,.06)}
.mock-grid strong,.mock-grid small{display:block;color:#b7c3d5;font-size:.75rem}
.mock-grid b{display:block;color:#fff;font-size:1.6rem;line-height:1.1;margin:6px 0}
.mock-window pre{margin:0;background:#050a12;color:#c9f5e8;border-radius:8px;padding:16px;overflow:auto;font-size:.82rem}
.quick-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 34px}
.quick-topics a{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:var(--shadow-sm)}
.quick-topics strong,.quick-topics span{display:block}
.quick-topics strong{color:var(--ink);font-size:1.02rem}
.quick-topics span{color:var(--muted);font-weight:650;margin-top:6px}
.quick-topics a:hover{transform:translateY(-3px);border-color:#9fd8cc}

.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:22px 0 18px}
.section-head h1,.section-head h2,.page-title h1{margin:0;font-size:clamp(1.65rem,3vw,2.25rem)}
.section-head a:not(.button){color:var(--brand);font-weight:850}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.post-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.post-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cbd7e8}
.post-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#0a2540,#0f766e)}
.post-card img{height:100%;width:100%;object-fit:cover;background:linear-gradient(135deg,#e9f4ff,#eefbf7);transition:transform .25s}
.post-card:hover img{transform:scale(1.04)}
.post-thumb-fallback{display:grid;place-items:center;height:100%;background:radial-gradient(circle at 25% 20%,rgba(0,230,184,.38),transparent 34%),linear-gradient(135deg,#0a2540,#0f2b5b)}
.post-thumb-fallback b{font-size:4rem;color:#fff}
.category-badge{display:inline-flex;align-items:center;border-radius:999px;background:rgba(0,230,184,.14);color:#006b56;border:1px solid rgba(0,230,184,.34);font-size:.78rem;font-weight:900;padding:6px 10px}
.post-thumb .category-badge{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.92);color:#0a2540;border:0}
[data-theme="dark"] .category-badge{color:#99ffe8}
.post-card div{padding:18px}
.post-card h3{margin:7px 0 9px;font-size:1.12rem}
.post-card h3 a:hover{color:var(--brand)}
.post-card p,.meta,.page-title p,.download-item span{color:var(--muted)}
.meta{font-size:.88rem;font-weight:700}

.sidebar{align-self:start;position:sticky;top:86px}
.sidebar h3{margin-top:0}
.category-chip{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-weight:800;color:#34445f}
.category-chip:hover{color:var(--brand)}
.newsletter{margin-top:22px;padding:20px;border-radius:8px;background:linear-gradient(135deg,#10233f,#164c63);color:#e6f7ff;box-shadow:var(--shadow-sm)}
.newsletter h3{color:#fff;margin-top:0}
.newsletter p{color:#c9e6f0}
.newsletter input{margin-bottom:10px;border-color:rgba(255,255,255,.25)}

.ad-slot{max-width:1180px;margin:20px auto;padding:8px 20px;text-align:center}
.ad-slot img{margin:auto;border-radius:8px;box-shadow:var(--shadow-sm)}
.page-title{padding:34px 0 18px}
.page-title p{font-size:1.08rem}
.filters{display:grid;grid-template-columns:1fr 230px 250px auto;gap:12px;margin-bottom:24px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;box-shadow:var(--shadow-sm)}
.pagination{display:flex;gap:12px;justify-content:center;margin:30px}
.pagination a{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 16px;font-weight:800;color:var(--brand)}

.article-header{max-width:920px;margin:auto;text-align:left}
.breadcrumb,.article-header .meta{color:var(--muted)}
.breadcrumb a{font-weight:800;color:var(--brand)}
.article-header h1{font-size:clamp(2.05rem,4.8vw,4rem);line-height:1.05;margin:16px 0}
.featured{width:100%;max-height:500px;object-fit:cover;border-radius:8px;margin:24px 0;box-shadow:var(--shadow)}
.article-lead{font-size:1.18rem;color:var(--muted);max-width:820px}
.article-body-wrap{display:grid;grid-template-columns:minmax(0,780px) 320px;gap:42px;align-items:start;justify-content:center}
.article-sidebar{display:grid;gap:16px;position:sticky;top:86px}
.toc{position:sticky;top:88px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px;box-shadow:var(--shadow-sm)}
[data-theme="dark"] .toc,[data-theme="dark"] .article-content,[data-theme="dark"] .post-card,[data-theme="dark"] .sidebar,[data-theme="dark"] .table,[data-theme="dark"] .stat,[data-theme="dark"] .admin-card,[data-theme="dark"] .form-card,[data-theme="dark"] .static-content{background:var(--paper)}
.article-sidebar .toc{position:static}
.toc strong{display:block;margin-bottom:8px;color:var(--ink)}
.toc a{display:block;color:#526174;padding:7px 0;font-weight:700}
.toc a:hover{color:var(--brand)}
.toc .lvl-3{padding-left:12px}
.article-content{background:#fff;border:1px solid var(--line);border-radius:8px;padding:38px;box-shadow:var(--shadow-sm)}
.article-content h2,.article-content h3{line-height:1.2;margin-top:1.4em}
.article-content a{color:var(--brand);font-weight:800}
.article-content code{background:#edf6ff;color:#0b3f9c;border-radius:6px;padding:2px 6px}
.article-content pre{position:relative;overflow:auto;background:#101828;color:#e0f2fe;border-radius:8px;padding:20px;border:1px solid #26364d}
.article-content pre code{background:transparent;color:inherit;padding:0}
.code-label{position:absolute;left:10px;top:10px;color:#8ddfd1;font-size:.72rem;font-weight:900}
.copy-code{position:absolute;right:10px;top:10px;padding:7px 10px;background:#2dd4bf;color:#082f49;box-shadow:none}
.article-content pre{padding-top:48px}
.author-bio{display:flex;gap:16px;align-items:flex-start;margin-top:32px;padding:20px;border:1px solid var(--line);border-radius:8px;background:#fbfdff}
[data-theme="dark"] .author-bio{background:#0b1728}
.author-bio>div{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--aqua));color:#fff;font-size:1.5rem;font-weight:950}
.author-bio strong{display:block;color:var(--ink);font-size:1.05rem}
.author-bio p{margin:5px 0 0;color:var(--muted)}
.faq details{border:1px solid var(--line);border-radius:8px;padding:13px;margin:10px 0;background:#fbfdff}
.faq summary{font-weight:850;color:var(--ink);cursor:pointer}
.related{max-width:1180px;margin:34px auto}

.download-list,.tool-grid{display:grid;gap:14px}
.download-item{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-sm)}
.tool-grid{grid-template-columns:repeat(3,1fr)}
.tool-grid article,.form-card,.static-content{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-sm)}
.tool-grid article,.form-card{padding:24px}
.form-card{max-width:720px}
.form-card label{display:block;font-weight:800;margin-bottom:14px;color:#26364d}
.hp{position:absolute;left:-10000px}
.notice{background:#ecfdf5;border:1px solid #86efac;color:#166534;border-radius:8px;padding:14px;margin:16px 0;font-weight:750}
.static-content{max-width:850px;padding:30px}

.site-footer{margin-top:42px;background:#111827;color:#dbeafe;padding:38px 28px 28px}
.footer-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.site-footer h3{color:#fff}
.site-footer p{color:#c6d3e1}
.site-footer a{display:block;color:#bfdbfe;margin:7px 0;font-weight:700}
.site-footer a:hover{color:#fff}

.admin-login{min-height:100vh;background:linear-gradient(135deg,#f8fbff,#eef7f2 48%,#fff7e6);display:grid;place-items:center;padding:24px}
.admin-login main{width:100%;padding:0}
.login-card{margin:0 auto;max-width:440px}
.login-card h1{margin-top:0}
.login-card:before{content:"Admin";display:inline-flex;margin-bottom:14px;border-radius:8px;background:#edf6ff;color:var(--brand-dark);font-weight:900;padding:6px 10px}

.admin-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh;background:#f4f7fb}
.admin-nav{position:sticky;top:0;height:100vh;background:#101828;color:#dbeafe;padding:24px 18px;box-shadow:12px 0 34px rgba(16,24,40,.12)}
.admin-nav h2{color:#fff;margin:0 0 22px;font-size:1.35rem}
.admin-nav a{display:flex;align-items:center;gap:10px;border-radius:8px;padding:11px 12px;color:#c7d7ee;font-weight:800;margin:3px 0}
.admin-nav a:hover,.admin-nav a.active{background:#1d2b44;color:#fff}
.admin-theme-toggle{width:100%;justify-content:flex-start;margin:0 0 14px;background:#1d2b44;color:#dbeafe;border:1px solid #31435f;box-shadow:none}
.admin-main{padding:30px;max-width:1220px;width:100%}
.admin-main .section-head{margin-top:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.stat,.admin-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:var(--shadow-sm)}
.stat strong{display:block;font-size:2rem;line-height:1;color:var(--ink)}
.stat span{display:block;margin-top:8px;color:var(--muted);font-weight:800}
.admin-card{margin:16px 0;overflow:auto}
.admin-card h2{margin-top:0}
.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm)}
.table th,.table td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.table th{background:#f8fafc;color:#334155;font-size:.86rem;text-transform:uppercase;letter-spacing:0;font-weight:900}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:#fbfdff}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions form{margin:0}
.admin-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:980px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px;box-shadow:var(--shadow-sm)}
.admin-form label{display:grid;gap:7px;font-weight:850;color:#334155}
.admin-form textarea{min-height:220px}
.admin-form label:has(textarea),.admin-form button{grid-column:1 / -1}
.image-preview{display:grid;gap:7px;max-width:360px}
.image-preview img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-sm);background:#eef3f8}
.image-preview small{color:var(--muted);font-weight:700;word-break:break-all}
.special-section{margin-top:34px}
.hook-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hook-grid article{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:var(--shadow-sm)}
.hook-grid span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#ecfdf5;color:#047857;font-weight:950;margin-bottom:12px}
.hook-grid strong,.hook-grid small{display:block}
.hook-grid strong{color:var(--ink);font-size:1.02rem}
.hook-grid small{color:var(--muted);margin-top:6px;font-weight:700}
.feature-hooks{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:30px}
.premium-title{max-width:860px}
.checklist-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:30px}
.checklist-section article{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:var(--shadow-sm)}
.checklist-section input{width:20px;height:20px;accent-color:var(--green);margin-top:3px}
.checklist-section strong{color:var(--ink)}
.checklist-section span{grid-column:2;color:var(--muted);font-weight:650}
.newsletter-wide{max-width:720px;margin:30px auto}
.community-hero{text-align:center;margin-left:auto;margin-right:auto}
.community-hero .hero-trust{justify-content:center}

@media(max-width:1000px){
    .hero,.content-grid,.article-body-wrap{grid-template-columns:1fr}
    .sidebar,.toc,.article-sidebar,.admin-nav{position:static;height:auto}
    .post-grid,.post-grid.compact,.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .quick-topics,.feature-hooks{grid-template-columns:repeat(2,minmax(0,1fr))}
    .filters{grid-template-columns:1fr 1fr}
    .admin-shell{grid-template-columns:1fr}
    .admin-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
    .admin-nav h2{grid-column:1 / -1;margin-bottom:8px}
}
@media(max-width:720px){
    main{padding:22px 16px}
    .site-header{flex-wrap:wrap;padding:12px 16px}
    .nav-toggle{display:inline-flex;margin-left:auto;background:#edf6ff;color:var(--ink);box-shadow:none}
    .main-nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch}
    .main-nav.open{display:flex}
    .header-search{width:100%}
    .hero{padding:34px 0 24px}
    .hero-search,.filters,.footer-grid,.admin-form{grid-template-columns:1fr}
    .post-grid,.post-grid.compact,.tool-grid,.stats-grid,.quick-topics,.hook-grid,.feature-hooks,.checklist-section{grid-template-columns:1fr}
    .article-content{padding:24px}
    .download-item{align-items:flex-start;flex-direction:column}
    .admin-main{padding:20px 16px}
    .admin-nav{grid-template-columns:1fr 1fr}
}