/* ==========================================================================
   GVS.Suite - Admin > Security (GVS Support only).
   --------------------------------------------------------------------------
   From the Claude Design kit's security.css. The kit's .sc-alert rules already
   travelled into gvs-notifications.css for the push tab, so they are dropped
   here to avoid defining the same class twice with the later link winning.

   Link AFTER myhome/users and BEFORE gvs-mobile.css.
   ========================================================================== */

/* security.css — two-factor authentication: the account Security panel, the
   set-up dialogs, recovery codes, the estate policy page and both sign-in
   surfaces. Builds on myhome.css + users.css. */

/* ---------- Account Security panel (shared shell dialog) ------------------ */
.sc-panel{width:min(620px,100%)}
.sc-panel .mh-modal-body{max-height:min(78vh,760px);overflow-y:auto}

.sc-state{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--gvs-radius-md);border:1px solid var(--gvs-border);margin-bottom:20px}
.sc-state .sc-st-icon{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.sc-state .sc-st-icon .material-symbols-rounded{font-size:23px}
.sc-state .sc-st-t{font-size:15px;font-weight:700;color:var(--gvs-fg-1)}
.sc-state .sc-st-s{font-size:13.5px;color:var(--gvs-fg-2);margin-top:3px;line-height:1.55}
.sc-state.on{border-color:color-mix(in srgb,var(--gvs-success-500) 35%,var(--gvs-border));background:var(--gvs-success-50)}
.sc-state.on .sc-st-icon{background:var(--gvs-success-500);color:#fff}
.sc-state.off{border-color:color-mix(in srgb,var(--gvs-warning-500) 45%,var(--gvs-border));background:var(--gvs-warning-50)}
.sc-state.off .sc-st-icon{background:var(--gvs-warning-500);color:#fff}
[data-theme="dark"] .sc-state.on .sc-st-s,[data-theme="dark"] .sc-state.off .sc-st-s{color:var(--gvs-fg-2)}

.sc-rows{border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-md);overflow:hidden}
.sc-row{display:flex;align-items:center;gap:14px;padding:16px;border-bottom:1px solid var(--gvs-divider)}
.sc-row:last-child{border-bottom:none}
.sc-row.disabled{background:var(--gvs-surface-alt)}
.sc-row-icon{flex:none;width:40px;height:40px;border-radius:var(--gvs-radius-md);display:grid;place-items:center;background:var(--gvs-surface-sunken);color:var(--gvs-fg-3)}
.sc-row.live .sc-row-icon{background:var(--gvs-primary-weak);color:var(--gvs-primary)}
.sc-row-icon .material-symbols-rounded{font-size:22px}
.sc-row-body{flex:1;min-width:0}
.sc-row-t{font-size:14.5px;font-weight:600;color:var(--gvs-fg-1);display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.35}
.sc-row-t > span:first-child{flex:0 0 auto;white-space:nowrap}
.sc-row-s{font-size:13px;color:var(--gvs-fg-3);margin-top:3px;line-height:1.5}
.sc-row-s .sc-mask{font-family:var(--gvs-font-mono);color:var(--gvs-fg-2)}
.sc-row-act{flex:none}
.sc-chip{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:var(--gvs-radius-pill);background:var(--gvs-surface-sunken);color:var(--gvs-fg-3)}
.sc-chip.on{background:var(--gvs-success-50);color:var(--gvs-success-700)}
.sc-chip.pref{background:var(--gvs-primary-weak);color:var(--gvs-primary)}
[data-theme="dark"] .sc-chip.on{color:var(--gvs-success-500)}
.sc-smallbtn{height:38px;padding:0 15px;border-radius:var(--gvs-radius-sm);font-size:13.5px;font-weight:600;border:1px solid var(--gvs-border-strong);color:var(--gvs-fg-2);background:var(--gvs-surface);transition:border-color var(--gvs-dur-fast),color var(--gvs-dur-fast),background var(--gvs-dur-fast);white-space:nowrap}
.sc-smallbtn:hover{border-color:var(--gvs-primary);color:var(--gvs-primary);background:var(--gvs-primary-weak)}
.sc-smallbtn.primary{background:var(--gvs-primary);border-color:var(--gvs-primary);color:var(--gvs-fg-on-primary)}
.sc-smallbtn.primary:hover{background:var(--gvs-primary-hover);color:var(--gvs-fg-on-primary)}
.sc-smallbtn.quiet:hover{border-color:var(--gvs-danger-500);color:var(--gvs-danger-500);background:var(--gvs-danger-50)}
.sc-smallbtn:disabled{opacity:.5;cursor:not-allowed}

.sc-pref{display:flex;gap:8px;margin-top:10px}
.sc-pref button{flex:1;padding:10px 12px;border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-md);font-size:13.5px;font-weight:600;color:var(--gvs-fg-2);text-align:left;transition:border-color var(--gvs-dur-fast),background var(--gvs-dur-fast)}
.sc-pref button.on{border-color:var(--gvs-primary);background:var(--gvs-primary-weak);color:var(--gvs-primary)}

/* recovery codes remaining — escalates as it drops */
.sc-rec{margin-top:16px;border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-md);padding:16px}
.sc-rec.warn{border-color:color-mix(in srgb,var(--gvs-warning-500) 45%,var(--gvs-border));background:var(--gvs-warning-50)}
.sc-rec.danger{border-color:color-mix(in srgb,var(--gvs-danger-500) 45%,var(--gvs-border));background:var(--gvs-danger-50)}
.sc-rec-top{display:flex;align-items:center;gap:14px}
.sc-rec-n{font-family:var(--gvs-font-display);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--gvs-fg-1);line-height:1;font-variant-numeric:tabular-nums}
.sc-rec.warn .sc-rec-n{color:var(--gvs-warning-700)}
.sc-rec.danger .sc-rec-n{color:var(--gvs-danger-700)}
[data-theme="dark"] .sc-rec.warn .sc-rec-n{color:var(--gvs-warning-500)}
[data-theme="dark"] .sc-rec.danger .sc-rec-n{color:var(--gvs-danger-500)}
.sc-rec-body{flex:1;min-width:0}
.sc-rec-t{font-size:14px;font-weight:600;color:var(--gvs-fg-1)}
.sc-rec-s{font-size:13px;color:var(--gvs-fg-2);margin-top:3px;line-height:1.5}
.sc-pips{display:flex;gap:4px;margin-top:10px}
.sc-pips i{flex:1;height:6px;border-radius:3px;background:var(--gvs-surface-sunken)}
.sc-pips i.f{background:var(--gvs-success-500)}
.sc-rec.warn .sc-pips i.f{background:var(--gvs-warning-500)}
.sc-rec.danger .sc-pips i.f{background:var(--gvs-danger-500)}
.sc-lastused{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:12.5px;color:var(--gvs-fg-3)}
.sc-lastused .material-symbols-rounded{font-size:17px}

