:root { --bg:#0f1020; --card:#17182b; --text:#f7f7fb; --muted:#a7a8be; --primary:#10b981; --dark:#0f172a; --border:rgba(255,255,255,.12); --danger:#ef4444; }
        * { box-sizing: border-box; }
        body { margin:0; min-height:100vh; display:grid; place-items:center; background:linear-gradient(180deg,#0f172a,#0f1020); color:var(--text); font-family:Arial,sans-serif; padding:20px; }
        .card { width:100%; max-width:440px; background:var(--card); border:1px solid var(--border); border-radius:28px; padding:28px; box-shadow:0 20px 70px rgba(0,0,0,.45); }
        .brand { display:flex; gap:12px; align-items:center; margin-bottom:22px; }
        .logo { width:48px; height:48px; border-radius:16px; background:#fff; display:grid; place-items:center; overflow:hidden; color:#111; font-weight:bold; }
        .logo img { max-width:100%; max-height:100%; object-fit:contain; padding:5px; }
        h1 { margin:0 0 6px; font-size:30px; }
        p { color:var(--muted); line-height:1.5; }
        label { display:block; color:var(--muted); margin:14px 0 7px; font-size:14px; }
        input { width:100%; padding:13px; border-radius:14px; background:#0f1326; color:var(--text); border:1px solid var(--border); }
        button { width:100%; margin-top:18px; border:0; border-radius:14px; padding:13px; background:var(--primary); color:#fff; font-weight:bold; cursor:pointer; }
        .msg { margin-top:14px; padding:12px; border-radius:14px; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#fecaca; }