/* HiTechCloud portal — auth & public pages (login, signup, password reset, MFA, account picker, home, errors).
   Uses the tokens and components of portal.css; page-specific rules only. */

/* ---------- Split auth screen (login, sign-up, password reset) ----------
   Left: white form column (logo + tools on top, form centred, footer at the bottom).
   Right: dark brand panel, sticky, from 1100px. */
html body .cm-app.cm-app--auth { display: block; min-height: 100vh; background: var(--surface); }
.cm-authx { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
@media (min-width: 1100px) { .cm-authx { grid-template-columns: minmax(0, 1fr) clamp(380px, 38vw, 560px); } }
.cm-authx__main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; background: var(--surface); }
.cm-authx__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 72px; padding: 0 24px; flex-shrink: 0; }
.cm-authx__logo { display: inline-flex; align-items: center; }
.cm-authx__logo img { height: 36px; width: auto; }
.cm-authx__logo .cm-logo__dark { display: none; }
html.darkmode .cm-authx__logo .cm-logo__light { display: none; }
html.darkmode .cm-authx__logo .cm-logo__dark { display: inline; }
.cm-authx__tools { display: flex; align-items: center; gap: 4px; }
.cm-authx__body { flex: 1 0 auto; display: flex; justify-content: center; align-items: flex-start; padding: 24px 24px 40px; }
html body .cm-app .section-main.cm-authx__content { width: 100%; max-width: 400px !important; margin: 32px 0 auto !important; }
html body .cm-app .section-main.cm-authx__content:has(.cm-auth-box--wide) { max-width: 560px !important; }
.cm-authx__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px; padding: 13px 24px 20px; font-size: 12px; color: var(--muted); flex-shrink: 0; }
.cm-authx__foot > * { display: inline-flex; align-items: center; min-height: 24px; }
.cm-authx__foot a { color: var(--muted) !important; }
@media (max-width: 575.98px) { .cm-authx__foot > span:first-child { flex-basis: 100%; justify-content: center; } }
.cm-authx__foot a:hover { color: var(--foreground) !important; }
@media (max-width: 575.98px) {
  .cm-authx__top { height: 64px; padding: 0 16px; }
  .cm-authx__logo img { height: 32px; }
  .cm-authx__body { padding: 16px 16px 32px; }
}

/* Brand panel: always dark, whatever the theme (M33 force-dark).
   Image (dist/images/auth-panel*): dark empty ceiling on top, mascot + GPU rack at the bottom.
   It sits on the sticky inner block (exactly one viewport tall), anchored to the bottom so the mascot is never
   cropped; short screens lose only the empty ceiling. Copy sits in that dark top area under a gradient scrim. */