/* ---------- Set-up dialogs ------------------------------------------------ */
.sc-steps{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--gvs-divider);background:var(--gvs-surface-alt)}
.sc-step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--gvs-fg-3)}
.sc-step .sc-sn{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;background:var(--gvs-surface-sunken);color:var(--gvs-fg-3)}
.sc-step.on{color:var(--gvs-fg-1)}
.sc-step.on .sc-sn{background:var(--gvs-primary);color:var(--gvs-fg-on-primary)}
.sc-step.done .sc-sn{background:var(--gvs-success-500);color:#fff}
.sc-step-sep{flex:1;height:1px;background:var(--gvs-border);min-width:12px}

.sc-qr-wrap{display:flex;gap:24px;align-items:flex-start}
.sc-qr{flex:none;padding:12px;background:#fff;border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-md);color:#0A1A2E;line-height:0}
.sc-qr-svg{display:block}
.sc-qr-side{flex:1;min-width:0}
.sc-qr-side p{margin:0 0 14px;font-size:14px;color:var(--gvs-fg-2);line-height:1.6}
.sc-secret{font-family:var(--gvs-font-mono);font-size:15px;letter-spacing:.06em;color:var(--gvs-fg-1);background:var(--gvs-surface-sunken);border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-md);padding:12px 14px;word-spacing:.3em;user-select:all}
.sc-secret-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.sc-openapp{display:none}
@media(max-width:640px){
  .sc-qr-wrap{flex-direction:column;align-items:stretch}
  .sc-qr{align-self:center}
  .sc-openapp{display:inline-flex}
}

.sc-code-field{max-width:320px}
.sc-code-field input{font-family:var(--gvs-font-mono);font-size:24px;letter-spacing:.34em;text-align:center;font-weight:600}
.sc-code-field .mh-input{height:60px}
[data-theme="dark"] .sc-alert.bad{color:var(--gvs-danger-500)}
[data-theme="dark"] .sc-alert.warn{color:var(--gvs-warning-500)}
[data-theme="dark"] .sc-alert.good{color:var(--gvs-success-500)}
[data-theme="dark"] .sc-alert.info{color:var(--gvs-info-500)}
/* ---------- Recovery codes ------------------------------------------------ */
.sc-rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-md);overflow:hidden;background:var(--gvs-surface-sunken)}
.sc-rc-grid code{font-family:var(--gvs-font-mono);font-size:15px;letter-spacing:.04em;color:var(--gvs-fg-1);padding:12px 16px;border-bottom:1px solid var(--gvs-divider);border-right:1px solid var(--gvs-divider);text-align:center;user-select:all}
.sc-rc-grid code:nth-child(2n){border-right:none}
.sc-rc-grid code:nth-last-child(-n+2){border-bottom:none}
@media(max-width:480px){.sc-rc-grid{grid-template-columns:1fr}.sc-rc-grid code{border-right:none}.sc-rc-grid code:nth-last-child(2){border-bottom:1px solid var(--gvs-divider)}}
.sc-rc-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sc-ack{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:14px 16px;border:1px solid var(--gvs-border-strong);border-radius:var(--gvs-radius-md);cursor:pointer;transition:border-color var(--gvs-dur-fast),background var(--gvs-dur-fast)}
.sc-ack:hover{border-color:var(--gvs-fg-3)}
.sc-ack.on{border-color:var(--gvs-primary);background:var(--gvs-primary-weak)}
.sc-ack .sc-box{flex:none;width:20px;height:20px;border-radius:4px;border:2px solid var(--gvs-border-strong);display:grid;place-items:center;margin-top:1px}
.sc-ack.on .sc-box{background:var(--gvs-primary);border-color:var(--gvs-primary);color:#fff}
.sc-ack .sc-box .material-symbols-rounded{font-size:15px}
.sc-ack-t{font-size:13.5px;font-weight:600;color:var(--gvs-fg-1);line-height:1.5}

/* ---------- Admin › Security policy --------------------------------------- */
.sc-wrap{max-width:900px}
.sc-policy-head{display:flex;align-items:flex-start;gap:16px;padding:20px}
.sc-policy-head .sc-ph-body{flex:1;min-width:0}
.sc-policy-head h3{margin:0;font-size:16.5px;font-weight:700;color:var(--gvs-fg-1)}
.sc-policy-head p{margin:5px 0 0;font-size:13.5px;color:var(--gvs-fg-2);line-height:1.6;max-width:64ch}
.sc-policy-detail{border-top:1px solid var(--gvs-divider);padding:18px 20px;background:var(--gvs-surface-alt);display:grid;gap:16px}
.sc-grace{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sc-grace label{font-size:13.5px;font-weight:600;color:var(--gvs-fg-1)}
.sc-meta{font-size:12.5px;color:var(--gvs-fg-3)}

.sc-compliance{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px}
.sc-comp-n{font-family:var(--gvs-font-display);font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--gvs-fg-1);line-height:1}
.sc-comp-n span{font-size:16px;font-weight:600;color:var(--gvs-fg-3)}
.sc-bar{height:10px;border-radius:5px;background:var(--gvs-surface-sunken);overflow:hidden}
.sc-bar i{display:block;height:100%;background:var(--gvs-primary);border-radius:5px;transition:width var(--gvs-dur-slow) var(--gvs-ease-standard)}
.sc-comp-s{font-size:13px;color:var(--gvs-fg-3);margin-top:8px}
@media(max-width:640px){.sc-compliance{grid-template-columns:1fr;gap:12px}}

/* ---------- Sign-in surfaces ---------------------------------------------- */
.sc-previews{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:980px){.sc-previews{grid-template-columns:1fr}}
.sc-preview-label{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gvs-fg-3);margin-bottom:10px}
.sc-preview{border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-lg);overflow:hidden;box-shadow:var(--gvs-elev-1)}

