
/* Login: always dark, independent of the four authenticated themes. */
html body #login.login{background:#080f19!important;min-height:100dvh}
html body #login.login .login-panel{background:radial-gradient(ellipse at 100% 0%,#243240 0%,#101922 55%,#0b131d 100%)!important;color:#f4f7fb!important;border-color:#334252!important}
html body #login.login .form h2,html body #login.login .field,html body #login.login .setup summary{color:#f4f7fb!important}
html body #login.login .form p,html body #login.login .status{color:#b8c7d7!important}
html body #login.login input:not([type=checkbox]),html body #login.login select,html body #login.login textarea{background:#1a2633!important;color:#f4f7fb!important;border:1px solid #465668!important}
html body #login.login input::placeholder{color:#afbed0!important;opacity:1!important}
html body #login.login input:focus-visible,html body #login.login select:focus-visible{outline:2px solid #e4b75a!important;outline-offset:1px}
html body #login.login .setup,html body #login.login .hint{background:#172330!important;border-color:#405166!important;color:#e6eef7!important}
html body #login.login .setup label{color:#dfeaf5!important}
html body #login.login .auth-link{color:#efc167!important}
html body #login.login .primary{background:linear-gradient(180deg,#f5c25c,#d59b25)!important;color:#19212c!important;border-color:#e9b248!important;font-weight:800}
html body #login.login .mp-language-picker{background:#172330!important;color:#f2f6fa!important;border-color:#536579!important}
html body #login.login .hero{border:1px solid #334252!important;border-right:0!important;background-blend-mode:normal!important}
html body #login.login .hero h1{max-width:390px;font-size:clamp(34px,3.05vw,49px);line-height:1.14}
html body #login.login .hero .monogram{font-size:83px}
html body #login.login .hero:after{display:none!important}
html body #login.login .login-panel{border-radius:0 19px 19px 0!important}
/* Preserve fixed colors for the dark globe banner while keeping companion cards theme-aware. */
#content .mp102-home-hero{border:1px solid rgba(105,141,177,.32)!important;box-shadow:0 13px 30px rgba(11,25,42,.12)}
#content .mp102-home-hero::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(3,14,28,.30),transparent 75%);pointer-events:none}
#content .mp102-home-hero>*{position:relative;z-index:1}
#content .mp102-home-hero h2{font-weight:780!important;text-shadow:0 2px 13px #07121a88}
#content .mp102-standard{transition:transform .16s,border-color .16s,box-shadow .16s;box-shadow:0 4px 14px rgba(19,39,62,.045)}
#content .mp102-standard:hover{transform:translateY(-2px);border-color:var(--t-accent);box-shadow:0 7px 20px rgba(20,45,65,.12)}
html[data-mp-theme=green] #content .mp102-standard svg{color:#237f62!important}
html[data-mp-theme=blue] #content .mp102-standard svg{color:#3179bd!important}
html[data-mp-theme=dark] #content .mp102-standard svg,html[data-mp-theme=graphite] #content .mp102-standard svg{color:#ddb55d!important}
/* Guidance should be obvious, legible and not depend on hover or browser details state. */
#content .mp102-guide{position:relative;background:var(--t-surface)!important;color:var(--t-text)!important;border:1px solid var(--t-line)!important;border-left:4px solid var(--t-accent)!important;box-shadow:0 3px 13px rgba(12,28,46,.07);padding:19px 20px!important;margin:0 0 17px!important}
#content .mp102-guide summary{font-size:15px!important;color:var(--t-text)!important;list-style:none;cursor:default}
#content .mp102-guide summary::-webkit-details-marker{display:none}
#content .mp102-guide p{font-size:13px!important;color:var(--t-muted)!important;max-width:1000px;line-height:1.65!important}
#content .mp102-guide-steps{margin-top:14px!important}
#content .mp102-guide-steps span{font-size:12px!important;font-weight:600!important;background:var(--t-surface2)!important;border-color:var(--t-line)!important;color:var(--t-text)!important}
@media(max-width:700px){html body #login.login .login-panel{border:0!important;border-radius:0!important}html body #login.login .hero{border:0!important;border-radius:0!important}#content .mp102-standard{min-height:112px;padding:13px}#content .mp102-home{gap:13px}#content .mp102-guide{padding:15px!important}}
