* {
    box-sizing: border-box;
}

:root {
    --cp-blue: #0C73FE;
    --cp-blue-dark: #0B5EDB;
    --cp-dark: #0B1220;
    --cp-text: #0f172a;
    --cp-muted: #6b7280;
    --cp-soft: #EAF3FE;
    --cp-bg: #F7FAFF;
    --cp-card: #FFFFFF;
    --cp-line: #EAF3FE;

    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 26px;
    --radius-xl: 32px;

    --shadow-card: 0 12px 30px rgba(15, 23, 42, 0.06);
    --shadow-blue: 0 14px 30px rgba(12, 115, 254, 0.30);
    --transition-ui: 0.22s ease;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: linear-gradient(135deg, #f7fbff 0%, #eef5ff 100%);
    color: #0f172a;
    overscroll-behavior: none;
}

button,
input,
textarea,
select {
    font-size: 16px;
}

.hidden {
    display: none !important;
}

.app {
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    background: #fbfdff;
    padding: 18px 16px 96px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 32px;
}

.logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    overflow: hidden; /* ВАЖНО — обрезает изображение */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f3ff;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ВАЖНО — обрезка без искажения */
}

.blue {
    color: #0C73FE;
}

.screen {
    display: none;
    animation: fadeIn 0.22s ease;
}

.screen.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    margin: 0;
    font-size: 36px;
    line-height: 0.95;
    letter-spacing: -1.5px;
    color: #101828;
}

.hero h1 span {
    display: block;
    color: #0C73FE;
}

.hero p {
    margin: 12px 0 18px;
    color: #6b7280;
    font-size: 16px;
}

.search-box {
    height: 56px;
    border: 1px solid #e5eaf3;
    border-radius: 18px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.04);
    margin-bottom: 22px;
}

.search-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    background: transparent;
}

h2 {
    font-size: 18px;
    margin: 18px 0 12px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.category-card {
    border: none;
    background: white;
    border-radius: 22px;
    min-height: 112px;
    padding: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:active {
    transform: scale(0.96);
}

.category-card .icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e8f3ff, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: inset 0 0 0 1px #e4efff;
}

.category-card span {
    font-size: 14px;
    color: #1f2937;
}

.how-card {
    margin-top: 18px;
    padding: 16px;
    border-radius: 24px;
    background: white;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.how-card h2 {
    margin-top: 0;
}

.steps {
    display: grid;
    grid-template-columns: 1fr 20px 1fr 20px 1fr;
    align-items: center;
    gap: 4px;
}

.steps div {
    text-align: center;
}

.steps b {
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #0C73FE;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.steps span {
    font-size: 12px;
    color: #4b5563;
}

.arrow {
    color: #94a3b8;
    font-size: 22px;
}

.main-button {
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, #178bff, #0f62fe);
    color: white;
    font-size: 17px;
    font-weight: 700;
    margin: 18px 0;
    box-shadow: 0 14px 30px rgba(15, 98, 254, 0.35);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.main-button:active {
    transform: scale(0.97);
    box-shadow: 0 8px 20px rgba(15, 98, 254, 0.28);
}

.main-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.services-list,
.plans-list,
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-card,
.plan-card,
.order-card {
    border: none;
    background: white;
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}

.service-card:active,
.plan-card:active {
    transform: scale(0.98);
}

.plan-card.selected {
    border: 2px solid #0C73FE;
    background: linear-gradient(135deg, #f7fbff, #eef6ff);
    box-shadow: 0 14px 32px rgba(15, 98, 254, 0.18);
}

.service-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    background: #e8f3ff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
}

.service-card-top > div:last-child {
    min-width: 0;
    flex: 1;
}

.service-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--cp-blue);
}

.service-description {
    color: #6b7280;
    font-size: 14px;
    margin-top: 4px;
}

.back-btn {
    border: none;
    background: #eef5ff;
    color: #0C73FE;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    cursor: pointer;
}

.muted {
    color: #6b7280;
    margin-top: -8px;
    margin-bottom: 18px;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

input,
textarea {
    border: 1px solid #e5eaf3;
    border-radius: 18px;
    padding: 16px;
    font-size: 16px;
    outline: none;
    background: white;
}

input:focus,
textarea:focus {
    border-color: #0C73FE;
    box-shadow: 0 0 0 3px rgba(12, 115, 254, 0.12);
}

textarea {
    min-height: 90px;
    resize: none;
}

.summary-card,
.payment-card {
    background: white;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.summary-card div {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
}

.summary-card div:last-child {
    border-bottom: none;
}

.summary-card span {
    color: #6b7280;
}

.payment-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-card span {
    color: #6b7280;
    font-size: 13px;
    margin-top: 8px;
}

.payment-card h2 {
    margin: 0;
}

.copy-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #f5f9ff;
    border-radius: 16px;
    padding: 12px;
}

.copy-row button {
    border: none;
    background: #0C73FE;
    color: white;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 12px;
    cursor: pointer;
}

.info-box {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background: #eef8ff;
    color: #31577c;
    font-size: 14px;
}

.support-button {
    display: block;
    text-align: center;
    padding: 16px;
    border-radius: 18px;
    background: #0C73FE;
    color: white;
    text-decoration: none;
    font-weight: 700;
}

.bottom-nav {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 410px;
    width: calc(100% - 24px);
    height: 76px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e5eaf3;
    border-radius: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(14px);
    z-index: 100;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

body.keyboard-open .bottom-nav,
.bottom-nav.bottom-nav-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(120px);
}

.nav-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 18px;
    padding: 7px 0;
    position: relative;
    overflow: hidden;
    transition:
        color 0.25s ease,
        transform 0.2s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.nav-btn span {
    font-size: 11px;
    font-weight: 600;
    transition: color 0.25s ease;
}

.nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #178bff, #0f62fe);
    opacity: 0;
    transform: scale(0.75);
    border-radius: 18px;
    transition:
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: -1;
}

.nav-btn.active {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(15, 98, 254, 0.32);
}

.nav-btn.active::before {
    opacity: 1;
    transform: scale(1);
}

.nav-btn.active span {
    color: white;
}

.nav-btn:active {
    transform: scale(0.94);
}

.nav-btn.active:active {
    transform: translateY(-3px) scale(0.94);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-yellow {
    background: #fff7df;
    color: #a16207;
}

.status-yellow::before {
    background: #facc15;
}

.status-blue {
    background: #eef5ff;
    color: #0C73FE;
}

.status-blue::before {
    background: #0C73FE;
}

.status-green {
    background: #eafaf1;
    color: #15803d;
}

.status-green::before {
    background: #22c55e;
}

.status-red {
    background: #fff1f2;
    color: #be123c;
}

.status-red::before {
    background: #ef4444;
}

.popular-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.popular-card {
    border: none;
    background: white;
    border-radius: 22px;
    min-height: 112px;
    padding: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popular-card:active {
    transform: scale(0.96);
}

.popular-card .icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e8f3ff, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: inset 0 0 0 1px #e4efff;
}

.popular-card span {
    font-size: 14px;
    color: #1f2937;
    text-align: center;
}

.custom-order-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #eef8ff, #ffffff);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.custom-order-box h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

.custom-order-box p {
    margin: 0 0 14px;
    color: #6b7280;
    font-size: 14px;
}

.secondary-button {
    width: 100%;
    height: 54px;
    border: none;
    border-radius: 18px;
    background: white;
    color: #0C73FE;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #cfe6ff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.secondary-button:active {
    transform: scale(0.97);
}

.show-all-button {
    margin-top: 12px;
}

.travel-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #f3f8ff, #ffffff);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.travel-box h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

.travel-box p {
    margin: 0 0 14px;
    color: #6b7280;
    font-size: 14px;
}

.travel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.travel-card {
    border: none;
    background: white;
    border-radius: 22px;
    min-height: 100px;
    padding: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.travel-card:active {
    transform: scale(0.96);
}

.travel-card .icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e8f3ff, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: inset 0 0 0 1px #e4efff;
}

.travel-card span {
    font-size: 14px;
    color: #1f2937;
    text-align: center;
}

.plan-card h2 {
    margin-bottom: 4px;
}

.instruction-card {
    background: #ffffff;
    border: 1px solid #EAF3FE;
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.04);

    margin-bottom: 1px;
}

.instruction-header {
    width: 100%;
    border: none;
    background: transparent;

    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    cursor: pointer;
}

.instruction-left {
    display: flex;
    align-items: center;
    gap: 12px;

    flex: 1;
    min-width: 0;
}

.instruction-icon-wrapper {
    width: 48px;
    height: 48px;
    min-width: 48px;

    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;

    box-shadow: 0 4px 12px rgba(12, 115, 254, 0.08);
}

.instruction-icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.instruction-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    gap: 3px;

    flex: 1;
    min-width: 0;
}

