:root{
  --login-primary:#07182f;
  --login-secondary:#0b2f5c;
  --login-accent:#d8aa56;
  --login-page-bg:#07182f;
  --login-surface:#0b274b;
  --login-text:#f7fbff;
  --login-muted:#bfd0e6;
  --login-field-bg:rgba(4,19,39,.45);
  --login-field-text:#fff;
  --login-border:rgba(255,255,255,.16);
  --login-card-shadow:0 24px 70px rgba(0,0,0,.32);
  --login-footer-bg:rgba(3,15,31,.46);
  --login-radius:16px;
  --login-font:Inter,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  font-family:var(--login-font);
  color:var(--login-text);
  background:
    radial-gradient(circle at 80% 10%,rgba(55,101,165,.23),transparent 34%),
    radial-gradient(circle at 20% 80%,rgba(216,170,86,.11),transparent 33%),
    linear-gradient(145deg,var(--login-page-bg) 0%,var(--login-primary) 48%,var(--login-secondary) 100%);
  overflow-x:hidden;
}
.login-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;position:relative;isolation:isolate}
.login-shell::before,.login-shell::after{
  content:"";position:fixed;inset:auto;z-index:-2;border-radius:50%;filter:blur(2px);opacity:.45;animation:floatOrb 14s ease-in-out infinite
}
.login-shell::before{width:420px;height:420px;right:-120px;top:60px;background:radial-gradient(circle,rgba(216,170,86,.18),transparent 68%)}
.login-shell::after{width:360px;height:360px;left:-110px;bottom:30px;background:radial-gradient(circle,rgba(72,126,197,.18),transparent 68%);animation-delay:-6s}
.login-particles{position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:
 radial-gradient(circle,rgba(245,208,139,.9) 0 1px,transparent 1.5px),
 radial-gradient(circle,rgba(120,170,235,.55) 0 1px,transparent 1.5px);
 background-size:84px 84px,120px 120px;background-position:0 0,32px 28px;mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.3) 34%,#000 100%);animation:particleDrift 22s linear infinite}