.cm-authx__brand { display: none; }
@media (min-width: 1100px) {
  .cm-authx__brand { display: block; position: relative; background: #050a1a; color: #e9edf5; }
  .cm-authx__brand-inner {
    position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 24px;
    padding: 72px clamp(32px, 4vw, 56px) 48px;
    background-color: #050a1a;
    background-image: url("../images/auth-panel.jpg");
    background-image: image-set(url("../images/auth-panel-640.webp") type("image/webp") 1x, url("../images/auth-panel.webp") type("image/webp") 2x, url("../images/auth-panel.jpg") type("image/jpeg") 1x);
    background-size: cover; background-position: center bottom; background-repeat: no-repeat;
  }
  .cm-authx__brand-inner::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgb(4 8 22 / 0.88) 0%, rgb(4 8 22 / 0.6) 34%, rgb(4 8 22 / 0) 58%);
  }
  .cm-authx__brand-inner > * { position: relative; }
}
@media (min-width: 1100px) and (min-resolution: 1.5dppx) {
  .cm-authx__brand-inner { background-image: image-set(url("../images/auth-panel.webp") type("image/webp") 1x, url("../images/auth-panel.jpg") type("image/jpeg") 1x); }
}
/* Short screens: titles only, so the copy never reaches the mascot's head (~57% down the image). */
@media (min-width: 1100px) and (max-height: 960px) {
  .cm-authx__brand-inner { padding-top: 56px; gap: 20px; }
  .cm-authx__point-text { display: none; }
  .cm-authx__points { gap: 12px; }
  .cm-authx__points li { align-items: center; }
  .cm-authx__headline { font-size: 26px; }
}
@media (min-width: 1100px) and (max-height: 780px) {
  .cm-authx__brand .cm-authx__points { display: none; }
}
.cm-authx__mark { width: 40px; height: 40px; object-fit: contain; }
.cm-authx__headline { margin: 0; max-width: 18ch; font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #fff; text-wrap: balance; text-shadow: 0 1px 12px rgb(0 0 0 / 0.35); }
.cm-authx__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 40ch; }
.cm-authx__points li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: #b4bdd0; }
.cm-authx__points strong { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: #fff; }
.cm-authx__point-body { min-width: 0; }
.cm-authx__point-icon { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgb(255 255 255 / 0.1); color: #7cb8fa; backdrop-filter: blur(4px); }

/* Fallback: login/sign-up rendered under some other route inside the normal app shell.
   Hide the shell and centre the form instead of letting it stretch full width. */
html body .cm-app:not(.cm-app--auth):has(.cm-auth-box) .cm-sidebar,
html body .cm-app:not(.cm-app--auth):has(.cm-auth-box) .cm-topbar,
html body .cm-app:not(.cm-app--auth):has(.cm-auth-box) .cm-overlay { display: none !important; }
html body .cm-app:not(.cm-app--auth):has(.cm-auth-box) .cm-main { margin-left: 0 !important; background: var(--surface) !important; }
html body .cm-app:not(.cm-app--auth):has(.cm-auth-box) .cm-content { display: flex; justify-content: center; padding: 48px 16px !important; }
html body .cm-app:not(.cm-app--auth):has(.cm-auth-box) .section-main { width: 100%; max-width: 400px !important; }
html body .cm-app:not(.cm-app--auth):has(.cm-auth-box--wide) .section-main { max-width: 560px !important; }
html body .cm-app:not(.cm-app--auth):has(.cm-auth-box) .cm-footer { justify-content: center; }

.cm-auth-box { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.cm-auth-box > .cm-auth-foot { margin-top: 8px; }


/* Standalone card: white on grey, no border (M29). */
.cm-auth-panel { display: flex; flex-direction: column; gap: 24px; }
.cm-auth-head { display: flex; flex-direction: column; gap: 6px; }
.cm-auth-switch { margin: 0; font-size: 14px; color: var(--muted); }
.cm-auth-switch a { font-weight: 500; }
.cm-auth-title { margin: 0 !important; font-size: 24px !important; font-weight: 600; line-height: 1.4; text-align: left; }
.cm-auth-lead { margin: -12px 0 0; font-size: 14px; color: var(--muted); text-wrap: pretty; }
.cm-auth-foot { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.cm-auth-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }

.cm-auth-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.cm-auth-field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.cm-auth-field > label, .cm-app .cm-field-label { margin: 0; font-size: 14px; font-weight: 500; color: var(--foreground); width: fit-content; }
.cm-app .cm-auth-input, .cm-app .cm-auth-submit { height: 48px !important; min-height: 48px; font-size: 16px; }
.cm-app .cm-auth-submit { width: 100%; font-size: 15px; }
/* "Quên mật khẩu?": after the input in the DOM, shown on the label row (form.md). */
.cm-auth-forgot { position: absolute; top: -1.5px; right: 0; display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; color: var(--foreground) !important; line-height: 21px; }
.cm-auth-forgot:hover { text-decoration: underline; }
.cm-auth-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 24px; margin-block: -2px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 500; color: var(--primary); cursor: pointer; }
.cm-auth-link:hover { text-decoration: underline; }
.cm-auth-captcha__row { display: flex; align-items: center; gap: 8px; }
.cm-auth-captcha__row .capcha { width: 120px; height: 44px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); object-fit: cover; cursor: pointer; }
.cm-auth-captcha__row .form-control { flex: 1 1 auto; min-width: 0; }
.cm-auth-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* "hoặc" divider: --border-strong, a hairline alone on white disappears (form.md). */
.cm-auth-or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.cm-auth-or::before, .cm-auth-or::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--border-strong); }