.instruction-text strong {
    font-size: 14px;
    font-weight: 800;
    color: #0B1220;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.instruction-text span {
    font-size: 10px;
    font-weight: 400;
    color: #0C73FE;
    line-height: 1.3;
}

.instruction-arrow {
    width: 38px;
    height: 38px;
    min-width: 38px;

    border-radius: 14px;

    background: #F7FAFF;
    border: 1px solid #EAF3FE;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #0C73FE;
    flex-shrink: 0;

    transition: 0.2s ease;
}

.instruction-arrow svg {
    transition: 0.2s ease;
}

.instruction-content {
    padding: 0 16px 16px;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}

.instruction-content ol {
    margin: 0;
    padding-left: 20px;
}

.instruction-content li {
    margin-bottom: 8px;
}

.instruction-check input {
    display: none;
}

.instruction-check {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    gap: 16px;

    padding: 10px 14px;

    border-radius: 18px;

    background: #F7FAFF;
    border: 1px solid #EAF3FE;

    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);

    cursor: pointer;
}

.custom-check {
    width: 36px;
    height: 36px;
    min-width: 36px;

    border-radius: 10px;
    border: 2.5px solid #0C73FE;
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.2s ease;

    margin-top: 5px;
    margin-left: 8px;
}

.instruction-check input:checked + .custom-check {
    background: #0C73FE;
}

.instruction-check input:checked + .custom-check::after {
    content: "✓";
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.instruction-check-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}

.instruction-check-text strong {
    font-size: 14px;
    font-weight: 800;
    color: #0B1220;
    letter-spacing: -0.2px;
}

.instruction-check-text span {
    font-size: 10px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.45;
}

.profile-card,
.level-card,
.profile-section {
    background: #ffffff;
    border: 1px solid #EAF3FE;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
    margin-bottom: 14px;
}