.sc-login{--sc-input:var(--gvs-surface);background:var(--gvs-bg);min-height:520px;display:grid;place-items:center;padding:40px 24px}
[data-theme="dark"] .sc-login{--sc-input:#E8EDF6}
.sc-login-card{width:min(420px,100%);background:var(--gvs-surface);border-radius:var(--gvs-radius-xl);box-shadow:var(--gvs-elev-3);padding:36px 32px 28px;text-align:center}
[data-theme="dark"] .sc-login-card{border:1px solid var(--gvs-border)}
.sc-brand{width:60px;height:60px;border-radius:14px;background:var(--gvs-primary);color:#fff;display:grid;place-items:center;margin:0 auto 16px;font-family:var(--gvs-font-display);font-weight:800;font-size:19px;letter-spacing:.02em}
.sc-login-card h2{margin:0;font-family:var(--gvs-font-display);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--gvs-fg-1)}
.sc-login-card .sc-login-sub{margin:6px 0 24px;font-size:15px;color:var(--gvs-fg-3);line-height:1.5}
.sc-login-card .sc-login-sub .sc-mask{font-family:var(--gvs-font-mono);color:var(--gvs-fg-2)}
.sc-lf{text-align:left;margin-bottom:18px}
.sc-lf label{display:block;font-size:14px;font-weight:700;color:var(--gvs-fg-1);margin-bottom:7px}
.sc-lf input{width:100%;height:50px;padding:0 15px;font:inherit;font-size:15px;color:var(--gvs-fg-1);background:var(--sc-input);border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-lg);outline:none;transition:border-color var(--gvs-dur-fast),box-shadow var(--gvs-dur-fast)}
[data-theme="dark"] .sc-lf input{color:#0A1A2E;border-color:transparent}
.sc-lf input:focus{border-color:var(--gvs-primary);box-shadow:var(--gvs-focus-ring)}
.sc-lf.code input{font-family:var(--gvs-font-mono);font-size:22px;letter-spacing:.3em;text-align:center;font-weight:600;height:58px}
.sc-lf .sc-lf-help{font-size:12.5px;color:var(--gvs-fg-3);margin-top:7px;line-height:1.5}
.sc-signin-btn{width:100%;height:52px;border-radius:var(--gvs-radius-lg);background:var(--gvs-primary);color:var(--gvs-fg-on-primary);font-size:16px;font-weight:700;transition:background var(--gvs-dur-fast)}
.sc-signin-btn:hover{background:var(--gvs-primary-hover)}
.sc-signin-btn:disabled{opacity:.55;cursor:not-allowed}
.sc-altbtn{width:100%;height:46px;margin-top:10px;border-radius:var(--gvs-radius-lg);font-size:14.5px;font-weight:600;color:var(--gvs-primary);transition:background var(--gvs-dur-fast)}
.sc-altbtn:hover{background:var(--gvs-primary-weak)}
.sc-altbtn:disabled{color:var(--gvs-fg-3);cursor:not-allowed}
.sc-altbtn:disabled:hover{background:none}
.sc-legal{margin:20px 0 0;font-size:14px;color:var(--gvs-fg-3);line-height:1.5}
.sc-legal a{color:var(--gvs-primary);text-decoration:none}
.sc-legal a:hover{text-decoration:underline}
.sc-back{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--gvs-fg-3);display:inline-flex;align-items:center;gap:6px}
.sc-back:hover{color:var(--gvs-fg-1)}
.sc-back .material-symbols-rounded{font-size:18px}
.sc-attempts{font-size:13px;font-weight:600;color:var(--gvs-danger-500)}
.sc-hint{margin-top:18px;padding-top:16px;border-top:1px solid var(--gvs-divider);font-size:13px;color:var(--gvs-fg-3);line-height:1.6}