/* Social / passkey buttons rendered by modules: equal-weight outline, logo left, same height as inputs. */
.cm-auth-alt, .cm-auth-alt .alt-login, .cm-auth-alt .text-center { display: flex; flex-direction: column; gap: 8px; margin: 0; text-align: left; }
.cm-auth-alt > link + .btn { margin-top: 0; }
.cm-app .cm-auth-alt .btn,
.cm-app .cm-auth-alt .btn-social.btn-google, .cm-app .cm-auth-alt .btn-social.btn-github,
.cm-app .cm-auth-alt .btn-social,
.cm-app .cm-auth-form [data-passkeyv2-operation] {
  position: relative; display: flex !important; align-items: center; justify-content: center; gap: 10px;
  width: 100% !important; height: 48px; min-height: 48px; margin: 0 !important; padding: 0 16px !important;
  background-color: var(--surface) !important; border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important; color: var(--foreground) !important;
  font-size: 15px; font-weight: 500; letter-spacing: 0; text-align: center; box-shadow: none !important;
}
.cm-app .cm-auth-alt .btn:hover, .cm-app .cm-auth-alt .btn-social:hover,
.cm-app .cm-auth-form [data-passkeyv2-operation]:hover { background-color: var(--button-hover) !important; }
.cm-app .cm-auth-alt .btn-social > .social-logo,
.cm-app .cm-auth-alt .btn-social > :first-child {
  position: static !important; width: 20px !important; height: 20px; flex-shrink: 0; border: 0 !important;
  background-size: 20px !important; line-height: 1;
}
.cm-app .cm-auth-form [data-passkeyv2] { margin-top: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.cm-app .cm-auth-form [data-passkeyv2-operation]::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%2010a2%202%200%200%200-2%202c0%201.02-.1%202.51-.26%204%22%20/%3E%20%3Cpath%20d%3D%22M14%2013.12c0%202.38%200%206.38-1%208.88%22%20/%3E%20%3Cpath%20d%3D%22M17.29%2021.02c.12-.6.43-2.3.5-3.02%22%20/%3E%20%3Cpath%20d%3D%22M2%2012a10%2010%200%200%201%2018-6%22%20/%3E%20%3Cpath%20d%3D%22M2%2016h.01%22%20/%3E%20%3Cpath%20d%3D%22M21.8%2016c.2-2%20.131-5.354%200-6%22%20/%3E%20%3Cpath%20d%3D%22M5%2019.5C5.5%2018%206%2015%206%2012a6%206%200%200%201%20.34-2%22%20/%3E%20%3Cpath%20d%3D%22M8.65%2022c.21-.66.45-1.32.57-2%22%20/%3E%20%3Cpath%20d%3D%22M9%206.8a6%206%200%200%201%209%205.2v2%22%20/%3E%20%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%2010a2%202%200%200%200-2%202c0%201.02-.1%202.51-.26%204%22%20/%3E%20%3Cpath%20d%3D%22M14%2013.12c0%202.38%200%206.38-1%208.88%22%20/%3E%20%3Cpath%20d%3D%22M17.29%2021.02c.12-.6.43-2.3.5-3.02%22%20/%3E%20%3Cpath%20d%3D%22M2%2012a10%2010%200%200%201%2018-6%22%20/%3E%20%3Cpath%20d%3D%22M2%2016h.01%22%20/%3E%20%3Cpath%20d%3D%22M21.8%2016c.2-2%20.131-5.354%200-6%22%20/%3E%20%3Cpath%20d%3D%22M5%2019.5C5.5%2018%206%2015%206%2012a6%206%200%200%201%20.34-2%22%20/%3E%20%3Cpath%20d%3D%22M8.65%2022c.21-.66.45-1.32.57-2%22%20/%3E%20%3Cpath%20d%3D%22M9%206.8a6%206%200%200%201%209%205.2v2%22%20/%3E%20%3C/svg%3E") center / contain no-repeat;
}

.cm-auth-done { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.cm-auth-done p { margin: 0; }
.cm-auth-done__icon { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--success-bg); color: var(--success); }

