/* Petrol — a dark house. Near-black ground, petrol panels, one teal accent,
   and a 30px pill on every control. */

#sp-login-gate-modal, #sp-ruo-stage1-overlay{--g-overlay:rgba(3,8,8,.76);--g-sheet:#0C1416;--g-ink:#A8BEC2;--g-title:#F2F7F7;
  --g-muted:#A8BEC2;--g-dim:#7B9398;--g-accent:#1B8B8A;--g-link:#5FD4CE;--g-accent-dk:#23A7A5;
  --g-field-bg:#121D20;--g-field-bd:#24383C;--g-line:#1C2B2E;--g-panel-a:#0B2F38;--g-panel-b:#050E0E;
  --g-tabbed:#121D20;--g-ring:0 0 0 3px rgba(27,139,138,.3);--g-btn-fg:#04201F;color-scheme:dark;--g-trust:#EAF3F3;--g-trust-mark:#23A7A5;--g-panelbg:linear-gradient(200deg,var(--g-panel-a) 0%,var(--g-panel-b) 100%)}
html[data-theme="dark"] #sp-login-gate-modal, html[data-theme="dark"] #sp-ruo-stage1-overlay{--g-overlay:rgba(0,0,0,.84);--g-sheet:#070F11;--g-ink:#9FB6BA;--g-title:#EAF3F3;
  --g-muted:#9FB6BA;--g-dim:#6E868B;--g-accent:#23A7A5;--g-link:#6FE0DA;--g-accent-dk:#3CC3C0;
  --g-field-bg:#0D171A;--g-field-bd:#1E2F33;--g-line:#162326;--g-panel-a:#071F26;--g-panel-b:#030809;
  --g-tabbed:#0D171A;--g-ring:0 0 0 3px rgba(35,167,165,.32);--g-btn-fg:#021716;color-scheme:dark;--g-trust:#EAF3F3;--g-trust-mark:#23A7A5}
#sp-login-gate-modal{font-family:'Roboto',system-ui,sans-serif;color:var(--g-ink);line-height:1.6}
#sp-login-gate-modal .sp-login-gate-container{border:1px solid var(--g-line);border-radius:18px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
#sp-login-gate-modal .sp-login-gate-scrollable{padding:30px 26px}
#sp-login-gate-modal .sp-gate-brandpanel::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 45% at 50% 38%,rgba(27,139,138,.22) 0%,transparent 70%)}