/* the enrolment wall a user hits when the policy is on */
.sc-wall{text-align:left}
.sc-wall .sc-wall-count{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:var(--gvs-radius-pill);background:var(--gvs-warning-50);color:var(--gvs-warning-700);margin-bottom:16px}
[data-theme="dark"] .sc-wall .sc-wall-count{color:var(--gvs-warning-500)}
.sc-wall .sc-wall-count .material-symbols-rounded{font-size:17px}
.sc-wall ul{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:10px}
.sc-wall li{display:flex;gap:11px;font-size:14px;color:var(--gvs-fg-2);line-height:1.55}
.sc-wall li .material-symbols-rounded{font-size:20px;color:var(--gvs-primary);flex:none}

/* 2FA cell in the Users table */
.sc-2fa{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gvs-fg-2);white-space:nowrap}
.sc-2fa .material-symbols-rounded{font-size:18px}
.sc-2fa.on{color:var(--gvs-success-700)}
[data-theme="dark"] .sc-2fa.on{color:var(--gvs-success-500)}
.sc-2fa.off{color:var(--gvs-fg-3)}

@media print{
  body *{visibility:hidden}
  .sc-rc-print,.sc-rc-print *{visibility:visible}
  .sc-rc-print{position:absolute;inset:0;padding:40px}
}

