*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}:root{--login-bg:#e9e9e9;--login-card:#fff;--login-text:#24343a;--login-muted:#6f8086;--login-accent:#59cddd;--login-accent-strong:#3fc3d6;--login-secondary:#f89a00;--login-secondary-strong:#e68f00;--login-border:#cfe7eb;--login-error:#dc4c3f;--login-shadow:0 18px 40px #24343a1a;--login-soft-shadow:0 8px 20px #24343a14}.login-wrapper{background:radial-gradient(circle at top left,#59cddd24,transparent 30%),radial-gradient(circle at bottom right,#f89a0024,transparent 30%),var(--login-bg);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-container{background:var(--login-card);border:1px solid var(--login-border);width:100%;max-width:420px;box-shadow:var(--login-shadow);border-radius:22px;padding:36px 28px;position:relative;overflow:hidden}.login-container:before{content:"";background:linear-gradient(90deg,var(--login-accent)0%,var(--login-secondary)100%);height:6px;position:absolute;inset:0 0 auto}.login-logo-box{justify-content:center;width:100%;margin-bottom:18px;display:flex}.login-logo-placeholder{border:2px dashed color-mix(in srgb,var(--login-accent)55%,var(--login-border));width:110px;height:110px;color:var(--login-muted);text-align:center;box-shadow:var(--login-soft-shadow);background:linear-gradient(135deg,#59cddd14,#f89a0014);border-radius:20px;justify-content:center;align-items:center;padding:10px;font-size:14px;display:flex;overflow:hidden}.login-logo-placeholder img{object-fit:contain;width:100%;height:100%}.login-logo-placeholder span{line-height:1.4}.login-container h2{text-align:center;color:var(--login-text);margin-bottom:8px;font-size:28px;font-weight:700}.login-subtitle{text-align:center;color:var(--login-muted);margin-bottom:22px;font-size:14px}.login-container form{flex-direction:column;gap:14px;display:flex}.login-input-group{flex-direction:column;gap:8px;display:flex}.login-input-group label{color:var(--login-text);font-size:14px;font-weight:600}.login-container input{border:1px solid var(--login-border);width:100%;color:var(--login-text);background:#fff;border-radius:12px;outline:none;padding:13px 14px;font-size:15px;transition:border-color .2s,box-shadow .2s,background-color .2s}.login-container input::placeholder{color:#9aa9ad}.login-container input:focus{border-color:var(--login-accent);box-shadow:0 0 0 4px #59cddd2e}.login-password-field{position:relative}.login-password-field input{padding-right:48px}.login-container .login-password-toggle{width:36px;height:36px;color:var(--login-muted);box-shadow:none;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.login-container .login-password-toggle:hover{color:var(--login-text);box-shadow:none;filter:none;background:#59cddd1f;transform:translateY(-50%)}.login-container .login-password-toggle:active{transform:translateY(-50%)}.login-container .login-password-toggle:focus-visible{outline:2px solid var(--login-accent);outline-offset:2px}.login-password-toggle svg{width:20px;height:20px}.login-container button{background:linear-gradient(135deg,var(--login-accent)0%,var(--login-secondary)100%);color:#fff;cursor:pointer;border:none;border-radius:12px;margin-top:6px;padding:13px 14px;font-size:16px;font-weight:700;transition:transform .18s,filter .2s,box-shadow .2s;box-shadow:0 12px 24px #59cddd38}.login-container button:hover{filter:brightness(1.02);transform:translateY(-1px);box-shadow:0 16px 28px #59cddd3d}.login-container button:active{transform:translateY(0)}.login-container button:disabled{opacity:.7;cursor:not-allowed}.login-error{color:var(--login-error);background:#dc4c3f14;border:1px solid #dc4c3f2e;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.4}.login-container .forgot{text-align:center;margin-top:8px}.login-container .forgot a{color:var(--login-secondary);font-size:14px;font-weight:600;text-decoration:none}.login-container .forgot a:hover{text-decoration:underline}@media screen and (max-width:480px){.login-wrapper{padding:16px}.login-container{border-radius:18px;padding:28px 18px}.login-logo-placeholder{border-radius:16px;width:90px;height:90px}.login-container h2{font-size:24px}}