.login-header{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(22px,4vw,70px);position:relative;z-index:3}
.login-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.login-brand img{width:48px;height:48px;object-fit:contain;border-radius:12px;filter:drop-shadow(0 7px 18px rgba(0,0,0,.3))}
.login-brand strong{display:block;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.login-brand small{display:block;color:var(--login-accent);font-size:10px;letter-spacing:.18em;margin-top:3px}
.crm-mark{font-weight:800;letter-spacing:.12em;color:#fff}.crm-mark span{color:var(--login-gold)}
.login-main{display:grid;grid-template-columns:minmax(380px,560px) minmax(460px,1fr);align-items:center;gap:clamp(22px,5vw,80px);padding:0 clamp(22px,5vw,86px) 20px}
.login-copy{max-width:530px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--login-accent) 48%,transparent);border-radius:999px;background:color-mix(in srgb,var(--login-accent) 10%,transparent);color:var(--login-accent);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.login-copy h1{font-size:clamp(38px,4vw,64px);line-height:.98;margin:18px 0 14px;letter-spacing:-.035em}
.login-copy>p{max-width:470px;color:var(--login-muted);font-size:16px;line-height:1.65;margin:0 0 24px}
.login-card{width:min(100%,520px);padding:24px;border:1px solid var(--login-border);border-radius:20px;background:color-mix(in srgb,var(--login-surface) 90%,transparent);box-shadow:var(--login-card-shadow);backdrop-filter:blur(18px);position:relative;overflow:hidden}
.login-card::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--login-gold-light),transparent);box-shadow:0 0 16px var(--login-gold)}
.login-card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.login-card h2{font-size:24px;margin:0 0 5px}.login-card-heading p{margin:0;color:var(--login-muted);font-size:13px}
.secure-dot{display:inline-flex;align-items:center;gap:7px;color:#cde1f7;font-size:11px}.secure-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#66d08f;box-shadow:0 0 12px #66d08f}
.login-alert{padding:11px 13px;margin-bottom:14px;border-radius:11px;background:rgba(180,35,24,.16);border:1px solid rgba(255,120,105,.32);font-size:13px}
.login-alert.info{background:rgba(51,112,180,.16);border-color:rgba(96,165,250,.32)}
.login-form label{display:block;margin:0 0 7px;font-size:12px;font-weight:700;color:#eef5ff}
.field{display:flex;align-items:center;border:1px solid rgba(255,255,255,.18);background:var(--login-field-bg);border-radius:12px;margin-bottom:14px;transition:.2s}
.field:focus-within{border-color:rgba(216,170,86,.75);box-shadow:0 0 0 3px rgba(216,170,86,.11)}
.field svg{width:18px;height:18px;margin-left:13px;stroke:currentColor;fill:none;color:#c7d6e8}
.field input{flex:1;min-width:0;padding:13px 12px;border:0;outline:0;background:transparent;color:var(--login-field-text);font:inherit}
.field input::placeholder{color:#7f96b2}
.password-toggle{width:42px;height:42px;border:0;background:transparent;color:#d8e4f2;cursor:pointer}
.password-toggle svg{margin:0;width:19px;height:19px}
.form-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 16px;font-size:12px}
.form-meta label{display:flex;align-items:center;gap:8px;margin:0;font-weight:500}
.form-meta input{width:auto;accent-color:var(--login-gold)}
.form-meta a{color:var(--login-accent);text-decoration:none}
.sign-in-button{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;padding:13px 18px;background:linear-gradient(180deg,color-mix(in srgb,var(--login-accent) 78%,white),var(--login-accent));color:#10223d;font-size:15px;font-weight:850;cursor:pointer;box-shadow:0 10px 26px rgba(216,170,86,.2);transition:.2s}
.sign-in-button:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(216,170,86,.28)}
.sign-in-button svg{width:17px;height:17px;fill:none;stroke:currentColor}
.security-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;color:#b9c9dd;font-size:11px;line-height:1.5}
.security-note svg{width:20px;height:20px;flex:none;stroke:var(--login-gold-light);fill:none}
.portrait-panel{position:relative;min-height:650px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.portrait-panel::before{content:"";position:absolute;inset:8% 1% 6% 4%;border-radius:50%;background:
 radial-gradient(circle at 50% 45%,rgba(216,170,86,.12),transparent 44%),
 repeating-radial-gradient(circle at 50% 50%,rgba(216,170,86,.18) 0 1px,transparent 1px 22px);opacity:.55;animation:pulseRings 9s ease-in-out infinite}
.portrait-panel::after{content:"";position:absolute;right:-4%;bottom:8%;width:78%;height:55%;background:linear-gradient(120deg,transparent,rgba(216,170,86,.08),transparent);transform:skewY(-9deg);animation:lightSweep 7s ease-in-out infinite}
.portrait{position:relative;z-index:2;max-height:720px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 28px 50px rgba(0,0,0,.35));animation:portraitFloat 8s ease-in-out infinite}
.feature-strip{display:grid;grid-template-columns:1.2fr repeat(3,1fr) 1.35fr;gap:0;border-top:1px solid rgba(255,255,255,.12);background:var(--login-footer-bg);backdrop-filter:blur(16px);padding:0 clamp(16px,4vw,65px)}
.feature-item{min-height:76px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-right:1px solid rgba(255,255,255,.1);color:#d6e1ef;font-size:12px;text-align:left}
.feature-item:last-child{border-right:0}.feature-item strong{display:block;color:#fff;font-size:12px;margin-bottom:3px}.feature-item svg{width:27px;height:27px;stroke:var(--login-gold);fill:none;flex:none}
@keyframes floatOrb{50%{transform:translateY(22px) scale(1.06)}}
@keyframes particleDrift{to{background-position:84px 84px,152px 148px}}
@keyframes portraitFloat{50%{transform:translateY(-10px)}}
@keyframes pulseRings{50%{transform:scale(1.04);opacity:.75}}
@keyframes lightSweep{50%{transform:translateX(-8%) skewY(-9deg);opacity:.8}}
@media(max-width:1120px){
 .login-main{grid-template-columns:minmax(360px,520px) 1fr;gap:20px}
 .portrait-panel{min-height:560px}.portrait{max-height:610px}
 .feature-strip{grid-template-columns:repeat(3,1fr)}.feature-item:nth-child(1),.feature-item:nth-child(5){display:none}
}
@media(max-width:840px){
 body{overflow:auto}.login-main{grid-template-columns:1fr;padding-top:16px}.portrait-panel{position:absolute;inset:70px 0 0 35%;opacity:.16;pointer-events:none;min-height:0}.portrait{max-height:88vh}
 .login-copy{max-width:620px}.login-card{background:rgba(7,27,54,.9)}
 .feature-strip{grid-template-columns:1fr}.feature-item{display:none}.feature-item:nth-child(5){display:flex;border:0}
}
@media(max-width:560px){
 .login-header{padding:16px}.login-brand strong{font-size:12px}.login-brand img{width:40px;height:40px}.crm-mark{display:none}
 .login-main{padding:10px 16px 22px}.login-copy h1{font-size:38px}.login-copy>p{font-size:14px}
 .login-card{padding:18px;border-radius:16px}.form-meta{align-items:flex-start;flex-direction:column}
}


/* Branding compatibility and compact typography */
html{font-size:16px!important}
body{font-size:14px!important}
.login-brand strong{font-size:13px!important}
.login-brand small{font-size:9px!important}
.crm-mark{font-size:15px!important;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-copy h1{font-size:clamp(34px,3.1vw,52px)!important}
.login-copy>p{font-size:14px!important;line-height:1.55!important}
.login-card{width:min(100%,470px)!important;padding:20px!important;border-radius:var(--login-radius)!important}
.login-card h2{font-size:21px!important}
.login-card-heading p{font-size:12px!important}
.login-form label{font-size:11px!important}
.field input{font-size:13px!important;padding:11px 11px!important}
.field{margin-bottom:11px!important;border-radius:calc(var(--login-radius) * .7)!important}
.sign-in-button{font-size:14px!important;padding:11px 16px!important;border-radius:calc(var(--login-radius) * .7)!important}
.security-note,.feature-item{font-size:10.5px!important}
.feature-item strong{font-size:11px!important}
.eyebrow{font-size:10px!important}
.login-header{padding-top:15px!important;padding-bottom:15px!important}
.login-main{align-items:center!important}
body[data-login-theme="light"]{
  background:
    radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--login-secondary) 17%,transparent),transparent 34%),
    radial-gradient(circle at 20% 80%,color-mix(in srgb,var(--login-accent) 12%,transparent),transparent 33%),
    linear-gradient(145deg,var(--login-page-bg),color-mix(in srgb,var(--login-page-bg) 82%,white),var(--login-page-bg))!important;
}
body[data-login-theme="light"] .login-card{
  border-color:var(--login-border)!important;
}
body[data-login-theme="light"] .field{
  border-color:var(--login-border)!important;
}
body[data-login-theme="light"] .field input::placeholder{
  color:color-mix(in srgb,var(--login-muted) 75%,transparent)!important;
}
body[data-login-theme="light"] .feature-strip{
  border-top-color:var(--login-border)!important;
}