.profile-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.profile-avatar {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 20px;
    background: linear-gradient(135deg, #178bff, #0f62fe);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
    box-shadow: 0 12px 26px rgba(15, 98, 254, 0.28);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.profile-user {
    min-width: 0;
}

.profile-user h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #0B1220;
}

.profile-user p {
    margin: 5px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.profile-id-row,
.telegram-id-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: #F7FAFF;
    border: 1px solid #EAF3FE;
    margin-top: 10px;
}

.profile-id-row span,
.telegram-id-row span {
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
}

.profile-id-row button {
    border: none;
    background: #ffffff;
    color: #0C73FE;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px #CFE6FF;
    cursor: pointer;
}

.telegram-id-row b {
    color: #0B1220;
    font-size: 14px;
}

.level-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.level-head span {
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
}

.level-head h2 {
    margin: 4px 0 0;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -1px;
    color: #0B1220;
}

.level-percent {
    min-width: 54px;
    height: 34px;
    border-radius: 999px;
    background: #EEF8FF;
    color: #0C73FE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
}

.level-progress {
    width: 100%;
    height: 12px;
    margin-top: 16px;
    border-radius: 999px;
    background: #EAF3FE;
    overflow: hidden;
}

.level-progress div {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #178bff, #0f62fe);
    transition: width 0.4s ease;
}

.level-card p {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.profile-stat-card {
    background: #ffffff;
    border: 1px solid #EAF3FE;
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.profile-stat-card span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.profile-stat-card b {
    font-size: 22px;
    color: #0B1220;
    letter-spacing: -0.5px;
}

.profile-section h2 {
    margin-top: 0;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.document-row {
    width: 100%;
    border: none;
    background: #F7FAFF;
    border: 1px solid #EAF3FE;
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0B1220;
    font-weight: 500;
    cursor: pointer;
}

.document-row span {
    font-size: 14px;
    font-weight: 500;
}

.document-row b {
    color: #0C73FE;
    font-size: 24px;
    line-height: 1;
}

.referral-card {
    background: #F7FAFF;
    border: 1px solid #EAF3FE;
    border-radius: 18px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.referral-card div {
    min-width: 0;
    flex: 1;
}

.referral-card span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.referral-card b {
    display: block;
    color: #0B1220;
    font-size: 13px;
    word-break: break-all;
}

.referral-card button {
    border: none;
    background: #0C73FE;
    color: white;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
}

.referral-note {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.35;
}

.referral-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.referral-mini-stats div {
    background: #F7FAFF;
    border: 1px solid #EAF3FE;
    border-radius: 18px;
    padding: 12px;
}

.referral-mini-stats span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.referral-mini-stats b {
    color: #0B1220;
    font-size: 20px;
    font-weight: 800;
}

.xp-history-card {
    margin-top: 12px;
    background: #F7FAFF;
    border: 1px solid #EAF3FE;
    border-radius: 18px;
    padding: 12px;
}

.xp-history-card > span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.xp-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xp-history-list p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.xp-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.xp-history-row b {
    color: #0C73FE;
    font-size: 13px;
    white-space: nowrap;
}

.xp-history-row span {
    color: #0B1220;
    font-size: 13px;
    text-align: right;
}

.level-perk-card,
.referrals-list-card {
    background: #F7FAFF;
    border: 1px solid #EAF3FE;
    border-radius: 18px;
    padding: 14px;
}

.level-perk-card span,
.referrals-list-card > span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.level-perk-card b {
    display: block;
    color: #0B1220;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
}

.level-perk-card p {
    margin: 0 0 8px;
    color: #0C73FE;
    font-size: 13px;
    font-weight: 700;
}

.level-perk-card small {
    color: #6b7280;
    font-size: 12px;
}

.referral-info-btn {
    margin-top: 12px;
}

.referrals-list-card {
    margin-top: 12px;
}

.referrals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.referrals-list p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.referral-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #EAF3FE;
}

.referral-user-row div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.referral-user-row b {
    color: #0B1220;
    font-size: 14px;
}

.referral-user-row span,
.referral-user-row small {
    color: #6b7280;
    font-size: 12px;
}

.referral-user-row strong {
    color: #0C73FE;
    font-size: 13px;
    white-space: nowrap;
}

#profile-ref-discount-expiry {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
}

.old-price {
    color: #94a3b8;
    text-decoration: line-through;
}

.summary-discount-row b {
    color: #0C73FE;
}

.summary-final-row b {
    color: #0C73FE;
    font-size: 18px;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.modal.hidden {
    display: none !important;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(6px);
}

.modal-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 28px 28px 0 0;
    padding: 20px 16px 24px;
    box-shadow: 0 -18px 40px rgba(15, 23, 42, 0.18);
    animation: modalUp 0.22s ease;
}

.modal-card h2 {
    margin-top: 0;
}

.modal-card p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.4;
}

.modal-rules {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-rules div {
    background: #F7FAFF;
    border: 1px solid #EAF3FE;
    border-radius: 16px;
    padding: 12px;
}

.modal-rules b {
    display: block;
    color: #0C73FE;
    font-size: 18px;
    margin-bottom: 4px;
}

.modal-rules span {
    color: #0B1220;
    font-size: 13px;
}

@keyframes modalUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.referral-card {
    flex-direction: column;
    align-items: stretch;
}

.referral-card button {
    width: 100%;
}

.referral-info-btn {
    margin-top: 12px;
}

.referrals-list-card {
    margin-top: 12px;
}

/* ===== CatalogPay Clear 2026: UI kit ===== */
.ui-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 16px;
}

.ui-card-soft {
    background: var(--cp-bg);
    border: 1px solid var(--cp-line);
    border-radius: var(--radius-md);
    padding: 14px;
}

.ui-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ui-title {
    margin: 0;
    color: var(--cp-dark);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.ui-subtitle {
    margin: 6px 0 0;
    color: var(--cp-muted);
    font-size: 14px;
    line-height: 1.35;
}

.ui-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--cp-soft);
    color: var(--cp-blue);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

.ui-button-primary,
.ui-button-secondary {
    width: 100%;
    height: 54px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: transform var(--transition-ui), box-shadow var(--transition-ui), opacity var(--transition-ui);
}

.ui-button-primary {
    background: linear-gradient(135deg, var(--cp-blue), var(--cp-blue-dark));
    color: #ffffff;
    box-shadow: var(--shadow-blue);
}

.ui-button-secondary {
    background: #ffffff;
    color: var(--cp-blue);
    box-shadow: inset 0 0 0 1px #CFE6FF;
}

.ui-button-primary:active,
.ui-button-secondary:active {
    transform: scale(0.97);
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 98px;
    transform: translateX(-50%) translateY(16px);
    z-index: 1200;
    min-width: 190px;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(11, 18, 32, 0.92);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body.keyboard-open .toast {
    bottom: 22px;
}


/* ================================
   Stage 2 — Home + Catalog Redesign
   ================================ */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 32px;
}

.logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    overflow: hidden; /* ВАЖНО — обрезает изображение */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f3ff;
}

.home-hero-redesign {
    position: relative;
    overflow: hidden;

    border-radius: 28px;

    padding: 20px 18px;

    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,0.18),
        transparent 34%),

        linear-gradient(
            135deg,
            var(--cp-blue),
            var(--cp-blue-dark)
        );

    box-shadow: 0 12px 26px rgba(12,115,254,0.22);

    color: white;
}