/* Login modal (public pages) and inline block */
.cm-auth-modal { max-width: 440px; }
.cm-auth-modal .modal-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.cm-auth-modal .close { margin: -4px -8px -4px auto; padding: 0; opacity: 1; text-shadow: none; }
.cm-auth-inline { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Sign-up ---------- */
.cm-signup-form { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.cm-form-section { margin: 0; padding: 0; border: 0; min-width: 0; }
.cm-form-section + .cm-form-section { padding-top: 24px; border-top: 1px solid var(--border); }
.cm-form-section__title { margin: 0 0 16px !important; padding: 0; font-size: 16px; font-weight: 600; color: var(--foreground); }
.cm-form-col--full { grid-column: 1 / -1; }
.cm-form-grid .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cm-form-grid .form-group.d-none { display: none !important; }
.cm-form-grid .form-group:has(> .empty-placeholder) { display: none; }
.cm-form-grid .iti { width: 100%; }
.cm-file { font-size: 14px; }
.cm-app .cm-signup-form .form-control { height: 44px; }
.cm-app .cm-signup-form textarea.form-control { height: auto; }
.cm-app .cm-signup-form .parsley-errors-list { margin: 0; padding: 0; list-style: none; }
.cm-app .cm-field-label { display: inline-flex; align-items: center; gap: 4px; }
.cm-app .cm-field-label .vtip_description { position: static !important; display: inline-block !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; transform: none !important; background-size: 16px 16px !important; background-position: center !important; vertical-align: middle; }
.cm-app .cm-field-label .vtip_description::before, .cm-app .cm-field-label .vtip_description::after { top: 0 !important; left: 0 !important; margin: 0 !important; line-height: 16px !important; }

/* ---------- Portal home ---------- */
.cm-root-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 992px) { .cm-root-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cm-app a.cm-root-action { display: flex; align-items: flex-start; gap: 16px; padding: 20px; margin: 0 !important; color: var(--foreground) !important; text-decoration: none !important; transition: border-color .15s, background-color .15s; }
.cm-app a.cm-root-action:hover { border-color: var(--border-strong) !important; background: var(--surface-hover) !important; }
.cm-root-action__icon { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--primary-light); color: var(--primary); }
.cm-root-action__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-root-action__title { font-size: 16px; font-weight: 600; }
.cm-root-action__desc { font-size: 14px; color: var(--muted); text-wrap: pretty; }
.cm-root-action__arrow { margin-top: 12px; color: var(--muted); }

.cm-news-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 20px; color: var(--foreground) !important; text-decoration: none !important; }
.cm-news-row:hover { background: var(--surface-hover); }
@media (min-width: 768px) { .cm-news-row { grid-template-columns: 7rem minmax(0, 1fr); gap: 16px; } }
.cm-news-row__date { font-size: 13px; color: var(--muted); padding-top: 1px; }
.cm-news-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-news-row__title { font-size: 14px; font-weight: 500; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-news-row:hover .cm-news-row__title { color: var(--primary); }
.cm-news-row__excerpt { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-news-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cm-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 9999px; background: var(--neutral-bg); color: var(--neutral); font-size: 12px; font-weight: 500; }
.cm-tag__dot { width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0; }
.cm-root .cm-card__head-actions { gap: 16px; }

/* ---------- Error / status pages ---------- */
.cm-error { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 0; text-align: center; }
.cm-error__code { margin: 0; font-size: 14px; font-weight: 600; color: var(--primary); letter-spacing: .04em; }
.cm-error__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--item-hover); color: var(--muted); margin-bottom: 8px; }
.cm-error__title { margin: 0 !important; font-size: 20px !important; font-weight: 600; max-width: 32ch; text-wrap: balance; }
.cm-error__text { margin: 0; max-width: 52ch; font-size: 14px; color: var(--muted); }
.cm-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.cm-error__details { width: 100%; max-width: 440px; margin-top: 16px; text-align: left; }
.cm-maintenance { align-items: center; text-align: center; }
.cm-maintenance .cm-auth-title { text-align: center; }
.cm-maintenance .cm-auth-lead { margin: 0; }
.cm-badbrowser { margin: 16px; }

