:root{--bg:#fff;--soft:#f8f9fa;--hero:linear-gradient(180deg,#e8f0fe 0%,#fff 100%);--ibg:#e8f0fe;--card:#fff;--tx:#202124;--mu:#5f6368;--ac:#1a73e8;--ac2:#1557b0;--gr:#188038;--bt:#fff;--bd:#dadce0;--sh:0 1px 3px rgba(60,64,67,.15);--ftbg:#202124;--fttx:#e8eaed;--ftmu:#9aa0a6}
:root[data-theme=dark]{--bg:#17181a;--soft:#202124;--hero:linear-gradient(180deg,#1f2a40 0%,#17181a 100%);--ibg:#26334d;--card:#2d2e31;--tx:#e8eaed;--mu:#9aa0a6;--ac:#8ab4f8;--ac2:#aecbfa;--gr:#81c995;--bt:#202124;--bd:#3c4043;--sh:none;--ftbg:#0f1011}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 Inter,system-ui,sans-serif;background:var(--bg);color:var(--tx)}
a{color:var(--ac)}a:hover{color:var(--ac2)}:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
.hdr{background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5;box-shadow:0 1px 2px rgba(60,64,67,.06)}
.bar{display:flex;align-items:center;gap:12px;min-height:60px;flex-wrap:wrap}.logo{font-weight:700;font-size:1.2rem;text-decoration:none;color:var(--tx);margin-right:auto}.logo span{color:var(--ac)}
nav ul{list-style:none;margin:0;padding:0}#nav>ul{display:flex;gap:6px}#nav a{display:block;padding:10px 12px;text-decoration:none;color:var(--tx);border-radius:8px}#nav a:hover{background:var(--soft)}
.dd{position:relative}.sub{display:none;position:absolute;left:0;top:100%;min-width:260px;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--sh);padding:6px}
.dd:hover .sub,.dd:focus-within .sub{display:block}#menuBtn{display:none}
.btn{display:inline-block;background:var(--ac);color:var(--bt);border:1px solid var(--ac);padding:11px 18px;border-radius:10px;font:600 1rem inherit;cursor:pointer;text-decoration:none;min-height:44px}
.btn:hover{background:var(--ac2);color:var(--bt)}.btn.ghost{background:transparent;color:var(--tx);border-color:var(--bd)}.btn.ghost:hover{background:var(--soft);color:var(--tx)}
.hero{padding:72px 20px 56px;margin-top:22px;text-align:center;background:var(--hero);border-radius:28px;border:1px solid var(--bd)}.hero h1{font-size:clamp(2rem,5.2vw,3.3rem);line-height:1.15;letter-spacing:-.03em;margin:0 0 16px;font-weight:800}.hero p{max-width:640px;margin:0 auto 26px;color:var(--mu);font-size:1.1rem}.hero .btn{margin:4px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:20px 0 40px}
.card,.panel{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:24px;box-shadow:var(--sh)}.card{transition:transform .15s,box-shadow .15s,border-color .15s}.card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(60,64,67,.14);border-color:var(--ac)}.card h3{margin:.5em 0 .3em;font-size:1.15rem}.card p{color:var(--mu);margin:0 0 16px;font-size:.96rem}.ico{width:48px;height:48px;border-radius:14px;background:var(--ibg);color:var(--ac);display:grid;place-items:center;font-size:1.5rem;margin-bottom:10px}.top{display:flex;justify-content:space-between;align-items:flex-start}h1,h2{letter-spacing:-.02em}h2{margin-top:1.8em}.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:30px 0}.perk{padding:16px 18px;border-left:4px solid var(--ac);background:var(--soft);border-radius:10px}.perk b{display:block}.perk span{color:var(--mu);font-size:.95rem}.tag{font-size:.78rem;background:var(--soft);border:1px solid var(--bd);border-radius:99px;padding:2px 10px;color:var(--mu)}
textarea,select,input{width:100%;background:var(--soft);color:var(--tx);border:1px solid var(--bd);border-radius:10px;padding:12px;font:inherit}
textarea{min-height:180px;resize:vertical}.ur{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;direction:rtl;line-height:2.1;font-size:1.3rem}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}
.stat{background:var(--soft);border:1px solid var(--bd);border-radius:10px;padding:10px;text-align:center}.stat b{display:block;font-size:1.4rem;color:var(--ac)}
.kb{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}.kb button{min-height:46px;font-size:1.3rem;border-radius:8px;border:1px solid var(--bd);background:var(--card);color:var(--tx);cursor:pointer}.kb button:hover{background:var(--ac);color:var(--bt)}
.out{white-space:pre-wrap;background:var(--soft);border:1px dashed var(--bd);border-radius:10px;padding:12px;margin:8px 0;min-height:48px}
.guide{max-width:780px}.crumbs{font-size:.9rem;color:var(--mu);margin:14px 0}.adslot{min-height:0;margin:20px 0}
.ok{color:var(--gr)}.bad{color:#dc2626}.passage{font-size:1.2rem;line-height:1.9;padding:14px;background:var(--soft);border-radius:10px;border:1px solid var(--bd)}
.bar2{height:8px;background:var(--bd);border-radius:9px;overflow:hidden}.bar2 i{display:block;height:100%;width:0;background:var(--ac)}
.ftr{background:var(--ftbg);color:var(--fttx);margin-top:56px;padding:0;border-top:4px solid #1a73e8;border-image:linear-gradient(90deg,#4285f4 0 25%,#ea4335 25% 50%,#fbbc04 50% 75%,#34a853 75%) 1}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:32px;padding:44px 18px 30px}
.ftr h3{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ftmu);margin:0 0 14px}
.ftr .brand{font-size:1.3rem;font-weight:700;color:#fff;margin:0 0 10px;text-transform:none;letter-spacing:0}.ftr .brand span{color:#8ab4f8}
.ftr p{color:var(--ftmu);margin:0;max-width:340px;font-size:.95rem}
.ftr ul{list-style:none;padding:0;margin:0}.ftr li{margin:0}.ftr a{display:inline-block;padding:5px 0;color:var(--fttx);text-decoration:none;font-size:.95rem}.ftr a:hover{color:#8ab4f8;text-decoration:underline}.ftr a:focus-visible{outline-color:#8ab4f8}
.fbot{border-top:1px solid #3c4043;padding:16px 18px;text-align:center;color:var(--ftmu);font-size:.88rem}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr;gap:24px;padding-top:34px}}
@media(max-width:800px){#menuBtn{display:inline-block}#nav{display:none;width:100%;order:5}#nav.open{display:block}#nav>ul{flex-direction:column}.sub{display:block;position:static;border:0;box-shadow:none}}
.sr{position:absolute;left:-999px}