/* SYMVITA public account pages — shared mobile-first interface, v31 */
:root {
    --sv31-blue-950: #062a49;
    --sv31-blue-900: #073b63;
    --sv31-blue-800: #07518b;
    --sv31-blue-700: #076aa9;
    --sv31-blue-600: #0787cc;
    --sv31-blue-500: #12a2de;
    --sv31-blue-100: #dff2fb;
    --sv31-blue-50: #f2f9fd;
    --sv31-canvas: #edf4f9;
    --sv31-surface: #ffffff;
    --sv31-surface-alt: #f7fafc;
    --sv31-ink: #102f44;
    --sv31-muted: #60788b;
    --sv31-line: #d6e3ec;
    --sv31-success: #12805c;
    --sv31-danger: #c43c4f;
    --sv31-warning: #a36308;
    --sv31-radius-lg: 24px;
    --sv31-radius-md: 17px;
    --sv31-shadow: 0 2px 4px rgba(6, 42, 73, .05), 0 16px 38px rgba(7, 81, 139, .10);
    --sv31-shadow-control: 0 5px 0 #064a7d, 0 11px 22px rgba(7, 106, 169, .18);
    --sv31-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--sv31-canvas);
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body.sv-public-v31 {
    min-width: 320px;
    min-height: 100dvh;
    margin: 0;
    padding: 0 !important;
    display: block !important;
    color: var(--sv31-ink) !important;
    background:
        radial-gradient(circle at 8% 5%, rgba(18, 162, 222, .10), transparent 24rem),
        linear-gradient(180deg, #f8fcff 0, var(--sv31-canvas) 72%) !important;
    font-family: var(--sv31-font) !important;
    font-size: 15px;
    line-height: 1.55;
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.sv-public-v31 *,
body.sv-public-v31 *::before,
body.sv-public-v31 *::after {
    box-sizing: border-box;
}

body.sv-public-v31 img { max-width: 100%; }

body.sv-public-v31 .d-none,
body.sv-public-v31 .d-none-force {
    display: none !important;
}

body.sv-public-v31 a {
    color: var(--sv31-blue-700);
    text-underline-offset: 3px;
}

body.sv-public-v31 :where(button, input, select, textarea) {
    font: inherit;
}

body.sv-public-v31 :where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(18, 162, 222, .30) !important;
    outline-offset: 3px !important;
}

.sv-public-brandbar {
    display: none !important;
    position: relative;
    z-index: 100;
    width: min(1120px, calc(100% - 32px));
    margin: 18px auto 0;
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--sv31-line);
    border-radius: 20px;
    box-shadow: 0 2px 3px rgba(6, 42, 73, .05), 0 10px 28px rgba(7, 81, 139, .08);
}

.sv-public-brandbar::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: -1px;
    left: 18px;
    height: 3px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, var(--sv31-blue-700), var(--sv31-blue-500));
    pointer-events: none;
}

