:root{--bg:#fafafa;--fg:#0f172a;--muted:#475569;--card:#fff;--accent:#0ea5e9;--sudan:#00853f;--sudan-red:#d21034;--sudan-black:#000;--sudan-white:#fff}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto;background:var(--bg);color:var(--fg)}.container{max-width:1100px;margin:0 auto;padding:24px}.hero{display:grid;grid-template-columns:1.2fr 1fr;grid-gap:24px;gap:24px;align-items:center}.card{background:var(--card);border-radius:16px;padding:20px;box-shadow:0 4px 20px rgba(0,0,0,.06)}.btn{display:inline-block;padding:12px 16px;border-radius:12px;background:var(--accent);color:#fff;text-decoration:none;border:0;cursor:pointer}.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}.badge{padding:6px 10px;border-radius:999px;background:#eef2ff;color:#1e293b;font-size:12px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:16px;gap:16px;margin-top:16px}.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #e5e7eb;background:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:10}.brand{font-weight:800;letter-spacing:.3px}.flag{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--sudan-black) 0 25%,var(--sudan-white) 25% 50%,var(--sudan-red) 50% 75%,var(--sudan) 75% 100%)}.notice{padding:12px;border-left:4px solid var(--accent);background:#f0f9ff;border-radius:8px;margin:12px 0}.input{width:100%;padding:12px;border:1px solid #e2e8f0;border-radius:10px;margin:8px 0 12px}label{font-size:14px}footer,label{color:var(--muted)}footer{padding:24px;text-align:center}.toast{position:fixed;right:16px;top:16px;background:#111;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.18)}.success{background:#16a34a}.error{background:#b91c1c}.toast{z-index:9999}.alert{padding:12px;border-radius:10px;margin:12px 0}.alert.success{background:#ecfdf5;color:#065f46;border:1px solid #10b981}.alert.error{background:#fef2f2;color:#7f1d1d;border:1px solid #ef4444}@media (max-width:640px){.toast{right:12px;left:12px;top:auto;bottom:12px}}