/* ---------------------------------------------------------------------------
   Additions for the shared Two-factor panel (GvsTwoFactorPanel and its three
   dialogs). The classes above came across from the design's security.css; the
   ones below replace inline styles the design's JSX carried, so the Razor
   markup does not have to. */

.sc-confirm{width:min(480px,100%)}
.sc-confirm-body{margin:0;font-size:14.5px;color:var(--gvs-fg-2);line-height:1.6}

.sc-rc-lead{margin:0 0 14px;font-size:14px;color:var(--gvs-fg-2);line-height:1.6}
.sc-rc-error{color:var(--gvs-danger-500);margin-bottom:12px}
.sc-email-lead{margin:0 0 18px;font-size:14.5px;color:var(--gvs-fg-2);line-height:1.6}
.sc-email-lead .sc-mask{font-family:var(--gvs-font-mono);color:var(--gvs-fg-1)}

.sc-smallbtn-icon{font-size:17px;vertical-align:-3px;margin-right:6px}
.sc-sn-check{font-size:14px}
.sc-field-last{margin-bottom:0}
.sc-resend{width:auto;padding:0 4px;margin-top:12px}

.sc-key-label{font-size:12px;font-weight:600;color:var(--gvs-fg-3);display:block;margin-bottom:6px}
.sc-rec-of{font-size:15px;font-weight:600;color:var(--gvs-fg-3)}

.sc-pref-block{margin-top:18px}
.sc-pref-label{margin-top:0}

