/* Reseller software preview, aligned with the native 1.4 interface. */
.brandPreviewStage .previewSwitch.previewSwitchV14,
.dashboardShell-reseller .resellerSettingsShell-branding .previewSwitch.previewSwitchV14 {
  width: 100%; max-width: 630px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px;
}
.brandPreviewStage .previewSwitchV14 .previewSwitchOption { min-width: 0; padding-inline: 5px; }
.brandPreviewStage .previewSwitchV14 .previewSwitchCopy strong { font-size: 9px; white-space: nowrap; }
.previewSwitchV14 .previewSwitchOption:has(input:focus-visible) { outline: 2px solid #c788ff; outline-offset: 2px; }
.softwarePreviewHost { border: 0; background: transparent; box-shadow: none; }
.loaderPreviewCanvas > .softwarePreview {
  position: absolute; top: 0; left: 0; width: 630px; height: 350px; min-height: 0;
  transform-origin: left top; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 24%, #0b0911);
  border-radius: 15px; background: #08070e; color: #eeeef3;
  font: 400 13px/1.35 "Manrope", "Segoe UI", sans-serif; text-align: left; letter-spacing: 0;
  --sp-muted: #a1a0b2; --sp-line: #1c1c2b; --sp-soft: color-mix(in srgb, var(--brand) 12%, #09060e);
}
.softwarePreview *, .softwarePreview *::before, .softwarePreview *::after { box-sizing: border-box; }
.softwarePreview :is(h4, h5, p, dl, dd) { margin: 0; padding: 0; }
.softwarePreview :is(button, label, small, strong, em) { font: inherit; letter-spacing: inherit; text-transform: none; }
.softwarePreview button { margin: 0; box-shadow: none; cursor: pointer; }
.softwarePreview button:focus-visible { outline: 2px solid #eeeef3; outline-offset: 2px; }
.softwarePreview button:disabled { opacity: 1; cursor: default; filter: none; }
.softwarePreview svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.softwarePreview img { display: block; max-width: 100%; }
.softwarePreview .spChrome { position: absolute; z-index: 1; top: 11px; right: 17px; display: flex; align-items: center; gap: 35px; height: 12px; color: #b8b7c2; }
.softwarePreview .spChrome i { width: 10px; height: 1px; background: currentColor; }
.softwarePreview .spChrome b { position: relative; width: 10px; height: 10px; }
.softwarePreview .spChrome b::before, .softwarePreview .spChrome b::after { content: ""; position: absolute; left: 5px; width: 1px; height: 12px; background: currentColor; transform: rotate(45deg); }
.softwarePreview .spChrome b::after { transform: rotate(-45deg); }
.softwarePreview .spInput { display: flex; align-items: center; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--brand) 42%, #171224); border-radius: 8px; background: #090910; color: #aaa9b2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.softwarePreview .spAction { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 0; height: 28px; padding: 0 9px; border: 1px solid var(--brand); border-radius: 6px; background: transparent; color: #e3ddeb; font-size: 12px; font-weight: 400; line-height: 1; }
.softwarePreview .spAction svg { color: var(--brand); width: 15px; height: 15px; }
.softwarePreview .spPrimary { background: var(--brand); color: #fff; }
.softwarePreview .spSecondary { background: var(--sp-soft); border-color: color-mix(in srgb, var(--brand) 50%, #130e21); }
.softwarePreview.spLogin { display: grid; grid-template-columns: 226px 402px; }
.softwarePreview .spLoginArt { height: 348px; overflow: hidden; border-right: 1px solid #272530; background: #020204; }
.softwarePreview .spLoginArt > img { width: 100%; height: 100%; object-fit: cover; }
.softwarePreview .spArtFallback { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; width: 100%; height: 100%; background: radial-gradient(ellipse at 45% 82%, color-mix(in srgb, var(--brand) 65%, transparent), transparent 60%), #030306; }
.softwarePreview .spArtFallback img { width: 185px; height: 120px; object-fit: contain; }
.softwarePreview .spArtFallback strong { font-size: 68px; }
.softwarePreview .spArtFallback span { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.softwarePreview .spLoginPanel { position: relative; background: #08080f; }
.softwarePreview .spLoginContent { padding: 48px 40px 0; }
.softwarePreview .spLoginContent h4 { height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 22px; font-weight: 500; line-height: 30px; }
.softwarePreview .spLoginContent h4 span { color: var(--brand); }
.softwarePreview .spLoginContent p { margin: 2px -6px 16px; color: var(--sp-muted); font-size: 12px; text-align: center; white-space: nowrap; }
.softwarePreview .spLoginContent .spInput + .spInput { margin-top: 8px; }
.softwarePreview .spRemember { display: flex; align-items: center; gap: 7px; height: 31px; color: var(--sp-muted); font-size: 12px; }
.softwarePreview .spRemember > span { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: var(--brand); }
.softwarePreview .spRemember svg { width: 13px; height: 13px; color: white; stroke-width: 2.5; }
.softwarePreview .spLoginContent .spPrimary { height: 34px; }
.softwarePreview .spLoginContent .spSupport { height: 32px; margin-top: 8px; }
.softwarePreview .spLoginLinks { display: flex; align-items: center; justify-content: center; gap: 24px; height: 29px; color: var(--brand); font-size: 11px; }
.softwarePreview .spLoginPanel footer { position: absolute; bottom: 0; left: 0; right: 0; height: 26px; padding: 5px 12px 0; border-top: 1px solid #1e1e27; color: #797887; font-size: 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.softwarePreview.spApp { display: grid; grid-template-columns: 57px 1fr; }
.softwarePreview .spSidebar { display: flex; flex-direction: column; align-items: center; gap: 7px; border-right: 1px solid color-mix(in srgb, var(--brand) 25%, #131020); }
.softwarePreview .spBrand { display: grid; place-items: center; width: 38px; height: 51px; margin-bottom: 1px; }
.softwarePreview .spBrand img { width: 32px; height: 22px; object-fit: contain; }
.softwarePreview .spBrand strong { max-width: 35px; overflow: hidden; font-size: 10px; color: #eeeef3; }
.softwarePreview .spNav { position: relative; display: grid; place-items: center; width: 43px; height: 41px; padding: 0; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #898593; }
.softwarePreview .spNav.isActive { color: var(--brand); background: var(--sp-soft); border-color: color-mix(in srgb, var(--brand) 46%, #100b19); overflow: hidden; }
.softwarePreview .spNav.isActive::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--brand); }
.softwarePreview .spNav:hover { color: var(--brand); }
.softwarePreview .spContent { min-width: 0; padding: 0 18px 20px 16px; }
.softwarePreview .spHeader { display: flex; align-items: center; justify-content: space-between; height: 57px; padding: 0 10px; }
.softwarePreview .spHeader > span { position: relative; font-size: 12px; }
.softwarePreview .spHeader > span::after { content: ""; position: absolute; bottom: -6px; left: 0; right: 0; height: 2px; background: var(--brand); }
.softwarePreview .spHeader > .spStatus { align-self: flex-start; margin: 10px 24px 0 0; font-size: 10px; }
.softwarePreview .spStatus { display: inline-flex; align-items: center; gap: 7px; color: #43e681; white-space: nowrap; }
.softwarePreview .spStatus::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #31e675; }
.softwarePreview .spCard { min-width: 0; padding: 14px; border: 1px solid #151522; border-radius: 12px; background: #0a0b14; overflow: hidden; }
.softwarePreview .spAccent { position: relative; }
.softwarePreview .spAccent::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--brand); }
.softwarePreview h5 { font-size: 14px; font-weight: 400; line-height: 20px; }
.softwarePreview .spModuleGrid { display: grid; grid-template-columns: 229px minmax(0, 1fr); gap: 10px; height: 235px; }
.softwarePreview .spModules { padding: 9px 7px; }
.softwarePreview .spModules h5 { margin: 0 4px 7px; }
.softwarePreview .spModule { display: flex; align-items: center; gap: 9px; width: 100%; height: 53px; padding: 7px; border: 1px solid #262538; border-radius: 7px; background: #0d0d17; color: var(--sp-muted); text-align: left; }
.softwarePreview .spModule + .spModule { margin-top: 10px; }
.softwarePreview .spModule.isSelected { border-color: color-mix(in srgb, var(--brand) 27%, #222133); background: color-mix(in srgb, var(--brand) 9%, #0b0711); }
.softwarePreview .spModule.isSelected > svg { color: var(--brand); }
.softwarePreview .spModule > svg { width: 20px; height: 20px; }
.softwarePreview .spModule > span { flex: 1; min-width: 0; }
.softwarePreview .spModule strong { display: block; color: #eeeef3; font-size: 11px; white-space: nowrap; }
.softwarePreview .spModule small { color: var(--sp-muted); font-size: 11px; margin-top: 3px; }
.softwarePreview .spModule small::before { width: 5px; height: 5px; }
.softwarePreview .spModule em { align-self: flex-start; margin-top: 4px; font-size: 10px; }
.softwarePreview .spSelected { padding: 14px 15px; }
.softwarePreview .spEyebrow { display: block; color: var(--sp-muted); font-size: 9px; line-height: 14px; }
.softwarePreview .spSelected h5 { margin-top: 7px; font-size: 16px; white-space: nowrap; }
.softwarePreview .spSelected h5 small { margin-left: 5px; color: var(--sp-muted); font-size: 10px; }
.softwarePreview .spReady { margin-top: 3px; color: var(--sp-muted); font-size: 12px; }
.softwarePreview .spStart { height: 37px; margin-top: 12px; font-size: 14px; }
.softwarePreview .spStart svg { width: 12px; color: white; stroke-width: 2.5; }
.softwarePreview .spIdentifiers { border-top: 1px solid var(--sp-line); margin-top: 14px; padding-top: 11px; }
.softwarePreview .spIdentifiers > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 5px; }
.softwarePreview .spIdentifiers > div > div { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 3px; padding: 0 5px; }
.softwarePreview .spIdentifiers > div > div + div { border-left: 1px solid #262538; }
.softwarePreview .spIdentifiers svg { color: var(--brand); height: 17px; }
.softwarePreview .spIdentifiers span { color: var(--sp-muted); font-size: 10px; white-space: nowrap; }
.softwarePreview .spIdentifiers strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; text-align: center; }
.softwarePreview .spAppFooter { display: flex; justify-content: space-between; height: 40px; margin-top: 14px; padding-top: 15px; border-top: 1px solid #272431; font-size: 9px; color: #d2d0db; }
.softwarePreview .spAppFooter span:last-child { color: var(--sp-muted); }
.softwarePreview .spLicenseCard { height: 272px; padding: 16px; }
.softwarePreview .spLicenseTitle { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.softwarePreview .spLicenseTitle h5 { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.softwarePreview .spLicenseTitle h5 svg { color: var(--brand); }
.softwarePreview .spLicenseTitle .spStatus { font-size: 11px; }
.softwarePreview .spRemainingLabel { display: block; font-size: 11px; color: var(--sp-muted); }
.softwarePreview .spRemaining { display: block; margin-top: 4px; font-size: 20px; }
.softwarePreview .spRenew { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--sp-line); }
.softwarePreview .spRenew p { color: var(--sp-muted); font-size: 10px; margin-top: 3px; }
.softwarePreview .spRenew label { display: block; color: var(--sp-muted); font-size: 10px; margin-top: 15px; margin-bottom: 5px; }
.softwarePreview .spRenew > div { display: grid; grid-template-columns: minmax(0, 1fr) 138px; gap: 10px; }
.softwarePreview .spRenew .spInput { border-color: #2a293b; }
.softwarePreview .spRenew .spAction { height: 34px; }
.softwarePreview .spRenew > small { display: block; color: var(--sp-muted); font-size: 9px; margin-top: 10px; }
.softwarePreview .spSettingsGrid { display: grid; grid-template-columns: 203px minmax(0, 1fr); gap: 16px; height: 272px; }
.softwarePreview .spAccount { padding: 12px; }
.softwarePreview .spIdentity { display: flex; align-items: center; gap: 10px; margin-top: 11px; margin-bottom: 15px; }
.softwarePreview .spIdentity > span { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--sp-soft); color: var(--brand); overflow: hidden; }
.softwarePreview .spIdentity img { width: 36px; height: 36px; object-fit: cover; }
.softwarePreview .spIdentity > div { min-width: 0; }
.softwarePreview .spIdentity strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.softwarePreview .spIdentity small { color: #c4c2d0; font-size: 9px; margin-top: 1px; }
.softwarePreview .spIdentity small::before { width: 5px; height: 5px; }
.softwarePreview .spAccount .spRemainingLabel { font-size: 10px; }
.softwarePreview .spAccount .spRemaining { font-size: 17px; margin-top: 4px; }
.softwarePreview .spAccount dl { margin-top: 9px; padding-top: 4px; border-top: 1px solid var(--sp-line); }
.softwarePreview .spAccount dl > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); height: 19px; align-items: center; font-size: 10px; }
.softwarePreview .spAccount dt { color: #c0bece; }
.softwarePreview .spAccount dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.softwarePreview .spAccount > .spAction { margin-top: 4px; }
.softwarePreview .spHardware { padding: 12px 15px; }
.softwarePreview .spHardware > label { display: block; color: #bab8c7; font-size: 11px; margin-top: 11px; margin-bottom: 3px; }
.softwarePreview .spHardware .spInput { height: 28px; border-radius: 5px; padding: 0 8px; }
.softwarePreview .spHardwareActions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; }
.softwarePreview .spMemoryState { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; margin-bottom: 5px; color: #bab8c7; font-size: 11px; }
.softwarePreview .spMemoryState small { font-size: 9px; }
.softwarePreview .spMemoryState small::before { width: 4px; height: 4px; }
.softwarePreview .spHardware > .spAction + .spAction { margin-top: 9px; }
@media (max-width: 480px) {
  .brandPreviewStage .previewSwitchV14 .previewSwitchCopy strong,
  .dashboardShell-reseller .resellerSettingsShell-branding .previewSwitchV14 .previewSwitchCopy strong { font-size: 8px; }
  .brandPreviewStage .previewSwitchV14 .previewSwitchOption { padding-inline: 2px; }
}