#gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px 16px;overflow:auto;
  background:radial-gradient(80% 60% at 50% 0%,var(--glow,rgba(227,38,46,.25)),transparent 60%),#0A0A0B;color:#F4F4F5;font-family:"Barlow",system-ui,sans-serif}
#gate .gbox{width:100%;max-width:400px;display:grid;gap:14px}
#gate .glogo{font:800 italic 40px/0.9 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.01em}
#gate .glogo span{color:var(--brand,#E3262E);display:block}
#gate h1{font:800 italic 28px "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:8px 0 0}
#gate .gform{display:grid;gap:12px}
#gate label{display:grid;gap:6px;font-size:13px;color:#A6A6AE;font-weight:600}
#gate input{font:500 16px "Barlow",system-ui,sans-serif;padding:12px 14px;border-radius:12px;border:1px solid #2A2A30;background:#141416;color:#F4F4F5}
#gate input:focus{outline:2px solid var(--brand,#E3262E);outline-offset:1px}
#gate .gbtn{font:800 17px "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:14px;border:0;border-radius:12px;background:var(--brand,#E3262E);color:#fff;cursor:pointer}
#gate .gbtn:disabled{opacity:.6}
#gate .gerr{color:#FF6A4D;margin:0;font-size:14px}
#gate .ghint{color:#A6A6AE;font-size:14px;margin:0}
#gate .gmotto{font:700 italic 15px "Barlow Condensed","Arial Narrow",sans-serif;color:#A6A6AE;margin-top:18px}
#gate .gmotto span{color:var(--brand,#E3262E)}
.pw{font:800 26px "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.04em;color:var(--gold2,#FFDF7A);user-select:all}
/* wall TV: nothing but the TV board (or the pairing code) ever shows */
html.tvboot body{background:#0A0A0B}
html.tvboot body > :not(#gate):not(#tv):not(#tvcel):not(canvas):not(script){visibility:hidden!important}
#gate .tvcode{font:800 italic clamp(56px,10vw,200px)/1 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.08em;color:#F5B82E;margin:18px 0;text-shadow:0 0 40px rgba(245,184,46,.35)}
html.tvboot #gate .gbox{max-width:min(1200px,92vw);width:auto;text-align:center}
html.tvboot #gate .glogo{font-size:clamp(40px,4vw,80px)}
html.tvboot #gate h1{font-size:clamp(28px,2.6vw,52px)}
html.tvboot #gate .ghint{font-size:clamp(15px,1.4vw,28px);line-height:1.4;max-width:46em;margin-inline:auto}
html.tvboot #gate .gmotto{font-size:clamp(14px,1.2vw,24px)}
#gate .tvcode{white-space:nowrap}
/* Office TVs from 2018 (Chrome 56): no inset, grid, clamp() or min() */
#gate{top:0;left:0;right:0;bottom:0}
@supports not (display:grid){
  #gate{display:flex;align-items:center;justify-content:center}
  #gate .gbox>*+*,#gate .gform>*+*{margin-top:14px}
  html.tvboot #gate .gbox{max-width:1200px}
  html.tvboot #gate .tvcode{font:800 italic 150px/1 "Barlow Condensed",sans-serif} html.tvboot #gate .glogo{font-size:64px} html.tvboot #gate h1{font-size:44px}
  html.tvboot #gate .ghint{font-size:24px;margin-left:auto;margin-right:auto} html.tvboot #gate .gmotto{font-size:20px}
}
/* show-password eye inside password boxes (sign-in screens and My account) */
.pwwrap{position:relative;display:block}
.pwwrap input{width:100%;box-sizing:border-box;padding-right:48px!important}
.pweye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;color:#A6A6AE;padding:8px;cursor:pointer;line-height:0;border-radius:8px}
.pweye:hover,.pweye:focus-visible{color:#F4F4F5}
/* first-run setup and the CRM guide (also drawn inside Admin > CRM connection) */
#gate select{font:500 16px "Barlow",system-ui,sans-serif;padding:12px 14px;border-radius:12px;border:1px solid #2A2A30;background:#141416;color:#F4F4F5}
#gate input[type=color]{padding:4px;height:48px;width:100%}
#gate .ob-step{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700}
.crm-list{display:grid;gap:8px}
.crm-pick{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid #2A2A30;background:#141416;color:#F4F4F5;font:600 16px "Barlow",system-ui,sans-serif;cursor:pointer;text-align:left}
.crm-pick span{font-size:13px;color:var(--brand,#E3262E);font-weight:700;white-space:nowrap}
.crm-pick.soon{opacity:.75} .crm-pick.soon span{color:#A6A6AE}
.crm-h{font:800 italic 24px "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:4px 0 0}
.crm-steps{margin:0;padding-left:22px;display:grid;gap:10px;color:#E6E6EA;font-size:15px;line-height:1.45}
.crm-steps label{display:flex;gap:10px;align-items:flex-start;color:inherit;font-weight:500;font-size:15px}
.crm-steps input[type=checkbox]{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--brand,#E3262E)}
.crm-steps input:checked + span{color:#8a8a92;text-decoration:line-through}
.crm-ok-msg{color:#3CCB7F;margin:0;font-size:14px;font-weight:600}
.crm-admin .gform{display:grid;gap:12px}
.crm-admin .gform label{display:grid;gap:6px;font-size:13px;color:#A6A6AE;font-weight:600}
.crm-admin .gform input{font:500 16px "Barlow",system-ui,sans-serif;padding:12px 14px;border-radius:12px;border:1px solid #2A2A30;background:#141416;color:#F4F4F5}
.crm-admin .gbtn{font:800 17px "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:14px;border:0;border-radius:12px;background:var(--brand,#E3262E);color:#fff;cursor:pointer}
.crm-admin .gerr{color:#FF6A4D;margin:0;font-size:14px}
.crm-admin .ghint{color:#A6A6AE;font-size:14px;margin:0}
#ob3 > * + *,.crm-admin > div > * + *{margin-top:14px}