/* Info pages (CMS HTML) */
.cm-prose { padding: 24px; font-size: 15px; line-height: 1.7; max-width: 860px; }
.cm-prose > :first-child { margin-top: 0; }
.cm-prose > :last-child { margin-bottom: 0; }
.cm-prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.cm-prose table { width: 100%; display: block; overflow-x: auto; }

/* Account picker */
.cm-userselect { gap: 16px; }
.cm-userselect .cm-input-search .form-control { min-width: 0; width: 100%; height: 44px; }
.cm-userselect__list { max-height: 400px; overflow-y: auto; margin: 0 -12px; display: flex; flex-direction: column; gap: 4px; }
.cm-userselect__list .cm-row { min-height: 56px; padding: 8px 12px; border-radius: var(--radius); border: 0 !important; }
.cm-userselect__list .cm-row:hover { background: var(--item-hover); }

/* MFA */
.cm-mfa-disable { max-width: 720px; }
.cm-app .cm-list > li.cm-row { list-style: none; }
.cm-app .cm-row__end .btn-sm { white-space: nowrap; }
.cm-app .cm-list > li.cm-row .cm-row__sub { margin-top: 4px; }
.cm-app .cm-list > li.cm-row .cm-row__end { gap: 8px; }
@media (max-width: 575.98px) {
  .cm-app .cm-list > li.cm-row { flex-wrap: wrap; }
  .cm-app .cm-list > li.cm-row .cm-row__end { width: 100%; padding-left: 44px; justify-content: flex-start; }
}

