@charset "UTF-8";:root { --account-navy: var(--ws-token-ink); --account-navy-strong: var(--ws-token-ink-strong); --account-blue: var(--ws-token-primary); --account-blue-soft: var(--ws-token-primary-soft); --account-border: var(--ws-token-border); --account-surface: var(--ws-token-surface); --account-soft: var(--ws-token-surface-soft); --account-text: var(--ws-token-text); --account-text-sub: var(--ws-token-text-sub); --account-red: var(--ws-token-danger); --account-green: var(--ws-token-success); --account-shadow: var(--ws-token-shadow-card); --account-shadow-sm: var(--ws-token-shadow-card-sm); --account-radius-lg: 28px; --account-radius-md: var(--ws-token-radius-control); --account-radius-sm: var(--ws-token-radius-small); } .account-help-page { padding: 34px 0 72px; background: linear-gradient(180deg, #f7f9fd 0%, #ffffff 100%); } .account-help-hero { margin-bottom: 18px; padding: 30px 32px; border-radius: var(--account-radius-lg); background: linear-gradient(135deg, #18294f 0%, #2c5ca8 100%); color: #ffffff; box-shadow: var(--account-shadow); } .account-help-hero__eyebrow { display: inline-flex; align-items: center; margin-bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; } .account-help-hero__title { margin: 0 0 10px; font-size: clamp(1.86rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; } .account-help-hero__lead { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 0.98rem; line-height: 1.85; } .account-help-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; } .account-help-card { border: 1px solid var(--account-border); border-radius: var(--account-radius-lg); background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%); box-shadow: var(--account-shadow-sm); } .account-help-card--sub { padding: 22px 22px 20px; } .account-help-card--main { padding: 24px 24px 22px; } .account-help-card__header { margin-bottom: 16px; } .account-help-card__title { margin: 0 0 8px; color: var(--account-navy); font-size: 1.18rem; font-weight: 700; line-height: 1.45; } .account-help-card__text { margin: 0; color: var(--account-text-sub); font-size: 0.94rem; line-height: 1.8; } .account-help-card__note { margin: 16px 0 0; color: var(--account-text-sub); font-size: 0.84rem; line-height: 1.75; } .account-help-contactList { display: grid; gap: 12px; } .account-help-contactItem { padding: 14px 14px 13px; border: 1px solid #e2eaf5; border-radius: 16px; background: #ffffff; } .account-help-contactLabel { display: block; margin-bottom: 5px; color: var(--account-text-sub); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; } .account-help-contactValue { display: block; color: var(--account-text); font-size: 0.95rem; font-weight: 700; line-height: 1.6; word-break: break-word; } .account-help-contactValue a { color: var(--account-blue); text-decoration: none; } .account-help-contactValue a:hover { text-decoration: underline; } .account-help-form__summary { min-height: 1.5em; margin: 0 0 12px; color: var(--account-red); font-size: 0.88rem; font-weight: 700; line-height: 1.45; } .account-help-form__summary ul { margin: 0; padding-left: 1.2rem; } .account-help-field { margin-bottom: 12px; } .account-help-field .form-control { height: 58px; border: 1px solid #cfdbec; border-radius: 14px; color: var(--account-text); box-shadow: none; } .account-help-field .form-control:focus { border-color: #9fbbe0; box-shadow: 0 0 0 0.2rem rgba(44, 92, 168, 0.12); } .account-help-field label { color: var(--account-text-sub); font-weight: 600; } .account-help-form__error { display: block; margin-top: 8px; color: var(--account-red); font-size: 0.84rem; font-weight: 700; line-height: 1.45; } .account-help-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 14px 14px; border: 1px solid #dbe5f3; border-radius: 16px; background: var(--account-blue-soft); } .account-help-check .form-check-input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; border-color: #9fb5d5; } .account-help-check .form-check-label { color: var(--account-navy); font-size: 0.94rem; font-weight: 700; line-height: 1.7; } .account-help-form__note { margin: 12px 0 0; color: var(--account-text-sub); font-size: 0.84rem; line-height: 1.7; } .account-help-submit { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; min-height: 50px; margin-top: 22px; padding: 0 28px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #18294f 0%, #2c5ca8 100%); color: #ffffff; font-size: 0.94rem; font-weight: 700; box-shadow: 0 10px 22px rgba(20, 36, 70, 0.14); transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } .account-help-submit:hover:not(:disabled) { color: #ffffff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(20, 36, 70, 0.18); } .account-help-submit:disabled { background: #c7d2e4; color: #f8fbff; box-shadow: none; cursor: not-allowed; opacity: 1; } @media (max-width: 991.98px) { .account-help-grid { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .account-help-page { padding: 22px 0 52px; } .account-help-hero { padding: 24px 18px; border-radius: 22px; } .account-help-hero__title { font-size: 1.72rem; } .account-help-hero__lead { font-size: 0.94rem; line-height: 1.75; } .account-help-card--sub, .account-help-card--main { padding: 18px 16px; border-radius: 22px; } .account-help-card__title { font-size: 1.05rem; } .account-help-card__text, .account-help-card__note, .account-help-form__note { font-size: 0.88rem; line-height: 1.7; } .account-help-check { padding: 12px 12px; border-radius: 14px; } .account-help-check .form-check-label { font-size: 0.88rem; } .account-help-submit { width: 100%; min-width: 0; } }