/* The QR is server-rendered SVG dropped in as markup, so it needs sizing here
   rather than on an element this library controls. */
.sc-qr svg{display:block;width:196px;height:196px}
.sc-qr-loading{width:196px;height:196px;border-radius:8px;background:var(--gvs-surface-sunken);
    animation:sk-pulse 1.4s ease-in-out infinite}

/* Print: the recovery codes are the only thing worth putting on paper, and the
   dialog they sit in is the whole viewport when printing from the panel. */
@media print{
    .sc-rc-print{break-inside:avoid}
    .mh-scrim{position:static;background:none}
    .mh-modal-head button,.mh-modal-foot,.sc-rc-actions,.sc-ack{display:none!important}
}

/* The destructive variant, for "turn two-factor off for this person" in the admin tab.
   Outlined rather than filled: it sits inside an already-red danger block, and a solid red
   button there reads as the primary thing to do on the tab. */
.sc-smallbtn.danger{border-color:var(--gvs-danger-500);color:var(--gvs-danger-500);background:var(--gvs-surface)}
.sc-smallbtn.danger:hover{border-color:var(--gvs-danger-500);color:var(--gvs-fg-on-primary);background:var(--gvs-danger-500)}
.sc-smallbtn:disabled{opacity:.55;cursor:not-allowed}
.sc-smallbtn:disabled:hover{border-color:var(--gvs-border-strong);color:var(--gvs-fg-2);background:var(--gvs-surface)}

/* Per-person overrides on the Security page, and the requirement selector in
   Users > Manage > Two-factor. */
.sc-overrides{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.sc-ov{flex:1 1 150px;padding:14px 16px;border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-sm);
    background:var(--gvs-surface-alt)}
.sc-ov-n{display:block;font-size:26px;font-weight:700;color:var(--gvs-fg-1);
    font-variant-numeric:tabular-nums;line-height:1.1}
.sc-ov-s{display:block;margin-top:4px;font-size:12.5px;color:var(--gvs-fg-3);line-height:1.4}
.sc-ov.bad{border-color:var(--gvs-danger-500);background:var(--gvs-danger-50)}
.sc-ov.bad .sc-ov-n{color:var(--gvs-danger-700)}

.sc-req{margin-top:20px;padding-top:18px;border-top:1px solid var(--gvs-border)}
.sc-req-choice{margin-top:10px}
.sc-req-reason{margin-top:14px}

/* Three options rather than two, so the buttons need to wrap on a phone instead of
   squeezing the labels. */
@media (max-width:600px){
    .sc-req-choice{flex-wrap:wrap}
    .sc-req-choice button{flex:1 1 100%}
    .sc-overrides{flex-direction:column}
}

/* One box per digit. Wide enough for a thumb on a handset, and the filled state gives
   feedback about how many digits are left — which a single letter-spaced field never did. */
.gs-code{display:flex;gap:10px;justify-content:flex-start}
.gs-code-cell{width:52px;height:62px;padding:0;text-align:center;
    font-family:var(--gvs-font-mono);font-size:26px;font-weight:600;
    color:var(--gvs-fg-1);background:var(--gvs-surface);
    border:1px solid var(--gvs-border-strong);border-radius:var(--gvs-radius-sm);
    outline:none;transition:border-color var(--gvs-dur-fast),box-shadow var(--gvs-dur-fast)}
.gs-code-cell.filled{border-color:var(--gvs-primary)}
.gs-code-cell:focus{border-color:var(--gvs-primary);box-shadow:var(--gvs-focus-ring)}
.gs-code-cell:disabled{opacity:.55;cursor:not-allowed}

/* Six 52px boxes plus gaps overflow a narrow handset, so they shrink rather than wrap —
   a code split across two lines reads as two codes. */
@media (max-width:420px){
    .gs-code{gap:6px}
    .gs-code-cell{width:100%;min-width:0;height:56px;font-size:22px}
}