.home-hero-redesign h1 {
    margin: 0 0 6px;

    font-size: 26px;


    letter-spacing: -1.8px;
    line-height: 1;
}

.home-hero-redesign p {
    margin: 0;

    max-width: 260px;

    color: rgba(255,255,255,0.82);

    font-size: 14px;
    line-height: 1.35;
}


.search-box-redesign {
    height: 58px;
    margin: 14px 0 22px;
    border-color: var(--cp-line);
    border-radius: 22px;
    box-shadow: var(--shadow-card);
}

.search-box-redesign > span {
    color: var(--cp-blue);
    font-size: 24px;
    line-height: 1;
}

.home-section-redesign {
    margin-top: 22px;
}

.section-head-redesign {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 12px;
}

.section-head-redesign h2 {
    margin: 0;
    color: var(--cp-dark);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.7px;
}

.section-head-redesign p {
    margin: 4px 0 0;
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.35;
}

.section-head-redesign.compact {
    align-items: flex-start;
}

.section-link-button {
    border: none;
    min-width: 54px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--cp-soft);
    color: var(--cp-blue);
    font-weight: 900;
    cursor: pointer;
}

.popular-grid-redesign {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 14px;
}

.popular-card-redesign {
    min-height: 68px;

    padding: 10px 8px;

    border: 1px solid var(--cp-line);

    border-radius: 20px;

    background: white;

    box-shadow: var(--shadow-card);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    gap: 8px;
}

.popular-card-redesign .icon {
    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: var(--cp-bg);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 26px;
}

.popular-card-redesign strong {
    font-size: 13px;
    font-weight: 400;

    color: var(--cp-dark);

    line-height: 1.1;

    text-align: center;
}

.popular-card-redesign span {
    margin-top: 2px;

    font-size: 11px;

    color: var(--cp-muted);
}

.quick-action-card-redesign strong,
.quick-action-card-redesign span {
    display: block;
}

.quick-action-card-redesign strong {
    color: var(--cp-dark);
    font-size: 15px;
    font-weight: 900;
}

.quick-action-card-redesign span {
    margin-top: 3px;
    color: var(--cp-muted);
    font-size: 12px;
    line-height: 1.35;
}

.how-card-redesign {
    padding: 16px;
}

