/* Holdfast frame (#1013, Sunny 2026-10-24): sign-up and setup screens in Holdfast IT colours, calm and quiet.
   Light: midnight navy #1a2f7a + ice blue #3fa3e8. Dark (device setting): #5d8bff + #b9e1ff on #0b1426.
   The client's own logo and colour only start on the dashboard. One Holdfast mark per screen (header only). */
.hf{--hf-navy:#1a2f7a;--hf-ice:#3fa3e8;--hf-grad:linear-gradient(90deg,#1a2f7a,#3fa3e8);
  --bg:#f3f6fb;--sf:#fff;--ln:#dbe3ef;--tx:#14213d;--mu:#4a5878;--ac:#1a2f7a;--ac2:#1a2f7a;--on:#fff;
  --brand:#1a2f7a;--brand-d:#1a2f7a;--brand-s:#e8f3fd;--hf-in:#fff;--hf-inln:#c5d1e3;--hf-soft:#f6f9fd}
.hf body,body.hf{background:var(--bg);color:var(--tx)}

/* header: mark + "Holdfast IT" + one plain line */
.hfbar{display:flex;align-items:center;gap:12px;min-width:0}
.hfbar img{width:34px;height:34px;flex:none;border-radius:8px;display:block}
.hfbar .t{min-width:0;flex:1}
.hfbar .t b{display:block;font-size:16px;font-weight:700;color:var(--tx);letter-spacing:.01em;line-height:1.25}
.hfbar .t span{display:block;font-size:13px;color:var(--mu);line-height:1.35;overflow-wrap:anywhere}
.auth>.hfbar{padding-bottom:16px;border-bottom:1px solid var(--ln)}
.hffoot{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--mu);font-size:12.5px;text-decoration:none;padding:10px 0 18px}
.hffoot:hover{color:var(--tx)}

