:root{
--bg:#f7f9fc;
--surface:#ffffff;
--surface-2:#f1f4f9;
--text:#131b2e;
--text-muted:#5b6478;
--border:#e3e8f0;
--primary:#0b5fff;
--primary-dark:#0846c4;
--primary-light:#e8f0ff;
--success:#0f9d58;
--success-bg:#e6f7ee;
--warn:#b8860b;
--warn-bg:#fff6e0;
--danger:#d93025;
--danger-bg:#fdecea;
--radius:14px;
--radius-sm:8px;
--shadow:0 4px 20px rgba(20,30,60,.06);
--shadow-lg:0 12px 40px rgba(20,30,60,.12);
--header-h:68px;
}
[data-theme="dark"]{
--bg:#0b0e17;
--surface:#131826;
--surface-2:#1a2032;
--text:#eef1f7;
--text-muted:#9aa3ba;
--border:#262d40;
--primary:#4c8dff;
--primary-dark:#79aaff;
--primary-light:#182544;
--success:#3ddc84;
--success-bg:#0f2a1c;
--warn:#f2c14e;
--warn-bg:#2c2408;
--danger:#ff6b6b;
--danger-bg:#2c1414;
--shadow:0 4px 20px rgba(0,0,0,.3);
--shadow-lg:0 12px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:'Inter',system-ui,-apple-system,sans-serif;
line-height:1.6;
max-width:100vw;
overflow-x:hidden;
transition:background .2s ease,color .2s ease;
}
h1,h2,h3,h4{font-family:'Outfit',sans-serif; margin:0 0 .5em; line-height:1.25;}
a{color:var(--primary); text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
.container{max-width:1200px; margin:0 auto; padding:0 20px;}
button{font-family:inherit;}

/* Buttons with transparent bg must declare color + font-family explicitly (dark mode fix) */
button.btn-reset{background:none;border:none;cursor:pointer;color:var(--text);font-family:inherit;}

.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:12px 22px; border-radius:10px; font-weight:600; font-size:15px;
cursor:pointer; border:1px solid transparent; transition:.15s ease; white-space:nowrap;
background:none; color:var(--text); font-family:inherit;
}
.btn-primary{background:var(--primary); color:#fff; border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-primary:disabled{opacity:.6; cursor:not-allowed;}
.btn-outline{background:none; color:var(--primary); border-color:var(--primary);}
.btn-outline:hover{background:var(--primary-light);}
.btn-ghost{background:none; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:8px 14px; font-size:13px;}

/* ---------- Header ---------- */
header.site-header{
position:sticky; top:0; z-index:9998;
background:var(--surface); border-bottom:1px solid var(--border);
height:var(--header-h);
}
.nav-wrap{
height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{display:flex; align-items:center; gap:8px; font-family:'Outfit',sans-serif; font-weight:800; font-size:20px; color:var(--text);}
.logo span{color:var(--primary);}
nav.main-nav{display:flex; align-items:center; gap:6px;}
.nav-item{position:relative;}
.nav-link{
padding:10px 14px; border-radius:8px; font-weight:500; font-size:14.5px; color:var(--text);
background:none; border:none; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:5px;
}
.nav-link:hover{background:var(--surface-2);}
.mega{
position:absolute; top:100%; left:0; background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:14px; width:320px;
display:none; z-index:9999; max-height:70vh; overflow-y:auto;
}
.mega.open{display:grid; grid-template-columns:1fr; gap:2px;}
.mega a{padding:9px 10px; border-radius:8px; font-size:13.5px; color:var(--text);}
.mega a:hover{background:var(--surface-2); color:var(--primary);}
.header-actions{display:flex; align-items:center; gap:10px;}
#themeToggle{
width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
display:flex; align-items:center; justify-content:center; font-size:18px;
}
.hamburger{display:none; width:40px; height:40px; border-radius:8px; border:1px solid var(--border); align-items:center; justify-content:center; font-size:20px;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{background:var(--surface-2); border-bottom:1px solid var(--border); font-size:13.5px;}
.breadcrumb .container{padding:10px 20px; display:flex; gap:6px; flex-wrap:wrap; color:var(--text-muted);}
.breadcrumb a{color:var(--text-muted);}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb .current{color:var(--text); font-weight:600;}

/* ---------- Hero ---------- */
.hero{padding:56px 0 40px; text-align:center;}
.eyebrow{
display:inline-flex; align-items:center; gap:6px; background:var(--primary-light); color:var(--primary);
padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700; margin-bottom:18px;
}
.hero h1{font-size:clamp(28px,4.5vw,44px); max-width:820px; margin:0 auto .5em;}
.hero p.sub{max-width:640px; margin:0 auto 30px; color:var(--text-muted); font-size:17px;}
.privacy-note{
display:inline-flex; align-items:center; gap:8px; background:var(--success-bg); color:var(--success);
padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600; margin-bottom:28px;
}

/* ---------- Tool Card ---------- */
.tool-card{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
box-shadow:var(--shadow); padding:26px; max-width:880px; margin:0 auto;
}
.input-tabs{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:10px; margin-bottom:18px; width:fit-content;}
.input-tab{padding:8px 16px; border-radius:8px; font-size:14px; font-weight:600; background:none; border:none; color:var(--text-muted); cursor:pointer; font-family:inherit;}
.input-tab.active{background:var(--surface); color:var(--primary); box-shadow:0 1px 4px rgba(0,0,0,.08);}
.field-group{text-align:left; margin-bottom:14px;}
label.field-label{display:block; font-weight:600; font-size:14px; margin-bottom:8px;}
input[type="text"], textarea{
width:100%; padding:13px 15px; border:1.5px solid var(--border); border-radius:10px;
background:var(--bg); color:var(--text); font-size:15px; font-family:inherit; resize:vertical;
}
input[type="text"]:focus, textarea:focus{outline:none; border-color:var(--primary);}
textarea{min-height:120px;}
.help-text{font-size:12.5px; color:var(--text-muted); margin-top:6px;}
.validation-msg{font-size:13px; margin-top:6px; display:none; font-weight:600;}
.validation-msg.show{display:block;}
.validation-msg.error{color:var(--danger);}
.validation-msg.ok{color:var(--success);}
.opts-row{display:flex; flex-wrap:wrap; gap:16px; margin:16px 0; align-items:center;}
.opt-check{display:flex; align-items:center; gap:8px; font-size:14px;}
.tool-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;}

/* ---------- Loader ---------- */
.loader{display:none; align-items:center; gap:12px; justify-content:center; padding:30px 0; color:var(--text-muted);}
.loader.show{display:flex;}
.spinner{width:22px; height:22px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Results ---------- */
#resultsSection{display:none; margin-top:36px;}
#resultsSection.show{display:block;}
.result-summary-bar{
display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px;
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:18px 22px; margin-bottom:20px;
}
.result-actions{display:flex; gap:8px; flex-wrap:wrap;}
.result-card{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
margin-bottom:20px; overflow:hidden;
}
.result-head{padding:18px 22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; border-bottom:1px solid var(--border); cursor:pointer;}
.result-url{font-weight:700; font-size:15.5px; word-break:break-all;}
.result-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--text-muted);}
.badge{padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:700;}
.badge-ok{background:var(--success-bg); color:var(--success);}
.badge-warn{background:var(--warn-bg); color:var(--warn);}
.badge-err{background:var(--danger-bg); color:var(--danger);}
.grade-pill{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; font-family:'Outfit',sans-serif;}
.result-body{padding:22px; display:none;}
.result-body.open{display:block;}
.result-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap;}
.result-tab{padding:9px 16px; font-size:13.5px; font-weight:600; background:none; border:none; border-bottom:2px solid transparent; color:var(--text-muted); cursor:pointer; font-family:inherit;}
.result-tab.active{color:var(--primary); border-bottom-color:var(--primary);}
.result-panel{display:none;}
.result-panel.active{display:block;}
table.headers-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.headers-table th, table.headers-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
table.headers-table th{color:var(--text-muted); font-weight:600; width:220px;}
table.headers-table td{word-break:break-all; font-family:'SFMono-Regular',Consolas,monospace; font-size:12.8px;}
.sec-check-row{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--border);}
.sec-check-row:last-child{border-bottom:none;}
.sec-icon{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; font-weight:800;}
.sec-icon.pass{background:var(--success-bg); color:var(--success);}
.sec-icon.fail{background:var(--danger-bg); color:var(--danger);}
.sec-check-title{font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px;}
.sec-check-desc{font-size:13px; color:var(--text-muted); margin-top:2px;}
.sec-check-val{font-size:12px; font-family:monospace; background:var(--surface-2); padding:6px 9px; border-radius:6px; margin-top:6px; word-break:break-all;}
.sev-tag{font-size:10.5px; font-weight:800; text-transform:uppercase; padding:2px 8px; border-radius:5px; letter-spacing:.3px;}
.sev-high{background:var(--danger-bg); color:var(--danger);}
.sev-medium{background:var(--warn-bg); color:var(--warn);}
.sev-low{background:var(--surface-2); color:var(--text-muted);}
.score-block{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.score-circle{width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; font-family:'Outfit',sans-serif; flex-shrink:0;}
.insight-box{background:var(--surface-2); border-radius:10px; padding:16px; font-size:13.5px; margin-top:10px;}
.leak-item{font-family:monospace; font-size:12.5px; background:var(--warn-bg); color:var(--warn); padding:6px 10px; border-radius:6px; margin-top:6px; display:inline-block; margin-right:6px;}

/* ---------- Features ---------- */
.section{padding:60px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 42px;}
.section-head h2{font-size:clamp(24px,3.5vw,32px);}
.section-head p{color:var(--text-muted);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.feat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px;}
.feat-icon{width:44px; height:44px; border-radius:10px; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px;}
.feat-card h3{font-size:17px;}
.feat-card p{font-size:14px; color:var(--text-muted); margin:0;}

/* ---------- How it works ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step;}
.step{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:relative;}
.step-num{width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:12px; font-family:'Outfit',sans-serif;}
.step h3{font-size:15.5px;}
.step p{font-size:13.5px; color:var(--text-muted); margin:0;}

/* ---------- Article ---------- */
.article-block{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; max-width:900px; margin:0 auto;}
.article-block p{color:var(--text-muted); font-size:15.5px; margin-bottom:1.1em;}
.article-block h2{font-size:24px;}

/* ---------- FAQ ---------- */
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:12px; overflow:hidden;}
.faq-q{width:100%; text-align:left; padding:18px 20px; font-weight:700; font-size:15px; background:none; border:none; cursor:pointer; color:var(--text); display:flex; justify-content:space-between; align-items:center; font-family:inherit;}
.faq-a{padding:0 20px; max-height:0; overflow:hidden; transition:.25s ease; color:var(--text-muted); font-size:14.5px;}
.faq-item.open .faq-a{padding:0 20px 18px; max-height:400px;}
.faq-icon{transition:.25s ease; flex-shrink:0;}
.faq-item.open .faq-icon{transform:rotate(45deg);}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border-radius:20px; padding:50px 30px; text-align:center; color:#fff; max-width:1000px; margin:0 auto;}
.cta h2{color:#fff; font-size:clamp(22px,3.5vw,30px);}
.cta p{opacity:.92; max-width:520px; margin:0 auto 24px;}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.cta .btn-primary{background:#fff; color:var(--primary-dark); border-color:#fff;}
.cta .btn-outline{color:#fff; border-color:rgba(255,255,255,.6);}
.cta .btn-outline:hover{background:rgba(255,255,255,.12);}

/* ---------- Resource links ---------- */
.resource-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.resource-grid a{background:var(--surface); border:1px solid var(--border); padding:12px 16px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--text);}
.resource-grid a:hover{border-color:var(--primary); color:var(--primary);}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--surface-2); border-top:1px solid var(--border); padding:50px 0 24px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:26px;}
.footer-col h4{font-size:14px; margin-bottom:14px;}
.footer-col a{display:block; font-size:13.3px; color:var(--text-muted); margin-bottom:9px;}
.footer-col a:hover{color:var(--primary);}
.footer-bottom{border-top:1px solid var(--border); margin-top:34px; padding-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; color:var(--text-muted);}
.footer-legal a{color:var(--text-muted); margin-left:14px;}
.footer-brand p{font-size:13.3px; color:var(--text-muted); max-width:280px;}

