/* 617 account portal. Landscape: Unsplash, photo-1464822759023-fed622ff2c3b. */
:root {
  color-scheme:dark;
  --bg:#171818; --fg:#f2f3ed; --dim:#afb3ad; --dim2:#90958e;
  --acc:#dce87c; --border:#353936; --line:#353936;
  --ok:#88d6b1; --warn:#efcf84; --bad:#ff9ca2;
}
* { letter-spacing:0; }
body { background:var(--bg); }
.portal-shell { grid-template-columns:minmax(360px,46%) minmax(0,1fr); }
.portal-atlas { background:#272d2c; padding:44px 48px; min-height:640px; }
.landscape-photo img { object-position:46% center; }
.portal-atlas::after { background:rgba(0,0,0,.09); }
.brand { font-size:26px; font-weight:650; gap:14px; }
.brand-symbol { color:#e4edab; }
.brand small { font-size:11px; color:#f2f3ed; }
.atlas-heading { padding-bottom:18px; }
.atlas-heading .eyebrow { color:#f2f3ed; font-size:11px; }
.atlas-heading h1 { font-size:72px; line-height:1.05; font-weight:650; margin:18px 0 24px; }
.atlas-rule { background:#dce87c; width:48px; height:3px; }
.portal-workspace { padding-inline:48px; background:var(--bg); }
.workspace-header { border-bottom:1px solid var(--line); min-height:90px; }
.workspace-header > a:last-child { color:var(--dim); }
.workspace-header > a:last-child:hover { color:var(--fg); }
.wrap { max-width:460px; padding:56px 0; }
.portal-switch { gap:12px; margin-bottom:32px; }
.portal-switch .portal-tab { background:transparent; border:0; color:#a7aea5; }
.portal-switch .portal-tab.on { color:var(--acc); }
.portal-switch .portal-tab:hover { color:#f2f3ed; }
.portal-tab.on::after { background:var(--acc); }
.form-heading { margin-bottom:26px; }
.form-heading h2 { font-size:29px; font-weight:550; margin-block:10px; }
.form-heading p { font-size:13px; color:var(--dim); }
.f { margin-bottom:18px; }
.f > span { font-size:13px; color:#d4d9d0; }
input,select,textarea { min-height:50px; color:var(--fg); background:#222524; border:1px solid #454b44; border-radius:6px; }
input::placeholder,textarea::placeholder { color:#90998d; }
input:hover,select:hover { border-color:#74806d; }
input:focus,select:focus,textarea:focus { border-color:var(--acc); box-shadow:0 0 0 3px #dce87c14; }
input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px #222524 inset; -webkit-text-fill-color:var(--fg); }
button:not(.portal-tab) { background:#282d29; border-color:#475043; color:#e3e8dc; border-radius:6px; }
button:not(.portal-tab):hover { background:#343d2f; border-color:#738562; }
button.primary { background:var(--acc); border-color:var(--acc); color:#202516; min-height:50px; }
button.primary:hover { background:#e7f29c; border-color:#e7f29c; color:#202516; }
button:focus-visible,a:focus-visible { outline:2px solid var(--acc); outline-offset:4px; }
.password-field .password-toggle { color:#a3ad9c; background:transparent; border:0; }
.password-field .password-toggle:hover { background:#343d2f; color:var(--acc); }
.login-actions { margin-top:26px; gap:6px; }
#account-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#account-heading h2 { margin:0; font-size:26px; font-weight:550; }
#account-heading button { background:transparent; font-size:12px; }
#login-entry[hidden],#account-heading[hidden] { display:none; }
#btn-login-query,#btn-renew-query { color:#a7b09f; }
#btn-login-query:hover,#btn-renew-query:hover { background:#242a22; color:var(--acc); }
.ok-box { background:#222c26; color:#d0dfd3; border:1px solid #3f5846; border-radius:6px; line-height:1.9; }
.err-box { background:#39292a; color:#ffb7bb; border:1px solid #74484d; }
.notice { background:#343123; color:#eee0af; border-color:#655d3c; }
.badge.ok { background:#2c4538; color:#a1e6c2; }
.badge.warn { background:#494029; color:#efcf84; }
.badge.bad { background:#4b2d32; color:#ffadb5; }
.config-download { gap:12px; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.config-account { margin-bottom:0; font:11px/1.5 "SFMono-Regular",Consolas,monospace; color:#a2af97; }
.downloads-title { grid-column:1/-1; margin:0 0 8px; font-size:22px; font-weight:550; }
.config-download .download-windows { grid-column:1/-1; justify-content:flex-start; text-align:left; gap:15px; min-height:80px; padding:17px 20px; font-size:15px; }
.download-windows > span:nth-child(2) { flex:1; }
.download-windows small { display:block; font-size:11px; font-weight:400; margin-top:5px; color:#3d4a2d; }
.download-windows svg { width:20px; height:20px; }
.config-download .download-router { grid-column:1/-1; min-height:50px; }
.config-download button { overflow-wrap:anywhere; min-height:48px; font-size:12px; }
.config-download button svg { flex:none; }
#viewing-settings { padding-top:24px!important; border-color:var(--line)!important; }
#viewing-settings h2 { font-size:16px; color:#dce3d5; }
#viewing-status { margin-bottom:18px; }
.workspace-footer { padding-bottom:24px; color:#8d9687; }
.mobile-brand { color:#f3f4ed; font-size:23px; }
.mobile-brand svg { color:var(--acc); }
.toast > div { background:#2e3c2d; border:1px solid #647a55; }
.toast > div.bad { background:#522e33; border-color:#98606a; }
@media(min-width:1600px) {
  .portal-workspace { padding-inline:72px; }
  .portal-atlas { padding-inline:64px; }
  .wrap { padding-top:76px; }
}
@media(max-width:1100px) {
  .portal-shell { grid-template-columns:minmax(300px,40%) minmax(0,1fr); }
  .portal-workspace { padding-inline:32px; }
  .portal-atlas { padding:32px; }
}
@media(max-width:800px) {
  .portal-shell { display:block; }
  .portal-atlas { display:flex; position:relative; height:200px; min-height:0; padding:26px 28px; }
  .landscape-photo img { object-position:50% 52%; }
  .portal-atlas .brand { font-size:25px; }
  .portal-atlas .brand small { font-size:10px; }
  .atlas-heading { display:none; }
  .portal-workspace { min-height:calc(100svh - 200px); padding-inline:28px; }
  .workspace-header { min-height:64px; }
  .workspace-header .mobile-brand { display:none; }
  .workspace-label { display:block; font-size:11px; }
  .wrap { padding-top:26px; padding-bottom:40px; max-width:500px; }
  .portal-switch { margin-bottom:26px; gap:8px; }
  .form-heading h2 { font-size:26px; }
  input,select,textarea { font-size:16px; }
}
@media(max-width:380px) {
  .portal-workspace { padding-inline:20px; }
  .portal-atlas { height:168px; padding:24px 20px; }
  .portal-tab { font-size:12px; }
}