#sp-login-gate-modal .sp-gate-mark{position:relative;z-index:1;width:250px;padding:0;background:none}
html[data-theme="dark"] #sp-login-gate-modal .sp-gate-mark{background:none;padding:0}
#sp-login-gate-modal .sp-login-gate-header{align-items:flex-start}
#sp-login-gate-modal .sp-gate-kicker{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--g-accent)}
#sp-login-gate-modal .sp-login-gate-title{margin:10px 0 8px;font-family:'Poppins','Roboto',sans-serif;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.14;color:var(--g-title);text-wrap:balance}
#sp-login-gate-modal .sp-login-gate-message{margin:0 0 22px;font-size:14.5px;line-height:1.6;color:var(--g-muted);max-width:46ch}
#sp-login-gate-modal .sp-login-gate-tabs{gap:6px;padding:5px;margin-bottom:22px;border-radius:30px;background:var(--g-tabbed);border:1px solid var(--g-line)}
#sp-login-gate-modal .sp-login-gate-tab{padding:11px 14px;border-radius:30px;font-size:14.5px;font-weight:500;color:var(--g-dim)}
#sp-login-gate-modal .sp-login-gate-tab.active{background:var(--g-accent);color:var(--g-btn-fg);font-weight:600}
#sp-login-gate-modal .sp-social-btn, #sp-login-gate-modal .sp-apple-signin-btn{min-height:var(--g-provider-h,46px);height:var(--g-provider-h,46px);border:1px solid var(--g-field-bd);border-radius:30px;background:var(--g-field-bg);color:var(--g-title);font-size:14.5px;font-weight:500}
#sp-login-gate-modal .sp-social-btn:hover, #sp-login-gate-modal .sp-apple-signin-btn:hover{border-color:var(--g-accent)}
#sp-login-gate-modal .sp-apple-relay-warn{margin:10px 0 0;font-size:12.5px;color:var(--g-dim)}
#sp-login-gate-modal .sp-social-separator{margin:20px 0;border-top:1px solid var(--g-line)}
#sp-login-gate-modal .sp-social-separator span{position:relative;top:-10px;background:var(--g-sheet);padding:0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-dim)}
#sp-login-gate-modal .sp-field{margin-bottom:14px}
#sp-login-gate-modal .sp-field > label{margin-bottom:6px;font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--g-muted)}
#sp-login-gate-modal .sp-login-gate-form input, #sp-login-gate-modal .sp-login-gate-form select{height:48px;padding:0 16px;border:1px solid var(--g-field-bd);border-radius:30px;background:var(--g-field-bg);color:var(--g-title);font-size:15.5px}
#sp-login-gate-modal .sp-login-gate-form input:focus, #sp-login-gate-modal .sp-login-gate-form select:focus{outline:none;border-color:var(--g-accent);box-shadow:var(--g-ring)}
#sp-login-gate-modal .sp-password-toggle{right:17px;color:var(--g-dim)}
#sp-login-gate-modal .sp-login-gate-checkbox-wrapper{gap:11px;margin-bottom:11px;padding:13px 16px;border:1px solid var(--g-line);border-radius:16px;background:var(--g-field-bg)}
#sp-login-gate-modal .sp-login-gate-checkbox-wrapper input{width:17px;height:17px;margin-top:2px;accent-color:var(--g-accent)}
#sp-login-gate-modal .sp-login-gate-checkbox-wrapper label{font-size:13.5px;line-height:1.5;color:var(--g-ink)}
#sp-login-gate-modal .sp-login-gate-button{margin-top:10px;height:54px;border-radius:30px;background:var(--g-accent);color:var(--g-btn-fg);font-family:'Poppins','Roboto',sans-serif;font-size:16px;font-weight:600}
#sp-login-gate-modal .sp-login-gate-button:hover{background:var(--g-accent-dk)}
#sp-login-gate-modal .sp-login-gate-custom-message-bottom{margin:18px 0 0;font-size:12.5px;color:var(--g-dim)}
#sp-login-gate-modal .sp-login-gate-custom-message-bottom a{color:var(--g-accent)}
@media (max-width:600px){#sp-login-gate-modal .sp-login-gate-scrollable{padding:26px 18px calc(18px + env(safe-area-inset-bottom,0px))}#sp-login-gate-modal .sp-login-gate-title{font-size:26px}}
@media (min-width:900px){#sp-login-gate-modal .sp-login-gate-scrollable{padding:0}#sp-login-gate-modal .sp-login-gate-scrollable{--g-pad-t:40px;--g-pad-x:44px}}
#sp-login-gate-modal .sp-gate-kicker::before{content:"";width:26px;height:1px;background:var(--g-accent);opacity:.8}
#sp-login-gate-modal .sp-gate-attribution{color:var(--g-dim)}
@media (min-width:900px){
  #sp-login-gate-modal .sp-login-gate-title{color:#F2F7F7}
  #sp-login-gate-modal .sp-login-gate-message{color:rgba(242,247,247,.72)}
}

#sp-login-gate-modal .sp-apple-signin-btn{width:var(--g-provider-w,100%) !important;min-height:var(--g-provider-h,46px) !important;height:var(--g-provider-h,46px) !important;border:1px solid var(--g-field-bd) !important;border-radius:30px !important;background:var(--g-field-bg) !important;color:var(--g-title) !important;font-size:14.5px !important;font-weight:500 !important}
#sp-login-gate-modal .sp-apple-signin-btn{line-height:normal !important;padding:0 14px !important}