.steps-redesign {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.steps-redesign div {
    min-height: 88px;
    padding: 12px 8px;
    border-radius: 20px;
    background: var(--cp-bg);
    border: 1px solid var(--cp-line);
    text-align: center;
}

.steps-redesign b {
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--cp-blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.steps-redesign span {
    display: block;
    color: var(--cp-dark);
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

.all-services-section {
    margin-top: 22px;
}

.empty-state-redesign {
    border: 1px solid var(--cp-line);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    padding: 18px;
}

.empty-state-redesign b,
.empty-state-redesign span {
    display: block;
}

.empty-state-redesign b {
    color: var(--cp-dark);
    font-size: 16px;
    font-weight: 900;
}

.empty-state-redesign span {
    margin-top: 5px;
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.35;
}

/* ===============================
   Stage 3 — Tariffs + order flow
   =============================== */
.plans-hero-card {
    margin-top: 4px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 28px;
    background: linear-gradient(135deg, #ffffff 0%, var(--cp-bg) 100%);
    border: 1px solid var(--cp-line);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: 14px;
}

.plans-hero-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--cp-line);
    box-shadow: inset 0 0 0 1px rgba(12, 115, 254, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.plans-hero-card h1 {
    margin: 8px 0 2px;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -1.2px;
    color: var(--cp-dark);
}

.plans-hero-card .muted {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

.plans-list-redesign {
    gap: 12px;
}

.plan-card-redesign {
    position: relative;
    border: 1px solid var(--cp-line);
    border-radius: 26px;
    padding: 16px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.plan-card-redesign::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(135deg, rgba(12, 115, 254, 0.08), rgba(255,255,255,0));
    pointer-events: none;
    transition: opacity var(--transition-ui);
}

.plan-card-redesign.selected {
    border: 2px solid var(--cp-blue);
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(12, 115, 254, 0.15);
}

.plan-card-redesign.selected::after {
    opacity: 1;
}

.plan-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.plan-title-redesign {
    color: #0C73FE;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.35px;
}

.plan-radio {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    border: 2px solid #D7E8FF;
    background: #ffffff;
    box-shadow: inset 0 0 0 5px #ffffff;
    transition: var(--transition-ui);
}

.plan-card-redesign.selected .plan-radio {
    border-color: var(--cp-blue);
    background: var(--cp-blue);
}

.plan-description-redesign {
    margin-top: 2px;
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.35;
}

.plan-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid #EEF4FF;
}


.plan-card-bottom h2 {
    margin: 0;
    color: #0C73FE;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.45px;
}

.individual-plan-text {
    color: #0C73FE;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.plan-card-bottom span {
    color: var(--cp-blue);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.sticky-action-button {
    position: static;
    width: 100%;
    margin-top: 18px;
    margin-bottom: 8px;
}

.order-screen-redesign h1 {
    margin-top: 8px;
    font-size: 34px;
    letter-spacing: -1.6px;
    color: var(--cp-dark);
}

.order-form-redesign {
    gap: 12px;
}

.form-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 2px;
}

.form-step-title span {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--cp-blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(12, 115, 254, 0.22);
}

.form-step-title b {
    display: block;
    color: var(--cp-dark);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
}

.form-step-title small {
    display: block;
    color: var(--cp-muted);
    font-size: 12px;
    line-height: 1.25;
    margin-top: 2px;
}

.field-card-redesign {
    gap: 8px;
    padding: 0;
}

.field-card-redesign input,
.field-card-redesign textarea {
    border-radius: 22px;
    border-color: var(--cp-line);
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}

.instruction-card {
    border-radius: 22px;
    box-shadow: var(--shadow-card);
}

.instruction-check {
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.summary-card-redesign {
    border: 1px solid var(--cp-line);
    box-shadow: var(--shadow-card);
    border-radius: 28px;
}

.summary-card-redesign div {
    align-items: center;
}

.summary-card-redesign span {
    font-size: 13px;
    font-weight: 700;
}

.summary-card-redesign b {
    color: var(--cp-dark);
    text-align: right;
}

.summary-discount-row,
.summary-final-row {
    background: var(--cp-bg);
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.summary-discount-row {
    border-radius: 18px 18px 0 0;
    margin-top: 8px;
}

.summary-final-row {
    border-radius: 0 0 18px 18px;
}

.summary-final-row b {
    font-size: 22px;
    color: var(--cp-blue);
    letter-spacing: -0.5px;
}

.old-price {
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 800;
}


/* ===== Stage 4: Payment screen redesign ===== */
.payment-screen .muted {
    margin-bottom: 14px;
}

.payment-hero-card,
.payment-details-card,

.payment-hero-card {
    padding: 18px;
    margin-top: 10px;
    background:
        radial-gradient(circle at 90% 0%, rgba(12, 115, 254, 0.18), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #F7FAFF 100%);
}

.payment-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.payment-eyebrow {
    display: block;
    color: var(--cp-muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
}

.payment-hero-card h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--cp-dark);
}

.payment-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #FFF7DF;
    color: #A16207;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.payment-status-check {
    background: #FFF7DF;
    color: #A16207;
}

.payment-status-waiting {
    background: #FFF7DF;
    color: #A16207;
}

.payment-status-progress {
    background: #EEF5FF;
    color: var(--cp-blue);
}

.payment-status-success {
    background: #EAFBF1;
    color: #15803D;
}

.payment-status-error {
    background: #FFF1F2;
    color: #BE123C;
}

.payment-total-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 22px;
    background: var(--cp-blue);
    color: #ffffff;
    box-shadow: var(--shadow-blue);
}

.payment-total-box span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    opacity: 0.82;
    margin-bottom: 4px;
}

.payment-total-box b {
    font-size: 32px;
    line-height: 1;
    letter-spacing: -1px;
}

.payment-details-card {
    padding: 16px;
    margin-top: 14px;
}

.section-head-row h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.4px;
    color: var(--cp-dark);
}

.section-head-row p {
    margin: 5px 0 0;
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.35;
}

.payment-detail-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cp-line);
}

.payment-detail-row > span {
    display: block;
    margin-bottom: 8px;
    color: var(--cp-muted);
    font-size: 12px;
    font-weight: 800;
}

.payment-copy-box,
.payment-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: var(--cp-bg);
    border: 1px solid var(--cp-line);
}

.payment-copy-box b,
.payment-code-box b,
.payment-plain-value {
    min-width: 0;
    color: var(--cp-dark);
    font-size: 15px;
    font-weight: 900;
    word-break: break-word;
}

.payment-code-box b {
    color: var(--cp-blue);
    letter-spacing: 0.4px;
}

.payment-copy-box button,
.payment-code-box button {
    border: none;
    background: var(--cp-blue);
    color: #ffffff;
    border-radius: 14px;
    padding: 9px 11px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
}

.payment-comment-row small {
    display: block;
    margin-top: 8px;
    color: var(--cp-muted);
    font-size: 12px;
    line-height: 1.35;
}


.payment-status-box {
    margin-top: 14px;
    padding: 14px;
    border-radius: 20px;
    background: #EEF8FF;
    border: 1px solid var(--cp-line);
    color: #31577C;
    font-size: 13px;
    line-height: 1.4;
}

.payment-main-button {
    margin-top: 14px;
}


/* =========================
   Stage 5 — Profile Clear 2026
   ========================= */

.profile-back-btn {
    margin-bottom: 12px;
}

.profile-hero-card,
.profile-level-card,
.profile-referral-card,
.profile-xp-card,
.profile-legal-card {
    background: var(--cp-card, #ffffff);
    border: 1px solid var(--cp-soft, #EAF3FE);
    border-radius: 28px;
    padding: 16px;
    box-shadow: var(--shadow-card, 0 12px 30px rgba(15, 23, 42, 0.06));
    margin-bottom: 14px;
}

.profile-hero-card {
    background:
        radial-gradient(circle at top right, rgba(12, 115, 254, 0.10), transparent 38%),
        #ffffff;
}

.profile-hero-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.profile-avatar-xl {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 24px;
    font-size: 20px;
}

.profile-user-main {
    flex: 1;
}

.profile-kicker,
.profile-section-head span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 3px;
}

.profile-user-main h2 {
    font-size: 23px;
    margin: 0;
    color: var(--cp-dark, #0B1220);
    letter-spacing: -0.7px;
}

.profile-user-main p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
}

.profile-quick-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: 10px;
}

