/* Proweb Design Webmail — Copyright (c) 2026 Proweb Design. All rights reserved. */
.guest-page { background: #0e1522; }
.guest-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, 1.08fr) minmax(440px, .92fr); }
.brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(38px, 6vw, 84px); color: #fff; background: radial-gradient(circle at 20% 20%, rgba(119, 120, 245, .35), transparent 36%), radial-gradient(circle at 88% 76%, rgba(65, 178, 188, .18), transparent 30%), linear-gradient(145deg, #171d31 0%, #0f1522 75%); }
.brand-panel::after { position: absolute; right: -120px; bottom: -170px; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.02), 0 0 0 120px rgba(255,255,255,.015); content: ""; }
.brand-panel .brand-mark { position: relative; z-index: 1; }
.brand-panel .brand-mark small { color: rgba(255,255,255,.55); }
.brand-copy { position: relative; z-index: 1; max-width: 620px; margin: auto 0; padding: 80px 0; }
.brand-copy h1 { margin-bottom: 24px; font-size: clamp(46px, 5.7vw, 82px); line-height: .98; }
.brand-copy p { max-width: 570px; margin: 0; color: rgba(255,255,255,.65); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; }
.brand-panel .eyebrow { color: #a9aafc; }
.feature-list { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; color: rgba(255,255,255,.6); list-style: none; font-size: 13px; }
.feature-list li::before { margin-right: 8px; color: #8ce0c3; content: "✓"; }
.security-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.55); font-size: 13px; }
.security-note span { display: grid; width: 24px; height: 24px; place-items: center; color: #8ce0c3; background: rgba(140,224,195,.09); border-radius: 8px; }
.guest-card { display: flex; width: min(100%, 620px); min-height: 100vh; flex-direction: column; justify-content: center; padding: clamp(42px, 7vw, 96px); background: var(--surface); }
.guest-card h2 { margin-bottom: 10px; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.04em; }
.guest-card > .muted { margin-bottom: 26px; }
.login-card { width: 100%; max-width: none; }
.login-card form { max-width: 440px; }
.login-divider { display: flex; align-items: center; gap: 14px; max-width: 440px; margin: 22px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.login-divider::before, .login-divider::after { flex: 1; height: 1px; content: ""; background: var(--line); }
.installer-card { width: 100%; max-width: none; justify-content: flex-start; overflow: auto; }
.installer-card > * { width: min(100%, 560px); margin-left: auto; margin-right: auto; }
.step-label { margin-bottom: 18px; color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.fine-print { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.mobile-brand { display: none; margin-bottom: 44px; }
.guest-footer { display: flex; gap: 10px; margin-top: 36px; color: var(--muted); font-size: 12px; }
.system-page { min-height: 100vh; padding: 28px; }
.system-header { display: flex; max-width: 960px; align-items: center; justify-content: space-between; margin: 0 auto 24px; }
.system-card { max-width: 960px; margin: 0 auto; padding: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.requirements.large .requirement-row { padding: 14px 16px; }

@media (max-width: 900px) {
  .guest-shell { grid-template-columns: 1fr; background: var(--surface); }
  .brand-panel { display: none; }
  .guest-card { width: 100%; min-height: 100vh; padding: 34px 24px; }
  .login-card { justify-content: center; }
  .mobile-brand { display: inline-flex; }
}

@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
  .system-page { padding: 14px; }
  .system-card { padding: 24px; }
}
.installer-form { padding-bottom: 40px; }
.installer-proof { padding-bottom: 40px; }
.installer-proof fieldset > p { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }
.install-proof-path { display: grid; gap: 7px; margin-bottom: 16px; font-size: 13px; }
.install-proof-path code { overflow-wrap: anywhere; padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; }
.install-proof-path small { color: var(--muted); }
.installer-proof > form, .installer-proof > form .button { width: 100%; margin: 0; }
.system-header > div { display: flex; gap: 10px; }
.admin-brand-panel { background: radial-gradient(circle at 16% 15%, rgba(49,87,213,.42), transparent 35%), linear-gradient(145deg, #10182a, #090e17); }
@media (max-width: 520px) { .system-header { align-items: flex-start; gap: 16px; flex-direction: column; } .system-header > div { width: 100%; } .system-header .button { flex: 1; } }

.login-shell.has-custom-background .brand-panel { background-image: linear-gradient(var(--login-overlay-color),var(--login-overlay-color)),var(--login-background); background-position:var(--login-background-position,center); background-size:cover; }
.brand-logo-image { display:block; max-width:220px; max-height:72px; object-fit:contain; }
.login-language { display:flex; justify-content:flex-end; margin-bottom:28px; }
.login-language form { max-width:220px; }
.login-language label { color:var(--muted); font-size:12px; }
.login-language select { height:38px; margin-top:5px; }

.logout-maintenance-shell{display:grid;place-items:center;min-height:100vh;padding:24px}.logout-maintenance-card{width:min(620px,100%);padding:32px}.logout-maintenance-list{display:grid;gap:10px;margin:20px 0;padding-left:22px}.logout-maintenance-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:24px}.logout-maintenance-actions form{margin:0}


/* dev.5.7.58 optional showcase sign-in */
.login-shell{position:relative;isolation:isolate;overflow:hidden}
.login-shell>.brand-panel,.login-shell>.guest-card{position:relative;z-index:2}
.login-backgrounds{position:absolute;z-index:0;inset:0 46% 0 0;overflow:hidden;background:#101725}
.login-backgrounds::after{position:absolute;z-index:2;inset:0;background:var(--login-overlay-color,rgba(16,23,37,.28));content:"";pointer-events:none}
.login-background{position:absolute;inset:-2%;background-image:var(--login-slide-image);background-position:var(--login-background-position,center);background-size:cover;opacity:0;transform:scale(1.025);transition:opacity .8s ease,transform 1.1s ease}
.login-background.is-active{z-index:1;opacity:1;transform:scale(1)}
.login-shell.effect-slide .login-background{opacity:1;transform:translateX(102%)}
.login-shell.effect-slide .login-background.was-active{transform:translateX(-102%)}
.login-shell.effect-slide .login-background.is-active{transform:translateX(0)}
.login-shell.has-custom-background .brand-panel{background:transparent}
.login-presentation-toggle{min-height:38px;padding:0 12px;color:var(--text);background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.login-language{align-items:flex-end;gap:10px}
.login-language form{margin-left:auto}
.login-shell.button-square .button-primary{border-radius:2px}
.login-shell.button-rounded .button-primary{border-radius:12px}
.login-shell.button-pill .button-primary{border-radius:999px}
.login-shell .login-card .button-primary{background:var(--login-button-color,#e60057);border-color:var(--login-button-color,#e60057)}
.login-shell.presentation-showcase{display:grid;min-height:100vh;grid-template-columns:1fr;place-items:center;padding:clamp(18px,4vw,60px)}
.login-shell.presentation-showcase .login-backgrounds{position:absolute;inset:0}
.login-shell.presentation-showcase>.brand-panel{display:none}
.login-shell.presentation-showcase>.login-card{width:min(100%,480px);min-height:0;padding:clamp(30px,5vw,52px);background:color-mix(in srgb,var(--login-card-background,#fff) calc(var(--login-card-opacity,.96)*100%),transparent);border:1px solid rgba(255,255,255,.35);border-radius:24px;box-shadow:0 30px 80px rgba(5,10,24,.38);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.login-shell.presentation-showcase .mobile-brand{display:inline-flex;margin-bottom:30px}
.login-shell.presentation-showcase .login-language{order:-1;margin-bottom:20px}
.login-shell.presentation-showcase .login-language form{max-width:190px}
.login-shell.presentation-showcase .guest-footer{flex-wrap:wrap}
@media(max-width:900px){.login-backgrounds{inset:0}.login-shell.presentation-split .login-backgrounds{display:none}.login-shell.presentation-showcase{padding:18px}.login-shell.presentation-showcase>.login-card{min-height:0;border-radius:20px}}
@media(prefers-reduced-motion:reduce){.login-background{transition:none!important}.login-shell.effect-slide .login-background{transform:none!important}}