/* sign-up card */
body.hf .auth{border-color:var(--ln);box-shadow:0 10px 30px rgba(20,33,61,.07);border-top:3px solid var(--hf-navy)}
body.hf .pbar i{background:var(--hf-grad)}
body.hf .dots li.on{border-color:var(--hf-navy)}
body.hf .dots li.done{border-color:var(--hf-ice)}
body.hf .secured{color:var(--mu)}
body.hf input,body.hf select,body.hf textarea{background:var(--hf-in);border-color:var(--hf-inln);color:var(--tx)}
body.hf input:focus,body.hf select:focus,body.hf textarea:focus{border-color:var(--hf-ice);box-shadow:0 0 0 3px rgba(63,163,232,.22)}
body.hf :focus-visible{outline-color:var(--hf-ice)}
body.hf .chip span{background:var(--hf-in);border-color:var(--hf-inln)}
body.hf .chip input:checked+span{background:var(--brand-s);border-color:var(--hf-navy);color:var(--hf-navy)}
body.hf .btn.ghost{background:var(--sf);color:var(--tx);border-color:var(--hf-inln)}
body.hf .codes code{background:var(--hf-soft);border-color:#9fb0cc}
body.hf .agr{background:var(--hf-soft);border-color:var(--ln)}
body.hf .agr th{background:var(--brand-s)}
body.hf .fsteps li.done::before{background:var(--hf-ice);border-color:var(--hf-ice)}
body.hf .fsteps li.on::before{border-color:var(--hf-ice);border-top-color:transparent}
.donecheck{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:var(--brand-s);color:var(--hf-navy)}
.donecheck .icon{width:30px;height:30px}

/* business setup form in the frame */
body.bs.hf{background:var(--bg)}
body.bs.hf .bs-top{background:var(--sf);border-bottom:1px solid var(--ln);box-shadow:inset 0 3px 0 var(--hf-navy)}
body.bs.hf .bs-top img{height:34px}
body.bs.hf .bs-top .t span{white-space:normal}
body.bs.hf .ib{background:var(--sf);border-color:var(--ln);color:var(--mu)}
body.bs.hf .q{background:var(--sf);border-color:var(--ln)}
body.bs.hf .pbar{background:var(--ln)}
body.bs.hf .pbar i{background:var(--hf-grad)}
body.bs.hf .req{color:#b42318}
body.bs.hf .hffoot{margin-bottom:12px}
body.bs.hf .help{color:var(--tx);border-color:var(--hf-inln)}
body.bs.hf .gateline{background:#eef6fd;border-color:#bfdcf5;color:#163a66}

@media print{.hfbar,.hffoot{display:none}}

/* ---------- balanced look (Sunny 2026-10-24 chat #10654) ----------
   Always light: navy header band for brand colour, soft blue page, white card, inputs in their own tint so they never blend in. */
.hf{--bg:#e9eff8;--hf-in:#f3f6fb;--hf-inln:#9fb0cc}
body.hf{background:linear-gradient(180deg,#dfe8f5 0,#eef3f9 260px,#f3f6fb 100%)}
body.hf .auth{border-top:0;overflow:hidden;padding-top:0}
body.hf .auth>.hfbar{margin:0 -18px;padding:16px 18px;background:linear-gradient(120deg,#16285f,#1a2f7a 55%,#2a5fa8);border-bottom:0}
body.hf .auth>.hfbar .t b{color:#fff}
body.hf .auth>.hfbar .t span{color:#c9dcf5}
body.hf .auth>.hfbar img{background:#fff;border-radius:8px;padding:2px}
@media (min-width:700px){body.hf .auth>.hfbar{margin:0 -28px;padding:18px 28px}}
body.hf input,body.hf select,body.hf textarea{border-width:1.5px}
body.hf input:hover,body.hf select:hover,body.hf textarea:hover{border-color:#7f93b6}
body.hf input:focus,body.hf select:focus,body.hf textarea:focus{background:#fff}
/* "You're in the right place" box on the first screen */
.hfwhere{background:#eef5fd;border:1px solid #c7dcf3;border-radius:14px;padding:14px 16px;color:var(--tx)}
.hfwhere h2{margin:0 0 4px;font-size:16px;color:#16285f}
.hfwhere p{margin:0 0 10px;font-size:14px;color:var(--mu)}
.hfwhere ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.hfwhere li{position:relative;padding-left:26px;font-size:14px;line-height:1.4}
.hfwhere li::before{content:"";position:absolute;left:2px;top:3px;width:16px;height:16px;border-radius:50%;background:#1a2f7a}
.hfwhere li::after{content:"";position:absolute;left:7px;top:6px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hfwhere .time{margin:10px 0 0;font-size:13px;color:var(--mu)}
/* ---------- balanced, take 2 (Sunny 2026-10-24 chat #10655: light hurt his eyes, dark was too dark) ----------
   Mid-tone: slate-navy page, soft grey card (not white), inputs a shade lighter with a clear border. */
.hf{--bg:#2b3b5c;--sf:#e4e9f1;--ln:#c3cddc;--tx:#14213d;--mu:#46536f;--hf-in:#f3f5f9;--hf-inln:#8597b6;--hf-soft:#edf1f6}
body.hf{background:linear-gradient(180deg,#22314f 0,#2e3f62 320px,#34476b 100%)}
body.hf .auth{box-shadow:0 14px 40px rgba(6,12,28,.45);border-color:#9fb0cc}
body.hf .hffoot{color:#b8c6dd}body.hf .hffoot:hover{color:#fff}
.hfwhere{background:#d7e1ee;border-color:#b3c4da}
/* ---------- bigger + steps that matter (Sunny 2026-10-24 chat: "everything is so small... looks unfinished") ---------- */
body.hf .authwrap{max-width:540px}
body.hf .auth{gap:20px}
body.hf .auth h1{font-size:28px;line-height:1.2;margin:4px 0 0;color:#14213d}
body.hf .lead{font-size:16.5px;line-height:1.5}
body.hf label{font-size:16px;gap:8px}
body.hf label small{font-size:14px}
body.hf input,body.hf select,body.hf textarea{min-height:54px;font-size:17px;padding:0 14px;border-radius:12px}
body.hf .btn{min-height:56px;font-size:17.5px;border-radius:14px}
body.hf .secured{font-size:14.5px}
body.hf .auth>.hfbar .t b{font-size:18px}body.hf .auth>.hfbar .t span{font-size:14.5px}
body.hf .auth>.hfbar img{width:40px;height:40px}
.hfwhere h2{font-size:18px}.hfwhere p,.hfwhere li{font-size:15.5px}.hfwhere .time{font-size:14.5px}
.hfwhere li::before{top:4px;width:18px;height:18px}.hfwhere li::after{left:8px;top:7px}
/* step indicator: numbered circles, current step stands out */
.ksteps{background:#d3dcea;border:1px solid #b3c2d8;border-radius:14px;padding:14px 14px 12px}
.ks-of{margin:0 0 12px;font-size:15px;color:#46536f}.ks-of b{color:#14213d;font-size:16px}
.ksteps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative}
.ksteps ol::before{content:"";position:absolute;left:12.5%;right:12.5%;top:17px;height:3px;background:#a9b8cf;border-radius:2px}
.ksteps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ks-n{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#e4e9f1;border:2.5px solid #8597b6;color:#46536f;font-weight:700;font-size:16px}
.ks-t{font-size:13.5px;line-height:1.25;color:#46536f}
.ksteps li.on .ks-n{background:#1a2f7a;border-color:#1a2f7a;color:#fff;box-shadow:0 0 0 5px rgba(26,47,122,.18)}
.ksteps li.on .ks-t{color:#14213d;font-weight:700}
.ksteps li.done .ks-n{background:#2a5fa8;border-color:#2a5fa8;color:#fff}
.ksteps li.done .ks-t{color:#14213d}
@media (min-width:700px){.ks-t{font-size:14.5px}}
/* centred Holdfast header, logo 2-3x (Sunny 2026-10-24 chat #10658) */
body.hf .auth>.hfbar{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 18px 20px}
body.hf .auth>.hfbar img{width:88px;height:88px;border-radius:20px;padding:4px}
body.hf .auth>.hfbar .t{flex:none}
body.hf .auth>.hfbar .t b{font-size:22px;letter-spacing:.02em}
body.hf .auth>.hfbar .t span{font-size:15px;margin-top:2px}
@media (min-width:700px){body.hf .auth>.hfbar{padding:28px 28px 22px}body.hf .auth>.hfbar img{width:96px;height:96px}}
/* "Your Private Hub!" box reversed: page colour background, light text (Sunny 2026-10-24 chat #10661) */
.hfwhere{background:linear-gradient(180deg,#22314f,#2e3f62);border-color:#22314f;color:#e7eefb}
.hfwhere h2{color:#fff}
.hfwhere p,.hfwhere .time{color:#c3d1e8}
.hfwhere li{color:#eef3fb}
.hfwhere li::before{background:#b9e1ff}
.hfwhere li::after{border-color:#16285f}
body.hf .auth h1{text-align:center}
/* body text: more dark blue, not thin (Sunny 2026-10-24 chat #10657) */
body.hf .lead,body.hf .note,body.hf label small,body.hf .secured,.ks-of,.ks-t{color:#1d2c57;font-weight:500}
.ks-of b,.ksteps li.on .ks-t{color:#101c40;font-weight:700}
body.hf label{color:#101c40;font-weight:600}
.hfwhere p,.hfwhere .time{color:#dbe6f7;font-weight:500}
.hfwhere li{font-weight:500}
/* readable, not heavy (Sunny 2026-10-24 chat #10670: too close together, too bold on his PC) */
body.hf .lead,body.hf .note,body.hf label small,body.hf .secured,.ks-of,.ks-t{font-weight:400}
.hfwhere p,.hfwhere .time,.hfwhere li{font-weight:400;line-height:1.6;letter-spacing:.01em}
.hfwhere ul{gap:11px;margin:4px 0 2px}
.hfwhere h2{margin-bottom:8px}
.hfwhere p{margin-bottom:14px}
.hfwhere .time{margin-top:14px}
body.hf .lead{line-height:1.6}
/* required marks (Sunny 2026-10-24 chat #10671) */
.rq{color:#c0262d;font-weight:700}
.rq-msg{color:#b42318!important;font-weight:600!important;font-size:14px!important;margin-top:-2px}
body.hf input.rq-bad,body.hf select.rq-bad,body.hf textarea.rq-bad{border-color:#c0262d;box-shadow:0 0 0 3px rgba(192,38,45,.15)}
/* logo blue in the Private Hub box (Sunny 2026-10-24 chat #10672): intro + time line in the mark blue, lifted a touch to read on navy */
.hfwhere p,.hfwhere .time{color:#7fa4ff}
.hfwhere li::before{background:#5d8bff}.hfwhere li::after{border-color:#fff}
/* card starts ~24 px under the browser bar (Sunny 2026-10-24 chat #10673) */
body.hf .authwrap{padding-top:24px}
/* box in the logo blue, text in the logo dark navy (Sunny 2026-10-24 chat #10674) */
.hfwhere{background:#5d8bff;border-color:#4a76e6}
.hfwhere h2,.hfwhere p,.hfwhere .time,.hfwhere li{color:#0b1426}
.hfwhere li::before{background:#0b1426}.hfwhere li::after{border-color:#b9e1ff}
/* take 3 (Sunny chat #10675): box = logo dark half, text = logo light half, black list text to separate */
.hfwhere{background:#5d8bff;border-color:#4a76e6}
.hfwhere h2,.hfwhere p,.hfwhere .time{color:#e2f2ff}
.hfwhere h2{font-size:19px}
.hfwhere li{color:#060b16}
.hfwhere li::before{background:#b9e1ff}.hfwhere li::after{border-color:#0b1426}
/* take 4 (Sunny chat #10676): box = logo background navy, title = logo left blue, time line = logo ice blue, body light */
.hfwhere{background:#0b1426;border-color:#1c2a48}
.hfwhere h2{color:#5d8bff}
.hfwhere p,.hfwhere li{color:#e6edf8}
.hfwhere .time{color:#b9e1ff}
.hfwhere li::before{background:#5d8bff}.hfwhere li::after{border-color:#fff}
/* take 5 (Sunny chat #10677): time line like the intro text; list text in the logo light blue */
.hfwhere .time{color:#e6edf8}
.hfwhere li{color:#b9e1ff}
/* tagline under the name (Sunny 2026-10-24 chat #10679) */
.hfbar .t i.tag{display:block;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin:2px 0 6px}
body.hf .auth>.hfbar .t i.tag{color:#b9e1ff;font-size:12.5px}
/* italic hints under labels (Sunny 2026-10-24 chat #10684) */
body.hf label .hint{display:block;font-style:italic;font-weight:400;font-size:14px;color:#46536f;margin-top:-4px}
/* password strength (Sunny 2026-10-24 chat #10688) */
.pws{margin-top:2px}
.pws-bar{height:8px;border-radius:6px;background:#c3cddc;overflow:hidden}
.pws-bar i{display:block;height:100%;width:0;border-radius:6px;transition:width .2s,background .2s}
.pws.w0 .pws-bar i{width:10%;background:#c0262d}.pws.w1 .pws-bar i{width:25%;background:#c0262d}.pws.w2 .pws-bar i{width:45%;background:#d97706}
.pws.w3 .pws-bar i{width:65%;background:#d97706}.pws.w4 .pws-bar i{width:85%;background:#15803d}.pws.w5 .pws-bar i{width:100%;background:#15803d}
.pws-w{margin:6px 0 4px;font-size:14px;font-weight:400;color:#1d2c57}.pws-w b{font-weight:700}
.pws ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}
.pws li{position:relative;padding-left:20px;font-size:13.5px;font-weight:400;color:#46536f}
.pws li::before{content:"";position:absolute;left:2px;top:5px;width:11px;height:11px;border-radius:50%;border:1.5px solid #8597b6}
.pws li.ok{color:#15803d}.pws li.ok::before{background:#15803d;border-color:#15803d}
@media (max-width:360px){.pws ul{grid-template-columns:1fr}}
.ksteps ol{grid-template-columns:repeat(5,1fr)}.ksteps ol::before{left:10%;right:10%}.ks-t{font-size:12.5px}@media (min-width:700px){.ks-t{font-size:14px}}
body.bs.hf .ksteps{margin:0 0 14px}
/* registration header: slow moving Holdfast gradient, same colours as the welcome email (Sunny 2026-10-26). Sign-up screens only. */
body.hf .auth>.hfbar{background:linear-gradient(120deg,#16285f,#1b2f7a 30%,#2350a8 55%,#3a9ae0 80%,#1b2f7a);background-size:300% 300%;animation:hfglow 16s ease-in-out infinite alternate}
@keyframes hfglow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){body.hf .auth>.hfbar{animation:none}}
/* business setup: progress line under the step tracker readable on the dark page (Sunny 2026-10-26) */
body.hf .prog{color:#dbe6f7}body.hf .prog span:first-child{font-weight:600;color:#fff}
/* tick boxes and round choices keep their own size so the focus glow wraps them (Sunny 2026-10-26) */
body.hf input[type=checkbox],body.hf input[type=radio]{width:20px!important;height:20px!important;min-height:0!important;padding:0!important;flex:none}
/* finish screen: bold green tick, room under the heading (Sunny 2026-10-26) */
body.hf .welcome-done .donecheck{display:grid!important;place-items:center;width:76px;height:76px;margin:4px auto 18px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 8px rgba(22,163,74,.16)}
body.hf .welcome-done .donecheck svg{width:70px!important;height:70px!important;color:#fff;stroke:#fff;stroke-width:2.4}
body.hf .welcome-done .donecheck svg circle{display:none}
body.hf .welcome-done h1{margin-bottom:16px!important;line-height:1.25}
body.hf .welcome-done .lead{margin-bottom:22px}

/* sign-in page in the CLIENT's look once set up (Sunny sketch 2026-10-27): their logo + name on top, their colour flowing
   (Holdfast-style animation), centred 'Secured by', bigger 'Powered by Holdfast IT' at the bottom */
body.hf:has(.clhead){background:linear-gradient(160deg,var(--cl-d,#16285f),var(--cl,#1a2f7a) 55%,var(--cl-d,#16285f));background-size:200% 200%;animation:hfglow 22s ease-in-out infinite alternate;min-height:100vh}
body.hf .auth>.hfbar.clhead{background:linear-gradient(120deg,var(--cl-d,#16285f),var(--cl,#1a2f7a) 35%,color-mix(in srgb,var(--cl,#1a2f7a) 70%,#fff) 60%,var(--cl-d,#16285f));background-size:300% 300%;animation:hfglow 16s ease-in-out infinite alternate}
body.hf .clhead .cllogo{display:grid;place-items:center;width:112px;height:112px;background:#fff;border-radius:22px;padding:10px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
body.hf .clhead .cllogo img{max-width:100%;max-height:100%;width:auto!important;height:auto!important;border-radius:0!important;padding:0!important;background:none!important}
body.hf .clhead .t b{color:#fff;font-size:24px}
body.hf .clhead .t span{color:rgba(255,255,255,.85)}
body.hf:has(.clhead) .auth .btn:not(.ghost){background:var(--cl);color:var(--cl-on,#fff);border-color:var(--cl)}
body.hf:has(.clhead) .auth .btn:not(.ghost):hover{background:var(--cl-d)}
body.hf .forgot{text-align:center}body.hf .forgot a{color:var(--cl,#1a2f7a);font-weight:600}
body.hf .auth .secured{text-align:center;justify-content:center}
body.hf .hffoot.powered{display:flex;gap:10px;align-items:center;justify-content:center;font-size:17px;color:#fff;padding:18px 0 26px;opacity:.95}
body.hf .hffoot.powered b{font-weight:800;letter-spacing:.02em}
body.hf .hffoot.powered img{border-radius:6px;background:#fff;padding:2px}
@media (prefers-reduced-motion:reduce){body.hf:has(.clhead),body.hf .auth>.hfbar.clhead{animation:none}}
/* powered-by footer: two centred lines, never wraps oddly (Sunny 2026-10-27) */
body.hf .hffoot.powered{flex-direction:column;gap:4px;text-align:center}
body.hf .hffoot.powered .pw1{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
body.hf .hffoot.powered small{font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
/* Holdfast shown with respect: the full logo on a white badge (Sunny 2026-10-27) */
body.hf .hffoot.powered{gap:8px;padding:22px 0 30px}
body.hf .hffoot.powered .pw0{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
body.hf .hffoot.powered .pwlogo{display:inline-flex;background:#fff;border-radius:14px;padding:10px 18px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
body.hf .hffoot.powered .pwlogo img{display:block;width:170px;height:auto;border-radius:0;background:none;padding:0}
/* client sign-in pages feel like an app: fit one screen, no page scrolling or bounce, nothing opens a new browser (Sunny 2026-10-27) */
html:has(body.hf .clhead),body.hf:has(.clhead){height:100%;overflow:hidden;overscroll-behavior:none}
body.hf:has(.clhead) .authwrap{height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom));box-sizing:border-box}
body.hf .clhead .cllogo{width:88px;height:88px}
body.hf:has(.clhead) .auth>.hfbar{padding:18px 18px 16px}
body.hf:has(.clhead) .auth h1{margin:4px 0 10px}
body.hf:has(.clhead) .hffoot.powered{padding:12px 0 6px}
@media (max-height:700px){body.hf .clhead .cllogo{width:64px;height:64px;border-radius:16px}body.hf:has(.clhead) .auth label{margin-top:6px}body.hf:has(.clhead) .hffoot.powered .pwlogo img{width:130px}body.hf:has(.clhead) .auth .note{margin:8px 0 4px}}
/* keyboard open on a short phone: allow scrolling only inside the card */
@media (max-height:520px){html:has(body.hf .clhead),body.hf:has(.clhead){overflow:auto}}
/* short phones (640-700 px tall): tighter so the whole sign-in fits without scrolling */
@media (max-height:700px){body.hf:has(.clhead) .auth{flex-shrink:0}body.hf:has(.clhead) .auth>.hfbar{padding:10px 14px 10px;gap:6px}body.hf .clhead .cllogo{width:52px;height:52px;padding:6px;border-radius:14px}body.hf .clhead .t b{font-size:19px}body.hf:has(.clhead) .auth h1{font-size:21px;margin:2px 0 4px}body.hf:has(.clhead) .auth input{height:42px!important;min-height:42px}body.hf:has(.clhead) .auth .btn{min-height:44px}body.hf:has(.clhead) .auth label{margin-top:4px;font-size:14px}body.hf:has(.clhead) .auth .note,body.hf:has(.clhead) .auth .secured{margin:6px 0 0;font-size:13px}body.hf:has(.clhead) .hffoot.powered{padding:6px 0 2px;gap:4px}body.hf:has(.clhead) .hffoot.powered .pwlogo{padding:6px 12px}body.hf:has(.clhead) .hffoot.powered .pwlogo img{width:110px}body.hf:has(.clhead) .hffoot.powered small{font-size:10.5px}}
/* page behind the sign-in card = calm Holdfast navy for every client; their colour stays on the header band + button only (Sunny 2026-10-27: all-blue / all-red was too much) */
body.hf:has(.clhead){background:linear-gradient(160deg,#0b1430,#16285f 55%,#0f1b45)!important;background-size:200% 200%}
/* 2-step code: centred, big and spaced like Citadel (Sunny 2026-10-27) */
body.hf .codebox{text-align:center;font-weight:600}
body.hf .codebox input{text-align:center;font-size:30px!important;letter-spacing:.35em;font-weight:700;height:64px!important;min-height:64px;padding:0 12px 0 calc(12px + .35em)!important;font-variant-numeric:tabular-nums}
body.hf .codebox input::placeholder{color:#b6c0d2;font-weight:600}