.profile-quick-item {
    background: var(--cp-bg, #F7FAFF);
    border: 1px solid var(--cp-soft, #EAF3FE);
    border-radius: 20px;
    padding: 13px;
    min-width: 0;
}

.profile-quick-item span,
.profile-tech-line span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    margin-bottom: 6px;
}

.profile-quick-item b {
    color: var(--cp-dark, #0B1220);
    font-size: 21px;
    letter-spacing: -0.5px;
}

.profile-code-item button {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.profile-code-item button b {
    display: block;
    color: var(--cp-blue, #0C73FE);
    font-size: 16px;
}

.profile-code-item button small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.profile-tech-line {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(247, 250, 255, 0.72);
    border: 1px solid var(--cp-soft, #EAF3FE);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-tech-line span {
    margin: 0;
}

.profile-tech-line b {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-level-card {
    background:
        linear-gradient(135deg, rgba(12, 115, 254, 0.08), rgba(255,255,255,0)),
        #ffffff;
}

.profile-level-head,
.profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.profile-level-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.profile-level-head h2 {
    margin: 2px 0 0;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--cp-dark, #0B1220);
}

.profile-level-perk {
    margin-top: 12px;
    padding: 12px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--cp-soft, #EAF3FE);
}

.profile-level-perk b {
    color: var(--cp-dark, #0B1220);
    font-size: 16px;
    letter-spacing: -0.2px;
}

.profile-level-perk p {
    margin: 4px 0 0;
    color: var(--cp-blue, #0C73FE);
    font-size: 13px;
    font-weight: 800;
}

.profile-level-footer {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-level-footer span {
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}

.profile-level-footer small {
    color: #94a3b8;
    font-size: 12px;
}

.profile-section-head h2 {
    margin: 0;
    color: var(--cp-dark, #0B1220);
    font-size: 20px;
    letter-spacing: -0.5px;
}

.profile-icon-action {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 15px;
    color: var(--cp-blue, #0C73FE);
    background: var(--cp-bg, #F7FAFF);
    box-shadow: inset 0 0 0 1px var(--cp-soft, #EAF3FE);
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
}

.profile-section-description {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.profile-ref-link-box {
    margin-top: 14px;
    background: var(--cp-bg, #F7FAFF);
    border: 1px solid var(--cp-soft, #EAF3FE);
    border-radius: 22px;
    padding: 13px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    align-items: center;
}

.profile-ref-link-box span {
    grid-column: 1 / -1;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.profile-ref-link-box b {
    min-width: 0;
    color: var(--cp-dark, #0B1220);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.profile-ref-link-box button {
    border: none;
    border-radius: 14px;
    padding: 9px 11px;
    color: #ffffff;
    background: var(--cp-blue, #0C73FE);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.profile-ref-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.profile-ref-stats > div {
    min-width: 0;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--cp-soft, #EAF3FE);
    padding: 12px;
}

.profile-ref-stats span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    margin-bottom: 6px;
}

.profile-ref-stats b {
    color: var(--cp-dark, #0B1220);
    font-size: 22px;
    letter-spacing: -0.5px;
}

.profile-ref-stats small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.25;
}

.profile-compact-list,
.profile-xp-card .xp-history-list,
.documents-list-compact {
    margin-top: 12px;
    background: var(--cp-bg, #F7FAFF);
    border: 1px solid var(--cp-soft, #EAF3FE);
    border-radius: 22px;
    padding: 12px;
}

.profile-compact-title {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 10px;
}

.profile-more-row {
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 14px;
    background: #ffffff;
    color: var(--cp-blue, #0C73FE);
    font-size: 12px;
    font-weight: 850;
    text-align: center;
    border: 1px solid var(--cp-soft, #EAF3FE);
}

.profile-xp-card .xp-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-xp-card .xp-history-row {
    background: #ffffff;
    border: 1px solid var(--cp-soft, #EAF3FE);
    border-radius: 16px;
    padding: 10px;
}

.profile-legal-card .legal-arrow {
    width: 38px;
    height: 38px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-blue, #0C73FE);
    background: var(--cp-bg, #F7FAFF);
    font-size: 25px;
    line-height: 1;
}

.documents-list-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.documents-list-compact .document-row {
    background: #ffffff;
    box-shadow: none;
}

/* Legacy profile blocks hidden by redesigned markup */
.profile-stats-grid {
    display: none;
}

/* Mobile safety for referral link */
@media (max-width: 370px) {
    .profile-ref-link-box {
        grid-template-columns: 1fr;
    }

    .profile-ref-link-box button {
        width: 100%;
    }

    .profile-quick-grid,
    .profile-ref-stats {
        grid-template-columns: 1fr;
    }
}


/* =========================
   Stage 6 — Orders + Support Clear 2026
   ========================= */

.screen-hero {
    margin-bottom: 16px;
}

.screen-hero-light {
    padding: 18px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(12, 115, 254, 0.10), transparent 38%),
        #ffffff;
    border: 1px solid var(--cp-soft, #EAF3FE);
    box-shadow: var(--shadow-card, 0 12px 30px rgba(15, 23, 42, 0.06));
}

.screen-kicker {
    display: block;
    color: var(--cp-blue, #0C73FE);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
}

.screen-hero h1,
.support-hero-card h1 {
    margin: 0;
    color: var(--cp-dark, #0B1220);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -1.4px;
}

.screen-hero p,
.support-hero-card p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.orders-list-modern {
    gap: 12px;
}

.order-card-modern {
    width: 100%;
    border: 1px solid var(--cp-soft, #EAF3FE);
    border-radius: 26px;
    padding: 15px;
    background: #ffffff;
    box-shadow: var(--shadow-card, 0 12px 30px rgba(15, 23, 42, 0.06));
    cursor: pointer;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.order-card-modern:active {
    transform: scale(0.985);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.order-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.order-card-head div {
    min-width: 0;
}

.order-card-head div span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}

.order-card-head div b {
    color: var(--cp-blue, #0C73FE);
    font-size: 15px;
    font-weight: 950;
    letter-spacing: -0.2px;
}

.order-card-body {
    margin-top: 14px;
}

.order-card-body h2 {
    margin: 0;
    color: var(--cp-dark, #0B1220);
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.order-card-body p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.35;
}

.order-card-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cp-soft, #EAF3FE);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.order-card-footer strong {
    color: var(--cp-dark, #0B1220);
    font-size: 20px;
    letter-spacing: -0.5px;
}

.order-card-footer small {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

.empty-state-card {
    background: #ffffff;
    border: 1px solid var(--cp-soft, #EAF3FE);
    border-radius: 30px;
    padding: 22px 16px;
    box-shadow: var(--shadow-card, 0 12px 30px rgba(15, 23, 42, 0.06));
    text-align: center;
}

.empty-state-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 22px;
    background: var(--cp-bg, #F7FAFF);
    border: 1px solid var(--cp-soft, #EAF3FE);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.empty-state-card h2 {
    margin: 0;
    color: var(--cp-dark, #0B1220);
    font-size: 21px;
    letter-spacing: -0.5px;
}

.empty-state-card p {
    margin: 8px 0 14px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.support-hero-card {
    padding: 18px;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(12, 115, 254, 0.09), rgba(255,255,255,0)),
        #ffffff;
    border: 1px solid var(--cp-soft, #EAF3FE);
    box-shadow: var(--shadow-card, 0 12px 30px rgba(15, 23, 42, 0.06));
    margin-bottom: 14px;
}

.support-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 22px;
    background: var(--cp-blue, #0C73FE);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: var(--shadow-blue, 0 14px 30px rgba(12, 115, 254, 0.30));
    margin-bottom: 14px;
}

.support-main-action {
    margin-top: 16px;
    width: 100%;
    min-height: 56px;
    border-radius: 20px;
    background: var(--cp-blue, #0C73FE);
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-blue, 0 14px 30px rgba(12, 115, 254, 0.30));
}

.support-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.support-info-card {
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--cp-soft, #EAF3FE);
    border-radius: 24px;
    padding: 14px;
    box-shadow: var(--shadow-card, 0 12px 30px rgba(15, 23, 42, 0.06));
}

.support-info-card span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.support-info-card b {
    display: block;
    margin-top: 6px;
    color: var(--cp-dark, #0B1220);
    font-size: 17px;
    letter-spacing: -0.4px;
}

.support-info-card p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.support-guide-card {
    background: #ffffff;
    border: 1px solid var(--cp-soft, #EAF3FE);
    border-radius: 28px;
    padding: 16px;
    box-shadow: var(--shadow-card, 0 12px 30px rgba(15, 23, 42, 0.06));
}

.support-guide-card h2 {
    margin: 0 0 12px;
    color: var(--cp-dark, #0B1220);
    font-size: 19px;
    letter-spacing: -0.5px;
}

.support-guide-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.support-guide-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: var(--cp-bg, #F7FAFF);
    border: 1px solid var(--cp-soft, #EAF3FE);
}

.support-guide-list b {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--cp-blue, #0C73FE);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.support-guide-list span {
    color: var(--cp-dark, #0B1220);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 370px) {
    .support-info-grid {
        grid-template-columns: 1fr;
    }
}
/* ===== Payment Mock / Future Payment Gateway Screen ===== */

.payment-ready-card,
.payment-method-card,
.payment-summary-card,
.payment-receipt-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-line);
    border-radius: 28px;
    box-shadow: var(--shadow-card);
}

.payment-ready-card {
    padding: 18px;
    margin-top: 10px;
    background:
        radial-gradient(circle at 90% 0%, rgba(12, 115, 254, 0.14), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #F7FAFF 100%);
}

.payment-ready-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.payment-ready-top h1 {
    margin: 0;
    color: var(--cp-dark);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -1px;
}

.payment-method-card {
    margin-top: 14px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.payment-method-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 18px;
    background: var(--cp-soft);
    color: var(--cp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.payment-method-card h2,
.payment-summary-card h2,
.payment-receipt-card h2 {
    margin: 0;
    color: var(--cp-dark);
    font-size: 18px;
    letter-spacing: -0.4px;
}

.payment-method-card p,
.payment-receipt-card p {
    margin: 6px 0 0;
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.4;
}

.payment-summary-card {
    margin-top: 14px;
    padding: 16px;
}

.payment-summary-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cp-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.payment-summary-row span {
    color: var(--cp-muted);
    font-size: 13px;
    font-weight: 700;
}

.payment-summary-row b {
    color: var(--cp-dark);
    font-size: 14px;
    font-weight: 800;
    text-align: right;
    word-break: break-word;
}

.payment-receipt-card {
    margin-top: 14px;
    padding: 16px;
}

.payment-receipt-card input {
    width: 100%;
    margin-top: 14px;
    border-radius: 20px;
    border: 1px solid var(--cp-line);
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}

.payment-status-box {
    margin-top: 14px;
    padding: 14px;
    border-radius: 20px;
    background: #EEF8FF;
    border: 1px solid var(--cp-line);
    color: #31577C;
    font-size: 13px;
    line-height: 1.45;
}

.payment-status-box b {
    color: var(--cp-dark);
}

.payment-main-button {
    margin-top: 14px;
}

.payment-status-success {
    background: #EAFBF1;
    color: #15803D;
}

.payment-status-waiting {
    background: #FFF7DF;
    color: #A16207;
}

/* ===== Admin Panel ===== */

.admin-hero-card {
    padding: 18px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(12, 115, 254, 0.12), transparent 38%),
        #ffffff;
    border: 1px solid var(--cp-soft);
    box-shadow: var(--shadow-card);
    margin-bottom: 14px;
}

.admin-hero-card h1 {
    margin: 0;
    color: var(--cp-dark);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -1.4px;
}

.admin-hero-card p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.admin-stats-grid div,
.admin-orders-section {
    background: #ffffff;
    border: 1px solid var(--cp-soft);
    border-radius: 24px;
    padding: 14px;
    box-shadow: var(--shadow-card);
}

.admin-stats-grid span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
}

.admin-stats-grid b {
    color: var(--cp-dark);
    font-size: 26px;
    letter-spacing: -0.8px;
}

.admin-orders-section {
    border-radius: 28px;
    padding: 16px;
}

.admin-filter-row {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.admin-filter-btn {
    border: none;
    white-space: nowrap;
    padding: 10px 13px;
    border-radius: 999px;
    background: var(--cp-bg);
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.admin-filter-btn.active {
    background: var(--cp-blue);
    color: #ffffff;
}

.admin-orders-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-order-card {
    width: 100%;
    border: 1px solid var(--cp-soft);
    border-radius: 22px;
    background: var(--cp-bg);
    padding: 13px;
    text-align: left;
    cursor: pointer;
}

.admin-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.admin-order-head div {
    min-width: 0;
}

.admin-order-head span {
    display: block;
    color: var(--cp-blue);
    font-size: 12px;
    font-weight: 950;
    margin-bottom: 4px;
}

.admin-order-head b {
    color: var(--cp-dark);
    font-size: 15px;
    line-height: 1.2;
}

.admin-order-card p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
}

.admin-order-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cp-soft);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.admin-order-footer strong {
    color: var(--cp-dark);
    font-size: 17px;
}

.admin-order-footer small {
    color: #64748b;
    font-size: 12px;
}

.admin-order-modal-card {
    max-height: 88vh;
    overflow-y: auto;
}

.admin-order-details {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-order-details div {
    padding: 12px;
    border-radius: 16px;
    background: var(--cp-bg);
    border: 1px solid var(--cp-soft);
}

.admin-order-details span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
}

.admin-order-details b {
    display: block;
    color: var(--cp-dark);
    font-size: 14px;
    line-height: 1.35;
    word-break: break-word;
}

.admin-status-actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.admin-status-actions button {
    width: 100%;
    border: none;
    border-radius: 16px;
    padding: 13px;
    background: var(--cp-bg);
    color: var(--cp-blue);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.admin-order-page-section {
    background: #ffffff;
    border: 1px solid var(--cp-soft);
    border-radius: 28px;
    padding: 16px;
    box-shadow: var(--shadow-card);
    margin-bottom: 14px;
}

.admin-order-page-section h2 {
    margin: 0 0 12px;
    color: var(--cp-dark);
    font-size: 18px;
    letter-spacing: -0.4px;
}

.admin-contact-user-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-user-chat-button {
    width: 100%;

    min-height: 48px;

    border-radius: 18px;

    background: linear-gradient(135deg, #178bff, #0f62fe);

    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    box-shadow: 0 12px 24px rgba(15, 98, 254, 0.24);

    transition: 0.2s ease;
}

.admin-user-chat-button:active {
    transform: scale(0.98);
}

.admin-broadcast-open-btn {
    margin-bottom: 10px;
    width: 100%;

    min-height: 54px;

    border: none;

    border-radius: 20px;

    background: linear-gradient(135deg, #178bff, #0f62fe);

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    box-shadow: 0 14px 30px rgba(15, 98, 254, 0.22);
}
.admin-promo-open-btn {
    margin-bottom: 16px;
    width: 100%;

    min-height: 54px;

    border: none;

    border-radius: 20px;

    background: linear-gradient(135deg, #178bff, #0f62fe);

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    box-shadow: 0 14px 30px rgba(15, 98, 254, 0.22);
}
.admin-send-broadcast-btn {
    width: 100%;

    min-height: 54px;

    border: none;

    border-radius: 20px;

    background: linear-gradient(135deg, #178bff, #0f62fe);

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    box-shadow: 0 14px 30px rgba(15, 98, 254, 0.22);
}

.admin-broadcast-textarea {
    width: 100%;

    min-height: 180px;

    resize: none;

    border: 1px solid var(--cp-soft);

    border-radius: 24px;

    padding: 18px;

    font-size: 15px;

    background: #ffffff;

    color: var(--cp-dark);

    margin-bottom: 16px;

    outline: none;
}

.admin-send-promo-btn {
    width: 100%;
    min-height: 54px;
    margin-top: 18px;

    border: none;
    border-radius: 20px;

    background: linear-gradient(135deg, #178bff, #0f62fe);
    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    box-shadow: 0 14px 30px rgba(15, 98, 254, 0.22);
    cursor: pointer;
}

.admin-send-promo-btn:active {
    transform: scale(0.98);
}

.payment-old-price {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    font-weight: 700;
    text-decoration: line-through;
}

.payment-discount-badge {
    margin-top: 9px;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

.payment-legal-text {
    margin-top: 12px;
    padding: 0 6px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.legal-inline-link {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--cp-blue);
    font-size: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.legal-document-card {
    background: #ffffff;
    border: 1px solid var(--cp-soft);
    border-radius: 28px;
    padding: 18px;
    box-shadow: var(--shadow-card);
}

.legal-document-card h1 {
    margin: 0 0 16px;
    color: var(--cp-dark);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -1px;
}

.legal-document-content h2 {
    margin: 20px 0 8px;
    color: var(--cp-dark);
    font-size: 17px;
    line-height: 1.2;
}

.legal-document-content p,
.legal-document-content li {
    color: #475569;
    font-size: 14px;
    line-height: 1.55;
}

.legal-document-content p {
    margin: 0 0 12px;
}

.legal-document-content ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.legal-document-content li {
    margin-bottom: 6px;
}