/* ---------- Cookie banner ---------- */
#cookieBanner{
position:fixed; bottom:16px; left:16px; right:16px; z-index:10000;
background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg);
border-radius:14px; padding:18px 20px; display:none; align-items:center; gap:16px; flex-wrap:wrap; max-width:640px; margin:0 auto;
}
#cookieBanner.show{display:flex;}
#cookieBanner p{margin:0; font-size:13.5px; flex:1; min-width:220px; color:var(--text-muted);}
#cookieBanner .cookie-actions{display:flex; gap:8px;}

/* ---------- Toast ---------- */
#toast{
position:fixed; bottom:24px; right:24px; background:var(--text); color:var(--bg);
padding:12px 20px; border-radius:10px; font-size:13.5px; font-weight:600; z-index:10001;
opacity:0; transform:translateY(10px); transition:.25s ease; pointer-events:none;
}
#toast.show{opacity:1; transform:translateY(0);}

/* ---------- Mobile nav ---------- */
.mobile-nav{display:none;}

@media (max-width: 980px){
.grid-3, .steps{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(2,1fr);}
.footer-grid{grid-template-columns:repeat(2,1fr);}
.resource-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 760px){
nav.main-nav{display:none;}
.hamburger{display:flex;}
.mobile-nav{
display:none; position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:var(--surface);
z-index:9997; padding:18px; overflow-y:auto;
}
.mobile-nav.open{display:block;}
.mobile-nav a, .mobile-nav .mn-link{display:block; padding:13px 6px; border-bottom:1px solid var(--border); color:var(--text); font-weight:600; font-size:15px; background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; cursor:pointer; font-family:inherit;}
.mn-group-title{padding:14px 6px 6px; font-size:12px; text-transform:uppercase; color:var(--text-muted); font-weight:800; letter-spacing:.4px;}
.grid-3, .grid-4, .steps{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr 1fr;}
.resource-grid{grid-template-columns:1fr;}
table.headers-table th{width:120px;}
.tool-card{padding:18px;}
}