:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#0f172a;background:#f1f5f9}html.dark{color:#e2e8f0;background:#020617}*{box-sizing:border-box}body{margin:0}.screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#e2e8f0,#f8fafc)}html.dark .screen{background:linear-gradient(180deg,#020617,#0f172a)}.card{width:min(960px,100%);background:#fff;border-radius:16px;padding:28px;box-shadow:0 15px 40px #0f172a1f}.card-dark{background:#0f172a;box-shadow:0 15px 40px #02061780;border:1px solid #1e293b}.card h1{margin:0 0 8px;font-size:2rem}.card p{margin:0;color:#475569}.card-dark h1{color:#e2e8f0}.card-dark p{color:#94a3b8}.card-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:22px}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.option-card{text-decoration:none;color:inherit;border:1px solid #dbeafe;border-radius:12px;padding:18px;background:#f8fbff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.option-card:hover{transform:translateY(-2px);border-color:#93c5fd;box-shadow:0 10px 20px #1e40af1f}.option-card-dark{background:#0b1220;border-color:#1e3a8a}.option-card-dark:hover{border-color:#3b82f6;box-shadow:0 10px 20px #1e40af40}.option-card h2{margin:0 0 6px}.logo-wrap{display:flex;justify-content:center;margin-bottom:16px}.logo{height:56px}.btn-primary,.btn-secondary{border:0;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:600}.btn-primary{margin-top:18px;background:#2563eb;color:#fff}.btn-primary:hover{background:#1d4ed8}.btn-secondary{background:#e2e8f0;color:#0f172a}.btn-secondary:hover{background:#cbd5e1}.card-dark .btn-secondary{background:#1e293b;color:#e2e8f0}.card-dark .btn-secondary:hover{background:#334155}.theme-switcher{position:fixed;right:20px;bottom:20px;border:0;width:54px;height:54px;border-radius:999px;background:#2563eb;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 10px 24px #2563eb59}.theme-switcher:hover{background:#1d4ed8}@media(max-width:680px){.card{padding:20px}.card-header{flex-direction:column}}