/* Brand marks for module social buttons: the module ships white logos meant for coloured buttons. */
.cm-app .cm-auth-alt .social-logo.social-google { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23FFC107%22%20d%3D%22M43.6%2020.5H42V20H24v8h11.3C33.7%2032.7%2029.2%2036%2024%2036c-6.6%200-12-5.4-12-12s5.4-12%2012-12c3.1%200%205.8%201.2%207.9%203.1l5.7-5.7C34%206.1%2029.3%204%2024%204%2012.9%204%204%2012.9%204%2024s8.9%2020%2020%2020%2020-8.9%2020-20c0-1.3-.1-2.4-.4-3.5z%22/%3E%3Cpath%20fill%3D%22%23FF3D00%22%20d%3D%22M6.3%2014.7l6.6%204.8C14.7%2015.1%2019%2012%2024%2012c3.1%200%205.8%201.2%207.9%203.1l5.7-5.7C34%206.1%2029.3%204%2024%204%2016.3%204%209.7%208.3%206.3%2014.7z%22/%3E%3Cpath%20fill%3D%22%234CAF50%22%20d%3D%22M24%2044c5.2%200%209.9-2%2013.4-5.2l-6.2-5.2C29.2%2035.1%2026.7%2036%2024%2036c-5.2%200-9.6-3.3-11.3-7.9l-6.5%205C9.5%2039.6%2016.2%2044%2024%2044z%22/%3E%3Cpath%20fill%3D%22%231976D2%22%20d%3D%22M43.6%2020.5H42V20H24v8h11.3c-.8%202.2-2.2%204.2-4.1%205.6l6.2%205.2C37%2039.2%2044%2034%2044%2024c0-1.3-.1-2.4-.4-3.5z%22/%3E%3C/svg%3E") center / 20px no-repeat !important; }
.cm-app .cm-auth-alt .social-logo.social-github { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%231f2329%22%20d%3D%22M12%20.5C5.7.5.5%205.7.5%2012c0%205.1%203.3%209.4%207.9%2010.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7%201.2.1%201.8%201.2%201.8%201.2%201%201.8%202.8%201.3%203.5%201%20.1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7%200-1.3.5-2.3%201.2-3.1-.1-.3-.5-1.5.1-3.1%200%200%201-.3%203.3%201.2a11.5%2011.5%200%200%201%206%200C17.3%204.7%2018.3%205%2018.3%205c.7%201.6.3%202.8.1%203.1.8.8%201.2%201.8%201.2%203.1%200%204.4-2.7%205.4-5.3%205.7.4.4.8%201.1.8%202.2v3.3c0%20.3.2.7.8.6%204.6-1.5%207.9-5.8%207.9-10.9C23.5%205.7%2018.3.5%2012%20.5z%22/%3E%3C/svg%3E") center / 20px no-repeat !important; }
html.darkmode .cm-app .cm-auth-alt .social-logo.social-github { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23e9edf5%22%20d%3D%22M12%20.5C5.7.5.5%205.7.5%2012c0%205.1%203.3%209.4%207.9%2010.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7%201.2.1%201.8%201.2%201.8%201.2%201%201.8%202.8%201.3%203.5%201%20.1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7%200-1.3.5-2.3%201.2-3.1-.1-.3-.5-1.5.1-3.1%200%200%201-.3%203.3%201.2a11.5%2011.5%200%200%201%206%200C17.3%204.7%2018.3%205%2018.3%205c.7%201.6.3%202.8.1%203.1.8.8%201.2%201.8%201.2%203.1%200%204.4-2.7%205.4-5.3%205.7.4.4.8%201.1.8%202.2v3.3c0%20.3.2.7.8.6%204.6-1.5%207.9-5.8%207.9-10.9C23.5%205.7%2018.3.5%2012%20.5z%22/%3E%3C/svg%3E") !important; }
.cm-auth > * { flex-shrink: 0; }

/* ---------- Sign-up details ---------- */
.cm-optional { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.cm-segpick--hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-choice-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 480px) { .cm-choice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cm-app .cm-choice { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-weight: 400; transition: border-color .15s, background-color .15s; }
.cm-app .cm-choice:hover { background: var(--surface-hover); }
.cm-app .cm-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cm-app .cm-choice:has(input:checked) { border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--ring-focus); }
.cm-app .cm-choice:has(input:focus-visible) { border-color: var(--border-focus); }
.cm-choice__icon { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--item-hover); color: var(--muted); }
.cm-app .cm-choice:has(input:checked) .cm-choice__icon { background: var(--primary-light); color: var(--primary); }
.cm-choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-choice__title { font-size: 14px; font-weight: 500; color: var(--foreground); }
.cm-choice__desc { font-size: 13px; color: var(--muted); }

/* Password strength meter injected by HostBill's script after the password input. */
html body .cm-app #password_strength, html body .cm-app .password_strength { width: 100% !important; height: 4px !important; margin-top: 8px; border: 0 !important; border-radius: 9999px; background: var(--secondary) !important; overflow: hidden; }
html body .cm-app .password_strength span { display: block; height: 100% !important; width: 0; border-radius: 9999px; transition: width .2s; }
html body .cm-app .password_strength_1 span { width: 20% !important; background: var(--error) !important; }
html body .cm-app .password_strength_2 span { width: 40% !important; background: var(--warning) !important; }
html body .cm-app .password_strength_3 span { width: 60% !important; background: var(--warning) !important; }
html body .cm-app .password_strength_4 span { width: 80% !important; background: var(--success) !important; }
html body .cm-app .password_strength_5 span { width: 100% !important; background: var(--success) !important; }
/* Module socialbuttons.css paints .btn-google solid red in dark mode: keep the outline button in both themes. */
html.darkmode body .cm-app .cm-auth-alt .btn-social,
html.darkmode body .cm-app .cm-auth-alt .btn-social.btn-google,
html.darkmode body .cm-app .cm-auth-alt .btn-social.btn-github { background-color: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--foreground) !important; }
html.darkmode body .cm-app .cm-auth-alt .btn-social:hover { background-color: var(--button-hover) !important; }

/* passkeyv2 appends "Sign in with a passkey" to every form that has a password input: not on reminder / reset. */
html body .cm-app .section-passreminder [data-passkeyv2] { display: none !important; }

/* Show / hide password (eye button added by portal.js inside .cm-pw). Tab: input → eye → next field. */
.cm-pw { position: relative; }
html body .cm-app .cm-pw > input { padding-right: 48px !important; }
.cm-pw__toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.cm-pw__toggle:hover { background: var(--item-hover); color: var(--foreground); }
.cm-pw__toggle:focus { outline: none; }
.cm-pw__toggle .cm-i-eye-off { display: none; }
.cm-pw__toggle[aria-pressed="true"] .cm-i-eye { display: none; }
.cm-pw__toggle[aria-pressed="true"] .cm-i-eye-off { display: inline-block; }