@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f7fb;--card:#fff;--text:#172033;--muted:#667085;--accent:#635bff;--border:#e5e7eb;--soft:#f0efff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'Cairo',Arial,sans-serif;line-height:1.8}.container{width:min(1050px,92%);margin:auto}
.hero{padding:60px 0 45px;background:linear-gradient(135deg,#111827,#312e81);color:#fff}.badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:5px 14px;border-radius:999px;font-size:13px}.hero h1{font-size:clamp(32px,6vw,56px);margin:10px 0 0;font-weight:800}.hero p{margin:0;color:#d9ddff}.stats{display:flex;gap:12px;margin-top:25px}.stats div{min-width:105px;padding:10px 18px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);border-radius:16px;text-align:center}.stats strong{display:block;font-size:24px}.stats span{font-size:12px;color:#d9ddff}
main{padding:30px 0 60px}.toolbar{position:sticky;top:12px;z-index:10;display:flex;gap:10px;margin-bottom:30px;padding:10px;background:rgba(245,247,251,.9);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:18px}.toolbar input{flex:1;border:1px solid var(--border);border-radius:12px;padding:12px 15px;font-family:inherit;background:#fff;outline:none}.toolbar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #635bff22}.toolbar button{border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px 14px;font-family:inherit;cursor:pointer;color:var(--text)}.toolbar button:hover{border-color:var(--accent);color:var(--accent)}
section{margin-bottom:55px}.section-title{display:flex;align-items:center;gap:15px;margin-bottom:20px}.section-title>span{background:var(--accent);color:white;border-radius:12px;padding:5px 10px;font-weight:800}.section-title h2{margin:0;font-size:25px}.section-title p{margin:0;color:var(--muted);font-size:13px}
.question-card,.text-card,.essay-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:14px;box-shadow:0 4px 18px rgba(16,24,40,.04);transition:.2s}.question-card:hover,.text-card:hover,.essay-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(16,24,40,.08)}.q-head{display:flex;align-items:flex-start;gap:12px}.number{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-weight:800}.q-head h3{margin:2px 0 14px;font-size:16px;line-height:1.8}.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-right:50px}.option{border:1px solid var(--border);border-radius:12px;padding:10px 12px;cursor:pointer;transition:.15s;background:#fff}.option:hover{background:var(--soft);border-color:#b9b5ff}.option input{accent-color:var(--accent);margin-left:8px}.option:has(input:checked){background:var(--soft);border-color:var(--accent)}
.text-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.text-card{display:flex;align-items:center;gap:12px}.text-card p{margin:0;flex:1;font-size:14px}.answer-line{width:180px;border:0;border-bottom:2px dashed #cbd5e1;outline:none;font-family:inherit;padding:5px;background:transparent}.answer-line:focus{border-color:var(--accent)}textarea{width:100%;min-height:130px;border:1px solid var(--border);border-radius:12px;padding:12px;font-family:inherit;resize:vertical;outline:none;background:#fafafa}textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #635bff22}.hidden{display:none!important}footer{text-align:center;padding:25px;color:var(--muted);border-top:1px solid var(--border);font-size:13px}
@media(max-width:700px){.toolbar{flex-wrap:wrap}.toolbar input{flex-basis:100%}.options,.text-grid{grid-template-columns:1fr}.options{margin-right:0}.stats div{min-width:0;flex:1}.hero{padding-top:40px}.question-card,.text-card,.essay-card{padding:15px}.answer-line{width:100%}.text-card{align-items:flex-start;flex-wrap:wrap}.text-card p{flex-basis:calc(100% - 50px)}}