/* BlueCoree Billpro sign-in: full-screen split, isolated from the workspace styles. */
.login-page{--ink:#1e1b3a;--muted:#6b6890;--violet:#8b5cf6;--indigo:#5b4cf0;--pink:#ec4899;min-height:100vh;margin:0;background:#f7f6fd;color:var(--ink);font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif}
.login-page .login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,1fr)}

/* Story side */
.login-story{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:44px clamp(28px,5vw,72px);color:white;background:linear-gradient(150deg,#14113a 0%,#2a1f6e 42%,#5b21b6 78%,#86198f 100%)}
.login-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:-1;animation:drift 14s ease-in-out infinite alternate}
.glow-a{width:420px;height:420px;background:#6366f1;top:-120px;left:-100px}
.glow-b{width:380px;height:380px;background:#ec4899;bottom:-140px;right:-80px;animation-delay:-5s}
.glow-c{width:260px;height:260px;background:#22d3ee;top:42%;left:55%;opacity:.35;animation-delay:-9s}
@keyframes drift{to{transform:translate(40px,30px) scale(1.08)}}
.login-identity{display:flex;align-items:center;gap:14px;color:white;text-decoration:none;width:fit-content}
.login-identity img{width:56px;height:56px;padding:6px;background:white;border-radius:16px;box-shadow:0 10px 30px #0006}
.login-identity strong{display:block;font-size:24px;font-weight:750;letter-spacing:-.5px}
.login-identity small{display:block;font-size:10px;font-weight:700;letter-spacing:3px;color:#c4b5fd;margin-top:3px}
.login-story-content{margin-top:auto;padding-top:48px;max-width:520px}
.login-eyebrow{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:2px;color:#f9a8d4;background:#ffffff12;border:1px solid #ffffff24;padding:7px 12px;border-radius:20px}
.login-story h1{font-size:clamp(32px,3.6vw,50px);line-height:1.08;letter-spacing:-1.6px;font-weight:800;margin:20px 0 16px;color:white}
.login-story h1 span{background:linear-gradient(90deg,#a5f3fc,#c4b5fd 45%,#f9a8d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-story-content>p{color:#ddd6fe;font-size:15.5px;line-height:1.7;margin:0 0 26px;max-width:440px}
.login-features{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.login-features li{display:flex;align-items:center;gap:14px}
.login-features strong{display:block;font-size:14.5px}
.login-features small{display:block;color:#c4b5fd;font-size:12.5px;margin-top:2px}
.feature-icon{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:12px;font-size:17px;font-weight:700;color:white;box-shadow:0 8px 20px #0004}
.fi-violet{background:linear-gradient(135deg,#6d5df5,#a855f7)}.fi-green{background:linear-gradient(135deg,#10b981,#14b8a6)}.fi-orange{background:linear-gradient(135deg,#f97316,#ec4899)}
.login-preview{position:relative;height:150px;margin:34px 0 8px;max-width:520px}
.glass-card{position:absolute;padding:16px 18px;border-radius:18px;background:#ffffff1c;border:1px solid #ffffff33;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px #0003;animation:float 6s ease-in-out infinite alternate}
.glass-card small{display:block;color:#ddd6fe;font-size:11.5px}
.glass-card strong{display:block;font-size:22px;font-weight:750;margin-top:4px;letter-spacing:-.4px}
.card-sales{left:0;top:10px;width:230px}
.card-invoice{left:250px;top:46px;width:220px;animation-delay:-3s}
.card-invoice strong{font-size:16px}
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;background:#10b98140;color:#a7f3d0;margin-bottom:6px}
.spark{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:10px}
.spark i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#a5f3fc,#818cf8)}
@keyframes float{to{transform:translateY(-8px)}}
.login-story-footer{margin:18px 0 0;font-size:11.5px;color:#a5a0d6}

/* Form side */
.login-form-side{display:flex;align-items:center;justify-content:center;padding:48px clamp(24px,5vw,72px);background:radial-gradient(600px 400px at 100% 0,#fce7f3 0,transparent 60%),radial-gradient(500px 400px at 0 100%,#e0e7ff 0,transparent 60%),#fbfaff}
.login-form-card{width:100%;max-width:400px}
.login-mobile-logo{display:none}
.login-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:2.2px;color:var(--violet)}
.login-form-side h2{font-size:clamp(26px,2.4vw,32px);line-height:1.2;letter-spacing:-.9px;font-weight:800;margin:12px 0 10px}
.login-form-side h2 span{background:linear-gradient(90deg,#4338ca,#a21caf 60%,#db2777);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-subtitle{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 26px}
.login-form label{display:block;font-size:12.5px;font-weight:650;color:#3f3a66;margin:18px 0 8px}
.login-field{position:relative}
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#9b95c9;pointer-events:none;transition:color .15s}
.field-icon svg{width:20px;height:20px;display:block}
.login-form input{display:block;width:100%;margin:0;padding:14px 14px 14px 44px;min-height:52px;border:1.5px solid #e2ddf7;border-radius:14px;background:white;color:var(--ink);font:inherit;font-size:14.5px;box-shadow:0 1px 2px #1e1b3a08;transition:border-color .15s,box-shadow .15s}
.login-form input::placeholder{color:#aaa5cc}
.login-form input:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px #8b5cf626}
.login-field:focus-within .field-icon{color:var(--violet)}
.login-password-field input{padding-right:72px}
.login-form .password-visibility{position:absolute;right:8px;top:50%;transform:translateY(-50%);min-height:36px;padding:7px 12px;background:#f3f0ff;color:#5b4cf0;border:0;border-radius:10px;font-size:12px;font-weight:700;box-shadow:none;cursor:pointer}
.login-form .password-visibility:hover{background:#e9e3ff}
.login-form .login-submit{display:flex;width:100%;justify-content:center;gap:10px;align-items:center;min-height:54px;margin-top:28px;padding:14px 18px;border:0;border-radius:14px;background:linear-gradient(110deg,#5b4cf0,#8b5cf6 50%,#d946ef);background-size:160% 100%;color:white;font-size:15px;font-weight:750;cursor:pointer;box-shadow:0 12px 26px #7c3aed40;transition:background-position .3s,transform .12s,box-shadow .12s}
.login-submit:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 16px 32px #7c3aed50}
.login-submit span{font-size:20px;line-height:1;transition:transform .15s}
.login-submit:hover span{transform:translateX(3px)}
.login-page :focus-visible{outline:3px solid #a78bfa;outline-offset:3px}
.login-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.login-trust span{font-size:11.5px;color:#5b5685;background:white;border:1px solid #ece9fb;padding:6px 10px;border-radius:20px}
.login-trust b{font-weight:400;margin-right:3px}
.login-help{display:flex;align-items:flex-start;gap:11px;border-top:1px solid #ece9fb;margin-top:26px;padding-top:20px}
.login-help-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ede9fe;color:#6d28d9;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
.login-help p{font-size:12px;line-height:1.7;color:#5b5685;margin:0}
.login-help p span{color:#8d88b5}
.login-error{display:flex;gap:10px;align-items:center;background:#fff1f3;border:1px solid #fecdd3;color:#be123c;padding:12px 14px;border-radius:12px;font-size:13px;margin-bottom:6px}
.login-error span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#f43f5e;color:white;font-weight:800;font-size:12px;flex-shrink:0}

@media(max-width:960px){
 .login-page .login-shell{grid-template-columns:1fr}
 .login-story{padding:28px 24px 30px}
 .login-story-content{margin-top:26px;padding-top:0}
 .login-story h1{font-size:30px;margin:14px 0 10px}
 .login-features,.login-preview,.login-story-footer{display:none}
 .login-story-content>p{margin:0}
 .login-form-side{padding:32px 20px 40px;align-items:flex-start}
}
@media(max-width:480px){.login-identity img{width:46px;height:46px}.login-identity strong{font-size:20px}.login-story h1{font-size:26px}.login-eyebrow{font-size:9.5px}}
@media(prefers-reduced-motion:reduce){.login-glow,.glass-card{animation:none}}

/* Get the app */
.login-apps{margin-top:24px;padding:16px;border-radius:16px;background:linear-gradient(120deg,#f5f3ff,#fdf4ff);border:1px solid #ece9fb}
.login-apps-title{display:block;font-size:12px;font-weight:750;color:#3f3a66;margin-bottom:10px}
.login-apps-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.app-download{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:white;border:1px solid #e2ddf7;color:#1e1b3a;text-decoration:none;transition:transform .12s,box-shadow .12s,border-color .12s}
.app-download:hover{transform:translateY(-1px);box-shadow:0 8px 18px #5b4cf022;border-color:#c4b5fd}
.app-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:white;flex-shrink:0}
.app-icon svg{width:20px;height:20px}
.app-android .app-icon{background:linear-gradient(135deg,#22c55e,#10b981)}
.app-windows .app-icon{background:linear-gradient(135deg,#0ea5e9,#3b82f6)}
.app-text strong{display:block;font-size:13px}
.app-text small{display:block;font-size:10.5px;color:#7a7599;margin-top:1px}
.app-arrow{margin-left:auto;color:#8b5cf6;font-weight:800}
.login-apps-note{display:block;margin-top:9px;font-size:10.5px;color:#8d88b5;line-height:1.5}
@media(max-width:480px){.login-apps-row{grid-template-columns:1fr}}