/* MXG Mail 1.6.5 · Auth screens follow the last locally used appearance. */
:root{
  --auth-bg:#080b09;
  --auth-panel:#0d120f;
  --auth-surface:#090d0b;
  --auth-line:#27322b;
  --auth-line-strong:#334039;
  --auth-text:#eef7ef;
  --auth-muted:#98a59d;
  --auth-muted-2:#77867d;
  --auth-accent:#b9ff00;
  --auth-accent-ink:#071007;
  --auth-danger:#ff8c8c;
  --auth-danger-bg:#251315;
  --auth-danger-line:#613739;
  --auth-ok:#caff74;
  --auth-ok-bg:#121d0c;
  --auth-ok-line:#3c5c24;
  --auth-notice:#e8d78f;
  --auth-notice-bg:#1b180b;
  --auth-notice-line:#4a4326;
  --auth-radius:18px;
  color-scheme:dark;
}
html[data-auth-theme="oled"]{
  --auth-bg:#000;--auth-panel:#050706;--auth-surface:#090d0a;--auth-line:#1b241e;--auth-line-strong:#2a352d;
}
html[data-auth-theme="slate"]{
  --auth-bg:#0b0e12;--auth-panel:#11161c;--auth-surface:#151b22;--auth-line:#2a3540;--auth-line-strong:#354452;--auth-text:#f2f5f7;--auth-muted:#929da7;--auth-muted-2:#77838d;
}
html[data-auth-theme="frost"]{
  --auth-bg:#07100d;--auth-panel:rgba(13,22,18,.88);--auth-surface:rgba(20,31,25,.84);--auth-line:rgba(152,178,163,.19);--auth-line-strong:rgba(152,178,163,.28);
}
html[data-auth-theme="paper"]{
  --auth-bg:#f2f4ef;--auth-panel:#fff;--auth-surface:#f8faf6;--auth-line:#d7ddd5;--auth-line-strong:#c7cfc5;--auth-text:#111713;--auth-muted:#667169;--auth-muted-2:#788078;--auth-accent-ink:#071007;
  --auth-danger:#a63740;--auth-danger-bg:#fff1f2;--auth-danger-line:#e3b8bc;--auth-ok:#35690c;--auth-ok-bg:#f2faea;--auth-ok-line:#bdd99f;--auth-notice:#75631e;--auth-notice-bg:#fff9df;--auth-notice-line:#ded09a;
  color-scheme:light;
}
html[data-auth-accent="blue"]{--auth-accent:#4ca7ff}
html[data-auth-accent="violet"]{--auth-accent:#a874ff}
html[data-auth-accent="orange"]{--auth-accent:#ff9d2e}
html[data-auth-accent="white"]{--auth-accent:#f0f4ef}
html[data-auth-theme="paper"][data-auth-accent="white"]{--auth-accent:#222a24;--auth-accent-ink:#fff}
html[data-auth-corners="square"]{--auth-radius:8px}
html[data-auth-corners="round"]{--auth-radius:26px}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--auth-bg);color:var(--auth-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.mxg-auth-screen{
  min-height:100dvh;
  background:
    radial-gradient(circle at 50% 8%,color-mix(in srgb,var(--auth-accent) 4%,transparent),transparent 34%),
    var(--auth-bg);
}
.mxg-auth-screen main{
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:max(calc(env(safe-area-inset-top) + 88px),12dvh) 18px max(calc(env(safe-area-inset-bottom) + 24px),28px);
}
.mxg-auth-card{
  width:min(390px,100%);
  border:1px solid var(--auth-line);
  border-radius:calc(var(--auth-radius) + 6px);
  padding:24px;
  background:var(--auth-panel);
  box-shadow:0 20px 70px rgba(0,0,0,.18);
}
.mxg-auth-card.mxg-auth-card-wide{width:min(430px,100%)}
.mxg-auth-brand{margin:0 0 4px;font-size:31px;line-height:1.05;letter-spacing:-.035em;font-weight:900;color:var(--auth-text)}
.mxg-auth-brand b{color:var(--auth-accent)}
.mxg-auth-lead{margin:13px 0 0;color:var(--auth-muted);font-size:16px;line-height:1.4;font-weight:620}
.mxg-auth-domains{margin:10px 0 17px;color:var(--auth-muted-2);font-size:11px;line-height:1.45;font-weight:650}
.mxg-auth-form{margin-top:5px}
.mxg-auth-form label{display:block;color:var(--auth-muted);font-size:11px;font-weight:800;margin-top:12px}
.mxg-auth-input,.mxg-auth-select{
  width:100%;height:50px;padding:0 14px;border-radius:var(--auth-radius);margin-top:9px;border:1px solid var(--auth-line-strong);outline:none;
  background:var(--auth-surface);color:var(--auth-text);font-size:16px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.mxg-auth-input::placeholder{color:color-mix(in srgb,var(--auth-muted) 74%,transparent)}
.mxg-auth-input:focus,.mxg-auth-select:focus{border-color:var(--auth-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-accent) 12%,transparent)}
.mxg-auth-primary{
  width:100%;min-height:50px;margin-top:16px;padding:11px 16px;border:0;border-radius:var(--auth-radius);background:var(--auth-accent);color:var(--auth-accent-ink);
  font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 10px 28px color-mix(in srgb,var(--auth-accent) 10%,transparent);
}
.mxg-auth-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.mxg-auth-secondary-row{text-align:center;margin:16px 0 0;color:var(--auth-muted);font-size:13px;font-weight:650}
.mxg-auth-secondary-row a{color:var(--auth-text);font-weight:850;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--auth-accent) 55%,transparent);padding-bottom:1px}
.mxg-auth-secondary-row a:hover,.mxg-auth-secondary-row a:focus{color:var(--auth-accent)}
.mxg-auth-credit{text-align:center;margin:19px 0 0;font-size:9px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--auth-muted-2)}
.mxg-auth-error,.mxg-auth-ok,.mxg-auth-notice{padding:11px 12px;border-radius:calc(var(--auth-radius) - 3px);margin:13px 0;font-size:12px;line-height:1.45}
.mxg-auth-error{border:1px solid var(--auth-danger-line);background:var(--auth-danger-bg);color:var(--auth-danger)}
.mxg-auth-ok{border:1px solid var(--auth-ok-line);background:var(--auth-ok-bg);color:var(--auth-ok)}
.mxg-auth-notice{border:1px solid var(--auth-notice-line);background:var(--auth-notice-bg);color:var(--auth-notice)}
.mxg-auth-help{font-size:10px;color:var(--auth-muted-2);margin-top:5px;line-height:1.35}
.mxg-auth-address-row{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:8px}
.mxg-auth-preview{margin:8px 0 2px;padding:10px 12px;border:1px solid var(--auth-line);border-radius:calc(var(--auth-radius) - 4px);background:var(--auth-surface);color:var(--auth-muted);font-size:12px;overflow-wrap:anywhere}
.mxg-auth-preview b{color:var(--auth-accent)}

@media (max-width:440px){
  .mxg-auth-screen main{padding-left:16px;padding-right:16px;padding-top:max(calc(env(safe-area-inset-top) + 72px),10dvh)}
  .mxg-auth-card{padding:22px 20px}
  .mxg-auth-brand{font-size:29px}
  .mxg-auth-lead{font-size:15px}
  .mxg-auth-address-row{grid-template-columns:1fr}
  .mxg-auth-address-row .mxg-auth-select{margin-top:0}
}
@media (max-height:700px){
  .mxg-auth-screen main{padding-top:max(calc(env(safe-area-inset-top) + 32px),5dvh)}
}
@media (min-width:760px) and (min-height:760px){
  .mxg-auth-screen main{padding-top:15vh}
}