.sv-public-brandbar__inner {
    min-height: 72px;
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sv-public-brandbar__identity {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: inherit !important;
    text-decoration: none !important;
}

.sv-public-brandbar__mark {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #e2edf4;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(7, 81, 139, .10);
    overflow: hidden;
}

.sv-public-brandbar__mark img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.sv-public-brandbar__copy { display: grid; line-height: 1.1; }

.sv-public-brandbar__name {
    color: var(--sv31-blue-900);
    font-size: 18px;
    font-weight: 850;
    letter-spacing: .08em;
}

.sv-public-brandbar__legal {
    margin-top: 4px;
    color: var(--sv31-blue-600);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.sv-public-brandbar__page {
    color: var(--sv31-muted);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: right;
}

body.sv-public-v31 :where(.page-wrapper, .page-content) {
    min-height: 0 !important;
}

body.sv-public-v31[data-sv-public-page="login"] :where(#app, .views, .view, .page, .page-content) {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
}

body.sv-public-v31 .page-wrapper {
    width: min(1120px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin: clamp(18px, 4vh, 38px) auto max(42px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px) !important;
    gap: clamp(28px, 6vw, 78px) !important;
    align-items: center !important;
}

/* Compact help: information is available without creating a permanently tall page. */
body.sv-public-v31 .sv-page-guide {
    width: 100%;
    margin: 16px 0 20px;
    color: var(--sv31-ink);
    background: linear-gradient(180deg, #f8fcff, var(--sv31-blue-50));
    border: 1px solid #cde7f5;
    border-radius: 16px;
    box-shadow: 0 3px 0 #d6e8f2, 0 9px 18px rgba(7, 81, 139, .07);
    overflow: clip;
}

body.sv-public-v31 .sv-page-guide summary {
    min-height: 58px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
}

body.sv-public-v31 .sv-page-guide summary::-webkit-details-marker { display: none; }

body.sv-public-v31 .sv-page-guide__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(180deg, var(--sv31-blue-500), var(--sv31-blue-700));
    border-radius: 11px;
    box-shadow: 0 3px 0 #065b97;
    font-size: 16px;
    font-weight: 900;
    font-family: Georgia, serif;
}

body.sv-public-v31 .sv-page-guide__summary {
    min-width: 0;
    display: grid;
    gap: 1px;
    text-align: left;
}

body.sv-public-v31 .sv-page-guide__summary strong {
    color: var(--sv31-blue-950);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

body.sv-public-v31 .sv-page-guide__summary small {
    color: var(--sv31-muted);
    font-size: 11px;
    line-height: 1.25;
}

body.sv-public-v31 .sv-page-guide__chevron {
    width: 9px;
    height: 9px;
    margin-left: auto;
    flex: 0 0 9px;
    border-right: 2px solid var(--sv31-blue-700);
    border-bottom: 2px solid var(--sv31-blue-700);
    transform: rotate(45deg) translate(-2px, 2px);
    transition: transform .18s ease;
}

body.sv-public-v31 .sv-page-guide[open] .sv-page-guide__chevron {
    transform: rotate(225deg) translate(-2px, 2px);
}

body.sv-public-v31 .sv-page-guide__body {
    padding: 0 16px 16px 57px;
    border-top: 1px solid #dcebf4;
}

body.sv-public-v31 .sv-page-guide__body p {
    margin: 12px 0 8px;
    color: var(--sv31-muted);
    font-size: 12px;
    line-height: 1.5;
}

body.sv-public-v31 .sv-page-guide__body ol {
    margin: 0;
    padding-left: 18px;
    color: var(--sv31-ink);
    font-size: 12px;
    line-height: 1.55;
}

body.sv-public-v31 .sv-page-guide__body li + li { margin-top: 5px; }

body.sv-public-v31 :where(.login-wrapper, .register-card, .forgot-wrapper, .card-box, .verify-card, .card) {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    color: var(--sv31-ink) !important;
    background: var(--sv31-surface) !important;
    border: 1px solid var(--sv31-line) !important;
    border-radius: var(--sv31-radius-lg) !important;
    box-shadow: var(--sv31-shadow) !important;
    overflow: hidden;
}

body.sv-public-v31 :where(.login-wrapper, .register-card, .forgot-wrapper, .card-box) {
    padding: clamp(24px, 4.5vw, 40px) !important;
}

body.sv-public-v31 :where(.desktop-hero) {
    position: relative;
    display: block !important;
    min-width: 0;
    padding: clamp(22px, 4vw, 46px) !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--sv31-blue-950), var(--sv31-blue-700) 62%, var(--sv31-blue-500)) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 30px !important;
    box-shadow: 0 6px 0 #05253f, 0 24px 50px rgba(6, 42, 73, .22) !important;
    overflow: hidden;
}

body.sv-public-v31 .desktop-hero::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -110px;
    bottom: -120px;
    border: 44px solid rgba(255,255,255,.09);
    border-radius: 50%;
    pointer-events: none;
}

body.sv-public-v31 .desktop-hero :where(h1, p, strong, span, i) { color: inherit !important; }
body.sv-public-v31 .desktop-hero h1 {
    margin: 0 0 16px !important;
    font-size: clamp(30px, 4vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em;
}
body.sv-public-v31 .desktop-hero p { max-width: 620px; margin: 0; color: rgba(255,255,255,.86) !important; }

body.sv-public-v31 :where(.logo-box) {
    margin: 0 auto 18px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.sv-public-v31 :where(.logo-box img, .verify-logo, .pwa-logo) {
    width: auto !important;
    height: clamp(76px, 10vw, 104px) !important;
    max-width: 220px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.sv-public-v31 :where(.login-title, .page-title, .forgot-title, .welcome-title, .verify-header h3, .card-box h3) {
    margin: 0 0 8px !important;
    color: var(--sv31-blue-950) !important;
    font-size: clamp(25px, 3vw, 32px) !important;
    font-weight: 850 !important;
    line-height: 1.16 !important;
    letter-spacing: -.025em;
    text-align: center;
}

body.sv-public-v31 :where(.login-sub, .page-sub, .forgot-sub, .welcome-text, .text-muted) {
    color: var(--sv31-muted) !important;
    line-height: 1.55 !important;
}

body.sv-public-v31 :where(.input-group-custom, .df-input, input.form-control) {
    min-height: 54px !important;
    color: var(--sv31-ink) !important;
    background: var(--sv31-surface-alt) !important;
    border: 1px solid var(--sv31-line) !important;
    border-radius: 15px !important;
    box-shadow: inset 0 1px 2px rgba(6, 42, 73, .04) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.sv-public-v31 :where(.input-group-custom, .df-input) {
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

body.sv-public-v31 .df-input[style*="display:none"],
body.sv-public-v31 .df-input[style*="display: none"] {
    display: none !important;
}

body.sv-public-v31 :where(.input-group-custom, .df-input):focus-within,
body.sv-public-v31 input.form-control:focus {
    background: #fff !important;
    border-color: var(--sv31-blue-500) !important;
    box-shadow: 0 0 0 4px rgba(18, 162, 222, .12) !important;
}

body.sv-public-v31 :where(.input-group-custom, .df-input) input,
body.sv-public-v31 input.form-control {
    min-width: 0 !important;
    min-height: 52px !important;
    color: var(--sv31-ink) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.sv-public-v31 input::placeholder { color: #8397a7 !important; opacity: 1; }
body.sv-public-v31 :where(.field-icon, .df-input > i:first-child, .input-group-custom > i:first-child) { color: var(--sv31-blue-600) !important; }

body.sv-public-v31 :where(.togglePassword, .toggle-pass) {
    width: 52px !important;
    min-width: 52px !important;
    height: 44px !important;
    margin: 0 4px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: var(--sv31-blue-700) !important;
    background: var(--sv31-blue-50) !important;
    border: 1px solid #cde7f5 !important;
    border-radius: 12px !important;
    font-family: var(--sv31-font) !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    touch-action: manipulation;
}

body.sv-public-v31 :where(.togglePassword, .toggle-pass)::before { content: "Show" !important; }
body.sv-public-v31 :where(.togglePassword, .toggle-pass).bi-eye::before { content: "Hide" !important; }

body.sv-public-v31 :where(.btn-login, .btn-main, .btn-reset, .btn-primary, .login-button, .app-button):not(.button-outline) {
    min-height: 52px !important;
    padding: 13px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    color: #fff !important;
    background: linear-gradient(180deg, var(--sv31-blue-500), var(--sv31-blue-700)) !important;
    border: 1px solid var(--sv31-blue-800) !important;
    border-radius: 15px !important;
    box-shadow: var(--sv31-shadow-control) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    touch-action: manipulation;
    transition: transform .12s ease, box-shadow .12s ease, filter .18s ease !important;
}

body.sv-public-v31 :where(.btn-login, .btn-main, .btn-reset, .btn-primary, .login-button, .app-button):not(.button-outline):hover {
    filter: saturate(1.06) brightness(1.03);
    transform: translateY(-1px);
}

body.sv-public-v31 :where(.btn-login, .btn-main, .btn-reset, .btn-primary, .login-button, .app-button).sv-is-pressed,
body.sv-public-v31 :where(.btn-login, .btn-main, .btn-reset, .btn-primary, .login-button, .app-button):not(.button-outline):active {
    transform: translateY(4px) !important;
    box-shadow: 0 1px 0 #064a7d, 0 5px 12px rgba(7, 106, 169, .16) !important;
}

body.sv-public-v31 :where(button, .btn, .button)[disabled],
body.sv-public-v31 :where(button, .btn, .button)[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: .55 !important;
    filter: grayscale(.2) !important;
    box-shadow: none !important;
}

body.sv-public-v31 :where(.btn-login, .btn-main, .btn-reset, .btn-primary, .login-button) { width: 100% !important; }
body.sv-public-v31 :where(.section-label, .input-label) { color: var(--sv31-blue-900) !important; font-weight: 800 !important; }
body.sv-public-v31 :where(.extra-links, .login-forgot) { color: var(--sv31-muted) !important; }
body.sv-public-v31 :where(.extra-links a, .login-forgot a) { font-weight: 800 !important; }
body.sv-public-v31 .login-forgot { margin: 10px 0 16px !important; text-align: right !important; }
body.sv-public-v31 .extra-links { margin-top: 20px !important; text-align: center !important; }

body.sv-public-v31 :where(.progress-strip, .reset-fee-notice, .security-note, .closed-info, .verified-panel) {
    color: var(--sv31-ink) !important;
    background: var(--sv31-blue-50) !important;
    border: 1px solid #cde7f5 !important;
    border-radius: var(--sv31-radius-md) !important;
}

body.sv-public-v31 .progress-step.active { color: #fff !important; background: var(--sv31-blue-700) !important; }
body.sv-public-v31 .reset-fee-notice { border-left: 4px solid var(--sv31-blue-600) !important; }

body.sv-public-v31 .desktop-steps { margin-top: 28px; display: grid; gap: 12px; }
body.sv-public-v31 .desktop-step {
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.17) !important;
    border-radius: 16px !important;
}
body.sv-public-v31 .desktop-step-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; background: rgba(255,255,255,.16); border-radius: 12px; }

body.sv-public-v31 .pwa-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(6, 42, 73, .68) !important;
}
body.sv-public-v31 .pwa-overlay.d-none,
body.sv-public-v31 form.d-none-force,
body.sv-public-v31 div.d-none-force {
    display: none !important;
}
body.sv-public-v31 .pwa-card {
    width: min(100%, 440px) !important;
    padding: 28px !important;
    color: var(--sv31-ink) !important;
    background: #fff !important;
    border: 1px solid var(--sv31-line) !important;
    border-radius: 24px !important;
    box-shadow: 0 28px 70px rgba(6,42,73,.30) !important;
}
body.sv-public-v31 .button-outline { min-height: 48px !important; color: var(--sv31-blue-700) !important; background: #fff !important; border: 1px solid var(--sv31-blue-600) !important; border-radius: 14px !important; font-weight: 800 !important; }

/* Standalone recovery and verification cards */
body.sv-public-v31[data-sv-public-page="reset"],
body.sv-public-v31[data-sv-public-page="verify-otp"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
body.sv-public-v31[data-sv-public-page="reset"] .card-box,
body.sv-public-v31[data-sv-public-page="verify-otp"] .card-box { margin-top: clamp(32px, 8vh, 76px) !important; }

/* Certificate and document verification */
body.sv-public-v31 :where(.verify-header, .hero) {
    padding: clamp(24px, 5vw, 40px) !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--sv31-blue-950), var(--sv31-blue-700)) !important;
    text-align: center;
}
body.sv-public-v31 .verify-header :where(.logo-box, .verify-logo) {
    background: #fff !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    border-radius: 17px !important;
    box-shadow: 0 8px 20px rgba(6,42,73,.18) !important;
}
body.sv-public-v31 .verify-header .logo-box {
    width: fit-content !important;
    padding: 5px 10px !important;
}
body.sv-public-v31 .verify-header .verify-logo { padding: 6px !important; }
body.sv-public-v31 :where(.verify-header, .hero) :where(h1,h2,h3,h4,.title,.subtitle,.small,i) { color: inherit !important; }
body.sv-public-v31 :where(.verify-body, .card > .status, .card > .row, .card > .footer) { position: relative; }
body.sv-public-v31 .verify-body { padding: clamp(22px, 4vw, 36px) !important; }
body.sv-public-v31 :where(.verify-row, .info-box, .card > .row) {
    min-width: 0;
    padding: 14px 16px !important;
    background: var(--sv31-surface-alt) !important;
    border: 1px solid var(--sv31-line) !important;
    border-radius: 15px !important;
}
body.sv-public-v31 .info-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
body.sv-public-v31 :where(.verify-label, .info-label, .card .label) { color: var(--sv31-muted) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; }
body.sv-public-v31 :where(.verify-value, .info-value, .card .value) { min-width: 0; color: var(--sv31-ink) !important; overflow-wrap: anywhere; }
body.sv-public-v31 :where(.verify-status.valid, .status.valid) { color: var(--sv31-success) !important; background: #ecf9f4 !important; border-color: #b9e6d5 !important; }
body.sv-public-v31 :where(.verify-status.invalid, .status.invalid) { color: var(--sv31-danger) !important; background: #fff2f3 !important; border-color: #f1c8ce !important; }
body.sv-public-v31 :where(.verify-footer, .footer-note, .card .footer) { padding: 14px !important; color: var(--sv31-muted) !important; background: var(--sv31-surface-alt) !important; border-top: 1px solid var(--sv31-line) !important; opacity: 1 !important; text-align: center !important; }

body.sv-public-v31[data-sv-public-page="validate"] .hero {
    width: min(760px, calc(100% - 32px));
    margin: 24px auto -22px !important;
    border-radius: 24px 24px 0 0 !important;
}
body.sv-public-v31[data-sv-public-page="validate"] .card { padding: 42px 24px 24px !important; }
body.sv-public-v31[data-sv-public-page="validate"] .hero .logo { height: 78px !important; width: auto !important; object-fit: contain !important; background: #fff !important; border-radius: 16px !important; padding: 5px !important; }

/* Welcome remains intentionally simple. */
body.sv-public-v31[data-sv-public-page="welcome"] {
    padding: 24px !important;
    display: grid !important;
    place-items: center !important;
}
body.sv-public-v31 .welcome-card { max-width: 480px !important; padding: clamp(30px, 7vw, 54px) !important; text-align: center; }
body.sv-public-v31 .welcome-card .logo { width: min(240px, 70vw) !important; height: auto !important; margin-bottom: 18px !important; object-fit: contain !important; }

/* Full-screen office map */
body.sv-public-v31[data-sv-public-page="map"] { background: #dbe8f0 !important; }
body.sv-public-v31[data-sv-public-page="map"] .map-header {
    height: auto !important;
    min-height: 78px !important;
    padding: 10px 16px !important;
    color: var(--sv31-ink) !important;
    background: #fff !important;
    border-bottom: 1px solid var(--sv31-line) !important;
    box-shadow: 0 8px 22px rgba(6,42,73,.10) !important;
}
body.sv-public-v31[data-sv-public-page="map"] .header-left { min-width: 0; }
body.sv-public-v31[data-sv-public-page="map"] .map-header .logo { width: 58px !important; height: 58px !important; object-fit: contain !important; background: #fff !important; border: 1px solid var(--sv31-line) !important; border-radius: 15px !important; padding: 3px !important; }
body.sv-public-v31[data-sv-public-page="map"] .header-title { min-width: 0; color: var(--sv31-blue-950) !important; font-weight: 850 !important; }
body.sv-public-v31[data-sv-public-page="map"] .header-subtitle { color: var(--sv31-muted) !important; }
body.sv-public-v31[data-sv-public-page="map"] .back-btn,
body.sv-public-v31[data-sv-public-page="map"] .map-controls button {
    min-width: 46px !important;
    min-height: 46px !important;
    color: var(--sv31-blue-800) !important;
    background: #fff !important;
    border: 1px solid var(--sv31-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 0 #c4d5e1, 0 9px 18px rgba(6,42,73,.12) !important;
    cursor: pointer !important;
}
body.sv-public-v31[data-sv-public-page="map"] .office-search {
    color: var(--sv31-ink) !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid var(--sv31-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--sv31-shadow) !important;
}
body.sv-public-v31[data-sv-public-page="map"] .office-search input { color: var(--sv31-ink) !important; background: var(--sv31-surface-alt) !important; border: 1px solid var(--sv31-line) !important; border-radius: 14px !important; }
body.sv-public-v31[data-sv-public-page="map"] .search-title { color: var(--sv31-blue-950) !important; }
body.sv-public-v31[data-sv-public-page="map"] :where(.search-sub, .search-tip) { color: var(--sv31-muted) !important; }

@media (max-width: 820px) {
    .sv-public-brandbar { width: min(100% - 20px, 680px); margin-top: 10px; border-radius: 17px; }
    .sv-public-brandbar__inner { min-height: 64px; padding: 7px 11px; }
    .sv-public-brandbar__mark { width: 48px; height: 48px; flex-basis: 48px; border-radius: 13px; }
    .sv-public-brandbar__mark img { width: 43px; height: 43px; }
    .sv-public-brandbar__name { font-size: 16px; }
    .sv-public-brandbar__page { max-width: 110px; font-size: 10px; }

    body.sv-public-v31 .page-wrapper {
        width: min(100% - 20px, 680px) !important;
        margin: 14px auto 28px !important;
        display: block !important;
    }
    body.sv-public-v31 .desktop-hero { display: none !important; }
    body.sv-public-v31 :where(.login-wrapper, .register-card, .forgot-wrapper, .card-box) { max-width: 600px !important; padding: 26px 20px 30px !important; border-radius: 22px !important; }
    body.sv-public-v31 :where(.logo-box img, .verify-logo, .pwa-logo) { height: 86px !important; }
    body.sv-public-v31 .info-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
    body.sv-public-v31 { font-size: 14px; background: #f4f9fc !important; }
    body.sv-public-v31 :where(.login-wrapper, .register-card, .forgot-wrapper, .card-box, .verify-card, .card) { border-radius: 20px !important; box-shadow: 0 2px 3px rgba(6,42,73,.04), 0 12px 26px rgba(7,81,139,.09) !important; }
    body.sv-public-v31 :where(.login-title, .page-title, .forgot-title, .welcome-title, .verify-header h3, .card-box h3) { font-size: 25px !important; }
    body.sv-public-v31[data-sv-public-page="validate"] .hero { width: calc(100% - 20px); margin-top: 10px !important; }
    body.sv-public-v31[data-sv-public-page="map"] .map-header { padding: 8px 10px !important; }
    body.sv-public-v31[data-sv-public-page="map"] .map-header .logo { width: 48px !important; height: 48px !important; }
    body.sv-public-v31[data-sv-public-page="map"] .header-title { font-size: 15px !important; }
    body.sv-public-v31[data-sv-public-page="map"] .header-subtitle { font-size: 10px !important; }
    body.sv-public-v31[data-sv-public-page="map"] .office-search { left: 10px !important; right: 10px !important; width: auto !important; }
}

/* Forgot password: one native document scroller, no clipped/nested form area. */
body.sv-public-v31[data-sv-public-page="forgot-password"] {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] :where(.page-wrapper, .forgot-wrapper, #identityForm, #otpForm) {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .page-wrapper {
    align-items: start !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .forgot-wrapper {
    scrollbar-width: auto !important;
    border-top: 3px solid var(--sv31-blue-600) !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .forgot-wrapper::-webkit-scrollbar {
    width: initial !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] :where(.forgot-sub, .progress-strip, .sv-page-guide, .reset-fee-notice) {
    margin-bottom: 18px !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .sv-recovery-kicker {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 14px;
    padding: 7px 11px 7px 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--sv31-blue-900);
    background: var(--sv31-blue-50);
    border: 1px solid #cde7f5;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(7,81,139,.07);
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .sv-recovery-kicker__shield {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(180deg, var(--sv31-blue-500), var(--sv31-blue-700));
    border-radius: 50%;
    box-shadow: 0 2px 0 #065b97;
    font-size: 13px;
    font-weight: 900;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .sv-recovery-kicker > span:last-child {
    min-width: 0;
    display: grid;
    line-height: 1.15;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .sv-recovery-kicker strong {
    color: var(--sv31-blue-900);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .sv-recovery-kicker small {
    margin-top: 2px;
    color: var(--sv31-muted);
    font-size: 9px;
    font-weight: 650;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .progress-strip {
    padding: 4px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    background: #edf5fa !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .progress-step {
    min-width: 0;
    min-height: 42px;
    padding: 8px 7px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .reset-fee-notice {
    padding: 13px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 12px !important;
    line-height: 1.48 !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .section-label {
    margin: 22px 0 13px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sv31-line);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px !important;
    letter-spacing: .06em;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .input-label {
    margin: 0 0 7px !important;
    display: block !important;
    color: var(--sv31-blue-950) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .input-group-custom {
    width: 100% !important;
    margin: 0 0 15px !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .input-group-custom > i:first-child {
    width: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    font-size: 16px;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .input-group-custom input {
    width: 100% !important;
    padding: 0 2px !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .btn-reset {
    margin-top: 6px !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] :where(.verified-panel, .security-note) {
    padding: 14px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] :where(#identityForm, #verifiedPanel) {
    scroll-margin-top: 16px;
}

body.sv-public-v31[data-sv-public-page="forgot-password"] .extra-links {
    padding-top: 4px;
}

@media (max-width: 820px) {
    body.sv-public-v31[data-sv-public-page="forgot-password"] {
        background: #f5f9fc !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .page-wrapper {
        width: min(100% - 18px, 620px) !important;
        margin: 9px auto max(24px, env(safe-area-inset-bottom)) !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .forgot-wrapper {
        padding: 24px 20px 28px !important;
    }
}

@media (max-width: 600px) {
    body.sv-public-v31[data-sv-public-page="forgot-password"] {
        background: #fff !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .page-wrapper {
        width: 100% !important;
        min-height: 100dvh !important;
        margin: 0 !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .forgot-wrapper {
        width: 100% !important;
        max-width: none !important;
        min-height: 100dvh !important;
        padding: calc(18px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-top: 3px solid var(--sv31-blue-600) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .logo-box {
        margin-bottom: 10px !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .logo-box img {
        height: 72px !important;
        max-width: 190px !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .forgot-title {
        font-size: 25px !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .sv-recovery-kicker {
        margin-bottom: 11px;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .forgot-sub {
        margin-top: 7px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .sv-page-guide {
        margin-top: 12px !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .reset-fee-notice {
        border-left-width: 3px !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] :where(.input-group-custom, .btn-reset) {
        min-height: 56px !important;
    }

    body.sv-public-v31[data-sv-public-page="forgot-password"] .security-note {
        margin-top: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sv-public-v31 *, body.sv-public-v31 *::before, body.sv-public-v31 *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}