:root {
    --blue: #165dff;
    --blue-dark: #0d3f9f;
    --gold: #bc8a22;
    --gold-soft: #fff8e8;
    --ink: #111827;
    --muted: #667085;
    --line: #e7edf5;
    --soft: #f7f9fc;
    --panel: #ffffff;
    --shadow: 0 26px 80px rgba(22, 45, 86, .13);
    --shadow-soft: 0 16px 46px rgba(23, 52, 96, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: #fbfcff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p { color: var(--muted); line-height: 1.8; margin: 0; }

.container {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(214, 224, 238, .72);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.nav-wrap {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: 0;
    color: var(--blue);
}

.brand-mark {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .22), transparent),
        linear-gradient(135deg, var(--blue), #20b7d8);
    box-shadow: 0 12px 26px rgba(22, 93, 255, .22);
}

.brand-mark {
    position: relative;
    color: transparent;
    overflow: visible;
    text-indent: -999px;
    background: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%230d7bff'/%3E%3Cstop offset='1' stop-color='%231645dd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='18,2 30,9 30,22 18,29 6,22 6,9' fill='url(%23g)'/%3E%3Cpolygon points='7,22 18,29 18,36 7,29 1,25 1,18' fill='%23165dff'/%3E%3Cpolygon points='19,29 31,22 37,25 37,32 25,38 19,35' fill='%230b73ff'/%3E%3Cpath d='M18 2l12 7-12 7L6 9 18 2z' fill='%233c91ff' opacity='.9'/%3E%3C/svg%3E") center / 34px 34px no-repeat;
    box-shadow: none;
    border-radius: 0;
}

.brand-mark:before {
    content: none;
}

.brand-mark:after {
    content: none;
}

.main-nav {
    display: flex;
    gap: 26px;
    color: #344054;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover { color: var(--blue); }

.main-nav a {
    position: relative;
    min-height: 72px;
    display: inline-flex;
    align-items: center;
}

.main-nav a.active {
    color: var(--blue);
    font-weight: 800;
}

.main-nav a.active:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--blue);
    transform: translateX(-50%);
}

.nav-actions,
.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.primary-btn,
.outline-btn,
.ghost-btn {
    min-height: 48px;
    padding: 0 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    font-family: inherit;
}

.primary-btn {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0877ff);
    box-shadow: 0 14px 30px rgba(22, 93, 255, .25);
}

.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(22, 93, 255, .3);
}

.primary-btn:disabled,
.outline-btn:disabled {
    cursor: not-allowed;
    opacity: .62;
    transform: none;
    box-shadow: none;
}

.primary-btn.small,
.outline-btn.small {
    min-height: 38px;
    padding: 0 16px;
    font-size: 14px;
}

.outline-btn {
    color: var(--ink);
    background: #fff;
    border-color: var(--line);
    box-shadow: 0 10px 28px rgba(16, 24, 40, .05);
}

.outline-btn.danger {
    color: #b42318;
    border-color: #fecdca;
    background: #fff5f5;
}

.ghost-btn {
    min-height: 38px;
    padding: 0 14px;
    color: #475467;
    background: transparent;
}

.ghost-btn.danger-link {
    color: #b42318;
}

.block { width: 100%; }

.hero {
    position: relative;
    overflow: hidden;
    padding: 44px 0 24px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .96) 46%, rgba(239, 246, 255, .96) 100%),
        linear-gradient(180deg, #fff 0%, #f7faff 100%);
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .34;
    background-image:
        linear-gradient(rgba(23, 105, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 105, 255, .07) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: .84fr 1.16fr;
    gap: 58px;
    align-items: center;
}

.eyebrow,
.page-hero span,
.section-title span {
    color: var(--blue);
    font-weight: 800;
    font-size: 14px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border: 1px solid #d8e6ff;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 32px rgba(22, 93, 255, .08);
}

.eyebrow span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
}

.hero h1 {
    margin: 24px 0 20px;
    font-size: clamp(42px, 4.6vw, 64px);
    line-height: 1.06;
    letter-spacing: 0;
    font-weight: 900;
    color: #0c1426;
}

.hero h1 span {
    color: transparent;
    background: linear-gradient(95deg, #111827, #165dff 54%, #a97516);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-lead {
    max-width: 570px;
    font-size: 17px;
    line-height: 1.9;
}

.hero-price {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin: 28px 0 26px;
}

.hero-price strong {
    color: var(--gold);
    font-size: 40px;
    line-height: 1;
}

.hero-price span {
    color: var(--muted);
    padding-bottom: 6px;
}

.hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 560px;
    margin-top: 24px;
}

.hero-proof div {
    min-height: 74px;
    padding: 14px 15px;
    border: 1px solid rgba(214, 224, 238, .92);
    border-radius: 12px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 14px 34px rgba(20, 36, 72, .06);
}

.hero-proof strong,
.hero-proof span {
    display: block;
}

.hero-proof strong {
    font-size: 15px;
}

.hero-proof span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

.product-visual {
    position: relative;
    min-height: 468px;
    perspective: 1200px;
}

.visual-badge {
    position: absolute;
    z-index: 3;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 800;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow);
    border: 1px solid rgba(231, 237, 245, .86);
}

.visual-badge.gold {
    top: 18px;
    right: 18px;
    color: #8b651c;
    background: var(--gold-soft);
}

.visual-badge.blue {
    bottom: 36px;
    left: -20px;
    color: var(--blue-dark);
}

.app-window {
    position: absolute;
    inset: 46px 0 18px 4px;
    overflow: hidden;
    border: 1px solid rgba(177, 196, 225, .42);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 34px 100px rgba(25, 47, 89, .18);
    transform: rotateY(-5deg) rotateX(1deg);
    transform-origin: center;
}

.window-top {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    background: linear-gradient(180deg, #fff, #f9fbff);
    border-bottom: 1px solid var(--line);
}

.window-top span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d5dd;
}

.window-top b {
    margin-left: 10px;
    color: #344054;
}

.window-top em {
    margin-left: auto;
    color: #1f7a3a;
    padding: 7px 10px;
    border-radius: 999px;
    background: #edfdf3;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.window-body {
    display: grid;
    grid-template-columns: 94px 1fr;
    min-height: 370px;
}

.window-body aside {
    padding: 26px 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), transparent),
        #111827;
}

.window-body aside i {
    display: block;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
}

.window-body aside i.active {
    background: linear-gradient(135deg, var(--blue), #20b7d8);
    box-shadow: 0 12px 22px rgba(22, 93, 255, .28);
}

.window-body section {
    padding: 24px;
    background:
        linear-gradient(180deg, #fbfcff, #f4f7fb);
}

.dashboard-head,
.metric-grid,
.chart-card,
.workflow-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(32, 56, 104, .06);
}

.dashboard-head {
    display: flex;
    justify-content: space-between;
    padding: 17px 20px;
}

.dashboard-head small,
.metric-grid span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-head strong {
    display: block;
    margin-top: 4px;
    font-size: 26px;
}

.dashboard-head button {
    border: 0;
    color: #fff;
    border-radius: 10px;
    padding: 0 18px;
    background: linear-gradient(135deg, var(--blue), #0877ff);
    font-weight: 800;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 12px 0;
    padding: 14px;
}

.metric-grid strong {
    display: block;
    margin-top: 8px;
    font-size: 22px;
}

.workflow-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
}

.workflow-card div {
    padding: 12px;
    border-radius: 12px;
    background: #f8fbff;
}

.workflow-card b {
    display: block;
    font-size: 14px;
}

.workflow-card span {
    display: block;
    height: 7px;
    margin-top: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), rgba(22, 93, 255, .12));
}

.chart-card {
    position: relative;
    height: 96px;
    padding: 18px;
}

.chart-line {
    height: 58px;
    border-radius: 50%;
    border-top: 5px solid #165dff;
    transform: translateY(24px) skewX(-8deg);
}

.bars {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    display: flex;
    align-items: end;
    gap: 10px;
}

.bars i {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #c7d9ff, #165dff);
}

.bars i:nth-child(1) { height: 30px; }
.bars i:nth-child(2) { height: 62px; }
.bars i:nth-child(3) { height: 44px; }
.bars i:nth-child(4) { height: 86px; }
.bars i:nth-child(5) { height: 56px; }

.mini-card {
    position: absolute;
    z-index: 4;
    padding: 15px 17px;
    border: 1px solid rgba(225, 232, 243, .9);
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow);
}

.mini-card b,
.mini-card span {
    display: block;
}

.mini-card b {
    font-size: 15px;
}

.mini-card span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

.mini-card-agent {
    right: -4px;
    bottom: 14px;
}

.section {
    padding: 88px 0;
    background: #fff;
}

.hero + .section {
    padding-top: 34px;
}

.section.soft { background: var(--soft); }

.section-title {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.section-title.left {
    margin-left: 0;
    text-align: left;
}

.section-title h2 {
    margin: 10px 0 0;
    font-size: 38px;
    line-height: 1.25;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-card,
.panel,
.spec-card,
.checkout-card,
.order-card,
.tutorial-card,
.news-card,
.prose-card,
.contact-card,
.form-card,
.agent-query-card,
.agent-help,
.center-panel,
.center-cards article {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

.feature-card {
    min-height: 210px;
    padding: 28px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(22, 93, 255, .22);
    box-shadow: 0 24px 56px rgba(22, 45, 86, .12);
}

.feature-card h3 {
    margin: 18px 0 10px;
    font-size: 20px;
}

.icon-dot {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .32), transparent),
        linear-gradient(135deg, var(--blue), var(--gold));
    box-shadow: 0 14px 30px rgba(22, 93, 255, .18);
}

.module-grid {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 20px;
}

.panel {
    min-height: 280px;
    padding: 28px;
    border-radius: 16px;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.panel-head span {
    color: var(--muted);
    font-size: 14px;
}

.panel-head b {
    color: #8b651c;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--gold-soft);
    font-size: 13px;
}

.lesson {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.lesson:first-of-type { border-top: 0; }
.lesson div { flex: 1; }
.lesson strong,
.lesson small {
    display: block;
}

.lesson small {
    color: var(--muted);
    margin-top: 4px;
}

.lesson em {
    color: var(--muted);
    font-size: 13px;
    font-style: normal;
}

.play-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    color: var(--blue);
    border-radius: 50%;
    background: #eef4ff;
    font-size: 12px;
}

.agent-mini h3 { margin: 8px 0 10px; font-size: 28px; }

.inline-search,
.agent-search {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

input,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 14px;
    color: var(--ink);
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

input { height: 46px; }
textarea {
    min-height: 112px;
    padding-top: 12px;
    resize: vertical;
}

input:focus,
textarea:focus {
    box-shadow: none;
}

.inline-search button {
    width: 86px;
    border: 0;
    color: #fff;
    border-radius: 8px;
    background: var(--blue);
    font-weight: 700;
}

.log-item {
    padding: 15px 0;
    border-top: 1px solid var(--line);
}

.log-item:first-of-type { border-top: 0; }
.log-item time,
.news-link span,
.news-card time {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.log-item strong {
    display: block;
    margin: 5px 0;
}

.news-link {
    display: block;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.news-link:first-of-type { border-top: 0; }
.news-link strong { display: block; margin-top: 6px; }

.cta-band {
    padding: 74px 0;
    background: linear-gradient(135deg, #0f172a, #123c84);
    color: #fff;
}

.cta-inner {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}

.cta-inner span {
    color: #d7e6ff;
    font-weight: 800;
}

.cta-inner h2 {
    margin: 12px 0 8px;
    font-size: 38px;
}

.cta-inner p { color: #d8e3f8; }

.site-footer {
    padding: 0;
    background: #071326;
    color: #fff;
}

.site-footer p,
.site-footer a,
.footer-bottom {
    color: #a8b3c7;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 34px;
}

.footer-grid h3 {
    margin: 0 0 14px;
    font-size: 16px;
}

.footer-grid a {
    display: block;
    margin: 10px 0;
}

.footer-brand { margin-bottom: 14px; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
}

/* Final public footer based on the approved mockup. */
.site-footer {
    position: relative;
    margin-top: 0;
    background: transparent;
}

.footer-service-strip {
    padding: 18px 0;
    border-top: 1px solid #dce7f6;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.footer-service-strip .container {
    width: calc(100% - 112px);
    max-width: 1398px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0 auto;
}

.footer-service-strip article {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px 18px;
    border: 1px solid #dbe7f7;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(22, 45, 86, .055);
}

.footer-service-strip b {
    display: block;
    color: #071a3a;
    font-size: 16px;
    line-height: 1.2;
}

.footer-service-strip span {
    display: block;
    margin-top: 6px;
    color: #65758f;
    font-size: 13px;
    line-height: 1.2;
}

.footer-icon {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .42), transparent 32%),
        linear-gradient(135deg, #1260f6, #4d95ff);
    box-shadow: 0 12px 24px rgba(18, 96, 246, .18);
}

.footer-icon.agent {
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .42), transparent 32%),
        linear-gradient(135deg, #d39a18, #f0c65a);
    box-shadow: 0 12px 24px rgba(198, 145, 32, .18);
}

.footer-icon:before,
.footer-icon:after {
    content: "";
    position: absolute;
}

.footer-icon.official:before {
    left: 12px;
    top: 9px;
    width: 20px;
    height: 24px;
    border: 2.4px solid #fff;
    clip-path: polygon(50% 0, 100% 20%, 100% 72%, 50% 100%, 0 72%, 0 20%);
}

.footer-icon.official:after {
    left: 16px;
    top: 22px;
    width: 12px;
    height: 6px;
    border-left: 2.6px solid #fff;
    border-bottom: 2.6px solid #fff;
    transform: rotate(-45deg);
}

.footer-icon.update:before {
    left: 11px;
    top: 11px;
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-left-color: transparent;
    border-radius: 50%;
}

.footer-icon.update:after {
    right: 8px;
    top: 10px;
    width: 9px;
    height: 9px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-20deg);
}

.footer-icon.tutorial:before {
    left: 11px;
    top: 10px;
    width: 22px;
    height: 24px;
    border: 2.6px solid #fff;
    border-radius: 5px;
}

.footer-icon.tutorial:after {
    left: 19px;
    top: 17px;
    border-left: 10px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.footer-icon.agent:before {
    left: 12px;
    top: 9px;
    width: 20px;
    height: 24px;
    border: 2.4px solid #fff;
    clip-path: polygon(50% 0, 100% 20%, 100% 72%, 50% 100%, 0 72%, 0 20%);
}

.footer-icon.agent:after {
    left: 17px;
    top: 17px;
    width: 10px;
    height: 10px;
    border: 2.6px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 0 -4px #fff;
}

.footer-main {
    padding: 50px 0 24px;
    background:
        radial-gradient(circle at 12% 6%, rgba(18, 96, 246, .12), transparent 260px),
        linear-gradient(180deg, #071326 0%, #07111f 100%);
}

.footer-main .container {
    width: calc(100% - 112px);
    max-width: 1398px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.52fr .82fr .82fr 1.16fr;
    gap: 68px;
    align-items: start;
}

.footer-grid h3 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 900;
}

.footer-grid a,
.footer-grid p {
    color: #9aa9bf;
    font-size: 15px;
    line-height: 1.9;
}

.footer-grid a {
    display: block;
    width: fit-content;
    margin: 8px 0;
    transition: color .18s ease, transform .18s ease;
}

.footer-grid a:hover {
    color: #ffffff;
    transform: translateX(2px);
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #ffffff;
}

.footer-brand .brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.footer-brand .brand-text {
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

.footer-brand-col p {
    max-width: 330px;
}

.footer-service-link {
    margin-top: 6px !important;
    color: #d7e6ff !important;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 38px;
    padding-top: 22px;
    color: #7f8da5;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
}

.footer-bottom span {
    display: inline-flex;
    align-items: center;
    gap: 22px;
}

.footer-bottom a {
    color: #9aa9bf;
}

.footer-bottom a:hover {
    color: #ffffff;
}

@media (max-width: 1320px) {
    .footer-service-strip .container,
    .footer-main .container {
        width: calc(100% - 48px);
    }

    .footer-grid {
        gap: 42px;
    }
}

/* Exact public footer correction: match the approved image more closely. */
.site-footer .footer-service-strip {
    padding: 60px 0 43px;
    border-top: 0;
    background:
        radial-gradient(circle at 50% 28%, rgba(18, 96, 246, .045), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.site-footer .footer-service-panel {
    width: calc(100% - 264px);
    max-width: 1780px;
    min-height: 142px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    align-items: center;
    padding: 0;
    border: 1px solid #cfe0ff;
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 20px 54px rgba(22, 45, 86, .06);
}

.site-footer .footer-service-panel article {
    position: relative;
    min-height: 104px;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 0 74px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-footer .footer-service-panel article + article:before {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    bottom: 19px;
    width: 1px;
    background: #dce6f5;
}

.site-footer .footer-service-strip b {
    color: #071a3a;
    font-size: 26px;
    line-height: 1.12;
    font-weight: 900;
}

.site-footer .footer-service-strip span {
    margin-top: 10px;
    color: #596a84;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.site-footer .footer-icon {
    width: 64px;
    height: 64px;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.site-footer .footer-icon.official:before,
.site-footer .footer-icon.agent:before {
    left: 9px;
    top: 3px;
    width: 44px;
    height: 52px;
    border: 4px solid #1260f6;
    border-radius: 0;
    clip-path: polygon(50% 0, 95% 18%, 95% 66%, 50% 100%, 5% 66%, 5% 18%);
}

.site-footer .footer-icon.official:after {
    left: 22px;
    top: 26px;
    width: 21px;
    height: 11px;
    border-left: 5px solid #1260f6;
    border-bottom: 5px solid #1260f6;
    transform: rotate(-45deg);
}

.site-footer .footer-icon.update:before {
    left: 9px;
    top: 10px;
    width: 42px;
    height: 42px;
    border: 5px solid #1260f6;
    border-left-color: transparent;
    border-radius: 50%;
}

.site-footer .footer-icon.update:after {
    right: 4px;
    top: 8px;
    width: 16px;
    height: 16px;
    border-right: 5px solid #1260f6;
    border-bottom: 5px solid #1260f6;
    transform: rotate(-18deg);
}

.site-footer .footer-icon.update {
    color: #bc8a22;
}

.site-footer .footer-icon.update i {
    display: none;
}

.site-footer .footer-icon.tutorial:before {
    left: 6px;
    top: 11px;
    width: 50px;
    height: 34px;
    border: 5px solid #1260f6;
    border-radius: 6px 6px 8px 8px;
    transform: skewY(-1deg);
}

.site-footer .footer-icon.tutorial:after {
    left: 16px;
    top: 43px;
    width: 31px;
    height: 18px;
    border-left: 5px solid #bc8a22;
    border-bottom: 5px solid #bc8a22;
    border-right: 0;
    border-top: 0;
    transform: skewX(-18deg);
}

.site-footer .footer-icon.agent:before {
    border-color: #1260f6;
}

.site-footer .footer-icon.agent:after {
    left: 20px;
    top: 18px;
    width: 24px;
    height: 24px;
    border: 4px solid #bc8a22;
    border-radius: 50%;
    box-shadow: none;
}

.site-footer .footer-main {
    min-height: 521px;
    padding: 64px 0 0;
    background:
        radial-gradient(circle at 9% 28%, rgba(22, 93, 255, .17), transparent 300px),
        radial-gradient(circle at 74% 10%, rgba(22, 93, 255, .1), transparent 360px),
        linear-gradient(180deg, #061833 0%, #071326 58%, #061121 100%);
}

.site-footer .footer-main .container {
    width: calc(100% - 264px);
    max-width: 1780px;
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.18fr .86fr .86fr 1.08fr;
    gap: 0;
    min-height: 276px;
    align-items: start;
}

.site-footer .footer-grid > div {
    min-height: 202px;
}

.site-footer .footer-grid > div + div {
    border-left: 1px solid rgba(151, 170, 203, .18);
    padding-left: 64px;
}

.site-footer .footer-brand {
    gap: 22px;
    margin-bottom: 31px;
}

.site-footer .footer-brand .brand-mark {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    background-size: 72px 72px;
}

.site-footer .footer-brand .brand-text {
    color: #ffffff;
    font-size: 45px;
    line-height: 1;
    font-weight: 900;
}

.site-footer .footer-brand-col p {
    max-width: 470px;
    color: #98a8c2;
    font-size: 21px;
    line-height: 1.7;
}

.site-footer .footer-socials {
    display: flex;
    gap: 24px;
    margin-top: 34px;
}

.site-footer .footer-social {
    position: relative;
    display: block;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(144, 165, 198, .32);
    border-radius: 11px;
    background-color: rgba(255, 255, 255, .03);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 34px 34px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.site-footer .footer-social.telegram {
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29 7 5.8 16.1c-1.6.6-1.5 2.6.2 3.1l6 1.9 2.2 6.7c.5 1.5 2.3 1.7 3.2.4l3.5-5 6.3 4.6c1.3.9 2.9.2 3.2-1.3L33 8.8C33.3 7.4 31.9 6.4 29 7Z' stroke='%23b5c4dc' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='m12.2 21 11.3-7.8-8.5 9.4' stroke='%23b5c4dc' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.site-footer .footer-social.email {
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5.5' y='9' width='23' height='16' rx='3.5' stroke='%23b5c4dc' stroke-width='2.8'/%3E%3Cpath d='m7.6 11.1 8.2 6.8c1.1.9 2.7.9 3.8 0l8-6.8' stroke='%23b5c4dc' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.site-footer .footer-social.support {
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 18v-2.5a9.8 9.8 0 0 1 19.6 0V18' stroke='%23b5c4dc' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M7.2 18h4.1c.8 0 1.5.7 1.5 1.5v5c0 .8-.7 1.5-1.5 1.5H8.7c-.8 0-1.5-.7-1.5-1.5V18ZM26.8 18h-4.1c-.8 0-1.5.7-1.5 1.5v5c0 .8.7 1.5 1.5 1.5h2.6c.8 0 1.5-.7 1.5-1.5V18Z' stroke='%23b5c4dc' stroke-width='2.8'/%3E%3Cpath d='M22 26c-1.2 1.2-2.8 1.8-5 1.8' stroke='%23b5c4dc' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.site-footer .footer-grid h3 {
    position: relative;
    margin: 0 0 42px;
    color: #ffffff;
    font-size: 29px;
    line-height: 1.15;
    font-weight: 900;
}

.site-footer .footer-grid h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -22px;
    width: 36px;
    height: 5px;
    border-radius: 999px;
    background: #1260f6;
}

.site-footer .footer-link-col a {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0;
    padding: 0 34px 0 0;
    color: #aebbd0;
    font-size: 24px;
    line-height: 2.12;
    font-weight: 650;
}

.site-footer .footer-link-col a:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 3px solid #9dafc8;
    border-bottom: 3px solid #9dafc8;
    transform: translateY(-50%) rotate(-45deg);
}

.site-footer .footer-link-col a:hover:after {
    border-color: #ffffff;
}

.site-footer .footer-contact-col p,
.site-footer .footer-service-link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    gap: 14px;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 0 0 28px !important;
    color: #aebbd0 !important;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 650;
}

.site-footer .footer-service-link {
    color: #aebbd0 !important;
}

.site-footer .footer-service-link span {
    color: #1984ff;
}

.site-footer .footer-service-link em {
    width: 18px;
    height: 18px;
    border: 3px solid #1984ff;
    border-left: 0;
    border-bottom: 0;
    transform: translateY(-1px);
}

.site-footer .footer-contact-icon {
    display: block;
    width: 34px;
    height: 34px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 34px 34px;
}

.site-footer .footer-contact-icon.email {
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5.5' y='9' width='23' height='16' rx='3.5' stroke='%23b5c4dc' stroke-width='2.8'/%3E%3Cpath d='m7.6 11.1 8.2 6.8c1.1.9 2.7.9 3.8 0l8-6.8' stroke='%23b5c4dc' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.site-footer .footer-contact-icon.telegram {
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29 7 5.8 16.1c-1.6.6-1.5 2.6.2 3.1l6 1.9 2.2 6.7c.5 1.5 2.3 1.7 3.2.4l3.5-5 6.3 4.6c1.3.9 2.9.2 3.2-1.3L33 8.8C33.3 7.4 31.9 6.4 29 7Z' stroke='%23b5c4dc' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='m12.2 21 11.3-7.8-8.5 9.4' stroke='%23b5c4dc' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.site-footer .footer-contact-icon.support {
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 18v-2.5a9.8 9.8 0 0 1 19.6 0V18' stroke='%23b5c4dc' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M7.2 18h4.1c.8 0 1.5.7 1.5 1.5v5c0 .8-.7 1.5-1.5 1.5H8.7c-.8 0-1.5-.7-1.5-1.5V18ZM26.8 18h-4.1c-.8 0-1.5.7-1.5 1.5v5c0 .8.7 1.5 1.5 1.5h2.6c.8 0 1.5-.7 1.5-1.5V18Z' stroke='%23b5c4dc' stroke-width='2.8'/%3E%3Cpath d='M22 26c-1.2 1.2-2.8 1.8-5 1.8' stroke='%23b5c4dc' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.site-footer .footer-bottom {
    min-height: 121px;
    margin-top: 33px;
    padding-top: 0;
    color: #8e9bb2;
    border-top: 1px solid rgba(255, 255, 255, .11);
    font-size: 21px;
}

.site-footer .footer-bottom a {
    color: #9faec4;
    font-size: 22px;
}

.site-footer .footer-bottom span:last-child {
    gap: 48px;
}

@media (max-width: 1320px) {
    .site-footer .footer-service-panel,
    .site-footer .footer-main .container {
        width: calc(100% - 112px);
    }

    .site-footer .footer-service-panel article {
        padding: 0 44px;
    }

    .site-footer .footer-grid > div + div {
        padding-left: 42px;
    }

    .site-footer .footer-link-col a,
    .site-footer .footer-contact-col p,
    .site-footer .footer-service-link {
        font-size: 21px;
    }
}

/* Desktop scaled footer final pass: same composition as mockup, fitted to the real site width. */
.site-footer .footer-service-strip {
    padding: 40px 0 30px;
}

.site-footer .footer-service-panel {
    width: calc(100% - 184px);
    min-height: 100px;
    border-radius: 14px;
}

.site-footer .footer-service-panel article {
    min-height: 78px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    padding: 0 44px;
}

.site-footer .footer-service-panel article + article:before {
    top: 17px;
    bottom: 17px;
}

.site-footer .footer-service-strip b {
    font-size: 18px;
    white-space: nowrap;
}

.site-footer .footer-service-strip span {
    margin-top: 6px;
    font-size: 13px;
}

.site-footer .footer-icon {
    width: 46px;
    height: 46px;
}

.site-footer .footer-icon.official:before,
.site-footer .footer-icon.agent:before {
    left: 7px;
    top: 2px;
    width: 32px;
    height: 38px;
    border-width: 3px;
}

.site-footer .footer-icon.official:after {
    left: 16px;
    top: 19px;
    width: 16px;
    height: 8px;
    border-left-width: 3.5px;
    border-bottom-width: 3.5px;
}

.site-footer .footer-icon.update:before {
    left: 6px;
    top: 7px;
    width: 32px;
    height: 32px;
    border-width: 3.5px;
}

.site-footer .footer-icon.update:after {
    right: 2px;
    top: 6px;
    width: 11px;
    height: 11px;
    border-right-width: 3.5px;
    border-bottom-width: 3.5px;
}

.site-footer .footer-icon.tutorial:before {
    left: 4px;
    top: 8px;
    width: 37px;
    height: 25px;
    border-width: 3.5px;
}

.site-footer .footer-icon.tutorial:after {
    left: 12px;
    top: 31px;
    width: 23px;
    height: 13px;
    border-left-width: 3.5px;
    border-bottom-width: 3.5px;
}

.site-footer .footer-icon.agent:after {
    left: 14px;
    top: 12px;
    width: 18px;
    height: 18px;
    border-width: 3px;
}

.site-footer .footer-main {
    min-height: 364px;
    padding: 46px 0 0;
}

.site-footer .footer-main .container {
    width: calc(100% - 184px);
}

.site-footer .footer-grid {
    min-height: 198px;
}

.site-footer .footer-grid > div {
    min-height: 148px;
}

.site-footer .footer-grid > div + div {
    padding-left: 48px;
}

.site-footer .footer-brand {
    gap: 16px;
    margin-bottom: 22px;
}

.site-footer .footer-brand .brand-mark {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    background-size: 52px 52px;
}

.site-footer .footer-brand .brand-text {
    font-size: 32px;
}

.site-footer .footer-brand-col p {
    max-width: 340px;
    font-size: 15px;
}

.site-footer .footer-socials {
    gap: 16px;
    margin-top: 24px;
}

.site-footer .footer-social {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-size: 25px 25px;
}

.site-footer .footer-grid h3 {
    margin-bottom: 30px;
    font-size: 21px;
}

.site-footer .footer-grid h3:after {
    bottom: -15px;
    width: 26px;
    height: 3px;
}

.site-footer .footer-link-col a {
    max-width: 200px;
    padding-right: 24px;
    font-size: 17px;
    line-height: 2.15;
}

.site-footer .footer-link-col a:after {
    width: 7px;
    height: 7px;
    border-right-width: 2px;
    border-bottom-width: 2px;
}

.site-footer .footer-contact-col p,
.site-footer .footer-service-link {
    grid-template-columns: 27px minmax(0, 1fr) 16px;
    gap: 12px;
    max-width: 360px;
    margin-bottom: 20px !important;
    font-size: 16px;
}

.site-footer .footer-service-link em {
    width: 13px;
    height: 13px;
    border-width: 2px;
    border-left: 0;
    border-bottom: 0;
}

.site-footer .footer-contact-icon {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}

.site-footer .footer-bottom {
    min-height: 86px;
    margin-top: 24px;
    font-size: 15px;
}

.site-footer .footer-bottom a {
    font-size: 16px;
}

.site-footer .footer-bottom span:last-child {
    gap: 34px;
}

.site-footer .footer-icon:before,
.site-footer .footer-icon:after {
    content: none !important;
}

.site-footer .footer-icon.official,
.site-footer .footer-icon.update,
.site-footer .footer-icon.tutorial,
.site-footer .footer-icon.agent {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 46px 46px;
}

.site-footer .footer-icon.official {
    background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 4.5 38 11v12.2c0 8.4-5.4 15.1-15 18.3-9.6-3.2-15-9.9-15-18.3V11L23 4.5Z' stroke='%231260f6' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='m15.2 23.2 5 5 10.8-11' stroke='%231260f6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33.6 33.5 38 38M37.5 33l-4.4 4.5' stroke='%23bc8a22' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.site-footer .footer-icon.update {
    background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.6 18.3a13.8 13.8 0 0 0-24-5.9L7.4 15.8M7.4 15.8h9.7M7.4 15.8V6.1M11.4 27.7a13.8 13.8 0 0 0 24 5.9l3.2-3.4M38.6 30.2h-9.7M38.6 30.2v9.7' stroke='%231260f6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='33.5' cy='31.5' r='7.2' fill='%23fff' stroke='%23bc8a22' stroke-width='2.6'/%3E%3Cpath d='m30.2 31.4 2.2 2.2 4.5-4.8' stroke='%23bc8a22' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.site-footer .footer-icon.tutorial {
    background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 14.2 23 6.5l17.5 7.7L23 22 5.5 14.2Z' stroke='%231260f6' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M12 18.1v9.7c3.6 4 18.4 4 22 0v-9.7' stroke='%231260f6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M40.5 15.1v10.6' stroke='%23bc8a22' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='40.5' cy='30.6' r='2.6' fill='%23bc8a22'/%3E%3C/svg%3E");
}

.site-footer .footer-icon.agent {
    background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 4.5 38 11v12.2c0 8.4-5.4 15.1-15 18.3-9.6-3.2-15-9.9-15-18.3V11L23 4.5Z' stroke='%231260f6' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M23 16.1 25.3 21l5.2.7-3.8 3.7.9 5.2L23 28.1l-4.6 2.5.9-5.2-3.8-3.7 5.2-.7L23 16.1Z' stroke='%23bc8a22' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='M14.2 35.4 11 41M31.8 35.4 35 41' stroke='%231260f6' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Footer without the white guarantee strip: compact typography for page consistency. */
.site-footer .footer-main {
    min-height: 330px;
    padding: 42px 0 0;
}

.site-footer .footer-grid {
    min-height: 176px;
}

.site-footer .footer-grid > div {
    min-height: 132px;
}

.site-footer .footer-brand {
    gap: 14px;
    margin-bottom: 18px;
}

.site-footer .footer-brand .brand-mark {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    background-size: 46px 46px;
}

.site-footer .footer-brand .brand-text {
    font-size: 28px;
}

.site-footer .footer-brand-col p {
    max-width: 320px;
    font-size: 14px;
    line-height: 1.65;
}

.site-footer .footer-socials {
    gap: 12px;
    margin-top: 20px;
}

.site-footer .footer-social {
    width: 42px;
    height: 42px;
    background-size: 22px 22px;
}

.site-footer .footer-grid h3 {
    margin-bottom: 26px;
    font-size: 18px;
}

.site-footer .footer-grid h3:after {
    bottom: -13px;
    width: 24px;
}

.site-footer .footer-link-col a {
    max-width: 176px;
    font-size: 14px;
    line-height: 2.05;
}

.site-footer .footer-contact-col p,
.site-footer .footer-service-link {
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    gap: 10px;
    max-width: 330px;
    margin-bottom: 16px !important;
    font-size: 14px;
    line-height: 1.35;
}

.site-footer .footer-contact-icon {
    width: 21px;
    height: 21px;
    background-size: 21px 21px;
}

.site-footer .footer-service-link em {
    width: 11px;
    height: 11px;
}

.site-footer .footer-bottom {
    min-height: 72px;
    margin-top: 22px;
    font-size: 13px;
}

.site-footer .footer-bottom a {
    font-size: 13px;
}

.site-footer .footer-bottom span:last-child {
    gap: 28px;
}

.page-hero {
    padding: 86px 0 74px;
    background: linear-gradient(180deg, #fff, #f7faff);
    border-bottom: 1px solid var(--line);
}

.page-hero.compact h1 {
    max-width: 820px;
    margin: 12px 0 12px;
    font-size: 46px;
    line-height: 1.2;
}

.page-hero p {
    max-width: 720px;
    font-size: 18px;
}

.two-col,
.checkout-grid,
.agent-query-wrap,
.contact-grid,
.center-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    align-items: start;
}

.stack-list {
    display: grid;
    gap: 14px;
}

.stack-list article {
    padding: 22px;
    border-left: 4px solid var(--blue);
    background: var(--soft);
    border-radius: 8px;
}

.stack-list b {
    display: block;
    margin-bottom: 8px;
    font-size: 20px;
}

.spec-card,
.checkout-card,
.order-card,
.prose-card,
.contact-card,
.form-card,
.agent-query-card,
.agent-help {
    padding: 28px;
}

.spec-card h3,
.checkout-card h2,
.agent-query-card h2 {
    margin-top: 0;
    font-size: 28px;
}

.spec-card dl {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px 10px;
    margin: 24px 0;
}

.spec-card dt {
    color: var(--muted);
}

.spec-card dd {
    margin: 0;
    font-weight: 700;
}

.form-card {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.checkout-stack {
    display: grid;
    gap: 22px;
}

.compact-form {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.form-card label {
    display: grid;
    gap: 8px;
    color: #344054;
    font-weight: 700;
}

.order-price {
    color: var(--gold);
    font-size: 38px;
    font-weight: 900;
}

.order-card ul,
.timeline ul {
    padding-left: 20px;
    line-height: 2;
}

.notice-box {
    margin-top: 24px;
    padding: 18px;
    border-radius: 8px;
    background: var(--gold-soft);
}

.notice-box b,
.notice-box span {
    display: block;
}

.notice-box span {
    color: #7a5d24;
    margin-top: 6px;
}

.notice-box code {
    display: block;
    margin-top: 10px;
    padding: 12px;
    color: #344054;
    border: 1px solid #f1dfaf;
    border-radius: 8px;
    background: #fffdf6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.pay-note {
    background: #eef5ff;
}

.pay-note span {
    color: #31466a;
}

.pay-note small {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    line-height: 1.6;
}

.tutorial-grid,
.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.tutorial-card,
.news-card {
    padding: 18px;
}

.video-cover {
    height: 158px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 16px;
    color: #fff;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(23, 105, 255, .92), rgba(16, 24, 40, .88)),
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, .18));
}

.video-cover b {
    color: #7a5d24;
    background: var(--gold-soft);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
}

.video-cover.unlocked {
    background:
        linear-gradient(135deg, rgba(16, 185, 129, .92), rgba(23, 105, 255, .88)),
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, .2));
}

.video-cover.unlocked b {
    color: #065f46;
    background: #d1fae5;
}

.tutorial-card h3,
.news-card h3 {
    min-height: 54px;
    margin: 18px 0 8px;
}

.timeline {
    max-width: 900px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}

.timeline-item time {
    color: var(--muted);
    font-weight: 700;
}

.timeline-item h3 {
    margin: 0;
    font-size: 26px;
}

.agent-query-wrap {
    grid-template-columns: 1.3fr .7fr;
}

.agent-search input {
    height: 52px;
}

.agent-search .primary-btn {
    min-width: 126px;
}

.agent-result {
    margin-top: 22px;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid var(--line);
    color: var(--muted);
    background: var(--soft);
}

.agent-result.success {
    color: #175c2f;
    border-color: #b7e4c7;
    background: #f0fff5;
}

.agent-result.error {
    color: #9b1c1c;
    border-color: #fecaca;
    background: #fff5f5;
}

.agent-result dl {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    margin: 16px 0 0;
}

.agent-result dt {
    color: var(--muted);
}

.agent-result dd {
    margin: 0;
    font-weight: 700;
}

.form-result {
    display: none;
    padding: 14px;
    border-radius: 8px;
    line-height: 1.7;
}

.form-result.loading,
.form-result.success,
.form-result.error {
    display: block;
}

.form-result.loading {
    color: var(--muted);
    background: var(--soft);
}

.form-result.success {
    color: #175c2f;
    background: #f0fff5;
    border: 1px solid #b7e4c7;
}

.form-result.notice {
    display: block;
    color: #0d4fb8;
    background: #eef5ff;
    border: 1px solid #c6dcff;
}

.form-result.error {
    color: #9b1c1c;
    background: #fff5f5;
    border: 1px solid #fecaca;
}

.form-result b,
.form-result small {
    display: block;
}

.form-result small {
    margin-top: 10px;
}

.payment-result {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 8px 12px;
    margin: 12px 0 0;
}

.payment-result dt {
    color: #3d7b50;
}

.payment-result dd {
    margin: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.gateway-pay-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: 12px;
    padding: 0 18px;
    color: #fff;
    border-radius: 7px;
    background: linear-gradient(135deg, #1260f6, #0877ff);
    font-size: 14px;
    font-weight: 900;
}

.gateway-pay-link.disabled {
    color: #8a641f;
    border: 1px solid #e8c873;
    background: #fffaf0;
}

/* Third-party USDT checkout page. */
.buy-gateway-page {
    padding: 20px 0 32px;
    background:
        radial-gradient(circle at 88% 90%, rgba(22, 93, 255, .08), transparent 260px),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 48%, #ffffff 100%);
}

.buy-gateway-page .container {
    width: calc(100% - 52px);
    max-width: 1484px;
}

.buy-gateway-hero,
.buy-card,
.buy-unlock-card {
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 44px rgba(22, 45, 86, .055);
}

.buy-gateway-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    min-height: 168px;
    padding: 34px 42px;
    overflow: hidden;
    background:
        linear-gradient(112deg, #eef5ff 0%, #eaf3ff 52%, #dcecff 100%);
}

.buy-gateway-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(150deg, rgba(255,255,255,.34) 0 1px, transparent 1px),
        linear-gradient(30deg, rgba(255,255,255,.26) 0 1px, transparent 1px);
    background-size: 95px 42px;
    opacity: .58;
}

.buy-gateway-hero > div {
    position: relative;
    z-index: 1;
}

.buy-gateway-hero h1 {
    margin: 0;
    color: #071a3a;
    font-size: 34px;
    line-height: 1.16;
}

.buy-gateway-hero p {
    max-width: 680px;
    margin-top: 12px;
    color: #344760;
    font-size: 16px;
    line-height: 1.65;
}

.buy-gateway-art {
    height: 124px;
}

.checkout-window {
    position: absolute;
    right: 80px;
    top: 30px;
    width: 150px;
    height: 104px;
    border-radius: 16px;
    background: linear-gradient(145deg, #3a8dff, #1260f6);
    box-shadow: 0 22px 34px rgba(22, 93, 255, .28);
}

.checkout-window i {
    position: absolute;
    left: 24px;
    top: 20px;
    width: 76px;
    height: 8px;
    border-radius: 99px;
    background: #dfeeff;
}

.checkout-window b {
    position: absolute;
    left: 24px;
    top: 42px;
    width: 102px;
    height: 8px;
    border-radius: 99px;
    background: rgba(223, 238, 255, .86);
}

.checkout-window em {
    position: absolute;
    left: 24px;
    top: 68px;
    width: 66px;
    height: 18px;
    border-radius: 99px;
    background: #fff;
}

.buy-gateway-art .coin {
    position: absolute;
    right: 246px;
    top: 44px;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #16b77a, #0b9f68);
    box-shadow: 0 16px 30px rgba(0, 150, 98, .22);
    font-size: 13px;
    font-weight: 900;
}

.buy-gateway-art .shield {
    position: absolute;
    right: 44px;
    top: 46px;
    width: 58px;
    height: 64px;
    border-radius: 22px 22px 26px 26px;
    background: linear-gradient(145deg, #8ab8ff, #1260f6);
    box-shadow: 0 16px 30px rgba(18, 96, 246, .2);
}

.buy-gateway-art .shield:after {
    content: "";
    position: absolute;
    left: 16px;
    top: 27px;
    width: 24px;
    height: 13px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    transform: rotate(-45deg);
}

.checkout-arrow {
    position: absolute;
    right: 232px;
    top: 88px;
    width: 58px;
    height: 4px;
    border-radius: 99px;
    background: #1260f6;
}

.checkout-arrow:after {
    content: "";
    position: absolute;
    right: -2px;
    top: -6px;
    width: 14px;
    height: 14px;
    border-right: 4px solid #1260f6;
    border-bottom: 4px solid #1260f6;
    transform: rotate(-45deg);
}

.buy-gateway-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    gap: 20px;
    margin-top: 18px;
}

.buy-card {
    padding: 24px;
}

.buy-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.buy-card-head.compact {
    margin-bottom: 14px;
}

.buy-card-head span {
    color: #1260f6;
    font-size: 14px;
    font-weight: 900;
}

.buy-card-head h2 {
    margin: 8px 0 0;
    color: #071a3a;
    font-size: 26px;
    line-height: 1.2;
}

.buy-card-head strong {
    color: #d19200;
    font-size: 42px;
    line-height: 1;
}

.buy-card-head small {
    color: #071a3a;
    font-size: 15px;
}

.buy-plan-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.buy-plan-summary article,
.gateway-form label,
.gateway-amount-card,
.gateway-status-preview {
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.buy-plan-summary article {
    min-height: 76px;
    padding: 14px;
}

.buy-plan-summary b,
.buy-feature-list p,
.gateway-step-list strong {
    color: #071a3a;
    font-weight: 900;
}

.buy-plan-summary span {
    display: block;
    margin-top: 9px;
    color: #667891;
    font-size: 13px;
}

.buy-feature-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.buy-feature-list p {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 7px;
    background: #f7fbff;
    font-size: 13px;
    line-height: 1.2;
}

.buy-feature-list i {
    width: 14px;
    height: 8px;
    border-left: 2px solid #1260f6;
    border-bottom: 2px solid #1260f6;
    transform: rotate(-45deg);
}

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

.gateway-form label {
    display: grid;
    gap: 8px;
    padding: 13px 14px;
    color: #31415f;
    font-size: 14px;
    font-weight: 900;
}

.gateway-form label small {
    color: #73839a;
    font-size: 12px;
    font-weight: 700;
}

.gateway-form label:nth-child(4),
.gateway-form .buy-form-tip,
.gateway-form .buy-submit-btn,
.gateway-form .gateway-result {
    grid-column: 1 / -1;
}

.gateway-form input,
.gateway-form select,
.gateway-form textarea {
    width: 100%;
    min-height: 42px;
    padding: 0;
    color: #071a3a;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
}

.gateway-form textarea {
    min-height: 76px;
    padding-top: 4px;
    resize: vertical;
}

.buy-form-tip {
    padding: 12px 14px;
    color: #8a641f;
    border: 1px solid #e8c873;
    border-radius: 7px;
    background: #fffaf0;
    font-size: 13px;
    font-weight: 800;
}

.buy-submit-btn {
    height: 48px;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, #1260f6, #0877ff);
    box-shadow: 0 14px 28px rgba(18, 96, 246, .22);
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 900;
}

.gateway-amount-card {
    padding: 18px;
    background:
        linear-gradient(145deg, rgba(255, 250, 239, .72), rgba(255, 255, 255, .96) 60%),
        #fff;
}

.gateway-amount-card span {
    color: #1260f6;
    font-size: 13px;
    font-weight: 900;
}

.gateway-amount-card b {
    display: block;
    margin-top: 8px;
    color: #d19200;
    font-size: 36px;
    line-height: 1;
}

.gateway-amount-card p {
    margin-top: 9px;
    color: #667891;
    font-size: 13px;
    line-height: 1.35;
}

.gateway-step-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.gateway-step-list article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 12px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.gateway-step-list article > b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #1260f6;
    border-radius: 50%;
    background: #eef5ff;
    font-size: 13px;
}

.gateway-step-list p {
    margin-top: 4px;
    color: #73839a;
    font-size: 12px;
    line-height: 1.35;
}

.gateway-status-preview {
    margin-top: 14px;
    padding: 14px;
}

.gateway-status-preview > span {
    color: #31415f;
    font-size: 14px;
    font-weight: 900;
}

.gateway-status-preview div {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
}

.gateway-status-preview i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1260f6;
    box-shadow: 0 0 0 5px #eef5ff;
}

.gateway-status-preview b {
    color: #071a3a;
    font-size: 13px;
}

.gateway-warm-tip {
    margin-top: 14px;
    padding: 15px 16px;
    border: 1px solid #b8cdfb;
    border-radius: 7px;
    background: linear-gradient(180deg, #f4f8ff, #fff);
}

.gateway-warm-tip b {
    color: #174a9e;
    font-size: 14px;
}

.gateway-warm-tip p {
    margin-top: 8px;
    color: #52647c;
    font-size: 13px;
    line-height: 1.5;
}

.buy-unlock-card {
    margin-top: 18px;
    padding: 18px 22px 20px;
}

.buy-unlock-card h2 {
    margin: 0 0 14px;
    color: #071a3a;
    font-size: 22px;
}

.buy-unlock-card > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.buy-unlock-card article {
    min-height: 96px;
    padding: 16px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.buy-unlock-card i {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: #eef5ff;
}

.buy-unlock-card i:before,
.buy-unlock-card i:after {
    content: "";
    position: absolute;
}

.buy-unlock-card .unlock-download:before {
    left: 19px;
    top: 9px;
    width: 4px;
    height: 16px;
    border-radius: 3px;
    background: #1260f6;
}

.buy-unlock-card .unlock-download:after {
    left: 14px;
    top: 18px;
    width: 12px;
    height: 12px;
    border-right: 4px solid #1260f6;
    border-bottom: 4px solid #1260f6;
    transform: rotate(45deg);
}

.buy-unlock-card .unlock-video:before {
    left: 16px;
    top: 12px;
    border-left: 14px solid #1260f6;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.buy-unlock-card .unlock-update:before {
    left: 10px;
    top: 10px;
    width: 22px;
    height: 22px;
    border: 4px solid #1260f6;
    border-left-color: transparent;
    border-radius: 50%;
}

.buy-unlock-card .unlock-update:after {
    left: 27px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-right: 4px solid #1260f6;
    border-bottom: 4px solid #1260f6;
    transform: rotate(-20deg);
}

.buy-unlock-card .unlock-support:before {
    left: 9px;
    top: 9px;
    width: 24px;
    height: 22px;
    border: 4px solid #1260f6;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
}

.buy-unlock-card .unlock-support:after {
    left: 8px;
    top: 27px;
    width: 6px;
    height: 10px;
    border-radius: 4px;
    background: #1260f6;
    box-shadow: 20px 0 0 #1260f6;
}

.buy-unlock-card b {
    display: block;
    color: #071a3a;
    font-size: 15px;
}

.buy-unlock-card p {
    margin-top: 6px;
    color: #73839a;
    font-size: 12px;
    line-height: 1.35;
}

/* Exact third-party checkout mockup. */
.buy-exact-body {
    min-width: 1360px;
    margin: 0;
    color: #071a3a;
    background:
        radial-gradient(circle at 88% 92%, rgba(22, 93, 255, .08), transparent 280px),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 48%, #ffffff 100%);
}

.buy-exact-header {
    height: 70px;
    border-bottom: 1px solid #dbe6f5;
    background: rgba(255,255,255,.96);
}

.buy-exact-nav {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 292px;
    align-items: center;
    gap: 24px;
    width: calc(100% - 78px);
    max-width: 1458px;
    height: 70px;
    margin: 0 auto;
}

.buy-exact-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #1260f6;
}

.buy-exact-logo .brand-mark {
    width: 39px;
    height: 39px;
}

.buy-exact-logo strong {
    color: #1260f6;
    font-size: 29px;
    line-height: 1;
    font-weight: 900;
}

.buy-exact-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    color: #061735;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.buy-exact-menu a:hover {
    color: #1260f6;
}

.buy-exact-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.buy-exact-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 138px;
    height: 40px;
    color: #1260f6;
    border: 1px solid #8fb5ff;
    border-radius: 7px;
    background: #fff;
    font-size: 15px;
    font-weight: 800;
}

.buy-exact-actions span {
    width: 7px;
    height: 7px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.buy-exact-page {
    padding: 22px 0 28px;
    background:
        radial-gradient(circle at 88% 92%, rgba(22, 93, 255, .08), transparent 280px),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 48%, #ffffff 100%);
}

.buy-exact-page .container {
    width: calc(100% - 78px);
    max-width: 1458px;
}

.buy-exact-hero,
.buy-exact-card,
.buy-unlock-exact {
    border: 1px solid #bdd2fb;
    border-radius: 8px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 44px rgba(22, 45, 86, .055);
}

.buy-exact-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 550px;
    align-items: center;
    min-height: 188px;
    padding: 36px 43px;
    overflow: hidden;
    background:
        linear-gradient(112deg, #f7fbff 0%, #eef5ff 44%, #e1eeff 100%);
}

.buy-exact-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .58;
    background:
        radial-gradient(circle at 77% 50%, rgba(18,96,246,.08), transparent 190px),
        linear-gradient(150deg, rgba(255,255,255,.36) 0 1px, transparent 1px) 0 0 / 95px 44px,
        linear-gradient(30deg, rgba(255,255,255,.24) 0 1px, transparent 1px) 0 0 / 95px 44px;
}

.buy-exact-hero > div {
    position: relative;
    z-index: 1;
}

.buy-exact-hero h1 {
    margin: 0;
    color: #071a3a;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 950;
}

.buy-exact-hero p {
    max-width: 760px;
    margin-top: 18px;
    color: #344760;
    font-size: 17px;
    line-height: 1.5;
}

.buy-exact-hero-art {
    height: 160px;
}

.buy-art-coin {
    position: absolute;
    right: 365px;
    top: 41px;
    width: 92px;
    height: 92px;
    border: 8px solid #8db8ff;
    border-radius: 50%;
    background: linear-gradient(145deg, #438fff, #1260f6);
    box-shadow: 0 20px 34px rgba(18,96,246,.28);
}

.buy-art-coin:before {
    content: "";
    position: absolute;
    left: 24px;
    top: 22px;
    width: 34px;
    height: 34px;
    border: 5px solid rgba(255, 255, 255, .94);
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-35deg);
}

.buy-art-window {
    position: absolute;
    right: 160px;
    top: 4px;
    width: 230px;
    height: 154px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 38px rgba(18,96,246,.24);
    transform: rotate(6deg);
    overflow: hidden;
}

.buy-art-window:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 44px;
    background: linear-gradient(135deg, #579aff, #1260f6);
}

.buy-art-window i {
    position: absolute;
    left: 18px;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dfeeff;
    box-shadow: 20px 0 0 #dfeeff, 40px 0 0 #dfeeff;
}

.buy-art-window b {
    position: absolute;
    left: 42px;
    top: 65px;
    width: 124px;
    height: 10px;
    border-radius: 999px;
    background: #dbe8ff;
    color: transparent;
    font-size: 0;
}

.buy-art-window strong {
    position: absolute;
    left: 50px;
    bottom: 27px;
    display: grid;
    place-items: center;
    width: 130px;
    height: 42px;
    color: transparent;
    border-radius: 9px;
    background: #1260f6;
    font-size: 0;
}

.buy-art-window strong:before,
.buy-art-window strong:after {
    content: "";
    position: absolute;
}

.buy-art-window strong:before {
    left: 22px;
    top: 18px;
    width: 55px;
    height: 6px;
    border-radius: 999px;
    background: #fff;
}

.buy-art-window strong:after {
    right: 22px;
    top: 14px;
    width: 12px;
    height: 12px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

.buy-art-shield {
    position: absolute;
    right: 52px;
    top: 48px;
    width: 88px;
    height: 96px;
    border-radius: 32px 32px 40px 40px;
    background: linear-gradient(145deg, #8ab8ff, #1260f6);
    box-shadow: 0 20px 34px rgba(18,96,246,.2);
}

.buy-art-shield:after {
    content: "";
    position: absolute;
    left: 25px;
    top: 40px;
    width: 35px;
    height: 19px;
    border-left: 7px solid #fff;
    border-bottom: 7px solid #fff;
    transform: rotate(-45deg);
}

.buy-art-arrow {
    position: absolute;
    right: 26px;
    bottom: 18px;
    width: 52px;
    height: 8px;
    border-radius: 999px;
    background: #4c8cff;
    transform: rotate(-45deg);
}

.buy-art-arrow:after {
    content: "";
    position: absolute;
    right: -2px;
    top: -8px;
    width: 18px;
    height: 18px;
    border-right: 7px solid #4c8cff;
    border-bottom: 7px solid #4c8cff;
    transform: rotate(-45deg);
}

.buy-art-cube {
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
    background: linear-gradient(145deg, #cfe1ff, #77a8ff);
    transform: rotate(45deg) skew(-12deg, -12deg);
}

.buy-art-cube.one {
    right: 525px;
    top: 76px;
}

.buy-art-cube.two {
    right: 28px;
    top: 38px;
}

.buy-exact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 562px;
    gap: 22px;
    margin-top: 20px;
}

.buy-exact-card {
    padding: 22px;
}

.buy-exact-card h2 {
    margin: 0 0 14px;
    color: #071a3a;
    font-size: 23px;
    line-height: 1.2;
}

.buy-exact-inner {
    display: grid;
    grid-template-columns: 322px minmax(0, 1fr);
    gap: 25px;
}

.buy-plan-box {
    min-height: 442px;
    padding: 21px 16px;
    border: 1px solid #e5bd68;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #fffdf8, #fff),
        #fff;
}

.buy-crown {
    position: relative;
    display: block;
    width: 44px;
    height: 32px;
    margin: 0 auto 8px;
}

.buy-crown:before {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 4px;
    width: 36px;
    height: 17px;
    background: linear-gradient(180deg, #d8a400, #c28a00);
    clip-path: polygon(0 100%, 0 25%, 24% 54%, 50% 0, 76% 54%, 100% 25%, 100% 100%);
}

.buy-crown:after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 1px;
    width: 29px;
    height: 5px;
    border-radius: 99px;
    background: #bd8500;
}

.buy-plan-box h3 {
    margin: 0;
    color: #a06900;
    font-size: 20px;
    text-align: center;
}

.buy-price-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.buy-price-line strong {
    color: #d19200;
    font-size: 48px;
    line-height: 1;
}

.buy-price-line span {
    color: #071a3a;
    font-size: 20px;
    font-weight: 900;
}

.buy-period {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 9px;
    color: #263856;
    font-size: 15px;
    font-weight: 800;
}

.buy-period i {
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid #263856;
    border-radius: 50%;
}

.buy-period i:before,
.buy-period i:after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 2px;
    height: 5px;
    border-radius: 2px;
    background: #263856;
    transform-origin: bottom;
}

.buy-period i:after {
    top: 7px;
    height: 4px;
    transform: rotate(90deg);
}

.buy-plan-box hr {
    height: 1px;
    margin: 17px 0;
    border: 0;
    background: #ead4a1;
}

.buy-plan-box > b {
    display: block;
    margin-bottom: 13px;
    color: #071a3a;
    font-size: 15px;
}

.buy-plan-box ul {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.buy-plan-box li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
}

.buy-plan-box li strong,
.buy-unlock-exact b {
    display: block;
    color: #071a3a;
    font-size: 15px;
}

.buy-plan-box li span,
.buy-unlock-exact p {
    display: block;
    margin-top: 5px;
    color: #73839a;
    font-size: 12px;
    line-height: 1.4;
}

.buy-blue-icon {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1260f6;
}

.buy-blue-icon:before,
.buy-blue-icon:after {
    content: "";
    position: absolute;
}

.buy-blue-icon.download:before {
    left: 18px;
    top: 9px;
    width: 4px;
    height: 15px;
    border-radius: 3px;
    background: #fff;
}

.buy-blue-icon.download:after {
    left: 13px;
    top: 18px;
    width: 12px;
    height: 12px;
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(45deg);
}

.buy-blue-icon.play:before {
    left: 15px;
    top: 11px;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.buy-blue-icon.update:before {
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    border: 4px solid #fff;
    border-left-color: transparent;
    border-radius: 50%;
}

.buy-blue-icon.update:after {
    left: 26px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(-20deg);
}

.buy-blue-icon.support:before {
    left: 8px;
    top: 8px;
    width: 24px;
    height: 21px;
    border: 4px solid #fff;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
}

.buy-blue-icon.support:after {
    left: 8px;
    top: 27px;
    width: 6px;
    height: 10px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 18px 0 0 #fff;
}

.buy-exact-form {
    display: grid;
    gap: 13px;
}

.buy-exact-form label {
    display: grid;
    gap: 8px;
    color: #071a3a;
    font-size: 15px;
    font-weight: 800;
}

.buy-exact-form .field-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    line-height: 1.2;
    white-space: nowrap;
}

.buy-exact-form em {
    color: #ff2f2f;
    font-style: normal;
}

.buy-exact-form small {
    color: #73839a;
    font-size: 13px;
    font-weight: 700;
}

.buy-exact-form .field-control {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #bdd2fb;
    border-radius: 7px;
    background: #fff;
}

.buy-exact-form input,
.buy-exact-form select,
.buy-exact-form textarea {
    width: 100%;
    min-height: 38px;
    color: #071a3a;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.buy-exact-form .textarea-wrap {
    grid-template-columns: 1fr;
    min-height: 68px;
    padding: 7px 12px;
}

.buy-exact-form textarea {
    min-height: 50px;
    resize: none;
}

.buy-exact-form .textarea-wrap b {
    position: absolute;
    right: 12px;
    bottom: 7px;
    color: #63758f;
    font-size: 12px;
}

.buy-exact-form-tip {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 9px;
    min-height: 33px;
    padding: 0 12px;
    color: #52647c;
    border: 1px solid #bdd2fb;
    border-radius: 7px;
    background: #f4f8ff;
    font-size: 12px;
    font-weight: 800;
}

.buy-exact-form-tip i {
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid #1260f6;
    border-radius: 50%;
}

.buy-exact-form-tip i:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 3px;
    height: 7px;
    border-radius: 999px;
    background: #1260f6;
    box-shadow: 0 -4px 0 #1260f6;
}

.buy-exact-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 44px;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(180deg, #dca800, #c78d00);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
    cursor: pointer;
    font: inherit;
    font-size: 17px;
    font-weight: 900;
}

.buy-exact-form button i {
    position: relative;
    width: 17px;
    height: 17px;
    border: 2px solid #fff;
    border-top: 0;
}

.buy-exact-form button i:before {
    content: "";
    position: absolute;
    left: -3px;
    top: -4px;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}

.field-mail,
.field-telegram,
.field-usdt {
    position: relative;
    width: 18px;
    height: 18px;
    color: #7f9bca;
}

.field-mail:before,
.field-mail:after,
.field-telegram:before,
.field-telegram:after,
.field-usdt:before,
.field-usdt:after {
    content: "";
    position: absolute;
}

.field-mail:before {
    inset: 3px 1px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.field-mail:after {
    left: 3px;
    top: 6px;
    width: 11px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.field-telegram:before {
    left: 1px;
    top: 2px;
    width: 16px;
    height: 14px;
    background: currentColor;
    clip-path: polygon(0 45%, 100% 0, 72% 100%, 49% 66%, 28% 84%);
}

.field-telegram:after {
    left: 8px;
    top: 7px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    transform: rotate(-28deg);
}

.field-usdt:before {
    inset: 0;
    border-radius: 50%;
    background: #e71919;
}

.field-usdt:after {
    content: "";
    left: 5px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.field-order:before,
.field-status:before,
.field-order:after,
.field-status:after {
    content: "";
    position: absolute;
}

.field-order:before {
    left: 5px;
    top: 3px;
    width: 12px;
    height: 15px;
    border: 2px solid #7e99c6;
    border-radius: 2px;
}

.field-order:after {
    left: 9px;
    top: 8px;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: #7e99c6;
    box-shadow: 0 5px 0 #7e99c6;
}

.field-status:before {
    left: 4px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1260f6;
}

.field-status:after {
    left: 8px;
    top: 10px;
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.buy-flow-card {
    min-height: 516px;
}

.buy-pay-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 106px;
    padding: 14px 0;
    border: 1px solid #e5bd68;
    border-radius: 8px;
    background: linear-gradient(180deg, #fffdf8, #fff);
}

.buy-pay-summary article {
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    border-left: 1px solid #dbe6f5;
}

.buy-pay-summary article:first-child {
    border-left: 0;
}

.buy-pay-summary span {
    color: #31415f;
    font-size: 13px;
}

.buy-pay-summary b {
    display: block;
    margin-top: 7px;
    color: #071a3a;
    font-size: 22px;
    line-height: 1.1;
}

.buy-pay-summary article:first-child b {
    color: #d19200;
    font-size: 44px;
}

.buy-pay-summary em {
    display: block;
    margin-top: 5px;
    color: #344760;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}

.buy-flow-card > h3 {
    margin: 15px 0 11px;
    color: #071a3a;
    font-size: 15px;
}

.buy-flow-steps {
    display: grid;
    gap: 7px;
}

.buy-flow-steps article {
    display: grid;
    grid-template-columns: 24px 32px 1fr;
    gap: 11px;
    align-items: start;
}

.buy-flow-steps article > b {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #fff;
    border-radius: 50%;
    background: #1260f6;
    font-size: 12px;
}

.buy-flow-steps article > i {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef5ff;
}

.buy-flow-steps strong {
    color: #071a3a;
    font-size: 14px;
}

.buy-flow-steps p {
    margin-top: 4px;
    color: #73839a;
    font-size: 12px;
    line-height: 1.35;
}

.step-form:before,
.step-order:before,
.step-pay:before,
.step-open:before,
.step-form:after,
.step-order:after,
.step-pay:after,
.step-open:after,
.status-hour:before,
.status-hour:after,
.status-card:before,
.status-card:after,
.status-ok:before {
    content: "";
    position: absolute;
}

.step-form:before,
.step-order:before {
    left: 9px;
    top: 6px;
    width: 10px;
    height: 15px;
    border: 2px solid #1260f6;
    border-radius: 2px;
}

.step-form:after {
    left: 13px;
    top: 10px;
    width: 6px;
    height: 2px;
    border-radius: 999px;
    background: #1260f6;
    box-shadow: 0 5px 0 #1260f6, 0 10px 0 #1260f6;
}

.step-order:after {
    left: 13px;
    top: 8px;
    width: 6px;
    height: 2px;
    border-radius: 999px;
    background: #1260f6;
    box-shadow: 0 5px 0 #1260f6, 0 10px 0 #1260f6;
}

.step-pay:before {
    left: 6px;
    top: 8px;
    width: 16px;
    height: 11px;
    border-radius: 3px;
    background: #1260f6;
}

.step-pay:after {
    left: 9px;
    top: 12px;
    width: 10px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
}

.step-open:before {
    left: 6px;
    top: 7px;
    width: 16px;
    height: 14px;
    border: 3px solid #1260f6;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.step-open:after {
    left: 11px;
    top: 18px;
    width: 9px;
    height: 4px;
    border-left: 3px solid #1260f6;
    border-bottom: 3px solid #1260f6;
    transform: rotate(-45deg);
}

.buy-status-preview {
    margin-top: 16px;
    padding: 13px 16px;
    border: 1px solid #dbe6f5;
    border-radius: 7px;
    background: #f8fbff;
}

.buy-status-preview h3 {
    margin: 0 0 12px;
    color: #071a3a;
    font-size: 14px;
}

.buy-status-preview > div {
    display: grid;
    grid-template-columns: 1fr 28px 1fr 28px 1fr;
    align-items: center;
    gap: 8px;
}

.buy-status-preview article {
    display: grid;
    justify-items: center;
    text-align: center;
}

.buy-status-preview article i {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #eef5ff;
}

.status-ok {
    background: #eafaf1 !important;
}

.status-hour:before {
    left: 13px;
    top: 8px;
    width: 16px;
    height: 24px;
    border: 3px solid #1260f6;
    border-radius: 3px;
}

.status-hour:after {
    left: 17px;
    top: 14px;
    width: 8px;
    height: 12px;
    background: #1260f6;
    clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);
}

.status-card:before {
    left: 10px;
    top: 14px;
    width: 22px;
    height: 14px;
    border-radius: 4px;
    background: #164478;
}

.status-card:after {
    left: 13px;
    top: 18px;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    opacity: .92;
}

.status-ok:before {
    left: 13px;
    top: 11px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #20a346;
}

.status-ok:after {
    content: "";
    position: absolute;
    left: 15px;
    top: 18px;
    width: 12px;
    height: 6px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

.buy-status-preview b {
    color: #071a3a;
    font-size: 13px;
}

.buy-status-preview span {
    margin-top: 3px;
    color: #73839a;
    font-size: 12px;
}

.buy-status-preview em {
    width: 28px;
    height: 1px;
    background: #b9c8df;
}

.buy-flow-tip {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 11px;
    min-height: 36px;
    margin-top: 10px;
    padding: 0 13px;
    color: #9a6500;
    border: 1px solid #e9c77e;
    border-radius: 7px;
    background: #fffaf0;
    font-size: 13px;
    font-weight: 800;
}

.buy-flow-tip i {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    color: #fff;
    border-radius: 50%;
    background: #c08000;
    font-style: normal;
    font-size: 13px;
}

.buy-unlock-exact {
    margin-top: 18px;
    padding: 18px 22px 16px;
}

.buy-unlock-exact h2 {
    margin: 0 0 13px;
    color: #071a3a;
    font-size: 22px;
}

.buy-unlock-exact > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.buy-unlock-exact article {
    display: grid;
    grid-template-columns: 74px 1fr;
    align-items: center;
    gap: 14px;
    min-height: 106px;
    padding: 18px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.buy-unlock-exact .buy-blue-icon {
    width: 56px;
    height: 56px;
    background: #eef5ff;
}

.buy-unlock-exact .buy-blue-icon:before,
.buy-unlock-exact .buy-blue-icon:after {
    filter: none;
}

.buy-unlock-exact .buy-blue-icon.download:before {
    left: 26px;
    top: 14px;
    background: #1260f6;
}

.buy-unlock-exact .buy-blue-icon.download:after {
    left: 20px;
    top: 24px;
    border-right-color: #1260f6;
    border-bottom-color: #1260f6;
}

.buy-unlock-exact .buy-blue-icon.play:before {
    left: 22px;
    top: 17px;
    border-left-color: #1260f6;
}

.buy-unlock-exact .buy-blue-icon.update:before {
    left: 16px;
    top: 16px;
    border-color: #1260f6;
    border-left-color: transparent;
}

.buy-unlock-exact .buy-blue-icon.update:after {
    left: 32px;
    top: 13px;
    border-right-color: #1260f6;
    border-bottom-color: #1260f6;
}

.buy-unlock-exact .buy-blue-icon.support:before {
    left: 14px;
    top: 14px;
    border-color: #1260f6;
    border-bottom: 0;
}

.buy-unlock-exact .buy-blue-icon.support:after {
    left: 13px;
    top: 33px;
    background: #1260f6;
    box-shadow: 24px 0 0 #1260f6;
}

/* Final refined icon set for the desktop buy page. */
.buy-exact-page .buy-crown {
    width: 48px;
    height: 38px;
    filter: drop-shadow(0 10px 16px rgba(198, 145, 32, .18));
}

.buy-exact-page .buy-crown:before {
    left: 4px;
    bottom: 7px;
    width: 40px;
    height: 22px;
    border-radius: 5px 5px 3px 3px;
    background:
        radial-gradient(circle at 50% 10%, #fff7d8 0 5px, transparent 6px),
        linear-gradient(180deg, #f2c85f, #c88c00);
    clip-path: polygon(0 100%, 0 32%, 23% 55%, 50% 0, 77% 55%, 100% 32%, 100% 100%);
}

.buy-exact-page .buy-crown:after {
    left: 9px;
    bottom: 2px;
    width: 30px;
    height: 7px;
    background: linear-gradient(180deg, #dca526, #b97800);
}

.buy-exact-page .buy-blue-icon {
    overflow: hidden;
    border-radius: 13px;
    background:
        radial-gradient(circle at 33% 24%, rgba(255, 255, 255, .36), transparent 31%),
        linear-gradient(135deg, #1260f6, #4d95ff) !important;
    box-shadow: 0 10px 20px rgba(18, 96, 246, .18);
}

.buy-exact-page .buy-blue-icon:before,
.buy-exact-page .buy-blue-icon:after,
.buy-exact-page .field-mail:before,
.buy-exact-page .field-mail:after,
.buy-exact-page .field-telegram:before,
.buy-exact-page .field-telegram:after,
.buy-exact-page .field-usdt:before,
.buy-exact-page .field-usdt:after,
.buy-exact-page .field-order:before,
.buy-exact-page .field-order:after,
.buy-exact-page .field-status:before,
.buy-exact-page .field-status:after,
.buy-exact-page .buy-flow-steps article > i:before,
.buy-exact-page .buy-flow-steps article > i:after,
.buy-exact-page .buy-status-preview article i:before,
.buy-exact-page .buy-status-preview article i:after {
    content: none !important;
}

.buy-exact-page .buy-blue-icon.download {
    background:
        url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 4.5v10.2M12.5 14.7 8.2 10.4M12.5 14.7l4.3-4.3' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.6 17.3v1.9c0 .9.7 1.6 1.6 1.6h10.6c.9 0 1.6-.7 1.6-1.6v-1.9' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 25px 25px no-repeat,
        radial-gradient(circle at 33% 24%, rgba(255, 255, 255, .36), transparent 31%),
        linear-gradient(135deg, #1260f6, #4d95ff) !important;
}

.buy-exact-page .buy-blue-icon.play {
    background:
        url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6.7c0-1.1 1.2-1.8 2.2-1.2l8.8 5.3c1 .6 1 2 0 2.6l-8.8 5.3c-1 .6-2.2-.1-2.2-1.2V6.7Z' fill='%23fff'/%3E%3C/svg%3E") center / 25px 25px no-repeat,
        radial-gradient(circle at 33% 24%, rgba(255, 255, 255, .36), transparent 31%),
        linear-gradient(135deg, #1260f6, #4d95ff) !important;
}

.buy-exact-page .buy-blue-icon.update {
    background:
        url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.2 10.1a7.2 7.2 0 0 0-12.4-3.2L5.1 8.6M5.1 8.6h5.1M5.1 8.6V3.5M5.8 14.9a7.2 7.2 0 0 0 12.4 3.2l1.7-1.7M19.9 16.4h-5.1M19.9 16.4v5.1' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 25px 25px no-repeat,
        radial-gradient(circle at 33% 24%, rgba(255, 255, 255, .36), transparent 31%),
        linear-gradient(135deg, #1260f6, #4d95ff) !important;
}

.buy-exact-page .buy-blue-icon.support {
    background:
        url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.4 13.2v-1.7a7.1 7.1 0 0 1 14.2 0v1.7' stroke='%23fff' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M5.4 13.1h2.5c.6 0 1.1.5 1.1 1.1v3.7c0 .6-.5 1.1-1.1 1.1H6.5c-.6 0-1.1-.5-1.1-1.1v-4.8ZM19.6 13.1h-2.5c-.6 0-1.1.5-1.1 1.1v3.7c0 .6.5 1.1 1.1 1.1h1.4c.6 0 1.1-.5 1.1-1.1v-4.8Z' fill='%23fff'/%3E%3Cpath d='M16.8 19.2c-.9 1-2.3 1.5-4.3 1.5' stroke='%23fff' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") center / 25px 25px no-repeat,
        radial-gradient(circle at 33% 24%, rgba(255, 255, 255, .36), transparent 31%),
        linear-gradient(135deg, #1260f6, #4d95ff) !important;
}

.buy-exact-page .buy-unlock-exact .buy-blue-icon {
    border: 1px solid #d8e6ff;
    border-radius: 16px;
    background-color: #eef5ff !important;
    box-shadow: 0 12px 22px rgba(18, 96, 246, .08);
}

.buy-exact-page .buy-unlock-exact .buy-blue-icon.download {
    background:
        url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 5.8v12.4M15.5 18.2l-5.1-5.1M15.5 18.2l5.1-5.1' stroke='%231260f6' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.2 21.4v2.3c0 1.1.9 2 2 2h12.6c1.1 0 2-.9 2-2v-2.3' stroke='%231260f6' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 31px 31px no-repeat,
        linear-gradient(180deg, #f8fbff, #edf4ff) !important;
}

.buy-exact-page .buy-unlock-exact .buy-blue-icon.play {
    background:
        url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2 8.2c0-1.2 1.3-2 2.4-1.4l10.6 6.4c1.1.7 1.1 2.2 0 2.8l-10.6 6.4c-1.1.7-2.4-.1-2.4-1.4V8.2Z' fill='%231260f6'/%3E%3C/svg%3E") center / 31px 31px no-repeat,
        linear-gradient(180deg, #f8fbff, #edf4ff) !important;
}

.buy-exact-page .buy-unlock-exact .buy-blue-icon.update {
    background:
        url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 12.5a8.7 8.7 0 0 0-15-3.9L6.4 10.8M6.4 10.8h6.2M6.4 10.8V4.6M7.5 18.5a8.7 8.7 0 0 0 15 3.9l2.1-2.2M24.6 20.2h-6.2M24.6 20.2v6.2' stroke='%231260f6' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 31px 31px no-repeat,
        linear-gradient(180deg, #f8fbff, #edf4ff) !important;
}

.buy-exact-page .buy-unlock-exact .buy-blue-icon.support {
    background:
        url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.8 16.4v-2.1a8.7 8.7 0 0 1 17.4 0v2.1' stroke='%231260f6' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M6.8 16.2h3c.7 0 1.3.6 1.3 1.3v4.6c0 .7-.6 1.3-1.3 1.3H8.1c-.7 0-1.3-.6-1.3-1.3v-5.9ZM24.2 16.2h-3c-.7 0-1.3.6-1.3 1.3v4.6c0 .7.6 1.3 1.3 1.3h1.7c.7 0 1.3-.6 1.3-1.3v-5.9Z' fill='%231260f6'/%3E%3Cpath d='M20.8 23.6c-1.1 1.1-2.8 1.8-5.3 1.8' stroke='%231260f6' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 31px 31px no-repeat,
        linear-gradient(180deg, #f8fbff, #edf4ff) !important;
}

.buy-exact-page .field-mail,
.buy-exact-page .field-telegram,
.buy-exact-page .field-usdt,
.buy-exact-page .field-order,
.buy-exact-page .field-status {
    width: 20px;
    height: 20px;
    color: #1260f6;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.buy-exact-page .field-mail {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='14' height='10.5' rx='2.2' stroke='%231260f6' stroke-width='1.8'/%3E%3Cpath d='m4.2 6.2 5.1 4.2c.7.6 1.7.6 2.4 0l4.9-4.2' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.buy-exact-page .field-telegram {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.9 4.1 3.8 9.2c-.9.3-.8 1.5.1 1.8l3.5 1.1 1.3 3.8c.3.8 1.3.9 1.8.2l2-2.8 3.6 2.6c.7.5 1.6.1 1.8-.7l2-10.2c.2-.8-.6-1.4-1.3-1Z' stroke='%231260f6' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m7.6 12 6.3-4.3-4.8 5.2' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.buy-exact-page .field-usdt {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23e71919'/%3E%3Cpath d='M6.3 6.7h7.4M10 6.8v6.9M7.5 9.3c.8.4 1.6.6 2.5.6s1.8-.2 2.5-.6M10 13.7c-1.7 0-3.2-.4-4.3-1' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.buy-exact-page .field-order {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2.8h10a1.7 1.7 0 0 1 1.7 1.7v12.7l-2-1.1-2 1.1-2-1.1-2 1.1-2-1.1-2 1.1V4.5A1.7 1.7 0 0 1 5 2.8Z' stroke='%231260f6' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M7.2 7.2h5.6M7.2 10.2h5.6M7.2 13.2h3.7' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.buy-exact-page .field-status {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2.3 16.1 4.9v4.8c0 3.6-2.3 6.2-6.1 7.8-3.8-1.6-6.1-4.2-6.1-7.8V4.9L10 2.3Z' fill='%23eef5ff' stroke='%231260f6' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m7.1 10.2 1.7 1.7 4-4.2' stroke='%231260f6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.buy-exact-page .buy-exact-form-tip i {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 7px;
    background:
        url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2.1 11.1 3.7v3.1c0 2.4-1.5 4.3-4.1 5.1-2.6-.8-4.1-2.7-4.1-5.1V3.7L7 2.1Z' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='m4.8 7.1 1.4 1.4 3-3' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat,
        linear-gradient(135deg, #1260f6, #4d95ff);
}

.buy-exact-page .buy-exact-form-tip i:after {
    content: none;
}

.buy-exact-page .buy-exact-form button i {
    width: 21px;
    height: 21px;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.3 4.4h2l1.7 9.1c.2.8.8 1.4 1.6 1.4h6.7c.8 0 1.4-.5 1.6-1.3l1-5.5H6.1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8.6' cy='17.5' r='1.2' fill='%23fff'/%3E%3Ccircle cx='15.3' cy='17.5' r='1.2' fill='%23fff'/%3E%3C/svg%3E") center / 21px 21px no-repeat;
}

.buy-exact-page .buy-exact-form button i:before {
    content: none;
}

.buy-exact-page .buy-flow-steps article > i {
    width: 32px;
    height: 32px;
    border: 1px solid #d8e6ff;
    border-radius: 10px;
    background-color: #eef5ff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.buy-exact-page .step-form {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.4 3.2h5.1l2.8 2.8v10.1c0 .7-.6 1.3-1.3 1.3H6.4c-.7 0-1.3-.6-1.3-1.3V4.5c0-.7.6-1.3 1.3-1.3Z' stroke='%231260f6' stroke-width='1.8'/%3E%3Cpath d='M11.5 3.4v2.9h2.7M7.4 10h5.2M7.4 13h4' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.buy-exact-page .step-order {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='3.5' width='12' height='13' rx='2' stroke='%231260f6' stroke-width='1.8'/%3E%3Cpath d='M7.2 7.2h5.6M7.2 10h5.6M7.2 12.8h3.8' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.buy-exact-page .step-pay {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.2' y='5.4' width='13.6' height='9.2' rx='2' stroke='%231260f6' stroke-width='1.8'/%3E%3Cpath d='M3.6 8.1h12.8M6.3 12.1h3' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.buy-exact-page .step-open {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3 8.8V6.7a3.7 3.7 0 0 1 7.4 0v2.1' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='4.2' y='8.4' width='11.6' height='8.1' rx='2' stroke='%231260f6' stroke-width='1.8'/%3E%3Cpath d='m7.4 12.5 1.8 1.8 3.7-3.8' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.buy-exact-page .buy-status-preview article i {
    border: 1px solid #d8e6ff;
    border-radius: 14px;
    background-color: #eef5ff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    box-shadow: 0 10px 20px rgba(18, 96, 246, .08);
}

.buy-exact-page .status-hour {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3.8h9M8 21.2h9M9.2 3.8v3.1c0 1 .4 1.9 1.1 2.6l2.2 2.2 2.2-2.2c.7-.7 1.1-1.6 1.1-2.6V3.8M9.2 21.2v-3.1c0-1 .4-1.9 1.1-2.6l2.2-2.2 2.2 2.2c.7.7 1.1 1.6 1.1 2.6v3.1' stroke='%231260f6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 25px 25px !important;
}

.buy-exact-page .status-card {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7' width='17' height='11' rx='2.4' fill='%23164478'/%3E%3Cpath d='M4.8 10.3h15.4M7.2 14.5h4.4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 25px 25px !important;
}

.buy-exact-page .status-ok {
    border-color: #c8efd8 !important;
    background-color: #eafaf1 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12.5' cy='12.5' r='8.5' fill='%2320a346'/%3E%3Cpath d='m8.4 12.8 2.7 2.7 5.7-6' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 25px 25px !important;
}

.buy-exact-page .buy-flow-tip i {
    position: relative;
    font-size: 0;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .38), transparent 33%),
        linear-gradient(135deg, #d29a24, #f0c761);
}

.buy-exact-page .buy-flow-tip i:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 3px;
    height: 8px;
    border-radius: 999px;
    background: #fff;
}

.buy-exact-page .buy-flow-tip i:after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 5px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
}

/* Continue payment page: reuse exact buy-page hero, icons and payment background. */
.continue-pay-page .buy-exact-hero h1 {
    font-size: 38px;
}

.continue-pay-page .buy-exact-grid {
    grid-template-columns: minmax(0, 1fr) 562px;
}

.continue-pay-form {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.continue-pay-form .field-control input[readonly] {
    color: #344760;
    background: transparent;
    cursor: default;
}

.continue-pay-form .field-control > i {
    position: relative;
    top: auto;
    display: block;
    align-self: center;
    justify-self: start;
    margin: 0;
    transform: none;
}

.continue-pay-form .field-order,
.continue-pay-form .field-status {
    background-color: transparent;
}

.continue-pay-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 138px;
    gap: 12px;
    margin-top: 0;
}

.continue-pay-submit,
.continue-pay-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.continue-pay-submit {
    gap: 9px;
    color: #fff;
    background: linear-gradient(135deg, #d6a82f, #c78900);
    box-shadow: 0 14px 26px rgba(198, 137, 0, .22);
}

.continue-pay-submit i {
    width: 22px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.continue-pay-submit.disabled {
    color: #8a6a1a;
    background: #fff5dc;
    box-shadow: none;
}

.continue-pay-back {
    color: #1260f6;
    border: 1px solid #1260f6;
    background: #fff;
}

.continue-pay-flow .buy-flow-steps article {
    min-height: 46px;
}

.download-meta dl {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    margin: 22px 0;
}

.download-meta dt {
    color: var(--muted);
}

.download-meta dd {
    margin: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.download-note {
    margin-top: 12px;
    font-size: 14px;
}

.download-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 4px;
}

.download-flow div {
    position: relative;
    min-height: 132px;
    padding: 18px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #f8fbff;
}

.download-flow div.active {
    border-color: rgba(22, 93, 255, .42);
    background: #f2f7ff;
    box-shadow: 0 12px 26px rgba(22, 93, 255, .08);
}

.download-flow div.done {
    border-color: rgba(22, 163, 74, .32);
    background: #f4fff7;
}

.download-flow i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 8px;
    background: #98a2b3;
    font-style: normal;
    font-weight: 900;
}

.download-flow div.active i {
    background: var(--blue);
}

.download-flow div.done i {
    background: #16a34a;
}

.download-flow b {
    display: block;
    margin: 14px 0 6px;
    color: #10213d;
    font-size: 16px;
}

.download-flow span {
    color: #63728b;
    font-size: 13px;
    line-height: 1.6;
}

.locked-panel {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #fecdca;
    border-radius: 8px;
    background: #fff5f5;
}

.locked-panel strong {
    display: block;
    color: #b42318;
    margin-bottom: 6px;
}

.account-first-panel {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.account-first-panel strong {
    color: #0d3f9f;
}

.download-hero {
    padding: 48px 0 36px;
    border-bottom: 1px solid #dce6f5;
    background:
        radial-gradient(circle at 82% 32%, rgba(22, 93, 255, .13), transparent 30%),
        linear-gradient(112deg, #fff 0%, #fff 52%, #f3f7ff 100%);
}

.download-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    color: var(--blue);
    border: 1px solid #d8e5ff;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(22, 93, 255, .06);
    font-size: 14px;
    font-weight: 900;
}

.download-hero h1 {
    margin: 18px 0 12px;
    color: #071735;
    font-size: 46px;
    line-height: 1.18;
    letter-spacing: 0;
}

.download-hero p {
    max-width: 760px;
    color: #344766;
    font-size: 17px;
    line-height: 1.85;
}

.download-page {
    padding: 34px 0 52px;
    background:
        linear-gradient(180deg, #f8fbff 0%, #fff 48%),
        #fff;
}

.download-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.download-main-card,
.download-price-card,
.download-tutorial-card,
.download-trust-row {
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(26, 54, 101, .08);
}

.download-main-card {
    min-height: 500px;
    padding: 24px;
}

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

.download-card-head span {
    color: var(--blue);
    font-size: 14px;
    font-weight: 900;
}

.download-card-head h2 {
    margin: 8px 0 0;
    color: #071735;
    font-size: 30px;
    line-height: 1.25;
}

.download-status {
    min-width: 82px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.download-status.locked {
    color: #0d3f9f;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

.download-status.pending {
    color: #8b651c;
    border: 1px solid #f1dfaf;
    background: #fff8e8;
}

.download-status.unlocked {
    color: #175c2f;
    border: 1px solid #b7e4c7;
    background: #f0fff5;
}

.download-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0 18px;
}

.download-process article {
    min-height: 128px;
    padding: 18px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #f8fbff;
}

.download-process article.active {
    border-color: rgba(22, 93, 255, .48);
    background:
        linear-gradient(180deg, #f3f8ff, #fff),
        #fff;
    box-shadow: 0 12px 30px rgba(22, 93, 255, .1);
}

.download-process article.done {
    border-color: rgba(22, 163, 74, .34);
    background: #f4fff7;
}

.download-process i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 9px;
    background: #98a2b3;
    font-style: normal;
    font-weight: 900;
}

.download-process article.active i {
    background: linear-gradient(135deg, var(--blue), #2f86ff);
    box-shadow: 0 10px 22px rgba(22, 93, 255, .22);
}

.download-process article.done i {
    background: linear-gradient(135deg, #16a34a, #34d399);
}

.download-process b {
    display: block;
    margin: 14px 0 7px;
    color: #10213d;
    font-size: 17px;
}

.download-process span {
    color: #63728b;
    font-size: 13px;
    line-height: 1.65;
}

.download-version-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.download-version-grid article {
    min-height: 82px;
    padding: 16px;
    border: 1px solid #e4ebf5;
    border-radius: 8px;
    background: #fbfdff;
}

.download-version-grid span {
    display: block;
    color: #63728b;
    font-size: 13px;
}

.download-version-grid b {
    display: block;
    margin-top: 10px;
    overflow-wrap: anywhere;
    color: #10213d;
    font-size: 18px;
}

.download-action-panel {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: center;
    margin-top: 18px;
    padding: 20px 22px;
    border-radius: 8px;
}

.download-action-panel.account {
    border: 1px solid #bfdbfe;
    background:
        linear-gradient(135deg, rgba(239, 246, 255, .96), rgba(255, 255, 255, .98));
}

.download-action-panel.pending {
    border: 1px solid #f1dfaf;
    background:
        linear-gradient(135deg, rgba(255, 248, 232, .98), rgba(255, 255, 255, .98));
}

.download-action-panel.success {
    border: 1px solid #b7e4c7;
    background:
        linear-gradient(135deg, rgba(240, 255, 245, .98), rgba(255, 255, 255, .98));
}

.download-action-panel strong {
    display: block;
    color: #071735;
    font-size: 20px;
}

.download-action-panel p {
    max-width: 520px;
    margin-top: 8px;
    color: #53637a;
    font-size: 14px;
    line-height: 1.65;
}

.download-panel-actions {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

.download-side {
    display: grid;
    gap: 18px;
}

.download-price-card {
    padding: 26px 28px;
    background:
        radial-gradient(circle at 86% 12%, rgba(211, 161, 49, .18), transparent 28%),
        #fff;
}

.download-price-card > span {
    color: #8b651c;
    font-size: 13px;
    font-weight: 900;
}

.download-price {
    margin: 14px 0 10px;
    color: #d2a22e;
    font-size: 50px;
    line-height: .95;
    font-weight: 900;
}

.download-price small {
    color: #071735;
    font-size: 18px;
    font-weight: 900;
}

.download-price-card h3 {
    margin: 0 0 18px;
    color: #071735;
    font-size: 20px;
    line-height: 1.35;
}

.download-price-card ul {
    display: grid;
    gap: 11px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.download-price-card li {
    position: relative;
    padding-left: 24px;
    color: #253a59;
    font-size: 14px;
    font-weight: 800;
}

.download-price-card li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
}

.download-tutorial-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 20px;
}

.download-tutorial-card span {
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
}

.download-tutorial-card b {
    display: block;
    margin: 6px 0;
    color: #071735;
    font-size: 18px;
}

.download-tutorial-card p {
    color: #63728b;
    font-size: 13px;
    line-height: 1.6;
}

.download-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 24px;
    padding: 18px 20px;
}

.download-trust-row article {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 0 18px;
    border-left: 1px solid #e7edf5;
}

.download-trust-row article:first-child {
    border-left: 0;
}

.download-trust-row i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--blue);
    border: 2px solid #a9c3ff;
    border-radius: 8px;
    font-style: normal;
    font-weight: 900;
}

.download-trust-row b {
    display: block;
    overflow: hidden;
    color: #10213d;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.download-trust-row span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #63728b;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Download page mockup-matched layout */
.download-hero .container,
.download-page .container {
    width: min(1280px, calc(100% - 48px));
}

.download-hero {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 28px 0 20px;
    text-align: center;
    border-bottom: 0;
    background:
        linear-gradient(145deg, rgba(229, 238, 255, .78) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(325deg, rgba(229, 238, 255, .82) 0%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(180deg, #fff 0%, #f6faff 100%);
}

.download-hero:before,
.download-hero:after {
    content: "";
    position: absolute;
    width: 760px;
    height: 230px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(209, 224, 249, .65), rgba(255, 255, 255, 0));
    transform: rotate(32deg);
}

.download-hero:before {
    left: -180px;
    top: -72px;
}

.download-hero:after {
    right: -220px;
    bottom: -70px;
    transform: rotate(-26deg);
}

.download-hero-inner {
    position: relative;
    z-index: 1;
}

.download-eyebrow {
    min-height: 34px;
    padding: 0 18px;
    color: var(--blue);
    border: 0;
    border-radius: 999px;
    background: #eaf2ff;
    box-shadow: none;
    font-size: 15px;
}

.download-hero h1 {
    margin: 16px 0 8px;
    color: #071735;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 900;
    text-align: center;
}

.download-hero h1 em {
    color: var(--blue);
    font-style: normal;
}

.download-hero p {
    max-width: none;
    color: #1f2f4a;
    font-size: 16px;
    line-height: 1.75;
}

.download-page {
    padding: 0 0 58px;
    background:
        radial-gradient(circle at 14% 20%, rgba(22, 93, 255, .08), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #fff 55%);
}

.download-shell {
    grid-template-columns: minmax(0, 1fr) 374px;
    gap: 26px;
    align-items: start;
    transform: translateY(-12px);
}

.download-main-card,
.download-price-card,
.download-tutorial-card,
.download-trust-row {
    border: 1px solid #cfdcf0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(22, 45, 86, .08);
}

.download-main-card {
    min-height: 0;
    padding: 34px 40px 20px;
}

.download-main-card h2 {
    margin: 0 0 20px;
    color: #071735;
    font-size: 26px;
    line-height: 1.25;
}

.download-process {
    display: grid;
    grid-template-columns: 240px 80px 190px 80px 190px;
    gap: 0;
    align-items: center;
    margin: 0 0 20px;
}

.download-process article {
    min-height: 66px;
    display: grid;
    grid-template-columns: 42px 28px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.download-process article.active {
    border: 1px solid var(--blue);
    background: #fff;
    box-shadow: 0 10px 25px rgba(22, 93, 255, .1);
}

.download-process article.done {
    border-color: #b7e4c7;
    background: #f7fff9;
}

.download-process i {
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #cbd7ea;
    color: #6b7a91;
    font-size: 18px;
    font-weight: 900;
}

.download-process article.active i {
    color: #fff;
    border-color: var(--blue);
    background: linear-gradient(135deg, var(--blue), #2f86ff);
    box-shadow: 0 10px 24px rgba(22, 93, 255, .24);
}

.download-process article.done i {
    color: #fff;
    border-color: #16a34a;
    background: #16a34a;
}

.download-step-icon {
    width: 28px;
    height: 28px;
    display: block;
    position: relative;
}

.download-step-icon:before,
.download-step-icon:after {
    content: "";
    position: absolute;
}

.account-icon:before {
    left: 8px;
    top: 3px;
    width: 10px;
    height: 10px;
    border: 3px solid var(--blue);
    border-radius: 50%;
}

.account-icon:after {
    left: 4px;
    bottom: 2px;
    width: 18px;
    height: 11px;
    border: 3px solid var(--blue);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 0;
}

.cart-icon:before {
    left: 4px;
    top: 7px;
    width: 17px;
    height: 12px;
    border: 3px solid #8e98a8;
    border-top: 0;
    transform: skewX(-12deg);
}

.cart-icon:after {
    left: 8px;
    bottom: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8e98a8;
    box-shadow: 10px 0 0 #8e98a8;
}

.cloud-icon:before {
    left: 3px;
    top: 7px;
    width: 22px;
    height: 15px;
    border-radius: 12px;
    background: #8e98a8;
}

.cloud-icon:after {
    left: 12px;
    top: 5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #fff;
}

.download-process b {
    margin: 0;
    color: #071735;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
}

.download-process small {
    display: block;
    margin-top: 5px;
    color: #71819a;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}

.process-dash {
    height: 2px;
    margin: 0 20px;
    background-image: linear-gradient(90deg, #bfc9d9 45%, transparent 45%);
    background-size: 10px 2px;
}

.download-version-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    min-height: 78px;
    overflow: hidden;
    border: 1px solid #d4e2f6;
    border-radius: 8px;
    background: linear-gradient(180deg, #f9fcff, #fff);
}

.download-version-grid article {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: center;
    min-height: 78px;
    padding: 15px 26px;
    border: 0;
    border-left: 1px solid #d4e2f6;
    border-radius: 0;
    background: transparent;
}

.download-version-grid article:first-child {
    border-left: 0;
}

.version-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #cfe0ff;
    border-radius: 50%;
    background: #eef5ff;
    position: relative;
}

.version-icon:before,
.version-icon:after {
    content: "";
    position: absolute;
}

.version-icon.tag:before {
    width: 18px;
    height: 18px;
    border: 3px solid var(--blue);
    border-radius: 5px;
    transform: rotate(45deg);
}

.version-icon.tag:after {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
    top: 16px;
    left: 16px;
}

.version-icon.file:before {
    width: 17px;
    height: 22px;
    border: 3px solid var(--blue);
    border-radius: 3px;
}

.version-icon.file:after {
    width: 10px;
    height: 3px;
    background: var(--blue);
    box-shadow: 0 7px 0 var(--blue);
}

.version-icon.calendar:before {
    width: 22px;
    height: 20px;
    border: 3px solid var(--blue);
    border-radius: 4px;
}

.version-icon.calendar:after {
    width: 16px;
    height: 3px;
    top: 16px;
    background: var(--blue);
}

.download-version-grid span {
    color: #64748b;
    font-size: 13px;
}

.download-version-grid b {
    margin-top: 6px;
    color: #071735;
    font-size: 20px;
    line-height: 1.15;
    white-space: nowrap;
}

.download-action-panel {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 22px;
    align-items: center;
    min-height: 142px;
    margin-top: 18px;
    padding: 20px 68px 20px 58px;
    border: 1px solid #cfe0ff;
    border-radius: 8px;
}

.download-action-panel.account,
.download-action-panel.pending,
.download-action-panel.success {
    background: linear-gradient(180deg, #fbfdff, #fff);
}

.download-user-badge {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border: 1px solid #c8daf8;
    border-radius: 50%;
    background: #eaf3ff;
    box-shadow: inset 0 0 0 8px #dbeaff;
    position: relative;
}

.download-user-badge:before,
.download-user-badge:after {
    content: "";
    position: absolute;
}

.login-badge:before {
    width: 16px;
    height: 16px;
    top: 18px;
    border-radius: 50%;
    background: var(--blue);
}

.login-badge:after {
    width: 30px;
    height: 18px;
    bottom: 17px;
    border-radius: 20px 20px 6px 6px;
    background: var(--blue);
}

.pay-badge:before {
    width: 34px;
    height: 24px;
    border: 4px solid #d2a22e;
    border-radius: 8px;
}

.pay-badge:after {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d2a22e;
}

.success-badge:before {
    width: 34px;
    height: 18px;
    border-left: 5px solid #16a34a;
    border-bottom: 5px solid #16a34a;
    transform: rotate(-45deg) translate(2px, -3px);
}

.download-action-panel strong {
    color: #071735;
    font-size: 20px;
    line-height: 1.3;
}

.download-action-panel p {
    max-width: 560px;
    margin-top: 8px;
    color: #53627a;
    font-size: 14px;
    line-height: 1.75;
}

.download-panel-actions {
    margin-top: 14px;
    gap: 12px;
}

.download-panel-actions .primary-btn,
.download-panel-actions .outline-btn {
    min-width: 168px;
    min-height: 44px;
    font-size: 16px;
}

.download-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 14px 0 0;
    color: #7586a0;
    font-size: 14px;
}

.download-security-note i {
    width: 28px;
    height: 32px;
    display: inline-block;
    border: 2px solid #9db0ca;
    border-radius: 0 0 10px 10px;
    position: relative;
}

.download-security-note i:before {
    content: "";
    position: absolute;
    left: 5px;
    top: -10px;
    width: 14px;
    height: 14px;
    border: 2px solid #9db0ca;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.download-side {
    gap: 10px;
}

.download-price-card {
    min-height: 342px;
    padding: 28px 30px 24px;
    background:
        radial-gradient(circle at 87% 12%, rgba(210, 162, 46, .15), transparent 26%),
        #fffefb;
}

.price-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.download-price {
    margin: 0 0 12px;
    color: #d2a22e;
    font-size: 52px;
}

.download-price small {
    color: #071735;
    font-size: 20px;
}

.gold-crown {
    width: 64px;
    height: 64px;
    display: block;
    border-radius: 16px;
    background: linear-gradient(135deg, #d2a22e, #f3ce72);
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
    position: relative;
}

.gold-crown:before {
    content: "♛";
    position: absolute;
    inset: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .58);
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
    font-size: 27px;
    font-style: normal;
}

.download-price-card h3 {
    margin: 0 0 18px;
    font-size: 17px;
}

.download-price-card ul {
    gap: 10px;
    margin-bottom: 20px;
}

.download-price-card li {
    padding-left: 30px;
    color: #21324d;
    font-size: 14px;
}

.download-price-card li:before {
    top: 2px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #c89725;
    content: "✓";
    font-size: 12px;
}

.gold-btn {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #d4a32c, #c69120);
    box-shadow: 0 14px 28px rgba(198, 145, 32, .25);
    font-size: 16px;
    font-weight: 900;
}

.gold-btn span {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
}

.gold-btn span:before {
    content: "";
    position: absolute;
    left: 1px;
    top: 5px;
    width: 14px;
    height: 9px;
    border: 2px solid #fff;
    border-top: 0;
    transform: skewX(-12deg);
}

.gold-btn span:after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 9px 0 0 #fff;
}

.download-tutorial-card {
    min-height: 134px;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px 24px;
}

.tutorial-film-icon {
    width: 54px;
    height: 54px;
    display: block;
    border: 3px solid var(--blue);
    border-radius: 8px;
    position: relative;
}

.tutorial-film-icon:before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    width: 0;
    height: 0;
    border-left: 16px solid var(--blue);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.tutorial-film-icon:after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    top: -3px;
    height: 12px;
    background-image: repeating-linear-gradient(90deg, var(--blue) 0 7px, transparent 7px 13px);
}

.download-tutorial-card b {
    margin: 0 0 6px;
    font-size: 19px;
}

.download-tutorial-card p {
    display: -webkit-box;
    max-width: 230px;
    overflow: hidden;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.download-tutorial-card .outline-btn.small {
    min-width: 126px;
    min-height: 36px;
    color: var(--blue);
    border-color: rgba(22, 93, 255, .8);
}

.download-trust-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 96px;
    margin-top: -16px;
    padding: 0;
    transform: translateY(8px);
}

.download-trust-row article {
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 0 72px;
}

.download-trust-row i {
    width: 44px;
    height: 44px;
    color: #c89725;
    border-color: #d6a73c;
    border-radius: 10px;
    font-size: 20px;
}

.download-trust-row b {
    font-size: 17px;
}

.download-trust-row span {
    font-size: 14px;
}

.tutorial-hero .container,
.tutorial-page .container {
    width: min(1280px, calc(100% - 48px));
}

.tutorial-hero {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 28px 0 20px;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(229, 238, 255, .78) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(325deg, rgba(229, 238, 255, .82) 0%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(180deg, #fff 0%, #f6faff 100%);
}

.tutorial-hero:before,
.tutorial-hero:after {
    content: "";
    position: absolute;
    width: 760px;
    height: 230px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(209, 224, 249, .65), rgba(255, 255, 255, 0));
    transform: rotate(32deg);
}

.tutorial-hero:before {
    left: -180px;
    top: -72px;
}

.tutorial-hero:after {
    right: -220px;
    bottom: -70px;
    transform: rotate(-26deg);
}

.tutorial-hero-inner {
    position: relative;
    z-index: 1;
}

.tutorial-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 18px;
    color: var(--blue);
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 15px;
    font-weight: 900;
}

.tutorial-hero h1 {
    margin: 16px 0 8px;
    color: #071735;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 900;
    text-align: center;
}

.tutorial-hero h1 em {
    color: var(--blue);
    font-style: normal;
}

.tutorial-hero p {
    max-width: none;
    color: #1f2f4a;
    font-size: 16px;
    line-height: 1.75;
}

.tutorial-page {
    padding: 0 0 58px;
    background:
        radial-gradient(circle at 14% 20%, rgba(22, 93, 255, .08), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #fff 55%);
}

.tutorial-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 374px;
    gap: 26px;
    align-items: start;
    transform: translateY(-12px);
}

.tutorial-main-card,
.tutorial-price-card,
.tutorial-download-card,
.tutorial-trust-row {
    border: 1px solid #cfdcf0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(22, 45, 86, .08);
}

.tutorial-main-card {
    min-height: 0;
    padding: 22px 32px 18px;
}

.tutorial-main-card h2 {
    margin: 0 0 16px;
    color: #071735;
    font-size: 24px;
    line-height: 1.25;
}

.tutorial-process {
    display: grid;
    grid-template-columns: 220px 78px 200px 78px 210px;
    gap: 0;
    align-items: center;
    margin: 0 0 14px;
}

.tutorial-process article {
    min-height: 66px;
    display: grid;
    grid-template-columns: 42px 28px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.tutorial-process article.active {
    border: 1px solid var(--blue);
    background: #fff;
    box-shadow: 0 10px 25px rgba(22, 93, 255, .1);
}

.tutorial-process article.done {
    border: 1px solid #b7e4c7;
    background: #f7fff9;
}

.tutorial-process i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #6b7a91;
    border: 1px solid #cbd7ea;
    border-radius: 50%;
    background: #fff;
    font-style: normal;
    font-size: 18px;
    font-weight: 900;
}

.tutorial-process article.active i {
    color: #fff;
    border-color: var(--blue);
    background: linear-gradient(135deg, var(--blue), #2f86ff);
    box-shadow: 0 10px 24px rgba(22, 93, 255, .24);
}

.tutorial-process article.done i {
    color: #fff;
    border-color: #16a34a;
    background: #16a34a;
}

.tutorial-step-icon {
    width: 28px;
    height: 28px;
    display: block;
    position: relative;
}

.tutorial-step-icon:before,
.tutorial-step-icon:after {
    content: "";
    position: absolute;
}

.tutorial-step-icon.account-icon:before {
    left: 8px;
    top: 3px;
    width: 10px;
    height: 10px;
    border: 3px solid var(--blue);
    border-radius: 50%;
}

.tutorial-step-icon.account-icon:after {
    left: 4px;
    bottom: 2px;
    width: 18px;
    height: 11px;
    border: 3px solid var(--blue);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 0;
}

.tutorial-step-icon.cart-icon:before {
    left: 4px;
    top: 7px;
    width: 17px;
    height: 12px;
    border: 3px solid #8e98a8;
    border-top: 0;
    transform: skewX(-12deg);
}

.tutorial-step-icon.cart-icon:after {
    left: 8px;
    bottom: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8e98a8;
    box-shadow: 10px 0 0 #8e98a8;
}

.tutorial-step-icon.lock-icon:before {
    left: 6px;
    bottom: 2px;
    width: 17px;
    height: 16px;
    border-radius: 4px;
    background: #8e98a8;
}

.tutorial-step-icon.lock-icon:after {
    left: 9px;
    top: 2px;
    width: 10px;
    height: 12px;
    border: 3px solid #8e98a8;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.tutorial-process b {
    margin: 0;
    color: #071735;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
}

.tutorial-process small {
    display: block;
    margin-top: 5px;
    color: #71819a;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}

.tutorial-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.tutorial-lesson-card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 88px;
    gap: 10px;
    align-items: center;
    min-height: 72px;
    padding: 10px;
    border: 1px solid #d6e3f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(26, 54, 101, .04);
}

.tutorial-thumb {
    position: relative;
    height: 52px;
    overflow: hidden;
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(7, 29, 61, .92), rgba(22, 93, 255, .68)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 4px, transparent 4px 12px);
}

.tutorial-thumb:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 54px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
    box-shadow: 0 13px 0 rgba(255, 255, 255, .18);
}

.play-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, .86);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.play-mark:after {
    content: "";
    position: absolute;
    left: 12px;
    top: 8px;
    width: 0;
    height: 0;
    border-left: 12px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.lock-mark,
.unlock-mark {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 20px;
    height: 16px;
    border-radius: 4px;
    background: #fff;
}

.lock-mark:before,
.unlock-mark:before {
    content: "";
    position: absolute;
    left: 5px;
    top: -8px;
    width: 8px;
    height: 9px;
    border: 2px solid #fff;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.lock-mark:after,
.unlock-mark:after {
    content: "";
    position: absolute;
    left: 9px;
    top: 5px;
    width: 3px;
    height: 7px;
    border-radius: 2px;
    background: var(--blue);
}

.unlock-mark {
    background: #d1fae5;
}

.tutorial-lesson-info {
    min-width: 0;
}

.tutorial-lesson-info h3 {
    display: block;
    overflow: hidden;
    margin: 0 0 7px;
    color: #071735;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tutorial-lesson-info h3 em {
    color: var(--blue);
    font-style: normal;
}

.tutorial-lesson-info p {
    color: #62728c;
    font-size: 13px;
    line-height: 1.2;
}

.tutorial-chip {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--blue);
    border: 1px solid #d4e3ff;
    border-radius: 8px;
    background: #f3f8ff;
    font-size: 11px;
    font-weight: 900;
}

.tutorial-chip i {
    width: 11px;
    height: 9px;
    border-radius: 2px;
    background: var(--blue);
    position: relative;
}

.tutorial-chip i:before {
    content: "";
    position: absolute;
    left: 3px;
    top: -6px;
    width: 5px;
    height: 6px;
    border: 2px solid var(--blue);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

.unlocked-chip {
    color: #16833a;
    border-color: #b7e4c7;
    background: #f0fff5;
}

.tutorial-action-panel {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 22px;
    align-items: center;
    min-height: 82px;
    margin-top: 14px;
    padding: 16px 22px;
    border: 1px solid #cfe0ff;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdff, #fff);
}

.tutorial-panel-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #2f86ff);
    position: relative;
}

.tutorial-panel-icon:before,
.tutorial-panel-icon:after {
    content: "";
    position: absolute;
}

.locked-panel-icon:before {
    width: 22px;
    height: 18px;
    bottom: 16px;
    border-radius: 4px;
    background: #fff;
}

.locked-panel-icon:after {
    width: 12px;
    height: 12px;
    top: 14px;
    border: 3px solid #fff;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.play-panel-icon:before {
    width: 0;
    height: 0;
    border-left: 18px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    transform: translateX(2px);
}

.tutorial-action-panel strong {
    display: block;
    color: #071735;
    font-size: 20px;
}

.tutorial-action-panel p {
    margin-top: 6px;
    color: #53627a;
    font-size: 14px;
    line-height: 1.5;
}

.tutorial-panel-actions {
    display: flex;
    gap: 12px;
}

.tutorial-panel-actions .primary-btn,
.tutorial-panel-actions .gold-outline-btn {
    min-width: 148px;
    min-height: 40px;
}

.gold-outline-btn {
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid #c89725;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c89725;
    background: #fff;
    font-weight: 900;
}

.gold-outline-btn span {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
}

.gold-outline-btn span:before {
    content: "";
    position: absolute;
    left: 1px;
    top: 5px;
    width: 14px;
    height: 9px;
    border: 2px solid #c89725;
    border-top: 0;
    transform: skewX(-12deg);
}

.gold-outline-btn span:after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c89725;
    box-shadow: 9px 0 0 #c89725;
}

.tutorial-side {
    display: grid;
    gap: 14px;
}

.tutorial-price-card {
    min-height: 360px;
    padding: 30px 30px 28px;
    background:
        radial-gradient(circle at 87% 12%, rgba(210, 162, 46, .15), transparent 26%),
        #fffefb;
}

.tutorial-price-card h3 {
    margin: 0 0 20px;
    color: #071735;
    font-size: 20px;
    line-height: 1.35;
}

.tutorial-price-card ul {
    display: grid;
    gap: 13px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.tutorial-price-card li {
    position: relative;
    padding-left: 30px;
    color: #21324d;
    font-size: 14px;
    font-weight: 800;
}

.tutorial-price-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #c89725;
    font-size: 12px;
}

.tutorial-download-card {
    min-height: 118px;
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px 28px;
}

.download-box-icon {
    width: 58px;
    height: 58px;
    display: block;
    border: 3px solid var(--blue);
    border-radius: 8px;
    position: relative;
}

.download-box-icon:before {
    content: "";
    position: absolute;
    left: 25px;
    top: 12px;
    width: 4px;
    height: 24px;
    background: var(--blue);
}

.download-box-icon:after {
    content: "";
    position: absolute;
    left: 17px;
    top: 26px;
    width: 18px;
    height: 18px;
    border-left: 4px solid var(--blue);
    border-bottom: 4px solid var(--blue);
    transform: rotate(-45deg);
}

.tutorial-download-card b {
    display: block;
    margin-bottom: 6px;
    color: #071735;
    font-size: 20px;
}

.tutorial-download-card p {
    max-width: 220px;
    margin-bottom: 12px;
    color: #53627a;
    font-size: 14px;
    line-height: 1.45;
}

.tutorial-download-card .outline-btn.small {
    min-width: 126px;
    min-height: 36px;
    color: var(--blue);
    border-color: rgba(22, 93, 255, .8);
}

.tutorial-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 96px;
    margin-top: 2px;
    padding: 0;
}

.tutorial-trust-row article {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 0 72px;
    border-left: 1px solid #e7edf5;
}

.tutorial-trust-row article:first-child {
    border-left: 0;
}

.tutorial-trust-row i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #c89725;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    font-style: normal;
    font-size: 20px;
    font-weight: 900;
}

.tutorial-trust-row b {
    display: block;
    overflow: hidden;
    color: #10213d;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tutorial-trust-row span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #63728b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.changelog-hero .container,
.changelog-page .container {
    width: min(1280px, calc(100% - 48px));
}

.changelog-hero {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 28px 0 20px;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(229, 238, 255, .78) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(325deg, rgba(229, 238, 255, .82) 0%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(180deg, #fff 0%, #f6faff 100%);
}

.changelog-hero:before,
.changelog-hero:after {
    content: "";
    position: absolute;
    width: 760px;
    height: 230px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(209, 224, 249, .65), rgba(255, 255, 255, 0));
    transform: rotate(32deg);
}

.changelog-hero:before {
    left: -180px;
    top: -72px;
}

.changelog-hero:after {
    right: -220px;
    bottom: -70px;
    transform: rotate(-26deg);
}

.changelog-hero-inner {
    position: relative;
    z-index: 1;
}

.changelog-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 18px;
    color: var(--blue);
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 15px;
    font-weight: 900;
}

.changelog-hero h1 {
    margin: 16px 0 8px;
    color: #071735;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 900;
    text-align: center;
}

.changelog-hero h1 em {
    color: var(--blue);
    font-style: normal;
}

.changelog-hero p {
    max-width: none;
    color: #1f2f4a;
    font-size: 16px;
    line-height: 1.75;
}

.changelog-page {
    padding: 0 0 58px;
    background:
        radial-gradient(circle at 14% 20%, rgba(22, 93, 255, .08), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #fff 55%);
}

.changelog-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 374px;
    gap: 26px;
    align-items: start;
    transform: translateY(-12px);
}

.changelog-main-card,
.version-status-card,
.update-assurance-card,
.changelog-trust-row {
    border: 1px solid #cfdcf0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(22, 45, 86, .08);
}

.changelog-main-card {
    min-height: 0;
    padding: 24px 34px 20px;
}

.changelog-main-card h2 {
    margin: 0 0 16px;
    color: #071735;
    font-size: 24px;
    line-height: 1.25;
}

.changelog-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    min-height: 78px;
    overflow: hidden;
    border: 1px solid #d4e2f6;
    border-radius: 8px;
    background: linear-gradient(180deg, #f9fcff, #fff);
}

.changelog-summary-grid article {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: center;
    min-height: 78px;
    padding: 14px 24px;
    border-left: 1px solid #d4e2f6;
}

.changelog-summary-grid article:first-child {
    border-left: 0;
}

.summary-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #cfe0ff;
    border-radius: 50%;
    background: #eef5ff;
    position: relative;
}

.summary-icon:before,
.summary-icon:after {
    content: "";
    position: absolute;
}

.summary-icon.version:before {
    width: 20px;
    height: 20px;
    border: 3px solid var(--blue);
    border-radius: 6px;
}

.summary-icon.version:after {
    width: 10px;
    height: 3px;
    background: var(--blue);
    box-shadow: 0 7px 0 var(--blue);
}

.summary-icon.calendar:before {
    width: 22px;
    height: 20px;
    border: 3px solid var(--blue);
    border-radius: 4px;
}

.summary-icon.calendar:after {
    width: 16px;
    height: 3px;
    top: 16px;
    background: var(--blue);
}

.summary-icon.refresh:before {
    width: 21px;
    height: 21px;
    border: 3px solid var(--blue);
    border-left-color: transparent;
    border-radius: 50%;
}

.summary-icon.refresh:after {
    right: 8px;
    top: 9px;
    width: 0;
    height: 0;
    border-left: 7px solid var(--blue);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: rotate(32deg);
}

.changelog-summary-grid span {
    display: block;
    color: #64748b;
    font-size: 13px;
}

.changelog-summary-grid b {
    display: block;
    margin-top: 7px;
    color: #071735;
    font-size: 20px;
    line-height: 1.15;
}

.changelog-timeline {
    position: relative;
    display: grid;
    gap: 9px;
    margin-top: 16px;
    padding-left: 24px;
}

.changelog-timeline:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 15px;
    bottom: 18px;
    width: 2px;
    background: #dbe6f5;
}

.changelog-entry {
    position: relative;
    min-height: 76px;
    padding: 11px 16px;
    border: 1px solid #e1e9f5;
    border-radius: 8px;
    background: #fff;
}

.changelog-entry.latest {
    border-color: #cfe0ff;
    background: linear-gradient(180deg, #f6faff, #fff);
    box-shadow: 0 12px 28px rgba(22, 93, 255, .07);
}

.timeline-dot {
    position: absolute;
    left: -22px;
    top: 19px;
    width: 14px;
    height: 14px;
    border: 3px solid #dce9ff;
    border-radius: 50%;
    background: var(--blue);
    z-index: 1;
}

.changelog-entry-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.changelog-entry-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.changelog-entry-head b {
    display: inline-block;
    margin-right: 0;
    color: #071735;
    font-size: 18px;
}

.changelog-entry-head time {
    color: #6d7d95;
    font-size: 13px;
    font-weight: 800;
}

.changelog-entry-head span {
    min-height: 26px;
    padding: 5px 11px;
    color: var(--blue);
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 12px;
    font-weight: 900;
}

.changelog-entry-head span.stable {
    color: #16833a;
    background: #f0fff5;
}

.changelog-entry h3 {
    margin: 6px 0 5px;
    color: #10213d;
    font-size: 16px;
}

.changelog-entry ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.changelog-entry li {
    position: relative;
    padding-left: 18px;
    color: #53627a;
    font-size: 12px;
    line-height: 1.25;
}

.changelog-entry li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
}

.changelog-side {
    display: grid;
    gap: 14px;
}

.version-status-card {
    padding: 24px 28px;
    background: #fff;
}

.version-status-card h3,
.update-assurance-card h3 {
    margin: 0 0 16px;
    color: #071735;
    font-size: 22px;
}

.version-status-card dl {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 11px 12px;
    margin: 0 0 18px;
}

.version-status-card dt {
    color: #65758d;
    font-size: 14px;
}

.version-status-card dd {
    margin: 0;
    color: #10213d;
    text-align: right;
    font-weight: 900;
}

.version-status-card dd.status-ok {
    color: #16a34a;
}

.update-assurance-card {
    min-height: 214px;
    padding: 22px 28px;
    background:
        radial-gradient(circle at 87% 12%, rgba(210, 162, 46, .15), transparent 26%),
        #fffefb;
}

.assurance-gold-icon {
    width: 46px;
    height: 46px;
    display: block;
    margin-bottom: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #d2a22e, #f3ce72);
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
    position: relative;
}

.assurance-gold-icon:before {
    content: "✓";
    position: absolute;
    inset: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .58);
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
}

.update-assurance-card ul {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.update-assurance-card li {
    position: relative;
    padding-left: 28px;
    color: #21324d;
    font-size: 13px;
    font-weight: 800;
}

.update-assurance-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #c89725;
    font-size: 12px;
}

.update-assurance-card p {
    color: #8b651c;
    font-size: 13px;
    line-height: 1.45;
}

.changelog-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 96px;
    margin-top: 2px;
    padding: 0;
}

.changelog-trust-row article {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 0 72px;
    border-left: 1px solid #e7edf5;
}

.changelog-trust-row article:first-child {
    border-left: 0;
}

.changelog-trust-row i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #c89725;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    font-style: normal;
    font-size: 20px;
    font-weight: 900;
}

.changelog-trust-row b {
    display: block;
    overflow: hidden;
    color: #10213d;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.changelog-trust-row span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #63728b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-hero .container,
.agent-page .container {
    width: min(1280px, calc(100% - 48px));
}

.agent-hero {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 28px 0 20px;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(229, 238, 255, .78) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(325deg, rgba(229, 238, 255, .82) 0%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(180deg, #fff 0%, #f6faff 100%);
}

.agent-hero:before,
.agent-hero:after {
    content: "";
    position: absolute;
    width: 760px;
    height: 230px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(209, 224, 249, .65), rgba(255, 255, 255, 0));
    transform: rotate(32deg);
}

.agent-hero:before {
    left: -180px;
    top: -72px;
}

.agent-hero:after {
    right: -220px;
    bottom: -70px;
    transform: rotate(-26deg);
}

.agent-hero-inner {
    position: relative;
    z-index: 1;
}

.agent-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 18px;
    color: var(--blue);
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 15px;
    font-weight: 900;
}

.agent-hero h1 {
    margin: 16px 0 8px;
    color: #071735;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 900;
    text-align: center;
}

.agent-hero h1 em {
    color: var(--blue);
    font-style: normal;
}

.agent-hero p {
    max-width: none;
    color: #1f2f4a;
    font-size: 16px;
    line-height: 1.75;
}

.agent-page {
    padding: 0 0 58px;
    background:
        radial-gradient(circle at 14% 20%, rgba(22, 93, 255, .08), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #fff 55%);
}

.agent-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 374px;
    gap: 26px;
    align-items: start;
    transform: translateY(-12px);
}

.agent-main-card,
.agent-cert-card,
.agent-flow-card,
.agent-contact-card,
.agent-trust-row {
    border: 1px solid #cfdcf0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(22, 45, 86, .08);
}

.agent-main-card {
    min-height: 0;
    padding: 24px 32px 22px;
}

.agent-main-card h2 {
    margin: 0 0 18px;
    color: #071735;
    font-size: 24px;
    line-height: 1.25;
}

.agent-verify-form {
    display: grid;
    grid-template-columns: 1fr 148px;
    gap: 12px;
}

.agent-verify-form label {
    position: relative;
    display: block;
}

.agent-verify-form label i {
    position: absolute;
    left: 17px;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    transform: translateY(-50%);
}

.agent-verify-form label i:after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 9px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
    transform: rotate(45deg);
}

.agent-verify-form input {
    height: 48px;
    padding-left: 50px;
    color: #071735;
    border-color: rgba(22, 93, 255, .78);
    font-size: 16px;
}

.agent-verify-form .primary-btn {
    min-height: 48px;
    font-size: 16px;
}

.agent-verify-form .primary-btn span {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-right: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
}

.agent-verify-form .primary-btn span:after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 9px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    transform: rotate(45deg);
}

.agent-example-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    margin: 12px 0 18px;
    padding: 0 16px;
    color: #28405f;
    border: 1px solid #d5e3f8;
    border-radius: 8px;
    background: #eef5ff;
    font-size: 14px;
}

.agent-example-strip i {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: var(--blue);
    font-style: normal;
    font-weight: 900;
}

.agent-verify-result {
    min-height: 112px;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 22px;
    align-items: center;
    margin: 0;
    padding: 22px 168px;
    color: #071735;
    border: 1px dashed #cfe0ff;
    border-radius: 8px;
    background: #fff;
}

.agent-verify-result.empty {
    border-style: dashed;
}

.agent-verify-result.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    color: var(--blue);
    border: 1px dashed #cfe0ff;
    border-radius: 8px;
    background: #f8fbff;
    font-weight: 900;
}

.agent-verify-result strong {
    display: block;
    margin-bottom: 7px;
    color: #071735;
    font-size: 22px;
}

.agent-verify-result p {
    color: #53627a;
    font-size: 15px;
    line-height: 1.55;
}

.agent-wait-icon,
.agent-error-icon {
    width: 68px;
    height: 68px;
    display: block;
    border-radius: 50%;
    background: #dceaff;
    box-shadow: inset 0 0 0 10px #eef5ff;
    position: relative;
}

.agent-wait-icon:before {
    content: "";
    position: absolute;
    left: 21px;
    top: 20px;
    width: 26px;
    height: 30px;
    background: var(--blue);
    clip-path: polygon(50% 0, 90% 16%, 90% 62%, 50% 100%, 10% 62%, 10% 16%);
}

.agent-wait-icon:after {
    content: "✓";
    position: absolute;
    left: 27px;
    top: 25px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.agent-error-icon {
    background: #fee2e2;
    box-shadow: inset 0 0 0 10px #fff5f5;
}

.agent-error-icon:before,
.agent-error-icon:after {
    content: "";
    position: absolute;
    left: 23px;
    top: 32px;
    width: 24px;
    height: 4px;
    border-radius: 999px;
    background: #ef4444;
}

.agent-error-icon:before {
    transform: rotate(45deg);
}

.agent-error-icon:after {
    transform: rotate(-45deg);
}

.agent-sample-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    margin: 20px 0 12px;
    color: #5f718b;
    font-size: 14px;
}

.agent-sample-title span {
    height: 1px;
    background: #d9e4f2;
}

.agent-sample-card,
.agent-verify-result.success {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 18px;
    align-items: start;
    min-height: 158px;
    padding: 22px 26px;
    color: #10213d;
    border: 1px solid #a8dfb9;
    border-radius: 8px;
    background: linear-gradient(180deg, #f6fff8, #fff);
}

.agent-verify-result.success {
    margin-top: 0;
}

.agent-success-shield {
    width: 58px;
    height: 58px;
    display: block;
    border-radius: 50%;
    background: #dff8e8;
    position: relative;
}

.agent-success-shield:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 9px;
    width: 30px;
    height: 36px;
    background: #2faf55;
    clip-path: polygon(50% 0, 88% 18%, 88% 62%, 50% 100%, 12% 62%, 12% 18%);
}

.agent-success-shield:after {
    content: "✓";
    position: absolute;
    left: 22px;
    top: 16px;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
}

.agent-sample-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.agent-sample-head strong {
    color: #179044;
    font-size: 22px;
}

.agent-sample-head em {
    min-height: 30px;
    padding: 6px 16px;
    color: #16833a;
    border-radius: 999px;
    background: #e4f8ea;
    font-style: normal;
    font-weight: 900;
}

.agent-sample-card dl,
.agent-live-result dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin: 0;
    border: 1px solid #d7e2f0;
    border-radius: 8px;
    background: #fff;
}

.agent-live-result dl {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.agent-sample-card dl div,
.agent-live-result dl div {
    padding: 12px 18px;
    border-left: 1px solid #e4ebf5;
}

.agent-sample-card dl div:first-child,
.agent-live-result dl div:first-child {
    border-left: 0;
}

.agent-sample-card dt,
.agent-live-result dt {
    color: #64748b;
    font-size: 13px;
}

.agent-sample-card dd,
.agent-live-result dd {
    margin: 7px 0 0;
    color: #10213d;
    font-size: 15px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.agent-sample-card p,
.agent-live-result p {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin-top: 0;
    padding: 0 14px;
    color: #a76b00;
    border: 1px solid #f1dfaf;
    border-radius: 8px;
    background: #fff8e8;
    font-size: 13px;
    font-weight: 800;
}

.agent-sample-card p i,
.agent-live-result p i {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #d39a22;
    font-style: normal;
    font-size: 12px;
}

.agent-side {
    display: grid;
    gap: 14px;
}

.agent-cert-card {
    min-height: 234px;
    display: grid;
    grid-template-columns: 1fr 136px;
    gap: 16px;
    padding: 26px 28px;
}

.agent-cert-card h3,
.agent-flow-card h3 {
    margin: 0 0 16px;
    color: #071735;
    font-size: 22px;
}

.agent-cert-card ul {
    display: grid;
    gap: 11px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.agent-cert-card li {
    position: relative;
    padding-left: 30px;
    color: #21324d;
    font-size: 15px;
    font-weight: 900;
}

.agent-cert-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #c89725;
    font-size: 12px;
}

.agent-cert-card span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 236px;
    padding: 0 18px;
    color: #c28716;
    border: 1px solid #d3a131;
    border-radius: 8px;
    background: #fffdfa;
    font-weight: 900;
}

.agent-cert-card span i {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: #c89725;
    clip-path: polygon(50% 0, 88% 18%, 88% 62%, 50% 100%, 12% 62%, 12% 18%);
}

.agent-gold-shield {
    width: 118px;
    height: 118px;
    display: block;
    align-self: center;
    justify-self: center;
    background: linear-gradient(135deg, #d2a22e, #f3ce72);
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
    position: relative;
}

.agent-gold-shield:before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 5px solid #fff;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.agent-gold-shield:after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 52px;
    font-weight: 900;
}

.agent-flow-card {
    min-height: 128px;
    padding: 22px 28px;
}

.agent-flow-steps {
    display: grid;
    grid-template-columns: 1fr 32px 1fr 32px 1fr;
    gap: 6px;
    align-items: center;
}

.agent-flow-steps article {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #21324d;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.agent-flow-steps article i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--blue);
    border-radius: 50%;
    background: #eaf2ff;
    font-style: normal;
    font-size: 18px;
    font-weight: 900;
}

.agent-flow-steps article:first-child i {
    color: #fff;
    background: var(--blue);
}

.agent-flow-steps em {
    height: 2px;
    background-image: linear-gradient(90deg, #bfc9d9 45%, transparent 45%);
    background-size: 10px 2px;
}

.agent-contact-card {
    min-height: 94px;
    display: grid;
    grid-template-columns: 66px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 20px 28px;
}

.agent-headset-icon {
    width: 54px;
    height: 54px;
    display: block;
    border-radius: 50%;
    background: #eaf2ff;
    position: relative;
}

.agent-headset-icon:before {
    content: "";
    position: absolute;
    left: 13px;
    top: 14px;
    width: 26px;
    height: 23px;
    border: 4px solid var(--blue);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
}

.agent-headset-icon:after {
    content: "";
    position: absolute;
    left: 12px;
    top: 29px;
    width: 8px;
    height: 14px;
    border-radius: 4px;
    background: var(--blue);
    box-shadow: 24px 0 0 var(--blue);
}

.agent-contact-card b {
    display: block;
    color: #071735;
    font-size: 20px;
}

.agent-contact-card p {
    margin-top: 5px;
    color: #53627a;
    font-size: 13px;
}

.agent-contact-card .outline-btn.small {
    min-width: 108px;
    color: var(--blue);
    border-color: rgba(22, 93, 255, .75);
}

.agent-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 96px;
    margin-top: 2px;
    padding: 0;
}

.agent-trust-row article {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 0 72px;
    border-left: 1px solid #e7edf5;
}

.agent-trust-row article:first-child {
    border-left: 0;
}

.agent-trust-row i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #c89725;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    font-style: normal;
    font-size: 20px;
    font-weight: 900;
}

.agent-trust-row b {
    display: block;
    overflow: hidden;
    color: #10213d;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-trust-row span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #63728b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-hero .container,
.about-page .container {
    width: min(1280px, calc(100% - 48px));
}

.about-hero {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 28px 0 20px;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(229, 238, 255, .78) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(325deg, rgba(229, 238, 255, .82) 0%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(180deg, #fff 0%, #f6faff 100%);
}

.about-hero:before,
.about-hero:after {
    content: "";
    position: absolute;
    width: 760px;
    height: 230px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(209, 224, 249, .65), rgba(255, 255, 255, 0));
    transform: rotate(32deg);
}

.about-hero:before {
    left: -180px;
    top: -72px;
}

.about-hero:after {
    right: -220px;
    bottom: -70px;
    transform: rotate(-26deg);
}

.about-hero-inner {
    position: relative;
    z-index: 1;
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 18px;
    color: var(--blue);
    border: 1px solid #d4e2fa;
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 15px;
    font-weight: 900;
}

.about-hero h1 {
    margin: 14px 0 8px;
    color: #071735;
    font-size: 46px;
    line-height: 1.12;
    font-weight: 900;
    text-align: center;
}

.about-hero h1 em {
    color: var(--blue);
    font-style: normal;
}

.about-hero p {
    max-width: none;
    color: #1f2f4a;
    font-size: 16px;
    line-height: 1.75;
}

.about-page {
    padding: 0 0 58px;
    background:
        radial-gradient(circle at 14% 20%, rgba(22, 93, 255, .08), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #fff 55%);
}

.about-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 374px;
    gap: 26px;
    align-items: start;
    transform: translateY(-12px);
}

.about-main-card,
.about-idea-card,
.about-promise-card,
.about-contact-card,
.about-trust-row {
    border: 1px solid #cfdcf0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(22, 45, 86, .08);
}

.about-main-card {
    min-height: 0;
    padding: 24px 32px 18px;
}

.about-main-card h2 {
    position: relative;
    margin: 0 0 18px;
    color: #071735;
    font-size: 24px;
    line-height: 1.25;
}

.about-main-card h2:after,
.about-idea-card h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: var(--blue);
}

.about-lead {
    max-width: 790px;
    color: #2f4668;
    font-size: 15px;
    line-height: 1.85;
}

.about-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.about-stat-row article {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 18px;
    align-items: center;
    min-height: 66px;
    padding: 10px 26px;
    border: 1px solid #d4e2f6;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdff, #fff);
}

.about-stat-row i {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    display: block;
    color: var(--blue);
    position: relative;
}

.about-stat-row strong {
    color: #071735;
    font-size: 25px;
    line-height: 1.05;
}

.about-stat-row span {
    color: #435979;
    font-size: 14px;
}

.about-calendar-icon {
    border: 3px solid currentColor;
    border-radius: 9px;
}

.about-calendar-icon:before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 14px;
    height: 3px;
    background: currentColor;
}

.about-calendar-icon:after {
    content: "";
    position: absolute;
    left: 12px;
    top: 24px;
    width: 5px;
    height: 5px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 11px 0 0 currentColor, 22px 0 0 currentColor, 0 11px 0 currentColor, 11px 11px 0 currentColor, 22px 11px 0 currentColor;
}

.about-price-icon:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 7px;
    width: 32px;
    height: 32px;
    border: 4px solid currentColor;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.about-price-icon:after {
    content: "";
    position: absolute;
    left: 18px;
    top: 22px;
    width: 13px;
    height: 7px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
}

.about-service-icon:before {
    content: "";
    position: absolute;
    left: 9px;
    top: 12px;
    width: 26px;
    height: 24px;
    border: 5px solid currentColor;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
}

.about-service-icon:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 30px;
    width: 9px;
    height: 16px;
    border-radius: 5px;
    background: currentColor;
    box-shadow: 27px 0 0 currentColor, 31px 12px 0 -4px currentColor;
}

.about-dashboard {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    height: 276px;
    overflow: hidden;
    border-radius: 8px;
    background: #071d3d;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 34px rgba(7, 29, 61, .2);
}

.about-dashboard aside {
    padding: 16px 12px;
    color: #9fb2cf;
    background: linear-gradient(180deg, #061a38, #092854);
}

.about-dashboard aside b {
    display: block;
    margin: 0 0 14px 10px;
    color: #fff;
    font-size: 13px;
}

.about-dashboard aside span {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.2;
}

.about-dashboard aside span.active {
    color: #fff;
    background: rgba(22, 93, 255, .48);
}

.about-dashboard > section {
    min-width: 0;
    padding: 15px 18px 14px;
    background:
        radial-gradient(circle at 78% 72%, rgba(22, 93, 255, .18), transparent 28%),
        linear-gradient(180deg, #08234b, #061b39);
}

.about-dashboard-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    color: #dbeafe;
}

.about-dashboard-top b {
    margin-right: auto;
    font-size: 14px;
}

.about-dashboard-top i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.about-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 11px;
}

.about-metrics article,
.about-chart,
.about-side-status > div {
    border: 1px solid rgba(180, 209, 255, .15);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
}

.about-metrics article {
    position: relative;
    min-height: 52px;
    padding: 9px 12px;
}

.about-metrics span {
    display: block;
    color: #8ea3c4;
    font-size: 10px;
}

.about-metrics strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 15px;
}

.about-metrics em {
    position: absolute;
    right: 10px;
    bottom: 12px;
    color: #37d083;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.about-metrics em.down {
    color: #ef4444;
}

.about-dashboard-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 11px;
}

.about-chart {
    height: 126px;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 32px, rgba(174, 202, 255, .12) 33px),
        rgba(255, 255, 255, .05);
}

.about-chart svg {
    width: 100%;
    height: 100%;
}

.about-side-status {
    display: grid;
    gap: 10px;
}

.about-side-status > div:first-child {
    min-height: 68px;
    padding: 13px;
}

.about-side-status b {
    display: block;
    color: #fff;
    font-size: 13px;
}

.about-side-status span {
    display: block;
    margin-top: 10px;
    color: #37d083;
    font-size: 12px;
    font-weight: 900;
}

.about-donut {
    width: 56px;
    height: 56px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: conic-gradient(#1662ff 0 78%, #16a34a 78% 93%, #ef4444 93% 100%);
    position: relative;
}

.about-donut:after {
    content: "";
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: #08234b;
}

.about-side {
    display: grid;
    gap: 14px;
}

.about-idea-card {
    min-height: 218px;
    padding: 22px 24px;
}

.about-idea-card h3,
.about-promise-card h3,
.about-contact-card h3 {
    position: relative;
    margin: 0 0 16px;
    color: #071735;
    font-size: 22px;
    line-height: 1.25;
}

.about-idea-body {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 16px;
    align-items: start;
}

.about-star-icon {
    width: 70px;
    height: 70px;
    display: block;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--blue), #0877ff);
    box-shadow: 0 16px 30px rgba(22, 93, 255, .22);
    position: relative;
}

.about-star-icon:before {
    content: "";
    position: absolute;
    inset: 16px;
    background: #eaf2ff;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.about-star-icon:after {
    content: "★";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--blue);
    font-size: 23px;
    font-style: normal;
    font-weight: 900;
}

.about-idea-card ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid #dbe5f2;
}

.about-idea-card li {
    position: relative;
    padding-left: 28px;
}

.about-idea-card li:before {
    content: "✓";
    position: absolute;
    left: 10px;
    top: 1px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: var(--blue);
    font-size: 11px;
    font-weight: 900;
}

.about-idea-card b {
    display: block;
    color: #10213d;
    font-size: 13px;
    line-height: 1.25;
}

.about-idea-card span {
    display: block;
    margin-top: 2px;
    color: #53627a;
    font-size: 11px;
    line-height: 1.25;
}

.about-promise-card {
    min-height: 156px;
    display: grid;
    grid-template-columns: 1fr 86px;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    border-color: #ebd19a;
    background:
        radial-gradient(circle at 86% 22%, rgba(210, 162, 46, .18), transparent 30%),
        #fffdfa;
}

.about-promise-card h3 {
    margin-bottom: 10px;
}

.about-promise-card p {
    margin-bottom: 16px;
    color: #31466a;
    font-size: 14px;
    line-height: 1.55;
}

.about-promise-card .gold-btn.small {
    min-width: 142px;
    min-height: 38px;
    gap: 10px;
    padding: 0 16px;
    font-size: 14px;
}

.about-gold-shield {
    width: 70px;
    height: 70px;
    display: block;
    justify-self: end;
    background: linear-gradient(135deg, #d2a22e, #f3ce72);
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
    position: relative;
}

.about-gold-shield:before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 4px solid #fff;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.about-gold-shield:after {
    content: "";
    position: absolute;
    left: 25px;
    top: 28px;
    width: 22px;
    height: 12px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    transform: rotate(-45deg);
}

.about-contact-card {
    min-height: 100px;
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 20px 24px;
}

.about-contact-card h3 {
    margin-bottom: 4px;
    font-size: 20px;
}

.about-contact-card p {
    color: #53627a;
    font-size: 13px;
    line-height: 1.45;
}

.about-contact-card .outline-btn.small {
    min-width: 116px;
    min-height: 36px;
    gap: 9px;
    color: var(--blue);
    border-color: rgba(22, 93, 255, .75);
}

.about-promise-card .gold-btn i,
.about-contact-card .outline-btn i {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.about-headset-icon {
    width: 52px;
    height: 52px;
    display: block;
    border-radius: 50%;
    background: #eaf2ff;
    position: relative;
}

.about-headset-icon:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 14px;
    width: 26px;
    height: 23px;
    border: 4px solid var(--blue);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
}

.about-headset-icon:after {
    content: "";
    position: absolute;
    left: 11px;
    top: 29px;
    width: 8px;
    height: 14px;
    border-radius: 4px;
    background: var(--blue);
    box-shadow: 24px 0 0 var(--blue), 27px 12px 0 -3px var(--blue);
}

.about-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 96px;
    margin-top: 2px;
    padding: 0;
}

.about-trust-row article {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 0 58px;
    border-left: 1px solid #e7edf5;
}

.about-trust-row article:first-child {
    border-left: 0;
}

.about-trust-row i {
    width: 44px;
    height: 44px;
    display: block;
    color: #c89725;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    font-style: normal;
    position: relative;
}

.about-trust-row b {
    display: block;
    overflow: hidden;
    color: #10213d;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-trust-row span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #63728b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-trust-shield:before {
    content: "";
    position: absolute;
    inset: 9px 11px;
    border: 3px solid currentColor;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.about-trust-lock:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 19px;
    width: 18px;
    height: 15px;
    border: 3px solid currentColor;
    border-radius: 3px;
}

.about-trust-lock:after {
    content: "";
    position: absolute;
    left: 15px;
    top: 10px;
    width: 12px;
    height: 14px;
    border: 3px solid currentColor;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.about-trust-refresh:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    border: 3px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
}

.about-trust-refresh:after {
    content: "";
    position: absolute;
    right: 9px;
    top: 10px;
    border-left: 8px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: rotate(28deg);
}

.about-trust-support:before {
    content: "";
    position: absolute;
    left: 9px;
    top: 12px;
    width: 22px;
    height: 18px;
    border: 3px solid currentColor;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
}

.about-trust-support:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 27px;
    width: 7px;
    height: 11px;
    border-radius: 4px;
    background: currentColor;
    box-shadow: 21px 0 0 currentColor;
}

.contact-hero .container,
.contact-page .container {
    width: min(1280px, calc(100% - 48px));
}

.contact-hero {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 28px 0 20px;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(229, 238, 255, .78) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(325deg, rgba(229, 238, 255, .82) 0%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(180deg, #fff 0%, #f6faff 100%);
}

.contact-hero:before,
.contact-hero:after {
    content: "";
    position: absolute;
    width: 760px;
    height: 230px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(209, 224, 249, .65), rgba(255, 255, 255, 0));
    transform: rotate(32deg);
}

.contact-hero:before {
    left: -180px;
    top: -72px;
}

.contact-hero:after {
    right: -220px;
    bottom: -70px;
    transform: rotate(-26deg);
}

.contact-hero-inner {
    position: relative;
    z-index: 1;
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 18px;
    color: var(--blue);
    border: 1px solid #d4e2fa;
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 15px;
    font-weight: 900;
}

.contact-hero h1 {
    margin: 14px 0 8px;
    color: #071735;
    font-size: 46px;
    line-height: 1.12;
    font-weight: 900;
    text-align: center;
}

.contact-hero h1 em {
    color: var(--blue);
    font-style: normal;
}

.contact-hero p {
    max-width: none;
    color: #1f2f4a;
    font-size: 16px;
    line-height: 1.75;
}

.contact-page {
    padding: 0 0 58px;
    background:
        radial-gradient(circle at 14% 20%, rgba(22, 93, 255, .08), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #fff 55%);
}

.contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 374px;
    gap: 26px;
    align-items: start;
    transform: translateY(-12px);
}

.contact-main-card,
.contact-scope-card,
.contact-flow-card,
.contact-warning-card,
.contact-trust-row {
    border: 1px solid #cfdcf0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(22, 45, 86, .08);
}

.contact-main-card {
    min-height: 0;
    padding: 26px 30px;
}

.contact-main-card h2,
.contact-scope-card h3,
.contact-flow-card h3,
.contact-warning-card h3 {
    position: relative;
    margin: 0 0 18px;
    color: #071735;
    font-size: 23px;
    line-height: 1.25;
}

.contact-main-card h2:after,
.contact-scope-card h3:after,
.contact-flow-card h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: var(--blue);
}

.contact-method-list {
    display: grid;
    gap: 14px;
}

.contact-method-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 204px;
    gap: 22px;
    align-items: center;
    min-height: 112px;
    padding: 16px 26px;
    border: 1px solid #d5e2f2;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdff, #fff);
}

.contact-method-card > i {
    width: 70px;
    height: 70px;
    display: block;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 16px 30px rgba(22, 93, 255, .2);
}

.contact-mail-icon,
.contact-telegram-icon {
    background: linear-gradient(135deg, var(--blue), #0877ff);
}

.contact-third-icon {
    background: linear-gradient(135deg, #d2a22e, #f3ce72);
    box-shadow: 0 16px 30px rgba(198, 145, 32, .2);
}

.contact-mail-icon:before {
    content: "";
    position: absolute;
    left: 18px;
    top: 22px;
    width: 34px;
    height: 26px;
    border-radius: 5px;
    background: #fff;
}

.contact-mail-icon:after {
    content: "";
    position: absolute;
    left: 22px;
    top: 26px;
    width: 27px;
    height: 16px;
    border-left: 4px solid var(--blue);
    border-bottom: 4px solid var(--blue);
    transform: rotate(-45deg) skew(10deg, 10deg);
}

.contact-telegram-icon:before {
    content: "";
    position: absolute;
    left: 16px;
    top: 20px;
    border-left: 39px solid #fff;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    transform: rotate(-22deg);
}

.contact-telegram-icon:after {
    content: "";
    position: absolute;
    left: 31px;
    top: 35px;
    width: 15px;
    height: 20px;
    background: #dceaff;
    clip-path: polygon(0 0, 100% 0, 28% 100%);
    transform: rotate(-22deg);
}

.contact-third-icon:before {
    content: "";
    position: absolute;
    left: 16px;
    top: 21px;
    width: 36px;
    height: 28px;
    border: 5px solid #fff;
    border-bottom: 0;
    border-radius: 25px 25px 0 0;
}

.contact-third-icon:after {
    content: "";
    position: absolute;
    left: 14px;
    top: 40px;
    width: 11px;
    height: 19px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 33px 0 0 #fff, 38px 14px 0 -4px #fff;
}

.contact-method-card h3 {
    margin: 0 0 8px;
    color: #071735;
    font-size: 21px;
    line-height: 1.2;
}

.contact-method-card b {
    display: block;
    color: var(--blue);
    font-size: 18px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.contact-method-card.pending b {
    color: #b98217;
}

.contact-method-card p {
    margin-top: 8px;
    color: #435979;
    font-size: 14px;
    line-height: 1.45;
}

.contact-method-card .outline-btn.small,
.contact-method-card .primary-btn.small,
.contact-method-card .gold-outline-btn.small {
    justify-self: end;
    min-width: 152px;
    min-height: 44px;
    gap: 10px;
    font-size: 15px;
}

.contact-method-card .outline-btn.small {
    color: var(--blue);
    border-color: rgba(22, 93, 255, .75);
}

.contact-method-card .gold-outline-btn.small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b98217;
    border: 1px solid #d3a131;
    border-radius: 8px;
    background: #fffdfa;
    font-weight: 900;
}

.contact-copy-btn.copied {
    color: #16833a;
    border-color: #9bd8ad;
    background: #f3fff6;
}

.copy-icon,
.plane-mini-icon,
.clock-mini-icon {
    width: 17px;
    height: 17px;
    display: inline-block;
    position: relative;
}

.copy-icon:before,
.copy-icon:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.copy-icon:before {
    left: 1px;
    top: 4px;
}

.copy-icon:after {
    right: 1px;
    top: 0;
    background: #fff;
}

.plane-mini-icon:before {
    content: "";
    position: absolute;
    left: 1px;
    top: 2px;
    border-left: 15px solid currentColor;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    transform: rotate(-22deg);
}

.clock-mini-icon {
    border: 2px solid currentColor;
    border-radius: 50%;
}

.clock-mini-icon:before {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 2px;
    height: 6px;
    background: currentColor;
}

.clock-mini-icon:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    width: 5px;
    height: 2px;
    background: currentColor;
}

.contact-side {
    display: grid;
    gap: 12px;
}

.contact-scope-card {
    min-height: 162px;
    display: grid;
    grid-template-columns: 1fr 72px;
    gap: 18px;
    align-items: start;
    padding: 20px 26px;
}

.contact-scope-card ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-scope-card li {
    position: relative;
    padding-left: 28px;
    color: #10213d;
    font-size: 13px;
    font-weight: 900;
}

.contact-scope-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: var(--blue);
    font-size: 11px;
}

.contact-star-icon {
    width: 54px;
    height: 54px;
    display: block;
    justify-self: end;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue), #0877ff);
    box-shadow: 0 16px 30px rgba(22, 93, 255, .22);
    position: relative;
}

.contact-star-icon:before {
    content: "";
    position: absolute;
    inset: 13px;
    background: #eaf2ff;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.contact-star-icon:after {
    content: "★";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--blue);
    font-size: 21px;
    font-style: normal;
    font-weight: 900;
}

.contact-flow-card {
    min-height: 162px;
    padding: 20px 26px;
    position: relative;
    overflow: hidden;
}

.contact-flow {
    display: grid;
    gap: 7px;
}

.contact-flow article {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;
}

.contact-flow i {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: var(--blue);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.contact-flow span {
    color: #10213d;
    font-size: 13px;
    font-weight: 900;
}

.contact-message-icon {
    position: absolute;
    right: 28px;
    top: 54px;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, #5da7ff, #165dff);
    box-shadow: 18px -18px 0 rgba(22, 93, 255, .1), 34px -30px 0 rgba(22, 93, 255, .06);
}

.contact-message-icon:before {
    content: "";
    position: absolute;
    left: 19px;
    top: 23px;
    width: 34px;
    height: 6px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 17px 0 #fff;
    transform: rotate(18deg);
}

.contact-message-icon:after {
    content: "";
    position: absolute;
    left: 23px;
    bottom: -10px;
    border-top: 18px solid #165dff;
    border-right: 18px solid transparent;
}

.contact-warning-card {
    min-height: 136px;
    display: grid;
    grid-template-columns: 1fr 76px;
    gap: 18px;
    align-items: center;
    padding: 19px 22px;
    border-color: #ebd19a;
    background:
        radial-gradient(circle at 86% 22%, rgba(210, 162, 46, .18), transparent 30%),
        #fffdfa;
}

.contact-warning-card h3 {
    margin-bottom: 8px;
}

.contact-warning-card p {
    margin-bottom: 12px;
    color: #31466a;
    font-size: 13px;
    line-height: 1.48;
}

.contact-warning-card .gold-btn.small {
    min-width: 132px;
    min-height: 38px;
    gap: 10px;
    padding: 0 16px;
    font-size: 14px;
}

.contact-warning-card .gold-btn i {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.contact-warning-icon {
    width: 58px;
    height: 58px;
    display: block;
    justify-self: end;
    background: linear-gradient(135deg, #d2a22e, #f3ce72);
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
    position: relative;
}

.contact-warning-icon:before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 4px solid #fff;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.contact-warning-icon:after {
    content: "";
    position: absolute;
    left: 27px;
    top: 17px;
    width: 5px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 24px 0 -1px #fff;
}

.contact-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 96px;
    margin-top: 2px;
    padding: 0;
}

.contact-trust-row article {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 0 58px;
    border-left: 1px solid #e7edf5;
}

.contact-trust-row article:first-child {
    border-left: 0;
}

.contact-trust-row i {
    width: 44px;
    height: 44px;
    display: block;
    color: #c89725;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    font-style: normal;
    position: relative;
}

.contact-trust-row b {
    display: block;
    overflow: hidden;
    color: #10213d;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-trust-row span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #63728b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-trust-shield:before,
.contact-trust-badge:before {
    content: "";
    position: absolute;
    inset: 9px 11px;
    border: 3px solid currentColor;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.contact-trust-shield:after {
    content: "";
    position: absolute;
    left: 16px;
    top: 19px;
    width: 14px;
    height: 8px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
}

.contact-trust-clock:before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 3px solid currentColor;
    border-radius: 50%;
}

.contact-trust-clock:after {
    content: "";
    position: absolute;
    left: 21px;
    top: 14px;
    width: 3px;
    height: 12px;
    background: currentColor;
    box-shadow: 5px 11px 0 -1px currentColor;
}

.contact-trust-id:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    width: 24px;
    height: 19px;
    border: 3px solid currentColor;
    border-radius: 4px;
}

.contact-trust-id:after {
    content: "";
    position: absolute;
    left: 16px;
    top: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 12px 2px 0 -2px currentColor, 12px 8px 0 -2px currentColor;
}

.contact-trust-badge:after {
    content: "";
    position: absolute;
    left: 16px;
    top: 19px;
    width: 14px;
    height: 8px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
}

.news-hero .container,
.news-page .container {
    width: min(1280px, calc(100% - 48px));
}

.news-hero {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 28px 0 20px;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(229, 238, 255, .78) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(325deg, rgba(229, 238, 255, .82) 0%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(180deg, #fff 0%, #f6faff 100%);
}

.news-hero:before,
.news-hero:after {
    content: "";
    position: absolute;
    width: 760px;
    height: 230px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(209, 224, 249, .65), rgba(255, 255, 255, 0));
    transform: rotate(32deg);
}

.news-hero:before {
    left: -180px;
    top: -72px;
}

.news-hero:after {
    right: -220px;
    bottom: -70px;
    transform: rotate(-26deg);
}

.news-hero-inner {
    position: relative;
    z-index: 1;
}

.news-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 18px;
    color: var(--blue);
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 15px;
    font-weight: 900;
}

.news-hero h1 {
    margin: 16px 0 8px;
    color: #071735;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 900;
    text-align: center;
}

.news-hero h1 em {
    color: var(--blue);
    font-style: normal;
}

.news-hero p {
    max-width: none;
    color: #1f2f4a;
    font-size: 16px;
    line-height: 1.75;
}

.news-page {
    padding: 0 0 58px;
    background:
        radial-gradient(circle at 14% 20%, rgba(22, 93, 255, .08), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #fff 55%);
}

.news-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 374px;
    gap: 26px;
    align-items: start;
    transform: translateY(-12px);
}

.news-main-card,
.news-category-card,
.news-important-card,
.news-contact-card,
.news-trust-row {
    border: 1px solid #cfdcf0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(22, 45, 86, .08);
}

.news-main-card {
    min-height: 0;
    padding: 24px 26px 18px;
}

.news-main-card h2 {
    margin: 0 0 16px;
    color: #071735;
    font-size: 24px;
    line-height: 1.25;
}

.news-feature-card {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 28px;
    min-height: 162px;
    padding: 14px;
    border: 1px solid #d5e2f2;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdff, #fff);
}

.news-feature-thumb {
    overflow: hidden;
    min-height: 134px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 68% 38%, rgba(22, 93, 255, .35), transparent 34%),
        linear-gradient(135deg, #071d3d, #082756 58%, #0b4bd6);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.news-feature-thumb:before {
    content: "";
    position: absolute;
    left: 18px;
    top: 14px;
    width: 70px;
    height: 9px;
    border-radius: 999px;
    background: rgba(216, 232, 255, .64);
    box-shadow: 0 17px 0 rgba(216, 232, 255, .24);
}

.news-feature-thumb:after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    height: 42px;
    background:
        linear-gradient(120deg, transparent 0 9%, #165dff 9% 11%, transparent 11% 22%, #54a3ff 22% 24%, transparent 24% 39%, #165dff 39% 41%, transparent 41% 56%, #54a3ff 56% 58%, transparent 58% 76%, #165dff 76% 78%, transparent 78% 100%) center / 100% 3px no-repeat,
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 14px);
}

.news-mini-dashboard {
    position: absolute;
    left: 118px;
    right: 28px;
    top: 44px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.news-mini-dashboard span,
.news-mini-dashboard b,
.news-mini-dashboard i {
    height: 34px;
    border: 1px solid rgba(190, 214, 255, .26);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
}

.news-feature-content {
    min-width: 0;
    padding: 2px 14px 0 0;
}

.news-feature-content span,
.news-page-card span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 11px;
    color: var(--blue);
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 12px;
    font-weight: 900;
}

.news-feature-content h3 {
    margin: 12px 0 8px;
    color: #071735;
    font-size: 22px;
    line-height: 1.25;
}

.news-feature-content time,
.news-page-card time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #51617a;
    font-size: 13px;
    font-weight: 800;
}

.news-feature-content time:before,
.news-page-card time:before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #6b7c96;
    border-radius: 3px;
    background:
        linear-gradient(#6b7c96, #6b7c96) 2px 4px / 8px 2px no-repeat;
}

.news-feature-content p {
    margin: 10px 0 13px;
    color: #53627a;
    font-size: 14px;
    line-height: 1.6;
}

.news-feature-content .primary-btn.small {
    min-width: 116px;
    min-height: 36px;
    gap: 8px;
}

.news-feature-content .primary-btn i,
.news-important-card .gold-btn i,
.news-contact-card .outline-btn i,
.news-more-link i {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.news-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.news-page-card {
    position: relative;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 18px;
    min-height: 108px;
    padding: 12px 36px 12px 12px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.news-page-card:hover {
    border-color: #bdd0ee;
    box-shadow: 0 14px 30px rgba(22, 45, 86, .08);
    transform: translateY(-1px);
}

.news-page-card h3 {
    overflow: hidden;
    margin: 7px 0 5px;
    color: #10213d;
    font-size: 16px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-page-card p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    color: #53627a;
    font-size: 12px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news-page-card > a {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: translateY(-50%) rotate(-45deg);
}

.news-thumb {
    overflow: hidden;
    height: 88px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 42%, rgba(68, 148, 255, .5), transparent 34%),
        linear-gradient(135deg, #08214b, #0c58db);
    position: relative;
}

.news-thumb:before,
.news-thumb:after {
    content: "";
    position: absolute;
}

.news-thumb.shield:before {
    left: 35px;
    top: 18px;
    width: 48px;
    height: 54px;
    background: linear-gradient(135deg, #1a6dff, #6eb6ff);
    clip-path: polygon(50% 0, 90% 18%, 90% 66%, 50% 100%, 10% 66%, 10% 18%);
}

.news-thumb.shield:after {
    left: 49px;
    top: 34px;
    width: 21px;
    height: 11px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    transform: rotate(-45deg);
}

.news-thumb.video:before {
    left: 38px;
    top: 27px;
    width: 44px;
    height: 34px;
    border: 3px solid rgba(205, 228, 255, .95);
    border-radius: 8px;
}

.news-thumb.video:after {
    left: 56px;
    top: 37px;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.news-thumb.download:before {
    left: 44px;
    top: 18px;
    width: 31px;
    height: 37px;
    background:
        linear-gradient(#d7e8ff, #d7e8ff) center 0 / 9px 28px no-repeat;
}

.news-thumb.download:after {
    left: 36px;
    top: 38px;
    width: 48px;
    height: 34px;
    background: #d7e8ff;
    clip-path: polygon(34% 0, 66% 0, 66% 42%, 88% 42%, 50% 100%, 12% 42%, 34% 42%);
}

.news-thumb.support:before {
    left: 36px;
    top: 24px;
    width: 46px;
    height: 36px;
    border: 6px solid #d7e8ff;
    border-bottom: 0;
    border-radius: 30px 30px 0 0;
}

.news-thumb.support:after {
    left: 31px;
    top: 48px;
    width: 12px;
    height: 23px;
    border-radius: 6px;
    background: #d7e8ff;
    box-shadow: 45px 0 0 #d7e8ff, 32px 16px 0 -4px #d7e8ff;
}

.news-more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 36px;
    margin-top: 10px;
    color: var(--blue);
    font-size: 15px;
    font-weight: 900;
}

.news-side {
    display: grid;
    gap: 14px;
}

.news-category-card {
    min-height: 240px;
    padding: 24px 28px;
}

.news-category-card h3,
.news-important-card h3,
.news-contact-card h3 {
    margin: 0 0 16px;
    color: #071735;
    font-size: 22px;
    line-height: 1.25;
}

.news-category-card a {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 40px;
    margin-top: 6px;
    padding: 0 12px;
    color: #223554;
    border: 1px solid #e2eaf5;
    border-radius: 8px;
    background: #fff;
    font-weight: 900;
}

.news-category-card a.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--blue), #0877ff);
    box-shadow: 0 12px 24px rgba(22, 93, 255, .22);
}

.news-category-card a b {
    min-width: 32px;
    min-height: 22px;
    display: inline-grid;
    place-items: center;
    color: #6d7d95;
    border-radius: 999px;
    background: #edf3fb;
    font-size: 13px;
}

.news-category-card a.active b {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.news-category-card i {
    width: 20px;
    height: 20px;
    display: block;
    color: currentColor;
    position: relative;
}

.cat-grid-icon {
    background:
        linear-gradient(currentColor, currentColor) 2px 2px / 7px 7px no-repeat,
        linear-gradient(currentColor, currentColor) 12px 2px / 7px 7px no-repeat,
        linear-gradient(currentColor, currentColor) 2px 12px / 7px 7px no-repeat,
        linear-gradient(currentColor, currentColor) 12px 12px / 7px 7px no-repeat;
    border-radius: 5px;
}

.cat-release-icon:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 9px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 8px 8px 5px 5px;
}

.cat-release-icon:after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 1px;
    width: 4px;
    height: 8px;
    background: currentColor;
    box-shadow: -5px 3px 0 -1px currentColor, 5px 3px 0 -1px currentColor;
}

.cat-shield-icon:before {
    content: "";
    position: absolute;
    inset: 2px 3px;
    border: 2px solid currentColor;
    clip-path: polygon(50% 0, 91% 20%, 91% 69%, 50% 100%, 9% 69%, 9% 20%);
}

.cat-video-icon:before {
    content: "";
    position: absolute;
    inset: 4px 2px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.cat-video-icon:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 7px;
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.cat-agent-icon:before {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.cat-agent-icon:after {
    content: "";
    position: absolute;
    left: 3px;
    bottom: 2px;
    width: 14px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 10px 10px 3px 3px;
}

.news-important-card {
    min-height: 164px;
    display: grid;
    grid-template-columns: 1fr 86px;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    border-color: #ebd19a;
    background:
        radial-gradient(circle at 86% 22%, rgba(210, 162, 46, .18), transparent 30%),
        #fffdfa;
}

.news-important-card h3 {
    margin-bottom: 8px;
}

.news-important-card p {
    margin-bottom: 16px;
    color: #31466a;
    font-size: 14px;
    line-height: 1.6;
}

.news-important-card .gold-btn.small {
    min-width: 142px;
    min-height: 38px;
    gap: 10px;
    padding: 0 16px;
    font-size: 14px;
}

.news-warning-icon {
    width: 70px;
    height: 70px;
    display: block;
    justify-self: end;
    background: linear-gradient(135deg, #d2a22e, #f3ce72);
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
    position: relative;
}

.news-warning-icon:before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 4px solid #fff;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.news-warning-icon:after {
    content: "";
    position: absolute;
    left: 33px;
    top: 20px;
    width: 6px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 29px 0 -1px #fff;
}

.news-contact-card {
    min-height: 100px;
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 20px 24px;
}

.news-contact-card h3 {
    margin-bottom: 4px;
    font-size: 20px;
}

.news-contact-card p {
    color: #53627a;
    font-size: 13px;
    line-height: 1.45;
}

.news-contact-card .outline-btn.small {
    min-width: 116px;
    min-height: 36px;
    gap: 9px;
    color: var(--blue);
    border-color: rgba(22, 93, 255, .75);
}

.news-headset-icon {
    width: 52px;
    height: 52px;
    display: block;
    border-radius: 50%;
    background: #eaf2ff;
    position: relative;
}

.news-headset-icon:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 14px;
    width: 26px;
    height: 23px;
    border: 4px solid var(--blue);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
}

.news-headset-icon:after {
    content: "";
    position: absolute;
    left: 11px;
    top: 29px;
    width: 8px;
    height: 14px;
    border-radius: 4px;
    background: var(--blue);
    box-shadow: 24px 0 0 var(--blue), 27px 12px 0 -3px var(--blue);
}

.news-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 96px;
    margin-top: 2px;
    padding: 0;
}

.news-trust-row article {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 0 72px;
    border-left: 1px solid #e7edf5;
}

.news-trust-row article:first-child {
    border-left: 0;
}

.news-trust-row i {
    width: 44px;
    height: 44px;
    display: block;
    color: #c89725;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    font-style: normal;
    position: relative;
}

.news-trust-row b {
    display: block;
    overflow: hidden;
    color: #10213d;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-trust-row span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #63728b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Full news listing page. */
.news-more-page {
    padding: 6px 0 22px;
    background:
        radial-gradient(circle at 88% 12%, rgba(22, 93, 255, .08), transparent 280px),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #ffffff 100%);
}

.news-more-page .container {
    width: calc(100% - 110px);
    max-width: 1434px;
}

.news-more-hero,
.news-filter-card,
.news-featured-large,
.news-featured-side article,
.news-featured-side-link,
.news-list-card,
.news-side-card {
    border: 1px solid #bdd2fb;
    border-radius: 8px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 44px rgba(22, 45, 86, .055);
}

.news-more-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    align-items: center;
    height: 156px;
    min-height: 0;
    padding: 30px 46px;
    overflow: hidden;
    background:
        linear-gradient(115deg, #f9fcff 0%, #edf5ff 48%, #e1eeff 100%);
}

.news-more-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .56;
    background:
        radial-gradient(circle at 78% 48%, rgba(18, 96, 246, .08), transparent 190px),
        linear-gradient(150deg, rgba(255, 255, 255, .42) 0 1px, transparent 1px) 0 0 / 94px 44px,
        linear-gradient(30deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px) 0 0 / 94px 44px;
}

.news-more-hero-copy,
.news-more-hero-art {
    position: relative;
    z-index: 1;
}

.news-more-hero-copy span {
    display: none;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    color: #0f5ef7;
    border: 1px solid #bcd2fb;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 900;
}

.news-more-hero h1 {
    margin: 0 0 13px;
    color: #071a3a;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 950;
}

.news-more-hero p {
    color: #344760;
    font-size: 15px;
    line-height: 1.65;
}

.news-more-hero-art {
    height: 128px;
}

.news-art-paper,
.news-art-bell,
.news-art-chart,
.news-art-cube {
    position: absolute;
    display: block;
}

.news-art-paper {
    right: 178px;
    top: -2px;
    width: 190px;
    height: 128px;
    border-radius: 15px;
    background:
        linear-gradient(#d9e8ff, #d9e8ff) 42px 54px / 92px 8px no-repeat,
        linear-gradient(#eef5ff, #eef5ff) 42px 74px / 72px 8px no-repeat,
        linear-gradient(135deg, #fff, #f7fbff);
    box-shadow: 0 24px 38px rgba(18, 96, 246, .22);
    transform: rotate(-7deg);
}

.news-art-paper:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 42px;
    border-radius: 15px 15px 0 0;
    background: linear-gradient(135deg, #5da0ff, #1260f6);
}

.news-art-paper:after {
    content: "";
    position: absolute;
    left: 18px;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dfeeff;
    box-shadow: 18px 0 0 #dfeeff, 36px 0 0 #dfeeff;
}

.news-art-bell {
    right: 70px;
    top: 34px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: linear-gradient(145deg, #72aaff, #1260f6);
    box-shadow: 0 22px 34px rgba(18, 96, 246, .23);
}

.news-art-bell:before {
    content: "";
    position: absolute;
    left: 22px;
    top: 20px;
    width: 32px;
    height: 28px;
    border: 5px solid #fff;
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
}

.news-art-bell:after {
    content: "";
    position: absolute;
    left: 22px;
    top: 49px;
    width: 35px;
    height: 6px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 16px 12px 0 -3px #fff;
}

.news-art-chart {
    right: 330px;
    top: 52px;
    width: 72px;
    height: 72px;
    border: 8px solid #8db8ff;
    border-radius: 50%;
    background:
        linear-gradient(#fff, #fff) 27px 24px / 8px 31px no-repeat,
        linear-gradient(#fff, #fff) 39px 34px / 8px 21px no-repeat,
        linear-gradient(145deg, #438fff, #1260f6);
    box-shadow: 0 20px 34px rgba(18, 96, 246, .22);
}

.news-art-cube {
    width: 30px;
    height: 30px;
    background: linear-gradient(145deg, #d6e5ff, #74a6ff);
    transform: rotate(45deg) skew(-12deg, -12deg);
}

.news-art-cube.one {
    right: 430px;
    top: 70px;
}

.news-art-cube.two {
    right: 42px;
    top: 34px;
}

.news-more-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 418px;
    gap: 30px;
    margin-top: 16px;
    align-items: start;
}

.news-more-main,
.news-more-sidebar {
    display: grid;
    gap: 14px;
}

.news-filter-card {
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr) 120px;
    gap: 12px;
    align-items: center;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.news-search-box {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    background: #f8fbff;
}

.news-search-box i {
    position: relative;
    width: 18px;
    height: 18px;
    color: #6f8fbd;
}

.news-search-box i:before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.news-search-box i:after {
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
}

.news-search-box input {
    width: 100%;
    height: 34px;
    min-height: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #10213d;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 34px;
    box-shadow: none;
}

.news-search-box input:focus,
.news-search-box:focus-within {
    border-color: #cfe0f8;
    outline: 0;
    box-shadow: none;
}

.news-filter-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.news-filter-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    color: #334763;
    border: 1px solid #dce7f6;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.news-filter-tabs a.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #1260f6, #0877ff);
    box-shadow: 0 12px 24px rgba(18, 96, 246, .18);
}

.news-sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    color: #1260f6;
    border: 1px solid #9fbdff;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
}

.news-sort-btn i,
.news-pagination i {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.news-featured-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 16px;
}

.news-featured-large {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    height: 222px;
    min-height: 0;
    padding: 22px 24px 20px;
    align-items: center;
}

.news-more-thumb {
    position: relative;
    overflow: hidden;
    min-height: 176px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 68% 38%, rgba(22, 93, 255, .34), transparent 34%),
        linear-gradient(135deg, #071d3d, #082756 58%, #0b4bd6);
}

.news-featured-large > .news-more-thumb {
    height: 176px;
    min-height: 0;
}

.news-more-thumb.small {
    min-height: 80px;
    margin-bottom: 0;
}

.news-more-thumb:before,
.news-more-thumb:after,
.news-more-thumb span:before,
.news-more-thumb span:after {
    content: "";
    position: absolute;
}

.news-more-thumb:before {
    left: 22px;
    right: 22px;
    bottom: 26px;
    height: 44px;
    background:
        linear-gradient(120deg, transparent 0 9%, #165dff 9% 11%, transparent 11% 22%, #54a3ff 22% 24%, transparent 24% 39%, #165dff 39% 41%, transparent 41% 56%, #54a3ff 56% 58%, transparent 58% 76%, #165dff 76% 78%, transparent 78% 100%) center / 100% 3px no-repeat,
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .11) 0 1px, transparent 1px 14px);
}

.news-more-thumb:after {
    left: 30px;
    top: 24px;
    width: 96px;
    height: 62px;
    border: 1px solid rgba(190, 214, 255, .26);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    box-shadow: 116px 0 0 rgba(255, 255, 255, .06), 232px 0 0 rgba(255, 255, 255, .06);
}

.news-more-thumb.small:before {
    left: 14px;
    right: 14px;
    bottom: 16px;
    height: 28px;
}

.news-more-thumb.small:after {
    left: 18px;
    top: 18px;
    width: 52px;
    height: 34px;
    box-shadow: 64px 0 0 rgba(255, 255, 255, .06);
}

.news-more-thumb.shield:after,
.news-more-thumb.support:after {
    left: 50%;
    top: 50%;
    width: 58px;
    height: 64px;
    border: 0;
    background: linear-gradient(135deg, #1a6dff, #6eb6ff);
    box-shadow: none;
    clip-path: polygon(50% 0, 90% 18%, 90% 66%, 50% 100%, 10% 66%, 10% 18%);
    transform: translate(-50%, -50%);
}

.news-more-thumb.video:after {
    left: 50%;
    top: 50%;
    width: 72px;
    height: 50px;
    border: 4px solid rgba(220, 236, 255, .95);
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.news-more-thumb.video:before {
    left: 50%;
    top: 50%;
    border-left: 16px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background: transparent;
    transform: translate(-35%, -50%);
}

.news-more-thumb.download:after {
    left: 50%;
    top: 50%;
    width: 62px;
    height: 68px;
    background:
        linear-gradient(#d7e8ff, #d7e8ff) center 0 / 10px 42px no-repeat,
        linear-gradient(#d7e8ff, #d7e8ff) center 46px / 54px 8px no-repeat;
    box-shadow: none;
    clip-path: none;
    transform: translate(-50%, -50%);
}

.news-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 11px;
    color: #1260f6;
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 12px;
    font-weight: 900;
}

.news-featured-large h2 {
    margin: 11px 0 7px;
    color: #071a3a;
    font-size: 21px;
    line-height: 1.18;
}

.news-featured-large p {
    display: -webkit-box;
    overflow: hidden;
    margin: 8px 0 10px;
    color: #53627a;
    font-size: 13px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.news-featured-large time,
.news-featured-side time,
.news-more-list time,
.news-notice-card time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #65758f;
    font-size: 13px;
    font-weight: 800;
}

.news-featured-large time:before,
.news-featured-side time:before,
.news-more-list time:before,
.news-notice-card time:before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #74839a;
    border-radius: 3px;
    background: linear-gradient(#74839a, #74839a) 2px 4px / 8px 2px no-repeat;
}

.news-featured-large .primary-btn.small {
    min-width: 118px;
    min-height: 34px;
    gap: 8px;
}

.news-featured-large .primary-btn i,
.news-more-list a i {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.news-featured-side {
    display: grid;
    gap: 16px;
}

.news-featured-side article,
.news-featured-side-link {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    height: 104px;
    min-height: 0;
    padding: 12px 14px;
    color: inherit;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.news-featured-side-link:hover {
    border-color: #9ebdff;
    background: #f8fbff;
    box-shadow: 0 14px 30px rgba(22, 93, 255, .10);
    transform: translateY(-1px);
}

.news-featured-side h3 {
    overflow: hidden;
    margin: 8px 0 8px;
    color: #10213d;
    font-size: 15px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-featured-side .news-more-thumb.small {
    height: 80px;
    min-height: 0;
}

.news-list-card {
    padding: 0;
    overflow: hidden;
}

.news-list-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.news-list-head h2,
.news-side-card h2 {
    margin: 0;
    color: #071a3a;
    font-size: 23px;
    line-height: 1.25;
}

.news-list-head span {
    color: #667891;
    font-size: 13px;
    font-weight: 800;
}

.news-more-list {
    display: grid;
    gap: 0;
}

.news-empty-state {
    min-height: 132px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #667891;
    border: 1px dashed #bdd2fb;
    border-radius: 8px;
    background: #f8fbff;
    text-align: center;
}

.news-empty-state b {
    color: #10213d;
    font-size: 18px;
}

.news-empty-state p {
    color: #667891;
    font-size: 13px;
}

.news-more-list article {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 110px 88px;
    gap: 18px;
    align-items: center;
    height: 67px;
    min-height: 0;
    padding: 10px 18px;
    border: 0;
    border-top: 1px solid #e5edf8;
    border-radius: 0;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.news-more-list article:hover {
    border-color: #e5edf8;
    box-shadow: none;
    transform: none;
    background: #f9fcff;
}

.news-more-list .news-more-thumb {
    height: 56px;
    min-height: 0;
}

.news-more-list h3 {
    margin: 2px 0 2px;
    color: #10213d;
    font-size: 15px;
    line-height: 1.12;
}

.news-more-list p {
    display: block;
    overflow: hidden;
    margin-bottom: 0;
    color: #53627a;
    font-size: 11px;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-more-list .news-badge {
    min-height: 20px;
    padding: 0 9px;
    font-size: 11px;
}

.news-more-list article > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    color: #1260f6;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 900;
}

.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 16px 0 18px;
    border-top: 1px solid #e5edf8;
    background: #fff;
}

.news-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 38px;
    height: 30px;
    padding: 0 13px;
    color: #344760;
    border: 1px solid #dce7f6;
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
}

.news-pagination a.active {
    color: #fff;
    border-color: transparent;
    background: #1260f6;
}

.news-pagination span {
    color: #63728b;
    font-size: 13px;
    font-weight: 900;
}

.news-pagination span.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 13px;
    color: #a8b4c5;
    border: 1px solid #e4ebf5;
    border-radius: 7px;
    background: #f8fbff;
}

.news-pagination span.disabled i {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.news-pagination a:last-child i {
    transform: rotate(-45deg);
}

.news-more-sidebar {
    position: static;
}

.news-side-card {
    padding: 16px 18px;
}

.news-notice-card,
.news-hot-card {
    display: grid;
    gap: 0;
}

.news-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.news-side-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.news-side-head h2 i {
    width: 20px;
    height: 20px;
    color: #1260f6;
    border: 2px solid currentColor;
    border-radius: 5px;
    position: relative;
}

.news-side-head h2 i:after {
    content: "";
    position: absolute;
    right: -7px;
    top: 6px;
    width: 7px;
    height: 2px;
    background: currentColor;
}

.news-side-head a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 58px;
    color: #1260f6;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.news-notice-card > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 34px;
    gap: 10px;
    align-items: center;
    min-height: 36px;
    padding: 0;
    border-top: 1px solid #e5edf8;
}

.news-notice-card > a:first-of-type {
    border-top: 0;
}

.news-notice-card span {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 18px;
    color: #e43c35;
    border-radius: 4px;
    background: #fff1f0;
    font-size: 11px;
    font-weight: 900;
}

.news-notice-card b {
    color: #10213d;
    font-size: 13px;
    line-height: 1.35;
}

.news-notice-card time {
    justify-self: end;
}

.news-notice-card time:before {
    content: none;
}

.news-hot-card > a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 88px 16px;
    gap: 11px;
    align-items: center;
    min-height: 34px;
    padding: 0 6px;
    border: 1px solid #e1eaf6;
    border-radius: 8px;
    background: #fff;
}

.news-hot-card em {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #fff;
    border-radius: 50%;
    background: #1260f6;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.news-hot-card > a:nth-of-type(n+4) em {
    color: #1260f6;
    background: #eaf2ff;
}

.news-hot-card > a span {
    overflow: hidden;
    color: #10213d;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-hot-card > a time {
    color: #65758f;
    font-size: 12px;
    font-weight: 800;
}

.news-hot-card > a > i {
    width: 8px;
    height: 8px;
    border-right: 2px solid #e43c35;
    border-top: 2px solid #e43c35;
    transform: rotate(-45deg);
}

.news-hot-card > a:nth-of-type(4) > i {
    border-color: #18a957;
    transform: rotate(135deg);
}

/* News detail page. */
.news-detail-page {
    padding: 6px 0 34px;
    background:
        radial-gradient(circle at 88% 10%, rgba(22, 93, 255, .08), transparent 280px),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #ffffff 100%);
}

.news-detail-page .container {
    width: calc(100% - 110px);
    max-width: 1434px;
}

.news-detail-hero,
.news-article-card,
.detail-related-card,
.detail-return-card {
    border: 1px solid #bdd2fb;
    border-radius: 8px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 44px rgba(22, 45, 86, .055);
}

.news-detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    align-items: center;
    height: 176px;
    padding: 30px 46px;
    overflow: hidden;
    background:
        linear-gradient(115deg, #f9fcff 0%, #edf5ff 48%, #e1eeff 100%);
}

.news-detail-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .58;
    background:
        radial-gradient(circle at 76% 46%, rgba(18, 96, 246, .08), transparent 190px),
        linear-gradient(150deg, rgba(255, 255, 255, .42) 0 1px, transparent 1px) 0 0 / 94px 44px,
        linear-gradient(30deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px) 0 0 / 94px 44px;
}

.news-detail-hero > div {
    position: relative;
    z-index: 1;
}

.news-detail-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #65758f;
    font-size: 13px;
    font-weight: 900;
}

.news-detail-crumb a {
    color: #1260f6;
}

.news-detail-crumb i {
    width: 7px;
    height: 7px;
    border-right: 2px solid #9aabc2;
    border-bottom: 2px solid #9aabc2;
    transform: rotate(-45deg);
}

.news-detail-hero h1 {
    margin: 14px 0 10px;
    color: #071a3a;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 950;
}

.news-detail-hero p {
    color: #344760;
    font-size: 15px;
    line-height: 1.65;
}

.news-detail-art {
    height: 136px;
}

.detail-art-doc,
.detail-art-megaphone,
.detail-art-cube {
    position: absolute;
    display: block;
}

.detail-art-doc {
    right: 104px;
    top: 14px;
    width: 226px;
    height: 124px;
    border-radius: 16px;
    background:
        linear-gradient(#dceaff, #dceaff) 52px 48px / 108px 8px no-repeat,
        linear-gradient(#eef5ff, #eef5ff) 52px 68px / 132px 7px no-repeat,
        linear-gradient(#eef5ff, #eef5ff) 52px 88px / 92px 7px no-repeat,
        linear-gradient(135deg, #fff, #f7fbff);
    box-shadow: 0 24px 38px rgba(18, 96, 246, .22);
    transform: rotate(4deg);
}

.detail-art-doc:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 42px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #5da0ff, #1260f6);
}

.detail-art-doc:after {
    content: "";
    position: absolute;
    left: 18px;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dfeeff;
    box-shadow: 18px 0 0 #dfeeff, 36px 0 0 #dfeeff;
}

.detail-art-megaphone {
    right: 314px;
    top: 54px;
    width: 86px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(145deg, #72aaff, #1260f6);
    box-shadow: 0 20px 34px rgba(18, 96, 246, .23);
}

.detail-art-megaphone:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 23px;
    width: 43px;
    height: 24px;
    background: #fff;
    clip-path: polygon(0 28%, 66% 0, 100% 0, 100% 100%, 66% 100%, 0 72%);
}

.detail-art-megaphone:after {
    content: "";
    position: absolute;
    left: 29px;
    top: 45px;
    width: 22px;
    height: 7px;
    border-radius: 999px;
    background: #fff;
    transform: rotate(64deg);
}

.detail-art-cube {
    width: 30px;
    height: 30px;
    background: linear-gradient(145deg, #d6e5ff, #74a6ff);
    transform: rotate(45deg) skew(-12deg, -12deg);
}

.detail-art-cube.one {
    right: 420px;
    top: 74px;
}

.detail-art-cube.two {
    right: 44px;
    top: 44px;
}

.news-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 26px;
    align-items: start;
    margin-top: 18px;
}

.news-article-card {
    padding: 28px 34px 30px;
}

.news-article-head h2 {
    margin: 14px 0 12px;
    color: #071a3a;
    font-size: 32px;
    line-height: 1.24;
    font-weight: 950;
}

.news-article-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #65758f;
    font-size: 13px;
    font-weight: 900;
}

.news-article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.news-article-meta i {
    width: 16px;
    height: 16px;
    color: #74839a;
    position: relative;
}

.meta-calendar {
    border: 2px solid currentColor;
    border-radius: 3px;
    background: linear-gradient(currentColor, currentColor) 2px 5px / 8px 2px no-repeat;
}

.meta-source:before {
    content: "";
    position: absolute;
    inset: 2px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.meta-source:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    width: 6px;
    height: 3px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.meta-eye:before {
    content: "";
    position: absolute;
    inset: 4px 1px;
    border: 2px solid currentColor;
    border-radius: 50% / 70%;
}

.meta-eye:after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.news-detail-cover {
    position: relative;
    overflow: hidden;
    height: 260px;
    margin: 24px 0 26px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 72% 42%, rgba(22, 93, 255, .35), transparent 34%),
        linear-gradient(135deg, #071d3d, #082756 58%, #0b4bd6);
}

.news-detail-cover:before,
.news-detail-cover:after,
.news-detail-cover span:before,
.news-detail-cover span:after {
    content: "";
    position: absolute;
}

.news-detail-cover:before {
    left: 48px;
    top: 46px;
    width: 180px;
    height: 132px;
    border: 1px solid rgba(190, 214, 255, .26);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    box-shadow: 230px 0 0 rgba(255, 255, 255, .06), 460px 0 0 rgba(255, 255, 255, .06);
}

.news-detail-cover:after {
    left: 44px;
    right: 44px;
    bottom: 42px;
    height: 58px;
    background:
        linear-gradient(120deg, transparent 0 9%, #165dff 9% 11%, transparent 11% 22%, #54a3ff 22% 24%, transparent 24% 39%, #165dff 39% 41%, transparent 41% 56%, #54a3ff 56% 58%, transparent 58% 76%, #165dff 76% 78%, transparent 78% 100%) center / 100% 3px no-repeat,
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .11) 0 1px, transparent 1px 16px);
}

.news-article-body {
    color: #344760;
    font-size: 15px;
    line-height: 1.9;
}

.news-article-body h3 {
    margin: 26px 0 10px;
    color: #071a3a;
    font-size: 22px;
    line-height: 1.3;
}

.news-article-body p {
    margin-top: 10px;
}

.news-article-body ul {
    display: grid;
    gap: 9px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.news-article-body li {
    position: relative;
    padding-left: 22px;
}

.news-article-body li:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1260f6;
}

.news-detail-tip {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 22px 0;
    padding: 16px 18px;
    border: 1px solid #bdd2fb;
    border-radius: 8px;
    background: #f3f8ff;
}

.news-detail-tip i {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1260f6;
}

.news-detail-tip i:after {
    content: "";
    position: absolute;
    left: 16px;
    top: 11px;
    width: 4px;
    height: 13px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 -7px 0 #fff;
}

.news-detail-tip b {
    color: #071a3a;
    font-size: 15px;
}

.news-detail-tip p {
    margin-top: 2px;
    color: #53627a;
    font-size: 13px;
    line-height: 1.5;
}

.news-article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 28px;
}

.news-article-nav a,
.news-article-nav .is-empty {
    display: grid;
    gap: 6px;
    min-height: 76px;
    padding: 15px 16px;
    border: 1px solid #dce7f6;
    border-radius: 8px;
    background: #fff;
}

.news-article-nav span span,
.news-article-nav a span {
    color: #1260f6;
    font-size: 13px;
    font-weight: 900;
}

.news-article-nav b {
    overflow: hidden;
    color: #10213d;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-article-nav .is-empty b {
    color: #9aa7b8;
}

.news-detail-side {
    display: grid;
    gap: 14px;
}

.detail-hot-card,
.detail-related-card {
    padding: 18px;
}

.detail-return-card {
    padding: 14px 18px;
}

.detail-related-card {
    display: grid;
    gap: 10px;
}

.detail-related-card > a {
    display: grid;
    gap: 6px;
    padding: 11px 0 12px;
    border-top: 1px solid #e5edf8;
}

.detail-related-card > a:first-of-type {
    border-top: 0;
}

.detail-related-card > a span {
    color: #1260f6;
    font-size: 12px;
    font-weight: 900;
}

.detail-related-card > a b {
    color: #10213d;
    font-size: 14px;
    line-height: 1.35;
}

.detail-related-card > a time,
.detail-empty {
    color: #65758f;
    font-size: 12px;
    font-weight: 800;
}

.detail-return-card {
    overflow: hidden;
    position: relative;
    border-color: #e5c87e;
    background:
        radial-gradient(circle at 86% 18%, rgba(210, 162, 46, .16), transparent 32%),
        linear-gradient(180deg, #fffdfa, #fff);
}

.detail-return-card > i {
    display: block;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d2a22e, #f0c95e);
    position: relative;
}

.detail-return-card > i:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    width: 16px;
    height: 16px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(45deg);
}

.detail-return-card h2 {
    margin: 0;
    color: #071a3a;
    font-size: 22px;
}

.detail-return-card p {
    margin: 8px 0 14px;
    color: #5f6f86;
    font-size: 13px;
    line-height: 1.5;
}

.detail-return-card a {
    width: 100%;
    margin-top: 10px;
}

/* Exact compact news detail mockup override. */
.news-detail-page {
    padding: 6px 0 14px;
}

.news-detail-page .container {
    width: calc(100% - 92px);
    max-width: 1446px;
}

.news-detail-hero {
    height: 142px;
    padding: 22px 46px;
}

.news-detail-hero h1 {
    margin: 14px 0 8px;
    font-size: 33px;
}

.news-detail-hero p {
    font-size: 14px;
    line-height: 1.45;
}

.news-detail-crumb {
    font-size: 12px;
}

.news-detail-art {
    height: 108px;
}

.detail-art-doc {
    right: 122px;
    top: -4px;
    width: 176px;
    height: 110px;
}

.detail-art-megaphone {
    right: 300px;
    top: 42px;
    width: 72px;
    height: 62px;
}

.detail-art-megaphone:before {
    left: 17px;
    top: 20px;
    width: 36px;
    height: 20px;
}

.detail-art-megaphone:after {
    left: 24px;
    top: 39px;
    width: 18px;
}

.detail-art-cube.one {
    right: 392px;
    top: 36px;
}

.detail-art-cube.two {
    right: 46px;
    top: 32px;
}

.news-detail-layout {
    grid-template-columns: minmax(0, 1fr) 456px;
    gap: 16px;
    margin-top: 16px;
}

.news-article-card {
    padding: 16px 28px 12px;
}

.news-article-head h2 {
    margin: 12px 0 12px;
    font-size: 29px;
    line-height: 1.12;
}

.news-article-meta {
    gap: 24px;
    font-size: 13px;
}

.news-detail-cover {
    height: 154px;
    margin: 12px 0 10px;
}

.news-detail-cover:before {
    left: 54px;
    top: 20px;
    width: 150px;
    height: 96px;
    box-shadow: 216px 0 0 rgba(255, 255, 255, .06), 432px 0 0 rgba(255, 255, 255, .06);
}

.news-detail-cover:after {
    left: 54px;
    right: 54px;
    bottom: 16px;
    height: 34px;
}

.news-article-body {
    font-size: 13px;
    line-height: 1.36;
}

.news-article-body p {
    margin-top: 0;
}

.news-article-lead {
    margin-bottom: 10px;
}

.news-article-body section {
    margin-top: 7px;
}

.news-article-body h3 {
    position: relative;
    margin: 0 0 3px;
    padding-left: 16px;
    font-size: 17px;
    line-height: 1.25;
}

.news-article-body h3:before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 5px;
    height: 20px;
    border-radius: 999px;
    background: #1260f6;
}

.news-detail-tip {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;
    min-height: 34px;
    margin: 9px 0;
    padding: 6px 12px;
}

.news-detail-tip i {
    width: 20px;
    height: 20px;
}

.news-detail-tip i:after {
    font-size: 13px;
}

.news-detail-tip b {
    display: inline;
    margin-right: 6px;
    font-size: 13px;
}

.news-detail-tip p {
    display: inline;
    margin: 0;
    font-size: 12px;
}

.news-article-nav {
    gap: 286px;
    margin-top: 10px;
}

.news-article-nav a,
.news-article-nav .is-empty {
    min-height: 40px;
    padding: 7px 12px;
}

.news-article-nav b {
    font-size: 12px;
}

.news-detail-side {
    gap: 14px;
}

.detail-hot-card,
.detail-related-card,
.detail-return-card {
    padding: 18px 20px;
}

.detail-hot-card {
    min-height: 248px;
}

.detail-related-card {
    min-height: 164px;
}

.detail-return-card {
    height: 184px;
    min-height: 0;
}

.detail-hot-card .news-hot-card > a,
.detail-hot-card > a {
    min-height: 32px;
}

.detail-related-card > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 10px;
    align-items: center;
    min-height: 30px;
    padding: 0;
}

.detail-related-card > a span {
    display: none;
}

.detail-related-card > a b {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-related-card > a time {
    justify-self: end;
}

.detail-return-card > i {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
}

.detail-return-card h2 {
    font-size: 20px;
}

.detail-return-card p {
    margin: 5px 0 7px;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
}

.detail-return-card a {
    min-height: 32px;
    margin-top: 8px;
}

/* Polished icon set for the news detail page. */
.news-detail-crumb i {
    width: 6px;
    height: 6px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    opacity: .72;
}

.news-article-meta i {
    display: inline-block;
    width: 17px;
    height: 17px;
    color: #1260f6;
    border: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 17px 17px;
}

.news-article-meta i:before,
.news-article-meta i:after {
    content: none;
}

.meta-calendar {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4.5' width='12' height='10.5' rx='2' stroke='%231260f6' stroke-width='1.7'/%3E%3Cpath d='M5.5 3v3M12.5 3v3M3.4 7.4h11.2' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M6.1 10h1.7M10.2 10h1.7M6.1 12.3h1.7' stroke='%231260f6' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E");
}

.meta-source {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3.2h5.2L14 7v7.1c0 .9-.7 1.6-1.6 1.6H5c-.9 0-1.6-.7-1.6-1.6V4.8c0-.9.7-1.6 1.6-1.6Z' stroke='%231260f6' stroke-width='1.65'/%3E%3Cpath d='M10.1 3.4v3.8h3.6M6.2 10h5.6M6.2 12.5h4.1' stroke='%231260f6' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.meta-eye {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 9s2.2-4.1 6.5-4.1S15.5 9 15.5 9 13.3 13.1 9 13.1 2.5 9 2.5 9Z' stroke='%231260f6' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='9' r='2.1' stroke='%231260f6' stroke-width='1.65'/%3E%3C/svg%3E");
}

.news-detail-tip i {
    background:
        linear-gradient(135deg, #1260f6, #4d95ff);
    box-shadow: 0 8px 18px rgba(18, 96, 246, .2);
}

.news-detail-tip i:after {
    content: "";
    left: 7px;
    top: 6px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.news-side-head h2 i {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
}

.news-side-head h2 i:after {
    content: none;
}

.detail-hot-card .news-side-head h2 i {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='3.4' height='7' rx='1.2' fill='%231260f6'/%3E%3Crect x='9.3' y='5' width='3.4' height='13' rx='1.2' fill='%231260f6' opacity='.78'/%3E%3Crect x='15.6' y='8' width='3.4' height='10' rx='1.2' fill='%231260f6' opacity='.55'/%3E%3Cpath d='M3 18.5h16' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}

.detail-related-card .news-side-head h2 i {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9.2v3.6c0 .7.5 1.2 1.2 1.2h2.2l6.2 3.3V4.7L7.4 8H5.2C4.5 8 4 8.5 4 9.2Z' stroke='%231260f6' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M16 8.1c1.1 1.6 1.1 4.2 0 5.8M18.1 6.4c1.9 2.7 1.9 6.5 0 9.2' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round' opacity='.62'/%3E%3C/svg%3E");
}

.detail-return-card > i {
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.42), transparent 34%),
        linear-gradient(135deg, #d6a333, #f1ca65);
    box-shadow: 0 12px 24px rgba(198, 145, 32, .18);
}

.detail-return-card > i:before {
    left: 13px;
    top: 10px;
    width: 12px;
    height: 12px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-radius: 2px;
}

.detail-return-card > i:after {
    content: "";
    position: absolute;
    left: 13px;
    top: 16px;
    width: 18px;
    height: 4px;
    border-radius: 999px;
    background: #fff;
}

.detail-art-megaphone {
    border-radius: 26px;
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.42), transparent 28%),
        linear-gradient(145deg, #6da8ff, #1260f6);
    transform: rotate(-7deg);
}

.detail-art-megaphone:before {
    left: 17px;
    top: 19px;
    width: 42px;
    height: 24px;
    border-radius: 4px 14px 14px 4px;
    background:
        linear-gradient(#1260f6, #1260f6) 8px 9px / 24px 4px no-repeat,
        #fff;
    clip-path: polygon(0 25%, 62% 4%, 100% 0, 100% 100%, 62% 96%, 0 75%);
}

.detail-art-megaphone:after {
    left: 29px;
    top: 41px;
    width: 21px;
    height: 8px;
    border-radius: 999px;
    background: #fff;
    transform: rotate(58deg);
}

.news-hot-card > a > i {
    width: 10px;
    height: 10px;
    border: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    transform: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8V2M5 2 2.5 4.5M5 2l2.5 2.5' stroke='%23e43c35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.news-hot-card > a:nth-of-type(4) > i {
    transform: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2v6M5 8 2.5 5.5M5 8l2.5-2.5' stroke='%2318a957' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Final refined icons for the desktop news detail page. */
.news-detail-page .news-article-meta {
    gap: 14px;
}

.news-detail-page .news-article-meta i {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 1px solid #d9e6ff;
    border-radius: 7px;
    color: #1260f6;
    background: linear-gradient(180deg, #f6f9ff, #edf4ff) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.news-detail-page .news-article-meta i:before,
.news-detail-page .news-article-meta i:after {
    content: "";
    position: absolute;
    display: block;
}

.news-detail-page .meta-calendar:before {
    left: 5px;
    top: 6px;
    width: 12px;
    height: 10px;
    border: 1.6px solid currentColor;
    border-radius: 3px;
}

.news-detail-page .meta-calendar:after {
    left: 7px;
    top: 4px;
    width: 8px;
    height: 4px;
    border-left: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
}

.news-detail-page .meta-source:before {
    left: 6px;
    top: 4px;
    width: 9px;
    height: 13px;
    border: 1.6px solid currentColor;
    border-radius: 3px;
    background: linear-gradient(135deg, transparent 0 72%, rgba(18, 96, 246, .18) 73%);
}

.news-detail-page .meta-source:after {
    left: 8px;
    top: 9px;
    width: 7px;
    height: 5px;
    border: 0;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: none;
}

.news-detail-page .meta-eye:before {
    left: 4px;
    top: 7px;
    width: 14px;
    height: 8px;
    border: 1.6px solid currentColor;
    border-radius: 14px 14px 14px 14px / 10px 10px 10px 10px;
    transform: rotate(-2deg);
}

.news-detail-page .meta-eye:after {
    left: 9px;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.news-detail-page .news-detail-side .news-side-head h2 {
    gap: 10px;
}

.news-detail-page .news-detail-side .news-side-head h2 i {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid #d8e6ff;
    border-radius: 9px;
    color: #1260f6;
    background: linear-gradient(180deg, #f7faff, #edf4ff) !important;
    box-shadow: 0 8px 18px rgba(18, 96, 246, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.news-detail-page .news-detail-side .news-side-head h2 i:before,
.news-detail-page .news-detail-side .news-side-head h2 i:after {
    content: "";
    position: absolute;
    display: block;
}

.news-detail-page .detail-hot-card .news-side-head h2 i:before {
    left: 7px;
    bottom: 7px;
    width: 4px;
    height: 9px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 6px -6px 0 currentColor, 12px -2px 0 rgba(18, 96, 246, .48);
}

.news-detail-page .detail-hot-card .news-side-head h2 i:after {
    left: 7px;
    bottom: 5px;
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background: #8fb6ff;
}

.news-detail-page .detail-related-card .news-side-head h2 i:before {
    left: 7px;
    top: 10px;
    width: 12px;
    height: 9px;
    border: 1.8px solid currentColor;
    border-radius: 3px 8px 8px 3px;
    clip-path: polygon(0 16%, 62% 0, 100% 0, 100% 100%, 62% 100%, 0 84%);
}

.news-detail-page .detail-related-card .news-side-head h2 i:after {
    right: 6px;
    top: 8px;
    width: 7px;
    height: 13px;
    border-right: 1.7px solid currentColor;
    border-radius: 50%;
    opacity: .6;
}

.news-detail-page .news-detail-tip i {
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .4), transparent 30%),
        linear-gradient(135deg, #1260f6, #4d95ff);
}

.news-detail-page .news-detail-tip i:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 14px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 9px 9px 10px 10px;
    clip-path: polygon(50% 0, 100% 18%, 100% 72%, 50% 100%, 0 72%, 0 18%);
}

.news-detail-page .news-detail-tip i:after {
    content: "";
    left: 13px;
    top: 17px;
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.news-detail-page .detail-return-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.news-detail-page .detail-return-head > i {
    position: relative;
    display: block;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid rgba(198, 145, 32, .18);
    background:
        radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .55), transparent 30%),
        linear-gradient(135deg, #d39a18, #f0c65a);
    box-shadow: 0 12px 26px rgba(198, 145, 32, .2);
}

.news-detail-page .detail-return-head > i:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 11px;
    width: 13px;
    height: 13px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-radius: 2px;
    transform: rotate(45deg);
}

.news-detail-page .detail-return-head > i:after {
    content: "";
    position: absolute;
    left: 13px;
    top: 17px;
    width: 18px;
    height: 4px;
    border-radius: 999px;
    background: #fff;
}

.news-detail-page .detail-return-card > i {
    display: none;
}

.news-detail-page .detail-return-head h2 {
    margin: 0;
    line-height: 38px;
}

.news-detail-page .detail-return-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.news-detail-page .return-btn-icon {
    position: relative;
    flex: 0 0 16px;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.news-detail-page .return-btn-icon:before,
.news-detail-page .return-btn-icon:after {
    content: "";
    position: absolute;
    display: block;
}

.news-detail-page .return-btn-icon.back:before {
    left: 2px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-left: 2.4px solid currentColor;
    border-bottom: 2.4px solid currentColor;
    border-radius: 2px;
    transform: rotate(45deg);
}

.news-detail-page .return-btn-icon.back:after {
    left: 4px;
    top: 7px;
    width: 11px;
    height: 2.4px;
    border-radius: 999px;
    background: currentColor;
}

.news-detail-page .news-hot-card > a > i {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: #fff3f2 !important;
}

.news-detail-page .news-hot-card > a > i:before {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 8px;
    border-top: 2px solid #e14b45;
    border-left: 2px solid #e14b45;
    transform: rotate(45deg);
}

.news-detail-page .news-hot-card > a > i:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 2px;
    height: 9px;
    border-radius: 999px;
    background: #e14b45;
}

.news-detail-page .news-hot-card > a:nth-of-type(4) > i {
    background: #eefaf4 !important;
}

.news-detail-page .news-hot-card > a:nth-of-type(4) > i:before {
    top: 5px;
    border-color: #18a957;
    transform: rotate(225deg);
}

.news-detail-page .news-hot-card > a:nth-of-type(4) > i:after {
    background: #18a957;
}

.news-detail-page .news-detail-side .news-side-head h2 i {
    border: 0;
    color: #fff;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .32), transparent 30%),
        linear-gradient(135deg, #1260f6, #4c92ff) !important;
    box-shadow: 0 10px 22px rgba(18, 96, 246, .2);
}

.news-detail-page .detail-hot-card .news-side-head h2 i:before {
    left: 8px;
    bottom: 8px;
    width: 4px;
    height: 8px;
    background: #fff;
    box-shadow: 6px -6px 0 #fff, 12px -2px 0 rgba(255, 255, 255, .72);
}

.news-detail-page .detail-hot-card .news-side-head h2 i:after {
    left: 7px;
    bottom: 6px;
    width: 18px;
    background: rgba(255, 255, 255, .66);
}

.news-detail-page .detail-related-card .news-side-head h2 i:before {
    left: 8px;
    top: 8px;
    width: 11px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 4px;
    clip-path: none;
}

.news-detail-page .detail-related-card .news-side-head h2 i:after {
    left: 11px;
    top: 13px;
    width: 9px;
    height: 6px;
    border: 0;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-radius: 0;
    opacity: .82;
}

.news-detail-page .news-detail-tip {
    grid-template-columns: 30px minmax(0, 1fr);
}

.news-detail-page .news-detail-tip i {
    width: 24px;
    height: 24px;
    align-self: center;
}

.news-detail-page .news-detail-tip i:before {
    left: 7px;
    top: 6px;
    width: 10px;
    height: 12px;
    border-width: 1.8px;
}

.news-detail-page .news-detail-tip i:after {
    left: 9px;
    top: 12px;
    width: 7px;
    height: 4px;
}

.news-detail-page .news-hot-card > a > i {
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .45), transparent 34%),
        linear-gradient(135deg, #ffebe9, #fff5f4) !important;
    box-shadow: inset 0 0 0 1px rgba(225, 75, 69, .12);
}

.news-detail-page .news-hot-card > a > i:before {
    left: 7px;
    top: 5px;
    width: 5px;
    height: 7px;
    border-top-color: #e14b45;
    border-left-color: #e14b45;
}

.news-detail-page .news-hot-card > a > i:after {
    left: 8px;
    top: 5px;
    height: 9px;
}

.news-detail-page .news-hot-card > a:nth-of-type(4) > i {
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .5), transparent 34%),
        linear-gradient(135deg, #e9fbf2, #f5fff9) !important;
    box-shadow: inset 0 0 0 1px rgba(24, 169, 87, .14);
}

.news-detail-page .detail-art-megaphone {
    background:
        url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 21.5v5.8c0 1.2.9 2.2 2.2 2.2h4.1l10.9 6V13.3l-10.9 6H12.2c-1.3 0-2.2 1-2.2 2.2Z' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.2 29.8l2.1 7.2' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M32.4 18.2c2 2.8 2 8.1 0 10.9M37.6 14.4c4.3 5.2 4.3 13.4 0 18.6' stroke='%23fff' stroke-width='4' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") center / 46px 46px no-repeat,
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(145deg, #6faaff, #1260f6);
    box-shadow: 0 18px 35px rgba(18, 96, 246, .22);
}

.news-detail-page .detail-art-megaphone:before {
    content: none;
}

.news-detail-page .detail-art-megaphone:after {
    content: none;
}

.trust-shield-icon:before {
    content: "";
    position: absolute;
    inset: 9px 11px;
    border: 3px solid currentColor;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.trust-refresh-icon:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    border: 3px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
}

.trust-refresh-icon:after {
    content: "";
    position: absolute;
    right: 9px;
    top: 10px;
    border-left: 8px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: rotate(28deg);
}

.trust-doc-icon:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 9px;
    width: 18px;
    height: 24px;
    border: 3px solid currentColor;
    border-radius: 3px;
}

.trust-doc-icon:after {
    content: "";
    position: absolute;
    left: 17px;
    top: 17px;
    width: 10px;
    height: 3px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor;
}

.trust-support-icon:before {
    content: "";
    position: absolute;
    left: 9px;
    top: 12px;
    width: 22px;
    height: 18px;
    border: 3px solid currentColor;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
}

.trust-support-icon:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 27px;
    width: 7px;
    height: 11px;
    border-radius: 4px;
    background: currentColor;
    box-shadow: 21px 0 0 currentColor;
}

.news-card a {
    color: var(--blue);
    font-weight: 700;
}

.prose-card {
    max-width: 900px;
}

.prose-card h2,
.contact-card h2 {
    margin-top: 0;
}

.center-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 820px;
    background: var(--soft);
}

.center-sidebar {
    padding: 28px;
    color: #fff;
    background: #101828;
}

.center-brand {
    margin-bottom: 32px;
}

.center-sidebar nav {
    display: grid;
    gap: 8px;
}

.center-sidebar nav a {
    padding: 13px 14px;
    color: #cbd5e1;
    border-radius: 8px;
}

.center-sidebar nav a.active,
.center-sidebar nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.center-sidebar nav a.logout-link {
    margin-top: 14px;
    color: #fecaca;
    background: rgba(180, 35, 24, .14);
}

.center-sidebar nav a.logout-link:hover {
    color: #fff;
    background: #b42318;
}

.center-main {
    padding: 34px;
}

.center-top,
.center-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.center-actions {
    display: flex;
    gap: 10px;
}

.center-top span {
    color: var(--blue);
    font-weight: 800;
}

.center-top h1 {
    margin: 8px 0 0;
    font-size: 36px;
}

.center-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 28px 0;
}

.center-cards article {
    padding: 22px;
}

.center-cards span {
    color: var(--muted);
}

.center-cards strong {
    display: block;
    margin: 8px 0;
    font-size: 26px;
}

.center-cards strong.status-wait {
    color: #b42318;
}

.center-panel {
    padding: 24px;
}

.lesson.unlocked em,
.lesson.unlocked a {
    color: var(--blue);
    font-weight: 700;
}

.lesson.unlocked a {
    text-decoration: none;
}

.order-summary {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fbff;
}

.order-summary p {
    margin: 0 0 6px;
    color: #475467;
    line-height: 1.6;
}

.order-summary p:last-child {
    margin-bottom: 0;
}

.login-panel-wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items: start;
}

.center-login-card {
    max-width: none;
}

.code-row {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 12px;
    align-items: end;
}

.code-row .outline-btn {
    min-height: 44px;
}

.login-switch {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    color: var(--muted);
}

.login-switch a {
    color: var(--blue);
    font-weight: 800;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.form-result.force-show {
    display: block;
    margin-top: 16px;
}

.login-page {
    position: relative;
    overflow: hidden;
    min-height: 820px;
    padding: 42px 0 60px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .96) 48%, rgba(239, 246, 255, .9) 100%),
        linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
}

.login-page:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .48;
    background-image:
        linear-gradient(rgba(22, 93, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 93, 255, .06) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}

.login-page:after {
    content: "";
    position: absolute;
    right: -140px;
    top: 82px;
    width: 620px;
    height: 520px;
    border: 1px solid rgba(22, 93, 255, .1);
    border-radius: 48px;
    background: linear-gradient(145deg, rgba(231, 240, 255, .56), rgba(255, 255, 255, .16));
    transform: rotate(-8deg);
}

.login-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) 440px;
    gap: 52px;
    align-items: center;
}

.login-visual {
    min-height: 592px;
    padding: 24px;
    border: 1px solid rgba(210, 223, 242, .92);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(246, 250, 255, .86)),
        linear-gradient(180deg, #fff, #edf4ff);
    box-shadow: 0 30px 90px rgba(22, 45, 86, .12);
}

.login-visual-head,
.login-visual-foot,
.login-panel-top,
.login-chart-head,
.login-form-options,
.login-register-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.login-brand {
    pointer-events: none;
}

.login-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    color: #9a6a13;
    font-weight: 800;
    font-size: 14px;
    border: 1px solid #efd9a7;
    border-radius: 999px;
    background: #fffaf0;
}

.login-status-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
}

.login-dashboard {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    min-height: 382px;
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid rgba(199, 215, 238, .92);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(16, 44, 84, .15);
    transform: rotate(-2.8deg) skewX(-1deg);
}

.login-dashboard-nav {
    padding: 24px 14px;
    color: #b8c7dd;
    background:
        linear-gradient(180deg, rgba(20, 47, 88, .96), rgba(7, 25, 53, .98)),
        #071935;
}

.login-dashboard-nav b {
    display: block;
    margin: 0 0 24px;
    color: #fff;
    font-size: 17px;
}

.login-dashboard-nav span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 8px 0;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
}

.login-dashboard-nav span.active {
    color: #fff;
    background: rgba(22, 93, 255, .34);
}

.login-dashboard-nav i {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: currentColor;
    opacity: .72;
}

.login-dashboard-main {
    display: grid;
    gap: 14px;
    padding: 22px;
    background:
        linear-gradient(180deg, #f9fbff 0%, #fff 56%),
        #fff;
}

.login-panel-top small {
    display: block;
    margin-bottom: 6px;
    color: #667085;
    font-weight: 800;
}

.login-panel-top strong {
    display: block;
    color: #101828;
    font-size: 22px;
}

.login-panel-top em {
    min-height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    color: #0f7a45;
    font-style: normal;
    font-weight: 900;
    border-radius: 999px;
    background: #e9fbf1;
}

.login-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.login-metric-row div,
.login-chart-card,
.login-table-card {
    border: 1px solid #e8eef8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(16, 44, 84, .05);
}

.login-metric-row div {
    padding: 16px;
}

.login-metric-row span,
.login-table-card span,
.login-chart-head span {
    display: block;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

.login-metric-row b {
    display: block;
    margin-top: 8px;
    color: #0b1f44;
    font-size: 18px;
}

.login-chart-card {
    padding: 18px;
}

.login-chart-head b {
    color: var(--blue);
    font-size: 14px;
}

.login-flow-line {
    position: relative;
    display: flex;
    align-items: end;
    gap: 12px;
    height: 104px;
    margin-top: 16px;
    padding: 0 8px 12px;
    border-bottom: 1px solid #dce8f8;
}

.login-flow-line:before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 48px;
    height: 2px;
    background: linear-gradient(90deg, #165dff, #14b8d8, #d6a333);
}

.login-flow-line i {
    position: relative;
    z-index: 1;
    flex: 1;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #1d6dff, #7eb3ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
}

.login-flow-line i:nth-child(1) { height: 38px; }
.login-flow-line i:nth-child(2) { height: 54px; }
.login-flow-line i:nth-child(3) { height: 44px; }
.login-flow-line i:nth-child(4) { height: 72px; }
.login-flow-line i:nth-child(5) { height: 60px; }
.login-flow-line i:nth-child(6) { height: 82px; }
.login-flow-line i:nth-child(7) { height: 68px; background: linear-gradient(180deg, #d6a333, #f2c65d); }

.login-table-card {
    display: grid;
    gap: 0;
    overflow: hidden;
}

.login-table-card div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 13px 16px;
    border-top: 1px solid #edf2fa;
}

.login-table-card div:first-child {
    border-top: 0;
}

.login-table-card b {
    color: #155eef;
    font-size: 13px;
}

.login-visual-foot {
    margin-top: 26px;
    padding: 20px 8px 0;
}

.login-visual-foot div {
    min-width: 0;
}

.login-visual-foot b {
    display: block;
    color: #102a56;
    font-size: 17px;
}

.login-visual-foot span {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 13px;
}

.login-card-wrap {
    display: grid;
    gap: 18px;
}

.login-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid rgba(214, 225, 242, .95);
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 30px 82px rgba(16, 44, 84, .14);
}

.login-card:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, var(--blue), #14b8d8, var(--gold));
}

.login-card-head span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    color: #0f56d9;
    font-weight: 900;
    border: 1px solid #d8e6ff;
    border-radius: 999px;
    background: #f4f8ff;
}

.login-card h1 {
    margin: 16px 0 10px;
    color: #061532;
    font-size: 36px;
    line-height: 1.16;
    letter-spacing: 0;
}

.login-card p {
    font-size: 15px;
    line-height: 1.8;
}

.login-form {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.login-form label {
    display: grid;
    gap: 9px;
}

.login-form label > span {
    color: #344054;
    font-weight: 900;
    font-size: 14px;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #d9e4f5;
    border-radius: 10px;
    background: #fbfdff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
    border-color: rgba(22, 93, 255, .56);
    box-shadow: 0 0 0 4px rgba(22, 93, 255, .1);
}

.login-form-options {
    margin-top: 2px;
    color: #667085;
    font-size: 14px;
}

.login-check {
    display: inline-flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 8px !important;
    cursor: pointer;
}

.login-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.login-form-options a {
    color: #0f56d9;
    font-weight: 800;
}

.login-submit {
    width: 100%;
    min-height: 54px;
    margin-top: 2px;
    font-size: 16px;
}

.login-submit span {
    position: relative;
    width: 16px;
    height: 16px;
    margin-right: 9px;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
}

.login-submit span:after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -5px;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    transform: rotate(45deg);
}

.login-register-box {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #e4ecf8;
    border-radius: 12px;
    background: #f8fbff;
}

.login-register-box b {
    display: block;
    color: #102a56;
    font-size: 16px;
}

.login-register-box span {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 13px;
}

.login-note {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid #efd9a7;
    border-radius: 12px;
    background: #fffaf0;
}

.login-note i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 42%, #fff 0 4px, transparent 5px),
        linear-gradient(135deg, #e1ac35, #b87c16);
    box-shadow: 0 10px 22px rgba(188, 138, 34, .18);
}

.login-note p {
    color: #7a5d24;
    font-size: 13px;
    line-height: 1.7;
}

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

.login-rights article {
    min-height: 112px;
    padding: 14px 14px;
    border: 1px solid #dfe9f7;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 16px 38px rgba(16, 44, 84, .07);
}

.login-right-icon {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    border-radius: 9px;
    background: #edf5ff;
}

.login-right-icon:before,
.login-right-icon:after {
    content: "";
    position: absolute;
}

.login-right-icon.download:before {
    left: 14px;
    top: 7px;
    width: 4px;
    height: 12px;
    border-radius: 999px;
    background: var(--blue);
}

.login-right-icon.download:after {
    left: 10px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-right: 3px solid var(--blue);
    border-bottom: 3px solid var(--blue);
    transform: rotate(45deg);
}

.login-right-icon.video:before {
    inset: 8px 7px;
    border-radius: 6px;
    background: var(--blue);
}

.login-right-icon.video:after {
    left: 14px;
    top: 12px;
    border-left: 8px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.login-right-icon.order:before {
    inset: 7px 9px;
    border: 2px solid var(--gold);
    border-radius: 5px;
}

.login-right-icon.order:after {
    left: 12px;
    top: 14px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

.login-rights b {
    display: block;
    color: #102a56;
    font-size: 15px;
}

.login-rights span {
    display: block;
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
}

/* Login page, matched to the approved desktop mockup. */
.login-page {
    position: relative;
    overflow: hidden;
    min-height: 930px;
    padding: 50px 0 34px;
    background:
        linear-gradient(34deg, transparent 0 18%, rgba(231, 238, 250, .58) 18.2% 30%, transparent 30.2%),
        linear-gradient(145deg, transparent 0 58%, rgba(234, 242, 255, .85) 58.2% 79%, transparent 79.2%),
        radial-gradient(circle at 20% 90%, rgba(22, 93, 255, .08), transparent 25%),
        linear-gradient(180deg, #fff 0%, #f7faff 100%);
}

.login-page:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 340px;
    height: 300px;
    opacity: .32;
    background-image: radial-gradient(rgba(22, 93, 255, .18) 1.2px, transparent 1.3px);
    background-size: 12px 12px;
    mask-image: linear-gradient(45deg, #000, transparent 70%);
}

.login-page:after {
    content: "";
    position: absolute;
    right: -52px;
    top: 128px;
    width: 520px;
    height: 620px;
    border: 1px solid rgba(22, 93, 255, .12);
    border-radius: 46px;
    background: rgba(247, 250, 255, .46);
    transform: rotate(-8deg);
}

.login-page .container {
    width: min(1390px, calc(100% - 148px));
}

.login-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 486px;
    gap: 42px;
    align-items: start;
}

.login-left-wrap {
    min-width: 0;
    padding-top: 32px;
}

.login-dashboard {
    display: grid;
    grid-template-columns: 166px minmax(0, 1fr);
    height: 610px;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
    border: 1px solid #c6d8f2;
    border-radius: 16px;
    background: #071b38;
    box-shadow: 0 22px 62px rgba(21, 60, 112, .18);
    transform: none;
}

.login-dashboard-nav {
    padding: 20px 12px;
    color: #cfdbef;
    border-right: 1px solid rgba(185, 207, 237, .16);
    background:
        linear-gradient(180deg, rgba(14, 45, 88, .94), rgba(5, 22, 48, .98)),
        #071b38;
}

.login-dashboard-nav b {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    color: #fff;
    font-size: 16px;
}

.login-dashboard-nav b i {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, #fff, #8db7ff);
}

.login-dashboard-nav span {
    display: grid;
    grid-template-columns: 18px 1fr 8px;
    align-items: center;
    min-height: 34px;
    margin: 2px 0;
    padding: 0 10px;
    color: #c8d5e9;
    border-radius: 7px;
    font-size: 13px;
}

.login-dashboard-nav span:after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    opacity: .7;
    transform: rotate(45deg);
}

.login-dashboard-nav span.active {
    color: #fff;
    background: linear-gradient(135deg, #165dff, #0d49cc);
}

.login-dashboard-nav span i {
    width: 12px;
    height: 12px;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: transparent;
    opacity: .88;
}

.login-dashboard-main {
    display: grid;
    grid-template-rows: 52px 74px minmax(0, 444px);
    gap: 10px;
    padding: 0 14px 14px;
    color: #eaf1ff;
    background:
        radial-gradient(circle at 50% 10%, rgba(22, 93, 255, .18), transparent 38%),
        linear-gradient(180deg, #0a2a55 0%, #061c39 100%);
}

.login-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(206, 222, 246, .1);
}

.login-topbar strong {
    color: #fff;
    font-size: 16px;
}

.login-topbar div {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 12px;
}

.login-topbar span {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(230, 239, 255, .82);
    border-radius: 50%;
}

.login-topbar em {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 36%, #ffd49a 0 3px, transparent 4px),
        radial-gradient(circle at 50% 78%, #f0a35d 0 7px, transparent 8px),
        #183a66;
}

.login-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.login-stat-grid article {
    min-height: 64px;
    padding: 10px 14px 8px;
    border: 1px solid rgba(168, 195, 236, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.login-stat-grid span {
    display: block;
    color: #9fb3cf;
    font-size: 11px;
}

.login-stat-grid b {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 19px;
}

.login-stat-grid em {
    display: block;
    margin-top: 2px;
    color: #62df91;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
}

.login-stat-grid em.down {
    color: #ff6464;
}

.login-console-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 166px;
    gap: 12px;
    min-height: 0;
}

.login-main-stack {
    display: grid;
    grid-template-rows: 244px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
}

.login-chart-card {
    min-height: 0;
    height: 100%;
    padding: 14px;
    border: 1px solid rgba(168, 195, 236, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    box-shadow: none;
}

.login-chart-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.login-chart-head strong {
    color: #fff;
    font-size: 15px;
}

.login-chart-head div {
    display: inline-flex;
    gap: 4px;
}

.login-chart-head span {
    min-height: 24px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    color: #b9cae4;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
}

.login-chart-head span:first-child {
    color: #fff;
    background: rgba(22, 93, 255, .42);
}

.login-line-chart {
    position: relative;
    height: 144px;
    margin: 12px 0 0;
    border-bottom: 1px solid rgba(173, 198, 235, .12);
    background:
        linear-gradient(rgba(184, 207, 242, .08) 1px, transparent 1px) 0 8px / 100% 32px;
}

.login-line-chart:before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 26px;
    bottom: 18px;
    background: linear-gradient(180deg, rgba(22, 93, 255, .32), rgba(22, 93, 255, .02));
    clip-path: polygon(0 78%, 8% 62%, 16% 72%, 25% 42%, 35% 60%, 45% 48%, 55% 64%, 66% 36%, 74% 28%, 83% 48%, 91% 60%, 100% 34%, 100% 100%, 0 100%);
}

.login-line-chart:after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 26px;
    bottom: 18px;
    background: #3c82ff;
    clip-path: polygon(0 77%, 8% 62%, 16% 71%, 25% 42%, 35% 60%, 45% 48%, 55% 64%, 66% 36%, 74% 28%, 83% 48%, 91% 60%, 100% 34%, 100% 38%, 91% 64%, 83% 52%, 74% 32%, 66% 40%, 55% 68%, 45% 52%, 35% 64%, 25% 46%, 16% 75%, 8% 66%, 0 81%);
}

.login-line-chart i {
    position: relative;
    z-index: 1;
    display: none;
}

.login-chart-axis {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    color: #9fb3cf;
    font-size: 11px;
    text-align: center;
}

.login-side-stack {
    display: grid;
    grid-template-rows: 96px 118px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
}

.login-side-stack section {
    min-height: 0;
    padding: 11px;
    border: 1px solid rgba(168, 195, 236, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.login-side-stack b {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-size: 13px;
}

.login-side-stack a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    margin-top: 7px;
    padding: 0 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 6px;
    background: #165dff;
}

.login-video-mini,
.login-download-mini {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    align-items: center;
    color: #b9cae4;
    font-size: 11px;
    line-height: 1.5;
}

.login-video-mini i {
    width: 34px;
    height: 30px;
    border-radius: 6px;
    background:
        linear-gradient(135deg, transparent 0 42%, #fff 42% 58%, transparent 58%),
        linear-gradient(135deg, #7fb0ff, #155eef);
}

.login-download-mini i {
    position: relative;
    width: 34px;
    height: 34px;
    border: 3px solid #fff;
    border-radius: 50%;
}

.login-download-mini i:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 8px;
    height: 12px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
}

.login-download-mini em,
.login-platform-list em {
    color: #5be17d;
    font-style: normal;
}

.login-platform-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.login-platform-head b {
    margin: 0;
}

.login-platform-head a {
    min-height: 0;
    margin: 0;
    padding: 0;
    color: #5d95ff;
    background: transparent;
    font-size: 10px;
}

.login-platform-list {
    display: grid;
    gap: 5px;
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
}

.login-platform-list li {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    color: #fff;
    font-size: 12px;
}

.login-platform-list i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #fff;
}

.login-platform-list i.red { background: #ff554f; border-radius: 50%; }
.login-platform-list i.yellow { background: #ffd23f; border-radius: 50%; }
.login-platform-list i.purple { background: #925cff; border-radius: 50%; }
.login-platform-list i.cyan { background: #42d9e8; border-radius: 50%; }

.login-order-card {
    min-height: 176px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(168, 195, 236, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.login-order-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.login-order-card strong {
    color: #fff;
    font-size: 15px;
}

.login-order-card a {
    color: #4d8bff;
    font-weight: 800;
    font-size: 12px;
}

.login-order-card table {
    width: 100%;
    border-collapse: collapse;
    color: #d8e5f8;
    font-size: 12px;
}

.login-order-card th,
.login-order-card td {
    height: 27px;
    text-align: left;
    border-bottom: 1px solid rgba(184, 207, 242, .08);
}

.login-order-card th {
    color: #9fb3cf;
    font-weight: 700;
}

.login-order-card em {
    color: #70df85;
    font-style: normal;
}

.login-proof-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 22px;
    padding: 18px 24px;
    border: 1px solid #d9e5f6;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 45px rgba(23, 52, 96, .08);
}

.login-proof-strip article {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 70px;
    padding: 0 20px;
    border-left: 1px solid #d9e2ef;
}

.login-proof-strip article:first-child {
    border-left: 0;
    padding-left: 0;
}

.login-proof-strip i {
    position: relative;
    grid-row: span 2;
    width: 48px;
    height: 48px;
    border: 3px solid #c79528;
    color: #c79528;
}

.login-proof-strip i.shield,
.login-proof-strip i.badge {
    border-radius: 12px;
    clip-path: none;
}

.login-proof-strip i.shield:after {
    content: "";
    position: absolute;
    left: 14px;
    top: 15px;
    width: 14px;
    height: 8px;
    border-left: 3px solid #c79528;
    border-bottom: 3px solid #c79528;
    transform: rotate(-45deg);
}

.login-proof-strip i.badge:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 9px;
    width: 18px;
    height: 18px;
    border: 3px solid #c79528;
    border-radius: 50%;
}

.login-proof-strip i.badge:after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: 6px;
    width: 10px;
    height: 12px;
    border-left: 3px solid #c79528;
    border-right: 3px solid #c79528;
}

.login-proof-strip i.lock {
    border-radius: 10px;
}

.login-proof-strip i.lock:before {
    content: "";
    position: absolute;
    left: 9px;
    top: -18px;
    width: 24px;
    height: 22px;
    border: 3px solid #c79528;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
}

.login-proof-strip i.refresh {
    border: 0;
    border-radius: 50%;
}

.login-proof-strip i.refresh:before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 4px solid #c79528;
    border-right-color: transparent;
    border-radius: 50%;
}

.login-proof-strip b {
    color: #142645;
    font-size: 18px;
}

.login-proof-strip span {
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

.login-card {
    position: relative;
    overflow: hidden;
    min-height: 822px;
    padding: 36px 32px 24px;
    border: 1px solid #cfdcf0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 30px 90px rgba(21, 60, 112, .13);
}

.login-card:before {
    content: none;
}

.login-card-head {
    text-align: center;
}

.login-card h1 {
    margin: 0 0 10px;
    color: #081b3a;
    font-size: 34px;
    line-height: 1.2;
}

.login-card p {
    color: #53647e;
    font-size: 15px;
    line-height: 1.8;
}

.login-form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.login-form label {
    display: grid;
    gap: 9px;
}

.login-form label > span {
    color: #1e293b;
    font-weight: 900;
    font-size: 14px;
}

.login-input-box {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr 34px;
    align-items: center;
    height: 50px;
    border: 1px solid #d5e0ef;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
}

.login-input-box input {
    width: 100%;
    height: 48px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.login-input-box:focus-within {
    border-color: rgba(22, 93, 255, .55);
    box-shadow: 0 0 0 4px rgba(22, 93, 255, .08);
}

.login-input-box > i {
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: 16px;
    color: #9aacc7;
}

.login-input-box.email > i {
    border: 2px solid currentColor;
    border-radius: 3px;
}

.login-input-box.email > i:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 3px;
    width: 10px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.login-input-box.password > i {
    width: 16px;
    height: 14px;
    margin-top: 4px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.login-input-box.password > i:before {
    content: "";
    position: absolute;
    left: 2px;
    top: -10px;
    width: 8px;
    height: 10px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.login-input-box.password em {
    position: relative;
    width: 18px;
    height: 12px;
    margin-right: 14px;
    border: 2px solid #667891;
    border-radius: 50%;
}

.login-input-box.password em:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #667891;
}

.login-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -1px;
    color: #667891;
    font-size: 14px;
}

.login-check {
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    cursor: pointer;
}

.login-check input {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: var(--blue);
}

.login-form-options a {
    color: #155eef;
    font-weight: 800;
}

.login-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 0;
    border-radius: 8px;
    font-size: 17px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 28px 0;
    color: #667891;
    font-size: 15px;
}

.login-divider:before,
.login-divider:after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d8e2ef;
}

.login-register-btn {
    width: 100%;
    min-height: 52px;
    color: #155eef;
    border-color: #2368ff;
    background: #fff;
    font-size: 17px;
}

.login-note {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: center;
    margin-top: 28px;
    padding: 18px;
    border: 1px solid #efca83;
    border-radius: 8px;
    background: #fffaf0;
}

.login-note i {
    position: relative;
    width: 36px;
    height: 36px;
    border: 3px solid #d29b28;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.login-note i:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 7px;
    width: 3px;
    height: 12px;
    border-radius: 999px;
    background: #d29b28;
}

.login-note i:after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 7px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d29b28;
}

.login-note p {
    color: #8a641f;
    font-size: 14px;
    line-height: 1.7;
}

.login-rights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.login-rights article {
    min-height: 142px;
    padding: 22px 12px 18px;
    text-align: center;
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.login-right-icon {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    border-radius: 10px;
    background: #eef5ff;
}

.login-right-icon.download:before {
    left: 19px;
    top: 8px;
    width: 4px;
    height: 18px;
    background: #155eef;
}

.login-right-icon.download:after {
    left: 14px;
    top: 19px;
    width: 12px;
    height: 12px;
    border-right: 3px solid #155eef;
    border-bottom: 3px solid #155eef;
}

.login-right-icon.video:before {
    inset: 10px 8px;
    border-radius: 5px;
    background: #155eef;
}

.login-right-icon.video:after {
    left: 17px;
    top: 15px;
}

.login-right-icon.order:before {
    inset: 8px 11px;
    border: 3px solid #155eef;
    border-radius: 4px;
}

.login-right-icon.order:after {
    left: 16px;
    top: 18px;
    border-color: #155eef;
}

.login-rights b {
    color: #182b4d;
    font-size: 15px;
}

.login-rights span {
    margin-top: 8px;
    color: #667891;
    font-size: 13px;
    line-height: 1.7;
}

.login-help-line {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    color: #5b6d86;
    font-size: 15px;
}

.login-help-line span {
    width: 18px;
    height: 18px;
    border: 2px solid #8ba4c8;
    border-radius: 50%;
}

.login-help-line a {
    color: #155eef;
    font-weight: 900;
}

.code-result {
    margin-top: -8px;
}

.product-hero {
    padding: 74px 0 62px;
    overflow: hidden;
    border-bottom: 1px solid #dce6f5;
    background:
        radial-gradient(circle at 75% 50%, rgba(22, 93, 255, .13), transparent 34%),
        linear-gradient(112deg, #fff 0%, #fff 48%, #f3f7ff 100%);
}

.product-hero-grid {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 58px;
    align-items: center;
}

.product-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    color: #a67816;
    border: 1px solid rgba(211, 161, 49, .52);
    border-radius: 999px;
    background: rgba(255, 251, 241, .92);
    font-size: 14px;
    font-weight: 900;
}

.product-hero h1 {
    max-width: 620px;
    margin: 22px 0 18px;
    color: #071735;
    font-size: 52px;
    line-height: 1.18;
    letter-spacing: 0;
}

.product-hero p {
    max-width: 610px;
    color: #344766;
    font-size: 17px;
    line-height: 1.9;
}

.product-hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 28px;
}

.product-preview {
    overflow: hidden;
    border: 1px solid rgba(184, 203, 234, .72);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 26px 54px rgba(15, 37, 78, .18), 12px 12px 0 rgba(22, 93, 255, .08);
    transform: rotate(-2deg);
}

.product-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #e7edf5;
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.product-preview-head b {
    color: #071735;
    font-size: 18px;
}

.product-preview-head span {
    color: #63728b;
    font-size: 13px;
}

.product-preview-body {
    display: grid;
    grid-template-columns: 112px 1fr;
    min-height: 356px;
}

.product-preview-side {
    padding: 22px;
    background: linear-gradient(180deg, #071d3d, #092d5d);
}

.product-preview-side i {
    display: block;
    height: 36px;
    margin-bottom: 14px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .14);
}

.product-preview-side i.active {
    background: linear-gradient(135deg, var(--blue), #2f86ff);
}

.product-preview-main {
    display: grid;
    gap: 18px;
    padding: 24px;
    background: linear-gradient(180deg, #fbfdff, #f5f8fd);
}

.product-score,
.product-bars,
.product-preview-list {
    border: 1px solid #e4ebf5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(29, 57, 103, .06);
}

.product-score {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: center;
    padding: 20px;
}

.product-score span {
    color: #63728b;
    font-weight: 800;
}

.product-score strong {
    grid-row: span 2;
    color: var(--blue);
    font-size: 46px;
}

.product-score em {
    color: #16833a;
    font-style: normal;
    font-weight: 900;
}

.product-bars {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.product-bars p {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 16px;
    align-items: center;
    color: #53637a;
    line-height: 1.2;
}

.product-bars i {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), #74a6ff);
}

.product-preview-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
}

.product-preview-list span {
    display: grid;
    place-items: center;
    min-height: 54px;
    color: #10213d;
    border-radius: 8px;
    background: #f4f8ff;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.product-section {
    padding: 76px 0;
    background: #fff;
}

.product-section.soft {
    background: #f7f9fc;
}

.product-section-title {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.product-section-title.left {
    margin-left: 0;
    text-align: left;
}

.product-section-title span {
    color: var(--blue);
    font-size: 14px;
    font-weight: 900;
}

.product-section-title h2 {
    margin: 10px 0 10px;
    color: #071735;
    font-size: 38px;
    line-height: 1.28;
}

.product-section-title p {
    color: #53637a;
    font-size: 16px;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 12px;
}

.platform-grid span {
    display: grid;
    place-items: center;
    min-height: 62px;
    color: #10213d;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(26, 54, 101, .05);
    font-weight: 900;
}

.product-two-col {
    display: grid;
    grid-template-columns: 1fr 370px;
    gap: 30px;
    align-items: start;
}

.product-capability-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.product-capability-list article {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    min-height: 154px;
    padding: 24px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(26, 54, 101, .06);
}

.product-capability-list i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blue), #2f86ff);
    font-style: normal;
    font-weight: 900;
}

.product-capability-list b {
    display: block;
    margin-bottom: 8px;
    color: #10213d;
    font-size: 18px;
}

.product-capability-list p {
    color: #63728b;
    font-size: 14px;
    line-height: 1.75;
}

.product-spec-panel {
    position: sticky;
    top: 96px;
    padding: 28px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background:
        radial-gradient(circle at 82% 10%, rgba(211, 161, 49, .18), transparent 28%),
        #fff;
    box-shadow: 0 16px 38px rgba(26, 54, 101, .08);
}

.product-spec-panel h3 {
    margin: 0 0 22px;
    color: #071735;
    font-size: 26px;
}

.product-spec-panel dl {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 14px 10px;
    margin: 0 0 24px;
}

.product-spec-panel dt {
    color: #63728b;
}

.product-spec-panel dd {
    margin: 0;
    color: #10213d;
    font-weight: 900;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.audience-grid article {
    padding: 30px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(26, 54, 101, .07);
}

.audience-grid article > span {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    border-radius: 8px;
    background: linear-gradient(135deg, #d2a22e, #b98217);
    font-weight: 900;
}

.audience-grid h3 {
    margin: 20px 0 10px;
    color: #071735;
    font-size: 24px;
}

.audience-grid p {
    color: #53637a;
    font-size: 15px;
}

.audience-grid ul {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.audience-grid li {
    position: relative;
    margin-top: 12px;
    padding-left: 22px;
    color: #253a59;
    font-weight: 800;
}

.audience-grid li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
}

.product-compliance-note {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    align-items: center;
    margin-top: 24px;
    padding: 20px 24px;
    border: 1px solid #f1dfaf;
    border-radius: 8px;
    background: #fffaf0;
}

.product-compliance-note b {
    color: #8b651c;
    font-size: 18px;
}

.product-compliance-note p {
    color: #6b5a34;
    font-size: 14px;
    line-height: 1.75;
}

.product-intro-hero .container,
.product-intro-page .container {
    width: min(1280px, calc(100% - 48px));
}

.product-intro-hero {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    padding: 20px 0 8px;
    border-bottom: 1px solid #dce6f5;
    background:
        linear-gradient(145deg, rgba(229, 238, 255, .78) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(325deg, rgba(229, 238, 255, .82) 0%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(180deg, #fff 0%, #f6faff 100%);
}

.product-intro-hero:before,
.product-intro-hero:after {
    content: "";
    position: absolute;
    width: 760px;
    height: 230px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(209, 224, 249, .65), rgba(255, 255, 255, 0));
    transform: rotate(32deg);
}

.product-intro-hero:before {
    left: -170px;
    top: -70px;
}

.product-intro-hero:after {
    right: -210px;
    bottom: -70px;
    transform: rotate(-26deg);
}

.product-intro-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

.product-intro-copy {
    padding-top: 22px;
}

.product-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 18px;
    color: var(--blue);
    border: 1px solid #d4e2fa;
    border-radius: 999px;
    background: #eaf2ff;
    font-size: 15px;
    font-weight: 900;
}

.product-intro-hero h1 {
    margin: 22px 0 18px;
    color: #071735;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 900;
}

.product-intro-hero h1 em {
    color: var(--blue);
    font-style: normal;
}

.product-intro-hero p {
    max-width: 460px;
    color: #344766;
    font-size: 15px;
    line-height: 1.85;
}

.product-overview-panel {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    min-height: 340px;
    overflow: hidden;
    border: 1px solid rgba(184, 203, 234, .8);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 46px rgba(15, 37, 78, .16), 10px 10px 0 rgba(22, 93, 255, .06);
}

.product-overview-panel aside {
    padding: 18px 12px;
    color: #9fb2cf;
    background: linear-gradient(180deg, #061a38, #092854);
}

.product-overview-panel aside b {
    display: block;
    margin: 0 0 14px 10px;
    color: #fff;
    font-size: 13px;
}

.product-overview-panel aside span {
    display: block;
    margin-top: 7px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.2;
}

.product-overview-panel aside span.active {
    color: #fff;
    background: rgba(22, 93, 255, .48);
}

.product-overview-panel > section {
    min-width: 0;
    padding: 16px 18px;
    background: linear-gradient(180deg, #fbfdff, #f5f8fd);
}

.product-panel-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #071735;
}

.product-panel-top b {
    margin-right: auto;
    font-size: 14px;
}

.product-panel-top i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #eef3fb;
}

.product-panel-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.product-panel-metrics article,
.product-platform-card,
.product-chart-card,
.product-quick-card,
.product-status-card {
    border: 1px solid #e1e9f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(31, 57, 101, .05);
}

.product-panel-metrics article {
    position: relative;
    min-height: 56px;
    padding: 10px 12px;
}

.product-panel-metrics span {
    display: block;
    color: #7b8aa1;
    font-size: 10px;
}

.product-panel-metrics strong {
    display: block;
    margin-top: 6px;
    color: #0c1b34;
    font-size: 16px;
}

.product-panel-metrics em,
.product-panel-metrics small {
    position: absolute;
    right: 10px;
    bottom: 12px;
    color: #16a34a;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.product-panel-metrics small {
    color: #52627a;
    font-weight: 800;
}

.product-panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) 140px;
    grid-template-rows: 154px 74px;
    gap: 10px;
}

.product-platform-card {
    grid-row: span 2;
    padding: 14px;
}

.product-platform-card b,
.product-chart-card b,
.product-quick-card b,
.product-status-card b {
    display: block;
    margin-bottom: 10px;
    color: #10213d;
    font-size: 12px;
}

.product-platform-card div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.product-platform-card span {
    display: grid;
    align-content: center;
    min-height: 39px;
    padding: 0 8px;
    color: #10213d;
    border: 1px solid #e4ebf5;
    border-radius: 8px;
    background: #fbfdff;
    font-size: 11px;
    font-weight: 900;
}

.product-platform-card em {
    margin-top: 3px;
    color: #16a34a;
    font-size: 10px;
    font-style: normal;
}

.product-chart-card {
    padding: 14px;
}

.product-chart-card svg {
    width: 100%;
    height: 112px;
}

.product-quick-card {
    grid-row: span 2;
    padding: 14px;
}

.product-quick-card span {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    color: #31466a;
    border-radius: 7px;
    background: #f3f7ff;
    font-size: 11px;
    font-weight: 800;
}

.product-status-card {
    padding: 13px 14px;
}

.product-status-card dl {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 7px;
    margin: 0;
    font-size: 11px;
}

.product-status-card dt {
    color: #7b8aa1;
}

.product-status-card dd {
    margin: 0;
    color: #16a34a;
    text-align: right;
    font-weight: 900;
}

.product-intro-page {
    padding: 0 0 58px;
    background:
        radial-gradient(circle at 14% 20%, rgba(22, 93, 255, .08), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #fff 55%);
}

.product-info-shell,
.product-lower-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px 292px;
    gap: 16px;
    align-items: stretch;
    transform: translateY(-8px);
}

.product-lower-shell {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1fr);
    margin-top: 8px;
    transform: none;
}

.product-description-card,
.product-meta-card,
.product-usage-card,
.product-capability-card,
.product-audience-card,
.product-trust-row {
    border: 1px solid #cfdcf0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(22, 45, 86, .08);
}

.product-description-card,
.product-meta-card,
.product-usage-card {
    min-height: 204px;
    padding: 20px 24px;
}

.product-description-card h2,
.product-meta-card h2,
.product-usage-card h2,
.product-capability-card h2,
.product-audience-card h2 {
    position: relative;
    margin: 0 0 16px;
    color: #071735;
    font-size: 22px;
    line-height: 1.25;
}

.product-description-card h2:after,
.product-meta-card h2:after,
.product-capability-card h2:after,
.product-audience-card h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 38px;
    height: 3px;
    border-radius: 999px;
    background: var(--blue);
}

.product-description-card p {
    color: #435979;
    font-size: 13px;
    line-height: 1.65;
}

.product-description-card h3 {
    margin: 16px 0 11px;
    color: #10213d;
    font-size: 15px;
}

.product-platform-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.product-platform-grid span {
    display: grid;
    place-items: center;
    min-height: 36px;
    color: #10213d;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
}

.product-meta-card dl {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 13px 10px;
    margin: 0;
}

.product-meta-card dt {
    color: #53627a;
    font-size: 13px;
}

.product-meta-card dd {
    margin: 0;
    color: #263b5d;
    text-align: right;
    font-size: 13px;
    font-weight: 900;
}

.product-usage-card {
    display: grid;
    grid-template-columns: 1fr 76px;
    gap: 16px;
    border-color: #ebd19a;
    background:
        radial-gradient(circle at 86% 22%, rgba(210, 162, 46, .18), transparent 30%),
        #fffdfa;
}

.product-usage-card p {
    color: #31466a;
    font-size: 13px;
    line-height: 1.55;
}

.product-usage-card > i {
    width: 66px;
    height: 66px;
    display: block;
    justify-self: end;
    background: linear-gradient(135deg, #d2a22e, #f3ce72);
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
    position: relative;
}

.product-usage-card > i:before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 4px solid #fff;
    clip-path: polygon(50% 0, 91% 20%, 91% 72%, 50% 100%, 9% 72%, 9% 20%);
}

.product-usage-card > i:after {
    content: "";
    position: absolute;
    left: 31px;
    top: 19px;
    width: 6px;
    height: 21px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 28px 0 -1px #fff;
}

.product-usage-icons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 18px;
}

.product-usage-icons span {
    color: #8b651c;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
}

.product-capability-card,
.product-audience-card {
    padding: 22px 24px;
}

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

.product-capability-grid article {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    min-height: 86px;
    padding: 14px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
}

.product-capability-grid i {
    width: 42px;
    height: 42px;
    display: block;
    color: var(--blue);
    border: 2px solid #bcd0ff;
    border-radius: 9px;
    background: #eef5ff;
    position: relative;
}

.product-capability-grid b {
    display: block;
    margin-bottom: 6px;
    color: #10213d;
    font-size: 14px;
}

.product-capability-grid p {
    color: #53627a;
    font-size: 11px;
    line-height: 1.45;
}

.pcap-ai:before {
    content: "";
    position: absolute;
    left: 9px;
    top: 10px;
    width: 21px;
    height: 21px;
    border: 3px solid currentColor;
    border-radius: 50%;
    box-shadow: 9px -8px 0 -6px currentColor, -7px 8px 0 -6px currentColor;
}

.pcap-folder:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    width: 24px;
    height: 17px;
    border: 3px solid currentColor;
    border-radius: 4px;
}

.pcap-folder:after {
    content: "";
    position: absolute;
    left: 9px;
    top: 9px;
    width: 12px;
    height: 7px;
    border-radius: 3px 3px 0 0;
    background: currentColor;
}

.pcap-check:before,
.product-trust-check:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 10px;
    width: 18px;
    height: 22px;
    border: 3px solid currentColor;
    border-radius: 4px;
}

.pcap-check:after,
.product-trust-check:after {
    content: "";
    position: absolute;
    left: 17px;
    top: 20px;
    width: 12px;
    height: 7px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
}

.pcap-book:before {
    content: "";
    position: absolute;
    left: 9px;
    top: 9px;
    width: 22px;
    height: 25px;
    border: 3px solid currentColor;
    border-radius: 4px;
}

.pcap-book:after {
    content: "";
    position: absolute;
    left: 20px;
    top: 10px;
    width: 3px;
    height: 23px;
    background: currentColor;
}

.pcap-refresh:before,
.product-trust-refresh:before {
    content: "";
    position: absolute;
    left: 9px;
    top: 9px;
    width: 20px;
    height: 20px;
    border: 3px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
}

.pcap-refresh:after,
.product-trust-refresh:after {
    content: "";
    position: absolute;
    right: 8px;
    top: 8px;
    border-left: 8px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: rotate(28deg);
}

.pcap-service:before {
    content: "";
    position: absolute;
    left: 9px;
    top: 12px;
    width: 22px;
    height: 18px;
    border: 3px solid currentColor;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
}

.pcap-service:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 27px;
    width: 7px;
    height: 11px;
    border-radius: 4px;
    background: currentColor;
    box-shadow: 21px 0 0 currentColor;
}

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

.product-audience-grid article {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;
    min-height: 150px;
    padding: 18px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
}

.product-user-blue,
.product-user-gold {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #0877ff);
    position: relative;
}

.product-user-gold {
    background: linear-gradient(135deg, #d2a22e, #f3ce72);
}

.product-user-blue:before,
.product-user-gold:before {
    content: "";
    position: absolute;
    left: 16px;
    top: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}

.product-user-blue:after,
.product-user-gold:after {
    content: "";
    position: absolute;
    left: 11px;
    bottom: 8px;
    width: 26px;
    height: 16px;
    border-radius: 16px 16px 4px 4px;
    background: #fff;
}

.product-audience-grid h3 {
    margin: 0 0 8px;
    color: #10213d;
    font-size: 16px;
}

.product-audience-grid p {
    color: #53627a;
    font-size: 12px;
    line-height: 1.55;
}

.product-audience-grid div div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.product-audience-grid span {
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
}

.product-audience-grid article:nth-child(2) span {
    color: #b98217;
}

.product-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 84px;
    margin-top: 8px;
    padding: 0;
}

.product-trust-row article {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 0 54px;
    border-left: 1px solid #e7edf5;
}

.product-trust-row article:first-child {
    border-left: 0;
}

.product-trust-row i {
    width: 42px;
    height: 42px;
    display: block;
    color: #c89725;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    position: relative;
}

.product-trust-row b {
    display: block;
    overflow: hidden;
    color: #10213d;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-trust-row span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #63728b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-trust-doc:before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    width: 18px;
    height: 24px;
    border: 3px solid currentColor;
    border-radius: 3px;
}

.product-trust-doc:after {
    content: "";
    position: absolute;
    left: 16px;
    top: 16px;
    width: 10px;
    height: 3px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor;
}

.product-trust-cap:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    width: 26px;
    height: 16px;
    border: 3px solid currentColor;
    transform: skewY(-18deg);
}

.product-trust-cap:after {
    content: "";
    position: absolute;
    left: 19px;
    top: 25px;
    width: 4px;
    height: 10px;
    background: currentColor;
}

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 0 18px;
    background:
        radial-gradient(circle at 56% 82%, rgba(22, 93, 255, .13), transparent 32%),
        linear-gradient(112deg, #fff 0%, #fff 45%, #f3f7ff 100%);
    border-bottom: 1px solid rgba(215, 225, 241, .78);
}

.home-hero:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 78px;
    height: 300px;
    background:
        radial-gradient(ellipse at center, rgba(31, 111, 255, .1), transparent 64%);
    transform: skewY(-7deg);
}

.home-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 500px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    min-height: 548px;
}

.home-hero-copy {
    padding-top: 12px;
}

.home-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 17px;
    color: #a67816;
    border: 1px solid rgba(211, 161, 49, .52);
    border-radius: 999px;
    background: rgba(255, 251, 241, .92);
    font-size: 14px;
    font-weight: 800;
}

.home-badge span {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #dca93c, #c28a19);
    font-size: 12px;
}

.home-hero h1 {
    margin: 22px 0 18px;
    color: #071735;
    font-size: 52px;
    line-height: 1.17;
    letter-spacing: 0;
    font-weight: 900;
}

.home-lead {
    max-width: 455px;
    color: #344766;
    font-size: 16px;
    line-height: 1.85;
}

.home-price {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin: 22px 0 22px;
}

.home-price strong {
    color: #d2a22e;
    font-size: 56px;
    line-height: .92;
    font-weight: 900;
}

.home-price span {
    padding-bottom: 6px;
    color: #06173b;
    font-size: 21px;
    font-weight: 900;
}

.home-actions {
    display: grid;
    grid-template-columns: 1fr .88fr;
    gap: 16px;
    max-width: 380px;
}

.home-actions .primary-btn,
.home-actions .outline-btn {
    min-height: 50px;
    font-size: 18px;
}

.home-actions span {
    margin-right: 8px;
}

.home-agent-btn {
    color: var(--blue);
    border-color: rgba(22, 93, 255, .82);
    box-shadow: none;
}

.home-proof-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 500px;
    margin-top: 34px;
}

.home-proof-row div {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 8px;
    align-items: center;
}

.home-proof-row i {
    grid-row: span 2;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    color: #c08b18;
    border: 2px solid rgba(205, 155, 42, .45);
    border-radius: 9px;
    font-style: normal;
    font-weight: 900;
}

.home-proof-row b {
    color: #132a52;
    font-size: 15px;
    white-space: nowrap;
}

.home-proof-row span {
    color: #5d6c84;
    font-size: 13px;
    white-space: nowrap;
}

.home-console-wrap {
    min-width: 0;
    perspective: 1600px;
}

.home-console {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    min-height: 420px;
    overflow: hidden;
    border: 1px solid rgba(184, 203, 234, .72);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 26px 54px rgba(15, 37, 78, .22), 12px 12px 0 rgba(22, 93, 255, .08);
    transform: rotate(-3.8deg) skewX(-2deg) translateX(10px);
    transform-origin: center;
}

.console-sidebar {
    padding: 20px 12px;
    color: #9fb2cf;
    background: linear-gradient(180deg, #071d3d, #092d5d);
}

.console-logo {
    margin-bottom: 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.console-sidebar span {
    display: block;
    margin-bottom: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 11px;
}

.console-sidebar span.active {
    color: #fff;
    background: rgba(22, 93, 255, .42);
}

.console-main {
    min-width: 0;
    padding: 16px 20px 18px;
    background: linear-gradient(180deg, #f9fbff, #f5f8fd);
}

.console-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.console-menu {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background:
        linear-gradient(#8393ad, #8393ad) 7px 8px / 10px 2px no-repeat,
        linear-gradient(#8393ad, #8393ad) 7px 14px / 10px 2px no-repeat,
        #eef3fb;
}

.console-dots {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.console-dots i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef3fb;
}

.console-user {
    color: #294261;
    font-size: 11px;
    font-weight: 800;
}

.console-title {
    margin-bottom: 12px;
    color: #0d2445;
    font-size: 15px;
    font-weight: 900;
}

.console-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.console-metrics article,
.console-chart-card,
.console-side article,
.console-table {
    border: 1px solid rgba(226, 233, 244, .92);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px rgba(31, 57, 101, .05);
}

.console-metrics article {
    position: relative;
    min-height: 66px;
    padding: 13px 13px 10px;
}

.console-metrics span {
    display: block;
    color: #7b8aa1;
    font-size: 10px;
}

.console-metrics b {
    display: block;
    margin-top: 7px;
    color: #0c1b34;
    font-size: 17px;
}

.console-metrics em {
    position: absolute;
    right: 10px;
    bottom: 14px;
    color: #16a34a;
    font-size: 10px;
    font-style: normal;
}

.console-metrics em.down {
    color: #ef4444;
}

.console-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 178px;
    gap: 12px;
}

.console-chart-card {
    padding: 13px 14px;
}

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

.console-card-head b {
    color: #10213d;
    font-size: 12px;
}

.console-card-head span {
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
}

.console-chart {
    height: 166px;
    margin-top: 8px;
    border-radius: 8px;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 34px, rgba(153, 172, 205, .18) 35px),
        linear-gradient(180deg, #fff, #fbfdff);
}

.console-chart svg {
    width: 100%;
    height: 100%;
}

.console-side {
    display: grid;
    gap: 12px;
}

.console-side article {
    min-height: 126px;
    padding: 14px;
}

.console-side b {
    color: #10213d;
    font-size: 12px;
}

.console-side dl {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 7px 8px;
    margin: 12px 0 0;
    font-size: 10px;
}

.console-side dt {
    color: #7b8aa1;
}

.console-side dd {
    margin: 0;
    color: #233958;
    text-align: right;
    font-weight: 800;
}

.console-side .ok,
.console-row .ok {
    color: #16a34a;
}

.console-donut {
    width: 62px;
    height: 62px;
    margin: 12px auto 8px;
    border-radius: 50%;
    background: conic-gradient(#1662ff 0 78%, #16a34a 78% 93%, #ef4444 93% 100%);
    position: relative;
}

.console-donut:after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: #fff;
}

.console-side p {
    display: flex;
    justify-content: center;
    gap: 6px;
    color: #52627a;
    font-size: 9px;
    line-height: 1.3;
}

.console-table {
    margin-top: 12px;
    padding: 12px 14px;
}

.console-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr .8fr 1fr .6fr;
    gap: 8px;
    align-items: center;
    min-height: 26px;
    color: #53637a;
    border-top: 1px solid #edf1f7;
    font-size: 10px;
}

.console-row.head {
    margin-top: 8px;
    color: #7b8aa1;
    border-top: 0;
}

.console-row i {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--blue);
}

.home-overview {
    padding: 18px 0 26px;
    background: #fff;
}

.home-card-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.02fr 1fr 1.08fr;
    gap: 18px;
}

.home-card {
    min-height: 224px;
    padding: 20px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    box-shadow: 0 14px 34px rgba(26, 54, 101, .07);
}

.home-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 15px;
}

.home-card h2 {
    margin: 0 0 6px;
    color: #071735;
    font-size: 22px;
    line-height: 1.2;
}

.home-card p {
    color: #66758e;
    font-size: 12px;
    line-height: 1.55;
}

.home-card-head > span,
.home-card-head > a {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 6px 11px;
    color: var(--blue);
    border: 1px solid #d8e5ff;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.home-tutorial-card {
    background:
        linear-gradient(135deg, rgba(235, 243, 255, .88), rgba(255, 255, 255, .98)),
        #fff;
}

.home-lessons {
    display: grid;
    gap: 9px;
    margin-bottom: 12px;
}

.home-lessons a {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 38px;
    padding: 5px 9px 5px 5px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(25, 54, 98, .05);
}

.home-lessons i {
    display: grid;
    place-items: center;
    height: 30px;
    color: #fff;
    border-radius: 5px;
    background: linear-gradient(135deg, #071d3d, #315b91);
    font-size: 12px;
    font-style: normal;
}

.home-lessons b {
    min-width: 0;
    overflow: hidden;
    color: #142744;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-lessons small {
    color: #65758d;
    font-size: 12px;
}

.home-agent-card {
    background:
        radial-gradient(circle at 85% 18%, rgba(217, 165, 49, .18), transparent 28%),
        linear-gradient(135deg, #fffdf9, #fff);
}

.home-agent-form {
    display: grid;
    grid-template-columns: 1fr 82px;
    gap: 0;
    overflow: hidden;
    margin-top: 24px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
}

.home-agent-form input {
    border: 0;
    box-shadow: none;
}

.home-agent-form button {
    border: 0;
    color: #fff;
    background: var(--blue);
    font-weight: 900;
    font-family: inherit;
}

.home-agent-icons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
}

.home-agent-icons span {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #5d6b82;
    font-size: 12px;
    text-align: center;
}

.home-agent-icons i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #c38d18;
    border: 1px solid rgba(210, 162, 46, .26);
    border-radius: 50%;
    background: #fffaf0;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.home-search-icon {
    position: relative;
    width: 17px;
    height: 17px;
    margin-right: 7px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.home-search-icon:after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: center;
}

.home-agent-icons .home-agent-icon {
    position: relative;
    width: 36px;
    height: 36px;
    display: block;
    color: #c38d18;
    border: 1px solid rgba(210, 162, 46, .35);
    border-radius: 50%;
    background: linear-gradient(180deg, #fffdf7, #fff6df);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .68), 0 8px 18px rgba(196, 142, 24, .08);
    font-size: 0;
}

.home-agent-icons .home-agent-icon:before,
.home-agent-icons .home-agent-icon:after {
    content: "";
    position: absolute;
}

.home-agent-icon.official:before {
    left: 10px;
    top: 7px;
    width: 16px;
    height: 19px;
    border: 2px solid currentColor;
    border-radius: 8px 8px 10px 10px;
    clip-path: polygon(50% 0, 94% 18%, 88% 68%, 50% 100%, 12% 68%, 6% 18%);
}

.home-agent-icon.official:after {
    left: 14px;
    top: 15px;
    width: 8px;
    height: 5px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.home-agent-icon.reliable:before {
    left: 11px;
    top: 8px;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.home-agent-icon.reliable:after {
    left: 8px;
    top: 22px;
    width: 20px;
    height: 9px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 16px 16px;
}

.home-agent-icon.clear:before {
    left: 9px;
    top: 8px;
    width: 18px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.home-agent-icon.clear:after {
    left: 13px;
    top: 14px;
    width: 10px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}

.home-agent-icon.secure:before {
    left: 10px;
    top: 7px;
    width: 16px;
    height: 20px;
    background: currentColor;
    clip-path: polygon(50% 0, 92% 18%, 86% 70%, 50% 100%, 14% 70%, 8% 18%);
}

.home-agent-icon.secure:after {
    left: 15px;
    top: 15px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.home-timeline {
    display: grid;
    gap: 0;
    padding-left: 14px;
    border-left: 2px solid #dfe8f7;
}

.home-timeline a {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 0 0 13px 14px;
}

.home-timeline i {
    position: absolute;
    left: -21px;
    top: 4px;
    width: 10px;
    height: 10px;
    border: 2px solid #d9e6fb;
    border-radius: 50%;
    background: var(--blue);
}

.home-timeline b {
    color: #142744;
    font-size: 14px;
}

.home-timeline time {
    color: #65758d;
    font-size: 12px;
}

.home-timeline em {
    color: var(--blue);
    border-radius: 999px;
    background: #edf4ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    padding: 2px 7px;
}

.home-timeline span {
    grid-column: 1 / -1;
    color: #66758e;
    font-size: 12px;
    line-height: 1.55;
}

.home-news-list {
    display: grid;
    gap: 12px;
}

.home-news-list a {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    align-items: center;
}

.home-news-thumb {
    height: 48px;
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(10, 28, 58, .92), rgba(22, 93, 255, .75)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.2) 0 4px, transparent 4px 12px);
}

.home-news-list a:nth-child(2) .home-news-thumb {
    background:
        linear-gradient(135deg, rgba(10, 28, 58, .88), rgba(194, 138, 25, .72)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 4px, transparent 4px 12px);
}

.home-news-list a:nth-child(3) .home-news-thumb {
    background:
        linear-gradient(135deg, rgba(10, 28, 58, .9), rgba(17, 185, 129, .68)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 4px, transparent 4px 12px);
}

.home-news-list b {
    display: block;
    overflow: hidden;
    color: #142744;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-news-list p {
    display: -webkit-box;
    overflow: hidden;
    margin: 3px 0;
    color: #66758e;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.home-news-list time {
    color: #7b8aa1;
    font-size: 12px;
}

.home-benefits {
    padding: 0 0 26px;
    background: #fff;
}

.home-benefits-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 18px 20px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(26, 54, 101, .06);
}

.home-benefits-strip article {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 0 14px;
    border-left: 1px solid #e7edf5;
}

.home-benefits-strip article:first-child {
    border-left: 0;
}

/* Textless decorative visuals and icons: keep real page copy, remove words from mockups/background art. */
.textless-lock-icon,
.btn-lock-icon,
.textless-shield-icon,
.textless-info-icon,
.textless-alert-icon,
.home-buy-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 0;
    color: inherit;
    vertical-align: -2px;
}

.textless-lock-icon,
.btn-lock-icon {
    width: 18px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.textless-lock-icon:before,
.btn-lock-icon:before {
    content: "";
    position: absolute;
    left: 3px;
    top: -10px;
    width: 8px;
    height: 9px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.textless-lock-icon:after,
.btn-lock-icon:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 5px;
    width: 3px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
}

.textless-shield-icon {
    width: 19px;
    height: 22px;
    border-radius: 10px 10px 12px 12px;
    background: currentColor;
    clip-path: polygon(50% 0, 92% 18%, 86% 70%, 50% 100%, 14% 70%, 8% 18%);
}

.textless-shield-icon:after {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.textless-info-icon,
.textless-alert-icon {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.textless-info-icon:after,
.textless-alert-icon:after {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 3px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 9px 0 -1px currentColor;
}

.home-buy-icon {
    width: 19px;
    height: 18px;
    margin-right: 7px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.home-buy-icon:before {
    content: "";
    position: absolute;
    left: 2px;
    top: -5px;
    width: 13px;
    height: 8px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.home-buy-icon:after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: -6px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 8px 0 0 currentColor;
}

.buy-flow-tip .textless-alert-icon,
.agent-contact-card .textless-alert-icon,
.exact-reminder-note .textless-alert-icon,
.software-warning-note .textless-alert-icon {
    color: #c98b16;
}

.agent-query-note .textless-info-icon {
    color: var(--blue);
}

.home-console .console-logo,
.home-console .console-sidebar span,
.home-console .console-user,
.home-console .console-title,
.home-console .console-card-head b,
.home-console .console-card-head span,
.home-console .console-metrics span,
.home-console .console-metrics b,
.home-console .console-metrics em,
.home-console .console-platforms p b,
.home-console .console-platforms p em,
.home-console .console-bottom-panels b,
.home-console .console-bottom-panels dt,
.home-console .console-bottom-panels dd,
.home-console .console-tutorial-unlock b,
.home-console .console-tutorial-unlock strong,
.home-console .console-tutorial-unlock span,
.product-overview-panel aside b,
.product-overview-panel aside span,
.product-panel-top b,
.product-panel-metrics span,
.product-panel-metrics strong,
.product-panel-metrics em,
.product-panel-metrics small,
.product-platform-card b,
.product-platform-card span,
.product-platform-card em,
.product-chart-card b,
.product-quick-card b,
.product-quick-card span,
.product-status-card b,
.product-status-card dt,
.product-status-card dd,
.about-dashboard aside b,
.about-dashboard aside span,
.about-dashboard-top b,
.about-metrics span,
.about-metrics strong,
.about-metrics em,
.about-side-status b,
.about-side-status span,
.login-dashboard-nav b,
.login-dashboard-nav span,
.login-topbar strong,
.login-topbar b,
.login-stat-grid span,
.login-stat-grid b,
.login-stat-grid em,
.login-chart-head strong,
.login-chart-head span,
.login-chart-axis span,
.login-order-card strong,
.login-order-card a,
.login-order-card th,
.login-order-card td,
.login-side-stack b,
.login-side-stack a,
.login-video-mini span,
.login-download-mini span,
.login-platform-head b,
.login-platform-head a,
.login-platform-list li,
.login-platform-list em,
.register-preview-top b,
.register-preview-top span,
.register-preview-grid span,
.register-preview-grid b,
.register-progress span {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-shadow: none !important;
}

.home-console .console-logo:before,
.product-overview-panel aside b:before,
.about-dashboard aside b:before,
.login-dashboard-nav b:after,
.register-preview-top b:before {
    content: "";
    display: block;
    width: 64px;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .74);
}

.home-console .console-sidebar span,
.product-overview-panel aside span,
.about-dashboard aside span,
.login-dashboard-nav span {
    position: relative;
    min-height: 28px;
}

.home-console .console-sidebar span:before,
.product-overview-panel aside span:before,
.about-dashboard aside span:before,
.login-dashboard-nav span:after {
    content: "";
    display: block;
    width: 58%;
    height: 7px;
    margin-top: 2px;
    border-radius: 999px;
    background: rgba(197, 214, 241, .42);
}

.home-console .console-sidebar span.active:before,
.product-overview-panel aside span.active:before,
.about-dashboard aside span.active:before,
.login-dashboard-nav span.active:after {
    background: rgba(255, 255, 255, .78);
}

.home-console .console-user:before,
.home-console .console-title:before,
.home-console .console-card-head b:before,
.home-console .console-card-head span:before,
.home-console .console-metrics span:before,
.home-console .console-metrics b:before,
.home-console .console-metrics em:before,
.home-console .console-platforms p b:before,
.home-console .console-platforms p em:before,
.home-console .console-bottom-panels b:before,
.home-console .console-bottom-panels dt:before,
.home-console .console-bottom-panels dd:before,
.home-console .console-tutorial-unlock b:before,
.home-console .console-tutorial-unlock strong:before,
.home-console .console-tutorial-unlock span:before,
.product-panel-top b:before,
.product-panel-metrics span:before,
.product-panel-metrics strong:before,
.product-panel-metrics em:before,
.product-panel-metrics small:before,
.product-platform-card b:before,
.product-platform-card span:before,
.product-platform-card em:before,
.product-chart-card b:before,
.product-quick-card b:before,
.product-quick-card span:before,
.product-status-card b:before,
.product-status-card dt:before,
.product-status-card dd:before,
.about-dashboard-top b:before,
.about-metrics span:before,
.about-metrics strong:before,
.about-metrics em:before,
.about-side-status b:before,
.about-side-status span:before,
.login-topbar strong:before,
.login-topbar b:before,
.login-stat-grid span:before,
.login-stat-grid b:before,
.login-stat-grid em:before,
.login-chart-head strong:before,
.login-chart-head span:before,
.login-chart-axis span:before,
.login-order-card strong:before,
.login-order-card a:before,
.login-order-card th:before,
.login-order-card td:before,
.login-side-stack b:before,
.login-side-stack a:before,
.login-video-mini span:before,
.login-download-mini span:before,
.login-platform-head b:before,
.login-platform-head a:before,
.login-platform-list li:after,
.login-platform-list em:before,
.register-preview-top span:before,
.register-preview-grid span:before,
.register-preview-grid b:before,
.register-progress span:before {
    content: "";
    display: block;
    height: 7px;
    min-width: 22px;
    border-radius: 999px;
    background: #9fb0cc;
    opacity: .55;
}

.home-console .console-user:before,
.home-console .console-card-head span:before,
.home-console .console-metrics em:before,
.home-console .console-platforms p em:before,
.product-panel-metrics em:before,
.product-panel-metrics small:before,
.product-platform-card em:before,
.about-metrics em:before,
.login-stat-grid em:before,
.login-chart-head span:before,
.login-order-card a:before,
.login-side-stack a:before,
.login-platform-head a:before,
.login-platform-list em:before,
.register-preview-top span:before {
    background: #35c777;
    opacity: .74;
}

.home-console .console-title:before,
.home-console .console-card-head b:before,
.home-console .console-bottom-panels b:before,
.product-panel-top b:before,
.product-platform-card b:before,
.product-chart-card b:before,
.product-quick-card b:before,
.product-status-card b:before,
.about-dashboard-top b:before,
.about-side-status b:before,
.login-topbar strong:before,
.login-order-card strong:before,
.login-side-stack b:before {
    width: 74px;
    background: #dbe7ff;
    opacity: .85;
}

.home-console .console-metrics b:before,
.product-panel-metrics strong:before,
.about-metrics strong:before,
.login-stat-grid b:before,
.register-preview-grid b:before {
    width: 52px;
    height: 13px;
    background: #fff;
    opacity: .9;
}

.home-console .console-metrics span:before,
.product-panel-metrics span:before,
.about-metrics span:before,
.login-stat-grid span:before,
.register-preview-grid span:before {
    width: 44px;
    background: #90a5c5;
}

.home-console .console-bottom-panels dt:before,
.product-status-card dt:before,
.login-order-card th:before,
.login-order-card td:before {
    width: 42px;
    background: #9fb0cc;
}

.home-console .console-bottom-panels dd:before,
.product-status-card dd:before {
    width: 36px;
    margin-left: auto;
    background: #38d083;
}

.home-console .console-platforms p,
.product-platform-card span,
.product-quick-card span,
.login-platform-list li {
    align-items: center;
}

.home-console .console-platforms p b:before,
.product-platform-card span:before,
.product-quick-card span:before,
.login-platform-list li:after {
    width: 48px;
    background: #9fb0cc;
}

.home-console .console-platforms p em:before,
.product-platform-card em:before,
.login-platform-list em:before {
    width: 24px;
}

.login-order-card table {
    table-layout: fixed;
}

.login-order-card th:before,
.login-order-card td:before {
    margin: 0 auto;
}

.register-preview-top span:before {
    width: 46px;
}

.register-progress span:before {
    width: 54px;
    background: #dbe7f8;
}

.home-tutorial-card .primary-btn.block {
    gap: 7px;
}

.home-tutorial-card .btn-lock-icon {
    width: 13px;
    height: 11px;
    border-width: 1.6px;
    border-radius: 3px;
    vertical-align: -1px;
}

.home-tutorial-card .btn-lock-icon:before {
    left: 2px;
    top: -7px;
    width: 6px;
    height: 7px;
    border-width: 1.6px;
    border-bottom: 0;
}

.home-tutorial-card .btn-lock-icon:after {
    left: 5px;
    top: 4px;
    width: 2px;
    height: 4px;
}

/* Homepage icon polish: replace rough character-like marks with crisp vector-style symbols. */
.home-lessons .textless-lock-icon {
    width: 42px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background:
        url("data:image/svg+xml,%3Csvg width='28' height='22' viewBox='0 0 28 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4.5' y='5.2' width='13.4' height='10.4' rx='2.6' fill='%23ffffff' fill-opacity='.94'/%3E%3Cpath d='M8.3 5.2V4.1a4.2 4.2 0 0 1 8.4 0v1.1' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M15.4 10.4c.7.4.7 1.4 0 1.8l-3.5 2.1c-.7.4-1.6-.1-1.6-.9V9.2c0-.8.9-1.3 1.6-.9l3.5 2.1Z' fill='%231260f6'/%3E%3Cpath d='M21.5 6.2h2.6M21.5 11h4M21.5 15.8h2.9' stroke='%23a9c7ff' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px 22px no-repeat,
        radial-gradient(circle at 78% 22%, rgba(87, 158, 255, .5), transparent 34%),
        linear-gradient(145deg, #1260f6 0%, #0d3a86 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 8px 18px rgba(18, 96, 246, .18);
}

.home-lessons .textless-lock-icon:before,
.home-lessons .textless-lock-icon:after {
    content: none;
}

.home-tutorial-card .btn-lock-icon {
    width: 15px;
    height: 15px;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7.4' width='10' height='7.6' rx='2' stroke='%23ffffff' stroke-width='1.8'/%3E%3Cpath d='M6.2 7.4V5.8a2.8 2.8 0 0 1 5.6 0v1.6' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M9 10.3v1.8' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

.home-tutorial-card .btn-lock-icon:before,
.home-tutorial-card .btn-lock-icon:after {
    content: none;
}

.home-agent-icons .home-agent-icon {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(213, 166, 55, .36);
    border-radius: 50%;
    background-color: #fffaf0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 23px 23px;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .7), 0 10px 20px rgba(196, 142, 24, .1);
}

.home-agent-icons .home-agent-icon:before,
.home-agent-icons .home-agent-icon:after {
    content: none;
}

.home-agent-icon.official {
    background-image:
        url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 2.7 18.8 5v5.2c0 4.5-2.4 7.9-6.3 10.1-3.9-2.2-6.3-5.6-6.3-10.1V5l6.3-2.3Z' stroke='%23bf8814' stroke-width='2.1' stroke-linejoin='round'/%3E%3Cpath d='m8.8 12.4 2.4 2.4 5.1-5.4' stroke='%23bf8814' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #fffdf7, #fff6df);
}

.home-agent-icon.reliable {
    background-image:
        url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12.5' cy='8.4' r='4.1' stroke='%23bf8814' stroke-width='2.1'/%3E%3Cpath d='M5.4 20.4c1.1-4 3.5-6.1 7.1-6.1s6 2.1 7.1 6.1' stroke='%23bf8814' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='m16.8 4.8 2.8 2.8 3.1-3.5' stroke='%23bf8814' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #fffdf7, #fff6df);
}

.home-agent-icon.clear {
    background-image:
        url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4.2' width='13' height='16.6' rx='2.7' stroke='%23bf8814' stroke-width='2.1'/%3E%3Cpath d='M9.3 9h6.4M9.3 12.6h6.4M9.3 16.2h4.2' stroke='%23bf8814' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8.7 4.4V2.8M16.3 4.4V2.8' stroke='%23bf8814' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #fffdf7, #fff6df);
}

.home-agent-icon.secure {
    background-image:
        url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 2.9 19.2 5.4v5.1c0 4.7-2.5 8.4-6.7 10.6-4.2-2.2-6.7-5.9-6.7-10.6V5.4l6.7-2.5Z' stroke='%23bf8814' stroke-width='2.1' stroke-linejoin='round'/%3E%3Cpath d='M9.4 12.2h6.2M12.5 9.1v6.2' stroke='%23bf8814' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #fffdf7, #fff6df);
}

/* Purchase icon polish: clean line icon for every prominent buy action. */
.home-buy-icon,
.site-header .nav-cart-icon,
.buy-exact-page .buy-exact-form button i {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    background-repeat: no-repeat;
    background-position: center;
}

.home-buy-icon:before,
.home-buy-icon:after,
.buy-exact-page .buy-exact-form button i:before,
.buy-exact-page .buy-exact-form button i:after {
    content: none;
}

.home-buy-icon {
    width: 22px;
    height: 22px;
    margin-right: 7px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.2 5.1h2.1l1.6 9.2c.2 1 1 1.7 2 1.7h6.6c1 0 1.8-.6 2-1.6l1.1-6.1H7.1' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.4 10.1v-5M12.4 5.1 10 7.5M12.4 5.1l2.4 2.4' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10.1' cy='19.4' r='1.3' fill='%23ffffff'/%3E%3Ccircle cx='17.2' cy='19.4' r='1.3' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 22px 22px;
}

.site-header .nav-cart-icon {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.9 3.8h1.9L6 11.2c.2.8.9 1.4 1.7 1.4h5.5c.8 0 1.5-.5 1.7-1.3l.8-4.5H5.4' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.9 7.9v-4M9.9 3.9 8 5.8M9.9 3.9l1.9 1.9' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7.8' cy='15.6' r='1.1' fill='%23ffffff'/%3E%3Ccircle cx='13.6' cy='15.6' r='1.1' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 18px 18px;
}

.buy-exact-page .buy-exact-form button i {
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.2 5.1h2.1l1.6 9.2c.2 1 1 1.7 2 1.7h6.6c1 0 1.8-.6 2-1.6l1.1-6.1H7.1' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.4 10.1v-5M12.4 5.1 10 7.5M12.4 5.1l2.4 2.4' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10.1' cy='19.4' r='1.3' fill='%23ffffff'/%3E%3Ccircle cx='17.2' cy='19.4' r='1.3' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 22px 22px;
}

/* Final official desktop header based on the approved mockup. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 76px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #dbe6f5;
    box-shadow: 0 10px 28px rgba(22, 45, 86, .045);
    backdrop-filter: blur(18px);
}

.site-header .container.nav-wrap {
    width: calc(100% - 112px);
    max-width: 1398px;
    height: 76px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 292px;
    gap: 24px;
    align-items: center;
}

.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #1260f6;
}

.site-header .brand-mark {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='7' y1='4' x2='35' y2='38' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230A7CFF'/%3E%3Cstop offset='.54' stop-color='%23165DFF'/%3E%3Cstop offset='1' stop-color='%230A42D8'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='7' y1='19' x2='20' y2='39' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233D94FF'/%3E%3Cstop offset='1' stop-color='%23115AF5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='21,3 33,10 33,24 21,31 9,24 9,10' fill='url(%23a)'/%3E%3Cpolygon points='8,24 21,31 21,39 8,32 2,28 2,20' fill='url(%23b)'/%3E%3Cpolygon points='22,31 35,24 41,28 41,35 28,42 22,39' fill='%230B75FF'/%3E%3Cpath d='M21 3 33 10 21 17 9 10 21 3Z' fill='%2356A6FF' opacity='.95'/%3E%3Cpath d='M9 10 21 17v14L9 24V10Z' fill='%231965FF' opacity='.92'/%3E%3Cpath d='M33 10 21 17v14l12-7V10Z' fill='%230C50DE' opacity='.92'/%3E%3C/svg%3E") center / 42px 42px no-repeat;
}

.site-header .brand-text {
    overflow: hidden;
    color: #1260f6;
    font-size: 29px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header .main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 29px;
    min-width: 0;
    color: #071a3a;
    font-size: 15px;
    font-weight: 760;
    white-space: nowrap;
}

.site-header .main-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 0 1px;
    color: #071a3a;
    transition: color .18s ease;
}

.site-header .main-nav a:hover,
.site-header .main-nav a.active {
    color: #1260f6;
}

.site-header .main-nav a.active {
    font-weight: 900;
}

.site-header .main-nav a.active:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 24px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, #1260f6, #3d8bff);
    box-shadow: 0 7px 14px rgba(18, 96, 246, .28);
    transform: translateX(-50%);
}

.site-header .nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

.site-header .nav-actions .ghost-btn,
.site-header .nav-actions .primary-btn.small {
    height: 40px;
    min-height: 40px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
}

.site-header .nav-login-btn,
.site-header .nav-register-btn,
.site-header .nav-account-btn,
.site-header .nav-logout-btn {
    min-width: 72px;
    padding: 0 18px;
    color: #1260f6;
    border: 1px solid #9ec0ff;
    background: #fff;
    box-shadow: 0 8px 20px rgba(18, 96, 246, .045);
}

.site-header .nav-register-btn {
    min-width: 68px;
    color: #071a3a;
    border-color: transparent;
    box-shadow: none;
}

.site-header .nav-login-btn:hover,
.site-header .nav-register-btn:hover,
.site-header .nav-account-btn:hover,
.site-header .nav-logout-btn:hover {
    color: #1260f6;
    border-color: #1260f6;
    background: #f7fbff;
}

.site-header .nav-buy-btn {
    min-width: 122px;
    padding: 0 20px;
    gap: 8px;
    color: #fff;
    background: linear-gradient(135deg, #1260f6 0%, #0877ff 100%);
    box-shadow: 0 14px 28px rgba(18, 96, 246, .26);
}

.site-header .nav-buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(18, 96, 246, .32);
}

.site-header .nav-cart-icon,
.site-header .nav-user-icon,
.site-header .nav-logout-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.site-header .nav-cart-icon {
    width: 17px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.4 3.1h1.7l1.2 7.1c.2.8.8 1.4 1.6 1.4h5.6c.8 0 1.4-.5 1.6-1.3l.9-4.6H4.8' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6.9' cy='14.1' r='1.1' fill='%23fff'/%3E%3Ccircle cx='12.3' cy='14.1' r='1.1' fill='%23fff'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}

.site-header .nav-user-icon {
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='5.3' r='2.5' fill='%231260f6'/%3E%3Cpath d='M3.2 13.2c.7-2.2 2.4-3.4 4.8-3.4s4.1 1.2 4.8 3.4' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.site-header .nav-logout-icon {
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.8 3H4.4c-.8 0-1.4.6-1.4 1.4v7.2c0 .8.6 1.4 1.4 1.4h2.4' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M8.2 8h5M11.4 5.7 13.8 8l-2.4 2.3' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.site-header .danger-link {
    color: #1260f6;
}

@media (max-width: 1320px) {
    .site-header .container.nav-wrap {
        width: calc(100% - 48px);
        grid-template-columns: 194px minmax(0, 1fr) 280px;
        gap: 18px;
    }

    .site-header .main-nav {
        gap: 20px;
        font-size: 14px;
    }

    .site-header .brand-text {
        font-size: 26px;
    }
}

/* Account information page in customer center. */
.ec-account {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    color: #071a3a;
}

.active .ec-account {
    color: #1260f6;
}

.ec-account:before,
.ec-account:after {
    content: "";
    position: absolute;
}

.ec-account:before {
    left: 8px;
    top: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
}

.ec-account:after {
    left: 4px;
    bottom: 3px;
    width: 17px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 10px 10px 4px 4px;
}

.exact-page-account .exact-hero-card {
    background:
        linear-gradient(112deg, #eef5ff 0%, #eaf3ff 52%, #dcecff 100%);
}

.exact-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 19px;
}

.account-profile-panel,
.account-service-panel {
    min-height: 376px;
}

.account-profile-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 88px;
    align-items: center;
    gap: 20px;
    min-height: 124px;
    padding: 18px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #fbfdff, #f7fbff),
        #fff;
}

.account-large-avatar {
    width: 84px;
    height: 84px;
}

.account-profile-card span,
.account-service-card > span {
    color: #1260f6;
    font-size: 13px;
    font-weight: 900;
}

.account-profile-card h3 {
    margin: 8px 0 6px;
    color: #071a3a;
    font-size: 22px;
    line-height: 1.2;
    word-break: break-all;
}

.account-profile-card p {
    color: #667891;
    font-size: 13px;
    line-height: 1.55;
}

.account-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.account-state.open {
    color: #20a346;
    background: #eafaf1;
}

.account-state.closed {
    color: #b7791f;
    background: #fff8e8;
}

.account-info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.account-info-list article {
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.account-info-list span {
    display: block;
    color: #73839a;
    font-size: 13px;
}

.account-info-list b {
    display: block;
    margin-top: 10px;
    color: #071a3a;
    font-size: 16px;
    line-height: 1.25;
    word-break: break-all;
}

.account-info-list b.green {
    color: #20a346;
}

.account-info-list b.orange {
    color: #b7791f;
}

.account-service-card {
    min-height: 306px;
    padding: 18px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 250, 239, .72), rgba(255, 255, 255, .96) 60%),
        #fff;
}

.account-service-card h3 {
    margin: 10px 0 6px;
    color: #071a3a;
    font-size: 24px;
    line-height: 1.2;
}

.account-service-card p {
    color: #667891;
    font-size: 13px;
    line-height: 1.6;
}

.account-service-card dl {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
}

.account-service-card dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #e2eaf6;
    border-radius: 7px;
    background: #fff;
}

.account-service-card dt {
    color: #73839a;
    font-size: 13px;
}

.account-service-card dd {
    margin: 0;
    color: #071a3a;
    font-size: 13px;
    font-weight: 900;
    word-break: break-all;
    text-align: right;
}

.account-service-card a {
    display: grid;
    place-items: center;
    height: 38px;
    margin-top: 16px;
    color: #fff;
    border-radius: 6px;
    background: linear-gradient(135deg, #1260f6, #0877ff);
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(18, 96, 246, .2);
}

.account-record-panel {
    margin-top: 17px;
    padding: 18px 22px 20px;
}

.account-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.account-entry-grid a {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 18px;
    align-items: center;
    min-height: 92px;
    padding: 15px 16px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.account-entry-grid b {
    display: block;
    color: #071a3a;
    font-size: 15px;
}

.account-entry-grid p {
    margin-top: 6px;
    color: #73839a;
    font-size: 12px;
    line-height: 1.35;
}

.account-entry-grid em {
    width: 10px;
    height: 10px;
    border-right: 1.8px solid #071a3a;
    border-bottom: 1.8px solid #071a3a;
    transform: rotate(-45deg);
    opacity: .88;
}

/* Exact customer center mockup. */
.exact-center-body {
    min-width: 1360px;
    color: #071a3a;
    background:
        radial-gradient(circle at 88% 87%, rgba(22, 93, 255, .08), transparent 260px),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 48%, #ffffff 100%);
}

.exact-center-header {
    height: 80px;
    border-bottom: 1px solid #dbe6f5;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

.exact-center-nav {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 282px;
    align-items: center;
    gap: 22px;
    width: calc(100% - 52px);
    max-width: 1484px;
    height: 80px;
    margin: 0 auto;
}

.exact-center-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #1260f6;
}

.exact-center-logo .brand-mark {
    width: 40px;
    height: 40px;
}

.exact-center-logo strong {
    color: #1260f6;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}

.exact-center-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    color: #061735;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.exact-center-menu a:hover {
    color: #1260f6;
}

.exact-center-header-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.exact-head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 132px;
    height: 40px;
    padding: 0 16px;
    color: #1260f6;
    border: 1px solid #8fb5ff;
    border-radius: 7px;
    background: #fff;
    font-size: 15px;
    font-weight: 800;
}

.exact-head-btn span {
    width: 7px;
    height: 7px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

/* User center header aligned with the public website header. */
.exact-center-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 76px;
    border-bottom: 1px solid #dbe6f5;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 28px rgba(22, 45, 86, .045);
    backdrop-filter: blur(18px);
}

.exact-center-nav {
    width: calc(100% - 112px);
    max-width: 1398px;
    height: 76px;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 292px;
    gap: 24px;
    align-items: center;
    margin: 0 auto;
}

.exact-center-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #1260f6;
}

.exact-center-logo .brand-mark {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background-size: 42px 42px;
}

.exact-center-logo .brand-text,
.exact-center-logo strong {
    overflow: hidden;
    color: #1260f6;
    font-size: 29px;
    line-height: 1;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exact-center-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 29px;
    min-width: 0;
    color: #071a3a;
    font-size: 15px;
    font-weight: 760;
    white-space: nowrap;
}

.exact-center-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    color: #071a3a;
    transition: color .18s ease;
}

.exact-center-menu a:hover {
    color: #1260f6;
}

.exact-center-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

.exact-head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 126px;
    height: 40px;
    padding: 0 16px;
    color: #1260f6;
    border: 1px solid #9ec0ff;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(18, 96, 246, .045);
    font-size: 15px;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
}

.exact-head-btn:hover {
    color: #1260f6;
    border-color: #1260f6;
    background: #f7fbff;
}

.exact-head-btn span {
    width: 7px;
    height: 7px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.exact-center-header .nav-user-icon,
.exact-center-header .nav-logout-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

.exact-center-header .nav-user-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='5.3' r='2.5' fill='%231260f6'/%3E%3Cpath d='M3.2 13.2c.7-2.2 2.4-3.4 4.8-3.4s4.1 1.2 4.8 3.4' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.exact-center-header .nav-logout-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.8 3H4.4c-.8 0-1.4.6-1.4 1.4v7.2c0 .8.6 1.4 1.4 1.4h2.4' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M8.2 8h5M11.4 5.7 13.8 8l-2.4 2.3' stroke='%231260f6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 1320px) {
    .exact-center-nav {
        width: calc(100% - 48px);
        grid-template-columns: 194px minmax(0, 1fr) 280px;
        gap: 18px;
    }

    .exact-center-menu {
        gap: 20px;
        font-size: 14px;
    }

    .exact-center-logo .brand-text,
    .exact-center-logo strong {
        font-size: 26px;
    }
}

.exact-center-page {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 25px;
    width: calc(100% - 52px);
    max-width: 1484px;
    margin: 20px auto 28px;
}

.exact-left-card,
.exact-hero-card,
.exact-stat-grid article,
.exact-panel,
.exact-quick-panel {
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 44px rgba(22, 45, 86, .055);
}

.exact-left-card {
    min-height: 880px;
    padding: 24px 12px 20px;
}

.exact-profile {
    display: grid;
    justify-items: center;
    text-align: center;
    padding-top: 2px;
}

.exact-avatar {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(180deg, #eef2f8, #e6ebf3);
    overflow: hidden;
}

.exact-avatar:before {
    content: "";
    position: absolute;
    left: 26px;
    top: 16px;
    width: 25px;
    height: 28px;
    border-radius: 12px 12px 10px 10px;
    background: #ffd7b1;
    box-shadow: inset 0 -2px 0 rgba(170, 88, 34, .12);
}

.exact-avatar:after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: -5px;
    width: 42px;
    height: 30px;
    border-radius: 24px 24px 0 0;
    background: #1260f6;
}

.exact-avatar i {
    position: absolute;
    z-index: 2;
    left: 23px;
    top: 12px;
    width: 31px;
    height: 18px;
    border-radius: 14px 14px 7px 7px;
    background: #1c2b36;
}

.exact-avatar i:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 25px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #172333;
    box-shadow: 12px 0 0 #172333;
}

.exact-avatar i:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 34px;
    width: 11px;
    height: 4px;
    border-bottom: 2px solid #b96e51;
    border-radius: 0 0 10px 10px;
}

.exact-profile h2 {
    margin: 14px 0 3px;
    color: #071a3a;
    font-size: 20px;
    line-height: 1.2;
}

.exact-profile p {
    color: #31415f;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-all;
}

.exact-side-nav {
    display: grid;
    gap: 6px;
    margin: 25px 0 0;
    padding: 0 0 0;
}

.exact-side-nav a {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding: 0 16px;
    color: #263856;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 700;
}

.exact-side-nav a.active {
    color: #1260f6;
    background: linear-gradient(90deg, #eef5ff, #eaf2ff);
}

.exact-side-nav a:hover {
    color: #1260f6;
    background: #f5f9ff;
}

.exact-side-nav .side-logout {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid #e0e7f2;
    border-radius: 0;
}

.exact-plan-card {
    margin: 26px 4px 0;
    padding: 17px 14px 14px;
    text-align: center;
    border: 1px solid #efc66b;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 252, 245, .98), rgba(255, 255, 255, .98)),
        #fff;
}

.exact-plan-card .ec-crown {
    margin: 0 auto 8px;
}

.exact-plan-card > b {
    display: block;
    color: #a06900;
    font-size: 17px;
}

.exact-plan-card div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    margin: 8px 0 10px;
}

.exact-plan-card strong {
    color: #bd7b00;
    font-size: 26px;
    line-height: 1;
}

.exact-plan-card span {
    color: #071a3a;
    font-size: 15px;
    font-weight: 900;
}

.exact-plan-card p {
    display: grid;
    grid-template-columns: 15px 1fr;
    align-items: center;
    gap: 8px;
    width: 150px;
    margin: 8px auto 0;
    color: #47566d;
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
}

.exact-plan-card p i {
    width: 12px;
    height: 7px;
    border-left: 1.8px solid #263856;
    border-bottom: 1.8px solid #263856;
    transform: rotate(-45deg);
}

.exact-plan-card a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin-top: 16px;
    color: #fff;
    border-radius: 6px;
    background: linear-gradient(180deg, #dca800, #c78d00);
    font-size: 15px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.exact-main {
    min-width: 0;
}

.exact-hero-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    align-items: center;
    min-height: 146px;
    padding: 34px 42px;
    overflow: hidden;
    background:
        linear-gradient(112deg, #eef5ff 0%, #eaf3ff 52%, #dbeaff 100%);
}

.exact-hero-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(150deg, rgba(255,255,255,.34) 0 1px, transparent 1px),
        linear-gradient(30deg, rgba(255,255,255,.26) 0 1px, transparent 1px);
    background-size: 95px 42px;
    opacity: .58;
}

.exact-hero-card > div {
    position: relative;
    z-index: 1;
}

.exact-hero-card h1 {
    margin: 0;
    color: #071a3a;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 900;
}

.exact-hero-card p {
    margin-top: 10px;
    color: #344760;
    font-size: 16px;
    line-height: 1.55;
}

.exact-hero-art {
    height: 112px;
}

.art-base {
    position: absolute;
    right: 58px;
    bottom: 18px;
    width: 210px;
    height: 50px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(22, 93, 255, .13), rgba(22, 93, 255, .04) 56%, transparent 58%),
        #d7e8ff;
    transform: skewX(-13deg);
}

.art-shadow-card {
    position: absolute;
    right: 60px;
    top: 16px;
    width: 105px;
    height: 94px;
    border-radius: 14px;
    background: rgba(255,255,255,.52);
    box-shadow: 20px 0 0 rgba(255,255,255,.46);
    transform: rotate(10deg);
}

.art-card {
    position: absolute;
    right: 92px;
    top: 17px;
    width: 105px;
    height: 94px;
    border-radius: 14px;
    background: linear-gradient(145deg, #3a8dff, #1260f6);
    box-shadow: 0 20px 32px rgba(22, 93, 255, .32);
    transform: rotate(7deg);
}

.art-card i {
    position: absolute;
    left: 39px;
    top: 31px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #dfeeff;
}

.art-card b {
    position: absolute;
    left: 30px;
    top: 60px;
    width: 45px;
    height: 22px;
    border-radius: 22px 22px 6px 6px;
    background: #dfeeff;
}

.art-card em {
    position: absolute;
    left: 24px;
    top: 20px;
    width: 58px;
    height: 5px;
    border-radius: 99px;
    background: #dfeeff;
    opacity: .9;
}

.exact-hero-art .cube {
    position: absolute;
    display: block;
    width: 36px;
    height: 36px;
    background: linear-gradient(145deg, #9bc1ff, #4d8dff);
    transform: rotate(45deg) skew(-12deg, -12deg);
    box-shadow: 0 12px 22px rgba(22, 93, 255, .18);
}

.exact-hero-art .one { right: 296px; top: 54px; }
.exact-hero-art .two { right: 210px; top: 24px; width: 32px; height: 32px; }
.exact-hero-art .three { right: 22px; top: 24px; width: 31px; height: 31px; opacity: .58; }

.exact-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 16px 0 18px;
}

.exact-stat-grid article {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr 18px;
    align-items: center;
    min-height: 134px;
    padding: 23px 18px;
}

.exact-stat-grid span {
    display: block;
    color: #31415f;
    font-size: 15px;
    line-height: 1.2;
}

.exact-stat-grid b {
    display: block;
    margin-top: 12px;
    color: #071a3a;
    font-size: 22px;
    line-height: 1.16;
}

.exact-stat-grid p {
    margin-top: 9px;
    color: #73839a;
    font-size: 13px;
    line-height: 1.3;
}

.exact-stat-grid em,
.exact-quick-grid em {
    width: 10px;
    height: 10px;
    border-right: 1.8px solid #071a3a;
    border-bottom: 1.8px solid #071a3a;
    transform: rotate(-45deg);
    opacity: .88;
}

.exact-middle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 19px;
}

.exact-panel {
    padding: 22px;
}

.exact-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.exact-panel-title h2 {
    margin: 0;
    color: #071a3a;
    font-size: 22px;
    line-height: 1.2;
}

.exact-permission-list {
    display: grid;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    overflow: hidden;
}

.exact-permission-list article {
    display: grid;
    grid-template-columns: 52px 1fr 80px 20px;
    align-items: center;
    min-height: 62px;
    padding: 10px 18px;
    background: #fff;
    border-bottom: 1px solid #e5edf8;
}

.exact-permission-list article:last-child {
    border-bottom: 0;
}

.exact-permission-list b,
.exact-service-list b,
.exact-quick-grid b {
    display: block;
    color: #071a3a;
    font-size: 15px;
    line-height: 1.2;
}

.exact-permission-list p,
.exact-service-list p,
.exact-quick-grid p {
    margin-top: 6px;
    color: #73839a;
    font-size: 12px;
    line-height: 1.35;
}

.exact-permission-list span {
    justify-self: end;
    color: #20a346;
    font-size: 14px;
    font-weight: 900;
}

.exact-permission-list span.closed {
    color: #ff2f2f;
}

.exact-permission-list em {
    justify-self: end;
    position: relative;
    width: 15px;
    height: 15px;
    border: 2px solid #6f7c90;
    border-radius: 3px;
}

.exact-permission-list em:before {
    content: "";
    position: absolute;
    left: 3px;
    top: -8px;
    width: 7px;
    height: 8px;
    border: 2px solid #6f7c90;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.exact-permission-list strong {
    justify-self: end;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #20a346;
}

.exact-permission-list strong:after {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 7px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.exact-buy-tip {
    display: grid;
    grid-template-columns: 30px 1fr 100px;
    align-items: center;
    gap: 14px;
    min-height: 50px;
    margin-top: 12px;
    padding: 9px 14px;
    border: 1px solid #e9c77e;
    border-radius: 7px;
    background: #fffaf0;
}

.exact-buy-tip i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #c08000;
    border: 2px solid #d19200;
    border-radius: 50%;
    font-size: 17px;
    font-style: normal;
    font-weight: 900;
}

.exact-buy-tip p {
    color: #9a6500;
    font-size: 13px;
    line-height: 1.35;
}

.exact-buy-tip a {
    display: grid;
    place-items: center;
    height: 34px;
    color: #fff;
    border-radius: 6px;
    background: linear-gradient(180deg, #dca800, #c78d00);
    font-size: 14px;
    font-weight: 900;
}

.exact-service-list {
    display: grid;
    gap: 10px;
}

.exact-service-list article,
.exact-service-row {
    display: grid;
    grid-template-columns: 52px 1fr 124px;
    align-items: center;
    min-height: 70px;
    padding: 12px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.exact-service-list a,
.exact-service-row a {
    display: grid;
    place-items: center;
    height: 39px;
    color: #1260f6;
    border: 1px solid #1260f6;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 800;
}

.exact-warm-tip {
    margin-top: 16px;
    min-height: 78px;
    padding: 15px 18px;
    border: 1px solid #b8cdfb;
    border-radius: 7px;
    background: linear-gradient(180deg, #f4f8ff, #fff);
}

.exact-warm-tip b {
    color: #174a9e;
    font-size: 14px;
}

.exact-warm-tip p {
    margin-top: 8px;
    color: #52647c;
    font-size: 13px;
    line-height: 1.5;
}

.exact-quick-panel {
    margin-top: 17px;
    padding: 16px 22px 20px;
}

.exact-quick-panel h2 {
    margin: 0 0 14px;
    color: #071a3a;
    font-size: 19px;
    line-height: 1.2;
}

.exact-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.exact-quick-grid a {
    display: grid;
    grid-template-columns: 54px 1fr 18px;
    align-items: center;
    min-height: 92px;
    padding: 15px 16px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.exact-software-panel,
.exact-panel:has(.exact-tutorial-grid),
.exact-panel:has(.exact-order-table),
.exact-panel:has(.exact-empty) {
    min-height: 540px;
}

.exact-tutorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 16px;
}

.exact-tutorial-grid article {
    padding: 14px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
}

.exact-tutorial-grid article > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 126px;
    padding: 15px;
    color: #fff;
    border-radius: 7px;
    background: linear-gradient(135deg, #0b2a55, #1260f6);
}

.exact-tutorial-grid span {
    font-weight: 900;
}

.exact-tutorial-grid article > div b {
    color: #fff;
    font-size: 34px;
    opacity: .55;
}

.exact-tutorial-grid h3 {
    min-height: 42px;
    margin: 12px 0 6px;
    color: #071a3a;
    font-size: 16px;
}

.exact-tutorial-grid p {
    color: #73839a;
    font-size: 13px;
}

.exact-tutorial-grid a,
.exact-tutorial-grid em,
.exact-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: 12px;
    padding: 0 16px;
    color: #1260f6;
    border: 1px solid #1260f6;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
}

.exact-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.exact-order-table th,
.exact-order-table td {
    padding: 14px 10px;
    text-align: left;
    border-bottom: 1px solid #e5edf8;
}

.exact-order-table th {
    color: #73839a;
    background: #f6f9ff;
}

.exact-order-table a {
    color: #1260f6;
    font-weight: 900;
}

.exact-empty {
    display: grid;
    place-items: center;
    min-height: 360px;
    text-align: center;
    border: 1px dashed #b9c8df;
    border-radius: 8px;
    background: #f8fbff;
}

.exact-empty b {
    color: #071a3a;
    font-size: 22px;
}

.exact-empty p {
    margin-top: 8px;
    color: #73839a;
}

.ec-user,
.ec-exit,
.ec-pie,
.ec-cloud,
.ec-video,
.ec-order,
.ec-support,
.ec-crown,
.ec-bell,
.ec-stat,
.ec-service {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    color: #1260f6;
}

.ec-user {
    width: 16px;
    height: 16px;
}

.ec-user:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.ec-user:after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 1px;
    width: 13px;
    height: 7px;
    border-radius: 8px 8px 3px 3px;
    background: currentColor;
}

.ec-exit {
    width: 18px;
    height: 18px;
}

.ec-exit:before,
.ec-exit:after {
    content: "";
    position: absolute;
}

.ec-exit:before {
    left: 1px;
    top: 3px;
    width: 9px;
    height: 12px;
    border: 1.8px solid currentColor;
    border-right: 0;
    border-radius: 2px 0 0 2px;
}

.ec-exit:after {
    left: 8px;
    top: 8px;
    width: 9px;
    height: 2px;
    background: currentColor;
    box-shadow: 4px -3px 0 -1px currentColor, 4px 3px 0 -1px currentColor;
}

.ec-exit.dark {
    color: #071a3a;
}

.ec-pie,
.ec-cloud,
.ec-video,
.ec-order,
.ec-support {
    width: 24px;
    height: 24px;
    color: #071a3a;
}

.active .ec-pie,
.active .ec-cloud,
.active .ec-video,
.active .ec-order,
.active .ec-support {
    color: #1260f6;
}

.ec-pie:before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: conic-gradient(currentColor 0 75%, transparent 75% 100%);
}

.ec-pie:after {
    content: "";
    position: absolute;
    left: 12px;
    top: 2px;
    width: 10px;
    height: 10px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.ec-cloud:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 9px;
    width: 18px;
    height: 10px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 10px 10px;
}

.ec-cloud:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.ec-video:before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.ec-video:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    border-left: 7px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.ec-order:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 14px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.ec-order:after {
    content: "";
    position: absolute;
    left: 9px;
    top: 9px;
    width: 7px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor;
}

.ec-support:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 6px;
    width: 18px;
    height: 14px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.ec-support:after {
    content: "";
    position: absolute;
    left: 3px;
    top: 16px;
    width: 4px;
    height: 6px;
    border-radius: 3px;
    background: currentColor;
    box-shadow: 14px 0 0 currentColor;
}

.ec-crown {
    width: 39px;
    height: 28px;
}

.ec-crown:before {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 2px;
    width: 31px;
    height: 14px;
    background: linear-gradient(180deg, #d8a400, #c28a00);
    clip-path: polygon(0 100%, 0 25%, 24% 54%, 50% 0, 76% 54%, 100% 25%, 100% 100%);
}

.ec-crown:after {
    content: "";
    position: absolute;
    left: 7px;
    bottom: 0;
    width: 25px;
    height: 4px;
    border-radius: 99px;
    background: #bd8500;
}

.ec-bell {
    width: 22px;
    height: 22px;
}

.ec-bell:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 8px 8px 5px 5px;
    background: #1260f6;
}

.ec-bell:after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 1px;
    width: 7px;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: #1260f6;
}

.ec-stat,
.ec-service {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eef5ff;
}

.ec-stat:before,
.ec-stat:after,
.ec-service:before,
.ec-service:after {
    content: "";
    position: absolute;
}

.ec-stat.shield:before {
    width: 22px;
    height: 25px;
    border-radius: 12px 12px 14px 14px;
    background: #1260f6;
}

.ec-stat.shield:after {
    left: 17px;
    top: 19px;
    width: 12px;
    height: 7px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

.ec-stat.calendar:before {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    background: #1260f6;
}

.ec-stat.calendar:after {
    left: 14px;
    top: 17px;
    width: 20px;
    height: 3px;
    background: #fff;
    box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
}

.ec-stat.file:before,
.ec-service.log:before,
.ec-service.list:before {
    width: 22px;
    height: 27px;
    border-radius: 4px;
    background: #1260f6;
}

.ec-stat.file:after,
.ec-service.log:after,
.ec-service.list:after {
    left: 17px;
    top: 17px;
    width: 15px;
    height: 3px;
    background: #fff;
    box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
}

.ec-stat.upload:before {
    left: 14px;
    top: 22px;
    width: 20px;
    height: 17px;
    background: #1260f6;
    border-radius: 3px;
}

.ec-stat.upload:after {
    left: 14px;
    top: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #1260f6;
}

.ec-service.download:before {
    left: 22px;
    top: 12px;
    width: 5px;
    height: 19px;
    border-radius: 3px;
    background: #1260f6;
}

.ec-service.download:after {
    left: 17px;
    top: 23px;
    width: 14px;
    height: 14px;
    border-right: 4px solid #1260f6;
    border-bottom: 4px solid #1260f6;
    transform: rotate(45deg);
}

.ec-service.play:before {
    left: 18px;
    top: 14px;
    border-left: 16px solid #1260f6;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

.ec-service.headset:before {
    left: 10px;
    top: 10px;
    width: 28px;
    height: 24px;
    border: 4px solid #1260f6;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
}

.ec-service.headset:after {
    left: 9px;
    top: 29px;
    width: 7px;
    height: 11px;
    border-radius: 4px;
    background: #1260f6;
    box-shadow: 23px 0 0 #1260f6;
}

.ec-service.big {
    width: 52px;
    height: 52px;
    background: #1260f6;
}

.ec-service.big:before {
    border-left-color: #fff;
}

/* Standalone customer center, desktop only. */
.member-body {
    min-width: 1320px;
    margin: 0;
    background:
        radial-gradient(circle at 82% 8%, rgba(22, 93, 255, .12), transparent 260px),
        radial-gradient(circle at 20% 90%, rgba(188, 138, 34, .1), transparent 280px),
        linear-gradient(180deg, #ffffff 0%, #f5f8fd 100%);
}

.member-page {
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr);
    gap: 22px;
    width: 1360px;
    min-height: 900px;
    margin: 0 auto;
    padding: 22px 0 30px;
}

.member-sidebar {
    position: sticky;
    top: 22px;
    height: 856px;
    padding: 22px;
    border: 1px solid #dbe7f7;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 252, 255, .96)),
        #fff;
    box-shadow: 0 22px 55px rgba(16, 39, 82, .08);
}

.member-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #0b1d3a;
    font-size: 22px;
    font-weight: 950;
}

.member-brand .brand-mark {
    width: 40px;
    height: 40px;
}

.member-account {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 78px;
    margin: 22px 0 18px;
    padding: 13px;
    border: 1px solid #dfe9f8;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(22, 93, 255, .08), rgba(188, 138, 34, .08)),
        #fff;
}

.member-account > span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #165dff, #20b7d8);
    box-shadow: 0 12px 24px rgba(22, 93, 255, .22);
    font-weight: 950;
}

.member-account b {
    display: block;
    color: #0b1d3a;
    font-size: 16px;
}

.member-account p {
    margin-top: 4px;
    color: #667891;
    font-size: 12px;
    line-height: 1.35;
    word-break: break-all;
}

.member-nav {
    display: grid;
    gap: 8px;
}

.member-nav a {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    color: #31415f;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 900;
}

.member-nav a.active {
    color: #165dff;
    border-color: #cfe0ff;
    background: linear-gradient(90deg, #eef5ff 0%, #fff 100%);
    box-shadow: inset 3px 0 0 #165dff;
}

.member-nav a:hover {
    color: #165dff;
    background: #f6f9ff;
}

.member-nav a.logout {
    margin-top: 10px;
    color: #b42318;
    border-color: #ffe0dd;
    background: #fff7f6;
}

.member-side-card {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    min-height: 150px;
    padding: 18px;
    border: 1px solid rgba(188, 138, 34, .32);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255, 250, 239, .96), rgba(255, 255, 255, .96)),
        #fff;
}

.member-side-card span {
    color: #9a6b15;
    font-size: 13px;
    font-weight: 950;
}

.member-side-card b {
    display: block;
    margin-top: 9px;
    color: #0b1d3a;
    font-size: 24px;
}

.member-side-card p {
    margin-top: 10px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.7;
}

.member-main {
    min-width: 0;
}

.member-topbar,
.member-hero,
.member-stats article,
.member-panel,
.member-quick-grid a {
    border: 1px solid #dbe7f7;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 22px 55px rgba(16, 39, 82, .075);
}

.member-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 112px;
    padding: 22px 26px;
}

.member-topbar span,
.member-panel-head span {
    color: #165dff;
    font-size: 14px;
    font-weight: 950;
}

.member-topbar h1 {
    margin: 7px 0 5px;
    color: #071832;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: 0;
}

.member-topbar p {
    color: #667891;
    font-size: 15px;
    line-height: 1.6;
}

.member-top-actions,
.member-hero-actions,
.member-actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.member-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 42px;
    padding: 0 16px;
    color: #165dff;
    border: 1px solid #cfe0ff;
    border-radius: 10px;
    background: #fff;
    font-weight: 900;
}

.member-link-btn.danger {
    color: #b42318;
    border-color: #ffd6d2;
}

.member-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 28px;
    min-height: 176px;
    margin-top: 16px;
    padding: 27px 30px;
    overflow: hidden;
    background:
        linear-gradient(115deg, #fff 0%, #f8fbff 58%, #fff9ed 100%),
        #fff;
}

.member-hero-copy > span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    color: #9a6b15;
    border: 1px solid rgba(188, 138, 34, .38);
    border-radius: 999px;
    background: #fff8e8;
    font-size: 13px;
    font-weight: 950;
}

.member-hero h2 {
    margin: 15px 0 9px;
    color: #061735;
    font-size: 34px;
    line-height: 1.18;
}

.member-hero p {
    max-width: 610px;
    color: #5e6f86;
    font-size: 15px;
    line-height: 1.75;
}

.member-hero-actions {
    margin-top: 20px;
}

.member-price-card {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 136px;
    border: 1px solid rgba(188, 138, 34, .32);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 248, 232, .96)),
        #fff;
}

.member-price-card em {
    color: #9a6b15;
    font-size: 13px;
    font-style: normal;
    font-weight: 950;
}

.member-price-card strong {
    margin-top: 5px;
    color: #d6a333;
    font-size: 58px;
    line-height: 1;
}

.member-price-card span {
    color: #071832;
    font-size: 17px;
    font-weight: 950;
}

.member-price-card p {
    margin-top: 7px;
    color: #8a641f;
    font-size: 12px;
}

.member-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.member-stats article {
    position: relative;
    min-height: 126px;
    padding: 18px 18px 16px;
    overflow: hidden;
}

.member-stats article:after {
    content: "";
    position: absolute;
    right: -30px;
    top: -32px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(22, 93, 255, .07);
}

.member-stats article:nth-child(even):after {
    background: rgba(188, 138, 34, .13);
}

.member-stats i {
    margin-bottom: 12px;
}

.member-stats span {
    display: block;
    color: #667891;
    font-size: 13px;
    font-weight: 900;
}

.member-stats b {
    display: block;
    margin-top: 7px;
    color: #0b1d3a;
    font-size: 22px;
    line-height: 1.15;
}

.member-stats b.good,
.member-badge.good {
    color: #12814b;
}

.member-stats b.warn,
.member-badge.warn {
    color: #b7791f;
}

.member-stats p {
    margin-top: 7px;
    color: #748299;
    font-size: 12px;
    line-height: 1.35;
}

.member-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) 360px;
    gap: 16px;
}

.member-content-grid.software-mode {
    grid-template-columns: minmax(0, 1fr) 370px;
}

.member-panel {
    padding: 23px;
}

.member-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.member-panel-head h2 {
    margin: 7px 0 0;
    color: #0b1d3a;
    font-size: 25px;
    line-height: 1.2;
}

.member-panel-head > a {
    color: #165dff;
    font-weight: 950;
}

.member-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    border-radius: 999px;
    background: #f4f8ff;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.member-permissions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.member-permissions article {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 13px;
    align-items: center;
    min-height: 88px;
    padding: 15px;
    border: 1px solid #e1ebf8;
    border-radius: 14px;
    background: #fff;
}

.member-permissions article.on {
    border-color: #cfe0ff;
    background: linear-gradient(180deg, #fbfdff, #f7fbff);
}

.member-permissions article.off {
    border-color: #ecd8a2;
    background: #fffaf0;
}

.member-permissions i {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    border: 2px solid #165dff;
    border-radius: 50%;
    background: #eef5ff;
}

.member-permissions i:after {
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    width: 14px;
    height: 8px;
    border-left: 3px solid #165dff;
    border-bottom: 3px solid #165dff;
    transform: rotate(-45deg);
}

.member-permissions article.off i {
    border-color: #d6a333;
    background: #fff4d7;
}

.member-permissions article.off i:after {
    left: 12px;
    top: 20px;
    width: 16px;
    height: 0;
    border-left: 0;
    border-bottom: 3px solid #d6a333;
    transform: none;
}

.member-permissions b {
    display: block;
    color: #10213d;
    font-size: 16px;
}

.member-permissions span {
    display: block;
    margin-top: 5px;
    color: #667891;
    font-size: 13px;
}

.member-unlock-note,
.member-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    color: #8a641f;
    border: 1px solid #edd08a;
    border-radius: 12px;
    background: #fffaf0;
}

.member-unlock-note i {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: 2px solid #d6a333;
    border-radius: 50%;
}

.member-unlock-note i:after {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    width: 4px;
    height: 11px;
    border-radius: 999px;
    background: #d6a333;
    box-shadow: 0 15px 0 -1px #d6a333;
}

.member-actions-row {
    margin-top: 18px;
}

.member-actions-row .primary-btn,
.member-actions-row .outline-btn {
    min-width: 132px;
}

.service-panel {
    background:
        linear-gradient(145deg, rgba(255, 250, 239, .88), rgba(255, 255, 255, .98) 62%),
        #fff;
}

.service-panel > p,
.member-desc {
    color: #667891;
    font-size: 15px;
    line-height: 1.8;
}

.member-step-list {
    display: grid;
    gap: 11px;
    margin-top: 18px;
}

.member-step-list a {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    padding: 12px;
    color: #10213d;
    border: 1px solid #e3eaf5;
    border-radius: 12px;
    background: #fff;
}

.member-step-list b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #165dff;
    border-radius: 50%;
    background: #eef5ff;
    font-size: 13px;
}

.member-step-list span {
    display: block;
    color: #10213d;
    font-size: 15px;
    font-weight: 950;
}

.member-step-list em {
    display: block;
    margin-top: 3px;
    color: #748299;
    font-size: 12px;
    font-style: normal;
}

.member-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.member-quick-grid a {
    position: relative;
    min-height: 132px;
    padding: 18px;
    overflow: hidden;
}

.member-quick-grid a:after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -42px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(22, 93, 255, .065);
}

.member-quick-grid a:nth-child(even):after {
    background: rgba(188, 138, 34, .13);
}

.member-quick-grid i {
    margin-bottom: 13px;
}

.member-quick-grid b,
.member-quick-grid span {
    position: relative;
    z-index: 1;
    display: block;
}

.member-quick-grid b {
    color: #10213d;
    font-size: 17px;
}

.member-quick-grid span {
    max-width: 210px;
    margin-top: 7px;
    color: #667891;
    font-size: 13px;
    line-height: 1.45;
}

.member-software-box {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 20px;
    align-items: center;
    padding: 24px;
    border: 1px solid #dfe9f8;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfdff, #f7fbff);
}

.member-software-box i {
    width: 86px;
    height: 86px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.38), transparent),
        linear-gradient(135deg, #165dff, #20b7d8);
    box-shadow: 0 18px 36px rgba(22, 93, 255, .2);
}

.member-software-box strong {
    display: block;
    color: #0b1d3a;
    font-size: 30px;
}

.member-software-box p {
    margin-top: 5px;
    color: #667891;
    font-size: 14px;
    line-height: 1.6;
}

.member-timeline {
    display: grid;
    gap: 15px;
}

.member-timeline article {
    position: relative;
    padding-left: 24px;
}

.member-timeline i {
    position: absolute;
    left: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #165dff;
    box-shadow: 0 0 0 5px #eef5ff;
}

.member-timeline time {
    color: #748299;
    font-size: 12px;
}

.member-timeline b {
    display: block;
    margin-top: 3px;
    color: #10213d;
}

.member-timeline p {
    margin-top: 3px;
    color: #667891;
    font-size: 12px;
    line-height: 1.55;
}

.member-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 18px;
}

.member-video-grid article {
    padding: 15px;
    border: 1px solid #dfe9f8;
    border-radius: 14px;
    background: #fff;
}

.member-video-grid article.locked {
    border-color: #ecd8a2;
    background: #fffaf0;
}

.member-video-cover {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 128px;
    padding: 15px;
    color: #fff;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent),
        linear-gradient(135deg, #0b2a55, #165dff);
}

.member-video-grid article.locked .member-video-cover {
    background: linear-gradient(135deg, #8a641f, #d6a333);
}

.member-video-cover span {
    font-weight: 950;
}

.member-video-cover b {
    font-size: 34px;
    opacity: .48;
}

.member-video-grid h3 {
    min-height: 42px;
    margin: 13px 0 6px;
    color: #10213d;
    font-size: 16px;
    line-height: 1.35;
}

.member-video-grid p,
.member-video-grid em {
    color: #667891;
    font-size: 13px;
}

.member-video-grid .primary-btn,
.member-video-grid .outline-btn,
.member-video-grid em {
    margin-top: 12px;
}

.member-video-grid em {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    font-style: normal;
    font-weight: 900;
}

.member-order-table {
    width: 100%;
    border-collapse: collapse;
    color: #344054;
    font-size: 13px;
}

.member-order-table th,
.member-order-table td {
    padding: 15px 10px;
    text-align: left;
    border-bottom: 1px solid #e7eef8;
}

.member-order-table th {
    color: #667891;
    background: #f8fbff;
    font-weight: 950;
}

.member-order-table a {
    color: #165dff;
    font-weight: 950;
}

.member-empty {
    display: grid;
    place-items: center;
    min-height: 330px;
    text-align: center;
    border: 1px dashed #cad8ec;
    border-radius: 14px;
    background: #f8fbff;
}

.member-empty b {
    color: #10213d;
    font-size: 23px;
}

.member-empty p {
    max-width: 460px;
    margin: 9px auto 18px;
    color: #667891;
}

.mi-dashboard,
.mi-download,
.mi-play,
.mi-order,
.mi-service,
.mi-logout,
.mi-shield,
.mi-date,
.mi-bill,
.mi-version {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    color: #165dff;
    border-radius: 10px;
    background: #eef5ff;
}

.member-nav .mi-logout {
    color: #b42318;
    background: #fff1ef;
}

.mi-dashboard:before,
.mi-download:before,
.mi-play:before,
.mi-order:before,
.mi-service:before,
.mi-logout:before,
.mi-shield:before,
.mi-date:before,
.mi-bill:before,
.mi-version:before,
.mi-dashboard:after,
.mi-download:after,
.mi-order:after,
.mi-service:after,
.mi-logout:after,
.mi-shield:after,
.mi-date:after,
.mi-bill:after,
.mi-version:after {
    content: "";
    position: absolute;
}

.mi-dashboard:before {
    inset: 8px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.mi-dashboard:after {
    left: 15px;
    top: 8px;
    width: 2px;
    height: 16px;
    background: currentColor;
    box-shadow: -7px 7px 0 -1px currentColor, 7px 7px 0 -1px currentColor;
}

.mi-download:before {
    left: 14px;
    top: 7px;
    width: 4px;
    height: 13px;
    border-radius: 2px;
    background: currentColor;
}

.mi-download:after {
    left: 10px;
    top: 14px;
    width: 10px;
    height: 10px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
}

.mi-play:before {
    left: 12px;
    top: 9px;
    border-left: 12px solid currentColor;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.mi-order:before {
    left: 9px;
    top: 7px;
    width: 14px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.mi-order:after {
    left: 13px;
    top: 13px;
    width: 8px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor;
}

.mi-service:before {
    left: 8px;
    top: 8px;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.mi-service:after {
    left: 14px;
    top: 22px;
    width: 4px;
    height: 5px;
    border-radius: 0 0 3px 3px;
    background: currentColor;
}

.mi-logout:before {
    left: 8px;
    top: 9px;
    width: 12px;
    height: 14px;
    border: 2px solid currentColor;
    border-right: 0;
    border-radius: 4px 0 0 4px;
}

.mi-logout:after {
    left: 16px;
    top: 14px;
    width: 10px;
    height: 3px;
    background: currentColor;
    box-shadow: 5px -4px 0 -1px currentColor, 5px 4px 0 -1px currentColor;
}

.mi-shield:before {
    left: 9px;
    top: 6px;
    width: 14px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 8px 8px 10px 10px;
}

.mi-shield:after {
    left: 13px;
    top: 14px;
    width: 8px;
    height: 4px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.mi-date:before {
    left: 8px;
    top: 9px;
    width: 16px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.mi-date:after {
    left: 11px;
    top: 14px;
    width: 10px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor;
}

.mi-bill:before {
    left: 8px;
    top: 8px;
    width: 16px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.mi-bill:after {
    left: 12px;
    top: 14px;
    width: 8px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor;
}

.mi-version:before {
    left: 8px;
    top: 8px;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.mi-version:after {
    left: 14px;
    top: 14px;
    width: 8px;
    height: 4px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* Exact software service page. */
.exact-page-software .exact-hero-card {
    background:
        linear-gradient(112deg, #edf5ff 0%, #e8f2ff 52%, #dcecff 100%);
}

.exact-page-software .art-card {
    width: 112px;
    height: 100px;
    border-radius: 18px;
}

.exact-page-software .art-card i {
    left: 52px;
    top: 19px;
    width: 8px;
    height: 45px;
    border-radius: 4px;
    background: #dfeeff;
}

.exact-page-software .art-card i:after {
    content: "";
    position: absolute;
    left: -9px;
    top: 25px;
    width: 22px;
    height: 22px;
    border-right: 7px solid #dfeeff;
    border-bottom: 7px solid #dfeeff;
    transform: rotate(45deg);
}

.exact-page-software .art-card b {
    left: 28px;
    top: 70px;
    width: 58px;
    height: 8px;
    border-radius: 99px;
    background: #dfeeff;
}

.exact-page-software .art-card em {
    left: 28px;
    top: 17px;
    width: 56px;
    height: 5px;
}

.exact-software-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 19px;
}

.exact-software-main {
    min-height: 428px;
}

.software-title-row {
    justify-content: space-between;
    margin-bottom: 13px;
}

.software-status,
.software-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.software-status.open,
.software-badge.open {
    color: #20a346;
    background: #eafaf1;
}

.software-status.closed,
.software-badge.closed {
    color: #ff2f2f;
    background: #fff1f1;
}

.software-package-card {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 86px;
    align-items: center;
    gap: 18px;
    min-height: 112px;
    padding: 18px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #fbfdff, #f7fbff),
        #fff;
}

.software-package-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 28% 24%, rgba(255,255,255,.65), transparent 30%),
        linear-gradient(145deg, #1b76ff, #1260f6);
    box-shadow: 0 18px 30px rgba(18, 96, 246, .2);
}

.software-package-icon .ec-service {
    color: #fff;
    background: transparent;
}

.software-package-icon .ec-service.download:before {
    background: #fff;
}

.software-package-icon .ec-service.download:after {
    border-right-color: #fff;
    border-bottom-color: #fff;
}

.software-package-copy span {
    color: #1260f6;
    font-size: 13px;
    font-weight: 900;
}

.software-package-copy h3 {
    margin: 8px 0 6px;
    color: #071a3a;
    font-size: 26px;
    line-height: 1.16;
}

.software-package-copy p {
    color: #667891;
    font-size: 14px;
    line-height: 1.5;
}

.software-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 13px;
}

.software-detail-grid article {
    min-height: 76px;
    padding: 14px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.software-detail-grid span {
    display: block;
    color: #73839a;
    font-size: 13px;
}

.software-detail-grid b {
    display: block;
    margin-top: 10px;
    color: #071a3a;
    font-size: 16px;
    line-height: 1.2;
}

.software-download-box {
    display: grid;
    grid-template-columns: 30px 1fr 104px;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    margin-top: 13px;
    padding: 12px 14px;
    border: 1px solid #e9c77e;
    border-radius: 7px;
    background: linear-gradient(180deg, #fffaf0, #fffdf8);
}

.software-download-box > i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #c08000;
    border: 2px solid #d19200;
    border-radius: 50%;
    font-size: 17px;
    font-style: normal;
    font-weight: 900;
}

.software-download-box b {
    color: #8a5a00;
    font-size: 14px;
}

.software-download-box p {
    margin-top: 5px;
    color: #9a6500;
    font-size: 12px;
    line-height: 1.35;
}

.software-primary-action {
    display: grid;
    place-items: center;
    height: 36px;
    color: #fff;
    border-radius: 6px;
    background: linear-gradient(180deg, #dca800, #c78d00);
    font-size: 14px;
    font-weight: 900;
}

.software-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.software-download-btn,
.software-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 144px;
    height: 42px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 900;
}

.software-download-btn {
    color: #fff;
    background: linear-gradient(135deg, #1260f6, #0877ff);
    box-shadow: 0 12px 26px rgba(18, 96, 246, .2);
}

.software-download-btn .ec-service {
    width: 24px;
    height: 24px;
    color: #fff;
    background: transparent;
}

.software-download-btn .ec-service.download:before {
    left: 11px;
    top: 3px;
    width: 3px;
    height: 11px;
    background: #fff;
}

.software-download-btn .ec-service.download:after {
    left: 7px;
    top: 9px;
    width: 9px;
    height: 9px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

.software-download-btn.disabled {
    color: #8a96aa;
    border: 1px solid #dbe6f5;
    background: #f4f7fb;
    box-shadow: none;
    cursor: not-allowed;
}

.software-outline-btn {
    color: #1260f6;
    border: 1px solid #1260f6;
    background: #fff;
}

.exact-download-reminder {
    min-height: 428px;
}

.download-reminder-list {
    display: grid;
    gap: 10px;
}

.download-reminder-list article {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 13px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.download-reminder-list b {
    display: block;
    color: #071a3a;
    font-size: 15px;
}

.download-reminder-list p {
    margin-top: 6px;
    color: #73839a;
    font-size: 12px;
    line-height: 1.35;
}

.exact-version-panel {
    margin-top: 17px;
    padding: 18px 22px 20px;
}

.exact-version-panel .exact-panel-title {
    justify-content: space-between;
    margin-bottom: 14px;
}

.exact-version-panel .exact-panel-title a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    height: 36px;
    color: #1260f6;
    border: 1px solid #1260f6;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 900;
}

.version-preview-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.version-preview-list article {
    position: relative;
    min-height: 88px;
    padding: 14px 14px 14px 38px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.version-preview-list i {
    position: absolute;
    left: 15px;
    top: 19px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1260f6;
    box-shadow: 0 0 0 5px #eef5ff;
}

.version-preview-list b {
    color: #071a3a;
    font-size: 15px;
}

.version-preview-list time {
    margin-left: 9px;
    color: #73839a;
    font-size: 12px;
}

.version-preview-list p {
    margin-top: 8px;
    color: #667891;
    font-size: 12px;
    line-height: 1.45;
}

.ec-lock-mini {
    position: relative;
    width: 17px;
    height: 17px;
}

.ec-lock-mini:before,
.ec-lock-mini:after,
.ec-service.file-check:before,
.ec-service.file-check:after,
.ec-service.update:before,
.ec-service.update:after {
    content: "";
    position: absolute;
}

.ec-lock-mini:before {
    left: 3px;
    top: 7px;
    width: 11px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.ec-lock-mini:after {
    left: 5px;
    top: 1px;
    width: 7px;
    height: 8px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.ec-service.file-check:before {
    left: 14px;
    top: 10px;
    width: 21px;
    height: 27px;
    border-radius: 4px;
    background: #1260f6;
}

.ec-service.file-check:after {
    left: 18px;
    top: 21px;
    width: 13px;
    height: 7px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

.ec-service.update:before {
    left: 11px;
    top: 11px;
    width: 26px;
    height: 26px;
    border: 4px solid #1260f6;
    border-left-color: transparent;
    border-radius: 50%;
}

.ec-service.update:after {
    left: 30px;
    top: 9px;
    width: 8px;
    height: 8px;
    border-right: 4px solid #1260f6;
    border-bottom: 4px solid #1260f6;
    transform: rotate(-20deg);
}

/* Final login correction: stable desktop layout that fully fits common 1440x900 screens. */
.login-page {
    min-height: 828px;
    padding: 22px 0 42px;
}

.login-page .container {
    width: min(1320px, calc(100% - 80px));
}

.login-shell {
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 32px;
}

.login-left-wrap {
    padding-top: 18px;
}

.login-dashboard {
    height: 520px;
    border-radius: 14px;
}

.login-dashboard-nav {
    padding: 16px 12px;
}

.login-dashboard-nav b {
    margin-bottom: 12px;
}

.login-dashboard-nav span {
    min-height: 29px;
    font-size: 12px;
}

.login-dashboard-main {
    grid-template-rows: 44px 62px minmax(0, 384px);
    gap: 8px;
    padding: 0 12px 12px;
}

.login-stat-grid {
    gap: 8px;
}

.login-stat-grid article {
    min-height: 60px;
    padding: 8px 12px 7px;
}

.login-stat-grid b {
    margin-top: 4px;
    font-size: 18px;
}

.login-stat-grid em {
    margin-top: 0;
    font-size: 10px;
}

.login-console-grid {
    grid-template-columns: minmax(0, 1fr) 158px;
    gap: 10px;
}

.login-main-stack {
    grid-template-rows: 210px minmax(0, 166px);
    gap: 8px;
}

.login-chart-card {
    padding: 12px;
}

.login-line-chart {
    height: 112px;
}

.login-chart-axis {
    font-size: 10px;
}

.login-side-stack {
    grid-template-rows: 86px 104px minmax(0, 176px);
    gap: 8px;
}

.login-side-stack section {
    padding: 9px;
}

.login-side-stack b {
    margin-bottom: 6px;
    font-size: 12px;
}

.login-video-mini,
.login-download-mini {
    grid-template-columns: 30px 1fr;
    gap: 7px;
    font-size: 10px;
}

.login-video-mini i,
.login-download-mini i {
    width: 30px;
    height: 30px;
}

.login-side-stack a {
    min-height: 23px;
    margin-top: 5px;
    padding: 0 9px;
    font-size: 11px;
}

.login-platform-list {
    gap: 4px;
    margin-top: 6px;
}

.login-platform-list li {
    grid-template-columns: 15px 1fr auto;
    font-size: 11px;
}

.login-platform-list i {
    width: 11px;
    height: 11px;
}

.login-order-card {
    padding: 10px 12px;
}

.login-order-card strong {
    font-size: 14px;
}

.login-order-card table {
    font-size: 11px;
}

.login-order-card th,
.login-order-card td {
    height: 25px;
}

.login-proof-strip {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
}

.login-proof-strip article {
    grid-template-columns: 38px 1fr;
    gap: 10px;
    min-height: 68px;
    padding: 0 14px;
}

.login-proof-strip i {
    width: 38px;
    height: 38px;
    border-width: 2px;
}

.login-proof-strip b {
    font-size: 16px;
}

.login-proof-strip span {
    font-size: 12px;
}

.login-proof-strip i.lock:before {
    left: 8px;
    top: -15px;
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.login-card {
    min-height: 0;
    height: auto;
    min-height: 760px;
    overflow: visible;
    padding: 28px 30px 34px;
    border-radius: 14px;
}

.login-card h1 {
    font-size: 32px;
}

.login-card p {
    font-size: 14px;
}

.login-form {
    gap: 14px;
    margin-top: 22px;
}

.login-input-box {
    height: 46px;
}

.login-input-box.email {
    grid-template-columns: 42px 1fr;
}

.login-input-box input {
    height: 44px;
}

.login-submit,
.login-register-btn {
    min-height: 48px;
}

.login-divider {
    margin: 20px 0;
}

.login-note {
    grid-template-columns: 36px 1fr;
    margin-top: 20px;
    padding: 14px;
}

.login-note p {
    font-size: 13px;
}

.login-rights {
    gap: 14px;
    margin-top: 18px;
}

.login-rights article {
    min-height: 118px;
    padding: 16px 10px 12px;
}

.login-right-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 9px;
}

.login-rights b {
    font-size: 14px;
}

.login-rights span {
    font-size: 12px;
    line-height: 1.55;
}

.login-help-line {
    margin-top: 18px;
    font-size: 14px;
}

/* Register page: desktop onboarding + email code form. */
.register-page {
    position: relative;
    overflow: hidden;
    min-height: 828px;
    padding: 34px 0 38px;
    background:
        linear-gradient(35deg, transparent 0 18%, rgba(231, 238, 250, .62) 18.2% 30%, transparent 30.2%),
        linear-gradient(145deg, transparent 0 58%, rgba(234, 242, 255, .82) 58.2% 79%, transparent 79.2%),
        radial-gradient(circle at 18% 92%, rgba(22, 93, 255, .08), transparent 24%),
        linear-gradient(180deg, #fff 0%, #f7faff 100%);
}

.register-page:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 320px;
    height: 280px;
    opacity: .28;
    background-image: radial-gradient(rgba(22, 93, 255, .18) 1.2px, transparent 1.3px);
    background-size: 12px 12px;
    mask-image: linear-gradient(45deg, #000, transparent 72%);
}

.register-page:after {
    content: "";
    position: absolute;
    right: -54px;
    top: 128px;
    width: 520px;
    height: 610px;
    border: 1px solid rgba(22, 93, 255, .12);
    border-radius: 44px;
    background: rgba(247, 250, 255, .46);
    transform: rotate(-8deg);
}

.register-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 38px;
    align-items: start;
    width: min(1320px, calc(100% - 80px));
}

.register-visual {
    min-height: 730px;
    padding: 34px;
    border: 1px solid #d7e4f7;
    border-radius: 16px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 26px 78px rgba(22, 45, 86, .1);
}

.register-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    color: #9a6a13;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid #efd9a7;
    border-radius: 999px;
    background: #fffaf0;
}

.register-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
}

.register-visual h1 {
    margin: 20px 0 12px;
    color: #061532;
    font-size: 46px;
    line-height: 1.12;
}

.register-visual > p {
    max-width: 620px;
    color: #53647e;
    font-size: 16px;
}

.register-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.register-steps article {
    position: relative;
    min-height: 120px;
    padding: 18px;
    border: 1px solid #dbe7f8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(23, 52, 96, .06);
}

.register-steps article.active {
    border-color: rgba(22, 93, 255, .34);
    background: linear-gradient(180deg, #f8fbff, #fff);
}

.register-steps span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #1d7cff);
    font-size: 13px;
    font-weight: 900;
}

.register-steps b {
    display: block;
    margin-top: 14px;
    color: #12294c;
    font-size: 18px;
}

.register-steps em {
    display: block;
    margin-top: 7px;
    color: #667891;
    font-size: 13px;
    font-style: normal;
    line-height: 1.55;
}

.register-preview {
    margin-top: 22px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid #cbdcf3;
    border-radius: 16px;
    background:
        radial-gradient(circle at 80% 12%, rgba(22, 93, 255, .16), transparent 30%),
        linear-gradient(180deg, #0d2f5f, #061b38);
    box-shadow: 0 24px 62px rgba(9, 37, 78, .22);
}

.register-preview-top,
.register-login-link,
.register-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.register-preview-top b {
    color: #fff;
    font-size: 20px;
}

.register-preview-top span {
    min-height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    color: #61e38a;
    border-radius: 999px;
    background: rgba(97, 227, 138, .12);
    font-size: 13px;
    font-weight: 900;
}

.register-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.register-preview-grid article {
    padding: 16px;
    border: 1px solid rgba(203, 220, 243, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
}

.register-preview-grid span {
    display: block;
    color: #a9bdd9;
    font-size: 13px;
}

.register-preview-grid b {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: 20px;
}

.register-progress {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.register-progress div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    align-items: center;
}

.register-progress span {
    color: #dbe7f8;
    font-size: 13px;
    font-weight: 800;
}

.register-progress i {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d6dff, #79b0ff);
}

.register-progress i.gold {
    background: linear-gradient(90deg, #d6a333, #f1c769);
}

.register-visual-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.register-visual-benefits article {
    min-height: 116px;
    padding: 18px;
    border: 1px solid #dce7f6;
    border-radius: 12px;
    background: #fff;
}

.register-visual-benefits i,
.register-notice i {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    margin-bottom: 11px;
    border-radius: 9px;
    background: #eef5ff;
}

.register-visual-benefits i:before,
.register-visual-benefits i:after,
.register-notice i:before,
.register-notice i:after,
.register-input i:before,
.register-input i:after {
    content: "";
    position: absolute;
}

.register-visual-benefits i.download:before {
    left: 15px;
    top: 7px;
    width: 4px;
    height: 14px;
    border-radius: 999px;
    background: var(--blue);
}

.register-visual-benefits i.download:after {
    left: 11px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-right: 3px solid var(--blue);
    border-bottom: 3px solid var(--blue);
    transform: rotate(45deg);
}

.register-visual-benefits i.video:before {
    inset: 8px 7px;
    border-radius: 5px;
    background: var(--blue);
}

.register-visual-benefits i.video:after {
    left: 14px;
    top: 12px;
    border-left: 8px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.register-visual-benefits i.order:before {
    inset: 7px 9px;
    border: 2px solid var(--gold);
    border-radius: 4px;
}

.register-visual-benefits i.order:after {
    left: 12px;
    top: 15px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

.register-visual-benefits b {
    display: block;
    color: #13294b;
    font-size: 16px;
}

.register-visual-benefits span {
    display: block;
    margin-top: 6px;
    color: #667891;
    font-size: 13px;
}

.register-card {
    min-height: 730px;
    padding: 30px;
    border: 1px solid #cfdcf0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 30px 90px rgba(21, 60, 112, .13);
}

.register-card-head {
    text-align: center;
}

.register-card-head > span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    color: #155eef;
    font-size: 14px;
    font-weight: 900;
    border: 1px solid #d8e6ff;
    border-radius: 999px;
    background: #f4f8ff;
}

.register-card h2 {
    margin: 16px 0 10px;
    color: #061532;
    font-size: 34px;
    line-height: 1.18;
}

.register-card p {
    color: #53647e;
    font-size: 14px;
}

.register-form {
    display: grid;
    gap: 13px;
    margin-top: 22px;
}

.register-form label {
    display: grid;
    gap: 8px;
}

.register-form label > span {
    color: #1e293b;
    font-size: 14px;
    font-weight: 900;
}

.register-input {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    height: 46px;
    border: 1px solid #d5e0ef;
    border-radius: 8px;
    background: #fff;
}

.register-input:focus-within {
    border-color: rgba(22, 93, 255, .55);
    box-shadow: 0 0 0 4px rgba(22, 93, 255, .08);
}

.register-input input {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
}

.register-input i {
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: 15px;
    color: #9aacc7;
}

.register-input.email i,
.register-input.code i {
    border: 2px solid currentColor;
    border-radius: 3px;
}

.register-input.email i:after,
.register-input.code i:after {
    left: 2px;
    top: 3px;
    width: 10px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.register-input.code i {
    border-radius: 50%;
}

.register-input.password i {
    width: 16px;
    height: 14px;
    margin-top: 4px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.register-input.password i:before {
    left: 2px;
    top: -10px;
    width: 8px;
    height: 10px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.register-code-row {
    align-items: stretch;
}

.register-code-row .register-input {
    flex: 1;
    min-width: 0;
}

.register-code-row .outline-btn {
    width: 118px;
    min-height: 46px;
    padding: 0 12px;
    color: #155eef;
    border-color: #bcd2ff;
    box-shadow: none;
}

.register-submit {
    width: 100%;
    min-height: 50px;
    margin-top: 2px;
    border-radius: 8px;
    font-size: 16px;
}

.register-code-result,
.register-submit-result {
    margin-top: 0;
}

.register-login-link {
    justify-content: center;
    margin: 18px 0;
    color: #667891;
    font-size: 14px;
}

.register-login-link a {
    color: #155eef;
    font-weight: 900;
}

.register-notice {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #efca83;
    border-radius: 8px;
    background: #fffaf0;
}

.register-notice i {
    width: 34px;
    height: 34px;
    margin: 0;
    border: 3px solid #d29b28;
    border-radius: 50%;
    background: transparent;
}

.register-notice i:before {
    left: 13px;
    top: 7px;
    width: 3px;
    height: 11px;
    border-radius: 999px;
    background: #d29b28;
}

.register-notice i:after {
    left: 13px;
    bottom: 7px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d29b28;
}

.register-notice p {
    color: #8a641f;
    font-size: 13px;
    line-height: 1.65;
}

/* User center dashboard pages. */
.uc-page {
    min-height: 828px;
    padding: 22px 0 34px;
    background:
        linear-gradient(145deg, rgba(234, 242, 255, .78), transparent 34%),
        linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
}

.uc-shell {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 22px;
    width: min(1320px, calc(100% - 80px));
}

.uc-sidebar,
.uc-card,
.uc-status-grid article,
.uc-quick-grid a {
    border: 1px solid #dce7f6;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 45px rgba(22, 45, 86, .07);
}

.uc-sidebar {
    min-height: 760px;
    padding: 20px;
    border-radius: 14px;
}

.uc-brand {
    margin-bottom: 20px;
}

.uc-user-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #e2ebf8;
    border-radius: 12px;
    background: #f8fbff;
}

.uc-user-card > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #0a7cff);
    font-weight: 900;
}

.uc-user-card b {
    display: block;
    color: #10213d;
    font-size: 15px;
}

.uc-user-card p {
    margin-top: 4px;
    color: #667891;
    font-size: 12px;
    line-height: 1.35;
    word-break: break-all;
}

.uc-nav {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.uc-nav a {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    color: #344054;
    border-radius: 9px;
    font-weight: 800;
}

.uc-nav a.active,
.uc-nav a:hover {
    color: #155eef;
    background: #eef5ff;
}

.uc-nav a.logout {
    margin-top: 8px;
    color: #b42318;
    background: #fff5f5;
}

.uc-nav i {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.uc-nav i.tutorial:after,
.uc-nav i.software:after,
.uc-nav i.orders:after,
.uc-nav i.logout-icon:after,
.uc-quick-grid i:after {
    content: "";
    position: absolute;
}

.uc-nav i.tutorial:after {
    left: 6px;
    top: 4px;
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.uc-nav i.software:after {
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.uc-nav i.logout-icon {
    border-radius: 50%;
}

.uc-main {
    min-width: 0;
}

.uc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border: 1px solid #dce7f6;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 45px rgba(22, 45, 86, .07);
}

.uc-topbar span,
.uc-card-head span {
    color: #155eef;
    font-size: 14px;
    font-weight: 900;
}

.uc-topbar h1 {
    margin: 8px 0 6px;
    color: #071832;
    font-size: 34px;
    line-height: 1.15;
}

.uc-topbar p {
    font-size: 14px;
}

.uc-top-actions,
.uc-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.uc-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.uc-status-grid article {
    min-height: 112px;
    padding: 18px;
    border-radius: 12px;
}

.uc-status-grid span {
    display: block;
    color: #667891;
    font-size: 13px;
    font-weight: 800;
}

.uc-status-grid b {
    display: block;
    margin-top: 9px;
    color: #10213d;
    font-size: 22px;
}

.uc-status-grid b.good,
.uc-badge.good,
.order-status.paid {
    color: #118447;
}

.uc-status-grid b.warn,
.uc-badge.warn,
.order-status.pending {
    color: #b7791f;
}

.uc-status-grid em {
    display: block;
    margin-top: 8px;
    color: #667891;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}

.uc-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, .8fr);
    gap: 16px;
}

.uc-card {
    padding: 22px;
    border-radius: 14px;
}

.uc-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.uc-card-head h2 {
    margin: 7px 0 0;
    color: #10213d;
    font-size: 24px;
    line-height: 1.2;
}

.uc-card-head > a {
    color: #155eef;
    font-weight: 900;
}

.uc-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f4f8ff;
    font-size: 13px;
    font-weight: 900;
}

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

.permission-list article {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 82px;
    padding: 14px;
    border: 1px solid #e2ebf8;
    border-radius: 12px;
    background: #fbfdff;
}

.permission-list i {
    position: relative;
    width: 38px;
    height: 38px;
    border: 2px solid #b7c7df;
    border-radius: 50%;
}

.permission-list article.on i {
    border-color: #155eef;
    background: #eef5ff;
}

.permission-list i:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 12px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: #155eef;
    transform: rotate(-45deg);
}

.permission-list b {
    display: block;
    color: #13294b;
    font-size: 15px;
}

.permission-list span {
    display: block;
    margin-top: 4px;
    color: #667891;
    font-size: 12px;
}

.permission-card .uc-action-row,
.software-panel .uc-action-row {
    margin-top: 18px;
}

.service-reminder p,
.uc-card-desc {
    color: #667891;
    font-size: 15px;
    line-height: 1.8;
}

.reminder-stack {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.reminder-stack a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #155eef;
    border: 1px solid #d8e6ff;
    border-radius: 8px;
    background: #f8fbff;
    font-weight: 900;
}

.uc-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.uc-quick-grid a {
    min-height: 124px;
    padding: 18px;
    border-radius: 12px;
}

.uc-quick-grid i,
.software-package i {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
    border-radius: 9px;
    background: #eef5ff;
}

.uc-quick-grid b {
    display: block;
    color: #13294b;
    font-size: 16px;
}

.uc-quick-grid span {
    display: block;
    margin-top: 6px;
    color: #667891;
    font-size: 12px;
}

.software-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.software-package {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
    border: 1px solid #e2ebf8;
    border-radius: 12px;
    background: #f8fbff;
}

.software-package i {
    width: 76px;
    height: 76px;
    margin: 0;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.38), transparent),
        linear-gradient(135deg, #155eef, #18b5d8);
}

.software-package strong {
    display: block;
    color: #10213d;
    font-size: 28px;
}

.software-package p {
    margin-top: 4px;
    color: #667891;
    font-size: 14px;
    line-height: 1.6;
}

.uc-timeline {
    display: grid;
    gap: 14px;
}

.uc-timeline article {
    position: relative;
    padding-left: 22px;
}

.uc-timeline i {
    position: absolute;
    left: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #155eef;
}

.uc-timeline time {
    color: #667891;
    font-size: 12px;
}

.uc-timeline b {
    display: block;
    margin-top: 3px;
    color: #10213d;
}

.uc-timeline p {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.55;
}

.tutorial-dashboard {
    min-height: 560px;
}

.uc-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.uc-video-grid article {
    padding: 14px;
    border: 1px solid #e2ebf8;
    border-radius: 12px;
    background: #fff;
}

.uc-video-grid article.locked {
    background: #fffaf0;
}

.uc-video-cover {
    height: 116px;
    padding: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(135deg, #0b2a55, #155eef);
}

.uc-video-grid article.locked .uc-video-cover {
    background: linear-gradient(135deg, #7a5d24, #d6a333);
}

.uc-video-cover span {
    font-weight: 900;
}

.uc-video-cover b {
    font-size: 30px;
    opacity: .48;
}

.uc-video-grid h3 {
    min-height: 42px;
    margin: 12px 0 6px;
    color: #10213d;
    font-size: 16px;
}

.uc-video-grid p {
    font-size: 12px;
}

.uc-video-grid .primary-btn,
.uc-video-grid .outline-btn,
.uc-video-grid em {
    margin-top: 12px;
}

.uc-video-grid em {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    color: #667891;
    font-style: normal;
    font-weight: 900;
}

.orders-card {
    min-height: 560px;
}

.uc-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.uc-order-table th,
.uc-order-table td {
    padding: 14px 10px;
    text-align: left;
    border-bottom: 1px solid #e8eef8;
    color: #344054;
}

.uc-order-table th {
    color: #667891;
    font-weight: 900;
    background: #f8fbff;
}

.uc-order-table a {
    color: #155eef;
    font-weight: 900;
}

.order-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff8e8;
    font-weight: 900;
}

.order-status.paid {
    background: #eafaf1;
}

.order-status.cancelled {
    color: #b42318;
    background: #fff5f5;
}

.uc-empty {
    display: grid;
    place-items: center;
    min-height: 300px;
    text-align: center;
    border: 1px dashed #cad8ec;
    border-radius: 12px;
    background: #f8fbff;
}

.uc-empty b {
    color: #10213d;
    font-size: 22px;
}

.uc-empty p {
    max-width: 460px;
    margin: 8px auto 18px;
}

.uc-notice {
    margin-top: 16px;
    padding: 14px 16px;
    color: #8a641f;
    border: 1px solid #efca83;
    border-radius: 10px;
    background: #fffaf0;
}

/* User center overview polish. */
.uc-page {
    min-height: 828px;
    padding: 18px 0 28px;
    background:
        radial-gradient(circle at 79% 4%, rgba(21, 94, 239, .1), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7faff 58%, #ffffff 100%);
}

.uc-shell {
    grid-template-columns: 246px minmax(0, 1fr);
    gap: 18px;
    width: min(1340px, calc(100% - 72px));
}

.uc-sidebar,
.uc-card,
.uc-status-grid article,
.uc-quick-grid a,
.uc-topbar,
.uc-overview-hero {
    border-color: #d9e5f7;
    box-shadow: 0 20px 48px rgba(15, 38, 80, .075);
}

.uc-sidebar {
    position: sticky;
    top: 18px;
    min-height: 764px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 253, 255, .96)),
        #fff;
}

.uc-user-card {
    background:
        linear-gradient(135deg, rgba(21, 94, 239, .08), rgba(215, 165, 52, .1)),
        #fff;
}

.uc-nav a {
    min-height: 46px;
    color: #253858;
}

.uc-nav a.active {
    color: #155eef;
    background: linear-gradient(90deg, #eef5ff, rgba(255, 255, 255, .8));
    box-shadow: inset 3px 0 0 #155eef;
}

.uc-nav a.logout {
    margin-top: 14px;
}

.uc-topbar {
    min-height: 106px;
    padding: 21px 24px;
}

.uc-topbar h1 {
    margin: 6px 0 7px;
    font-size: 32px;
    letter-spacing: 0;
}

.uc-topbar p {
    color: #5c6f89;
    line-height: 1.65;
}

.uc-action-row {
    flex-wrap: wrap;
}

.uc-status-grid {
    gap: 12px;
    margin: 14px 0;
}

.uc-status-grid article {
    position: relative;
    overflow: hidden;
    min-height: 104px;
    padding: 17px;
    background: #fff;
}

.uc-status-grid article:after {
    content: "";
    position: absolute;
    right: -24px;
    top: -28px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(21, 94, 239, .07);
}

.uc-status-grid article:nth-child(2):after,
.uc-status-grid article:nth-child(4):after {
    background: rgba(214, 163, 51, .13);
}

.uc-status-grid b {
    margin-top: 8px;
    font-size: 21px;
}

.uc-overview-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 146px;
    margin-bottom: 14px;
    padding: 24px 26px;
    border: 1px solid #d9e5f7;
    border-radius: 14px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .98) 0%, rgba(247, 251, 255, .94) 56%, rgba(255, 250, 239, .95) 100%),
        #fff;
    box-shadow: 0 20px 48px rgba(15, 38, 80, .075);
}

.uc-overview-hero > div:first-child > span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 12px;
    color: #9a6b15;
    border: 1px solid rgba(214, 163, 51, .42);
    border-radius: 999px;
    background: #fffaf0;
    font-size: 13px;
    font-weight: 900;
}

.uc-overview-hero h2 {
    margin: 13px 0 8px;
    color: #071832;
    font-size: 30px;
    line-height: 1.18;
}

.uc-overview-hero p {
    color: #5c6f89;
    font-size: 15px;
    line-height: 1.7;
}

.uc-hero-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    width: 218px;
    min-height: 94px;
    border: 1px solid rgba(214, 163, 51, .36);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 248, 232, .94)),
        #fff;
}

.uc-hero-price b {
    color: #d6a333;
    font-size: 54px;
    line-height: 1;
}

.uc-hero-price span {
    color: #071832;
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}

.uc-section-grid {
    gap: 14px;
}

.uc-card {
    padding: 21px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(251, 253, 255, .98)),
        #fff;
}

.uc-card-head h2 {
    font-size: 23px;
}

.permission-list {
    gap: 11px;
}

.permission-list article {
    min-height: 76px;
    padding: 13px;
    background: #fff;
}

.permission-list article.on {
    border-color: #cfe0ff;
    background: #f8fbff;
}

.permission-list article.off {
    border-color: #efdba7;
    background: #fffaf0;
}

.permission-list article.off i {
    color: #d6a333;
    border-color: #d6a333;
    background: #fff7df;
}

.permission-list article.off i:after {
    left: 10px;
    top: 17px;
    width: 14px;
    height: 0;
    border-left: 0;
    border-bottom: 2px solid currentColor;
    transform: rotate(0);
}

.permission-card .uc-action-row {
    margin-top: 16px;
}

.permission-card .uc-action-row .primary-btn,
.permission-card .uc-action-row .outline-btn {
    min-width: 126px;
}

.service-reminder {
    background:
        linear-gradient(150deg, rgba(255, 250, 239, .9), rgba(255, 255, 255, .98) 56%),
        #fff;
}

.service-reminder p {
    min-height: 78px;
}

.reminder-stack {
    gap: 9px;
    margin-top: 16px;
}

.reminder-stack a {
    min-height: 42px;
    color: #10213d;
    border-color: #e5d4a3;
    background: #fff;
}

.reminder-stack a:hover {
    color: #155eef;
    border-color: #bcd2fb;
    background: #f8fbff;
}

.uc-quick-grid {
    gap: 12px;
    margin-top: 14px;
}

.uc-quick-grid a {
    position: relative;
    overflow: hidden;
    min-height: 116px;
    padding: 17px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.uc-quick-grid a:after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -34px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(21, 94, 239, .06);
}

.uc-quick-grid a:nth-child(2):after,
.uc-quick-grid a:nth-child(4):after {
    background: rgba(214, 163, 51, .13);
}

.uc-quick-grid a:hover {
    transform: translateY(-2px);
    border-color: #bcd2fb;
    box-shadow: 0 24px 54px rgba(15, 38, 80, .1);
}

.uc-quick-grid i {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    color: #155eef;
}

.uc-quick-grid i.video,
.uc-quick-grid i.log {
    color: #d6a333;
    background: #fff7df;
}

.uc-quick-grid b,
.uc-quick-grid span {
    position: relative;
    z-index: 1;
}

.uc-quick-grid span {
    max-width: 210px;
    line-height: 1.45;
}

.forgot-security-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.forgot-security-list article {
    min-height: 98px;
    padding: 14px;
    border: 1px solid #dce7f6;
    border-radius: 12px;
    background: #fff;
}

.forgot-security-list i {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    background: #eef5ff;
}

.forgot-security-list i:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: rotate(-45deg);
}

.forgot-security-list b {
    display: block;
    color: #13294b;
    font-size: 15px;
}

.forgot-security-list span {
    display: block;
    margin-top: 5px;
    color: #667891;
    font-size: 12px;
}

.forgot-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px 0;
}

.forgot-link-grid a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #155eef;
    font-size: 14px;
    font-weight: 900;
    border: 1px solid #d8e6ff;
    border-radius: 8px;
    background: #f8fbff;
}

/* Register page height correction for common desktop viewport. */
.register-page {
    min-height: 828px;
    padding: 22px 0 28px;
}

.register-shell {
    align-items: start;
}

.register-visual {
    min-height: 0;
    height: 736px;
    padding: 28px;
}

.register-badge {
    min-height: 34px;
}

.register-visual h1 {
    margin: 16px 0 10px;
    font-size: 40px;
}

.register-visual > p {
    font-size: 15px;
    line-height: 1.7;
}

.register-steps {
    gap: 12px;
    margin-top: 22px;
}

.register-steps article {
    min-height: 106px;
    padding: 15px;
}

.register-steps b {
    margin-top: 11px;
    font-size: 17px;
}

.register-steps em {
    margin-top: 5px;
    font-size: 12px;
}

.register-preview {
    margin-top: 18px;
    padding: 19px;
}

.register-preview-grid {
    gap: 10px;
    margin-top: 14px;
}

.register-preview-grid article {
    padding: 13px;
}

.register-preview-grid b {
    font-size: 18px;
}

.register-progress {
    gap: 10px;
    margin-top: 15px;
}

.register-visual-benefits {
    gap: 12px;
    margin-top: 18px;
}

.register-visual-benefits article {
    min-height: 98px;
    padding: 14px;
}

.register-visual-benefits i {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
}

.register-visual-benefits b {
    font-size: 15px;
}

.register-visual-benefits span {
    margin-top: 5px;
    font-size: 12px;
}

/* Final homepage tuning for the desktop mockup. */
.home-hero {
    padding: 20px 0 10px;
}

.home-hero-grid {
    grid-template-columns: 500px minmax(0, 1fr);
    gap: 26px;
    min-height: 392px;
    padding: 0;
}

.home-hero h1 span {
    display: block;
    color: var(--blue);
}

.home-price {
    width: 246px;
}

.home-price span {
    white-space: nowrap;
}

.home-price span small {
    display: block;
}

.home-console {
    grid-template-columns: 126px minmax(0, 1fr);
    min-height: 0;
    height: 390px;
    border-radius: 18px;
    transform: rotate(-2.6deg) skewX(-1.4deg) translateX(8px);
}

.console-main {
    overflow: hidden;
    padding: 13px 18px;
}

.console-content {
    grid-template-columns: minmax(0, 1fr) 178px;
}

.console-side {
    display: block;
}

.console-table {
    display: none;
}

.console-bottom-panels {
    display: grid;
}

.console-chart {
    height: 118px;
}

.console-platforms {
    min-height: 160px;
}

.console-platforms p {
    margin-top: 6px;
}

.console-bottom-panels article {
    min-height: 70px;
    padding: 9px 13px;
}

.console-bottom-panels dl {
    margin-top: 9px;
    gap: 7px 8px;
}

.console-tutorial-unlock > i {
    width: 46px;
    height: 46px;
}

.console-tutorial-unlock strong {
    font-size: 13px;
}

.home-overview {
    padding: 12px 0 0;
}

.home-card-grid {
    grid-template-columns: 1.05fr 1.02fr 1fr 1.08fr;
    gap: 14px;
}

.home-card {
    min-height: 210px;
    padding: 16px;
}

.home-card-head {
    margin-bottom: 10px;
}

.home-card h2 {
    font-size: 20px;
}

.home-card p {
    font-size: 11px;
}

.home-lessons {
    gap: 7px;
    margin-bottom: 9px;
}

.home-lessons a {
    min-height: 34px;
    grid-template-columns: 50px 1fr auto;
}

.home-lessons i {
    height: 28px;
}

.home-tutorial-card .primary-btn.block {
    min-height: 32px;
}

.home-agent-form {
    margin-top: 18px;
}

.home-agent-icons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 20px;
}

.home-timeline a {
    padding-bottom: 9px;
}

.home-news-list {
    gap: 9px;
}

.home-news-list a {
    grid-template-columns: 82px 1fr;
}

.home-news-thumb {
    height: 44px;
}

.home-hero h1 {
    margin: 16px 0 12px;
    font-size: 46px;
    line-height: 1.12;
}

.home-lead {
    font-size: 14px;
    line-height: 1.7;
}

.home-price {
    min-height: 72px;
    margin: 16px 0;
    padding: 10px 16px;
}

.home-price strong {
    font-size: 48px;
}

.home-price span {
    font-size: 18px;
}

.home-price span small {
    margin-top: 5px;
    font-size: 11px;
}

.home-actions {
    max-width: 350px;
}

.home-actions .primary-btn,
.home-actions .outline-btn {
    min-height: 44px;
    font-size: 16px;
}

.home-proof-row {
    gap: 10px;
    margin-top: 22px;
}

.home-proof-row i {
    width: 30px;
    height: 30px;
}

.home-proof-row b {
    font-size: 14px;
}

.home-proof-row span {
    font-size: 12px;
}

.home-console {
    min-height: 430px;
}

.home-hero h1 span {
    display: block;
    color: var(--blue);
}

.home-price {
    width: 220px;
}

.home-price span small {
    display: block;
}

.console-side {
    display: block;
}

.console-bottom-panels {
    display: grid;
}

.console-table {
    display: none;
}

.home-benefits-strip i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--blue);
    border: 2px solid #a9c3ff;
    border-radius: 6px;
    font-style: normal;
    font-weight: 900;
}

.home-benefits-strip b {
    display: block;
    overflow: hidden;
    color: #142744;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-benefits-strip span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #66758e;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-hero h1 span {
    display: block;
    color: var(--blue);
}

.home-price {
    width: 246px;
    min-height: 86px;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid rgba(211, 161, 49, .42);
    border-radius: 8px;
    background: rgba(255, 253, 248, .92);
    box-shadow: 0 14px 32px rgba(198, 145, 32, .08);
}

.home-price span small {
    display: block;
    margin-top: 8px;
    color: #7a5d24;
    font-size: 12px;
    font-weight: 800;
}

.home-price span {
    white-space: nowrap;
}

.home-console {
    min-height: 400px;
}

.console-sidebar {
    background: linear-gradient(180deg, #061a38, #092854);
}

.console-main {
    background:
        radial-gradient(circle at 78% 72%, rgba(22, 93, 255, .2), transparent 28%),
        linear-gradient(180deg, #08234b, #061b39);
}

.console-title,
.console-card-head b,
.console-side b,
.console-bottom-panels b {
    color: #fff;
}

.console-metrics article,
.console-chart-card,
.console-side article,
.console-bottom-panels article {
    border-color: rgba(180, 209, 255, .15);
    background: rgba(255, 255, 255, .06);
}

.console-metrics span,
.console-side dt,
.console-platforms p b,
.console-bottom-panels dt {
    color: #8ea3c4;
}

.console-metrics b,
.console-bottom-panels dd {
    color: #fff;
}

.console-content {
    grid-template-columns: minmax(0, 1fr) 178px;
}

.console-chart {
    height: 150px;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 34px, rgba(174, 202, 255, .12) 35px),
        rgba(255, 255, 255, .04);
}

.console-side {
    display: block;
}

.console-platforms {
    min-height: 196px;
    padding: 14px;
}

.console-platforms .console-card-head {
    margin-bottom: 9px;
}

.console-platforms p {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0 0;
    color: #8ea3c4;
    font-size: 11px;
    line-height: 1.1;
}

.console-platforms p em {
    color: #37d083;
    font-style: normal;
    font-weight: 900;
}

.console-bottom-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.console-bottom-panels article {
    min-height: 86px;
    padding: 12px 14px;
    border: 1px solid rgba(180, 209, 255, .15);
    border-radius: 8px;
}

.console-bottom-panels dl {
    display: grid;
    grid-template-columns: 68px 1fr 72px 1fr;
    gap: 9px 10px;
    margin: 12px 0 0;
    font-size: 11px;
}

.console-bottom-panels dd {
    margin: 0;
    text-align: right;
    font-weight: 900;
}

.console-bottom-panels .ok {
    color: #37d083;
}

.console-tutorial-unlock {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    align-items: center;
}

.console-tutorial-unlock > i {
    width: 52px;
    height: 52px;
    display: block;
    border-radius: 10px;
    background:
        linear-gradient(#d8e8ff, #d8e8ff) 14px 12px / 30px 4px no-repeat,
        linear-gradient(#d8e8ff, #d8e8ff) 14px 24px / 30px 4px no-repeat,
        linear-gradient(135deg, #165dff, #54a3ff);
    box-shadow: 0 14px 28px rgba(22, 93, 255, .2);
    position: relative;
}

.console-tutorial-unlock > i:after {
    content: "";
    position: absolute;
    left: 23px;
    top: 34px;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.console-tutorial-unlock strong {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: 14px;
}

.console-tutorial-unlock span {
    display: block;
    margin-top: 5px;
    color: #8ea3c4;
    font-size: 11px;
}

.home-lessons a {
    grid-template-columns: 72px 1fr auto;
}

.home-tutorial-card .primary-btn.block {
    min-height: 34px;
}

@media (max-width: 1240px) {
    .main-nav {
        gap: 15px;
        font-size: 13px;
    }
    .nav-actions {
        gap: 8px;
    }
    .ghost-btn {
        padding: 0 10px;
    }
    .home-hero-grid {
        grid-template-columns: 390px minmax(0, 1fr);
        gap: 24px;
    }
    .home-console {
        transform: rotate(-2.5deg) skewX(-1deg);
    }
    .home-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-benefits-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 0;
    }
    .home-benefits-strip article:nth-child(3),
    .home-benefits-strip article:nth-child(5) {
        border-left: 0;
    }
}

@media (max-width: 980px) {
    .main-nav { display: none; }
    .hero-grid,
    .home-hero-grid,
    .two-col,
    .checkout-grid,
    .agent-query-wrap,
    .contact-grid,
    .center-layout,
    .login-panel-wrap {
        grid-template-columns: 1fr;
    }
    .feature-grid,
    .tutorial-grid,
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .module-grid,
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .product-visual {
        min-height: 480px;
    }
    .center-shell {
        grid-template-columns: 1fr;
    }
    .center-sidebar {
        display: none;
    }
    .home-hero-grid {
        min-height: auto;
        padding: 34px 0 22px;
    }
    .home-console {
        transform: none;
    }
    .home-proof-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-benefits-strip {
        grid-template-columns: 1fr;
    }
    .home-benefits-strip article {
        border-left: 0;
        border-top: 1px solid #e7edf5;
        padding: 14px 0 0;
    }
    .home-benefits-strip article:first-child {
        border-top: 0;
        padding-top: 0;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100% - 28px, 1180px);
    }
    .nav-wrap {
        gap: 10px;
    }
    .brand {
        gap: 8px;
        font-size: 18px;
    }
    .brand-mark {
        width: 34px;
        height: 34px;
    }
    .nav-actions {
        gap: 6px;
    }
    .nav-actions .ghost-btn {
        display: inline-flex;
        min-height: 34px;
        padding: 0 7px;
        font-size: 13px;
    }
    .nav-actions .primary-btn.small {
        min-height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }
    .hero {
        padding-top: 54px;
    }
    .hero h1,
    .page-hero.compact h1 {
        font-size: 36px;
    }
    .home-hero {
        padding-top: 18px;
    }
    .home-hero h1 {
        font-size: 39px;
    }
    .home-actions,
    .home-card-grid,
    .console-content,
    .console-metrics {
        grid-template-columns: 1fr;
    }
    .home-proof-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .home-console {
        grid-template-columns: 82px minmax(0, 1fr);
        min-height: 360px;
        border-radius: 12px;
    }
    .console-sidebar {
        padding: 14px 8px;
    }
    .console-sidebar span {
        padding: 8px 6px;
        font-size: 10px;
    }
    .console-main {
        padding: 12px;
    }
    .console-chart {
        height: 118px;
    }
    .console-side,
    .console-table {
        display: none;
    }
    .home-agent-icons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-news-list a {
        grid-template-columns: 72px 1fr;
    }
    .hero-actions,
    .hero-price,
    .cta-inner,
    .footer-bottom,
    .center-actions,
    .code-row {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .feature-grid,
    .tutorial-grid,
    .news-grid,
    .module-grid,
    .footer-grid,
    .center-cards {
        grid-template-columns: 1fr;
    }
    .product-visual {
        min-height: 390px;
    }
    .app-window {
        inset: 34px 0 0;
        border-radius: 18px;
        transform: none;
    }
    .window-body {
        grid-template-columns: 64px 1fr;
        min-height: 310px;
    }
    .window-body aside {
        padding: 20px 18px;
    }
    .window-body aside i {
        width: 24px;
        height: 38px;
        margin-bottom: 12px;
    }
    .window-body section {
        padding: 16px;
    }
    .dashboard-head {
        padding: 16px;
    }
    .dashboard-head strong {
        font-size: 24px;
    }
    .dashboard-head button {
        min-width: 88px;
        padding: 0 12px;
        font-size: 13px;
    }
    .metric-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 12px;
    }
    .metric-grid span {
        font-size: 12px;
    }
    .metric-grid strong {
        font-size: 18px;
    }
    .workflow-card,
    .chart-card {
        display: none;
    }
    .visual-badge.gold {
        top: 8px;
        right: 16px;
    }
    .visual-badge.blue {
        left: -8px;
        bottom: 60px;
    }
    .mini-card-agent {
        right: -8px;
        bottom: 38px;
    }
    .inline-search,
    .agent-search {
        flex-direction: column;
    }
    .timeline-item {
        grid-template-columns: 1fr;
    }
}

/* Desktop-only site: keep the full PC layout instead of switching to a mobile version. */
body {
    min-width: 1200px;
}

.main-nav {
    display: flex;
}

.nav-wrap {
    height: 72px;
    gap: 24px;
}

.brand {
    gap: 10px;
    font-size: 21px;
}

.brand-mark {
    width: 38px;
    height: 38px;
}

.nav-actions {
    gap: 12px;
}

.nav-actions .ghost-btn {
    display: inline-flex;
    min-height: 38px;
    padding: 0 14px;
    font-size: 15px;
}

.nav-actions .primary-btn.small {
    min-height: 38px;
    padding: 0 16px;
    font-size: 14px;
}

.home-hero {
    padding: 20px 0 10px;
}

.home-hero-grid {
    grid-template-columns: 500px minmax(0, 1fr);
    gap: 26px;
    min-height: 492px;
    padding: 0;
}

.home-hero h1 {
    font-size: 52px;
}

.home-actions {
    grid-template-columns: 1fr .88fr;
}

.home-proof-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-console {
    grid-template-columns: 126px minmax(0, 1fr);
    min-height: 400px;
    border-radius: 18px;
    transform: rotate(-3deg) skewX(-1.6deg) translateX(8px);
}

.console-content {
    grid-template-columns: minmax(0, 1fr) 178px;
}

.console-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.console-side,
.console-table {
    display: grid;
}

.home-card-grid {
    grid-template-columns: 1.05fr 1.02fr 1fr 1.08fr;
}

.home-agent-icons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-news-list a {
    grid-template-columns: 82px 1fr;
}

.home-benefits-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-benefits-strip article {
    border-top: 0;
    border-left: 1px solid #e7edf5;
    padding: 0 14px;
}

.home-benefits-strip article:first-child {
    border-left: 0;
}

/* Final header buy icon override. */
.site-header .nav-buy-btn .nav-cart-icon {
    width: 19px !important;
    height: 19px !important;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.7' y='5.1' width='14.6' height='10.2' rx='2.4' stroke='%23ffffff' stroke-width='1.9'/%3E%3Cpath d='M3.1 8h13.8M6 12.3h4.6M13 11.3l2.2 2.1-2.2 2.1' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 19px 19px no-repeat !important;
}

/* Final homepage buy icon: payment-card mark, matched to the query icon weight. */
.home-actions .home-buy-icon {
    width: 24px !important;
    height: 24px !important;
    margin-right: 8px;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.2' y='6.3' width='17.4' height='12.2' rx='3' stroke='%23ffffff' stroke-width='2.25'/%3E%3Cpath d='M3.7 9.8h16.4M7.1 14.7h5.4M15.6 13.4l2.6 2.5-2.6 2.5' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat !important;
}

.home-actions .home-buy-icon:before,
.home-actions .home-buy-icon:after {
    content: none !important;
}

.buy-exact-page .buy-exact-form button i {
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.2' y='6.3' width='17.4' height='12.2' rx='3' stroke='%23ffffff' stroke-width='2.25'/%3E%3Cpath d='M3.7 9.8h16.4M7.1 14.7h5.4M15.6 13.4l2.6 2.5-2.6 2.5' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat !important;
}

.buy-exact-page .buy-exact-form button i:before,
.buy-exact-page .buy-exact-form button i:after {
    content: none !important;
}

/* Final selected buy icon: clean shopping cart. */
.home-actions .home-buy-icon {
    width: 25px !important;
    height: 24px !important;
    margin-right: 8px;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='26' height='24' viewBox='0 0 26 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 4.6h2.4l1.7 9.5c.2 1.2 1.2 2 2.4 2h8.3c1.1 0 2.1-.8 2.3-1.9l1-5.9H7' stroke='%23ffffff' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.2 11.9h7.8' stroke='%23ffffff' stroke-width='2.35' stroke-linecap='round'/%3E%3Ccircle cx='10.6' cy='20' r='1.55' fill='%23ffffff'/%3E%3Ccircle cx='18.3' cy='20' r='1.55' fill='%23ffffff'/%3E%3C/svg%3E") center / 25px 24px no-repeat !important;
}

.site-header .nav-buy-btn .nav-cart-icon {
    width: 19px !important;
    height: 19px !important;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.6 3.4h1.9l1.3 7.5c.2.9.9 1.5 1.8 1.5h6.5c.9 0 1.6-.6 1.8-1.5l.8-4.6H5.5' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.2 9.1h6' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='15.7' r='1.15' fill='%23ffffff'/%3E%3Ccircle cx='14.2' cy='15.7' r='1.15' fill='%23ffffff'/%3E%3C/svg%3E") center / 19px 19px no-repeat !important;
}

.buy-exact-page .buy-exact-form button i {
    width: 25px !important;
    height: 24px !important;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='26' height='24' viewBox='0 0 26 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 4.6h2.4l1.7 9.5c.2 1.2 1.2 2 2.4 2h8.3c1.1 0 2.1-.8 2.3-1.9l1-5.9H7' stroke='%23ffffff' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.2 11.9h7.8' stroke='%23ffffff' stroke-width='2.35' stroke-linecap='round'/%3E%3Ccircle cx='10.6' cy='20' r='1.55' fill='%23ffffff'/%3E%3Ccircle cx='18.3' cy='20' r='1.55' fill='%23ffffff'/%3E%3C/svg%3E") center / 25px 24px no-repeat !important;
}

.buy-cart-icon {
    display: inline-block;
    width: 20px;
    height: 18px;
    flex: 0 0 auto;
    margin-right: 8px;
    vertical-align: -3px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='21' viewBox='0 0 24 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.6 2.6c0-.7.5-1.2 1.2-1.2h2.1c.6 0 1.1.4 1.2 1l.4 2h13.4c.8 0 1.4.7 1.2 1.5l-1.2 6.5c-.3 1.5-1.6 2.6-3.1 2.6H9.6c-1.5 0-2.9-1.1-3.1-2.6L4.9 3.8H3.8c-.7 0-1.2-.5-1.2-1.2Zm6 4.2.9 5.2c0 .3.3.5.6.5h7.4c.3 0 .6-.2.6-.5l.9-5.2H8.6Zm1.4 13.1a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Zm7.4 0a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='24' height='21' viewBox='0 0 24 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.6 2.6c0-.7.5-1.2 1.2-1.2h2.1c.6 0 1.1.4 1.2 1l.4 2h13.4c.8 0 1.4.7 1.2 1.5l-1.2 6.5c-.3 1.5-1.6 2.6-3.1 2.6H9.6c-1.5 0-2.9-1.1-3.1-2.6L4.9 3.8H3.8c-.7 0-1.2-.5-1.2-1.2Zm6 4.2.9 5.2c0 .3.3.5.6.5h7.4c.3 0 .6-.2.6-.5l.9-5.2H8.6Zm1.4 13.1a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Zm7.4 0a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.primary-btn .buy-cart-icon,
.gold-btn .buy-cart-icon,
.software-primary-action .buy-cart-icon,
.exact-plan-card a .buy-cart-icon,
.exact-empty a .buy-cart-icon,
.exact-buy-tip a .buy-cart-icon,
.account-service-card a .buy-cart-icon {
    color: #fff;
}

.site-footer .buy-cart-icon {
    width: 16px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
}

/* Changelog page record title and version icons: complete, unclipped document mark. */
.changelog-main-card .changelog-record-title {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px !important;
    overflow: visible;
}

.changelog-record-icon {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid #cfe0ff;
    border-radius: 12px;
    background: linear-gradient(145deg, #1765ff 0%, #4f8dff 100%);
    box-shadow: 0 12px 26px rgba(22, 93, 255, .20);
    overflow: visible;
}

.changelog-record-icon:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 9px;
    width: 17px;
    height: 22px;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 -1px 0 rgba(22, 93, 255, .12);
}

.changelog-record-icon:after {
    content: "";
    position: absolute;
    left: 16px;
    top: 15px;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: #1765ff;
    box-shadow: 0 6px 0 #1765ff, 0 12px 0 #1765ff;
}

.changelog-summary-grid,
.changelog-summary-grid article,
.changelog-summary-grid .summary-icon {
    overflow: visible;
}

.changelog-summary-grid .summary-icon.version {
    border-color: #cfe0ff;
    border-radius: 14px;
    background: linear-gradient(145deg, #eaf2ff, #ffffff);
    box-shadow: 0 10px 24px rgba(22, 93, 255, .10);
}

.changelog-summary-grid .summary-icon.version:before {
    left: 12px;
    top: 9px;
    width: 17px;
    height: 22px;
    border: 2px solid #1765ff;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
}

.changelog-summary-grid .summary-icon.version:after {
    left: 16px;
    top: 16px;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: #1765ff;
    box-shadow: 0 6px 0 #1765ff;
}

.version-status-card dd.status-ok {
    position: static;
    background: transparent !important;
}

.version-status-card dd.status-ok:before,
.version-status-card dd.status-ok:after {
    content: none !important;
    display: none !important;
}

/* About page trust icons: centered SVG marks with a unified gold outline style. */
.about-trust-row .about-trust-shield,
.about-trust-row .about-trust-lock,
.about-trust-row .about-trust-refresh,
.about-trust-row .about-trust-support {
    width: 44px;
    height: 44px;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    color: #c89725;
    box-shadow: none;
    overflow: visible;
}

.about-trust-row .about-trust-shield {
    background: #fff url("data:image/svg+xml,%3Csvg width='30' height='32' viewBox='0 0 30 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3.5 24 7.4v7.9c0 5.7-3.5 10.5-9 12.9-5.5-2.4-9-7.2-9-12.9V7.4l9-3.9Z' stroke='%23c89725' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='m10.2 15.9 3.3 3.3 6.6-7.1' stroke='%23c89725' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 29px 31px no-repeat;
}

.about-trust-row .about-trust-lock {
    background: #fff url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7.2' y='13.1' width='15.6' height='12.2' rx='3.2' stroke='%23c89725' stroke-width='2.7'/%3E%3Cpath d='M10.5 13.1V10a4.5 4.5 0 0 1 9 0v3.1' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M15 17.7v3.2' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 29px 29px no-repeat;
}

.about-trust-row .about-trust-refresh {
    background: #fff url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.6 10.2A9.2 9.2 0 0 0 7.9 8.9L5.6 11.2' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.3 5.5v5.9h5.9' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.4 20.8a9.2 9.2 0 0 0 15.7 1.3l2.3-2.3' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25.7 25.5v-5.9h-5.9' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}

.about-trust-row .about-trust-support {
    background: #fff url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17.2v-2.1a8.5 8.5 0 0 1 17 0v2.1' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M7 17.2h2.2c1 0 1.8.8 1.8 1.8v4c0 1-.8 1.8-1.8 1.8H7.8A2.8 2.8 0 0 1 5 22v-2a2.8 2.8 0 0 1 2-2.8Zm17 0h-2.2c-1 0-1.8.8-1.8 1.8v4c0 1 .8 1.8 1.8 1.8h1.4A2.8 2.8 0 0 0 26 22v-2a2.8 2.8 0 0 0-2-2.8Z' stroke='%23c89725' stroke-width='2.7' stroke-linejoin='round'/%3E%3Cpath d='M20.4 24.1c-.9 1.1-2.4 1.8-4.9 1.8' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}

.about-trust-row .about-trust-shield:before,
.about-trust-row .about-trust-shield:after,
.about-trust-row .about-trust-lock:before,
.about-trust-row .about-trust-lock:after,
.about-trust-row .about-trust-refresh:before,
.about-trust-row .about-trust-refresh:after,
.about-trust-row .about-trust-support:before,
.about-trust-row .about-trust-support:after {
    content: none !important;
    display: none !important;
}

/* About page stat icons: crisp centered SVG marks. */
.about-stat-row .about-calendar-icon,
.about-stat-row .about-price-icon,
.about-stat-row .about-service-icon {
    width: 44px;
    height: 44px;
    border: 0;
    color: var(--blue);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

.about-stat-row .about-calendar-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='8.5' width='26' height='23' rx='5' stroke='%23165dff' stroke-width='2.8'/%3E%3Cpath d='M12.2 5.8v5.4M25.8 5.8v5.4M7.4 15.2h23.2' stroke='%23165dff' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M13.2 21h.1M19 21h.1M24.8 21h.1M13.2 26.6h.1M19 26.6h.1M24.8 26.6h.1' stroke='%23165dff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.about-stat-row .about-price-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.6 13.6V8.8c0-.7.5-1.2 1.2-1.2h12.9c.7 0 1.3.3 1.8.8l11.1 11.1c1 1 1 2.7 0 3.7L23.2 34.6c-1 1-2.7 1-3.7 0L8.4 23.5c-.5-.5-.8-1.1-.8-1.8v-8.1Z' stroke='%23165dff' stroke-width='2.9' stroke-linejoin='round'/%3E%3Ccircle cx='15.2' cy='15.2' r='2.4' stroke='%23165dff' stroke-width='2.7'/%3E%3Cpath d='m17.8 24.2 3.3 3.2 6.5-7' stroke='%23165dff' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.about-stat-row .about-service-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21v-3.4a10 10 0 0 1 20 0V21' stroke='%23165dff' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M9 21h3.1c1.1 0 1.9.9 1.9 1.9v4.2c0 1.1-.8 1.9-1.9 1.9H10a3 3 0 0 1-3-3v-2a3 3 0 0 1 2-3Zm20 0h-3.1c-1.1 0-1.9.9-1.9 1.9v4.2c0 1.1.8 1.9 1.9 1.9H28a3 3 0 0 0 3-3v-2a3 3 0 0 0-2-3Z' stroke='%23165dff' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='M23.8 28.2c-1.1 1.4-2.8 2.2-5.3 2.2' stroke='%23165dff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.about-stat-row .about-calendar-icon:before,
.about-stat-row .about-calendar-icon:after,
.about-stat-row .about-price-icon:before,
.about-stat-row .about-price-icon:after,
.about-stat-row .about-service-icon:before,
.about-stat-row .about-service-icon:after {
    content: none !important;
    display: none !important;
}

/* About page contact card icon: crisp centered support mark. */
.about-contact-card .about-headset-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eaf2ff url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.2 21.3v-3.6a9.8 9.8 0 0 1 19.6 0v3.6' stroke='%23165dff' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M9.2 21.3h3.2c1.2 0 2.1.9 2.1 2.1v4.5c0 1.2-.9 2.1-2.1 2.1h-1.8a3.4 3.4 0 0 1-3.4-3.4v-2a3.4 3.4 0 0 1 2-3.3Zm19.6 0h-3.2c-1.2 0-2.1.9-2.1 2.1v4.5c0 1.2.9 2.1 2.1 2.1h1.8a3.4 3.4 0 0 0 3.4-3.4v-2a3.4 3.4 0 0 0-2-3.3Z' stroke='%23165dff' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M24 29c-1 1.4-2.8 2.3-5.5 2.3' stroke='%23165dff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 38px 38px no-repeat;
}

.about-contact-card .about-headset-icon:before,
.about-contact-card .about-headset-icon:after {
    content: none !important;
    display: none !important;
}

/* Contact page trust icons: match the About page centered gold SVG style. */
.contact-trust-row .contact-trust-shield,
.contact-trust-row .contact-trust-clock,
.contact-trust-row .contact-trust-id,
.contact-trust-row .contact-trust-badge {
    width: 44px;
    height: 44px;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    color: #c89725;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: none;
    overflow: visible;
}

.contact-trust-row .contact-trust-shield {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='32' viewBox='0 0 30 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3.5 24 7.4v7.9c0 5.7-3.5 10.5-9 12.9-5.5-2.4-9-7.2-9-12.9V7.4l9-3.9Z' stroke='%23c89725' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='m10.2 15.9 3.3 3.3 6.6-7.1' stroke='%23c89725' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 29px 31px;
}

.contact-trust-row .contact-trust-clock {
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.5' cy='15.5' r='10.5' stroke='%23c89725' stroke-width='2.7'/%3E%3Cpath d='M15.5 9.6v6.3l4.6 3' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.1 5.4 5.5 8M22.9 5.4 25.5 8' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round' opacity='.65'/%3E%3C/svg%3E");
    background-size: 30px 30px;
}

.contact-trust-row .contact-trust-id {
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5.6' y='7.2' width='19.8' height='16.6' rx='3.2' stroke='%23c89725' stroke-width='2.7'/%3E%3Cpath d='M11.2 12.5h8.4M11.2 17h5.2' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M23.7 20.6 26 23l4-5' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 30px 30px;
}

.contact-trust-row .contact-trust-badge {
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 4.4 21.3 7.7l6.6.1-3.2 5.8 3.2 5.8-6.6.1-5.8 3.3-5.8-3.3-6.6-.1 3.2-5.8-3.2-5.8 6.6-.1 5.8-3.3Z' stroke='%23c89725' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='m10.7 15.3 3.2 3.1 6.5-7' stroke='%23c89725' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 30px 30px;
}

.contact-trust-row .contact-trust-shield:before,
.contact-trust-row .contact-trust-shield:after,
.contact-trust-row .contact-trust-clock:before,
.contact-trust-row .contact-trust-clock:after,
.contact-trust-row .contact-trust-id:before,
.contact-trust-row .contact-trust-id:after,
.contact-trust-row .contact-trust-badge:before,
.contact-trust-row .contact-trust-badge:after {
    content: none !important;
    display: none !important;
}

/* Agent page anti-fraud icon: centered gold warning shield. */
.agent-trust-row .textless-alert-icon {
    width: 44px;
    height: 44px;
    border: 2px solid #d6a73c;
    border-radius: 10px;
    color: #c89725;
    background: #fff url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 3.8 24.4 7.6v7.5c0 5.7-3.5 10.5-8.9 12.7-5.4-2.2-8.9-7-8.9-12.7V7.6l8.9-3.8Z' stroke='%23c89725' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M15.5 11.1v7.1' stroke='%23c89725' stroke-width='2.9' stroke-linecap='round'/%3E%3Cpath d='M15.5 22.4h.1' stroke='%23c89725' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
    box-shadow: none;
    clip-path: none;
}

.agent-trust-row .textless-alert-icon:before,
.agent-trust-row .textless-alert-icon:after {
    content: none !important;
    display: none !important;
}

/* Register page icon refresh: crisp centered SVG marks. */
.register-badge i {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 2.3 15 5.5v6.3L9.5 15 4 11.8V5.5l5.5-3.2Z' stroke='%23bc8a22' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m6.8 9.3 1.8 1.8 3.8-4.1' stroke='%23bc8a22' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.register-badge i:before,
.register-badge i:after {
    content: none !important;
    display: none !important;
}

.register-input.email i,
.register-input.code i,
.register-input.password i {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    border: 0;
    border-radius: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.register-input.email i {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.2' y='5.2' width='15.6' height='11.6' rx='2.8' stroke='%239aacc7' stroke-width='2'/%3E%3Cpath d='m4.2 7 6.8 5 6.8-5' stroke='%239aacc7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.register-input.code i {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4.2' y='4.2' width='13.6' height='13.6' rx='3.2' stroke='%239aacc7' stroke-width='2'/%3E%3Cpath d='M8.2 9h5.6M8.2 13h3.2' stroke='%239aacc7' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6.8 2.7v3M15.2 2.7v3M6.8 16.3v3M15.2 16.3v3' stroke='%239aacc7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.register-input.password i {
    margin-top: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4.2' y='9.2' width='13.6' height='9' rx='2.4' stroke='%239aacc7' stroke-width='2'/%3E%3Cpath d='M7.2 9.2V7.4a3.8 3.8 0 0 1 7.6 0v1.8' stroke='%239aacc7' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11 13v2' stroke='%239aacc7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.register-input.email i:before,
.register-input.email i:after,
.register-input.code i:before,
.register-input.code i:after,
.register-input.password i:before,
.register-input.password i:after {
    content: none !important;
    display: none !important;
}

.register-visual-benefits i {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 10px;
    background-color: #eef5ff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
}

.register-visual-benefits i.download {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 6.2v11.2M10.5 13.2l4.5 4.5 4.5-4.5' stroke='%23165dff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 22.8h15' stroke='%23165dff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.register-visual-benefits i.video {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6.2' y='7.8' width='17.6' height='14.4' rx='4' stroke='%23165dff' stroke-width='2.8'/%3E%3Cpath d='m13 12.2 5.3 3.3-5.3 3.3v-6.6Z' fill='%23165dff'/%3E%3C/svg%3E");
}

.register-visual-benefits i.order {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5.8h9.6L23 10.2v14H9v-18.4Z' stroke='%23d6a333' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M18.4 6v4.4H23M12 15.8h7M12 20.2h5' stroke='%23d6a333' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.register-visual-benefits i:before,
.register-visual-benefits i:after {
    content: none !important;
    display: none !important;
}

.register-notice i {
    border: 2px solid #d29b28;
    background: transparent url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 7.2v7.1' stroke='%23d29b28' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M13 18.8h.1' stroke='%23d29b28' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 25px 25px no-repeat;
}

.register-notice i:before,
.register-notice i:after {
    content: none !important;
    display: none !important;
}

/* Login page icon refresh: crisp centered SVG marks, no fuzzy CSS-drawn pieces. */
.login-input-box > i,
.login-input-box.password em,
.login-note i,
.login-right-icon,
.login-video-mini i,
.login-download-mini i {
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.login-input-box.email > i {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    border: 0;
    border-radius: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.2' y='5.2' width='15.6' height='11.6' rx='2.8' stroke='%239aacc7' stroke-width='2'/%3E%3Cpath d='m4.2 7 6.8 5 6.8-5' stroke='%239aacc7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}

.login-input-box.email > i:before,
.login-input-box.email > i:after {
    content: none !important;
    display: none !important;
}

.login-input-box.password > i {
    width: 20px;
    height: 20px;
    margin: 0 0 0 15px;
    border: 0;
    border-radius: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4.2' y='9.2' width='13.6' height='9' rx='2.4' stroke='%239aacc7' stroke-width='2'/%3E%3Cpath d='M7.2 9.2V7.4a3.8 3.8 0 0 1 7.6 0v1.8' stroke='%239aacc7' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11 13v2' stroke='%239aacc7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}

.login-input-box.password > i:before,
.login-input-box.password > i:after {
    content: none !important;
    display: none !important;
}

.login-input-box.password em {
    width: 20px;
    height: 20px;
    margin-right: 13px;
    border: 0;
    border-radius: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.3 11s2.7-5 7.7-5 7.7 5 7.7 5-2.7 5-7.7 5-7.7-5-7.7-5Z' stroke='%23667891' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='11' cy='11' r='2.4' stroke='%23667891' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}

.login-input-box.password em:before,
.login-input-box.password em:after {
    content: none !important;
    display: none !important;
}

.login-note i {
    width: 36px;
    height: 36px;
    border: 2px solid #d29b28;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 7.2v7.1' stroke='%23d29b28' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M13 18.8h.1' stroke='%23d29b28' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 25px 25px;
}

.login-note i:before,
.login-note i:after {
    content: none !important;
    display: none !important;
}

.login-right-icon {
    position: relative;
    border-radius: 10px;
    background-color: #edf5ff;
}

.login-right-icon.download {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 6.2v11.2M10.5 13.2l4.5 4.5 4.5-4.5' stroke='%23165dff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 22.8h15' stroke='%23165dff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 28px 28px;
}

.login-right-icon.video {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6.2' y='7.8' width='17.6' height='14.4' rx='4' stroke='%23165dff' stroke-width='2.8'/%3E%3Cpath d='m13 12.2 5.3 3.3-5.3 3.3v-6.6Z' fill='%23165dff'/%3E%3C/svg%3E");
    background-size: 28px 28px;
}

.login-right-icon.order {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5.8h9.6L23 10.2v14H9v-18.4Z' stroke='%23165dff' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M18.4 6v4.4H23M12 15.8h7M12 20.2h5' stroke='%23165dff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 28px 28px;
}

.login-right-icon:before,
.login-right-icon:after {
    content: none !important;
    display: none !important;
}

.login-video-mini i,
.login-download-mini i {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background-color: rgba(22, 93, 255, .18);
}

.login-video-mini i {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5.2' y='7' width='17.6' height='14' rx='3.5' stroke='%23ffffff' stroke-width='2.4'/%3E%3Cpath d='m12.2 11.1 5.2 2.9-5.2 2.9v-5.8Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 27px 27px;
}

.login-download-mini i {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 5.8v11M9.7 12.9 14 17.2l4.3-4.3' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 21.4h13' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 27px 27px;
}

.login-download-mini i:before,
.login-download-mini i:after {
    content: none !important;
    display: none !important;
}

.login-video-mini i:before,
.login-video-mini i:after {
    content: none !important;
    display: none !important;
}

.login-dashboard-nav b i {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.8 18.8 6.3v9L11 19.8l-7.8-4.5v-9L11 1.8Z' fill='%238db7ff'/%3E%3Cpath d='M3.2 6.3 11 10.8l7.8-4.5M11 10.8v9' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round' opacity='.9'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

.login-dashboard-nav span i {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='10' height='10' rx='2.2' stroke='%23c8d5e9' stroke-width='1.8'/%3E%3Cpath d='M6 6.4h4M6 9.6h2.8' stroke='%23c8d5e9' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    opacity: .82;
}

.login-dashboard-nav span.active i {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='10' height='10' rx='2.2' stroke='%23ffffff' stroke-width='1.8'/%3E%3Cpath d='M6 6.4h4M6 9.6h2.8' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    opacity: 1;
}

.login-dashboard-nav b i:before,
.login-dashboard-nav b i:after,
.login-dashboard-nav span i:before,
.login-dashboard-nav span i:after,
.login-help-line span:before,
.login-help-line span:after {
    content: none !important;
    display: none !important;
}

.login-help-line span {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='7.3' stroke='%238ba4c8' stroke-width='2'/%3E%3Cpath d='M9.5 8.6v4.6' stroke='%238ba4c8' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9.5 5.7h.1' stroke='%238ba4c8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.login-input-box.email,
.login-input-box.password {
    background: transparent !important;
}

.login-input-box.email input,
.login-input-box.password input {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
}

.login-input-box.email input:focus,
.login-input-box.password input:focus,
.login-input-box.email input:focus-visible,
.login-input-box.password input:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.login-form .login-input-box.email input,
.login-form .login-input-box.password input,
.login-form .login-input-box.email input:focus,
.login-form .login-input-box.password input:focus {
    display: block !important;
    height: 44px !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    line-height: 44px !important;
}

.login-form .login-input-box.email input:-webkit-autofill,
.login-form .login-input-box.password input:-webkit-autofill,
.login-form .login-input-box.email input:-webkit-autofill:hover,
.login-form .login-input-box.password input:-webkit-autofill:hover,
.login-form .login-input-box.email input:-webkit-autofill:focus,
.login-form .login-input-box.password input:-webkit-autofill:focus,
.login-form .login-input-box.email input:-webkit-autofill:active,
.login-form .login-input-box.password input:-webkit-autofill:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #071735 !important;
    caret-color: #071735;
    transition: background-color 999999s ease-out, color 999999s ease-out;
}

.login-form .login-input-box.email input::selection,
.login-form .login-input-box.password input::selection {
    background: transparent;
}

.login-input-box.password em {
    cursor: pointer;
}

.login-input-box.password.is-visible em {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.3 11s2.7-5 7.7-5 7.7 5 7.7 5-2.7 5-7.7 5-7.7-5-7.7-5Z' stroke='%23667891' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='11' cy='11' r='2.4' stroke='%23667891' stroke-width='2'/%3E%3Cpath d='M4.8 17.2 17.2 4.8' stroke='%23667891' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.login-proof-strip i {
    border: 2px solid #c79528;
    border-radius: 10px;
    color: #c79528;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: none !important;
}

.login-proof-strip i.shield {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='32' viewBox='0 0 30 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3.5 24 7.4v7.9c0 5.7-3.5 10.5-9 12.9-5.5-2.4-9-7.2-9-12.9V7.4l9-3.9Z' stroke='%23c79528' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='m10.2 15.9 3.3 3.3 6.6-7.1' stroke='%23c79528' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 29px 31px;
}

.login-proof-strip i.lock {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7.2' y='13.1' width='15.6' height='12.2' rx='3.2' stroke='%23c79528' stroke-width='2.7'/%3E%3Cpath d='M10.5 13.1V10a4.5 4.5 0 0 1 9 0v3.1' stroke='%23c79528' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M15 17.7v3.2' stroke='%23c79528' stroke-width='2.7' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 29px 29px;
}

.login-proof-strip i.refresh {
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.6 10.2A9.2 9.2 0 0 0 7.9 8.9L5.6 11.2' stroke='%23c79528' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.3 5.5v5.9h5.9' stroke='%23c79528' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.4 20.8a9.2 9.2 0 0 0 15.7 1.3l2.3-2.3' stroke='%23c79528' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25.7 25.5v-5.9h-5.9' stroke='%23c79528' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 30px 30px;
}

.login-proof-strip i.badge {
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 4.4 21.3 7.7l6.6.1-3.2 5.8 3.2 5.8-6.6.1-5.8 3.3-5.8-3.3-6.6-.1 3.2-5.8-3.2-5.8 6.6-.1 5.8-3.3Z' stroke='%23c79528' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='m10.7 15.3 3.2 3.1 6.5-7' stroke='%23c79528' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 30px 30px;
}

.login-proof-strip i:before,
.login-proof-strip i:after {
    content: none !important;
    display: none !important;
}

/* Global input focus cleanup: no extra border or glow when typing. */
input:focus,
textarea:focus,
select:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
    border-color: #d9e4f5 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

.login-input-box:focus-within,
.register-input:focus-within,
.news-search-box:focus-within {
    box-shadow: none !important;
}

.login-input-box:focus-within,
.register-input:focus-within {
    border-color: #d5e0ef !important;
}

.news-search-box:focus-within {
    border-color: #cfe0f8 !important;
}

/* Header auth buttons: highlight the current auth page only. */
.site-header .nav-actions .nav-login-btn,
.site-header .nav-actions .nav-register-btn {
    color: #071a3a;
    border-color: transparent;
    background: #fff;
    box-shadow: none;
}

.site-header .nav-actions .nav-login-btn.active,
.site-header .nav-actions .nav-register-btn.active,
.site-header .nav-actions .nav-login-btn:hover,
.site-header .nav-actions .nav-register-btn:hover {
    color: #1260f6;
    border-color: #9ec0ff;
    background: #fff;
    box-shadow: 0 8px 20px rgba(18, 96, 246, .045);
}

.site-header .language-switch,
.exact-lang-btn {
    position: relative;
    min-width: 96px;
    width: auto;
    height: 40px;
    padding: 0;
    color: #071a3a;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.site-header .language-switch summary {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #d5e2f5;
    border-radius: 8px;
    background: #f8fbff;
    cursor: pointer;
    list-style: none;
}

.site-header .language-switch summary::-webkit-details-marker {
    display: none;
}

.site-header .language-switch i {
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.5 9h-3.1a15.7 15.7 0 0 0-1.1-5A8.04 8.04 0 0 1 19.5 11ZM12 4.1c.7 1 1.7 3.1 2.1 6.9H9.9c.4-3.8 1.4-5.9 2.1-6.9ZM4.5 13h3.1c.2 1.9.6 3.6 1.1 5A8.04 8.04 0 0 1 4.5 13Zm3.1-2H4.5A8.04 8.04 0 0 1 8.7 6a15.7 15.7 0 0 0-1.1 5ZM12 19.9c-.7-1-1.7-3.1-2.1-6.9h4.2c-.4 3.8-1.4 5.9-2.1 6.9Zm3.3-1.9c.5-1.4.9-3.1 1.1-5h3.1a8.04 8.04 0 0 1-4.2 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.5 9h-3.1a15.7 15.7 0 0 0-1.1-5A8.04 8.04 0 0 1 19.5 11ZM12 4.1c.7 1 1.7 3.1 2.1 6.9H9.9c.4-3.8 1.4-5.9 2.1-6.9ZM4.5 13h3.1c.2 1.9.6 3.6 1.1 5A8.04 8.04 0 0 1 4.5 13Zm3.1-2H4.5A8.04 8.04 0 0 1 8.7 6a15.7 15.7 0 0 0-1.1 5ZM12 19.9c-.7-1-1.7-3.1-2.1-6.9h4.2c-.4 3.8-1.4 5.9-2.1 6.9Zm3.3-1.9c.5-1.4.9-3.1 1.1-5h3.1a8.04 8.04 0 0 1-4.2 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-header .language-switch span {
    color: #071a3a;
    font-size: 13px;
    line-height: 1;
}

.site-header .language-switch em {
    width: 7px;
    height: 7px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.site-header .language-switch[open] summary,
.site-header .language-switch summary:hover,
.exact-lang-btn:hover {
    color: #1260f6;
    border-color: #9ec0ff;
    background: #fff;
}

.site-header .language-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 120;
    min-width: 132px;
    padding: 7px;
    border: 1px solid #d7e4f5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(13, 35, 74, .14);
}

.site-header .language-menu a {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    color: #243652;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 850;
}

.site-header .language-menu a:hover,
.site-header .language-menu a.active {
    color: #1260f6;
    background: #f1f6ff;
}

.exact-lang-btn {
    min-width: 82px;
    color: #1260f6;
}

@media (max-width: 1460px) {
    .site-header .container.nav-wrap,
    .exact-center-nav {
        grid-template-columns: 192px minmax(0, 1fr) 260px;
        gap: 16px;
    }

    .site-header .main-nav,
    .exact-center-menu {
        gap: 18px;
        font-size: 14px;
    }
}

.site-header .container.nav-wrap,
.exact-center-nav {
    grid-template-columns: 210px minmax(0, 1fr) 320px;
}

html[lang="en"] .home-card-title-row h2 {
    font-size: 24px;
    line-height: 1.16;
}

html[lang="en"] .home-card-head {
    gap: 10px;
}

html[lang="en"] .home-card-head > a {
    flex: 0 0 auto;
}

.home-card-grid.no-news {
    grid-template-columns: minmax(360px, 1.08fr) minmax(360px, 1.08fr) minmax(320px, .92fr);
}

/* Approved compact homepage mockup: smaller hero, stronger middle content. */
.home-hero {
    min-height: 0;
    padding: 14px 0 0;
    border-bottom: 1px solid #dce6f5;
}

.home-hero-grid {
    grid-template-columns: 465px minmax(0, 1fr);
    gap: 30px;
    align-items: center;
    min-height: 438px;
    padding: 0;
}

.home-hero-copy {
    padding-top: 0;
}

.home-badge {
    min-height: 32px;
    padding: 0 15px;
    font-size: 13px;
}

.home-badge span {
    width: 20px;
    height: 20px;
}

.home-hero h1 {
    margin: 18px 0 12px;
    font-size: 48px;
    line-height: 1.13;
}

.home-lead {
    max-width: 430px;
    font-size: 15px;
    line-height: 1.72;
}

.home-price {
    width: 236px;
    min-height: 74px;
    gap: 12px;
    margin: 16px 0 16px;
    padding: 12px 16px;
}

.home-price strong {
    font-size: 52px;
}

.home-price span {
    font-size: 19px;
}

.home-price span small {
    margin-top: 6px;
    font-size: 11px;
}

.home-actions {
    max-width: 376px;
    gap: 14px;
}

.home-actions .primary-btn,
.home-actions .outline-btn {
    min-height: 46px;
    font-size: 17px;
}

.home-proof-row {
    max-width: 500px;
    gap: 13px;
    margin-top: 24px;
}

.home-proof-row div {
    grid-template-columns: 30px 1fr;
    column-gap: 8px;
}

.home-proof-row i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.home-proof-row b {
    font-size: 14px;
}

.home-proof-row span {
    font-size: 12px;
}

.home-console-wrap {
    padding-top: 10px;
}

.home-console {
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 354px;
    border-radius: 18px;
    transform: rotate(-3deg) skewX(-1.4deg) translateX(4px);
    box-shadow: 0 22px 44px rgba(15, 37, 78, .2), 10px 10px 0 rgba(22, 93, 255, .07);
}

.console-sidebar {
    padding: 18px 11px;
}

.console-sidebar span {
    min-height: 25px;
    margin-bottom: 7px;
    padding: 7px 9px;
}

.console-main {
    padding: 14px 18px 16px;
}

.console-topbar {
    margin-bottom: 8px;
}

.console-title {
    margin-bottom: 10px;
}

.console-metrics {
    gap: 8px;
    margin-bottom: 10px;
}

.console-metrics article {
    min-height: 54px;
    padding: 10px;
}

.console-content {
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 10px;
}

.console-chart-card {
    padding: 11px 12px;
}

.console-chart {
    height: 126px;
}

.console-platforms {
    min-height: 172px;
    padding: 12px;
}

.console-platforms p {
    margin-top: 7px;
}

.console-bottom-panels {
    gap: 10px;
    margin-top: 10px;
}

.console-bottom-panels article {
    min-height: 72px;
    padding: 10px 12px;
}

.console-bottom-panels dl {
    margin-top: 9px;
    gap: 7px 9px;
}

.console-tutorial-unlock {
    grid-template-columns: 60px 1fr;
    gap: 11px;
}

.console-tutorial-unlock > i {
    width: 44px;
    height: 44px;
}

.home-overview {
    padding: 12px 0 18px;
    background:
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.home-card-grid {
    grid-template-columns: 1.06fr 1.02fr 1fr 1.08fr;
    gap: 16px;
    align-items: stretch;
}

.home-card {
    min-height: 262px;
    padding: 20px 22px;
    border-color: #d5e2f2;
    box-shadow: 0 16px 36px rgba(26, 54, 101, .075);
}

.home-card-head {
    min-height: 58px;
    margin-bottom: 16px;
}

.home-card h2 {
    font-size: 23px;
}

.home-card p {
    font-size: 12px;
}

.home-lessons {
    gap: 10px;
    margin-bottom: 14px;
}

.home-lessons a {
    grid-template-columns: 54px 1fr auto;
    min-height: 42px;
    padding: 6px 10px 6px 6px;
}

.home-lessons .textless-lock-icon {
    width: 44px;
    height: 32px;
}

.home-tutorial-card .primary-btn.block {
    min-height: 38px;
}

.home-agent-form {
    min-height: 48px;
    margin-top: 20px;
}

.home-agent-form input {
    min-height: 48px;
}

.home-agent-form button {
    min-height: 48px;
}

.home-agent-icons {
    gap: 12px;
    margin-top: 24px;
}

.home-agent-icons .home-agent-icon {
    width: 38px;
    height: 38px;
    background-size: 23px 23px;
}

.home-timeline {
    min-height: 176px;
}

.home-timeline a {
    min-height: 52px;
    padding: 0 0 14px 24px;
}

.home-news-list {
    gap: 12px;
}

.home-news-list a {
    grid-template-columns: 82px 1fr;
    min-height: 66px;
}

.home-news-thumb {
    height: 52px;
}

.home-benefits {
    padding: 0 0 26px;
}

.home-benefits-strip {
    min-height: 78px;
    padding: 14px 18px;
}

/* Pixel-target homepage pass: match the approved preview more closely. */
.home-hero {
    padding: 12px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 91% 45%, rgba(22, 93, 255, .11), transparent 25%),
        linear-gradient(125deg, rgba(235, 243, 255, .76) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.home-hero-grid {
    grid-template-columns: 600px minmax(0, 1fr);
    gap: 34px;
    min-height: 404px;
}

.home-hero-copy {
    padding-top: 26px;
}

.home-badge {
    min-height: 34px;
    padding: 0 17px;
}

.home-hero h1 {
    margin: 28px 0 18px;
    font-size: 50px;
    line-height: 1.1;
    white-space: nowrap;
}

.home-hero h1 span {
    display: inline;
}

.home-lead {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.75;
}

.home-price {
    display: inline-flex;
    width: 230px;
    min-height: 82px;
    margin: 24px 20px 0 0;
    vertical-align: top;
}

.home-actions {
    display: inline-grid;
    grid-template-columns: 185px 185px;
    max-width: none;
    margin-top: 24px;
    vertical-align: top;
}

.home-actions .primary-btn,
.home-actions .outline-btn {
    min-height: 52px;
    border-radius: 8px;
}

.home-proof-row {
    max-width: 560px;
    margin-top: 26px;
}

.home-console-wrap {
    padding-top: 24px;
    perspective: 1500px;
}

.home-console {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 332px;
    border: 1px solid rgba(188, 207, 238, .95);
    background: #fff;
    transform: rotate(3.2deg) skewX(-1deg) translateX(-4px);
    box-shadow: 0 28px 48px rgba(26, 66, 135, .16), 10px 10px 0 rgba(22, 93, 255, .08);
}

.console-sidebar {
    background: linear-gradient(180deg, #07275a, #061b3d);
}

.console-main {
    background:
        radial-gradient(circle at 88% 22%, rgba(22, 93, 255, .08), transparent 24%),
        linear-gradient(180deg, #ffffff, #f7faff);
}

.console-title,
.console-card-head b,
.console-side b,
.console-bottom-panels b {
    color: transparent !important;
}

.console-metrics article,
.console-chart-card,
.console-side article,
.console-bottom-panels article {
    border-color: #e3ebf7;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 22px rgba(31, 57, 101, .045);
}

.console-metrics b:before {
    background: #d7e2f5;
}

.console-chart {
    height: 116px;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 27px, rgba(153, 172, 205, .13) 28px),
        linear-gradient(180deg, #fff, #fbfdff);
}

.console-chart svg path:nth-of-type(2) {
    stroke-width: 3;
}

.console-platforms {
    min-height: 154px;
}

.console-bottom-panels {
    grid-template-columns: 1fr 1fr;
}

.home-overview {
    padding: 10px 0 18px;
}

.home-card {
    min-height: 330px;
    padding: 24px 24px;
}

.home-card-head {
    min-height: 64px;
    margin-bottom: 18px;
}

.home-card h2 {
    font-size: 25px;
}

.home-card p {
    font-size: 13px;
}

.home-lessons a {
    min-height: 48px;
}

.home-lessons .textless-lock-icon {
    width: 48px;
    height: 36px;
}

.home-tutorial-card .primary-btn.block {
    min-height: 50px;
    margin-top: 18px;
}

.home-agent-form,
.home-agent-form input,
.home-agent-form button {
    min-height: 52px;
}

.home-agent-icons {
    margin-top: 34px;
}

.home-agent-icons .home-agent-icon {
    width: 44px;
    height: 44px;
    background-size: 25px 25px;
}

.home-timeline {
    min-height: 238px;
}

.home-timeline a {
    min-height: 62px;
}

.home-news-list {
    gap: 16px;
}

.home-news-list a {
    min-height: 78px;
    grid-template-columns: 104px 1fr;
}

.home-news-thumb {
    height: 68px;
}

/* Final homepage match pass: wide desktop layout from the approved mockup. */
.home-hero .container,
.home-overview .container,
.home-benefits .container {
    width: min(1496px, calc(100% - 104px));
    max-width: none;
}

.home-hero {
    padding: 28px 0 0;
    border-bottom: 1px solid #dbe6f5;
    background:
        radial-gradient(circle at 51% 26%, rgba(22, 93, 255, .13) 0 11px, transparent 12px),
        radial-gradient(circle at 95% 35%, rgba(22, 93, 255, .18) 0 12px, transparent 13px),
        radial-gradient(ellipse at 88% 46%, rgba(22, 93, 255, .11), transparent 38%),
        linear-gradient(112deg, #fff 0%, #fff 47%, #f4f8ff 100%);
}

.home-hero:before {
    left: auto;
    right: -110px;
    bottom: 6px;
    width: 690px;
    height: 390px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(22, 93, 255, .08), transparent 70%);
    transform: rotate(-12deg);
}

.home-hero-grid {
    grid-template-columns: 680px minmax(0, 1fr);
    gap: 42px;
    align-items: start;
    min-height: 472px;
}

.home-hero-copy {
    padding-top: 18px;
}

.home-badge {
    min-height: 35px;
    padding: 0 16px;
    gap: 9px;
    font-size: 14px;
}

.home-hero h1 {
    width: auto;
    margin: 36px 0 22px;
    font-size: 64px;
    line-height: 1.08;
    white-space: nowrap;
}

.home-hero h1 span {
    display: inline;
}

.home-lead {
    max-width: 610px;
    font-size: 16px;
    line-height: 1.8;
}

.home-price {
    width: 240px;
    min-height: 106px;
    align-items: center;
    margin: 34px 24px 0 0;
    padding: 12px 26px 10px;
    border: 1px solid rgba(211, 161, 49, .52);
    border-radius: 8px;
    background: rgba(255, 253, 248, .94);
    box-shadow: none;
}

.home-price strong {
    font-size: 58px;
}

.home-price span {
    padding-bottom: 0;
    font-size: 20px;
}

.home-price span small {
    position: relative;
    padding-left: 18px;
    color: #263a59;
    font-size: 12px;
    font-weight: 800;
}

.home-price span small:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 12px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg width='14' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 1.2 12.2 3.4v4.2c0 3.4-2 5.8-5.2 7.2-3.2-1.4-5.2-3.8-5.2-7.2V3.4L7 1.2Z' stroke='%23d29b22' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='m4.6 7.6 1.5 1.5 3.3-3.5' stroke='%23d29b22' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 14px no-repeat;
}

.home-actions {
    grid-template-columns: 188px 188px;
    gap: 20px;
    margin-top: 44px;
}

.home-actions .primary-btn,
.home-actions .outline-btn {
    min-height: 52px;
    border-radius: 8px;
    font-size: 17px;
}

.home-proof-row {
    max-width: 650px;
    gap: 26px;
    margin-top: 58px;
}

.home-proof-row div {
    grid-template-columns: 34px 1fr;
}

.home-proof-row i {
    width: 32px;
    height: 32px;
}

.home-console-wrap {
    padding-top: 6px;
}

.home-console {
    width: 690px;
    min-height: 378px;
    grid-template-columns: 124px minmax(0, 1fr);
    border-radius: 18px;
    transform: rotate(4.4deg) skewX(-1.2deg) translate(-8px, 8px);
    box-shadow: 0 28px 54px rgba(20, 50, 104, .18), 12px 12px 0 rgba(22, 93, 255, .08);
}

.console-main {
    padding: 18px 20px 16px;
}

.console-content {
    grid-template-columns: minmax(0, 1fr) 180px;
}

.console-chart {
    height: 130px;
}

.console-bottom-panels article {
    min-height: 70px;
}

.home-overview {
    padding: 0 0 34px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.home-card-grid {
    grid-template-columns: 1fr 1fr .82fr 1.1fr;
    gap: 22px;
}

.home-card {
    min-height: 368px;
    padding: 26px 22px 24px;
    border-color: #d7e4f4;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(26, 54, 101, .07);
}

.home-card-head {
    min-height: 66px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.home-card-title-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.home-card-title-icon {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-block;
    border-radius: 50%;
    background: #1260f6;
    box-shadow: 0 8px 20px rgba(18, 96, 246, .18);
}

.home-card-title-icon:before,
.home-card-title-icon:after {
    content: "";
    position: absolute;
}

.home-card-title-icon.video:before {
    left: 13px;
    top: 10px;
    border-left: 11px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.home-card-title-icon.agent {
    background: #d19a18;
    box-shadow: 0 8px 20px rgba(209, 154, 24, .18);
}

.home-card-title-icon.agent:before {
    left: 12px;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.home-card-title-icon.agent:after {
    left: 8px;
    top: 19px;
    width: 18px;
    height: 9px;
    border-radius: 12px 12px 4px 4px;
    background: #fff;
}

.home-card-title-icon.log {
    border-radius: 7px;
}

.home-card-title-icon.log:before {
    left: 9px;
    top: 7px;
    width: 16px;
    height: 20px;
    border-radius: 3px;
    background: #fff;
}

.home-card-title-icon.log:after {
    left: 12px;
    top: 13px;
    width: 10px;
    height: 2px;
    border-radius: 999px;
    background: #1260f6;
    box-shadow: 0 5px 0 #1260f6, 0 10px 0 #1260f6;
}

.home-card-title-icon.news:before {
    left: 8px;
    top: 11px;
    width: 12px;
    height: 12px;
    background: #fff;
    clip-path: polygon(0 33%, 100% 0, 100% 100%, 0 67%);
}

.home-card-title-icon.news:after {
    left: 20px;
    top: 8px;
    width: 5px;
    height: 18px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 6px 4px 0 -2px #fff, 6px 10px 0 -2px #fff;
}

.home-card h2 {
    margin-bottom: 8px;
    font-size: 25px;
}

.home-card p {
    font-size: 13px;
    line-height: 1.6;
}

.home-card-head > a {
    min-height: 30px;
    padding: 6px 14px;
    font-size: 12px;
}

.home-lessons {
    gap: 10px;
    margin-bottom: 18px;
}

.home-lessons a {
    grid-template-columns: 54px 1fr auto;
    min-height: 50px;
    padding: 6px 12px 6px 7px;
    border: 1px solid rgba(221, 230, 244, .72);
}

.home-tutorial-card .primary-btn.block {
    min-height: 52px;
    margin-top: 18px;
}

.home-agent-form,
.home-agent-form input,
.home-agent-form button {
    min-height: 52px;
}

.home-agent-form {
    margin-top: 28px;
}

.home-agent-form button {
    background: linear-gradient(135deg, #d8a12a, #bc800b);
}

.home-agent-icons {
    gap: 20px;
    margin-top: 42px;
}

.home-agent-icons .home-agent-icon {
    width: 50px;
    height: 50px;
}

.home-agent-icon.official:before {
    left: 14px;
    top: 10px;
}

.home-agent-icon.official:after {
    left: 18px;
    top: 18px;
}

.home-agent-icon.reliable:before {
    left: 16px;
    top: 11px;
}

.home-agent-icon.reliable:after {
    left: 13px;
    top: 27px;
}

.home-agent-icon.clear:before {
    left: 14px;
    top: 11px;
}

.home-agent-icon.clear:after {
    left: 18px;
    top: 17px;
}

.home-agent-icon.secure:before {
    left: 15px;
    top: 10px;
}

.home-agent-icon.secure:after {
    left: 20px;
    top: 18px;
}

.home-timeline {
    min-height: 252px;
    padding-left: 20px;
}

.home-timeline a {
    min-height: 66px;
    padding: 0 0 16px 26px;
}

.home-news-list {
    gap: 20px;
}

.home-news-list a {
    grid-template-columns: 126px 1fr;
    min-height: 82px;
}

.home-news-thumb {
    height: 74px;
}

/* Tail override: final hero illustration size. */
.home-console {
    width: 650px;
    height: 340px;
    min-height: 0;
    grid-template-columns: 104px minmax(0, 1fr);
}

.console-main {
    padding: 12px 16px;
}

.console-metrics article {
    min-height: 44px;
}

.console-chart {
    height: 94px;
}

.console-platforms {
    min-height: 122px;
}

.console-bottom-panels article {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Tail override: final hero illustration size. */
.home-console {
    width: 650px;
    height: 340px;
    min-height: 0;
    grid-template-columns: 104px minmax(0, 1fr);
}

.console-main {
    padding: 12px 16px;
}

.console-metrics article {
    min-height: 44px;
}

.console-chart {
    height: 94px;
}

.console-platforms {
    min-height: 122px;
}

.console-bottom-panels article {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Keep the hero purchase controls on one row like the approved mockup. */
.home-hero-grid {
    grid-template-columns: 740px minmax(0, 1fr);
    gap: 34px;
}

.home-actions {
    grid-template-columns: 188px 188px;
}

/* Final proportional correction for the hero illustration and card interiors. */
.home-console-wrap {
    padding-top: 24px;
}

.home-console {
    width: 650px;
    height: 340px;
    grid-template-columns: 104px minmax(0, 1fr);
}

.console-main {
    padding: 12px 16px;
}

.console-metrics article {
    min-height: 44px;
}

.console-content {
    grid-template-columns: minmax(0, 1fr) 160px;
}

.console-chart {
    height: 94px;
}

.console-platforms {
    min-height: 122px;
}

.console-bottom-panels {
    margin-top: 8px;
}

.console-bottom-panels article {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.home-card-head {
    min-height: 58px;
    margin-bottom: 14px;
}

.home-lessons a {
    min-height: 46px;
}

.home-tutorial-card .primary-btn.block {
    min-height: 48px;
    margin-top: 12px;
}

.home-benefits {
    padding: 0 0 30px;
    background: #f8fbff;
}

.home-benefits-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 88px;
    padding: 18px 26px;
    border-radius: 8px;
}

.home-benefits-strip article {
    justify-content: center;
}

/* Final homepage height tuning against the approved 1600px desktop mockup. */
.home-hero-copy {
    padding-left: 38px;
}

.home-hero-grid {
    min-height: 396px;
}

.home-proof-row {
    display: none;
}

.home-console {
    width: 650px;
    height: 340px;
    min-height: 0;
    grid-template-columns: 104px minmax(0, 1fr);
}

.console-sidebar {
    padding-top: 16px;
}

.console-sidebar span {
    min-height: 22px;
    margin-bottom: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.console-main {
    padding: 12px 16px;
}

.console-metrics article {
    min-height: 44px;
}

.console-chart {
    height: 94px;
}

.console-platforms {
    min-height: 122px;
}

.console-bottom-panels article {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.home-card-grid {
    align-items: start;
}

.home-card {
    height: 368px;
    min-height: 0;
    overflow: hidden;
}

.home-news-list {
    gap: 16px;
}

.home-news-list a {
    min-height: 74px;
    grid-template-columns: 126px 1fr;
}

.home-news-thumb {
    height: 74px;
}

/* Homepage overflow guard: keep desktop modules readable without clipping. */
.home-hero {
    overflow: hidden;
}

.home-hero-grid {
    grid-template-columns: minmax(610px, 700px) minmax(560px, 1fr);
    min-height: 396px;
    gap: 26px;
}

.home-hero-copy {
    min-width: 0;
}

.home-hero h1 {
    max-width: 100%;
    width: auto;
    font-size: 64px;
}

.home-lead {
    max-width: 520px;
}

.home-price {
    width: 240px;
    margin-right: 20px;
}

.home-actions {
    grid-template-columns: 188px 188px;
    gap: 18px;
}

.home-console-wrap {
    min-width: 0;
    overflow: visible;
}

.home-console {
    width: min(650px, 100%);
    height: 330px;
    transform: rotate(3.4deg) skewX(-1deg) translate(-4px, 10px);
}

.home-overview {
    overflow: visible;
}

.home-card-grid {
    grid-template-columns: minmax(330px, 1.05fr) minmax(330px, 1.05fr) minmax(280px, .86fr) minmax(360px, 1.12fr);
    gap: 18px;
    align-items: stretch;
}

.home-card {
    height: auto;
    min-height: 386px;
    overflow: visible;
    padding: 24px 22px 22px;
}

.home-card-head {
    min-height: 54px;
    margin-bottom: 12px;
}

.home-card-title-row {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
}

.home-card h2 {
    font-size: 24px;
    white-space: nowrap;
}

.home-card p {
    line-height: 1.55;
}

.home-lessons {
    gap: 8px;
    margin-bottom: 12px;
}

.home-lessons a {
    min-height: 45px;
    grid-template-columns: 52px minmax(0, 1fr) 42px;
}

.home-lessons b,
.home-news-list b,
.home-news-list p {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-tutorial-card .primary-btn.block {
    min-height: 48px;
    margin-top: 10px;
}

.home-agent-form {
    margin-top: 24px;
}

.home-agent-icons {
    gap: 12px;
    margin-top: 34px;
}

.home-agent-icons .home-agent-icon {
    width: 46px;
    height: 46px;
}

.home-timeline {
    min-height: 0;
}

.home-timeline a {
    min-height: 61px;
    padding-bottom: 12px;
}

.home-news-list {
    gap: 14px;
}

.home-news-list a {
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 76px;
}

.home-news-thumb {
    width: 118px;
    height: 72px;
}

.home-benefits-strip {
    gap: 18px;
}

.home-benefits-strip article {
    min-width: 0;
}

.home-benefits-strip b,
.home-benefits-strip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Homepage price/title polish. */
.home-hero h1 {
    color: #1260f6;
}

.home-price {
    width: 260px;
    gap: 10px;
    padding: 10px 18px;
    align-items: center;
    overflow: hidden;
}

.home-price strong {
    flex: 0 0 auto;
    font-size: 56px;
}

.home-price span {
    min-width: 0;
    display: block;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
}

.home-price span small {
    max-width: 136px;
    display: block;
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
}

/* Homepage purchase row alignment and section divider cleanup. */
.home-hero {
    border-bottom: 0;
}

.home-overview {
    border-top: 0;
}

.home-purchase-row {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    margin-top: 34px;
    flex-wrap: nowrap;
}

.home-purchase-row .home-price {
    flex: 0 0 250px;
    width: 250px;
    min-height: 106px;
    margin: 0;
}

.home-purchase-row .home-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 168px 168px;
    gap: 14px;
    margin: 0;
}

.home-purchase-row .home-actions .primary-btn,
.home-purchase-row .home-actions .outline-btn {
    min-width: 0;
}

html,
body {
    overflow-x: hidden;
}

@media (max-width: 1500px) {
    .home-hero .container,
    .home-overview .container,
    .home-benefits .container {
        width: min(1360px, calc(100% - 80px));
    }

    .home-hero-grid {
        grid-template-columns: 660px minmax(0, 1fr);
        gap: 42px;
    }

    .home-console {
        width: min(520px, 100%);
        transform: rotate(3deg) skewX(-.8deg) translate(24px, 12px);
    }

    .home-card-grid {
        grid-template-columns: minmax(300px, 1.05fr) minmax(300px, 1.05fr) minmax(260px, .86fr) minmax(320px, 1.12fr);
        gap: 16px;
    }
}

/* Product introduction page: approved pure information mockup. */
.product-showcase-hero,
.product-showcase-page {
    background: #fff;
}

.product-showcase-hero .container,
.product-showcase-page .container {
    width: min(1424px, calc(100% - 104px));
    max-width: none;
}

.product-showcase-hero {
    position: relative;
    overflow: hidden;
    padding: 66px 0 26px;
    background:
        radial-gradient(circle at 43% 42%, rgba(18, 96, 246, .12) 0 11px, transparent 12px),
        radial-gradient(circle at 90% 34%, rgba(18, 96, 246, .11) 0 13px, transparent 14px),
        linear-gradient(112deg, #fff 0%, #fff 47%, #f3f7ff 100%);
}

.product-showcase-hero:before {
    content: "";
    position: absolute;
    right: -120px;
    bottom: 8px;
    width: 710px;
    height: 370px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(18, 96, 246, .1), transparent 70%);
    transform: rotate(-10deg);
}

.product-showcase-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    gap: 42px;
    align-items: center;
    min-height: 310px;
}

.product-showcase-copy {
    min-width: 0;
}

.product-showcase-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 18px;
    color: #b28116;
    border: 1px solid rgba(211, 161, 49, .54);
    border-radius: 999px;
    background: rgba(255, 251, 241, .94);
    font-size: 15px;
    font-weight: 900;
}

.product-showcase-badge i {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8a12a, #bc800b);
}

.product-showcase-badge i:before {
    content: "";
    position: absolute;
    inset: 5px;
    background: #fff;
    clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 57%, 81% 100%, 50% 74%, 19% 100%, 31% 57%, 0 35%, 38% 35%);
}

.product-showcase-hero h1 {
    margin: 32px 0 20px;
    color: #071735;
    font-size: 74px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

.product-showcase-hero p {
    max-width: 560px;
    color: #344766;
    font-size: 17px;
    line-height: 1.8;
}

.product-showcase-visual {
    min-width: 0;
    height: 330px;
}

.product-visual-stage {
    position: relative;
    height: 100%;
}

.product-visual-stage:before {
    content: "";
    position: absolute;
    left: 16px;
    right: 0;
    bottom: 2px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(18, 96, 246, .12), transparent 70%);
}

.product-dashboard-art {
    position: absolute;
    right: 106px;
    top: 2px;
    width: 610px;
    height: 292px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #c9d9f4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 58px rgba(22, 69, 144, .16), 12px 12px 0 rgba(18, 96, 246, .08);
    transform: rotate(3deg) skewX(-1deg);
}

.product-dashboard-art aside {
    padding: 18px 13px;
    background: linear-gradient(180deg, #08275a, #061b3f);
}

.product-dashboard-art aside i {
    display: block;
    height: 9px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(213, 226, 249, .55);
}

.product-dashboard-art aside i:first-child {
    width: 52px;
    background: rgba(255, 255, 255, .78);
}

.product-dashboard-art aside i.active {
    width: 78px;
    height: 28px;
    background: #1260f6;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.product-dashboard-art section {
    min-width: 0;
    padding: 15px 18px 16px;
    background:
        radial-gradient(circle at 88% 20%, rgba(18, 96, 246, .08), transparent 22%),
        linear-gradient(180deg, #fff, #f8fbff);
}

.product-art-top {
    display: grid;
    grid-template-columns: 24px 1fr 1fr 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.product-art-top i,
.product-art-top span,
.product-art-metrics i,
.product-art-bottom i {
    border-radius: 8px;
    background: #dce7f8;
}

.product-art-top i {
    width: 24px;
    height: 24px;
}

.product-art-top span {
    height: 8px;
}

.product-art-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.product-art-metrics i {
    height: 48px;
    border: 1px solid #e4ebf7;
    background:
        linear-gradient(90deg, #d6e1f4 0 46px, transparent 46px) 12px 13px / 80px 7px no-repeat,
        linear-gradient(90deg, rgba(72, 190, 139, .75) 0 24px, transparent 24px) right 12px bottom 12px / 54px 6px no-repeat,
        #fff;
}

.product-art-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 172px;
    gap: 12px;
}

.product-art-chart,
.product-art-donut,
.product-art-bottom i {
    border: 1px solid #e4ebf7;
    background: #fff;
    box-shadow: 0 10px 24px rgba(31, 57, 101, .045);
}

.product-art-chart {
    height: 126px;
    padding: 12px;
    border-radius: 9px;
}

.product-art-chart svg {
    width: 100%;
    height: 100%;
}

.product-art-donut {
    height: 126px;
    display: grid;
    place-items: center;
    border-radius: 9px;
}

.product-art-donut i {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(#1260f6 0 66%, #d6a23a 66% 100%);
    box-shadow: inset 0 0 0 18px #fff;
}

.product-art-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr .8fr;
    gap: 10px;
    margin-top: 12px;
}

.product-art-bottom i {
    height: 52px;
}

.product-user-tile {
    position: absolute;
    right: 8px;
    bottom: 26px;
    width: 136px;
    height: 126px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: linear-gradient(135deg, #3e91ff, #1260f6);
    box-shadow: 0 28px 46px rgba(18, 96, 246, .24), 12px 10px 0 rgba(18, 96, 246, .15);
}

.product-user-tile i {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 18px;
}

.product-user-tile i:before {
    content: "";
    position: absolute;
    left: 24px;
    top: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
}

.product-user-tile i:after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 30px;
    border-radius: 30px 30px 12px 12px;
    background: #fff;
}

.product-cube {
    position: absolute;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #eef5ff, #c8dcff);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    box-shadow: 0 14px 28px rgba(18, 96, 246, .13);
}

.product-cube.one {
    left: 38px;
    top: 144px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #60a5ff, #1260f6);
}

.product-cube.two {
    right: 68px;
    top: 70px;
    width: 60px;
    height: 60px;
}

.product-showcase-page {
    padding: 12px 0 38px;
}

.product-feature-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.product-feature-row article,
.product-platform-panel,
.product-audience-row article,
.product-summary-strip {
    border: 1px solid #d8e4f5;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 38px rgba(26, 54, 101, .065);
}

.product-feature-row article {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    min-height: 178px;
    padding: 26px 28px;
}

.product-feature-icon {
    position: relative;
    width: 96px;
    height: 96px;
    display: block;
    border-radius: 50%;
    background: linear-gradient(180deg, #eef5ff, #fff);
    box-shadow: inset 0 0 0 12px rgba(18, 96, 246, .04), 0 18px 28px rgba(18, 96, 246, .13);
}

.product-feature-icon:before,
.product-feature-icon:after {
    content: "";
    position: absolute;
}

.product-feature-icon.target:before {
    inset: 17px;
    border: 9px solid #1260f6;
    border-radius: 50%;
    box-shadow: inset 0 0 0 9px #fff, inset 0 0 0 18px #1260f6;
}

.product-feature-icon.target:after {
    right: 7px;
    top: 14px;
    width: 38px;
    height: 38px;
    background: #1260f6;
    clip-path: polygon(47% 0, 68% 20%, 100% 15%, 84% 45%, 100% 67%, 68% 70%, 47% 100%, 38% 64%, 0 55%, 34% 35%);
}

.product-feature-icon.stack:before {
    left: 20px;
    top: 24px;
    width: 56px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4ca0ff, #1260f6);
    box-shadow: 0 16px 0 rgba(18, 96, 246, .48), 0 32px 0 rgba(18, 96, 246, .24);
    transform: skewY(-18deg);
}

.product-feature-icon.shield:before {
    left: 24px;
    top: 15px;
    width: 48px;
    height: 62px;
    background: linear-gradient(135deg, #d8a12a, #bc800b);
    clip-path: polygon(50% 0, 92% 16%, 84% 70%, 50% 100%, 16% 70%, 8% 16%);
}

.product-feature-icon.shield:after {
    left: 40px;
    top: 38px;
    width: 18px;
    height: 10px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    transform: rotate(-45deg);
}

.product-feature-row h2,
.product-platform-panel h2,
.product-audience-row h2 {
    margin: 0 0 12px;
    color: #071735;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 900;
}

.product-feature-row h2:after,
.product-platform-panel h2:after {
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: #1260f6;
}

.product-feature-row p,
.product-audience-row p {
    color: #4a5f7b;
    font-size: 14px;
    line-height: 1.85;
}

.product-platform-panel {
    min-height: 112px;
    padding: 22px 28px 24px;
    margin-bottom: 16px;
}

.product-platform-pills {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 14px;
}

.product-platform-pills span {
    min-width: 0;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #13294b;
    border: 1px solid #d8e4f5;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.platform-dot {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    background: #1260f6;
}

.platform-dot.gold { background: #f2b21d; border-radius: 6px; }
.platform-dot.purple { background: #7057ff; }
.platform-dot.ink { background: #111827; border-radius: 4px; }
.platform-dot.pink { background: linear-gradient(135deg, #ff4b9c, #6b5bff); }
.platform-dot.cyan { background: #4cc9d8; border-radius: 6px; }
.platform-dot.violet { background: #7c3aed; border-radius: 7px; }
.platform-dot.sky { background: #0ea5e9; clip-path: polygon(58% 0, 100% 0, 64% 44%, 90% 44%, 34% 100%, 48% 56%, 18% 56%); }
.platform-dot.grape { background: #805ad5; }

.product-audience-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.product-audience-row article {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    min-height: 136px;
    padding: 24px 28px;
}

.product-audience-icon {
    position: relative;
    width: 76px;
    height: 76px;
    display: block;
    border-radius: 14px;
    background: linear-gradient(135deg, #4c9eff, #1260f6);
    box-shadow: 0 16px 30px rgba(18, 96, 246, .2);
}

.product-audience-icon:before,
.product-audience-icon:after {
    content: "";
    position: absolute;
    background: #fff;
}

.product-audience-icon.team:before {
    left: 18px;
    top: 18px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 22px 0 0 #fff;
}

.product-audience-icon.team:after {
    left: 13px;
    right: 13px;
    bottom: 17px;
    height: 22px;
    border-radius: 22px 22px 8px 8px;
}

.product-audience-icon.account:before {
    left: 28px;
    top: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.product-audience-icon.account:after {
    left: 17px;
    bottom: 15px;
    width: 42px;
    height: 24px;
    border-radius: 24px 24px 9px 9px;
    box-shadow: 18px -5px 0 -7px #fff, 18px 4px 0 -7px #fff;
}

.product-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    min-height: 100px;
    padding: 18px 22px;
}

.product-summary-strip article {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-width: 0;
    padding: 0 26px;
    border-right: 1px solid #d8e4f5;
}

.product-summary-strip article:last-child {
    border-right: 0;
}

.product-summary-strip b {
    display: block;
    margin-bottom: 8px;
    color: #092052;
    font-size: 21px;
    font-weight: 900;
}

.product-summary-strip span {
    color: #5a6c86;
    font-size: 14px;
    line-height: 1.6;
}

.product-summary-icon {
    position: relative;
    width: 52px;
    height: 52px;
    display: block;
    border: 2px solid #bcd0f0;
    border-radius: 10px;
    background: #fff;
}

.product-summary-icon:before,
.product-summary-icon:after {
    content: "";
    position: absolute;
}

.product-summary-icon.face:before {
    left: 18px;
    top: 9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1260f6;
}

.product-summary-icon.face:after {
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: 17px;
    border-radius: 18px 18px 6px 6px;
    background: #1260f6;
}

.product-summary-icon.flow:before {
    left: 12px;
    top: 10px;
    width: 28px;
    height: 6px;
    border-radius: 999px;
    background: #1260f6;
    box-shadow: 0 13px 0 #1260f6, 0 26px 0 #1260f6;
}

.product-summary-icon.flow:after {
    right: 9px;
    top: 18px;
    width: 9px;
    height: 9px;
    border-right: 3px solid #1260f6;
    border-bottom: 3px solid #1260f6;
    transform: rotate(-45deg);
}

.product-summary-icon.stable:before {
    left: 13px;
    top: 9px;
    width: 26px;
    height: 32px;
    background: #1260f6;
    clip-path: polygon(50% 0, 92% 16%, 84% 70%, 50% 100%, 16% 70%, 8% 16%);
}

.product-summary-icon.stable:after {
    left: 22px;
    top: 22px;
    width: 11px;
    height: 6px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

@media (max-width: 1500px) {
    .product-showcase-hero .container,
    .product-showcase-page .container {
        width: min(1360px, calc(100% - 80px));
    }

    .product-showcase-hero-grid {
        grid-template-columns: 470px minmax(0, 1fr);
        gap: 26px;
    }

    .product-dashboard-art {
        right: 86px;
        width: 570px;
    }

    .product-platform-pills {
        gap: 10px;
    }

    .product-platform-pills span {
        font-size: 14px;
    }
}

/* Product page refinement: tighter hero and platform-specific icons. */
.product-showcase-hero {
    padding: 44px 0 18px;
}

.product-showcase-hero-grid {
    grid-template-columns: 560px minmax(0, 1fr);
    gap: 36px;
    min-height: 286px;
}

.product-showcase-hero h1 {
    margin: 28px 0 18px;
    font-size: 72px;
}

.product-showcase-visual {
    height: 292px;
}

.product-dashboard-art {
    right: 92px;
    top: 0;
    width: 646px;
    height: 268px;
}

.product-dashboard-art aside {
    padding-top: 16px;
}

.product-dashboard-art aside i {
    margin-bottom: 12px;
}

.product-dashboard-art aside i.active {
    height: 26px;
}

.product-art-metrics i {
    height: 42px;
}

.product-art-chart,
.product-art-donut {
    height: 106px;
}

.product-art-bottom i {
    height: 40px;
}

.product-user-tile {
    right: 8px;
    bottom: 12px;
    width: 118px;
    height: 110px;
    border-radius: 22px;
}

.product-cube.one {
    top: 128px;
}

.product-cube.two {
    top: 56px;
}

.product-showcase-page {
    padding-top: 4px;
}

.product-platform-pills {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

.product-platform-pills span {
    gap: 9px;
}

.platform-logo {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(18, 96, 246, .12);
}

.platform-logo:before,
.platform-logo:after {
    content: "";
    position: absolute;
}

.platform-logo.tinder {
    border-radius: 50% 50% 54% 46%;
    background: linear-gradient(135deg, #ff7a45, #ff3158);
}

.platform-logo.tinder:before {
    left: 8px;
    top: 4px;
    width: 9px;
    height: 16px;
    background: #fff;
    border-radius: 10px 10px 12px 12px;
    clip-path: polygon(50% 0, 70% 24%, 88% 42%, 78% 78%, 50% 100%, 22% 78%, 12% 42%, 34% 22%);
}

.platform-logo.bumble {
    border-radius: 50%;
    background: #f5b21a;
}

.platform-logo.bumble:before {
    left: 6px;
    top: 7px;
    width: 12px;
    height: 10px;
    background:
        linear-gradient(#fff, #fff) 0 1px / 12px 2px no-repeat,
        linear-gradient(#fff, #fff) 0 4px / 12px 2px no-repeat,
        linear-gradient(#fff, #fff) 0 7px / 12px 2px no-repeat;
    clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
}

.platform-logo.badoo {
    background: #6d50ff;
}

.platform-logo.badoo:before {
    content: "b";
    position: static;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    font-family: Arial, sans-serif;
}

.platform-logo.hinge {
    background: #111827;
    border-radius: 6px;
}

.platform-logo.hinge:before {
    left: 6px;
    top: 4px;
    width: 4px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 8px 0 0 #fff;
}

.platform-logo.hinge:after {
    left: 8px;
    top: 10px;
    width: 8px;
    height: 4px;
    border-radius: 999px;
    background: #fff;
}

.platform-logo.okcupid {
    border-radius: 8px;
    background: linear-gradient(135deg, #ff4ca0, #6a5cff);
}

.platform-logo.okcupid:before {
    content: "ok";
    position: static;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.platform-logo.boo {
    border-radius: 7px;
    background: #4cc9d8;
}

.platform-logo.boo:before {
    left: 6px;
    top: 5px;
    width: 12px;
    height: 14px;
    border-radius: 7px 7px 5px 5px;
    background: #fff;
}

.platform-logo.boo:after {
    left: 9px;
    top: 10px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #4cc9d8;
    box-shadow: 6px 0 0 #4cc9d8;
}

.platform-logo.hily {
    background: #7c3aed;
    border-radius: 7px;
}

.platform-logo.hily:before {
    content: "hi";
    position: static;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    transform: skewX(-8deg);
}

.platform-logo.happn {
    background: #0ea5e9;
    border-radius: 50%;
}

.platform-logo.happn:before {
    left: 9px;
    top: 4px;
    width: 7px;
    height: 16px;
    background: #fff;
    clip-path: polygon(45% 0, 100% 0, 66% 43%, 100% 43%, 38% 100%, 50% 58%, 0 58%);
}

.platform-logo.meetme {
    background: #805ad5;
    border-radius: 50%;
}

.platform-logo.meetme:before {
    left: 6px;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 8px 0 0 #fff;
}

.platform-logo.meetme:after {
    left: 7px;
    top: 14px;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #fff;
    border-radius: 0 0 12px 12px;
}

@media (max-width: 1500px) {
    .product-showcase-hero {
        padding: 40px 0 16px;
    }

    .product-showcase-hero-grid {
        grid-template-columns: 480px minmax(0, 1fr);
        gap: 24px;
        min-height: 284px;
    }

    .product-showcase-hero h1 {
        font-size: 68px;
    }

    .product-showcase-visual {
        height: 286px;
    }

    .product-dashboard-art {
        right: 76px;
        width: min(570px, calc(100% - 92px));
        height: 254px;
    }

    .product-user-tile {
        width: 108px;
        height: 102px;
        right: 0;
        bottom: 18px;
    }

    .product-platform-pills {
        gap: 9px;
    }

    .platform-logo {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }
}

/* Product hero title aligned with the homepage SmartSwitch title. */
.product-showcase-hero .product-showcase-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 28px 0 18px;
    color: #071735;
    font-size: 64px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

.product-showcase-hero .product-showcase-title span {
    color: #071735;
    font-size: 46px;
    line-height: 1.08;
}

.product-showcase-hero .product-showcase-title em {
    color: #1260f6;
    font-style: normal;
}

/* Product platform icons: polished SVG badges. */
.product-platform-pills span {
    min-height: 50px;
    gap: 11px;
    padding: 0 12px;
}

.platform-logo {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    box-shadow: 0 8px 18px rgba(20, 48, 94, .12);
}

.platform-logo:before,
.platform-logo:after {
    display: none;
}

.platform-logo.tinder {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='6' y1='3' x2='25' y2='27' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF8A3D'/%3E%3Cstop offset='.5' stop-color='%23FF4D6D'/%3E%3Cstop offset='1' stop-color='%23EC1D5B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='30' height='30' rx='11' fill='url(%23g)'/%3E%3Cpath d='M15.4 5.4c2.1 2.2 1.7 4.3 1.1 5.8 1.4-.6 2.3-1.7 2.7-3.2 3 2.3 4.8 5.6 4.8 9.1 0 4.7-3.6 8-8.8 8-4.9 0-8.5-3.2-8.5-7.8 0-3.9 2.4-6.8 4.9-8.9.3 1.8 1 3.2 2.2 4.3.9-2.2.5-4.5 1.6-7.3Z' fill='white'/%3E%3C/svg%3E");
}

.platform-logo.bumble {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='11' fill='%23F6B91D'/%3E%3Cpath d='M10.2 8h9.6l4.8 7-4.8 7h-9.6l-4.8-7 4.8-7Z' fill='white'/%3E%3Cpath d='M11.4 11.6h7.2M10.6 15h8.8M11.4 18.4h7.2' stroke='%23F6B91D' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

.platform-logo.badoo {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='11' fill='%236D50FF'/%3E%3Cpath d='M11 6.4h4.1v6.4c1-1.1 2.4-1.7 4-1.7 3.3 0 5.6 2.6 5.6 6.2 0 3.7-2.5 6.3-6 6.3-1.8 0-3.2-.7-4.1-1.9l-.3 1.5H11V6.4Zm6.7 13.6c1.6 0 2.8-1.1 2.8-2.8s-1.1-2.8-2.8-2.8c-1.6 0-2.8 1.1-2.8 2.8s1.1 2.8 2.8 2.8Z' fill='white'/%3E%3C/svg%3E");
}

.platform-logo.hinge {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='9' fill='%23111827'/%3E%3Cpath d='M9 7v16M21 7v16M9 15h12' stroke='white' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.platform-logo.okcupid {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='5' y1='5' x2='25' y2='25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF3C8A'/%3E%3Cstop offset='.55' stop-color='%238B5CFF'/%3E%3Cstop offset='1' stop-color='%234E7BFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='30' height='30' rx='10' fill='url(%23g)'/%3E%3Ccircle cx='11.2' cy='15' r='5.2' fill='white' opacity='.96'/%3E%3Ccircle cx='18.8' cy='15' r='5.2' fill='white' opacity='.96'/%3E%3Ccircle cx='11.2' cy='15' r='2.1' fill='%23FF3C8A'/%3E%3Ccircle cx='18.8' cy='15' r='2.1' fill='%234E7BFF'/%3E%3C/svg%3E");
}

.platform-logo.boo {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='10' fill='%234CC9D8'/%3E%3Cpath d='M8.2 14.2c0-4.5 2.7-7.4 6.8-7.4s6.8 2.9 6.8 7.4v8.6c0 .6-.7 1-1.2.6l-2.2-1.5-2.1 1.5c-.4.3-.9.3-1.3 0L13 21.9l-2.2 1.5c-.5.4-1.2 0-1.2-.6v-8.6Z' fill='white'/%3E%3Ccircle cx='12.6' cy='14.5' r='1.5' fill='%234CC9D8'/%3E%3Ccircle cx='17.4' cy='14.5' r='1.5' fill='%234CC9D8'/%3E%3C/svg%3E");
}

.platform-logo.hily {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='10' fill='%237C3AED'/%3E%3Cpath d='M8 22V8h3.5v5h4.9V8H20v14h-3.6v-5.3h-4.9V22H8Z' fill='white'/%3E%3Cpath d='M22.2 8h2.4v14h-2.4z' fill='white' opacity='.85'/%3E%3C/svg%3E");
}

.platform-logo.happn {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='11' fill='%230EA5E9'/%3E%3Cpath d='M17.6 4.8 8.4 16.2h6.2l-2.2 9 9.2-11.4h-6.1l2.1-8Z' fill='white'/%3E%3C/svg%3E");
}

.platform-logo.meetme {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='11' fill='%23805AD5'/%3E%3Ccircle cx='11.2' cy='12.4' r='2' fill='white'/%3E%3Ccircle cx='18.8' cy='12.4' r='2' fill='white'/%3E%3Cpath d='M9.2 18.2c1.4 2.3 3.3 3.4 5.8 3.4s4.4-1.1 5.8-3.4' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 1500px) {
    .platform-logo {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        background-size: 28px 28px;
    }

    .product-platform-pills span {
        gap: 8px;
        padding: 0 10px;
    }
}

/* Show local platform PNGs without cropping or artificial white boxes. */
.product-platform-pills span {
    gap: 10px;
}

.platform-logo {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: none;
}

@media (max-width: 1500px) {
    .platform-logo {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        background-size: contain;
    }
}

/* Final order table fit: English labels must not overflow the desktop container. */
.exact-orders-panel {
    overflow: hidden !important;
}

.exact-orders-panel .exact-order-table {
    width: 100% !important;
    table-layout: fixed !important;
}

.exact-orders-panel .exact-order-table th,
.exact-orders-panel .exact-order-table td {
    box-sizing: border-box !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.exact-orders-panel .exact-order-table th:nth-child(1),
.exact-orders-panel .exact-order-table td:nth-child(1) {
    width: 19% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(2),
.exact-orders-panel .exact-order-table td:nth-child(2) {
    width: 12% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(3),
.exact-orders-panel .exact-order-table td:nth-child(3) {
    width: 7% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(4),
.exact-orders-panel .exact-order-table td:nth-child(4) {
    width: 14% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(5),
.exact-orders-panel .exact-order-table td:nth-child(5) {
    width: 14% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(6),
.exact-orders-panel .exact-order-table td:nth-child(6) {
    width: 12% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(7),
.exact-orders-panel .exact-order-table td:nth-child(7) {
    width: 9% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(8),
.exact-orders-panel .exact-order-table td:nth-child(8) {
    width: 13% !important;
}

.exact-orders-panel .order-no {
    display: inline-block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}

.exact-orders-panel .order-status {
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 12px !important;
}

.exact-orders-panel .order-action {
    width: 100% !important;
    max-width: 142px !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* Final user center language switch: same icon dropdown as the public header. */
.exact-center-nav {
    grid-template-columns: 210px minmax(0, 1fr) 408px !important;
}

.exact-center-header-actions {
    overflow: visible !important;
}

.exact-center-header .language-switch {
    position: relative;
    flex: 0 0 auto;
    min-width: 104px;
    height: 40px;
    color: #071a3a;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.exact-center-header .language-switch summary {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #d5e2f5;
    border-radius: 8px;
    background: #f8fbff;
    cursor: pointer;
    list-style: none;
}

.exact-center-header .language-switch summary::-webkit-details-marker {
    display: none;
}

.exact-center-header .language-switch i {
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.5 9h-3.1a15.7 15.7 0 0 0-1.1-5A8.04 8.04 0 0 1 19.5 11ZM12 4.1c.7 1 1.7 3.1 2.1 6.9H9.9c.4-3.8 1.4-5.9 2.1-6.9ZM4.5 13h3.1c.2 1.9.6 3.6 1.1 5A8.04 8.04 0 0 1 4.5 13Zm3.1-2H4.5A8.04 8.04 0 0 1 8.7 6a15.7 15.7 0 0 0-1.1 5ZM12 19.9c-.7-1-1.7-3.1-2.1-6.9h4.2c-.4 3.8-1.4 5.9-2.1 6.9Zm3.3-1.9c.5-1.4.9-3.1 1.1-5h3.1a8.04 8.04 0 0 1-4.2 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.5 9h-3.1a15.7 15.7 0 0 0-1.1-5A8.04 8.04 0 0 1 19.5 11ZM12 4.1c.7 1 1.7 3.1 2.1 6.9H9.9c.4-3.8 1.4-5.9 2.1-6.9ZM4.5 13h3.1c.2 1.9.6 3.6 1.1 5A8.04 8.04 0 0 1 4.5 13Zm3.1-2H4.5A8.04 8.04 0 0 1 8.7 6a15.7 15.7 0 0 0-1.1 5ZM12 19.9c-.7-1-1.7-3.1-2.1-6.9h4.2c-.4 3.8-1.4 5.9-2.1 6.9Zm3.3-1.9c.5-1.4.9-3.1 1.1-5h3.1a8.04 8.04 0 0 1-4.2 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.exact-center-header .language-switch span {
    color: #071a3a;
    font-size: 13px;
    line-height: 1;
}

.exact-center-header .language-switch em {
    width: 7px;
    height: 7px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.exact-center-header .language-switch[open] summary,
.exact-center-header .language-switch summary:hover {
    color: #1260f6;
    border-color: #9ec0ff;
    background: #fff;
}

.exact-center-header .language-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 160;
    min-width: 132px;
    padding: 7px;
    border: 1px solid #d7e4f5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(13, 35, 74, .14);
}

.exact-center-header .language-menu a {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    color: #243652;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 850;
}

.exact-center-header .language-menu a:hover,
.exact-center-header .language-menu a.active {
    color: #1260f6;
    background: #f1f6ff;
}

/* Final public header refinement after removing News. */
.site-header {
    height: 72px !important;
    border-bottom: 1px solid #dbe6f5 !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 24px rgba(22, 45, 86, .04) !important;
}

.site-header .container.nav-wrap {
    width: calc(100% - 96px) !important;
    max-width: 1398px !important;
    height: 72px !important;
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) 302px !important;
    gap: 22px !important;
    align-items: center !important;
    margin: 0 auto !important;
}

.site-header .brand {
    gap: 12px !important;
    min-width: 0 !important;
}

.site-header .brand-mark {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px 40px !important;
}

.site-header .brand-text {
    color: #1260f6 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.site-header .main-nav {
    justify-content: center !important;
    gap: 31px !important;
    min-width: 0 !important;
    font-size: 15px !important;
    font-weight: 780 !important;
}

.site-header .main-nav a {
    min-height: 72px !important;
    padding: 0 2px !important;
    color: #071a3a !important;
}

.site-header .main-nav a:hover,
.site-header .main-nav a.active {
    color: #1260f6 !important;
}

.site-header .main-nav a.active:after {
    bottom: 0 !important;
    width: 24px !important;
    height: 3px !important;
}

.site-header .nav-actions {
    justify-content: flex-end !important;
    gap: 10px !important;
    overflow: visible !important;
}

.site-header .nav-actions .ghost-btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

.site-header .nav-login-btn,
.site-header .nav-register-btn {
    min-width: 74px !important;
}

.site-header .nav-account-btn,
.site-header .nav-logout-btn {
    min-width: 108px !important;
    gap: 8px !important;
}

.site-header .language-switch {
    flex: 0 0 auto !important;
    min-width: 104px !important;
    height: 40px !important;
}

.site-header .language-switch summary {
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
}

.site-header .language-menu {
    z-index: 180 !important;
}

html[lang="en"] .site-header .container.nav-wrap {
    grid-template-columns: 200px minmax(0, 1fr) 338px !important;
    gap: 18px !important;
}

html[lang="en"] .site-header .main-nav {
    gap: 22px !important;
    font-size: 14px !important;
}

html[lang="en"] .site-header .nav-actions .ghost-btn {
    padding: 0 14px !important;
}

html[lang="en"] .site-header .nav-account-btn,
html[lang="en"] .site-header .nav-logout-btn {
    min-width: 118px !important;
}

.exact-user-btn span {
    display: none !important;
}

/* User center language switch: match the public website header. */
.exact-center-nav {
    grid-template-columns: 210px minmax(0, 1fr) 408px !important;
}

.exact-center-header-actions {
    overflow: visible !important;
}

.exact-center-header .language-switch {
    position: relative;
    flex: 0 0 auto;
    min-width: 104px;
    height: 40px;
    color: #071a3a;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.exact-center-header .language-switch summary {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #d5e2f5;
    border-radius: 8px;
    background: #f8fbff;
    cursor: pointer;
    list-style: none;
}

.exact-center-header .language-switch summary::-webkit-details-marker {
    display: none;
}

.exact-center-header .language-switch i {
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.5 9h-3.1a15.7 15.7 0 0 0-1.1-5A8.04 8.04 0 0 1 19.5 11ZM12 4.1c.7 1 1.7 3.1 2.1 6.9H9.9c.4-3.8 1.4-5.9 2.1-6.9ZM4.5 13h3.1c.2 1.9.6 3.6 1.1 5A8.04 8.04 0 0 1 4.5 13Zm3.1-2H4.5A8.04 8.04 0 0 1 8.7 6a15.7 15.7 0 0 0-1.1 5ZM12 19.9c-.7-1-1.7-3.1-2.1-6.9h4.2c-.4 3.8-1.4 5.9-2.1 6.9Zm3.3-1.9c.5-1.4.9-3.1 1.1-5h3.1a8.04 8.04 0 0 1-4.2 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.5 9h-3.1a15.7 15.7 0 0 0-1.1-5A8.04 8.04 0 0 1 19.5 11ZM12 4.1c.7 1 1.7 3.1 2.1 6.9H9.9c.4-3.8 1.4-5.9 2.1-6.9ZM4.5 13h3.1c.2 1.9.6 3.6 1.1 5A8.04 8.04 0 0 1 4.5 13Zm3.1-2H4.5A8.04 8.04 0 0 1 8.7 6a15.7 15.7 0 0 0-1.1 5ZM12 19.9c-.7-1-1.7-3.1-2.1-6.9h4.2c-.4 3.8-1.4 5.9-2.1 6.9Zm3.3-1.9c.5-1.4.9-3.1 1.1-5h3.1a8.04 8.04 0 0 1-4.2 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.exact-center-header .language-switch span {
    color: #071a3a;
    font-size: 13px;
    line-height: 1;
}

.exact-center-header .language-switch em {
    width: 7px;
    height: 7px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.exact-center-header .language-switch[open] summary,
.exact-center-header .language-switch summary:hover {
    color: #1260f6;
    border-color: #9ec0ff;
    background: #fff;
}

.exact-center-header .language-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 160;
    min-width: 132px;
    padding: 7px;
    border: 1px solid #d7e4f5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(13, 35, 74, .14);
}

.exact-center-header .language-menu a {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    color: #243652;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 850;
}

.exact-center-header .language-menu a:hover,
.exact-center-header .language-menu a.active {
    color: #1260f6;
    background: #f1f6ff;
}

/* Keep the user-center order table inside the desktop layout in English. */
.exact-orders-panel {
    overflow: hidden;
}

.exact-orders-panel .exact-order-table {
    width: 100%;
    table-layout: fixed;
}

.exact-orders-panel .exact-order-table th,
.exact-orders-panel .exact-order-table td {
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.exact-orders-panel .exact-order-table th:nth-child(1),
.exact-orders-panel .exact-order-table td:nth-child(1) {
    width: 19%;
}

.exact-orders-panel .exact-order-table th:nth-child(2),
.exact-orders-panel .exact-order-table td:nth-child(2) {
    width: 12%;
}

.exact-orders-panel .exact-order-table th:nth-child(3),
.exact-orders-panel .exact-order-table td:nth-child(3) {
    width: 7%;
}

.exact-orders-panel .exact-order-table th:nth-child(4),
.exact-orders-panel .exact-order-table td:nth-child(4) {
    width: 14%;
}

.exact-orders-panel .exact-order-table th:nth-child(5),
.exact-orders-panel .exact-order-table td:nth-child(5) {
    width: 14%;
}

.exact-orders-panel .exact-order-table th:nth-child(6),
.exact-orders-panel .exact-order-table td:nth-child(6) {
    width: 12%;
}

.exact-orders-panel .exact-order-table th:nth-child(7),
.exact-orders-panel .exact-order-table td:nth-child(7) {
    width: 9%;
}

.exact-orders-panel .exact-order-table th:nth-child(8),
.exact-orders-panel .exact-order-table td:nth-child(8) {
    width: 13%;
}

.exact-orders-panel .order-no {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.exact-orders-panel .order-status {
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
}

.exact-orders-panel .order-action {
    width: 100%;
    max-width: 142px;
    min-width: 0;
    padding: 0 10px;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Final tutorial process style: keep it identical to the download process states. */
.tutorial-process {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) 40px minmax(230px, 1fr) 40px minmax(230px, 1fr) !important;
    gap: 0 !important;
    align-items: center !important;
    margin: 0 0 20px !important;
}

.tutorial-process article,
.tutorial-process article.active,
.tutorial-process article.done,
.tutorial-process article.locked {
    min-width: 0 !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: 40px 26px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    padding: 12px 7px !important;
    border: 1px solid #dce6f5 !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background: #fbfdff !important;
    box-shadow: none !important;
}

.tutorial-process article > i,
.tutorial-process article.active > i,
.tutorial-process article.done > i,
.tutorial-process article.locked > i {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #9aa7bb !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

.tutorial-process article .tutorial-step-icon,
.tutorial-process article.active .tutorial-step-icon,
.tutorial-process article.done .tutorial-step-icon,
.tutorial-process article.locked .tutorial-step-icon {
    width: 26px !important;
    height: 26px !important;
    background: #9aa7bb !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

.tutorial-process b,
.tutorial-process article.active b,
.tutorial-process article.done b,
.tutorial-process article.locked b {
    display: block !important;
    overflow: visible !important;
    margin: 0 !important;
    color: #071735 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.tutorial-process small,
.tutorial-process article.active small,
.tutorial-process article.done small,
.tutorial-process article.locked small {
    display: block !important;
    overflow: visible !important;
    max-width: 100% !important;
    margin-top: 5px !important;
    color: #8b98aa !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.tutorial-process article.active {
    border-color: rgba(18, 96, 246, .72) !important;
    background: #f5f9ff !important;
}

.tutorial-process article.active > i,
.tutorial-process article.active .tutorial-step-icon {
    background: #1260f6 !important;
}

.tutorial-process article.active small {
    color: #376396 !important;
}

.tutorial-process article.done {
    border-color: rgba(22, 163, 74, .62) !important;
    background: #f7fff9 !important;
}

.tutorial-process article.done > i,
.tutorial-process article.done .tutorial-step-icon {
    background: #46a454 !important;
}

.tutorial-process article.done small {
    color: #4c805d !important;
}

.tutorial-process article.locked {
    border-color: #d9e3f0 !important;
    background: #fbfdff !important;
}

.tutorial-process article.locked > i {
    color: #7b8798 !important;
    background: #edf3fb !important;
}

.tutorial-process article.locked .tutorial-step-icon {
    background: #9aa7bb !important;
}

.tutorial-process article.locked b {
    color: #59677c !important;
}

.tutorial-process article.locked small {
    color: #8b98aa !important;
}

.tutorial-process .process-dash {
    width: auto !important;
    height: 2px !important;
    margin: 0 10px !important;
    background-image: linear-gradient(90deg, #bfc9d9 45%, transparent 45%) !important;
    background-size: 10px 2px !important;
    background-color: transparent !important;
}

/* Final download process style: match tutorial process green cards. */
.download-process {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) 40px minmax(230px, 1fr) 40px minmax(230px, 1fr) !important;
    gap: 0 !important;
    align-items: center !important;
    margin: 0 0 20px !important;
}

.download-process article,
.download-process article.active,
.download-process article.done,
.download-process article.locked {
    min-width: 0 !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: 40px 26px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    padding: 12px 7px !important;
    border: 1px solid #dce6f5 !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background: #fbfdff !important;
    box-shadow: none !important;
}

.download-process article > i,
.download-process article.active > i,
.download-process article.done > i,
.download-process article.locked > i {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #9aa7bb !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

.download-process article .download-step-icon,
.download-process article.active .download-step-icon,
.download-process article.done .download-step-icon,
.download-process article.locked .download-step-icon {
    width: 26px !important;
    height: 26px !important;
    background: #9aa7bb !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

.download-process b,
.download-process article.active b,
.download-process article.done b,
.download-process article.locked b {
    display: block !important;
    overflow: visible !important;
    margin: 0 !important;
    color: #071735 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.download-process small,
.download-process article.active small,
.download-process article.done small,
.download-process article.locked small {
    display: block !important;
    overflow: visible !important;
    max-width: 100% !important;
    margin-top: 5px !important;
    color: #8b98aa !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.download-process article.active {
    border-color: rgba(18, 96, 246, .72) !important;
    background: #f5f9ff !important;
}

.download-process article.active > i {
    background: #1260f6 !important;
}

.download-process article.active .download-step-icon {
    background: #1260f6 !important;
}

.download-process article.active b {
    color: #071735 !important;
}

.download-process article.active small {
    color: #376396 !important;
}

.download-process article.done {
    border-color: rgba(22, 163, 74, .62) !important;
    background: #f7fff9 !important;
}

.download-process article.done > i {
    background: #46a454 !important;
}

.download-process article.done .download-step-icon {
    background: #46a454 !important;
}

.download-process article.done small {
    color: #4c805d !important;
}

.download-process article.locked {
    border-color: #d9e3f0 !important;
    background: #fbfdff !important;
}

.download-process article.locked > i {
    color: #7b8798 !important;
    background: #edf3fb !important;
}

.download-process article.locked .download-step-icon {
    background: #9aa7bb !important;
}

.download-process article.locked b {
    color: #59677c !important;
}

.download-process article.locked small {
    color: #8b98aa !important;
}

.download-process .process-dash {
    width: auto !important;
    height: 2px !important;
    margin: 0 10px !important;
    background-image: linear-gradient(90deg, #bfc9d9 45%, transparent 45%) !important;
    background-size: 10px 2px !important;
    background-color: transparent !important;
}

/* Purchase period icon: calendar instead of clock/exclamation-like mark. */
.buy-period i,
.center-pay-period i {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #263856 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 2.5c.7 0 1.2.5 1.2 1.2v1h7.2v-1c0-.7.5-1.2 1.2-1.2S17 3 17 3.7v1h.7A2.8 2.8 0 0 1 20.5 7.5v9.2a2.8 2.8 0 0 1-2.8 2.8H4.3a2.8 2.8 0 0 1-2.8-2.8V7.5a2.8 2.8 0 0 1 2.8-2.8H5v-1c0-.7.5-1.2 1.2-1.2ZM4 9.2v7.2c0 .4.3.8.8.8h12.4c.5 0 .8-.4.8-.8V9.2H4Zm3.3 2.6h2.2v2.2H7.3v-2.2Zm5.2 0h2.2v2.2h-2.2v-2.2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 2.5c.7 0 1.2.5 1.2 1.2v1h7.2v-1c0-.7.5-1.2 1.2-1.2S17 3 17 3.7v1h.7A2.8 2.8 0 0 1 20.5 7.5v9.2a2.8 2.8 0 0 1-2.8 2.8H4.3a2.8 2.8 0 0 1-2.8-2.8V7.5a2.8 2.8 0 0 1 2.8-2.8H5v-1c0-.7.5-1.2 1.2-1.2ZM4 9.2v7.2c0 .4.3.8.8.8h12.4c.5 0 .8-.4.8-.8V9.2H4Zm3.3 2.6h2.2v2.2H7.3v-2.2Zm5.2 0h2.2v2.2h-2.2v-2.2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.buy-period i:before,
.buy-period i:after,
.center-pay-period i:before,
.center-pay-period i:after {
    content: none !important;
    display: none !important;
}

/* Keep four-column trust strips stable in both Chinese and English. */
.download-trust-row,
.tutorial-trust-row,
.changelog-trust-row,
.agent-trust-row,
.about-trust-row,
.contact-trust-row,
.news-trust-row,
.product-trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

.download-trust-row article,
.tutorial-trust-row article,
.changelog-trust-row article,
.agent-trust-row article,
.about-trust-row article,
.contact-trust-row article,
.news-trust-row article,
.product-trust-row article {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    padding-right: 24px;
    padding-left: 24px;
}

.download-trust-row article > div,
.tutorial-trust-row article > div,
.changelog-trust-row article > div,
.agent-trust-row article > div,
.about-trust-row article > div,
.contact-trust-row article > div,
.news-trust-row article > div,
.product-trust-row article > div {
    min-width: 0;
}

.download-trust-row i,
.tutorial-trust-row i,
.changelog-trust-row i,
.agent-trust-row i,
.about-trust-row i,
.contact-trust-row i,
.news-trust-row i,
.product-trust-row i {
    flex: 0 0 auto;
}

.download-trust-row b,
.tutorial-trust-row b,
.changelog-trust-row b,
.agent-trust-row b,
.about-trust-row b,
.contact-trust-row b,
.news-trust-row b,
.product-trust-row b {
    display: -webkit-box;
    overflow: hidden;
    max-width: 100%;
    color: #10213d;
    font-size: 16px;
    line-height: 1.25;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.download-trust-row span,
.tutorial-trust-row span,
.changelog-trust-row span,
.agent-trust-row span,
.about-trust-row span,
.contact-trust-row span,
.news-trust-row span,
.product-trust-row span {
    display: -webkit-box;
    overflow: hidden;
    max-width: 100%;
    margin-top: 4px;
    color: #63728b;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Agent page icon refresh: consistent textless line icons. */
.agent-search-field-icon,
.agent-search-btn-icon,
.agent-trust-icon,
.agent-step-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 0;
}

.agent-search-field-icon,
.agent-search-btn-icon {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: translateY(-50%);
}

.agent-search-field-icon:before,
.agent-search-btn-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 21a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17Zm6.4-1.9 5.1 5.1' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 21a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17Zm6.4-1.9 5.1 5.1' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-verify-form label .agent-search-field-icon {
    left: 19px;
    width: 25px;
    height: 25px;
    color: var(--blue);
}

.agent-verify-form .primary-btn .agent-search-btn-icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
    color: #fff;
    transform: none;
}

.agent-verify-form .primary-btn .agent-search-btn-icon:after {
    content: none;
}

.agent-verify-form label .agent-search-field-icon:after {
    content: none;
}

.agent-wait-icon,
.agent-error-icon,
.agent-success-shield {
    display: grid;
    place-items: center;
    overflow: hidden;
}

.agent-wait-icon:before,
.agent-success-shield:before,
.agent-error-icon:before {
    content: "";
    position: static;
    width: 36px;
    height: 36px;
    background: var(--blue);
    clip-path: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 4.2 29 9v8.9c0 6.8-4.3 12.2-11 14.6C11.3 30.1 7 24.7 7 17.9V9l11-4.8Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m13 18.2 3.4 3.4L23.8 14' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 4.2 29 9v8.9c0 6.8-4.3 12.2-11 14.6C11.3 30.1 7 24.7 7 17.9V9l11-4.8Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m13 18.2 3.4 3.4L23.8 14' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-success-shield:before {
    background: #2faf55;
}

.agent-error-icon:before {
    background: #ef4444;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 4.2 29 9v8.9c0 6.8-4.3 12.2-11 14.6C11.3 30.1 7 24.7 7 17.9V9l11-4.8Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m13.5 13.5 9 9m0-9-9 9' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 4.2 29 9v8.9c0 6.8-4.3 12.2-11 14.6C11.3 30.1 7 24.7 7 17.9V9l11-4.8Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m13.5 13.5 9 9m0-9-9 9' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-wait-icon:after,
.agent-error-icon:after,
.agent-success-shield:after {
    content: none;
}

.agent-cert-card li:before {
    content: "";
    border-radius: 50%;
    background: #c89725;
}

.agent-cert-card li:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.agent-cert-card span i {
    position: relative;
    width: 20px;
    height: 22px;
    background: #c89725;
    clip-path: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 22 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2 19 5.5v6.4c0 4.9-3.1 8.9-8 10.6-4.9-1.7-8-5.7-8-10.6V5.5L11 2Z' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='m7.3 12 2.4 2.4 5-5.2' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 22 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2 19 5.5v6.4c0 4.9-3.1 8.9-8 10.6-4.9-1.7-8-5.7-8-10.6V5.5L11 2Z' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='m7.3 12 2.4 2.4 5-5.2' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-gold-shield {
    display: grid;
    place-items: center;
    clip-path: none;
    border-radius: 30px;
    background: linear-gradient(145deg, #fff7df, #f6d982);
    box-shadow: inset 0 0 0 1px rgba(194, 135, 22, .2), 0 18px 34px rgba(194, 135, 22, .16);
}

.agent-gold-shield:before {
    content: "";
    position: static;
    width: 74px;
    height: 78px;
    border: 0;
    background: linear-gradient(145deg, #d19a22, #f0c35c);
    clip-path: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='74' height='78' viewBox='0 0 74 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37 6 62 17v20c0 15.4-9.8 28-25 33-15.2-5-25-17.6-25-33V17L37 6Z' fill='none' stroke='black' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='m26 38 8 8 16-17' fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='74' height='78' viewBox='0 0 74 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37 6 62 17v20c0 15.4-9.8 28-25 33-15.2-5-25-17.6-25-33V17L37 6Z' fill='none' stroke='black' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='m26 38 8 8 16-17' fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-gold-shield:after {
    content: none;
}

.agent-step-icon {
    display: grid !important;
    place-items: center;
    color: var(--blue);
    background: #eaf2ff;
}

.agent-step-icon:before {
    content: "";
    width: 22px;
    height: 22px;
    background: currentColor;
}

.agent-step-icon.input:before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5h14M5 12h10M5 16.5h7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M4 3.5h16v17H4z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5h14M5 12h10M5 16.5h7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M4 3.5h16v17H4z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-step-icon.search:before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 17a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13Zm4.8-1.7 4.7 4.7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 17a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13Zm4.8-1.7 4.7 4.7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-step-icon.result:before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 20 6.4v6.2c0 4.4-3 8-8 9.4-5-1.4-8-5-8-9.4V6.4L12 3Z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='m8.7 12 2.2 2.2 4.7-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 20 6.4v6.2c0 4.4-3 8-8 9.4-5-1.4-8-5-8-9.4V6.4L12 3Z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='m8.7 12 2.2 2.2 4.7-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-flow-steps article:first-child .agent-step-icon {
    color: #fff;
    background: var(--blue);
}

.agent-headset-icon {
    display: grid;
    place-items: center;
}

.agent-headset-icon:before {
    position: static;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: var(--blue);
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 19v-3.5a9 9 0 0 1 18 0V19' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M8 18h4v8H8a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3Zm18 0h-4v8h4a3 3 0 0 0 3-3v-2a3 3 0 0 0-3-3Z' fill='none' stroke='black' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M22 26c0 2.2-1.8 3.5-5 3.5h-2' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 19v-3.5a9 9 0 0 1 18 0V19' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M8 18h4v8H8a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3Zm18 0h-4v8h4a3 3 0 0 0 3-3v-2a3 3 0 0 0-3-3Z' fill='none' stroke='black' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M22 26c0 2.2-1.8 3.5-5 3.5h-2' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-headset-icon:after {
    content: none;
}

.agent-trust-icon {
    display: grid !important;
    place-items: center;
    color: #c89725;
    background: #fffdfa;
    border: 2px solid #d6a73c;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(200, 151, 37, .08);
}

.agent-trust-icon:before {
    content: "";
    width: 28px;
    height: 28px;
    background: currentColor;
}

.agent-trust-icon.certified:before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3.5 25 7.8v8.1c0 6-3.9 10.5-10 12.1C8.9 26.4 5 21.9 5 15.9V7.8l10-4.3Z' fill='none' stroke='black' stroke-width='2.7' stroke-linejoin='round'/%3E%3Cpath d='m10.7 15.5 3 3 6-6.4' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3.5 25 7.8v8.1c0 6-3.9 10.5-10 12.1C8.9 26.4 5 21.9 5 15.9V7.8l10-4.3Z' fill='none' stroke='black' stroke-width='2.7' stroke-linejoin='round'/%3E%3Cpath d='m10.7 15.5 3 3 6-6.4' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-trust-icon.status:before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 10.5A9.5 9.5 0 0 0 6.7 8.1M6.5 19.5a9.5 9.5 0 0 0 16.8 2.4' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round'/%3E%3Cpath d='M23.5 5.8v4.7h-4.7M6.5 24.2v-4.7h4.7' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 10.5A9.5 9.5 0 0 0 6.7 8.1M6.5 19.5a9.5 9.5 0 0 0 16.8 2.4' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round'/%3E%3Cpath d='M23.5 5.8v4.7h-4.7M6.5 24.2v-4.7h4.7' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-trust-icon.risk:before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3.5 25 7.8v8.1c0 6-3.9 10.5-10 12.1C8.9 26.4 5 21.9 5 15.9V7.8l10-4.3Z' fill='none' stroke='black' stroke-width='2.7' stroke-linejoin='round'/%3E%3Cpath d='M15 10v7.2' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M15 22h.1' fill='none' stroke='black' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3.5 25 7.8v8.1c0 6-3.9 10.5-10 12.1C8.9 26.4 5 21.9 5 15.9V7.8l10-4.3Z' fill='none' stroke='black' stroke-width='2.7' stroke-linejoin='round'/%3E%3Cpath d='M15 10v7.2' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M15 22h.1' fill='none' stroke='black' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-trust-icon.support:before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 16.5v-3a7.5 7.5 0 0 1 15 0v3' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M7.5 16h3.2v6H7.5A2.5 2.5 0 0 1 5 19.5v-1A2.5 2.5 0 0 1 7.5 16Zm15 0h-3.2v6h3.2a2.5 2.5 0 0 0 2.5-2.5v-1a2.5 2.5 0 0 0-2.5-2.5Z' fill='none' stroke='black' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='M19.3 22c0 2-1.8 3.2-4.3 3.2h-1.8' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 16.5v-3a7.5 7.5 0 0 1 15 0v3' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M7.5 16h3.2v6H7.5A2.5 2.5 0 0 1 5 19.5v-1A2.5 2.5 0 0 1 7.5 16Zm15 0h-3.2v6h3.2a2.5 2.5 0 0 0 2.5-2.5v-1a2.5 2.5 0 0 0-2.5-2.5Z' fill='none' stroke='black' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='M19.3 22c0 2-1.8 3.2-4.3 3.2h-1.8' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-example-strip .textless-info-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    color: #fff;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #3f73ff, #165dff);
    box-shadow: 0 6px 12px rgba(22, 93, 255, .18);
}

.agent-example-strip .textless-info-icon:before {
    content: "";
    position: absolute;
    left: 11px;
    top: 10px;
    width: 3px;
    height: 8px;
    border-radius: 999px;
    background: #fff;
}

.agent-example-strip .textless-info-icon:after {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
}

/* USDT payment step labels need room in English. */
.usdt-pay-page .usdt-step-row {
    grid-template-columns: minmax(96px, 1fr) 24px minmax(96px, 1fr) 24px minmax(96px, 1fr) 24px minmax(96px, 1fr);
    gap: 8px;
    padding: 16px 22px 12px;
}

.usdt-pay-page .usdt-step-row article {
    display: grid;
    justify-items: center;
    align-content: start;
    min-width: 0;
}

.usdt-pay-page .usdt-step-row article > i {
    margin-bottom: 8px;
}

.usdt-pay-page .usdt-step-row article > span {
    width: 100%;
    max-width: 132px;
    min-height: 36px;
    margin-top: 4px;
    overflow: hidden;
    color: #516179;
    font-size: 14px;
    line-height: 1.22;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.usdt-pay-page .usdt-step-row article.active > span {
    color: #1260f6;
}

.usdt-pay-page .usdt-step-row em {
    width: 24px;
    min-width: 24px;
    margin-top: 23px;
}

.agent-cert-card span {
    width: max-content;
    min-width: 0;
    max-width: 100%;
    padding: 0 16px;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.agent-cert-card span i {
    flex: 0 0 18px;
}

/* Match download process with the cleaner tutorial process card style. */
.download-process {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) 40px minmax(230px, 1fr) 40px minmax(230px, 1fr);
    gap: 0;
    align-items: center;
    margin: 0 0 20px;
}

.download-process article {
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 54px 34px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid rgba(22, 163, 74, .62);
    border-radius: 8px;
    background: #f7fff9;
    outline: 0;
    box-shadow: none;
}

.download-process article.active {
    border-color: rgba(22, 163, 74, .62);
    background: #f7fff9;
    outline: 0;
    box-shadow: none;
}

.download-process article.done {
    border-color: rgba(22, 163, 74, .62);
    background: #f7fff9;
    outline: 0;
}

.download-process article.locked {
    border-color: rgba(22, 163, 74, .62);
    background: #fbfffc;
}

.download-process article > i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 0;
    border-radius: 50%;
    background: #46a454;
    font-style: normal;
    font-size: 22px;
    font-weight: 900;
    box-shadow: none;
}

.download-process article.active > i,
.download-process article.done > i,
.download-process article.locked > i {
    color: #fff;
    border: 0;
    background: #46a454;
    box-shadow: none;
}

.download-process article .download-step-icon {
    width: 34px;
    height: 34px;
    background: #46a454;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.download-process article.active .download-step-icon,
.download-process article.done .download-step-icon,
.download-process article.locked .download-step-icon {
    background: #46a454;
}

.download-step-icon.account-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14.2a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm-9.4 9.4c1.2-4.1 4.6-6.6 9.4-6.6s8.2 2.5 9.4 6.6c.2.7-.3 1.4-1 1.4H5.6c-.7 0-1.2-.7-1-1.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14.2a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm-9.4 9.4c1.2-4.1 4.6-6.6 9.4-6.6s8.2 2.5 9.4 6.6c.2.7-.3 1.4-1 1.4H5.6c-.7 0-1.2-.7-1-1.4Z'/%3E%3C/svg%3E");
}

.download-step-icon.cart-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E");
}

.download-step-icon.cloud-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.2 23.5h12.2a5.8 5.8 0 0 0 .6-11.6 7.4 7.4 0 0 0-14.2 2.2A4.8 4.8 0 0 0 9.2 23.5Zm5.8-13.1c.8 0 1.4.6 1.4 1.4v5.5l2-2a1.4 1.4 0 1 1 2 2l-4.4 4.4a1.4 1.4 0 0 1-2 0l-4.4-4.4a1.4 1.4 0 1 1 2-2l2 2v-5.5c0-.8.6-1.4 1.4-1.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.2 23.5h12.2a5.8 5.8 0 0 0 .6-11.6 7.4 7.4 0 0 0-14.2 2.2A4.8 4.8 0 0 0 9.2 23.5Zm5.8-13.1c.8 0 1.4.6 1.4 1.4v5.5l2-2a1.4 1.4 0 1 1 2 2l-4.4 4.4a1.4 1.4 0 0 1-2 0l-4.4-4.4a1.4 1.4 0 1 1 2-2l2 2v-5.5c0-.8.6-1.4 1.4-1.4Z'/%3E%3C/svg%3E");
}

.download-step-icon.account-icon:before,
.download-step-icon.account-icon:after,
.download-step-icon.cart-icon:before,
.download-step-icon.cart-icon:after,
.download-step-icon.cloud-icon:before,
.download-step-icon.cloud-icon:after {
    content: none;
}

.download-process article > div {
    min-width: 0;
}

.download-process b {
    display: block;
    overflow: hidden;
    margin: 0;
    color: #071735;
    font-size: 16px;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.download-process small {
    display: block;
    overflow: hidden;
    max-width: 100%;
    margin-top: 6px;
    color: #4c805d;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.download-process .process-dash {
    height: 2px;
    margin: 0 10px;
    background-image: linear-gradient(90deg, #bfc9d9 45%, transparent 45%);
    background-size: 10px 2px;
}

/* User center sidebar: clearer SVG-mask icons and permission-first order. */
.exact-side-nav a {
    grid-template-columns: 28px minmax(0, 1fr);
}

.exact-side-nav a i {
    width: 24px;
    height: 24px;
    color: currentColor;
    background: currentColor;
    background-image: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 23px 23px;
    mask-size: 23px 23px;
}

.exact-side-nav a i:before,
.exact-side-nav a i:after {
    content: none !important;
    display: none !important;
}

.exact-side-nav a .ec-exit.dark {
    color: currentColor;
}

.exact-side-nav a .ec-pie {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3a9 9 0 1 0 9 9h-7a2 2 0 0 1-2-2V3Zm3 0v6h6a9.02 9.02 0 0 0-6-6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3a9 9 0 1 0 9 9h-7a2 2 0 0 1-2-2V3Zm3 0v6h6a9.02 9.02 0 0 0-6-6Z'/%3E%3C/svg%3E");
}

.exact-side-nav a .ec-cloud {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4 19.5h8.3a5.3 5.3 0 0 0 .3-10.6A7.1 7.1 0 0 0 3.6 11.5 4.4 4.4 0 0 0 8.4 19.5Zm3.6-12a4.1 4.1 0 0 1 4 3.2 1.5 1.5 0 0 0 1.4 1.2 2.3 2.3 0 0 1-.1 4.6H8.4a1.4 1.4 0 0 1-.2-2.8 1.5 1.5 0 0 0 1.2-1.1A4.1 4.1 0 0 1 12 7.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4 19.5h8.3a5.3 5.3 0 0 0 .3-10.6A7.1 7.1 0 0 0 3.6 11.5 4.4 4.4 0 0 0 8.4 19.5Zm3.6-12a4.1 4.1 0 0 1 4 3.2 1.5 1.5 0 0 0 1.4 1.2 2.3 2.3 0 0 1-.1 4.6H8.4a1.4 1.4 0 0 1-.2-2.8 1.5 1.5 0 0 0 1.2-1.1A4.1 4.1 0 0 1 12 7.5Z'/%3E%3C/svg%3E");
}

.exact-side-nav a .ec-video {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6.5A3.5 3.5 0 0 1 8 3h8a3.5 3.5 0 0 1 3.5 3.5v11A3.5 3.5 0 0 1 16 21H8a3.5 3.5 0 0 1-3.5-3.5v-11Zm6.2 2.7a1.2 1.2 0 0 0-1.8 1v3.6a1.2 1.2 0 0 0 1.8 1l3.1-1.8a1.2 1.2 0 0 0 0-2l-3.1-1.8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6.5A3.5 3.5 0 0 1 8 3h8a3.5 3.5 0 0 1 3.5 3.5v11A3.5 3.5 0 0 1 16 21H8a3.5 3.5 0 0 1-3.5-3.5v-11Zm6.2 2.7a1.2 1.2 0 0 0-1.8 1v3.6a1.2 1.2 0 0 0 1.8 1l3.1-1.8a1.2 1.2 0 0 0 0-2l-3.1-1.8Z'/%3E%3C/svg%3E");
}

.exact-side-nav a .ec-order {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10a2 2 0 0 1 2 2v16l-3-1.7-3 1.7-3-1.7L7 21V5a2 2 0 0 1 2-2Zm2.5 5.2a1.2 1.2 0 0 0 0 2.4h5a1.2 1.2 0 0 0 0-2.4h-5Zm0 4.8a1.2 1.2 0 0 0 0 2.4H13a1.2 1.2 0 0 0 0-2.4H9.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10a2 2 0 0 1 2 2v16l-3-1.7-3 1.7-3-1.7L7 21V5a2 2 0 0 1 2-2Zm2.5 5.2a1.2 1.2 0 0 0 0 2.4h5a1.2 1.2 0 0 0 0-2.4h-5Zm0 4.8a1.2 1.2 0 0 0 0 2.4H13a1.2 1.2 0 0 0 0-2.4H9.5Z'/%3E%3C/svg%3E");
}

.exact-side-nav a .ec-account {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2Zm-8 7.1c1.1-3.7 4-5.8 8-5.8s6.9 2.1 8 5.8A1.4 1.4 0 0 1 18.6 21H5.4A1.4 1.4 0 0 1 4 19.3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2Zm-8 7.1c1.1-3.7 4-5.8 8-5.8s6.9 2.1 8 5.8A1.4 1.4 0 0 1 18.6 21H5.4A1.4 1.4 0 0 1 4 19.3Z'/%3E%3C/svg%3E");
}

.exact-side-nav a .ec-support {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8v4.5A3.5 3.5 0 0 0 7.5 19H9a1.5 1.5 0 0 0 1.5-1.5v-4A1.5 1.5 0 0 0 9 12H7v-1a5 5 0 0 1 10 0v1h-2a1.5 1.5 0 0 0-1.5 1.5v4A1.5 1.5 0 0 0 15 19h1.4a4.2 4.2 0 0 1-3.4 1.5h-1a1.3 1.3 0 0 0 0 2.5h1a6.7 6.7 0 0 0 6.7-6.7V11A8 8 0 0 0 12 3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8v4.5A3.5 3.5 0 0 0 7.5 19H9a1.5 1.5 0 0 0 1.5-1.5v-4A1.5 1.5 0 0 0 9 12H7v-1a5 5 0 0 1 10 0v1h-2a1.5 1.5 0 0 0-1.5 1.5v4A1.5 1.5 0 0 0 15 19h1.4a4.2 4.2 0 0 1-3.4 1.5h-1a1.3 1.3 0 0 0 0 2.5h1a6.7 6.7 0 0 0 6.7-6.7V11A8 8 0 0 0 12 3Z'/%3E%3C/svg%3E");
}

.exact-side-nav a .ec-exit {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H13a1.5 1.5 0 0 1 0 3H8v14h5a1.5 1.5 0 0 1 0 3H7.5A2.5 2.5 0 0 1 5 19.5v-15Zm11.4 4.1a1.4 1.4 0 0 1 2 0l2.4 2.4a1.4 1.4 0 0 1 0 2l-2.4 2.4a1.4 1.4 0 0 1-2-2l.1-.1H12a1.4 1.4 0 0 1 0-2.8h4.5l-.1-.1a1.4 1.4 0 0 1 0-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H13a1.5 1.5 0 0 1 0 3H8v14h5a1.5 1.5 0 0 1 0 3H7.5A2.5 2.5 0 0 1 5 19.5v-15Zm11.4 4.1a1.4 1.4 0 0 1 2 0l2.4 2.4a1.4 1.4 0 0 1 0 2l-2.4 2.4a1.4 1.4 0 0 1-2-2l.1-.1H12a1.4 1.4 0 0 1 0-2.8h4.5l-.1-.1a1.4 1.4 0 0 1 0-2Z'/%3E%3C/svg%3E");
}

/* Permission overview purchase tip: keep cart icon and text in one line. */
.exact-buy-tip {
    grid-template-columns: 42px minmax(0, 1fr) 150px;
    gap: 18px;
    min-height: 70px;
    padding: 14px 20px;
    overflow: visible;
}

.exact-buy-tip > .textless-alert-icon {
    width: 38px;
    height: 38px;
    color: #c08000;
    border: 3px solid #c89725;
    border-radius: 50%;
    background: transparent url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 7.8v8.5' stroke='%23c89725' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M15 22.1h.1' stroke='%23c89725' stroke-width='4.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
}

.exact-buy-tip > .textless-alert-icon:before,
.exact-buy-tip > .textless-alert-icon:after {
    content: none !important;
    display: none !important;
}

.exact-buy-tip p {
    min-width: 0;
    font-size: 16px;
    line-height: 1.45;
}

.exact-buy-tip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 150px;
    height: 42px;
    min-height: 42px;
    padding: 0 14px;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
    font-size: 15px;
}

.exact-buy-tip a .buy-cart-icon {
    width: 21px;
    height: 19px;
    margin: 0;
    color: #fff;
    border: 0;
    border-radius: 0;
    background-color: currentColor;
    flex: 0 0 21px;
}

/* Software service page: crisp centered icon refresh. */
.exact-page-software .software-package-icon {
    background:
        radial-gradient(circle at 28% 24%, rgba(255,255,255,.72), transparent 32%),
        linear-gradient(145deg, #2478ff, #1260f6);
}

.exact-page-software .software-package-icon .ec-service,
.exact-page-software .software-download-btn .ec-service,
.exact-page-software .download-reminder-list .ec-service,
.exact-page-software .exact-panel-title .ec-bell,
.exact-page-software .software-download-btn .ec-lock-mini {
    position: relative;
    display: inline-block;
    color: currentColor;
    background: currentColor;
    background-image: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.exact-page-software .software-package-icon .ec-service:before,
.exact-page-software .software-package-icon .ec-service:after,
.exact-page-software .software-download-btn .ec-service:before,
.exact-page-software .software-download-btn .ec-service:after,
.exact-page-software .download-reminder-list .ec-service:before,
.exact-page-software .download-reminder-list .ec-service:after,
.exact-page-software .exact-panel-title .ec-bell:before,
.exact-page-software .exact-panel-title .ec-bell:after,
.exact-page-software .software-download-btn .ec-lock-mini:before,
.exact-page-software .software-download-btn .ec-lock-mini:after,
.exact-page-software .software-download-box > .textless-alert-icon:before,
.exact-page-software .software-download-box > .textless-alert-icon:after {
    content: none !important;
    display: none !important;
}

.exact-page-software .software-package-icon .ec-service {
    width: 42px;
    height: 42px;
    color: #fff;
}

.exact-page-software .software-download-btn .ec-service,
.exact-page-software .software-download-btn .ec-lock-mini {
    width: 22px;
    height: 22px;
}

.exact-page-software .download-reminder-list .ec-service {
    width: 42px;
    height: 42px;
    color: #1260f6;
    border-radius: 14px;
}

.exact-page-software .download-reminder-list article {
    grid-template-columns: 52px minmax(0, 1fr);
}

.exact-page-software .exact-panel-title .ec-bell {
    width: 24px;
    height: 24px;
    color: #1260f6;
}

.exact-page-software .software-package-icon .ec-service.download,
.exact-page-software .software-download-btn .ec-service.download,
.exact-page-software .download-reminder-list .ec-service.download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 6.5a2.5 2.5 0 0 1 2.5 2.5v13.3l4.1-4.1a2.5 2.5 0 1 1 3.5 3.5l-8.3 8.3a2.5 2.5 0 0 1-3.6 0l-8.3-8.3a2.5 2.5 0 0 1 3.5-3.5l4.1 4.1V9A2.5 2.5 0 0 1 21 6.5Zm-11.2 26a2.5 2.5 0 0 1 2.5-2.5h17.4a2.5 2.5 0 0 1 0 5H12.3a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 6.5a2.5 2.5 0 0 1 2.5 2.5v13.3l4.1-4.1a2.5 2.5 0 1 1 3.5 3.5l-8.3 8.3a2.5 2.5 0 0 1-3.6 0l-8.3-8.3a2.5 2.5 0 0 1 3.5-3.5l4.1 4.1V9A2.5 2.5 0 0 1 21 6.5Zm-11.2 26a2.5 2.5 0 0 1 2.5-2.5h17.4a2.5 2.5 0 0 1 0 5H12.3a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3C/svg%3E");
}

.exact-page-software .download-reminder-list .ec-service.file-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.8 32.8 9.7v10.1c0 7.1-4.6 13.5-11.8 16.5C13.8 33.3 9.2 26.9 9.2 19.8V9.7L21 4.8Zm7.7 13.2a2.3 2.3 0 0 0-3.3-3.2l-6.6 6.8-2.2-2.2a2.3 2.3 0 0 0-3.2 3.3l3.9 3.8a2.3 2.3 0 0 0 3.2 0l8.2-8.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.8 32.8 9.7v10.1c0 7.1-4.6 13.5-11.8 16.5C13.8 33.3 9.2 26.9 9.2 19.8V9.7L21 4.8Zm7.7 13.2a2.3 2.3 0 0 0-3.3-3.2l-6.6 6.8-2.2-2.2a2.3 2.3 0 0 0-3.2 3.3l3.9 3.8a2.3 2.3 0 0 0 3.2 0l8.2-8.5Z'/%3E%3C/svg%3E");
}

.exact-page-software .download-reminder-list .ec-service.update {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.6 11.4A13.5 13.5 0 0 0 8.4 17a2.5 2.5 0 0 0 4.8 1.5 8.5 8.5 0 0 1 14.1-3.6l-2.4.2a2.4 2.4 0 1 0 .4 4.8l7.4-.6a2.4 2.4 0 0 0 2.2-2.5l-.5-7.4a2.4 2.4 0 1 0-4.8.4l.1 1.6Zm2.9 10.1a2.5 2.5 0 0 0-3.1 1.7 8.5 8.5 0 0 1-14.1 3.9l2.1-.1a2.4 2.4 0 1 0-.3-4.8l-7.4.5a2.4 2.4 0 0 0-2.2 2.6l.6 7.4a2.4 2.4 0 0 0 4.8-.4l-.2-1.7a13.5 13.5 0 0 0 21.5-6 2.5 2.5 0 0 0-1.7-3.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.6 11.4A13.5 13.5 0 0 0 8.4 17a2.5 2.5 0 0 0 4.8 1.5 8.5 8.5 0 0 1 14.1-3.6l-2.4.2a2.4 2.4 0 1 0 .4 4.8l7.4-.6a2.4 2.4 0 0 0 2.2-2.5l-.5-7.4a2.4 2.4 0 1 0-4.8.4l.1 1.6Zm2.9 10.1a2.5 2.5 0 0 0-3.1 1.7 8.5 8.5 0 0 1-14.1 3.9l2.1-.1a2.4 2.4 0 1 0-.3-4.8l-7.4.5a2.4 2.4 0 0 0-2.2 2.6l.6 7.4a2.4 2.4 0 0 0 4.8-.4l-.2-1.7a13.5 13.5 0 0 0 21.5-6 2.5 2.5 0 0 0-1.7-3.1Z'/%3E%3C/svg%3E");
}

.exact-page-software .software-download-btn .ec-lock-mini {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11.2V8.7a6 6 0 0 1 12 0v2.5h.7a2.8 2.8 0 0 1 2.8 2.8v6.2a2.8 2.8 0 0 1-2.8 2.8H6.3a2.8 2.8 0 0 1-2.8-2.8V14a2.8 2.8 0 0 1 2.8-2.8H7Zm3.5 0h5V8.7a2.5 2.5 0 0 0-5 0v2.5Zm2.5 7a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11.2V8.7a6 6 0 0 1 12 0v2.5h.7a2.8 2.8 0 0 1 2.8 2.8v6.2a2.8 2.8 0 0 1-2.8 2.8H6.3a2.8 2.8 0 0 1-2.8-2.8V14a2.8 2.8 0 0 1 2.8-2.8H7Zm3.5 0h5V8.7a2.5 2.5 0 0 0-5 0v2.5Zm2.5 7a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4Z'/%3E%3C/svg%3E");
}

.exact-page-software .exact-panel-title .ec-bell {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3.3a7 7 0 0 0-7 7v4.2c0 .7-.3 1.4-.8 1.9l-1 1A2.1 2.1 0 0 0 6.7 21h14.6a2.1 2.1 0 0 0 1.5-3.6l-1-1a2.7 2.7 0 0 1-.8-1.9v-4.2a7 7 0 0 0-7-7Zm-3.2 19.4a3.4 3.4 0 0 0 6.4 0h-6.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3.3a7 7 0 0 0-7 7v4.2c0 .7-.3 1.4-.8 1.9l-1 1A2.1 2.1 0 0 0 6.7 21h14.6a2.1 2.1 0 0 0 1.5-3.6l-1-1a2.7 2.7 0 0 1-.8-1.9v-4.2a7 7 0 0 0-7-7Zm-3.2 19.4a3.4 3.4 0 0 0 6.4 0h-6.4Z'/%3E%3C/svg%3E");
}

.exact-page-software .software-download-box {
    grid-template-columns: 42px minmax(0, 1fr) 112px;
}

.exact-page-software .software-download-box > .textless-alert-icon {
    width: 34px;
    height: 34px;
    color: #c89725;
    border: 2px solid #c89725;
    border-radius: 50%;
    background: transparent url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 6.8v7.6' stroke='%23c89725' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M13 18.9h.1' stroke='%23c89725' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 25px 25px no-repeat;
}

.exact-page-software .software-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1;
}

.exact-page-software .version-preview-list article {
    padding-left: 46px;
}

.exact-page-software .version-preview-list i {
    left: 14px;
    top: 18px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #eef5ff url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 2.8h6.3l3.3 3.3v11.1H5.2V2.8Z' stroke='%231260f6' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M11.4 3v3.3h3.3M7.5 10h5M7.5 13.5H11' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    box-shadow: none;
}

/* User center status text: keep unopened state on one line. */
.exact-stat-grid b,
.account-info-list b,
.account-service-card h3,
.account-state,
.software-status,
.software-badge {
    white-space: nowrap;
}

.exact-stat-grid b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 21px;
}

.account-info-list article {
    min-width: 0;
}

.account-info-list b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-service-card h3 {
    font-size: 24px;
}

/* Account page redesign: remove service-status aside and use full-width account details. */
.exact-page-account .account-single-grid {
    grid-template-columns: minmax(0, 1fr);
}

.exact-page-account .account-profile-panel {
    min-height: 0;
}

.exact-page-account .account-profile-card {
    grid-template-columns: 88px minmax(0, 1fr) 104px;
    min-height: 136px;
    padding: 22px;
}

.exact-page-account .account-info-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.exact-page-account .account-info-list article {
    min-height: 82px;
}

.exact-page-account .account-record-panel {
    margin-top: 18px;
}

/* Orders page redesign: stats, filters, polished table and note strip. */
.exact-page-orders .order-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.exact-page-orders .order-summary-grid article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 106px;
    padding: 18px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(43, 82, 140, .055);
}

.order-summary-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background-color: #eef5ff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 34px 34px;
}

.order-summary-icon.total {
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 5.8h13.4l5.1 5.1v19.3H10V5.8Z' stroke='%231260f6' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M23.2 6v5.2h5.2M14.6 17h8M14.6 23h6' stroke='%231260f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.order-summary-icon.pending {
    background-color: #fff7e6;
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='18' r='11.5' stroke='%23c99118' stroke-width='3'/%3E%3Cpath d='M18 11.8v7.1l4.5 2.7' stroke='%23c99118' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.order-summary-icon.paid {
    background-color: #eafaf1;
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='18' r='12' stroke='%2320a346' stroke-width='3'/%3E%3Cpath d='m12.6 18.4 3.5 3.5 7.6-8.1' stroke='%2320a346' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.order-summary-icon.active {
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 5.5 27 9.4v7.9c0 5.2-3.5 9.8-9 11.9-5.5-2.1-9-6.7-9-11.9V9.4l9-3.9Z' stroke='%231260f6' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m14.2 18.1 2.5 2.5 5.4-5.8' stroke='%231260f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.order-summary-grid span {
    display: block;
    color: #73839a;
    font-size: 13px;
    font-weight: 760;
}

.order-summary-grid b {
    display: block;
    margin-top: 5px;
    color: #071a3a;
    font-size: 28px;
    line-height: 1.05;
}

.order-summary-grid p {
    margin-top: 6px;
    color: #73839a;
    font-size: 12px;
}

.exact-orders-panel {
    min-height: 0;
}

.orders-title-row {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.order-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-filter-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    height: 36px;
    color: #52647d;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 820;
}

.exact-orders-panel .exact-order-table {
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.exact-orders-panel .exact-order-table th {
    height: 48px;
    color: #53647f;
    background: #f6f9ff;
    font-size: 13px;
    font-weight: 900;
}

.exact-orders-panel .exact-order-table td {
    height: 58px;
    color: #52627b;
    font-size: 13px;
    vertical-align: middle;
}

.exact-orders-panel .exact-order-table th,
.exact-orders-panel .exact-order-table td {
    padding: 12px 12px;
    white-space: nowrap;
}

.order-no {
    color: #071a3a;
    font-size: 13px;
    font-weight: 900;
}

.order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.order-status.pending {
    color: #b7791f;
    background: #fff7e6;
}

.order-status.paid {
    color: #20a346;
    background: #eafaf1;
}

.order-status.cancelled {
    color: #8a96aa;
    background: #f1f4f8;
}

.order-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 900;
}

.order-action.pay {
    color: #fff;
    background: #1260f6;
    box-shadow: 0 10px 22px rgba(18, 96, 246, .2);
}

.order-action.detail {
    color: #1260f6;
    border: 1px solid #1260f6;
    background: #fff;
}

.orders-note-strip {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #c9dcff;
    border-radius: 8px;
    background: linear-gradient(135deg, #f2f7ff, #fff);
}

.orders-note-strip > i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #eaf3ff url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 4.8 23 8.2v6.9c0 4.8-3.1 8.6-8 10.3-4.9-1.7-8-5.5-8-10.3V8.2l8-3.4Z' stroke='%231260f6' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='m11.6 15.6 2.2 2.2 4.9-5.3' stroke='%231260f6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}

.orders-note-strip p {
    color: #315987;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 760;
}

/* Order detail page: sidebar user-center layout with polished detail cards. */
.exact-page-order_detail .exact-hero-card {
    margin-bottom: 18px;
    border-color: #c9dcff;
    background:
        radial-gradient(circle at 82% 24%, rgba(18, 96, 246, .13), transparent 30%),
        linear-gradient(135deg, #fff 0%, #f4f8ff 58%, #eaf3ff 100%);
}

.exact-page-order_detail .exact-hero-art .art-card {
    background:
        linear-gradient(180deg, #5a95ff 0 24px, transparent 24px),
        linear-gradient(135deg, #fff, #eaf3ff);
}

.order-detail-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.order-detail-stat-grid article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 106px;
    padding: 18px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(43, 82, 140, .055);
}

.detail-stat-icon,
.detail-field-icon,
.detail-action-icon,
.order-detail-unlock .ec-service {
    display: block;
    color: #1260f6;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.detail-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background-color: #eef5ff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 34px 34px;
}

.detail-stat-icon.status,
.detail-stat-icon.date,
.detail-stat-icon.version,
.detail-stat-icon.amount {
    background-color: #eef5ff;
    background-image: none;
    -webkit-mask-size: 34px 34px;
    mask-size: 34px 34px;
}

.detail-stat-icon.status.paid {
    color: #20a346;
    background-color: currentColor;
}

.detail-stat-icon.status.pending {
    color: #c99118;
    background-color: currentColor;
}

.detail-stat-icon.status.cancelled {
    color: #8a96aa;
    background-color: currentColor;
}

.detail-stat-icon.status {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.8 32.8 9.7v10.1c0 7.1-4.6 13.5-11.8 16.5C13.8 33.3 9.2 26.9 9.2 19.8V9.7L21 4.8Zm7.7 13.2a2.3 2.3 0 0 0-3.3-3.2l-6.6 6.8-2.2-2.2a2.3 2.3 0 0 0-3.2 3.3l3.9 3.8a2.3 2.3 0 0 0 3.2 0l8.2-8.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.8 32.8 9.7v10.1c0 7.1-4.6 13.5-11.8 16.5C13.8 33.3 9.2 26.9 9.2 19.8V9.7L21 4.8Zm7.7 13.2a2.3 2.3 0 0 0-3.3-3.2l-6.6 6.8-2.2-2.2a2.3 2.3 0 0 0-3.2 3.3l3.9 3.8a2.3 2.3 0 0 0 3.2 0l8.2-8.5Z'/%3E%3C/svg%3E");
}

.detail-stat-icon.amount {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11.5A4.5 4.5 0 0 1 11.5 7h19A4.5 4.5 0 0 1 35 11.5v19a4.5 4.5 0 0 1-4.5 4.5h-19A4.5 4.5 0 0 1 7 30.5v-19Zm8.2 5.1a2.2 2.2 0 0 0 0 4.4h3.6v2.1h-2.6a2.1 2.1 0 0 0 0 4.2h2.6v2a2.2 2.2 0 0 0 4.4 0v-2h2.6a2.1 2.1 0 0 0 0-4.2h-2.6V21h3.6a2.2 2.2 0 0 0 0-4.4H15.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11.5A4.5 4.5 0 0 1 11.5 7h19A4.5 4.5 0 0 1 35 11.5v19a4.5 4.5 0 0 1-4.5 4.5h-19A4.5 4.5 0 0 1 7 30.5v-19Zm8.2 5.1a2.2 2.2 0 0 0 0 4.4h3.6v2.1h-2.6a2.1 2.1 0 0 0 0 4.2h2.6v2a2.2 2.2 0 0 0 4.4 0v-2h2.6a2.1 2.1 0 0 0 0-4.2h-2.6V21h3.6a2.2 2.2 0 0 0 0-4.4H15.2Z'/%3E%3C/svg%3E");
}

.detail-stat-icon.date {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a2.4 2.4 0 0 1 2.4 2.4V9h13.2V7.4a2.4 2.4 0 0 1 4.8 0V9H34a4 4 0 0 1 4 4v19a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V13a4 4 0 0 1 4-4h1.6V7.4A2.4 2.4 0 0 1 12 5Zm21 15H9v11h24V20Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5a2.4 2.4 0 0 1 2.4 2.4V9h13.2V7.4a2.4 2.4 0 0 1 4.8 0V9H34a4 4 0 0 1 4 4v19a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V13a4 4 0 0 1 4-4h1.6V7.4A2.4 2.4 0 0 1 12 5Zm21 15H9v11h24V20Z'/%3E%3C/svg%3E");
}

.detail-stat-icon.version {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4 33 9.2v23.6L21 38 9 32.8V9.2L21 4Zm0 6.2-6.5 2.8 6.5 2.8 6.5-2.8L21 10.2Zm-7.2 8.1v10.9l4.9 2.2V20.5l-4.9-2.2Zm14.4 0-4.9 2.2v10.9l4.9-2.2V18.3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4 33 9.2v23.6L21 38 9 32.8V9.2L21 4Zm0 6.2-6.5 2.8 6.5 2.8 6.5-2.8L21 10.2Zm-7.2 8.1v10.9l4.9 2.2V20.5l-4.9-2.2Zm14.4 0-4.9 2.2v10.9l4.9-2.2V18.3Z'/%3E%3C/svg%3E");
}

.order-detail-stat-grid span,
.order-detail-fields span {
    display: block;
    color: #73839a;
    font-size: 13px;
    font-weight: 780;
}

.order-detail-stat-grid b {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #071a3a;
    font-size: 24px;
    line-height: 1.08;
    font-weight: 930;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-detail-stat-grid p {
    margin-top: 6px;
    color: #73839a;
    font-size: 12px;
}

.order-detail-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 18px;
}

.order-detail-info-panel,
.order-detail-service-panel {
    min-height: 0;
}

.order-detail-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.order-detail-fields article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid #d7e5f8;
    border-radius: 8px;
    background: #fff;
}

.detail-field-icon {
    width: 28px;
    height: 28px;
}

.detail-field-icon.order {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.6 3.4h10.8c.7 0 1.3.3 1.8.8l2.4 2.4c.5.5.8 1.1.8 1.8v14.2a2.6 2.6 0 0 1-2.6 2.6H6.2a2.6 2.6 0 0 1-2.6-2.6V6a2.6 2.6 0 0 1 2.6-2.6h2.4Zm9.8 2.7v3.2c0 .7.6 1.3 1.3 1.3h3.2l-4.5-4.5ZM8.4 11.5a1.4 1.4 0 0 0 0 2.8h11.2a1.4 1.4 0 0 0 0-2.8H8.4Zm0 5.2a1.4 1.4 0 0 0 0 2.8h7.2a1.4 1.4 0 0 0 0-2.8H8.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.6 3.4h10.8c.7 0 1.3.3 1.8.8l2.4 2.4c.5.5.8 1.1.8 1.8v14.2a2.6 2.6 0 0 1-2.6 2.6H6.2a2.6 2.6 0 0 1-2.6-2.6V6a2.6 2.6 0 0 1 2.6-2.6h2.4Zm9.8 2.7v3.2c0 .7.6 1.3 1.3 1.3h3.2l-4.5-4.5ZM8.4 11.5a1.4 1.4 0 0 0 0 2.8h11.2a1.4 1.4 0 0 0 0-2.8H8.4Zm0 5.2a1.4 1.4 0 0 0 0 2.8h7.2a1.4 1.4 0 0 0 0-2.8H8.4Z'/%3E%3C/svg%3E");
}

.detail-field-icon.package,
.detail-field-icon.network {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3 23 7v14l-9 4-9-4V7l9-4Zm0 4.6-4.4 2 4.4 2 4.4-2-4.4-2Zm-5 5.6v5.2l3.2 1.5v-5.2L9 13.2Zm10 0-3.2 1.5v5.2l3.2-1.5v-5.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3 23 7v14l-9 4-9-4V7l9-4Zm0 4.6-4.4 2 4.4 2 4.4-2-4.4-2Zm-5 5.6v5.2l3.2 1.5v-5.2L9 13.2Zm10 0-3.2 1.5v5.2l3.2-1.5v-5.2Z'/%3E%3C/svg%3E");
}

.detail-field-icon.email {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h18a2.8 2.8 0 0 1 2.8 2.8v9A2.8 2.8 0 0 1 23 21.6H5a2.8 2.8 0 0 1-2.8-2.8v-9A2.8 2.8 0 0 1 5 7Zm.7 3.5 6.4 5.1a3 3 0 0 0 3.8 0l6.4-5.1H5.7Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h18a2.8 2.8 0 0 1 2.8 2.8v9A2.8 2.8 0 0 1 23 21.6H5a2.8 2.8 0 0 1-2.8-2.8v-9A2.8 2.8 0 0 1 5 7Zm.7 3.5 6.4 5.1a3 3 0 0 0 3.8 0l6.4-5.1H5.7Z'/%3E%3C/svg%3E");
}

.detail-field-icon.contact {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.5 4.2 3.9 12.1c-1.2.5-1.1 2.2.1 2.5l5.7 1.7 2.1 6.1c.4 1.1 1.9 1.3 2.6.3l3.1-4.1 4.9 3.6c1 .7 2.3.2 2.5-1L27 6.1c.2-1.2-1.2-2.3-2.5-1.9Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.5 4.2 3.9 12.1c-1.2.5-1.1 2.2.1 2.5l5.7 1.7 2.1 6.1c.4 1.1 1.9 1.3 2.6.3l3.1-4.1 4.9 3.6c1 .7 2.3.2 2.5-1L27 6.1c.2-1.2-1.2-2.3-2.5-1.9Z'/%3E%3C/svg%3E");
}

.detail-field-icon.payment {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Zm3 3v3h14v-3H7Zm2 7a1.5 1.5 0 0 0 0 3h5a1.5 1.5 0 0 0 0-3H9Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Zm3 3v3h14v-3H7Zm2 7a1.5 1.5 0 0 0 0 3h5a1.5 1.5 0 0 0 0-3H9Z'/%3E%3C/svg%3E");
}

.detail-field-icon.created,
.detail-field-icon.paid {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3a2 2 0 0 1 2 2v1h8V5a2 2 0 1 1 4 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1V5a2 2 0 0 1 2-2Zm14 11H6v7h16v-7Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3a2 2 0 0 1 2 2v1h8V5a2 2 0 1 1 4 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1V5a2 2 0 0 1 2-2Zm14 11H6v7h16v-7Z'/%3E%3C/svg%3E");
}

.order-detail-fields b {
    display: block;
    min-width: 0;
    margin-top: 5px;
    overflow: hidden;
    color: #071a3a;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-detail-service-panel {
    padding: 22px;
}

.order-service-state {
    display: grid;
    justify-items: center;
    text-align: center;
    padding: 8px 0 20px;
    border-bottom: 1px solid #e2ebf8;
}

.order-service-state > i {
    width: 72px;
    height: 72px;
    color: #1260f6;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 7.5 58 16.9v18.8c0 13.1-8.6 23.6-22 28.8-13.4-5.2-22-15.7-22-28.8V16.9l22-9.4Zm14.8 24a4.2 4.2 0 0 0-6.1-5.8L33.5 37.5l-5-5a4.2 4.2 0 0 0-5.9 5.9l8 8a4.2 4.2 0 0 0 5.9 0l14.3-14.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 7.5 58 16.9v18.8c0 13.1-8.6 23.6-22 28.8-13.4-5.2-22-15.7-22-28.8V16.9l22-9.4Zm14.8 24a4.2 4.2 0 0 0-6.1-5.8L33.5 37.5l-5-5a4.2 4.2 0 0 0-5.9 5.9l8 8a4.2 4.2 0 0 0 5.9 0l14.3-14.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.order-service-state > i.pending {
    color: #c99118;
}

.order-service-state h2 {
    margin: 14px 0 8px;
    color: #071a3a;
    font-size: 24px;
    font-weight: 930;
}

.order-service-state p {
    color: #65758d;
    font-size: 13px;
    line-height: 1.6;
}

.order-service-progress {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #d7e5f8;
    border-radius: 8px;
    background: #f8fbff;
}

.order-service-progress > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #52647f;
    font-size: 13px;
    font-weight: 800;
}

.order-service-progress > div b {
    color: #1260f6;
}

.order-service-progress > em {
    display: block;
    height: 9px;
    margin: 12px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e3ecfa;
}

.order-service-progress > em i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1260f6, #62a0ff);
}

.order-service-progress p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #73839a;
    font-size: 12px;
}

.order-service-actions {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.order-service-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    color: #1260f6;
    border: 1px solid #1260f6;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 900;
}

.order-service-actions a.primary {
    color: #fff;
    background: #1260f6;
    box-shadow: 0 12px 24px rgba(18, 96, 246, .2);
}

.detail-action-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.detail-action-icon.download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a1.5 1.5 0 0 1 1.5 1.5v8l2.6-2.6A1.5 1.5 0 0 1 18.2 12l-5.1 5.1a1.5 1.5 0 0 1-2.2 0L5.8 12a1.5 1.5 0 1 1 2.1-2.1l2.6 2.6v-8A1.5 1.5 0 0 1 12 3Zm-7 15.5A1.5 1.5 0 0 1 6.5 17h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 5 18.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a1.5 1.5 0 0 1 1.5 1.5v8l2.6-2.6A1.5 1.5 0 0 1 18.2 12l-5.1 5.1a1.5 1.5 0 0 1-2.2 0L5.8 12a1.5 1.5 0 1 1 2.1-2.1l2.6 2.6v-8A1.5 1.5 0 0 1 12 3Zm-7 15.5A1.5 1.5 0 0 1 6.5 17h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 5 18.5Z'/%3E%3C/svg%3E");
}

.detail-action-icon.play {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-1.9 5.8a1.3 1.3 0 0 1 2-.1l3.5 2.3a1.3 1.3 0 0 1 0 2.1l-3.5 2.3a1.3 1.3 0 0 1-2-.1V8.8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-1.9 5.8a1.3 1.3 0 0 1 2-.1l3.5 2.3a1.3 1.3 0 0 1 0 2.1l-3.5 2.3a1.3 1.3 0 0 1-2-.1V8.8Z'/%3E%3C/svg%3E");
}

.detail-action-icon.order,
.detail-action-icon.back {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.3 5h13.4A2.3 2.3 0 0 1 21 7.3v9.4a2.3 2.3 0 0 1-2.3 2.3H9.1l1.9 1.9a1.4 1.4 0 1 1-2 2l-4.2-4.2a1.4 1.4 0 0 1 0-2L9 12.5a1.4 1.4 0 0 1 2 2L9.1 16.4h8.8V7.6H5.3a1.3 1.3 0 0 1 0-2.6Zm1.6 5.2a1.2 1.2 0 0 1 1.2-1.2h6.7a1.2 1.2 0 0 1 0 2.4H8.1a1.2 1.2 0 0 1-1.2-1.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.3 5h13.4A2.3 2.3 0 0 1 21 7.3v9.4a2.3 2.3 0 0 1-2.3 2.3H9.1l1.9 1.9a1.4 1.4 0 1 1-2 2l-4.2-4.2a1.4 1.4 0 0 1 0-2L9 12.5a1.4 1.4 0 0 1 2 2L9.1 16.4h8.8V7.6H5.3a1.3 1.3 0 0 1 0-2.6Zm1.6 5.2a1.2 1.2 0 0 1 1.2-1.2h6.7a1.2 1.2 0 0 1 0 2.4H8.1a1.2 1.2 0 0 1-1.2-1.2Z'/%3E%3C/svg%3E");
}

.order-detail-unlock {
    margin-top: 18px;
}

.order-detail-unlock > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.order-detail-unlock article {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 16px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.order-detail-unlock .ec-service {
    width: 44px;
    height: 44px;
}

.order-detail-unlock .ec-service:before,
.order-detail-unlock .ec-service:after {
    content: none !important;
    display: none !important;
}

.order-detail-unlock .ec-service.download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 6.5a2.5 2.5 0 0 1 2.5 2.5v13.3l4.1-4.1a2.5 2.5 0 1 1 3.5 3.5l-8.3 8.3a2.5 2.5 0 0 1-3.6 0l-8.3-8.3a2.5 2.5 0 0 1 3.5-3.5l4.1 4.1V9A2.5 2.5 0 0 1 21 6.5Zm-11.2 26a2.5 2.5 0 0 1 2.5-2.5h17.4a2.5 2.5 0 0 1 0 5H12.3a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 6.5a2.5 2.5 0 0 1 2.5 2.5v13.3l4.1-4.1a2.5 2.5 0 1 1 3.5 3.5l-8.3 8.3a2.5 2.5 0 0 1-3.6 0l-8.3-8.3a2.5 2.5 0 0 1 3.5-3.5l4.1 4.1V9A2.5 2.5 0 0 1 21 6.5Zm-11.2 26a2.5 2.5 0 0 1 2.5-2.5h17.4a2.5 2.5 0 0 1 0 5H12.3a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3C/svg%3E");
}

.order-detail-unlock .ec-service.play {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.5a16.5 16.5 0 1 0 0 33 16.5 16.5 0 0 0 0-33Zm-3.3 11.1a2.2 2.2 0 0 1 3.4-1.9l7.2 5.4a2.4 2.4 0 0 1 0 3.8l-7.2 5.4a2.2 2.2 0 0 1-3.4-1.9V15.6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.5a16.5 16.5 0 1 0 0 33 16.5 16.5 0 0 0 0-33Zm-3.3 11.1a2.2 2.2 0 0 1 3.4-1.9l7.2 5.4a2.4 2.4 0 0 1 0 3.8l-7.2 5.4a2.2 2.2 0 0 1-3.4-1.9V15.6Z'/%3E%3C/svg%3E");
}

.order-detail-unlock .ec-service.update {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.6 11.4A13.5 13.5 0 0 0 8.4 17a2.5 2.5 0 0 0 4.8 1.5 8.5 8.5 0 0 1 14.1-3.6l-2.4.2a2.4 2.4 0 1 0 .4 4.8l7.4-.6a2.4 2.4 0 0 0 2.2-2.5l-.5-7.4a2.4 2.4 0 1 0-4.8.4l.1 1.6Zm2.9 10.1a2.5 2.5 0 0 0-3.1 1.7 8.5 8.5 0 0 1-14.1 3.9l2.1-.1a2.4 2.4 0 1 0-.3-4.8l-7.4.5a2.4 2.4 0 0 0-2.2 2.6l.6 7.4a2.4 2.4 0 0 0 4.8-.4l-.2-1.7a13.5 13.5 0 0 0 21.5-6 2.5 2.5 0 0 0-1.7-3.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.6 11.4A13.5 13.5 0 0 0 8.4 17a2.5 2.5 0 0 0 4.8 1.5 8.5 8.5 0 0 1 14.1-3.6l-2.4.2a2.4 2.4 0 1 0 .4 4.8l7.4-.6a2.4 2.4 0 0 0 2.2-2.5l-.5-7.4a2.4 2.4 0 1 0-4.8.4l.1 1.6Zm2.9 10.1a2.5 2.5 0 0 0-3.1 1.7 8.5 8.5 0 0 1-14.1 3.9l2.1-.1a2.4 2.4 0 1 0-.3-4.8l-7.4.5a2.4 2.4 0 0 0-2.2 2.6l.6 7.4a2.4 2.4 0 0 0 4.8-.4l-.2-1.7a13.5 13.5 0 0 0 21.5-6 2.5 2.5 0 0 0-1.7-3.1Z'/%3E%3C/svg%3E");
}

.order-detail-unlock .ec-service.headset {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 5.5A13.5 13.5 0 0 0 7.5 19v7.2a5.8 5.8 0 0 0 5.8 5.8H15a2.5 2.5 0 0 0 2.5-2.5v-6.7a2.5 2.5 0 0 0-2.5-2.5h-2.5V19a8.5 8.5 0 0 1 17 0v1.3H27a2.5 2.5 0 0 0-2.5 2.5v6.7A2.5 2.5 0 0 0 27 32h2a6.5 6.5 0 0 1-5.2 2.4H22a2.1 2.1 0 0 0 0 4.2h1.8a10.7 10.7 0 0 0 10.7-10.7V19A13.5 13.5 0 0 0 21 5.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 5.5A13.5 13.5 0 0 0 7.5 19v7.2a5.8 5.8 0 0 0 5.8 5.8H15a2.5 2.5 0 0 0 2.5-2.5v-6.7a2.5 2.5 0 0 0-2.5-2.5h-2.5V19a8.5 8.5 0 0 1 17 0v1.3H27a2.5 2.5 0 0 0-2.5 2.5v6.7A2.5 2.5 0 0 0 27 32h2a6.5 6.5 0 0 1-5.2 2.4H22a2.1 2.1 0 0 0 0 4.2h1.8a10.7 10.7 0 0 0 10.7-10.7V19A13.5 13.5 0 0 0 21 5.5Z'/%3E%3C/svg%3E");
}

.order-detail-unlock b {
    display: block;
    color: #071a3a;
    font-size: 15px;
    font-weight: 900;
}

.order-detail-unlock p {
    margin-top: 5px;
    color: #667791;
    font-size: 12px;
    line-height: 1.45;
}

/* Continue payment page: user-center payment confirmation layout. */
.exact-page-order_pay .exact-hero-card {
    margin-bottom: 18px;
}

.pay-continue-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 18px;
}

.pay-continue-card,
.pay-unlock-strip {
    border: 1px solid #d4e2f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(42, 84, 154, .06);
}

.pay-order-card {
    padding: 22px;
}

.pay-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.pay-card-head span {
    display: block;
    color: #1260f6;
    font-size: 14px;
    font-weight: 880;
}

.pay-card-head h2 {
    margin-top: 7px;
    color: #071a3a;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 930;
    letter-spacing: 0;
}

.pay-amount-box {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 118px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #efcf82;
    border-radius: 8px;
    background:
        radial-gradient(circle at 90% 12%, rgba(212, 161, 45, .12), transparent 26%),
        linear-gradient(135deg, #fffdf7 0%, #fff 54%, #f5f9ff 100%);
}

.pay-usdt-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.74), transparent 32%),
        linear-gradient(145deg, #236fff, #1260f6);
    position: relative;
    box-shadow: 0 16px 30px rgba(18, 96, 246, .24);
}

.pay-usdt-icon:before {
    content: "";
    position: absolute;
    inset: 16px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9.3a2.2 2.2 0 0 1 2.2-2.2h17.6a2.2 2.2 0 0 1 0 4.4h-6.6v4.1h4.7a2 2 0 1 1 0 4h-4.7v6.7a2.2 2.2 0 0 1-4.4 0v-6.7h-4.7a2 2 0 1 1 0-4h4.7v-4.1H9.2A2.2 2.2 0 0 1 7 9.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9.3a2.2 2.2 0 0 1 2.2-2.2h17.6a2.2 2.2 0 0 1 0 4.4h-6.6v4.1h4.7a2 2 0 1 1 0 4h-4.7v6.7a2.2 2.2 0 0 1-4.4 0v-6.7h-4.7a2 2 0 1 1 0-4h4.7v-4.1H9.2A2.2 2.2 0 0 1 7 9.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pay-amount-box span {
    display: block;
    color: #7a6a45;
    font-size: 14px;
    font-weight: 850;
}

.pay-amount-box strong {
    display: inline-block;
    margin-top: 3px;
    color: #cf9307;
    font-size: 50px;
    line-height: 1;
    font-weight: 940;
}

.pay-amount-box em {
    margin-left: 9px;
    color: #071a3a;
    font-size: 21px;
    font-style: normal;
    font-weight: 900;
}

.pay-order-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pay-order-fields article {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e0e9f7;
    border-radius: 8px;
    background: #f8fbff;
}

.pay-order-fields span {
    display: block;
    color: #72829a;
    font-size: 13px;
    font-weight: 780;
}

.pay-order-fields b {
    display: block;
    min-width: 0;
    margin-top: 7px;
    overflow: hidden;
    color: #071a3a;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 890;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-safe-note {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    padding: 13px 15px;
    border: 1px solid #bcd5ff;
    border-radius: 8px;
    background: linear-gradient(135deg, #f3f8ff, #fff);
}

.pay-safe-note i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #eaf3ff;
    position: relative;
}

.pay-safe-note i:before {
    content: "";
    position: absolute;
    inset: 8px;
    background: #1260f6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2.8 23 6.7v7.2c0 5.4-3.4 9.2-9 11.3-5.6-2.1-9-5.9-9-11.3V6.7l9-3.9Zm5.2 9.3a1.8 1.8 0 0 0-2.6-2.5l-4 4.2-1.3-1.3a1.8 1.8 0 0 0-2.5 2.6l2.6 2.5a1.8 1.8 0 0 0 2.5 0l5.3-5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2.8 23 6.7v7.2c0 5.4-3.4 9.2-9 11.3-5.6-2.1-9-5.9-9-11.3V6.7l9-3.9Zm5.2 9.3a1.8 1.8 0 0 0-2.6-2.5l-4 4.2-1.3-1.3a1.8 1.8 0 0 0-2.5 2.6l2.6 2.5a1.8 1.8 0 0 0 2.5 0l5.3-5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pay-safe-note p {
    color: #315987;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 760;
}

.pay-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 142px;
    gap: 12px;
}

.pay-primary-btn,
.pay-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.pay-primary-btn {
    gap: 10px;
    color: #fff;
    background: linear-gradient(135deg, #d2a22e, #c78900);
    box-shadow: 0 14px 28px rgba(198, 137, 0, .22);
}

.pay-primary-btn i {
    width: 24px;
    height: 22px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pay-primary-btn.disabled {
    color: #8a6a1a;
    background: #fff5dc;
    box-shadow: none;
}

.pay-secondary-btn {
    color: #1260f6;
    border: 1px solid #1260f6;
    background: #fff;
}

.pay-flow-panel {
    padding: 20px;
}

.pay-flow-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
    border: 1px solid #efcf82;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #fffdf7, #fff);
}

.pay-flow-summary article {
    min-width: 0;
    padding: 16px 10px;
    text-align: center;
}

.pay-flow-summary article + article {
    border-left: 1px solid #e4ecf7;
}

.pay-flow-summary span {
    display: block;
    color: #6f7d92;
    font-size: 12px;
    font-weight: 800;
}

.pay-flow-summary b {
    display: block;
    margin-top: 7px;
    overflow: hidden;
    color: #071a3a;
    font-size: 19px;
    line-height: 1.05;
    font-weight: 940;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-flow-summary article:first-child b {
    color: #cf9307;
    font-size: 30px;
}

.pay-flow-summary em {
    display: block;
    margin-top: 5px;
    color: #65758d;
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
}

.pay-flow-panel h2 {
    margin-bottom: 12px;
    color: #071a3a;
    font-size: 22px;
    font-weight: 930;
}

.pay-flow-list {
    display: grid;
    gap: 14px;
}

.pay-flow-list article {
    display: grid;
    grid-template-columns: 26px 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    position: relative;
}

.pay-flow-list article:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 32px;
    bottom: -15px;
    width: 2px;
    background: #dce7f7;
}

.pay-flow-list article:last-child:before {
    content: none;
}

.pay-flow-list article > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #fff;
    border-radius: 50%;
    background: #1260f6;
    font-size: 13px;
    font-weight: 900;
    position: relative;
    z-index: 1;
}

.pay-flow-list article > i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #edf5ff;
    position: relative;
}

.pay-flow-list article > i:before {
    content: "";
    position: absolute;
    inset: 8px;
    background: #1260f6;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pay-step-check:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.5 20 6v6.5c0 4.7-3 8-8 9.8-5-1.8-8-5.1-8-9.8V6l8-3.5Zm4.7 8.6a1.6 1.6 0 0 0-2.4-2.2l-3.5 3.7-1.2-1.2a1.6 1.6 0 0 0-2.2 2.3l2.3 2.2a1.6 1.6 0 0 0 2.2 0l4.8-4.8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.5 20 6v6.5c0 4.7-3 8-8 9.8-5-1.8-8-5.1-8-9.8V6l8-3.5Zm4.7 8.6a1.6 1.6 0 0 0-2.4-2.2l-3.5 3.7-1.2-1.2a1.6 1.6 0 0 0-2.2 2.3l2.3 2.2a1.6 1.6 0 0 0 2.2 0l4.8-4.8Z'/%3E%3C/svg%3E");
}

.pay-step-gateway:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm3 1.8v2.5h10V7.3H7Zm1.5 6.1a1.4 1.4 0 0 0 0 2.8h7a1.4 1.4 0 0 0 0-2.8h-7Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm3 1.8v2.5h10V7.3H7Zm1.5 6.1a1.4 1.4 0 0 0 0 2.8h7a1.4 1.4 0 0 0 0-2.8h-7Z'/%3E%3C/svg%3E");
}

.pay-step-usdt:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6.8A1.8 1.8 0 0 1 6.8 5h10.4a1.8 1.8 0 1 1 0 3.6h-3.4v2.1h2.3a1.7 1.7 0 1 1 0 3.4h-2.3v4.1a1.8 1.8 0 0 1-3.6 0v-4.1H7.9a1.7 1.7 0 1 1 0-3.4h2.3V8.6H6.8A1.8 1.8 0 0 1 5 6.8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6.8A1.8 1.8 0 0 1 6.8 5h10.4a1.8 1.8 0 1 1 0 3.6h-3.4v2.1h2.3a1.7 1.7 0 1 1 0 3.4h-2.3v4.1a1.8 1.8 0 0 1-3.6 0v-4.1H7.9a1.7 1.7 0 1 1 0-3.4h2.3V8.6H6.8A1.8 1.8 0 0 1 5 6.8Z'/%3E%3C/svg%3E");
}

.pay-step-unlock:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 10.5V8.6a4.8 4.8 0 0 1 9.4-1.2 1.7 1.7 0 1 1-3.2.9 1.5 1.5 0 0 0-2.9.3v1.9h6.2a2.4 2.4 0 0 1 2.4 2.4v5.7a2.4 2.4 0 0 1-2.4 2.4H7.3a2.4 2.4 0 0 1-2.4-2.4v-5.7a2.4 2.4 0 0 1 2.3-2.4Zm4.8 7a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 10.5V8.6a4.8 4.8 0 0 1 9.4-1.2 1.7 1.7 0 1 1-3.2.9 1.5 1.5 0 0 0-2.9.3v1.9h6.2a2.4 2.4 0 0 1 2.4 2.4v5.7a2.4 2.4 0 0 1-2.4 2.4H7.3a2.4 2.4 0 0 1-2.4-2.4v-5.7a2.4 2.4 0 0 1 2.3-2.4Zm4.8 7a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4Z'/%3E%3C/svg%3E");
}

.pay-flow-list strong {
    display: block;
    color: #071a3a;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
}

.pay-flow-list p {
    margin-top: 4px;
    color: #6f7f99;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 650;
}

.pay-status-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d7e5f6;
    border-radius: 8px;
    background: #f8fbff;
}

.pay-status-preview article {
    text-align: center;
    min-width: 0;
}

.pay-status-preview article i {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 7px;
    border-radius: 50%;
    background: #eaf3ff;
    position: relative;
}

.pay-status-preview article i:before {
    content: "";
    position: absolute;
    inset: 9px;
    background: #1260f6;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pay-status-wait:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h12a1.6 1.6 0 0 1 0 3c-.2 2-1.3 3.6-3.1 5 1.8 1.4 2.9 3 3.1 5a1.6 1.6 0 0 1 0 3H5a1.6 1.6 0 0 1 0-3c.2-2 1.3-3.6 3.1-5C6.3 9.6 5.2 8 5 6a1.6 1.6 0 0 1 0-3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h12a1.6 1.6 0 0 1 0 3c-.2 2-1.3 3.6-3.1 5 1.8 1.4 2.9 3 3.1 5a1.6 1.6 0 0 1 0 3H5a1.6 1.6 0 0 1 0-3c.2-2 1.3-3.6 3.1-5C6.3 9.6 5.2 8 5 6a1.6 1.6 0 0 1 0-3Z'/%3E%3C/svg%3E");
}

.pay-status-card:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2v2h10V8H6Zm0 5v2h5v-2H6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2v2h10V8H6Zm0 5v2h5v-2H6Z'/%3E%3C/svg%3E");
}

.pay-status-open:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 9V7.5A4 4 0 0 1 15.8 6a1.5 1.5 0 0 1-2.8 1 1 1 0 0 0-2 .5V9h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h2Zm3 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 9V7.5A4 4 0 0 1 15.8 6a1.5 1.5 0 0 1-2.8 1 1 1 0 0 0-2 .5V9h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h2Zm3 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E");
}

.pay-status-preview b {
    display: block;
    color: #071a3a;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.pay-status-preview span {
    display: block;
    margin-top: 3px;
    color: #6f7f99;
    font-size: 12px;
    font-weight: 700;
}

.pay-status-preview > em {
    height: 1px;
    background: #cbd9ea;
}

.pay-unlock-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
    padding: 18px;
}

.pay-unlock-strip article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #e0e9f7;
    border-radius: 8px;
    background: #f9fbff;
}

.pay-unlock-strip .ec-service {
    display: block;
    width: 44px;
    height: 44px;
    color: #1260f6;
    background: currentColor;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pay-unlock-strip .ec-service:before,
.pay-unlock-strip .ec-service:after {
    content: none !important;
    display: none !important;
}

.pay-unlock-strip .ec-service.download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 6.5a2.5 2.5 0 0 1 2.5 2.5v13.3l4.1-4.1a2.5 2.5 0 1 1 3.5 3.5l-8.3 8.3a2.5 2.5 0 0 1-3.6 0l-8.3-8.3a2.5 2.5 0 0 1 3.5-3.5l4.1 4.1V9A2.5 2.5 0 0 1 21 6.5Zm-11.2 26a2.5 2.5 0 0 1 2.5-2.5h17.4a2.5 2.5 0 0 1 0 5H12.3a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 6.5a2.5 2.5 0 0 1 2.5 2.5v13.3l4.1-4.1a2.5 2.5 0 1 1 3.5 3.5l-8.3 8.3a2.5 2.5 0 0 1-3.6 0l-8.3-8.3a2.5 2.5 0 0 1 3.5-3.5l4.1 4.1V9A2.5 2.5 0 0 1 21 6.5Zm-11.2 26a2.5 2.5 0 0 1 2.5-2.5h17.4a2.5 2.5 0 0 1 0 5H12.3a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3C/svg%3E");
}

.pay-unlock-strip .ec-service.play {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.5a16.5 16.5 0 1 0 0 33 16.5 16.5 0 0 0 0-33Zm-3.3 11.1a2.2 2.2 0 0 1 3.4-1.9l7.2 5.4a2.4 2.4 0 0 1 0 3.8l-7.2 5.4a2.2 2.2 0 0 1-3.4-1.9V15.6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.5a16.5 16.5 0 1 0 0 33 16.5 16.5 0 0 0 0-33Zm-3.3 11.1a2.2 2.2 0 0 1 3.4-1.9l7.2 5.4a2.4 2.4 0 0 1 0 3.8l-7.2 5.4a2.2 2.2 0 0 1-3.4-1.9V15.6Z'/%3E%3C/svg%3E");
}

.pay-unlock-strip .ec-service.update {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.6 11.4A13.5 13.5 0 0 0 8.4 17a2.5 2.5 0 0 0 4.8 1.5 8.5 8.5 0 0 1 14.1-3.6l-2.4.2a2.4 2.4 0 1 0 .4 4.8l7.4-.6a2.4 2.4 0 0 0 2.2-2.5l-.5-7.4a2.4 2.4 0 1 0-4.8.4l.1 1.6Zm2.9 10.1a2.5 2.5 0 0 0-3.1 1.7 8.5 8.5 0 0 1-14.1 3.9l2.1-.1a2.4 2.4 0 1 0-.3-4.8l-7.4.5a2.4 2.4 0 0 0-2.2 2.6l.6 7.4a2.4 2.4 0 0 0 4.8-.4l-.2-1.7a13.5 13.5 0 0 0 21.5-6 2.5 2.5 0 0 0-1.7-3.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.6 11.4A13.5 13.5 0 0 0 8.4 17a2.5 2.5 0 0 0 4.8 1.5 8.5 8.5 0 0 1 14.1-3.6l-2.4.2a2.4 2.4 0 1 0 .4 4.8l7.4-.6a2.4 2.4 0 0 0 2.2-2.5l-.5-7.4a2.4 2.4 0 1 0-4.8.4l.1 1.6Zm2.9 10.1a2.5 2.5 0 0 0-3.1 1.7 8.5 8.5 0 0 1-14.1 3.9l2.1-.1a2.4 2.4 0 1 0-.3-4.8l-7.4.5a2.4 2.4 0 0 0-2.2 2.6l.6 7.4a2.4 2.4 0 0 0 4.8-.4l-.2-1.7a13.5 13.5 0 0 0 21.5-6 2.5 2.5 0 0 0-1.7-3.1Z'/%3E%3C/svg%3E");
}

.pay-unlock-strip .ec-service.headset {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 5.5A13.5 13.5 0 0 0 7.5 19v7.2a5.8 5.8 0 0 0 5.8 5.8H15a2.5 2.5 0 0 0 2.5-2.5v-6.7a2.5 2.5 0 0 0-2.5-2.5h-2.5V19a8.5 8.5 0 0 1 17 0v1.3H27a2.5 2.5 0 0 0-2.5 2.5v6.7A2.5 2.5 0 0 0 27 32h2a6.5 6.5 0 0 1-5.2 2.4H22a2.1 2.1 0 0 0 0 4.2h1.8a10.7 10.7 0 0 0 10.7-10.7V19A13.5 13.5 0 0 0 21 5.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 5.5A13.5 13.5 0 0 0 7.5 19v7.2a5.8 5.8 0 0 0 5.8 5.8H15a2.5 2.5 0 0 0 2.5-2.5v-6.7a2.5 2.5 0 0 0-2.5-2.5h-2.5V19a8.5 8.5 0 0 1 17 0v1.3H27a2.5 2.5 0 0 0-2.5 2.5v6.7A2.5 2.5 0 0 0 27 32h2a6.5 6.5 0 0 1-5.2 2.4H22a2.1 2.1 0 0 0 0 4.2h1.8a10.7 10.7 0 0 0 10.7-10.7V19A13.5 13.5 0 0 0 21 5.5Z'/%3E%3C/svg%3E");
}

.pay-unlock-strip b {
    display: block;
    color: #071a3a;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.pay-unlock-strip p {
    margin-top: 5px;
    color: #667791;
    font-size: 12px;
    line-height: 1.45;
}

/* Continue payment page exact redesign: match the confirmed buy-flow mockup. */
.exact-page-order_pay .center-pay-hero {
    min-height: 188px;
    margin-bottom: 18px;
    padding: 34px 44px;
    overflow: hidden;
    border-color: #c9dcff;
    background:
        radial-gradient(circle at 78% 28%, rgba(18, 96, 246, .14), transparent 34%),
        linear-gradient(135deg, #fff 0%, #f4f8ff 58%, #eaf3ff 100%);
}

.exact-page-order_pay .center-pay-hero:before {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -134px;
    width: 760px;
    height: 250px;
    border: 1px solid rgba(18, 96, 246, .12);
    border-radius: 50%;
    transform: rotate(-8deg);
}

.exact-page-order_pay .center-pay-hero h1 {
    font-size: 42px;
    line-height: 1.12;
}

.exact-page-order_pay .center-pay-hero p {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.9;
}

.exact-page-order_pay .center-pay-hero .cube,
.exact-page-order_pay .center-pay-hero .art-shadow-card {
    display: none;
}

.exact-page-order_pay .center-pay-hero .exact-hero-art {
    width: 420px;
    height: 170px;
}

.exact-page-order_pay .center-pay-hero .art-base {
    left: 28px;
    right: 0;
    bottom: 0;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(18, 96, 246, .08), rgba(18, 96, 246, .2), rgba(18, 96, 246, .05));
    transform: rotate(-7deg);
}

.exact-page-order_pay .center-pay-hero .art-card {
    left: 132px;
    top: 14px;
    width: 198px;
    height: 112px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, #5591ff 0 22px, transparent 22px),
        linear-gradient(135deg, #fff, #eaf3ff);
    border: 1px solid #8eb6ff;
    box-shadow: 0 18px 32px rgba(18, 96, 246, .18);
    transform: perspective(500px) rotateY(-9deg) rotateX(5deg);
}

.exact-page-order_pay .center-pay-hero .art-card:before,
.exact-page-order_pay .center-pay-hero .art-card:after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 50%;
}

.exact-page-order_pay .center-pay-hero .art-card:before {
    left: 14px;
    top: 8px;
    width: 6px;
    height: 6px;
    box-shadow: 14px 0 0 #fff, 28px 0 0 #fff;
}

.exact-page-order_pay .center-pay-hero .art-card:after {
    left: 76px;
    top: 44px;
    width: 48px;
    height: 48px;
    border: 9px solid #1260f6;
    background: transparent;
    box-sizing: border-box;
}

.exact-page-order_pay .center-pay-hero .art-card i {
    left: -82px;
    top: 32px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,.72), transparent 30%),
        linear-gradient(145deg, #4f8cff, #1260f6);
    box-shadow: 0 18px 32px rgba(18, 96, 246, .22);
}

.exact-page-order_pay .center-pay-hero .art-card i:before {
    content: "";
    position: absolute;
    inset: 22px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12a2.5 2.5 0 0 1 2.5-2.5h21a2.5 2.5 0 0 1 0 5H23.5v5H29a2.3 2.3 0 0 1 0 4.6h-5.5v7.4a2.5 2.5 0 0 1-5 0v-7.4H13a2.3 2.3 0 0 1 0-4.6h5.5v-5h-8A2.5 2.5 0 0 1 8 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12a2.5 2.5 0 0 1 2.5-2.5h21a2.5 2.5 0 0 1 0 5H23.5v5H29a2.3 2.3 0 0 1 0 4.6h-5.5v7.4a2.5 2.5 0 0 1-5 0v-7.4H13a2.3 2.3 0 0 1 0-4.6h5.5v-5h-8A2.5 2.5 0 0 1 8 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.exact-page-order_pay .center-pay-hero .art-card b {
    right: -86px;
    top: 30px;
    width: 92px;
    height: 92px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.65), transparent 30%),
        linear-gradient(145deg, #65a0ff, #1260f6);
    box-shadow: 0 18px 34px rgba(18, 96, 246, .22);
}

.exact-page-order_pay .center-pay-hero .art-card b:before {
    content: "";
    position: absolute;
    inset: 22px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 5.5 38.5 12v11.2c0 8.1-5.3 14.3-14.5 18.2C14.8 37.5 9.5 31.3 9.5 23.2V12L24 5.5Zm8.5 15.1a2.7 2.7 0 0 0-4-3.6l-6.7 7.3-2.5-2.5a2.7 2.7 0 0 0-3.8 3.8l4.5 4.4a2.7 2.7 0 0 0 3.8-.1l8.7-9.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 5.5 38.5 12v11.2c0 8.1-5.3 14.3-14.5 18.2C14.8 37.5 9.5 31.3 9.5 23.2V12L24 5.5Zm8.5 15.1a2.7 2.7 0 0 0-4-3.6l-6.7 7.3-2.5-2.5a2.7 2.7 0 0 0-3.8 3.8l4.5 4.4a2.7 2.7 0 0 0 3.8-.1l8.7-9.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.exact-page-order_pay .center-pay-hero .art-card em {
    left: 140px;
    bottom: -18px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(145deg, #dfeaff, #88b4ff);
    transform: rotate(18deg);
}

.center-pay-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 454px;
    gap: 18px;
}

.center-pay-card,
.center-pay-unlock {
    border: 1px solid #cfe0f7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(42, 84, 154, .055);
}

.center-pay-info {
    min-width: 0;
    padding: 22px;
}

.center-pay-info > h2,
.center-pay-flow-card > h2,
.center-pay-unlock > h2 {
    margin: 0 0 16px;
    color: #071a3a;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 930;
}

.center-pay-inner {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
}

.center-pay-plan {
    min-height: 440px;
    padding: 21px 16px;
    border: 1px solid #e5bd68;
    border-radius: 8px;
    background: linear-gradient(180deg, #fffdf8, #fff);
}

.center-pay-plan .buy-crown {
    margin-bottom: 8px;
}

.center-pay-plan h3 {
    margin: 0;
    color: #a06900;
    font-size: 20px;
    line-height: 1.25;
    text-align: center;
    font-weight: 920;
}

.center-pay-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.center-pay-price strong {
    color: #d19200;
    font-size: 48px;
    line-height: 1;
    font-weight: 940;
}

.center-pay-price span {
    color: #071a3a;
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;
}

.center-pay-period {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 9px;
    color: #263856;
    font-size: 15px;
    font-weight: 800;
}

.center-pay-period i {
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid #263856;
    border-radius: 50%;
}

.center-pay-period i:before,
.center-pay-period i:after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 2px;
    height: 5px;
    border-radius: 2px;
    background: #263856;
    transform-origin: bottom;
}

.center-pay-period i:after {
    top: 7px;
    height: 4px;
    transform: rotate(90deg);
}

.center-pay-plan hr {
    height: 1px;
    margin: 17px 0;
    border: 0;
    background: #ead4a1;
}

.center-pay-plan > b {
    display: block;
    margin-bottom: 13px;
    color: #071a3a;
    font-size: 15px;
}

.center-pay-plan ul {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.center-pay-plan li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.center-pay-plan li strong,
.center-pay-unlock b {
    display: block;
    color: #071a3a;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 900;
}

.center-pay-plan li span,
.center-pay-unlock p {
    display: block;
    margin-top: 5px;
    color: #73839a;
    font-size: 12px;
    line-height: 1.4;
}

.center-pay-formlike {
    min-width: 0;
}

.center-pay-status-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 74px;
    align-items: center;
    gap: 10px;
    height: 50px;
    margin-bottom: 16px;
    padding: 0 14px;
    border: 1px solid #d6e4f7;
    border-radius: 8px;
    background: #f8fbff;
}

.center-pay-status-row span {
    color: #65758d;
    font-size: 14px;
    font-weight: 800;
}

.center-pay-status-row b {
    overflow: hidden;
    color: #071a3a;
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.center-pay-status-row .order-status {
    min-width: 66px;
    height: 28px;
    padding: 0 8px;
}

.center-pay-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.center-pay-fields article {
    min-width: 0;
    min-height: 68px;
    padding: 13px 14px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.center-pay-fields span {
    display: block;
    color: #6e7f98;
    font-size: 13px;
    font-weight: 800;
}

.center-pay-fields b {
    display: block;
    min-width: 0;
    margin-top: 7px;
    overflow: hidden;
    color: #071a3a;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.center-pay-form-tip,
.center-pay-flow-tip {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 39px;
    padding: 0 12px;
    color: #536c94;
    border: 1px solid #bcd1f2;
    border-radius: 7px;
    background: #eef5ff;
    font-size: 13px;
    font-weight: 760;
}

.center-pay-form-tip i,
.center-pay-flow-tip i {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.center-pay-form-tip i {
    border: 2px solid #1260f6;
    border-radius: 50%;
    position: relative;
}

.center-pay-form-tip i:before {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 2px;
    height: 7px;
    background: #1260f6;
}

.center-pay-form-tip i:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 12px;
    width: 2px;
    height: 2px;
    background: #1260f6;
}

.center-pay-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 138px;
    gap: 12px;
    margin-top: 14px;
}

.center-pay-submit,
.center-pay-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.center-pay-submit {
    gap: 9px;
    color: #fff;
    background: linear-gradient(135deg, #d2a22e, #c78900);
    box-shadow: 0 14px 30px rgba(198, 137, 0, .22);
}

.center-pay-submit i {
    width: 22px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.center-pay-submit.disabled {
    color: #8a6a1a;
    background: #fff5dc;
    box-shadow: none;
}

.center-pay-back {
    color: #1260f6;
    border: 1px solid #1260f6;
    background: #fff;
}

.center-pay-flow-card {
    padding: 22px;
}

.center-pay-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #efcf82;
    border-radius: 8px;
    background: linear-gradient(135deg, #fffdf7, #fff);
}

.center-pay-summary article {
    min-width: 0;
    padding: 16px 8px 14px;
    text-align: center;
}

.center-pay-summary article + article {
    border-left: 1px solid #e4ecf7;
}

.center-pay-summary span {
    display: block;
    color: #5f6f86;
    font-size: 12px;
    font-weight: 800;
}

.center-pay-summary b {
    display: block;
    margin-top: 7px;
    overflow: hidden;
    color: #071a3a;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 940;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.center-pay-summary article:first-child b {
    color: #cf9307;
    font-size: 32px;
}

.center-pay-summary em {
    display: block;
    margin-top: 5px;
    color: #65758d;
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
}

.center-pay-flow-card > h3,
.center-pay-status-preview h3 {
    margin: 0 0 13px;
    color: #071a3a;
    font-size: 16px;
    font-weight: 900;
}

.center-pay-steps {
    display: grid;
    gap: 13px;
}

.center-pay-steps article {
    display: grid;
    grid-template-columns: 25px 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    position: relative;
}

.center-pay-steps article:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 31px;
    bottom: -14px;
    width: 2px;
    background: #dce7f7;
}

.center-pay-steps article:last-child:before {
    content: none;
}

.center-pay-steps article > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: #fff;
    border-radius: 50%;
    background: #1260f6;
    font-size: 13px;
    font-weight: 900;
    position: relative;
    z-index: 1;
}

.center-pay-steps article > i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #edf5ff;
    position: relative;
}

.center-pay-steps article > i:before {
    content: "";
    position: absolute;
    inset: 8px;
    background: #1260f6;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.center-pay-steps strong {
    display: block;
    color: #071a3a;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
}

.center-pay-steps p {
    margin-top: 4px;
    color: #6f7f99;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 650;
}

.center-pay-status-preview {
    margin-top: 17px;
    padding: 14px;
    border: 1px solid #d7e5f6;
    border-radius: 8px;
    background: #f8fbff;
}

.center-pay-status-preview > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.center-pay-status-preview article {
    min-width: 0;
    text-align: center;
}

.center-pay-status-preview article i {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 7px;
    border-radius: 50%;
    background: #eaf3ff;
    position: relative;
}

.center-pay-status-preview article i:before {
    content: "";
    position: absolute;
    inset: 9px;
    background: #1260f6;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.center-pay-status-preview b {
    display: block;
    color: #071a3a;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.center-pay-status-preview span {
    display: block;
    margin-top: 3px;
    color: #6f7f99;
    font-size: 12px;
    font-weight: 700;
}

.center-pay-status-preview em {
    height: 1px;
    background: #cbd9ea;
}

.center-pay-flow-tip {
    margin-top: 14px;
    color: #9a6d00;
    border-color: #efcf82;
    background: #fff8e8;
}

.center-pay-flow-tip .textless-alert-icon {
    border: 2px solid #c89725;
    border-radius: 50%;
    background: transparent url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5.8v6.5' stroke='%23c89725' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M11 16.1h.1' stroke='%23c89725' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

.center-pay-flow-tip .textless-alert-icon:before,
.center-pay-flow-tip .textless-alert-icon:after {
    content: none !important;
    display: none !important;
}

.center-pay-unlock {
    margin-top: 18px;
    padding: 18px 22px 16px;
}

.center-pay-unlock > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.center-pay-unlock article {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 106px;
    padding: 18px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.center-pay-plan .buy-blue-icon,
.center-pay-unlock .buy-blue-icon {
    width: 42px;
    height: 42px;
    color: #1260f6;
    background: currentColor;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.center-pay-unlock .buy-blue-icon {
    width: 56px;
    height: 56px;
    padding: 0;
    color: #1260f6;
    background-color: currentColor;
}

.center-pay-plan .buy-blue-icon:before,
.center-pay-plan .buy-blue-icon:after,
.center-pay-unlock .buy-blue-icon:before,
.center-pay-unlock .buy-blue-icon:after {
    content: none !important;
    display: none !important;
}

.center-pay-plan .buy-blue-icon.download,
.center-pay-unlock .buy-blue-icon.download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 6.5a2.5 2.5 0 0 1 2.5 2.5v13.3l4.1-4.1a2.5 2.5 0 1 1 3.5 3.5l-8.3 8.3a2.5 2.5 0 0 1-3.6 0l-8.3-8.3a2.5 2.5 0 0 1 3.5-3.5l4.1 4.1V9A2.5 2.5 0 0 1 21 6.5Zm-11.2 26a2.5 2.5 0 0 1 2.5-2.5h17.4a2.5 2.5 0 0 1 0 5H12.3a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 6.5a2.5 2.5 0 0 1 2.5 2.5v13.3l4.1-4.1a2.5 2.5 0 1 1 3.5 3.5l-8.3 8.3a2.5 2.5 0 0 1-3.6 0l-8.3-8.3a2.5 2.5 0 0 1 3.5-3.5l4.1 4.1V9A2.5 2.5 0 0 1 21 6.5Zm-11.2 26a2.5 2.5 0 0 1 2.5-2.5h17.4a2.5 2.5 0 0 1 0 5H12.3a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3C/svg%3E");
}

.center-pay-plan .buy-blue-icon.play,
.center-pay-unlock .buy-blue-icon.play {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.5a16.5 16.5 0 1 0 0 33 16.5 16.5 0 0 0 0-33Zm-3.3 11.1a2.2 2.2 0 0 1 3.4-1.9l7.2 5.4a2.4 2.4 0 0 1 0 3.8l-7.2 5.4a2.2 2.2 0 0 1-3.4-1.9V15.6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.5a16.5 16.5 0 1 0 0 33 16.5 16.5 0 0 0 0-33Zm-3.3 11.1a2.2 2.2 0 0 1 3.4-1.9l7.2 5.4a2.4 2.4 0 0 1 0 3.8l-7.2 5.4a2.2 2.2 0 0 1-3.4-1.9V15.6Z'/%3E%3C/svg%3E");
}

.center-pay-plan .buy-blue-icon.update,
.center-pay-unlock .buy-blue-icon.update {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.6 11.4A13.5 13.5 0 0 0 8.4 17a2.5 2.5 0 0 0 4.8 1.5 8.5 8.5 0 0 1 14.1-3.6l-2.4.2a2.4 2.4 0 1 0 .4 4.8l7.4-.6a2.4 2.4 0 0 0 2.2-2.5l-.5-7.4a2.4 2.4 0 1 0-4.8.4l.1 1.6Zm2.9 10.1a2.5 2.5 0 0 0-3.1 1.7 8.5 8.5 0 0 1-14.1 3.9l2.1-.1a2.4 2.4 0 1 0-.3-4.8l-7.4.5a2.4 2.4 0 0 0-2.2 2.6l.6 7.4a2.4 2.4 0 0 0 4.8-.4l-.2-1.7a13.5 13.5 0 0 0 21.5-6 2.5 2.5 0 0 0-1.7-3.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.6 11.4A13.5 13.5 0 0 0 8.4 17a2.5 2.5 0 0 0 4.8 1.5 8.5 8.5 0 0 1 14.1-3.6l-2.4.2a2.4 2.4 0 1 0 .4 4.8l7.4-.6a2.4 2.4 0 0 0 2.2-2.5l-.5-7.4a2.4 2.4 0 1 0-4.8.4l.1 1.6Zm2.9 10.1a2.5 2.5 0 0 0-3.1 1.7 8.5 8.5 0 0 1-14.1 3.9l2.1-.1a2.4 2.4 0 1 0-.3-4.8l-7.4.5a2.4 2.4 0 0 0-2.2 2.6l.6 7.4a2.4 2.4 0 0 0 4.8-.4l-.2-1.7a13.5 13.5 0 0 0 21.5-6 2.5 2.5 0 0 0-1.7-3.1Z'/%3E%3C/svg%3E");
}

.center-pay-plan .buy-blue-icon.support,
.center-pay-unlock .buy-blue-icon.support {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 5.5A13.5 13.5 0 0 0 7.5 19v7.2a5.8 5.8 0 0 0 5.8 5.8H15a2.5 2.5 0 0 0 2.5-2.5v-6.7a2.5 2.5 0 0 0-2.5-2.5h-2.5V19a8.5 8.5 0 0 1 17 0v1.3H27a2.5 2.5 0 0 0-2.5 2.5v6.7A2.5 2.5 0 0 0 27 32h2a6.5 6.5 0 0 1-5.2 2.4H22a2.1 2.1 0 0 0 0 4.2h1.8a10.7 10.7 0 0 0 10.7-10.7V19A13.5 13.5 0 0 0 21 5.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 5.5A13.5 13.5 0 0 0 7.5 19v7.2a5.8 5.8 0 0 0 5.8 5.8H15a2.5 2.5 0 0 0 2.5-2.5v-6.7a2.5 2.5 0 0 0-2.5-2.5h-2.5V19a8.5 8.5 0 0 1 17 0v1.3H27a2.5 2.5 0 0 0-2.5 2.5v6.7A2.5 2.5 0 0 0 27 32h2a6.5 6.5 0 0 1-5.2 2.4H22a2.1 2.1 0 0 0 0 4.2h1.8a10.7 10.7 0 0 0 10.7-10.7V19A13.5 13.5 0 0 0 21 5.5Z'/%3E%3C/svg%3E");
}

/* Self-hosted USDT payment cashier. */
.usdt-pay-page {
    padding: 22px 0 0;
    background:
        radial-gradient(circle at 86% 8%, rgba(18, 96, 246, .08), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #fff 42%, #fff 100%);
}

.usdt-pay-page .container {
    width: min(1380px, calc(100% - 76px));
}

.usdt-pay-hero,
.usdt-pay-card,
.usdt-pay-tips {
    border: 1px solid #cfe0f7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(42, 84, 154, .055);
}

.usdt-pay-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    align-items: center;
    min-height: 178px;
    overflow: hidden;
    padding: 36px 42px;
    border-color: #c6dcff;
    background:
        radial-gradient(circle at 80% 34%, rgba(18, 96, 246, .14), transparent 32%),
        linear-gradient(135deg, #fff 0%, #f4f8ff 58%, #eaf3ff 100%);
}

.usdt-pay-hero:before {
    content: "";
    position: absolute;
    right: -76px;
    bottom: -140px;
    width: 820px;
    height: 260px;
    border: 1px solid rgba(18, 96, 246, .13);
    border-radius: 50%;
    transform: rotate(-8deg);
}

.usdt-pay-hero-copy {
    position: relative;
    z-index: 1;
}

.usdt-pay-hero h1 {
    margin: 0 0 16px;
    color: #071a3a;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 950;
}

.usdt-pay-hero p {
    max-width: 690px;
    color: #344760;
    font-size: 16px;
    line-height: 1.85;
    font-weight: 760;
}

.usdt-pay-hero-art {
    position: relative;
    z-index: 1;
    height: 150px;
}

.usdt-pay-hero-art > span {
    position: absolute;
    display: block;
}

.pay-art-base {
    left: 30px;
    right: 6px;
    bottom: 0;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(18, 96, 246, .06), rgba(18, 96, 246, .2), rgba(18, 96, 246, .04));
    transform: rotate(-7deg);
}

.pay-art-window {
    left: 156px;
    top: 11px;
    width: 196px;
    height: 108px;
    border: 1px solid #88b3ff;
    border-radius: 12px;
    background:
        linear-gradient(180deg, #5793ff 0 22px, transparent 22px),
        linear-gradient(135deg, #fff, #edf5ff);
    box-shadow: 0 18px 34px rgba(18, 96, 246, .18);
    transform: perspective(520px) rotateY(-9deg) rotateX(5deg);
}

.pay-art-window:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 14px 0 0 #fff, 28px 0 0 #fff;
}

.pay-art-window i {
    position: absolute;
    left: 72px;
    top: 42px;
    width: 48px;
    height: 48px;
    border: 9px solid #1260f6;
    border-radius: 50%;
}

.pay-art-window i:after {
    content: "";
    position: absolute;
    left: 11px;
    top: -3px;
    width: 8px;
    height: 52px;
    border-radius: 999px;
    background: #1260f6;
    transform: rotate(90deg);
}

.pay-art-window b,
.pay-art-window em {
    position: absolute;
    left: 44px;
    right: 44px;
    height: 8px;
    border-radius: 999px;
    background: rgba(18, 96, 246, .16);
}

.pay-art-window b {
    bottom: 21px;
}

.pay-art-window em {
    bottom: 8px;
}

.pay-art-coin {
    left: 78px;
    top: 38px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,.72), transparent 30%),
        linear-gradient(145deg, #4f8cff, #1260f6);
    box-shadow: 0 18px 32px rgba(18, 96, 246, .22);
}

.pay-art-coin:before {
    content: "";
    position: absolute;
    inset: 21px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12a2.5 2.5 0 0 1 2.5-2.5h21a2.5 2.5 0 0 1 0 5H23.5v5H29a2.3 2.3 0 0 1 0 4.6h-5.5v7.4a2.5 2.5 0 0 1-5 0v-7.4H13a2.3 2.3 0 0 1 0-4.6h5.5v-5h-8A2.5 2.5 0 0 1 8 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12a2.5 2.5 0 0 1 2.5-2.5h21a2.5 2.5 0 0 1 0 5H23.5v5H29a2.3 2.3 0 0 1 0 4.6h-5.5v7.4a2.5 2.5 0 0 1-5 0v-7.4H13a2.3 2.3 0 0 1 0-4.6h5.5v-5h-8A2.5 2.5 0 0 1 8 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pay-art-shield {
    right: 10px;
    top: 32px;
    width: 86px;
    height: 86px;
    border-radius: 27px;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.65), transparent 30%),
        linear-gradient(145deg, #65a0ff, #1260f6);
    box-shadow: 0 18px 34px rgba(18, 96, 246, .22);
}

.pay-art-shield:before {
    content: "";
    position: absolute;
    inset: 20px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 5.5 38.5 12v11.2c0 8.1-5.3 14.3-14.5 18.2C14.8 37.5 9.5 31.3 9.5 23.2V12L24 5.5Zm8.5 15.1a2.7 2.7 0 0 0-4-3.6l-6.7 7.3-2.5-2.5a2.7 2.7 0 0 0-3.8 3.8l4.5 4.4a2.7 2.7 0 0 0 3.8-.1l8.7-9.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 5.5 38.5 12v11.2c0 8.1-5.3 14.3-14.5 18.2C14.8 37.5 9.5 31.3 9.5 23.2V12L24 5.5Zm8.5 15.1a2.7 2.7 0 0 0-4-3.6l-6.7 7.3-2.5-2.5a2.7 2.7 0 0 0-3.8 3.8l4.5 4.4a2.7 2.7 0 0 0 3.8-.1l8.7-9.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pay-art-cube {
    border-radius: 10px;
    background: linear-gradient(145deg, #dfeaff, #88b4ff);
    transform: rotate(18deg);
}

.pay-art-cube.one {
    left: 38px;
    top: 28px;
    width: 34px;
    height: 34px;
}

.pay-art-cube.two {
    right: 102px;
    top: 5px;
    width: 28px;
    height: 28px;
}

.usdt-pay-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 448px;
    gap: 20px;
    margin-top: 18px;
}

.usdt-pay-card {
    min-width: 0;
    padding: 22px;
}

.usdt-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.usdt-card-title h2 {
    margin: 0;
    color: #071a3a;
    font-size: 22px;
    font-weight: 930;
}

.usdt-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 30px;
    padding: 0 12px;
    color: #9a6d00;
    border: 1px solid #efd18a;
    border-radius: 999px;
    background: #fff8e6;
    font-size: 13px;
    font-weight: 900;
}

.usdt-status-pill.paid {
    color: #147d3f;
    border-color: #bfe5cc;
    background: #effcf4;
}

.usdt-order-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.usdt-order-summary article {
    min-height: 86px;
    padding: 16px 18px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.usdt-order-summary span,
.usdt-copy-list span,
.usdt-payment-head span,
.usdt-fixed-network span {
    display: block;
    color: #6e7f98;
    font-size: 13px;
    font-weight: 820;
}

.usdt-order-summary b {
    display: block;
    min-width: 0;
    margin-top: 8px;
    overflow: hidden;
    color: #071a3a;
    font-size: 18px;
    line-height: 1.18;
    font-weight: 930;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usdt-countdown {
    color: #1260f6 !important;
}

.usdt-step-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 20px 18px;
    border: 1px solid #d6e4f6;
    border-radius: 8px;
    background: #f8fbff;
}

.usdt-step-row article {
    min-width: 0;
    text-align: center;
}

.usdt-step-row article > i {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #edf5ff;
}

.usdt-step-row article > i:before {
    content: "";
    position: absolute;
    inset: 12px;
    background: #1260f6;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.usdt-step-row article > b {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.usdt-step-row article > span {
    display: block;
    color: #516179;
    font-size: 13px;
    font-weight: 860;
    white-space: nowrap;
}

.usdt-step-row article.active > i,
.usdt-step-row article.done > i {
    background: #1260f6;
    box-shadow: 0 12px 22px rgba(18, 96, 246, .2);
}

.usdt-step-row article.active > i:before,
.usdt-step-row article.done > i:before {
    background: #fff;
}

.usdt-step-row article.active > span {
    color: #1260f6;
}

.usdt-step-row em {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #bcd2f2, #dbe6f5);
}

.step-create:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5h16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3Zm4 7a2 2 0 0 0 0 4h8a2 2 0 0 0 0-4h-8Zm0 7a2 2 0 0 0 0 4h5a2 2 0 0 0 0-4h-5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5h16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3Zm4 7a2 2 0 0 0 0 4h8a2 2 0 0 0 0-4h-8Zm0 7a2 2 0 0 0 0 4h5a2 2 0 0 0 0-4h-5Z'/%3E%3C/svg%3E");
}

.step-transfer:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7.5A3.5 3.5 0 0 1 10.5 4h11A3.5 3.5 0 0 1 25 7.5v17a3.5 3.5 0 0 1-3.5 3.5h-11A3.5 3.5 0 0 1 7 24.5v-17Zm5.5 5a2 2 0 1 0 0 4h7a2 2 0 0 0 0-4h-7Zm0 6a2 2 0 1 0 0 4h3a2 2 0 1 0 0-4h-3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7.5A3.5 3.5 0 0 1 10.5 4h11A3.5 3.5 0 0 1 25 7.5v17a3.5 3.5 0 0 1-3.5 3.5h-11A3.5 3.5 0 0 1 7 24.5v-17Zm5.5 5a2 2 0 1 0 0 4h7a2 2 0 0 0 0-4h-7Zm0 6a2 2 0 1 0 0 4h3a2 2 0 1 0 0-4h-3Z'/%3E%3C/svg%3E");
}

.step-wait:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3.5a12.5 12.5 0 1 0 0 25 12.5 12.5 0 0 0 0-25Zm2 7.5v5.2l3.5 3.5a2 2 0 1 1-2.8 2.8l-4.1-4.1A2 2 0 0 1 14 17v-6a2 2 0 1 1 4 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3.5a12.5 12.5 0 1 0 0 25 12.5 12.5 0 0 0 0-25Zm2 7.5v5.2l3.5 3.5a2 2 0 1 1-2.8 2.8l-4.1-4.1A2 2 0 0 1 14 17v-6a2 2 0 1 1 4 0Z'/%3E%3C/svg%3E");
}

.step-open:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3 27 7.8V17c0 6.3-4.3 10.7-11 13C9.3 27.7 5 23.3 5 17V7.8L16 3Zm6.5 11.4a2 2 0 0 0-2.9-2.8l-5.1 5.3-2.1-2.1a2 2 0 1 0-2.8 2.8l3.5 3.5a2 2 0 0 0 2.9 0l6.5-6.7Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3 27 7.8V17c0 6.3-4.3 10.7-11 13C9.3 27.7 5 23.3 5 17V7.8L16 3Zm6.5 11.4a2 2 0 0 0-2.9-2.8l-5.1 5.3-2.1-2.1a2 2 0 1 0-2.8 2.8l3.5 3.5a2 2 0 0 0 2.9 0l6.5-6.7Z'/%3E%3C/svg%3E");
}

.usdt-order-note {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    color: #8a641f;
    border: 1px solid #efca83;
    border-radius: 8px;
    background: #fffaf0;
}

.usdt-order-note i,
.usdt-pay-tips i {
    position: relative;
    width: 34px;
    height: 34px;
    border: 3px solid #c89725;
    border-radius: 50%;
}

.usdt-order-note i:before,
.usdt-pay-tips i:before {
    content: "";
    position: absolute;
    left: 13px;
    top: 7px;
    width: 3px;
    height: 11px;
    border-radius: 999px;
    background: #c89725;
}

.usdt-order-note i:after,
.usdt-pay-tips i:after {
    content: "";
    position: absolute;
    left: 13px;
    bottom: 7px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c89725;
}

.usdt-order-note p {
    color: #8a641f;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 760;
}

.usdt-payment-card {
    padding: 22px;
}

.usdt-payment-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 10px;
    padding: 18px 20px;
    border: 1px solid #efcf82;
    border-radius: 8px;
    background: linear-gradient(135deg, #fffdf7, #fff);
}

.usdt-payment-head span {
    grid-column: 1 / -1;
    margin-bottom: 5px;
}

.usdt-payment-head strong {
    color: #cf9307;
    font-size: 48px;
    line-height: .95;
    font-weight: 950;
}

.usdt-payment-head em {
    color: #071a3a;
    font-size: 18px;
    font-style: normal;
    font-weight: 920;
}

.usdt-fixed-network {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 68px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #d7e5f8;
    border-radius: 8px;
    background: #f8fbff;
}

.usdt-fixed-network i {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #edf5ff;
}

.usdt-fixed-network i:before {
    content: "";
    position: absolute;
    inset: 10px;
    background: #1260f6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 9a5 5 0 0 1 5-5h2.5a2 2 0 1 1 0 4H15a1 1 0 0 0-1 1v2.5a2 2 0 1 1-4 0V9Zm8.5-3a2 2 0 0 1 2-2H26a5 5 0 0 1 5 5v5.5a2 2 0 1 1-4 0V9a1 1 0 0 0-1-1h-5.5a2 2 0 0 1-2-2ZM6 18.5a2 2 0 0 1 2 2V27a1 1 0 0 0 1 1h6.5a2 2 0 1 1 0 4H9a5 5 0 0 1-5-5v-6.5a2 2 0 0 1 2-2Zm22 0a2 2 0 0 1 2 2V27a5 5 0 0 1-5 5h-3.5a2 2 0 1 1 0-4H25a1 1 0 0 0 1-1v-6.5a2 2 0 0 1 2-2ZM13 16a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3v-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 9a5 5 0 0 1 5-5h2.5a2 2 0 1 1 0 4H15a1 1 0 0 0-1 1v2.5a2 2 0 1 1-4 0V9Zm8.5-3a2 2 0 0 1 2-2H26a5 5 0 0 1 5 5v5.5a2 2 0 1 1-4 0V9a1 1 0 0 0-1-1h-5.5a2 2 0 0 1-2-2ZM6 18.5a2 2 0 0 1 2 2V27a1 1 0 0 0 1 1h6.5a2 2 0 1 1 0 4H9a5 5 0 0 1-5-5v-6.5a2 2 0 0 1 2-2Zm22 0a2 2 0 0 1 2 2V27a5 5 0 0 1-5 5h-3.5a2 2 0 1 1 0-4H25a1 1 0 0 0 1-1v-6.5a2 2 0 0 1 2-2ZM13 16a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3v-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.usdt-fixed-network b {
    display: block;
    margin-top: 5px;
    color: #071a3a;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 930;
}

.usdt-qr-wrap {
    margin-top: 14px;
    padding: 18px;
    text-align: center;
    border: 1px solid #d7e5f8;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(18, 96, 246, .08), transparent 44%),
        #fff;
}

.usdt-fake-qr {
    position: relative;
    display: block;
    width: 204px;
    height: 204px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background:
        linear-gradient(#071a3a 0 0) 18px 18px / 42px 42px no-repeat,
        linear-gradient(#071a3a 0 0) calc(100% - 60px) 18px / 42px 42px no-repeat,
        linear-gradient(#071a3a 0 0) 18px calc(100% - 60px) / 42px 42px no-repeat,
        linear-gradient(#fff 0 0) 28px 28px / 22px 22px no-repeat,
        linear-gradient(#fff 0 0) calc(100% - 50px) 28px / 22px 22px no-repeat,
        linear-gradient(#fff 0 0) 28px calc(100% - 50px) / 22px 22px no-repeat,
        linear-gradient(90deg, transparent 0 12px, rgba(18, 96, 246, .82) 12px 22px, transparent 22px 32px) 72px 22px / 92px 34px no-repeat,
        linear-gradient(90deg, rgba(18, 96, 246, .82) 0 10px, transparent 10px 22px, rgba(18, 96, 246, .82) 22px 32px) 74px 74px / 102px 32px no-repeat,
        linear-gradient(90deg, transparent 0 14px, rgba(18, 96, 246, .82) 14px 24px, transparent 24px 38px, rgba(18, 96, 246, .82) 38px 50px) 68px 126px / 104px 34px no-repeat,
        linear-gradient(180deg, rgba(18, 96, 246, .82) 0 10px, transparent 10px 22px, rgba(18, 96, 246, .82) 22px 32px) 76px 104px / 32px 76px no-repeat,
        #fff;
}

.usdt-fake-qr i {
    display: none;
}

.usdt-fake-qr:before,
.usdt-fake-qr:after {
    content: "";
    position: absolute;
    border-radius: 3px;
    background: #1260f6;
}

.usdt-fake-qr:before {
    left: 78px;
    top: 38px;
    width: 18px;
    height: 18px;
    box-shadow:
        30px 0 0 rgba(18, 96, 246, .24),
        60px 0 0 #1260f6,
        0 34px 0 rgba(18, 96, 246, .24),
        30px 34px 0 #1260f6,
        76px 34px 0 rgba(18, 96, 246, .24),
        0 78px 0 #1260f6,
        42px 78px 0 rgba(18, 96, 246, .24),
        76px 78px 0 #1260f6,
        28px 112px 0 #1260f6,
        62px 112px 0 rgba(18, 96, 246, .24);
}

.usdt-fake-qr:after {
    right: 24px;
    bottom: 24px;
    width: 12px;
    height: 12px;
    box-shadow:
        -22px 0 0 #071a3a,
        -44px 0 0 rgba(18, 96, 246, .24),
        0 -22px 0 rgba(18, 96, 246, .24),
        -22px -22px 0 #1260f6,
        -66px -22px 0 #071a3a,
        -44px -44px 0 #1260f6,
        -12px -66px 0 rgba(18, 96, 246, .24);
}

.usdt-qr-wrap p {
    margin-top: 12px;
    color: #6c7c94;
    font-size: 13px;
    font-weight: 760;
}

.usdt-copy-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.usdt-copy-list article {
    padding: 13px 14px;
    border: 1px solid #d7e5f8;
    border-radius: 8px;
    background: #fff;
}

.usdt-copy-list article > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.usdt-copy-list b {
    min-width: 0;
    overflow: hidden;
    color: #071a3a;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-copy-btn {
    height: 32px;
    color: #1260f6;
    border: 1px solid #1260f6;
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.payment-copy-btn.copied {
    color: #fff;
    background: #1260f6;
}

.usdt-pay-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 12px;
    margin-top: 16px;
}

.usdt-paid-btn,
.usdt-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 920;
    white-space: nowrap;
}

.usdt-paid-btn {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #1260f6, #0877ff);
    box-shadow: 0 14px 28px rgba(18, 96, 246, .2);
    cursor: pointer;
}

.usdt-paid-btn.is-waiting {
    background: linear-gradient(135deg, #d2a22e, #c78900);
    box-shadow: 0 14px 28px rgba(198, 137, 0, .2);
}

.usdt-back-btn {
    color: #1260f6;
    border: 1px solid #1260f6;
    background: #fff;
}

.usdt-pay-result {
    display: none;
    margin-top: 12px;
    padding: 11px 12px;
    color: #536c94;
    border: 1px solid #bcd1f2;
    border-radius: 7px;
    background: #eef5ff;
    font-size: 13px;
    font-weight: 760;
}

.usdt-pay-result.show {
    display: block;
}

.usdt-pay-tips {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 18px;
    margin-top: 18px;
    padding: 18px 20px;
}

.usdt-pay-tips article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 8px;
}

.usdt-pay-tips .warning {
    color: #8a641f;
    border: 1px solid #efca83;
    background: #fffaf0;
}

.usdt-pay-tips .info {
    color: #174b98;
    border: 1px solid #c6dcff;
    background: #eef5ff;
}

.usdt-pay-tips .info i {
    border-color: #1260f6;
}

.usdt-pay-tips .info i:before,
.usdt-pay-tips .info i:after {
    background: #1260f6;
}

.usdt-pay-tips p {
    color: inherit;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 790;
}

/* USDT payment exact visual pass: match the confirmed desktop mockup. */
.usdt-pay-page {
    padding: 18px 0 0;
    background: #fff;
}

.usdt-pay-page .container {
    width: min(1368px, calc(100% - 72px));
}

.usdt-pay-hero {
    grid-template-columns: minmax(0, 1fr) 600px;
    min-height: 230px;
    padding: 52px 52px;
    background:
        radial-gradient(circle at 78% 24%, rgba(18, 96, 246, .16), transparent 28%),
        linear-gradient(135deg, #f9fbff 0%, #edf5ff 54%, #dceaff 100%);
}

.usdt-pay-hero:before {
    right: 132px;
    bottom: -166px;
    width: 740px;
    height: 330px;
    border-color: rgba(18, 96, 246, .12);
}

.usdt-pay-hero h1 {
    margin-bottom: 18px;
    font-size: 48px;
    letter-spacing: 0;
}

.usdt-pay-hero p {
    color: #243652;
    font-size: 18px;
    font-weight: 760;
}

.usdt-pay-hero-art {
    height: 196px;
}

.pay-art-base {
    left: 56px;
    right: 28px;
    bottom: 6px;
    height: 68px;
    background:
        linear-gradient(90deg, rgba(18, 96, 246, .05), rgba(18, 96, 246, .2), rgba(18, 96, 246, .05)),
        linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(18, 96, 246, .06));
}

.pay-art-window {
    left: 286px;
    top: 33px;
    width: 144px;
    height: 96px;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08)),
        linear-gradient(145deg, #84b2ff, #1260f6);
    transform: perspective(480px) rotateY(-19deg) rotateX(6deg) rotate(1deg);
}

.pay-art-window:before,
.pay-art-window b,
.pay-art-window em {
    display: none;
}

.pay-art-window i {
    display: none;
}

.pay-art-coin {
    left: 202px;
    top: 14px;
    width: 126px;
    height: 126px;
    border: 9px solid rgba(255, 255, 255, .44);
    box-shadow: 0 24px 44px rgba(18, 96, 246, .25);
}

.pay-art-coin:before {
    inset: 33px;
}

.pay-art-shield {
    right: 94px;
    top: 64px;
    width: 92px;
    height: 92px;
    border-radius: 0;
    clip-path: polygon(50% 0, 88% 17%, 88% 56%, 50% 100%, 12% 56%, 12% 17%);
}

.pay-art-shield:before {
    inset: 22px;
}

.pay-art-cube.one {
    left: 118px;
    top: 76px;
    width: 36px;
    height: 36px;
}

.pay-art-cube.two {
    right: 22px;
    top: 70px;
    width: 48px;
    height: 48px;
}

.usdt-pay-grid {
    grid-template-columns: minmax(600px, .95fr) minmax(650px, 1.05fr);
    gap: 28px;
    margin-top: 22px;
}

.usdt-pay-card {
    padding: 30px;
}

.usdt-card-title,
.usdt-payment-card > h2 {
    margin-bottom: 18px;
}

.usdt-card-title h2,
.usdt-payment-card > h2 {
    color: #071a3a;
    font-size: 24px;
    font-weight: 930;
}

.usdt-status-pill {
    display: none;
}

.usdt-order-summary {
    display: block;
    overflow: hidden;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

.usdt-order-summary article {
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr minmax(190px, auto);
    align-items: center;
    min-height: 58px;
    padding: 0 24px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.usdt-order-summary article + article {
    border-top: 1px solid #e4ecf7;
}

.usdt-order-summary article:before {
    content: "";
    width: 22px;
    height: 22px;
    background: #1260f6;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.usdt-order-summary article.package:before {
    background: #c98c08;
}

.usdt-order-summary article.amount:before {
    background: #c98c08;
}

.usdt-order-summary article.status:before {
    background: #1260f6;
}

.usdt-order-summary article.timer:before {
    background: #1260f6;
}

.usdt-order-summary .order-no:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4h14l4 4v20H8V4Zm12 2v5h5L20 6ZM12 13h10v3H12v-3Zm0 6h8v3h-8v-3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4h14l4 4v20H8V4Zm12 2v5h5L20 6ZM12 13h10v3H12v-3Zm0 6h8v3h-8v-3Z'/%3E%3C/svg%3E");
}

.usdt-order-summary .package:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3l3.4 6.8 7.6 1.1-5.5 5.4 1.3 7.5L16 20.2 9.2 23.8l1.3-7.5L5 10.9l7.6-1.1L16 3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3l3.4 6.8 7.6 1.1-5.5 5.4 1.3 7.5L16 20.2 9.2 23.8l1.3-7.5L5 10.9l7.6-1.1L16 3Z'/%3E%3C/svg%3E");
}

.usdt-order-summary .amount:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3a13 13 0 1 0 0 26 13 13 0 0 0 0-26Zm-5 9a2 2 0 0 1 2-2h10v4h-5v3h4v4h-4v4h-4v-4h-4v-4h4v-3h-1a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3a13 13 0 1 0 0 26 13 13 0 0 0 0-26Zm-5 9a2 2 0 0 1 2-2h10v4h-5v3h4v4h-4v4h-4v-4h-4v-4h4v-3h-1a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E");
}

.usdt-order-summary .network:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4a4 4 0 0 1 4 4c0 .7-.2 1.4-.5 2l4.8 4.1A4 4 0 1 1 22 18l-4.8-4.1a4 4 0 0 1-2.4 0L10 18a4 4 0 1 1-2.3-3.9l4.8-4.1A4 4 0 0 1 16 4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4a4 4 0 0 1 4 4c0 .7-.2 1.4-.5 2l4.8 4.1A4 4 0 1 1 22 18l-4.8-4.1a4 4 0 0 1-2.4 0L10 18a4 4 0 1 1-2.3-3.9l4.8-4.1A4 4 0 0 1 16 4Z'/%3E%3C/svg%3E");
}

.usdt-order-summary .status:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3 27 8v8c0 6.2-4.2 10.8-11 13C9.2 26.8 5 22.2 5 16V8l11-5Zm6.8 10.3-3-2.6-5.3 6.1-2.4-2.3-2.8 2.9 5.5 5.3 8-9.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3 27 8v8c0 6.2-4.2 10.8-11 13C9.2 26.8 5 22.2 5 16V8l11-5Zm6.8 10.3-3-2.6-5.3 6.1-2.4-2.3-2.8 2.9 5.5 5.3 8-9.4Z'/%3E%3C/svg%3E");
}

.usdt-order-summary .timer:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3a13 13 0 1 0 0 26 13 13 0 0 0 0-26Zm2 7v6l4 4-3 3-5-5v-8h4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3a13 13 0 1 0 0 26 13 13 0 0 0 0-26Zm2 7v6l4 4-3 3-5-5v-8h4Z'/%3E%3C/svg%3E");
}

.usdt-order-summary span {
    color: #263856;
    font-size: 15px;
    font-weight: 850;
}

.usdt-order-summary b {
    justify-self: end;
    margin: 0;
    color: #071a3a;
    font-size: 16px;
}

.usdt-order-summary .amount b,
.usdt-order-summary .timer b {
    color: #c98c08 !important;
    font-size: 24px;
}

.usdt-order-summary .amount b em {
    font-style: normal;
    font-size: 24px;
}

.usdt-step-row {
    margin-top: 18px;
    padding: 16px 56px 10px;
    border: 0;
    background: transparent;
}

.usdt-step-row article > i {
    width: 46px;
    height: 46px;
}

.usdt-step-row em {
    align-self: start;
    margin-top: 23px;
    border-top: 2px dashed #c5d6ef;
    background: transparent;
}

.usdt-step-row article > span {
    margin-top: 6px;
}

.usdt-order-note {
    display: none;
}

.usdt-payment-card {
    padding: 30px;
}

.usdt-payment-card > h2 {
    margin: 0 0 6px;
}

.usdt-payment-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid #dbe6f5;
    border-radius: 0;
    background: transparent;
}

.usdt-payment-head span {
    margin: 0 12px 0 0;
    color: #243652;
    font-size: 15px;
}

.usdt-payment-head strong {
    color: #c98c08;
    font-size: 62px;
}

.usdt-payment-head em {
    font-size: 24px;
}

.usdt-fixed-network {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 52px;
    margin-top: 16px;
    padding: 0 18px;
    border-color: #bdd2f3;
    background: linear-gradient(180deg, #f8fbff, #fff);
}

.usdt-fixed-network i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e83c35;
}

.usdt-fixed-network i:before {
    inset: 7px;
    background: #fff;
}

.usdt-fixed-network b {
    margin-top: 0;
    font-size: 17px;
}

.usdt-payment-body {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    margin-top: 18px;
}

.usdt-qr-wrap {
    margin: 0;
    padding: 12px;
    min-height: 176px;
}

.usdt-fake-qr {
    width: 158px;
    height: 158px;
}

.usdt-qr-wrap p {
    display: none;
}

.usdt-copy-list {
    gap: 12px;
    margin: 0;
}

.usdt-copy-list article {
    padding: 0;
    border: 0;
}

.usdt-copy-list span {
    margin-bottom: 8px;
    color: #243652;
    font-size: 14px;
}

.usdt-copy-list article > div {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    height: 40px;
    margin-top: 0;
    padding: 0 7px 0 14px;
    border: 1px solid #dbe6f5;
    border-radius: 7px;
    background: #f8fbff;
}

.usdt-copy-list b {
    font-size: 14px;
    font-weight: 800;
}

.payment-copy-btn {
    width: 32px;
    height: 30px;
    overflow: hidden;
    color: transparent;
    border: 0;
    border-radius: 6px;
    background: #eef5ff;
    position: relative;
}

.payment-copy-btn:before,
.payment-copy-btn:after {
    content: "";
    position: absolute;
    border: 2px solid #1260f6;
    border-radius: 3px;
}

.payment-copy-btn:before {
    left: 10px;
    top: 7px;
    width: 12px;
    height: 14px;
}

.payment-copy-btn:after {
    left: 14px;
    top: 4px;
    width: 12px;
    height: 14px;
    background: #eef5ff;
}

.usdt-confirm-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: #536c94;
    font-size: 13px;
    font-weight: 760;
}

.usdt-confirm-line i {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid #1260f6;
    border-radius: 50%;
}

.usdt-confirm-line i:before {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 2px;
    height: 6px;
    background: #1260f6;
}

.usdt-confirm-line i:after {
    content: "";
    position: absolute;
    left: 7px;
    bottom: 4px;
    width: 2px;
    height: 2px;
    background: #1260f6;
}

.usdt-pay-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 22px;
}

.usdt-paid-btn,
.usdt-back-btn {
    height: 50px;
    font-size: 16px;
}

.usdt-pay-tips {
    grid-template-columns: minmax(600px, .95fr) minmax(650px, 1.05fr);
    gap: 28px;
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.usdt-pay-tips article {
    min-height: 78px;
    padding: 16px 26px;
    border-radius: 8px;
}

/* USDT payment final polish: cleaner 3D art and QR block. */
.usdt-pay-page .pay-art-window {
    left: 118px;
    top: 68px;
    width: 314px;
    height: 96px;
    border-radius: 24px;
    border: 1px solid rgba(126, 171, 255, .48);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(222, 235, 255, .72)),
        linear-gradient(135deg, #fff, #dceaff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 22px 42px rgba(18, 96, 246, .13);
    transform: perspective(520px) rotateX(58deg) rotateZ(-10deg);
}

.usdt-pay-page .pay-art-window:before,
.usdt-pay-page .pay-art-window i,
.usdt-pay-page .pay-art-window b,
.usdt-pay-page .pay-art-window em {
    display: none;
}

.usdt-pay-page .pay-art-coin {
    left: 208px;
    top: 14px;
}

.usdt-pay-page .pay-art-cube.one {
    left: 118px;
    top: 93px;
}

.usdt-pay-page .pay-art-cube.two {
    right: 34px;
    top: 86px;
    width: 48px;
    height: 48px;
}

.usdt-pay-page .usdt-fake-qr {
    width: 158px;
    height: 158px;
    padding: 0;
    background:
        linear-gradient(#0b1932 0 0) 16px 16px / 38px 38px no-repeat,
        linear-gradient(#0b1932 0 0) 104px 16px / 38px 38px no-repeat,
        linear-gradient(#0b1932 0 0) 16px 104px / 38px 38px no-repeat,
        linear-gradient(#fff 0 0) 25px 25px / 20px 20px no-repeat,
        linear-gradient(#fff 0 0) 113px 25px / 20px 20px no-repeat,
        linear-gradient(#fff 0 0) 25px 113px / 20px 20px no-repeat,
        linear-gradient(#0b1932 0 0) 31px 31px / 8px 8px no-repeat,
        linear-gradient(#0b1932 0 0) 119px 31px / 8px 8px no-repeat,
        linear-gradient(#0b1932 0 0) 31px 119px / 8px 8px no-repeat,
        linear-gradient(90deg, transparent 0 10px, #0b1932 10px 18px, transparent 18px 28px, #0b1932 28px 36px, transparent 36px 46px, #1260f6 46px 54px) 64px 62px / 70px 12px no-repeat,
        linear-gradient(90deg, #0b1932 0 8px, transparent 8px 18px, #1260f6 18px 26px, transparent 26px 36px, #0b1932 36px 44px) 64px 82px / 78px 12px no-repeat,
        linear-gradient(90deg, #1260f6 0 8px, transparent 8px 18px, #0b1932 18px 26px, transparent 26px 36px, #1260f6 36px 44px, transparent 44px 54px, #0b1932 54px 62px) 66px 114px / 70px 12px no-repeat,
        linear-gradient(180deg, #0b1932 0 8px, transparent 8px 18px, #1260f6 18px 26px, transparent 26px 36px, #0b1932 36px 44px) 76px 24px / 12px 118px no-repeat,
        linear-gradient(180deg, transparent 0 10px, #1260f6 10px 18px, transparent 18px 30px, #0b1932 30px 38px, transparent 38px 48px, #1260f6 48px 56px) 94px 58px / 12px 86px no-repeat,
        #fff;
}

.usdt-pay-page .usdt-fake-qr:before {
    left: 66px;
    top: 36px;
    width: 10px;
    height: 10px;
    box-shadow:
        16px 0 0 rgba(18, 96, 246, .28),
        48px 0 0 #0b1932,
        0 28px 0 #0b1932,
        24px 28px 0 #1260f6,
        60px 28px 0 rgba(18, 96, 246, .28),
        0 62px 0 #1260f6,
        20px 62px 0 #0b1932,
        52px 62px 0 #1260f6,
        14px 92px 0 #0b1932,
        46px 92px 0 rgba(18, 96, 246, .28);
}

.usdt-pay-page .usdt-fake-qr:after {
    right: 20px;
    bottom: 20px;
    width: 8px;
    height: 8px;
    box-shadow:
        -16px 0 0 #0b1932,
        -32px 0 0 rgba(18, 96, 246, .28),
        0 -16px 0 rgba(18, 96, 246, .28),
        -16px -16px 0 #1260f6,
        -48px -16px 0 #0b1932,
        -32px -32px 0 #1260f6,
        -8px -52px 0 rgba(18, 96, 246, .28);
}

/* USDT payment compact header and icon polish. */
.usdt-pay-page .usdt-pay-hero {
    grid-template-columns: minmax(0, 1fr) 480px;
    min-height: 156px;
    padding: 30px 46px;
}

.usdt-pay-page .usdt-pay-hero:before {
    right: 84px;
    bottom: -132px;
    width: 590px;
    height: 230px;
}

.usdt-pay-page .usdt-pay-hero h1 {
    margin-bottom: 12px;
    font-size: 40px;
}

.usdt-pay-page .usdt-pay-hero p {
    font-size: 16px;
    line-height: 1.65;
}

.usdt-pay-page .usdt-pay-hero-art {
    height: 126px;
}

.usdt-pay-page .pay-art-base {
    left: 82px;
    right: 30px;
    bottom: 0;
    height: 42px;
}

.usdt-pay-page .pay-art-window {
    left: 118px;
    top: 58px;
    width: 236px;
    height: 64px;
    border-radius: 18px;
}

.usdt-pay-page .pay-art-coin {
    left: 186px;
    top: 8px;
    width: 88px;
    height: 88px;
    border-width: 7px;
}

.usdt-pay-page .pay-art-coin:before {
    inset: 22px;
}

.usdt-pay-page .pay-art-shield {
    right: 58px;
    top: 39px;
    width: 70px;
    height: 70px;
}

.usdt-pay-page .pay-art-shield:before {
    inset: 17px;
}

.usdt-pay-page .pay-art-cube.one {
    left: 70px;
    top: 57px;
    width: 28px;
    height: 28px;
}

.usdt-pay-page .pay-art-cube.two {
    right: 8px;
    top: 54px;
    width: 36px;
    height: 36px;
}

.usdt-pay-page .usdt-order-summary article:before {
    width: 24px;
    height: 24px;
    border-radius: 0;
}

.usdt-pay-page .usdt-order-summary .order-no:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3.5h11.5L25 8v20.5H9V3.5Zm10 2.8v4.2h4.2L19 6.3ZM12.5 14h8v3h-8v-3Zm0 6h6.5v3h-6.5v-3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3.5h11.5L25 8v20.5H9V3.5Zm10 2.8v4.2h4.2L19 6.3ZM12.5 14h8v3h-8v-3Zm0 6h6.5v3h-6.5v-3Z'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .package:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.5 16 6l10 6.5V26H6V12.5Zm6-1.2v4.2h8v-4.2l-4-2.6-4 2.6Zm-2 8v3.2h12v-3.2H10Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.5 16 6l10 6.5V26H6V12.5Zm6-1.2v4.2h8v-4.2l-4-2.6-4 2.6Zm-2 8v3.2h12v-3.2H10Z'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .amount:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3a13 13 0 1 0 0 26 13 13 0 0 0 0-26Zm-5.5 8.5h11v3.2h-4v2.4h3.2v3.2h-3.2v4.2h-3.2v-4.2h-3.2v-3.2h3.2v-2.4h-3.8v-3.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3a13 13 0 1 0 0 26 13 13 0 0 0 0-26Zm-5.5 8.5h11v3.2h-4v2.4h3.2v3.2h-3.2v4.2h-3.2v-4.2h-3.2v-3.2h3.2v-2.4h-3.8v-3.2Z'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .network:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4a4 4 0 0 1 3.7 5.5l4.9 3.7a4 4 0 1 1-2.4 3.2l-5.1-3.8a4 4 0 0 1-2.2 0l-5.1 3.8a4 4 0 1 1-2.4-3.2l4.9-3.7A4 4 0 0 1 16 4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4a4 4 0 0 1 3.7 5.5l4.9 3.7a4 4 0 1 1-2.4 3.2l-5.1-3.8a4 4 0 0 1-2.2 0l-5.1 3.8a4 4 0 1 1-2.4-3.2l4.9-3.7A4 4 0 0 1 16 4Z'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .status:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3.5 27 8.2v8.4c0 6-4.2 10.2-11 12.4C9.2 26.8 5 22.6 5 16.6V8.2l11-4.7Zm6.9 10.3-3.1-2.7-5.1 5.9-2.4-2.2-2.7 3 5.5 5.1 7.8-9.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3.5 27 8.2v8.4c0 6-4.2 10.2-11 12.4C9.2 26.8 5 22.6 5 16.6V8.2l11-4.7Zm6.9 10.3-3.1-2.7-5.1 5.9-2.4-2.2-2.7 3 5.5 5.1 7.8-9.1Z'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .timer:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3.5a12.5 12.5 0 1 0 0 25 12.5 12.5 0 0 0 0-25Zm2 7.2v5.2l4 4-2.8 2.8-5.2-5.2v-6.8h4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3.5a12.5 12.5 0 1 0 0 25 12.5 12.5 0 0 0 0-25Zm2 7.2v5.2l4 4-2.8 2.8-5.2-5.2v-6.8h4Z'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-step-row article > i {
    box-shadow: inset 0 0 0 1px rgba(18, 96, 246, .06);
}

.usdt-pay-page .usdt-step-row article.active > i,
.usdt-pay-page .usdt-step-row article.done > i {
    box-shadow: 0 12px 24px rgba(18, 96, 246, .2);
}

.usdt-pay-page .usdt-confirm-line i,
.usdt-pay-page .usdt-pay-tips i {
    flex: 0 0 auto;
}

.usdt-pay-page .payment-copy-btn.copied {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: #1260f6;
}

.usdt-pay-page .payment-copy-btn {
    font-size: 0 !important;
    line-height: 0 !important;
}

.usdt-pay-page .payment-copy-btn.copied:before {
    left: 10px;
    top: 8px;
    width: 12px;
    height: 7px;
    border-top: 0;
    border-right: 0;
    border-color: #fff;
    border-radius: 1px;
    transform: rotate(-45deg);
}

.usdt-pay-page .payment-copy-btn.copied:after {
    content: none;
}

/* USDT payment bottom spacing: keep the final tips clear of the public footer. */
.usdt-pay-page {
    padding-bottom: 34px;
}

.usdt-pay-page .usdt-pay-tips {
    margin-bottom: 0;
}

.usdt-pay-page .usdt-pay-tips article {
    align-items: center;
    overflow: hidden;
}

.usdt-pay-page .usdt-pay-tips p {
    margin: 0;
}

/* USDT payment icon system: cleaner, centered SVG icons for this page only. */
.usdt-pay-page .usdt-order-summary article:before {
    width: 28px;
    height: 28px;
    background-color: transparent !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.usdt-pay-page .usdt-order-summary .order-no:before {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3.5h9.5L22 8v16.5H8V3.5Z' stroke='%231260f6' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M17.5 3.8V8H22M11.5 12.5h7M11.5 17h6' stroke='%231260f6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .package:before {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 11 3.5 10h11L23 11l-5.3 3.1L14 7.5l-3.7 6.6L5 11Z' stroke='%23c98c08' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 21h10' stroke='%23c98c08' stroke-width='2.35' stroke-linecap='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .amount:before {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='10.5' fill='%23fff8e7' stroke='%23c98c08' stroke-width='2.2'/%3E%3Cpath d='M9.5 10.5h9M14 10.5v9M11 14h6' stroke='%23c98c08' stroke-width='2.35' stroke-linecap='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .network:before {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.2 18.8 14 14l4.8 4.8M14 14V7.8' stroke='%231260f6' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='14' cy='6' r='3' fill='%23eef5ff' stroke='%231260f6' stroke-width='2.2'/%3E%3Ccircle cx='7.5' cy='20.5' r='3' fill='%23eef5ff' stroke='%231260f6' stroke-width='2.2'/%3E%3Ccircle cx='20.5' cy='20.5' r='3' fill='%23eef5ff' stroke='%231260f6' stroke-width='2.2'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .status:before {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3.8 23 7.7v6.8c0 5.1-3.4 8.6-9 10.4-5.6-1.8-9-5.3-9-10.4V7.7l9-3.9Z' fill='%23eef5ff' stroke='%231260f6' stroke-width='2.25' stroke-linejoin='round'/%3E%3Cpath d='m10 14.2 2.6 2.6 5.7-6.1' stroke='%231260f6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .timer:before {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14.5' r='9.5' fill='%23eef5ff' stroke='%231260f6' stroke-width='2.3'/%3E%3Cpath d='M14 9.5v5.2l3.4 3.1' stroke='%231260f6' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.8 3.8h6.4' stroke='%231260f6' stroke-width='2.35' stroke-linecap='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-step-row article > i {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eef5ff, #f8fbff);
}

.usdt-pay-page .usdt-step-row article > i:before {
    position: static;
    width: 24px;
    height: 24px;
    inset: auto;
    background-color: transparent !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.usdt-pay-page .usdt-step-row article > i:after {
    content: none !important;
}

.usdt-pay-page .usdt-step-row article.active > i,
.usdt-pay-page .usdt-step-row article.done > i {
    background: linear-gradient(135deg, #1260f6, #2f78ff);
}

.usdt-pay-page .step-create:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4.5h10A2.5 2.5 0 0 1 19.5 7v10A2.5 2.5 0 0 1 17 19.5H7A2.5 2.5 0 0 1 4.5 17V7A2.5 2.5 0 0 1 7 4.5Z' stroke='%231260f6' stroke-width='2.2'/%3E%3Cpath d='M8 9h8M8 13h5.5' stroke='%231260f6' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .step-transfer:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8h14v9.5A2.5 2.5 0 0 1 16.5 20h-9A2.5 2.5 0 0 1 5 17.5V8Z' stroke='%231260f6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M5 8l2-4h10l2 4M9 14h6M12 11v6' stroke='%231260f6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .step-wait:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12.5' r='7.5' stroke='%231260f6' stroke-width='2.2'/%3E%3Cpath d='M12 8v4.8l3 2.8' stroke='%231260f6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .step-open:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.5 19.5 7v5.6c0 4.2-2.8 7.1-7.5 8.6-4.7-1.5-7.5-4.4-7.5-8.6V7L12 3.5Z' stroke='%231260f6' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='m8.8 12.2 2.1 2.1 4.5-4.8' stroke='%231260f6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-step-row article.active .step-create:before,
.usdt-pay-page .usdt-step-row article.done .step-create:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4.5h10A2.5 2.5 0 0 1 19.5 7v10A2.5 2.5 0 0 1 17 19.5H7A2.5 2.5 0 0 1 4.5 17V7A2.5 2.5 0 0 1 7 4.5Z' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M8 9h8M8 13h5.5' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-step-row article.active .step-transfer:before,
.usdt-pay-page .usdt-step-row article.done .step-transfer:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8h14v9.5A2.5 2.5 0 0 1 16.5 20h-9A2.5 2.5 0 0 1 5 17.5V8Z' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M5 8l2-4h10l2 4M9 14h6M12 11v6' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-step-row article.active .step-wait:before,
.usdt-pay-page .usdt-step-row article.done .step-wait:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12.5' r='7.5' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M12 8v4.8l3 2.8' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-step-row article.active .step-open:before,
.usdt-pay-page .usdt-step-row article.done .step-open:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.5 19.5 7v5.6c0 4.2-2.8 7.1-7.5 8.6-4.7-1.5-7.5-4.4-7.5-8.6V7L12 3.5Z' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='m8.8 12.2 2.1 2.1 4.5-4.8' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-fixed-network i {
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.8), transparent 31%),
        linear-gradient(145deg, #ff625d, #d93630);
    box-shadow: 0 8px 18px rgba(217, 54, 48, .16);
}

.usdt-pay-page .usdt-fixed-network i:before {
    inset: 7px;
    background: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 8.5h15a2 2 0 1 1 0 4H16v2.8h4.4a2 2 0 1 1 0 4H16v2.2a2 2 0 1 1-4 0v-2.2H7.6a2 2 0 1 1 0-4H12v-2.8H6.5a2 2 0 1 1 0-4Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 8.5h15a2 2 0 1 1 0 4H16v2.8h4.4a2 2 0 1 1 0 4H16v2.2a2 2 0 1 1-4 0v-2.2H7.6a2 2 0 1 1 0-4H12v-2.8H6.5a2 2 0 1 1 0-4Z'/%3E%3C/svg%3E") !important;
}

.usdt-pay-page .payment-copy-btn {
    background: #eef5ff;
    box-shadow: inset 0 0 0 1px rgba(18, 96, 246, .06);
}

.usdt-pay-page .payment-copy-btn:before,
.usdt-pay-page .payment-copy-btn:after {
    border-width: 2px;
    border-color: #1260f6;
}

.usdt-pay-page .payment-copy-btn:before {
    left: 9px;
    top: 8px;
    width: 10px;
    height: 12px;
    background: #eef5ff;
}

.usdt-pay-page .payment-copy-btn:after {
    left: 13px;
    top: 5px;
    width: 10px;
    height: 12px;
    background: #eef5ff;
}

.usdt-pay-page .usdt-confirm-line i,
.usdt-pay-page .usdt-pay-tips i {
    display: block;
    border: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.usdt-pay-page .usdt-confirm-line i:before,
.usdt-pay-page .usdt-confirm-line i:after,
.usdt-pay-page .usdt-pay-tips i:before,
.usdt-pay-page .usdt-pay-tips i:after {
    content: none;
}

.usdt-pay-page .usdt-confirm-line i {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='7.2' stroke='%231260f6' stroke-width='2'/%3E%3Cpath d='M9 5.3v4.2' stroke='%231260f6' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='12.5' r='1.1' fill='%231260f6'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-pay-tips .warning i {
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='19' cy='19' r='15.5' fill='%23fff8e6' stroke='%23c89725' stroke-width='3'/%3E%3Cpath d='M19 10.5v11' stroke='%23c89725' stroke-width='3.2' stroke-linecap='round'/%3E%3Ccircle cx='19' cy='27' r='1.8' fill='%23c89725'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-pay-tips .info i {
    background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='19' cy='19' r='15.5' fill='%23eef5ff' stroke='%231260f6' stroke-width='3'/%3E%3Cpath d='M19 17v10' stroke='%231260f6' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='19' cy='11.8' r='1.9' fill='%231260f6'/%3E%3C/svg%3E");
}

.usdt-pay-page .pay-art-shield {
    border-radius: 24px;
}

.usdt-pay-page .pay-art-shield:before {
    inset: 16px;
}

/* USDT payment semantic icons: dollar amount and TRON network. */
.usdt-pay-page .usdt-order-summary .amount:before {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='10.5' fill='%23fff8e7' stroke='%23c98c08' stroke-width='2.2'/%3E%3Cpath d='M14 7.8v12.4M18.1 10.1h-5.5a2.6 2.6 0 0 0 0 5.2h2.8a2.6 2.6 0 0 1 0 5.2H9.7' stroke='%23c98c08' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .network:before {
    background-size: 30px 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='12.5' fill='%23fff1f0'/%3E%3Cpath d='M7.5 7.2 22.6 10 18.7 22.8 7.5 7.2Z' stroke='%23e83c35' stroke-width='2.15' stroke-linejoin='round'/%3E%3Cpath d='m7.5 7.2 7.1 6.9L22.6 10M14.6 14.1l4.1 8.7' stroke='%23e83c35' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-fixed-network i {
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.82), transparent 31%),
        linear-gradient(145deg, #ff625d, #e2342e);
}

.usdt-pay-page .usdt-fixed-network i:before {
    inset: 8px;
    background: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.8 6.5 23.6 9.6 19.2 24.2 6.8 6.5Zm3.9 3.8 5.2 5.1 4.7-3.2-9.9-1.9Zm5.5 7.1 2.4 5.1 2.3-7.6-4.7 2.5Zm-2-1.3-4.2-4.2 6.5 9.2-2.3-5Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.8 6.5 23.6 9.6 19.2 24.2 6.8 6.5Zm3.9 3.8 5.2 5.1 4.7-3.2-9.9-1.9Zm5.5 7.1 2.4 5.1 2.3-7.6-4.7 2.5Zm-2-1.3-4.2-4.2 6.5 9.2-2.3-5Z'/%3E%3C/svg%3E") !important;
}

/* USDT payment icon final correction: premium amount, TRON mark, stable copy state. */
.usdt-pay-page .usdt-order-summary .amount:before {
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='12.5' fill='%23d09a16'/%3E%3Ccircle cx='15' cy='15' r='11' fill='none' stroke='%23fff4cf' stroke-width='1.6'/%3E%3Cpath d='M15 7.4v15.2M19.2 10.2h-5.7a2.75 2.75 0 0 0 0 5.5h3a2.75 2.75 0 0 1 0 5.5h-6' stroke='%23ffffff' stroke-width='2.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-order-summary .network:before {
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='12.5' fill='%23e83c35'/%3E%3Cpath d='M8.2 7.7 22.4 10.4 18.4 22.5 8.2 7.7Z' fill='none' stroke='%23ffffff' stroke-width='2.15' stroke-linejoin='round'/%3E%3Cpath d='M8.2 7.7 14.7 14.5 22.4 10.4M14.7 14.5l3.7 8' stroke='%23ffffff' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.usdt-pay-page .usdt-fixed-network i {
    background:
        radial-gradient(circle at 32% 23%, rgba(255,255,255,.72), transparent 29%),
        linear-gradient(145deg, #ff5d58, #e4322d) !important;
    box-shadow: 0 8px 18px rgba(232, 60, 53, .18);
}

.usdt-pay-page .usdt-fixed-network i:before {
    inset: 6px;
    background: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 7.1 26.4 10.7 21.1 27 7.5 7.1Zm4.9 5 6 6.2 4.5-4.7-10.5-1.5Zm7.2 7.8 1.4 3.9 2.5-7.8-3.9 3.9Zm-2.4-.5-5.4-5.6 6.5 9.6-1.1-4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 7.1 26.4 10.7 21.1 27 7.5 7.1Zm4.9 5 6 6.2 4.5-4.7-10.5-1.5Zm7.2 7.8 1.4 3.9 2.5-7.8-3.9 3.9Zm-2.4-.5-5.4-5.6 6.5 9.6-1.1-4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.usdt-pay-page .payment-copy-btn {
    background-color: #eef5ff !important;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5.2' y='6.6' width='8.2' height='9.2' rx='1.5' stroke='%231260f6' stroke-width='2'/%3E%3Cpath d='M8 4.2h5.5c.8 0 1.5.7 1.5 1.5v6.4' stroke='%231260f6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
}

.usdt-pay-page .payment-copy-btn:before,
.usdt-pay-page .payment-copy-btn:after {
    content: none !important;
    display: none !important;
}

.usdt-pay-page .payment-copy-btn.copied {
    background-color: #1260f6 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 10.4 3.2 3.2L15.5 6' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    box-shadow: 0 8px 16px rgba(18, 96, 246, .2);
}

/* Keep the order summary network icon generic; the payment card keeps the TRON mark. */
.usdt-pay-page .usdt-order-summary .network:before {
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='12.5' fill='%23eef5ff'/%3E%3Cpath d='M10.2 18.8 15 14l4.8 4.8M15 14V8.6' stroke='%231260f6' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='15' cy='7.5' r='3.1' fill='%23ffffff' stroke='%231260f6' stroke-width='2.25'/%3E%3Ccircle cx='8.8' cy='20.4' r='3.1' fill='%23ffffff' stroke='%231260f6' stroke-width='2.25'/%3E%3Ccircle cx='21.2' cy='20.4' r='3.1' fill='%23ffffff' stroke='%231260f6' stroke-width='2.25'/%3E%3C/svg%3E");
}

/* Payment card TRON icon: full SVG background, no clipping mask. */
.usdt-pay-page .usdt-fixed-network i {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='30' height='30' rx='9' fill='%23E2342E'/%3E%3Cpath d='M9.2 8.6 25.6 11.8 20.9 25.4 9.2 8.6Z' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linejoin='round'/%3E%3Cpath d='M9.2 8.6 16.3 16.2 25.6 11.8M16.3 16.2l4.6 9.2M16.3 16.2 12 23.4' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9.2' cy='8.6' r='1.5' fill='%23fff'/%3E%3Ccircle cx='25.6' cy='11.8' r='1.5' fill='%23fff'/%3E%3Ccircle cx='20.9' cy='25.4' r='1.5' fill='%23fff'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 34px 34px !important;
    box-shadow: 0 8px 18px rgba(226, 52, 46, .16);
}

.usdt-pay-page .usdt-fixed-network i:before {
    content: none !important;
    display: none !important;
}

.usdt-pay-page .payment-network-logo {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.usdt-pay-page .usdt-qr-image {
    display: block;
    width: 158px;
    height: 158px;
    margin: 0 auto;
    object-fit: contain;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
}

/* Terms page: official document layout. */
.terms-page {
    padding: 22px 0 0;
    background:
        radial-gradient(circle at 92% 12%, rgba(18, 96, 246, .08), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #fff 42%, #fff 100%);
}

.terms-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    align-items: center;
    min-height: 190px;
    overflow: hidden;
    padding: 34px 44px;
    border: 1px solid #c9dcff;
    border-radius: 8px;
    background:
        radial-gradient(circle at 78% 28%, rgba(18, 96, 246, .13), transparent 34%),
        linear-gradient(135deg, #fff 0%, #f4f8ff 58%, #eaf3ff 100%);
    box-shadow: 0 20px 45px rgba(40, 90, 170, .08);
}

.terms-hero:before {
    content: "";
    position: absolute;
    inset: auto -40px -128px 36%;
    height: 230px;
    border: 1px solid rgba(18, 96, 246, .12);
    border-radius: 50%;
    transform: rotate(-8deg);
}

.terms-hero-copy {
    position: relative;
    z-index: 2;
}

.terms-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 15px;
    color: #1260f6;
    font-size: 14px;
    font-weight: 850;
    border: 1px solid #bdd3fb;
    border-radius: 999px;
    background: rgba(255, 255, 255, .84);
}

.terms-eyebrow i {
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2.5 16 5.1v5.2c0 3.9-2.4 6.4-6 7.2-3.6-.8-6-3.3-6-7.2V5.1l6-2.6Z' stroke='%231260f6' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m7.3 10.1 1.8 1.8 3.8-4.2' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.terms-hero h1 {
    margin: 22px 0 12px;
    color: #071735;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0;
}

.terms-hero p {
    max-width: 620px;
    color: #344766;
    font-size: 17px;
    line-height: 1.75;
}

.terms-hero-art {
    position: relative;
    z-index: 1;
    height: 176px;
}

.terms-document {
    position: absolute;
    right: 122px;
    top: 13px;
    width: 210px;
    height: 132px;
    border: 1px solid rgba(18, 96, 246, .32);
    border-radius: 17px;
    background: linear-gradient(145deg, #fff 0%, #f1f6ff 100%);
    box-shadow: 0 22px 38px rgba(20, 75, 160, .18);
    transform: perspective(520px) rotateY(-13deg) rotateX(4deg);
}

.terms-document:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 38px;
    border-radius: 17px 17px 0 0;
    background: linear-gradient(135deg, #5f95ff, #1260f6);
}

.terms-document span {
    position: absolute;
    left: 28px;
    height: 8px;
    border-radius: 999px;
    background: #cbd9f1;
}

.terms-document span:nth-child(1) {
    top: 58px;
    width: 126px;
}

.terms-document span:nth-child(2) {
    top: 80px;
    width: 104px;
}

.terms-document span:nth-child(3) {
    top: 102px;
    width: 136px;
}

.terms-document i {
    position: absolute;
    right: 26px;
    bottom: 26px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0fb981, #3bd48e);
}

.terms-document i:before {
    content: "";
    position: absolute;
    left: 11px;
    top: 10px;
    width: 13px;
    height: 8px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

.terms-shield {
    position: absolute;
    right: 4px;
    top: 36px;
    width: 118px;
    height: 122px;
    border-radius: 26px;
    background: linear-gradient(145deg, #e8f1ff, #fff);
    box-shadow: 0 18px 34px rgba(33, 93, 184, .12);
}

.terms-shield i {
    position: absolute;
    inset: 22px 24px;
    background: linear-gradient(135deg, #75a8ff, #1260f6);
    clip-path: polygon(50% 0, 88% 15%, 82% 62%, 50% 100%, 18% 62%, 12% 15%);
}

.terms-shield i:before {
    content: "";
    position: absolute;
    left: 25px;
    top: 32px;
    width: 26px;
    height: 15px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    transform: rotate(-45deg);
}

.terms-check {
    position: absolute;
    right: 334px;
    top: 54px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e8f1ff, #fff);
    box-shadow: 0 16px 30px rgba(18, 96, 246, .13);
}

.terms-check:before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1260f6, #5d98ff);
}

.terms-check:after {
    content: "";
    position: absolute;
    left: 31px;
    top: 30px;
    width: 21px;
    height: 12px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(-45deg);
}

.terms-cube {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e4efff, #8db7ff);
    box-shadow: 0 14px 24px rgba(18, 96, 246, .12);
    transform: rotate(14deg);
}

.terms-cube.cube-one {
    right: 376px;
    top: 18px;
}

.terms-cube.cube-two {
    right: 30px;
    top: 12px;
    width: 30px;
    height: 30px;
}

.terms-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 24px 0 34px;
}

.terms-sidebar,
.terms-card {
    border: 1px solid #d5e2f6;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 38px rgba(43, 82, 140, .06);
}

.terms-sidebar {
    position: sticky;
    top: 96px;
    padding: 20px;
}

.terms-sidebar h2 {
    margin: 0 0 16px;
    color: #071735;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
}

.terms-sidebar a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 0 13px;
    color: #53647f;
    font-size: 15px;
    font-weight: 780;
    border-radius: 8px;
}

.terms-sidebar a + a {
    margin-top: 6px;
}

.terms-sidebar a i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b7c7dd;
}

.terms-sidebar a.active,
.terms-sidebar a:hover {
    color: #1260f6;
    background: #eff5ff;
}

.terms-sidebar a.active i,
.terms-sidebar a:hover i {
    background: #1260f6;
    box-shadow: 0 0 0 5px rgba(18, 96, 246, .12);
}

.terms-card {
    padding: 28px 30px 24px;
}

.terms-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 82px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e1e9f6;
}

.terms-card-head span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    color: #1260f6;
    font-size: 13px;
    font-weight: 850;
    border-radius: 999px;
    background: #eef5ff;
}

.terms-card-head h2 {
    margin: 12px 0 0;
    color: #071735;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 900;
}

.terms-card-head > i {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #eef5ff url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6h11l6 6v20H12V6Z' stroke='%231260f6' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M23 6v7h6M16 19h8M16 25h6' stroke='%231260f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 38px 38px no-repeat;
}

.terms-section {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid #edf2fa;
    scroll-margin-top: 96px;
}

.terms-section em {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
    font-size: 15px;
    font-style: normal;
    font-weight: 900;
    border-radius: 50%;
    background: linear-gradient(135deg, #1260f6, #4d8dff);
    box-shadow: 0 10px 20px rgba(18, 96, 246, .2);
}

.terms-section h3 {
    margin: 1px 0 9px;
    color: #071735;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 900;
}

.terms-section p {
    max-width: 870px;
    color: #52627b;
    font-size: 15px;
    line-height: 1.9;
}

.terms-agree-strip {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 116px;
    gap: 14px;
    align-items: center;
    margin-top: 24px;
    padding: 15px 16px;
    border: 1px solid #e8c77e;
    border-radius: 8px;
    background: linear-gradient(135deg, #fffaf0, #fff);
}

.terms-agree-strip i {
    width: 34px;
    height: 34px;
    border: 2px solid #c99118;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 7.3v7' stroke='%23c99118' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M13 18.6h.1' stroke='%23c99118' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 25px 25px no-repeat;
}

.terms-agree-strip p {
    color: #9a6a0c;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 760;
}

.terms-agree-strip .primary-btn {
    width: 116px;
    height: 38px;
    min-height: 38px;
    border-radius: 8px;
}

@media (max-width: 1500px) {
    .terms-hero {
        min-height: 180px;
        padding: 30px 40px;
    }

    .terms-hero h1 {
        font-size: 44px;
    }

    .terms-hero-art {
        height: 166px;
    }

    .terms-layout {
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 22px;
    }

    .terms-card {
        padding: 26px 28px 22px;
    }
}

/* Privacy policy page: data protection layout. */
.privacy-page {
    padding: 22px 0 0;
    background:
        radial-gradient(circle at 90% 8%, rgba(18, 96, 246, .08), transparent 29%),
        linear-gradient(180deg, #f8fbff 0%, #fff 44%, #fff 100%);
}

.privacy-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    align-items: center;
    min-height: 220px;
    overflow: hidden;
    padding: 34px 44px;
    border: 1px solid #c9dcff;
    border-radius: 8px;
    background:
        radial-gradient(circle at 75% 30%, rgba(18, 96, 246, .14), transparent 32%),
        linear-gradient(135deg, #fff 0%, #f5f9ff 58%, #eaf3ff 100%);
    box-shadow: 0 20px 45px rgba(40, 90, 170, .08);
}

.privacy-hero:before {
    content: "";
    position: absolute;
    right: -62px;
    bottom: -130px;
    width: 650px;
    height: 235px;
    border: 1px solid rgba(18, 96, 246, .12);
    border-radius: 50%;
    transform: rotate(-9deg);
}

.privacy-hero-copy {
    position: relative;
    z-index: 2;
}

.privacy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 15px;
    color: #1260f6;
    font-size: 14px;
    font-weight: 850;
    border: 1px solid #bdd3fb;
    border-radius: 999px;
    background: rgba(255, 255, 255, .84);
}

.privacy-eyebrow i {
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='8.2' width='12' height='8.6' rx='2.2' stroke='%231260f6' stroke-width='1.8'/%3E%3Cpath d='M6.8 8.2V6.7a3.2 3.2 0 0 1 6.4 0v1.5' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M10 11.3v2' stroke='%231260f6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.privacy-hero h1 {
    margin: 20px 0 12px;
    color: #071735;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0;
}

.privacy-hero p {
    max-width: 650px;
    color: #344766;
    font-size: 17px;
    line-height: 1.75;
}

.privacy-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.privacy-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    color: #53647f;
    font-size: 13px;
    font-weight: 820;
    border: 1px solid #d5e2f6;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
}

.privacy-hero-art {
    position: relative;
    z-index: 1;
    height: 188px;
}

.privacy-lock {
    position: absolute;
    right: 178px;
    top: 7px;
    width: 150px;
    height: 146px;
    border-radius: 28px;
    background: linear-gradient(145deg, #fff, #edf5ff);
    box-shadow: 0 22px 40px rgba(18, 96, 246, .16);
}

.privacy-lock i {
    position: absolute;
    left: 37px;
    top: 62px;
    width: 76px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1260f6, #5d98ff);
}

.privacy-lock i:before {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 45px;
    width: 34px;
    height: 31px;
    border: 8px solid #1260f6;
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
}

.privacy-lock i:after {
    content: "";
    position: absolute;
    left: 35px;
    top: 19px;
    width: 7px;
    height: 17px;
    border-radius: 999px;
    background: #fff;
}

.privacy-database {
    position: absolute;
    right: 22px;
    top: 36px;
    width: 126px;
    height: 118px;
}

.privacy-database:before,
.privacy-database:after,
.privacy-database i {
    content: "";
    position: absolute;
    left: 0;
    width: 126px;
    height: 34px;
    border: 1px solid rgba(18, 96, 246, .26);
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, #eaf3ff);
    box-shadow: 0 14px 28px rgba(18, 96, 246, .1);
}

.privacy-database:before {
    top: 0;
    z-index: 4;
}

.privacy-database i:nth-child(1) {
    top: 28px;
    z-index: 3;
}

.privacy-database i:nth-child(2) {
    top: 56px;
    z-index: 2;
}

.privacy-database i:nth-child(3) {
    top: 84px;
    z-index: 1;
}

.privacy-database:after {
    top: 84px;
    height: 34px;
    background: linear-gradient(135deg, #dceaff, #fff);
}

.privacy-shield {
    position: absolute;
    right: 334px;
    top: 52px;
    width: 82px;
    height: 88px;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff, #edf5ff);
    box-shadow: 0 16px 30px rgba(18, 96, 246, .13);
}

.privacy-shield i {
    position: absolute;
    inset: 17px 20px;
    background: linear-gradient(135deg, #75a8ff, #1260f6);
    clip-path: polygon(50% 0, 88% 15%, 82% 62%, 50% 100%, 18% 62%, 12% 15%);
}

.privacy-shield i:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 23px;
    width: 17px;
    height: 10px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(-45deg);
}

.privacy-cube,
.privacy-cloud-line {
    position: absolute;
    pointer-events: none;
}

.privacy-cube {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e4efff, #8db7ff);
    box-shadow: 0 14px 24px rgba(18, 96, 246, .12);
    transform: rotate(14deg);
}

.privacy-cube.cube-one {
    right: 424px;
    top: 24px;
}

.privacy-cube.cube-two {
    right: 6px;
    top: 15px;
    width: 30px;
    height: 30px;
}

.privacy-cloud-line {
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(18, 96, 246, .28), transparent);
}

.privacy-cloud-line.line-one {
    right: 285px;
    top: 38px;
    width: 155px;
}

.privacy-cloud-line.line-two {
    right: 112px;
    bottom: 28px;
    width: 215px;
}

.privacy-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 24px 0 0;
}

.privacy-overview article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 104px;
    padding: 20px;
    border: 1px solid #d5e2f6;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 38px rgba(43, 82, 140, .06);
}

.privacy-overview h2 {
    margin: 0 0 6px;
    color: #071735;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 900;
}

.privacy-overview p {
    color: #52627b;
    font-size: 14px;
    line-height: 1.65;
}

.privacy-overview-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 34px 34px;
}

.privacy-overview-icon.account {
    background-color: #eef5ff;
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='13' r='5.5' stroke='%231260f6' stroke-width='3'/%3E%3Cpath d='M8.5 28c1.8-5.1 5-7.4 9.5-7.4s7.7 2.3 9.5 7.4' stroke='%231260f6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.privacy-overview-icon.order {
    background-color: #fff7e6;
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 6.5h14v23H11v-23Z' stroke='%23c99118' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M15 13h6M15 18h7M15 23h4' stroke='%23c99118' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.privacy-overview-icon.service {
    background-color: #eef5ff;
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 5.5 27 9.4v7.9c0 5.2-3.5 9.8-9 11.9-5.5-2.1-9-6.7-9-11.9V9.4l9-3.9Z' stroke='%231260f6' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m14.2 18.1 2.5 2.5 5.4-5.8' stroke='%231260f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.privacy-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 24px 0 34px;
}

.privacy-sidebar,
.privacy-card {
    border: 1px solid #d5e2f6;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 38px rgba(43, 82, 140, .06);
}

.privacy-sidebar {
    position: sticky;
    top: 96px;
    padding: 20px;
}

.privacy-sidebar h2 {
    margin: 0 0 16px;
    color: #071735;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
}

.privacy-sidebar a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 0 13px;
    color: #53647f;
    font-size: 15px;
    font-weight: 780;
    border-radius: 8px;
}

.privacy-sidebar a + a {
    margin-top: 6px;
}

.privacy-sidebar a i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b7c7dd;
}

.privacy-sidebar a.active,
.privacy-sidebar a:hover {
    color: #1260f6;
    background: #eff5ff;
}

.privacy-sidebar a.active i,
.privacy-sidebar a:hover i {
    background: #1260f6;
    box-shadow: 0 0 0 5px rgba(18, 96, 246, .12);
}

.privacy-card {
    padding: 28px 30px 24px;
}

.privacy-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 82px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e1e9f6;
}

.privacy-card-head span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    color: #1260f6;
    font-size: 13px;
    font-weight: 850;
    border-radius: 999px;
    background: #eef5ff;
}

.privacy-card-head h2 {
    margin: 12px 0 0;
    color: #071735;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 900;
}

.privacy-card-head > i {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #eef5ff url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='17' width='18' height='14' rx='3' stroke='%231260f6' stroke-width='3'/%3E%3Cpath d='M14 17v-3.2a5 5 0 0 1 10 0V17' stroke='%231260f6' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M19 22v3' stroke='%231260f6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 38px 38px no-repeat;
}

.privacy-section {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid #edf2fa;
    scroll-margin-top: 96px;
}

.privacy-section em {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
    font-size: 15px;
    font-style: normal;
    font-weight: 900;
    border-radius: 50%;
    background: linear-gradient(135deg, #1260f6, #4d8dff);
    box-shadow: 0 10px 20px rgba(18, 96, 246, .2);
}

.privacy-section h3 {
    margin: 1px 0 9px;
    color: #071735;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 900;
}

.privacy-section p {
    max-width: 870px;
    color: #52627b;
    font-size: 15px;
    line-height: 1.9;
}

.privacy-note-strip {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 116px;
    gap: 14px;
    align-items: center;
    margin-top: 24px;
    padding: 15px 16px;
    border: 1px solid #c9dcff;
    border-radius: 8px;
    background: linear-gradient(135deg, #f2f7ff, #fff);
}

.privacy-note-strip i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #eaf3ff url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 4.8 23 8.2v6.9c0 4.8-3.1 8.6-8 10.3-4.9-1.7-8-5.5-8-10.3V8.2l8-3.4Z' stroke='%231260f6' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='m11.6 15.6 2.2 2.2 4.9-5.3' stroke='%231260f6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}

.privacy-note-strip p {
    color: #315987;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 760;
}

.privacy-note-strip .primary-btn {
    width: 116px;
    height: 38px;
    min-height: 38px;
    border-radius: 8px;
}

@media (max-width: 1500px) {
    .privacy-hero {
        min-height: 210px;
        padding: 30px 40px;
        grid-template-columns: minmax(0, 1fr) 470px;
    }

    .privacy-hero h1 {
        font-size: 44px;
    }

    .privacy-hero-art {
        height: 176px;
    }

    .privacy-layout {
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 22px;
    }

    .privacy-card {
        padding: 26px 28px 22px;
    }
}

/* Download process state colors. */
.download-process article {
    color: #9aa7bb;
}

.download-process article .download-step-icon {
    background: #9aa7bb;
}

.download-process article.active .download-step-icon {
    background: #1260f6;
}

.download-process article.done .download-step-icon {
    background: #16a34a;
}

.download-process article.locked .download-step-icon {
    background: #9aa7bb;
}

.download-process article.done b,
.download-process article.active b {
    color: #071735;
}

.download-process article.done small {
    color: #3f7f5a;
}

.download-process article.locked b {
    color: #59677c;
}

.download-process article.locked small {
    color: #8b98aa;
}

.download-step-icon.account-icon,
.download-step-icon.cloud-icon {
    width: 30px;
    height: 30px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.download-step-icon.account-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14.2a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm-9.4 9.4c1.2-4.1 4.6-6.6 9.4-6.6s8.2 2.5 9.4 6.6c.2.7-.3 1.4-1 1.4H5.6c-.7 0-1.2-.7-1-1.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14.2a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm-9.4 9.4c1.2-4.1 4.6-6.6 9.4-6.6s8.2 2.5 9.4 6.6c.2.7-.3 1.4-1 1.4H5.6c-.7 0-1.2-.7-1-1.4Z'/%3E%3C/svg%3E");
}

.download-step-icon.cloud-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 24.8h8.8c4.2 0 7.2-2.7 7.2-6.4 0-3.4-2.5-6-5.9-6.4A7.1 7.1 0 0 0 7.2 14.2c-2.4.7-4.1 2.7-4.1 5.2 0 3.1 2.5 5.4 7.5 5.4Zm4.4-4.2c-.7 0-1.2-.5-1.2-1.2v-5.1l-1.8 1.8a1.2 1.2 0 0 1-1.7-1.7l3.8-3.8c.5-.5 1.3-.5 1.8 0l3.8 3.8a1.2 1.2 0 1 1-1.7 1.7l-1.8-1.8v5.1c0 .7-.5 1.2-1.2 1.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 24.8h8.8c4.2 0 7.2-2.7 7.2-6.4 0-3.4-2.5-6-5.9-6.4A7.1 7.1 0 0 0 7.2 14.2c-2.4.7-4.1 2.7-4.1 5.2 0 3.1 2.5 5.4 7.5 5.4Zm4.4-4.2c-.7 0-1.2-.5-1.2-1.2v-5.1l-1.8 1.8a1.2 1.2 0 0 1-1.7-1.7l3.8-3.8c.5-.5 1.3-.5 1.8 0l3.8 3.8a1.2 1.2 0 1 1-1.7 1.7l-1.8-1.8v5.1c0 .7-.5 1.2-1.2 1.2Z'/%3E%3C/svg%3E");
}

.download-step-icon.account-icon:before,
.download-step-icon.account-icon:after,
.download-step-icon.cloud-icon:before,
.download-step-icon.cloud-icon:after {
    content: none;
}

.download-process article.locked i {
    color: #8b98aa;
    border-color: #d6dfed;
    background: #f4f7fb;
}

.download-process article.done i {
    color: #fff;
    border-color: #16a34a;
    background: #16a34a;
}

.download-process article.done.download-step-final {
    outline: 1px solid rgba(22, 163, 74, .62);
    outline-offset: -1px;
    background: #f7fff9;
}

/* Download page fixes: cart step icon and complete logged-in borders. */
.download-step-icon.cart-icon {
    width: 30px;
    height: 30px;
    background: #1260f6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.download-step-icon.cart-icon:before,
.download-step-icon.cart-icon:after {
    content: none;
}

.download-process article.active {
    border-color: transparent;
    outline: 1px solid #1260f6;
    outline-offset: -1px;
    background-clip: padding-box;
}

.download-process article.done .cart-icon {
    background: #16a34a;
}

.download-action-panel {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    background-clip: padding-box;
}

.download-action-panel.pending,
.download-action-panel.account,
.download-action-panel.success {
    border-color: transparent;
    outline: 1px solid #cfe0ff;
    outline-offset: -1px;
}

.download-action-panel.pending {
    outline-color: rgba(210, 162, 46, .58);
}

.download-action-panel.success {
    outline-color: rgba(22, 163, 74, .38);
}

/* Download process width fix: keep step text inside its border. */
.download-process {
    width: 100%;
    grid-template-columns: minmax(210px, 1fr) 36px minmax(282px, 1.28fr) 36px minmax(210px, 1fr);
}

.download-process article {
    min-width: 0;
    grid-template-columns: 42px 32px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 12px;
}

.download-process article > div {
    min-width: 0;
}

.download-process small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.process-dash {
    margin: 0 8px;
}

/* Tutorial process state colors and width fixes. */
.tutorial-process {
    width: 100%;
    grid-template-columns: minmax(210px, 1fr) 36px minmax(274px, 1.25fr) 36px minmax(258px, 1.18fr);
}

.tutorial-process article {
    min-width: 0;
    grid-template-columns: 42px 32px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
}

.tutorial-process article > div {
    min-width: 0;
}

.tutorial-process small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tutorial-process article.active {
    border-color: transparent;
    outline: 1px solid #1260f6;
    outline-offset: -1px;
    background-clip: padding-box;
}

.tutorial-process article.done {
    border-color: transparent;
    outline: 1px solid rgba(22, 163, 74, .62);
    outline-offset: -1px;
}

.tutorial-process article .tutorial-step-icon {
    width: 30px;
    height: 30px;
    background: #9aa7bb;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.tutorial-process article.active .tutorial-step-icon {
    background: #1260f6;
}

.tutorial-process article.done .tutorial-step-icon {
    background: #16a34a;
}

.tutorial-process article.locked .tutorial-step-icon {
    background: #9aa7bb;
}

.tutorial-process article.done b,
.tutorial-process article.active b {
    color: #071735;
}

.tutorial-process article.done small {
    color: #3f7f5a;
}

.tutorial-process article.locked b {
    color: #59677c;
}

.tutorial-process article.locked small {
    color: #8b98aa;
}

.tutorial-step-icon.account-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14.2a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm-9.4 9.4c1.2-4.1 4.6-6.6 9.4-6.6s8.2 2.5 9.4 6.6c.2.7-.3 1.4-1 1.4H5.6c-.7 0-1.2-.7-1-1.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14.2a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm-9.4 9.4c1.2-4.1 4.6-6.6 9.4-6.6s8.2 2.5 9.4 6.6c.2.7-.3 1.4-1 1.4H5.6c-.7 0-1.2-.7-1-1.4Z'/%3E%3C/svg%3E");
}

.tutorial-step-icon.cart-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='25' viewBox='0 0 28 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 3.2c0-.8.6-1.3 1.3-1.3h2.4c.7 0 1.2.5 1.4 1.1l.4 2.3h15.1c.9 0 1.6.8 1.4 1.7l-1.4 7.4c-.3 1.8-1.8 3-3.6 3h-9.4c-1.8 0-3.3-1.3-3.6-3L5.4 4.5h-.9c-.7 0-1.3-.6-1.3-1.3Zm6 4.8 1 5.7c.1.4.4.7.8.7h8.8c.4 0 .8-.3.9-.7l1-5.7H9.2Zm2 15.1a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Zm8.6 0a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2Z'/%3E%3C/svg%3E");
}

.tutorial-step-icon.lock-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.4 13.2v-2.6a5.6 5.6 0 1 1 11.2 0v2.6h1.1c1.4 0 2.6 1.2 2.6 2.6v7.5c0 1.4-1.2 2.6-2.6 2.6H8.3a2.6 2.6 0 0 1-2.6-2.6v-7.5c0-1.4 1.2-2.6 2.6-2.6h1.1Zm3.1 0h5v-2.6a2.5 2.5 0 0 0-5 0v2.6Zm2.5 8.4a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.4 13.2v-2.6a5.6 5.6 0 1 1 11.2 0v2.6h1.1c1.4 0 2.6 1.2 2.6 2.6v7.5c0 1.4-1.2 2.6-2.6 2.6H8.3a2.6 2.6 0 0 1-2.6-2.6v-7.5c0-1.4 1.2-2.6 2.6-2.6h1.1Zm3.1 0h5v-2.6a2.5 2.5 0 0 0-5 0v2.6Zm2.5 8.4a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E");
}

.tutorial-step-icon.account-icon:before,
.tutorial-step-icon.account-icon:after,
.tutorial-step-icon.cart-icon:before,
.tutorial-step-icon.cart-icon:after,
.tutorial-step-icon.lock-icon:before,
.tutorial-step-icon.lock-icon:after {
    content: none;
}

.tutorial-process article.locked i {
    color: #8b98aa;
    border-color: #d6dfed;
    background: #f4f7fb;
}

.tutorial-process article.done i {
    color: #fff;
    border-color: #16a34a;
    background: #16a34a;
}

.tutorial-process .process-dash {
    margin: 0 8px;
}

/* Product platform icons: local PNG assets from platform favicons. */
.platform-logo {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: none;
}

.platform-logo:before,
.platform-logo:after {
    display: none;
}

.platform-logo.tinder {
    background: transparent url("/static/images/platforms/tinder.png") center / contain no-repeat;
}

.platform-logo.bumble {
    background: transparent url("/static/images/platforms/bumble.png") center / contain no-repeat;
}

.platform-logo.badoo {
    background: transparent url("/static/images/platforms/badoo.png") center / contain no-repeat;
}

.platform-logo.hinge {
    background: transparent url("/static/images/platforms/hinge.png") center / contain no-repeat;
}

.platform-logo.okcupid {
    background: transparent url("/static/images/platforms/okcupid.png") center / contain no-repeat;
}

.platform-logo.boo {
    background: transparent url("/static/images/platforms/boo.png") center / contain no-repeat;
}

.platform-logo.hily {
    background: transparent url("/static/images/platforms/hily.png") center / contain no-repeat;
}

.platform-logo.happn {
    background: transparent url("/static/images/platforms/happn.png") center / contain no-repeat;
}

.platform-logo.meetme {
    background: transparent url("/static/images/platforms/meetme.png") center / contain no-repeat;
}

@media (max-width: 1500px) {
    .platform-logo {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        background-size: contain;
    }
}

/* Final order table fit: English labels must not overflow the desktop container. */
.exact-orders-panel {
    overflow: hidden !important;
}

.exact-orders-panel .exact-order-table {
    width: 100% !important;
    table-layout: fixed !important;
}

.exact-orders-panel .exact-order-table th,
.exact-orders-panel .exact-order-table td {
    box-sizing: border-box !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.exact-orders-panel .exact-order-table th:nth-child(1),
.exact-orders-panel .exact-order-table td:nth-child(1) {
    width: 19% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(2),
.exact-orders-panel .exact-order-table td:nth-child(2) {
    width: 12% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(3),
.exact-orders-panel .exact-order-table td:nth-child(3) {
    width: 7% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(4),
.exact-orders-panel .exact-order-table td:nth-child(4) {
    width: 14% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(5),
.exact-orders-panel .exact-order-table td:nth-child(5) {
    width: 14% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(6),
.exact-orders-panel .exact-order-table td:nth-child(6) {
    width: 12% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(7),
.exact-orders-panel .exact-order-table td:nth-child(7) {
    width: 9% !important;
}

.exact-orders-panel .exact-order-table th:nth-child(8),
.exact-orders-panel .exact-order-table td:nth-child(8) {
    width: 13% !important;
}

.exact-orders-panel .order-no {
    display: inline-block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}

.exact-orders-panel .order-status {
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 12px !important;
}

.exact-orders-panel .order-action {
    width: 100% !important;
    max-width: 142px !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* Final user center language switch: same icon dropdown as the public header. */
.exact-center-nav {
    grid-template-columns: 210px minmax(0, 1fr) 408px !important;
}

.exact-center-header-actions {
    overflow: visible !important;
}

.exact-center-header .language-switch {
    position: relative;
    flex: 0 0 auto;
    min-width: 104px;
    height: 40px;
    color: #071a3a;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.exact-center-header .language-switch summary {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #d5e2f5;
    border-radius: 8px;
    background: #f8fbff;
    cursor: pointer;
    list-style: none;
}

.exact-center-header .language-switch summary::-webkit-details-marker {
    display: none;
}

.exact-center-header .language-switch i {
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.5 9h-3.1a15.7 15.7 0 0 0-1.1-5A8.04 8.04 0 0 1 19.5 11ZM12 4.1c.7 1 1.7 3.1 2.1 6.9H9.9c.4-3.8 1.4-5.9 2.1-6.9ZM4.5 13h3.1c.2 1.9.6 3.6 1.1 5A8.04 8.04 0 0 1 4.5 13Zm3.1-2H4.5A8.04 8.04 0 0 1 8.7 6a15.7 15.7 0 0 0-1.1 5ZM12 19.9c-.7-1-1.7-3.1-2.1-6.9h4.2c-.4 3.8-1.4 5.9-2.1 6.9Zm3.3-1.9c.5-1.4.9-3.1 1.1-5h3.1a8.04 8.04 0 0 1-4.2 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.5 9h-3.1a15.7 15.7 0 0 0-1.1-5A8.04 8.04 0 0 1 19.5 11ZM12 4.1c.7 1 1.7 3.1 2.1 6.9H9.9c.4-3.8 1.4-5.9 2.1-6.9ZM4.5 13h3.1c.2 1.9.6 3.6 1.1 5A8.04 8.04 0 0 1 4.5 13Zm3.1-2H4.5A8.04 8.04 0 0 1 8.7 6a15.7 15.7 0 0 0-1.1 5ZM12 19.9c-.7-1-1.7-3.1-2.1-6.9h4.2c-.4 3.8-1.4 5.9-2.1 6.9Zm3.3-1.9c.5-1.4.9-3.1 1.1-5h3.1a8.04 8.04 0 0 1-4.2 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.exact-center-header .language-switch span {
    color: #071a3a;
    font-size: 13px;
    line-height: 1;
}

.exact-center-header .language-switch em {
    width: 7px;
    height: 7px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.exact-center-header .language-switch[open] summary,
.exact-center-header .language-switch summary:hover {
    color: #1260f6;
    border-color: #9ec0ff;
    background: #fff;
}

.exact-center-header .language-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 160;
    min-width: 132px;
    padding: 7px;
    border: 1px solid #d7e4f5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(13, 35, 74, .14);
}

.exact-center-header .language-menu a {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    color: #243652;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 850;
}

.exact-center-header .language-menu a:hover,
.exact-center-header .language-menu a.active {
    color: #1260f6;
    background: #f1f6ff;
}

/* Final public header refinement after removing News. */
.site-header {
    height: 72px !important;
    border-bottom: 1px solid #dbe6f5 !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 24px rgba(22, 45, 86, .04) !important;
}

.site-header .container.nav-wrap {
    width: calc(100% - 96px) !important;
    max-width: 1398px !important;
    height: 72px !important;
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) 302px !important;
    gap: 22px !important;
    align-items: center !important;
    margin: 0 auto !important;
}

.site-header .brand {
    gap: 12px !important;
    min-width: 0 !important;
}

.site-header .brand-mark {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px 40px !important;
}

.site-header .brand-text {
    color: #1260f6 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.site-header .main-nav {
    justify-content: center !important;
    gap: 31px !important;
    min-width: 0 !important;
    font-size: 15px !important;
    font-weight: 780 !important;
}

.site-header .main-nav a {
    min-height: 72px !important;
    padding: 0 2px !important;
    color: #071a3a !important;
}

.site-header .main-nav a:hover,
.site-header .main-nav a.active {
    color: #1260f6 !important;
}

.site-header .main-nav a.active:after {
    bottom: 0 !important;
    width: 24px !important;
    height: 3px !important;
}

.site-header .nav-actions {
    justify-content: flex-end !important;
    gap: 10px !important;
    overflow: visible !important;
}

.site-header .nav-actions .ghost-btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

.site-header .nav-login-btn,
.site-header .nav-register-btn {
    min-width: 74px !important;
}

.site-header .nav-account-btn,
.site-header .nav-logout-btn {
    min-width: 108px !important;
    gap: 8px !important;
}

.site-header .language-switch {
    flex: 0 0 auto !important;
    min-width: 104px !important;
    height: 40px !important;
}

.site-header .language-switch summary {
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
}

.site-header .language-menu {
    z-index: 180 !important;
}

html[lang="en"] .site-header .container.nav-wrap {
    grid-template-columns: 200px minmax(0, 1fr) 338px !important;
    gap: 18px !important;
}

html[lang="en"] .site-header .main-nav {
    gap: 22px !important;
    font-size: 14px !important;
}

html[lang="en"] .site-header .nav-actions .ghost-btn {
    padding: 0 14px !important;
}

html[lang="en"] .site-header .nav-account-btn,
html[lang="en"] .site-header .nav-logout-btn {
    min-width: 118px !important;
}

.content-empty-state {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 22px;
    color: #66758d;
    border: 1px dashed #c9d8ef;
    border-radius: 8px;
    background: #f8fbff;
    font-size: 15px;
    font-weight: 760;
    text-align: center;
}

.content-empty-state.small {
    min-height: 72px;
    padding: 14px;
    font-size: 13px;
}

.changelog-limit-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 20px;
    padding: 13px 16px;
    border: 1px solid #c7daf8;
    border-radius: 8px;
    background: #f5f9ff;
    color: #36547d;
    font-size: 14px;
    font-weight: 760;
}

.changelog-limit-note i {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1f63f2;
    box-shadow: 0 8px 18px rgba(31, 99, 242, .18);
}

.changelog-limit-note i:before {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: #fff;
}

.changelog-limit-note i:after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}

/* User center overview hero: stronger, cleaner background art. */
.exact-page-overview .exact-hero-card {
    min-height: 158px;
    border-color: #cdddf4;
    background:
        radial-gradient(circle at 84% 46%, rgba(35, 98, 242, .18), transparent 24%),
        radial-gradient(circle at 72% 40%, rgba(98, 152, 255, .12), transparent 21%),
        linear-gradient(112deg, #f8fbff 0%, #eef6ff 44%, #dfeaff 100%);
    box-shadow: 0 18px 46px rgba(18, 57, 120, .09);
}

.exact-page-overview .exact-hero-card:before {
    background-image:
        linear-gradient(150deg, rgba(255, 255, 255, .7) 0 1px, transparent 1px),
        linear-gradient(30deg, rgba(75, 129, 236, .11) 0 1px, transparent 1px),
        radial-gradient(circle at 76% 52%, rgba(255, 255, 255, .78), transparent 22%);
    background-size: 94px 44px, 94px 44px, 100% 100%;
    opacity: .92;
}

.exact-page-overview .exact-hero-card:after {
    content: "";
    position: absolute;
    right: 54px;
    top: 24px;
    width: 420px;
    height: 112px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent),
        radial-gradient(circle, rgba(21, 96, 246, .12), transparent 62%);
    transform: rotate(-8deg);
    opacity: .72;
}

.exact-page-overview .exact-hero-art {
    height: 126px;
}

.exact-page-overview .art-base {
    right: 64px;
    bottom: 13px;
    width: 298px;
    height: 68px;
    background:
        radial-gradient(circle at 48% 45%, rgba(18, 96, 246, .22), rgba(18, 96, 246, .08) 52%, transparent 70%),
        linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(76, 133, 245, .12));
    filter: blur(.1px);
    transform: skewX(-16deg);
}

.exact-page-overview .art-shadow-card {
    right: 56px;
    top: 17px;
    width: 136px;
    height: 108px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(221, 234, 255, .56));
    box-shadow:
        -30px 8px 0 rgba(255, 255, 255, .46),
        0 20px 30px rgba(38, 86, 178, .13);
    transform: rotate(9deg);
}

.exact-page-overview .art-shadow-card:before,
.exact-page-overview .art-shadow-card:after {
    content: "";
    position: absolute;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(90, 143, 245, .36), rgba(47, 105, 230, .14));
}

.exact-page-overview .art-shadow-card:before {
    left: -82px;
    top: 28px;
    width: 64px;
    height: 46px;
    transform: rotate(-17deg) skew(-12deg);
}

.exact-page-overview .art-shadow-card:after {
    right: -62px;
    top: 7px;
    width: 55px;
    height: 40px;
    transform: rotate(2deg) skew(-12deg);
}

.exact-page-overview .art-card {
    right: 116px;
    top: 18px;
    width: 118px;
    height: 108px;
    border-radius: 18px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .18), transparent 32%),
        linear-gradient(145deg, #428bff 0%, #1f63f2 56%, #0f4bd6 100%);
    box-shadow:
        0 24px 34px rgba(22, 93, 255, .32),
        inset 0 1px 0 rgba(255, 255, 255, .24);
    transform: rotate(6deg);
}

.exact-page-overview .art-card:before {
    content: "";
    position: absolute;
    left: 26px;
    top: 18px;
    width: 70px;
    height: 7px;
    border-radius: 999px;
    background: rgba(224, 238, 255, .9);
    box-shadow: 0 15px 0 rgba(224, 238, 255, .18);
}

.exact-page-overview .art-card:after {
    content: "";
    position: absolute;
    right: -13px;
    bottom: 10px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background:
        linear-gradient(145deg, #76a9ff, #1d65f2);
    box-shadow: 0 14px 22px rgba(22, 93, 255, .22);
}

.exact-page-overview .art-card i {
    left: 42px;
    top: 43px;
    width: 32px;
    height: 32px;
    background: linear-gradient(180deg, #f4f9ff, #dcecff);
}

.exact-page-overview .art-card b {
    left: 32px;
    top: 76px;
    width: 55px;
    height: 27px;
    background: linear-gradient(180deg, #f4f9ff, #dcecff);
}

.exact-page-overview .art-card em {
    display: none;
}

.exact-page-overview .exact-hero-art .cube {
    border-radius: 6px;
    background:
        linear-gradient(145deg, #8db7ff, #3476ef);
    box-shadow: 0 13px 22px rgba(22, 93, 255, .2);
}

.exact-page-overview .exact-hero-art .one {
    right: 320px;
    top: 74px;
    width: 42px;
    height: 42px;
    opacity: .9;
}

.exact-page-overview .exact-hero-art .two {
    right: 226px;
    top: 20px;
    width: 38px;
    height: 38px;
    opacity: .82;
}

.exact-page-overview .exact-hero-art .three {
    right: 18px;
    top: 24px;
    width: 36px;
    height: 36px;
    opacity: .54;
}

.frontend-hidden-third-service {
    display: none !important;
}

/* Register preview now uses localized real text instead of placeholder bars. */
.register-preview .register-preview-top b,
.register-preview .register-preview-top span,
.register-preview .register-preview-grid span,
.register-preview .register-preview-grid b,
.register-preview .register-progress span {
    color: inherit !important;
    font-size: inherit !important;
    line-height: normal !important;
    text-shadow: none !important;
}

.register-preview .register-preview-top b:before,
.register-preview .register-preview-top span:before,
.register-preview .register-preview-grid span:before,
.register-preview .register-preview-grid b:before,
.register-preview .register-progress span:before {
    content: none !important;
    display: none !important;
}

.register-preview {
    padding: 24px !important;
    border-color: rgba(123, 165, 230, .38) !important;
    background:
        radial-gradient(circle at 86% 12%, rgba(92, 224, 161, .16), transparent 16%),
        radial-gradient(circle at 64% 0%, rgba(83, 132, 255, .18), transparent 28%),
        linear-gradient(180deg, #102f62 0%, #071b37 100%) !important;
}

.register-preview-top b {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    color: #f6f9ff !important;
    font-size: 18px !important;
    font-weight: 920 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.register-preview-top span {
    min-height: 30px !important;
    padding: 0 13px !important;
    color: #5fe29d !important;
    border: 1px solid rgba(95, 226, 157, .28) !important;
    background: rgba(95, 226, 157, .13) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.register-preview-grid article {
    min-width: 0 !important;
    padding: 15px !important;
    border-color: rgba(164, 190, 233, .18) !important;
    background: rgba(255, 255, 255, .065) !important;
}

.register-preview-grid span {
    display: block !important;
    color: #a9bad7 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.register-preview-grid b {
    display: block !important;
    margin-top: 8px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 920 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.register-progress div {
    grid-template-columns: 112px 1fr !important;
}

.register-progress span {
    color: #dce8fb !important;
    font-size: 12px !important;
    font-weight: 840 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[lang="en"] .register-preview-top b {
    font-size: 17px !important;
}

html[lang="en"] .register-preview-grid b {
    font-size: 16px !important;
}

html[lang="en"] .register-preview-grid span,
html[lang="en"] .register-progress span {
    font-size: 11px !important;
}

.register-preview .register-preview-top b {
    color: #f6f9ff !important;
}

.register-preview .register-preview-top span {
    color: #5fe29d !important;
}

.register-preview .register-preview-grid span {
    color: #a9bad7 !important;
}

.register-preview .register-preview-grid b {
    color: #ffffff !important;
}

.register-preview .register-progress span {
    color: #dce8fb !important;
}

/* Login page preview: localized user-center access illustration. */
.login-dashboard .login-dashboard-nav b,
.login-dashboard .login-dashboard-nav span,
.login-dashboard .login-topbar strong,
.login-dashboard .login-topbar b,
.login-dashboard .login-stat-grid span,
.login-dashboard .login-stat-grid b,
.login-dashboard .login-stat-grid em,
.login-dashboard .login-chart-head strong,
.login-dashboard .login-chart-head span,
.login-dashboard .login-chart-axis span,
.login-dashboard .login-order-card strong,
.login-dashboard .login-order-card a,
.login-dashboard .login-order-card th,
.login-dashboard .login-order-card td,
.login-dashboard .login-side-stack b,
.login-dashboard .login-side-stack a,
.login-dashboard .login-video-mini span,
.login-dashboard .login-download-mini span,
.login-dashboard .login-platform-head b,
.login-dashboard .login-platform-head a,
.login-dashboard .login-platform-list li,
.login-dashboard .login-platform-list em,
.login-proof-strip b,
.login-proof-strip span {
    color: inherit !important;
    font-size: inherit !important;
    line-height: normal !important;
    text-shadow: none !important;
}

.login-dashboard .login-dashboard-nav b:after,
.login-dashboard .login-dashboard-nav span:after,
.login-dashboard .login-stat-grid span:before,
.login-dashboard .login-stat-grid b:before,
.login-dashboard .login-stat-grid em:before,
.login-dashboard .login-chart-head strong:before,
.login-dashboard .login-chart-head span:before,
.login-dashboard .login-chart-axis span:before,
.login-dashboard .login-order-card strong:before,
.login-dashboard .login-order-card a:before,
.login-dashboard .login-order-card th:before,
.login-dashboard .login-order-card td:before,
.login-dashboard .login-side-stack b:before,
.login-dashboard .login-side-stack a:before,
.login-dashboard .login-video-mini span:before,
.login-dashboard .login-download-mini span:before,
.login-dashboard .login-platform-head b:before,
.login-dashboard .login-platform-head a:before,
.login-dashboard .login-platform-list li:after,
.login-dashboard .login-platform-list em:before {
    content: none !important;
    display: none !important;
}

.login-dashboard-nav b {
    color: #f6f9ff !important;
    font-size: 15px !important;
    font-weight: 920 !important;
    white-space: nowrap !important;
}

.login-dashboard-nav span {
    color: #a9bbd9 !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    white-space: nowrap !important;
}

.login-dashboard-nav span.active {
    color: #fff !important;
}

.login-topbar strong {
    color: #10254a !important;
    font-size: 18px !important;
    font-weight: 920 !important;
    white-space: nowrap !important;
}

.login-topbar b {
    color: #10254a !important;
    font-size: 12px !important;
    font-weight: 860 !important;
    white-space: nowrap !important;
}

.login-stat-grid span {
    color: #6d7d96 !important;
    font-size: 12px !important;
    font-weight: 780 !important;
    white-space: nowrap !important;
}

.login-stat-grid b {
    color: #071a3a !important;
    font-size: 17px !important;
    font-weight: 920 !important;
    white-space: nowrap !important;
}

.login-stat-grid em {
    color: #25a35a !important;
    font-size: 11px !important;
    font-weight: 860 !important;
    white-space: nowrap !important;
}

.login-chart-head strong,
.login-order-card strong,
.login-side-stack b,
.login-platform-head b {
    color: #10254a !important;
    font-size: 14px !important;
    font-weight: 920 !important;
    white-space: nowrap !important;
}

.login-chart-head span,
.login-chart-axis span,
.login-order-card th,
.login-order-card td,
.login-video-mini span,
.login-download-mini span,
.login-platform-list li {
    color: #65758e !important;
    font-size: 11px !important;
    font-weight: 760 !important;
}

.login-order-card a,
.login-side-stack a,
.login-platform-head a {
    color: #1260f6 !important;
    font-size: 11px !important;
    font-weight: 860 !important;
    white-space: nowrap !important;
}

.login-order-card em,
.login-download-mini em,
.login-platform-list em {
    color: #25a35a !important;
    font-size: 11px !important;
    font-weight: 880 !important;
    white-space: nowrap !important;
}

.login-order-card table {
    table-layout: fixed !important;
}

.login-order-card th,
.login-order-card td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.login-proof-strip b {
    color: #10254a !important;
    font-size: 14px !important;
    font-weight: 920 !important;
}

.login-proof-strip span {
    color: #6c7b91 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

html[lang="en"] .login-dashboard-nav span,
html[lang="en"] .login-chart-head span,
html[lang="en"] .login-chart-axis span,
html[lang="en"] .login-order-card th,
html[lang="en"] .login-order-card td,
html[lang="en"] .login-video-mini span,
html[lang="en"] .login-download-mini span,
html[lang="en"] .login-platform-list li {
    font-size: 10px !important;
}

html[lang="en"] .login-stat-grid b {
    font-size: 15px !important;
}

/* Brand name fit after renaming to SmartSwitch. */
.site-header .container.nav-wrap {
    grid-template-columns: 278px minmax(0, 1fr) 302px !important;
    width: calc(100% - 64px) !important;
    gap: 16px !important;
}

.site-header .brand,
.exact-center-logo {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

.site-header .brand-text,
.exact-center-logo .brand-text,
.exact-center-logo strong {
    display: inline-block !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    letter-spacing: 0 !important;
}

.site-header .main-nav {
    gap: 14px !important;
}

html[lang="en"] .site-header .container.nav-wrap {
    grid-template-columns: 278px minmax(0, 1fr) 338px !important;
    width: calc(100% - 64px) !important;
    gap: 14px !important;
}

html[lang="en"] .site-header .main-nav {
    gap: 12px !important;
}

.exact-center-nav {
    grid-template-columns: 278px minmax(0, 1fr) 360px !important;
    width: calc(100% - 64px) !important;
    gap: 16px !important;
}

.exact-center-logo {
    gap: 12px !important;
}

.exact-center-menu {
    gap: 14px !important;
}

.exact-center-header-actions {
    gap: 10px !important;
}

html[lang="en"] .exact-center-nav {
    grid-template-columns: 278px minmax(0, 1fr) 386px !important;
    width: calc(100% - 64px) !important;
    gap: 14px !important;
}

html[lang="en"] .exact-center-menu {
    gap: 12px !important;
}

/* Final login preview English fit. */
html[lang="en"] .login-dashboard .login-stat-grid span,
html[lang="en"] .login-dashboard .login-stat-grid em {
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

html[lang="en"] .login-dashboard .login-stat-grid b {
    font-size: 13px !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
}

html[lang="en"] .login-dashboard .login-stat-grid article {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Login page real user-center preview. */
.login-center-preview {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 535px !important;
    padding: 14px !important;
    border: 1px solid #d8e5f6 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%) !important;
    box-shadow: 0 24px 60px rgba(22, 54, 100, .14) !important;
    overflow: hidden !important;
}

.login-center-sidebar {
    padding: 18px 12px !important;
    border: 1px solid #d9e5f5 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

.login-center-avatar {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 9px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #edf4ff !important;
}

.login-center-avatar i {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #ffd2a9 0 42%, #1f6df5 43% 100%) !important;
}

.login-center-sidebar > b,
.login-center-sidebar > span,
.login-center-sidebar nav em,
.login-center-main h2,
.login-center-main h3,
.login-center-main p,
.login-center-main span,
.login-center-main b,
.login-center-main strong {
    color: inherit !important;
    font-size: inherit !important;
    line-height: normal !important;
    text-shadow: none !important;
}

.login-center-sidebar > b {
    display: block !important;
    color: #10254a !important;
    font-size: 15px !important;
    font-weight: 920 !important;
    text-align: center !important;
}

.login-center-sidebar > span {
    display: block !important;
    margin-top: 5px !important;
    color: #7b8aa2 !important;
    font-size: 10px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.login-center-sidebar nav {
    display: grid !important;
    gap: 8px !important;
    margin-top: 18px !important;
}

.login-center-sidebar nav em {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    color: #34455f !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 820 !important;
    white-space: nowrap !important;
}

.login-center-sidebar nav em.active {
    color: #1260f6 !important;
    background: #eef5ff !important;
}

.login-center-sidebar nav i {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto !important;
    border-radius: 4px !important;
    background: currentColor !important;
    opacity: .86 !important;
}

.login-center-main {
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.login-center-hero {
    position: relative !important;
    min-height: 86px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 22px !important;
    border: 1px solid #d6e5f8 !important;
    border-radius: 12px !important;
    background:
        radial-gradient(circle at 82% 20%, rgba(42, 104, 255, .2), transparent 25%),
        linear-gradient(135deg, #edf5ff, #dceaff) !important;
    overflow: hidden !important;
}

.login-center-hero h2 {
    margin: 0 !important;
    color: #071a3a !important;
    font-size: 20px !important;
    font-weight: 940 !important;
}

.login-center-hero p {
    margin: 7px 0 0 !important;
    color: #52627b !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

.login-center-hero-art {
    position: relative !important;
    width: 112px !important;
    height: 62px !important;
    flex: 0 0 auto !important;
}

.login-center-hero-art i,
.login-center-hero-art b,
.login-center-hero-art em {
    position: absolute !important;
    display: block !important;
    border-radius: 12px !important;
}

.login-center-hero-art i {
    right: 14px !important;
    top: 2px !important;
    width: 54px !important;
    height: 54px !important;
    background: linear-gradient(145deg, #6ba1ff, #1e64ef) !important;
    box-shadow: 0 14px 26px rgba(29, 100, 239, .28) !important;
}

.login-center-hero-art b {
    right: 55px !important;
    top: 20px !important;
    width: 25px !important;
    height: 25px !important;
    background: linear-gradient(145deg, #a5c3ff, #4d83f1) !important;
}

.login-center-hero-art em {
    right: 0 !important;
    top: 18px !important;
    width: 22px !important;
    height: 22px !important;
    background: rgba(92, 141, 245, .35) !important;
}

.login-center-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.login-center-stats article {
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 14px 12px !important;
    border: 1px solid #d8e5f6 !important;
    border-radius: 10px !important;
    background: #fff !important;
}

.login-center-stats i {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #1260f6, #3b82ff) !important;
}

.login-center-stats span,
.login-center-stats p {
    display: block !important;
    color: #75849a !important;
    font-size: 10px !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.login-center-stats b {
    display: block !important;
    margin-top: 5px !important;
    color: #071a3a !important;
    font-size: 14px !important;
    font-weight: 940 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.login-center-stats p {
    margin: 5px 0 0 !important;
}

.login-center-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(210px, .85fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.login-center-permission,
.login-center-reminder {
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid #d8e5f6 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

.login-center-main h3 {
    margin: 0 0 10px !important;
    color: #10254a !important;
    font-size: 15px !important;
    font-weight: 940 !important;
}

.login-center-permission article,
.login-center-reminder article {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 9px 0 !important;
    border-top: 1px solid #eef3fb !important;
}

.login-center-permission article:first-of-type,
.login-center-reminder article:first-of-type {
    border-top: 0 !important;
}

.login-center-permission article > i,
.login-center-reminder article > i {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1260f6, #3b82ff) !important;
}

.login-center-permission b,
.login-center-reminder b {
    display: block !important;
    color: #10254a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.login-center-permission p,
.login-center-reminder p {
    margin: 3px 0 0 !important;
    color: #687891 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.login-center-permission article > span,
.login-center-reminder article > span {
    color: #c73f3f !important;
    font-size: 10px !important;
    font-weight: 880 !important;
    white-space: nowrap !important;
}

.login-center-reminder article > span {
    color: #1260f6 !important;
}

.login-center-tip {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 10px !important;
    padding: 10px !important;
    border: 1px solid #eacb75 !important;
    border-radius: 8px !important;
    background: #fffaf0 !important;
}

.login-center-tip i {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 2px solid #c59528 !important;
}

.login-center-tip p {
    margin: 0 !important;
    color: #9a6818 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.login-center-tip > b {
    min-width: 64px !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #d4a01d, #b98600) !important;
    font-size: 11px !important;
}

html[lang="en"] .login-center-hero h2 {
    font-size: 17px !important;
}

html[lang="en"] .login-center-stats b {
    font-size: 12px !important;
}

html[lang="en"] .login-center-sidebar nav em,
html[lang="en"] .login-center-permission b,
html[lang="en"] .login-center-reminder b {
    font-size: 10px !important;
}

/* Login preview text wrapping: keep the real user-center layout readable in thumbnail size. */
.login-center-stats p,
.login-center-permission p,
.login-center-reminder p,
.login-center-tip p {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.login-center-stats article {
    min-height: 104px !important;
}

.login-center-permission b,
.login-center-reminder b {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.login-center-reminder article {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: start !important;
}

.login-center-reminder article > span {
    grid-column: 2 !important;
    justify-self: start !important;
    margin-top: 4px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: #eef5ff !important;
}

.login-center-tip {
    grid-template-columns: 26px minmax(0, 1fr) !important;
}

.login-center-tip > b {
    grid-column: 2 !important;
    justify-self: start !important;
    margin-top: 4px !important;
}

html[lang="en"] .login-center-stats p,
html[lang="en"] .login-center-permission p,
html[lang="en"] .login-center-reminder p,
html[lang="en"] .login-center-tip p {
    font-size: 9px !important;
    line-height: 1.25 !important;
}

/* Login preview calmer version: closer to the real user center, less decorative. */
.login-center-preview {
    gap: 12px !important;
    padding: 12px !important;
    border-color: #dbe6f5 !important;
    background: #f7faff !important;
    box-shadow: 0 18px 42px rgba(22, 54, 100, .1) !important;
}

.login-center-sidebar,
.login-center-hero,
.login-center-stats article,
.login-center-permission,
.login-center-reminder {
    border-color: #dce7f5 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.login-center-sidebar {
    padding: 16px 11px !important;
}

.login-center-avatar {
    background: #f0f5fc !important;
}

.login-center-avatar i {
    background: #d9e6f8 !important;
    box-shadow: inset 0 -12px 0 #2f6ff2 !important;
}

.login-center-sidebar > b {
    color: #10254a !important;
}

.login-center-sidebar > span {
    color: #7a8799 !important;
}

.login-center-sidebar nav em {
    color: #354760 !important;
    background: transparent !important;
}

.login-center-sidebar nav em.active {
    color: #1260f6 !important;
    background: #eef5ff !important;
}

.login-center-sidebar nav i {
    border-radius: 50% !important;
    opacity: .72 !important;
    background: #8aa0bd !important;
}

.login-center-sidebar nav em.active i {
    background: #1260f6 !important;
}

.login-center-hero {
    min-height: 76px !important;
    padding: 16px 18px !important;
    background: #eef5ff !important;
}

.login-center-hero:before,
.login-center-hero:after {
    display: none !important;
}

.login-center-hero h2 {
    font-size: 18px !important;
}

.login-center-hero p {
    color: #61728c !important;
}

.login-center-hero-art {
    display: none !important;
}

.login-center-stats {
    gap: 9px !important;
}

.login-center-stats article {
    min-height: 92px !important;
    padding: 12px 11px !important;
}

.login-center-stats i,
.login-center-permission article > i,
.login-center-reminder article > i {
    background: #edf4ff !important;
    border: 1px solid #d8e6fb !important;
}

.login-center-stats i:before,
.login-center-permission article > i:before,
.login-center-reminder article > i:before {
    content: "" !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    margin: 5px auto 0 !important;
    border-radius: 3px !important;
    background: #1260f6 !important;
}

.login-center-stats span,
.login-center-stats p {
    color: #7b8aa0 !important;
}

.login-center-stats b {
    color: #10254a !important;
}

.login-center-content {
    gap: 10px !important;
}

.login-center-permission,
.login-center-reminder {
    padding: 13px !important;
}

.login-center-main h3 {
    color: #10254a !important;
}

.login-center-permission article,
.login-center-reminder article {
    min-height: 44px !important;
    padding: 8px 0 !important;
}

.login-center-permission b,
.login-center-reminder b {
    color: #162b4f !important;
}

.login-center-permission p,
.login-center-reminder p {
    color: #708097 !important;
}

.login-center-permission article > span {
    color: #d04a4a !important;
    background: #fff3f3 !important;
    border: 1px solid #ffd7d7 !important;
    border-radius: 999px !important;
    padding: 3px 8px !important;
}

.login-center-reminder article > span {
    color: #1260f6 !important;
    border: 1px solid #cfe0ff !important;
    background: #f3f7ff !important;
}

.login-center-tip {
    margin-top: 8px !important;
    border-color: #e9d28e !important;
    background: #fffaf0 !important;
}

.login-center-tip i {
    border-color: #c3952d !important;
}

.login-center-tip > b {
    background: #c99a24 !important;
    box-shadow: none !important;
}

.login-proof-strip {
    border-color: #dbe6f5 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.login-proof-strip article {
    background: transparent !important;
}

/* Final login visual: not a user-center screenshot, only account security login guidance. */
.login-auth-visual {
    height: 520px !important;
    padding: 18px !important;
    border: 1px solid #dbe6f5 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #fbfdff 0%, #f4f8ff 58%, #eef5ff 100%) !important;
    box-shadow: 0 20px 46px rgba(22, 54, 100, .1) !important;
    overflow: hidden !important;
}

.login-auth-card {
    position: relative !important;
    height: 100% !important;
    padding: 30px !important;
    border: 1px solid #e1eaf7 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .88) !important;
    overflow: hidden !important;
}

.login-auth-card:before,
.login-auth-card:after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
}

.login-auth-card:before {
    right: 18px !important;
    top: -88px !important;
    width: 250px !important;
    height: 250px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(47, 111, 242, .18), rgba(47, 111, 242, 0) 66%) !important;
}

.login-auth-card:after {
    right: 52px !important;
    bottom: 42px !important;
    width: 150px !important;
    height: 150px !important;
    border: 1px solid rgba(47, 111, 242, .12) !important;
    border-radius: 32px !important;
    transform: rotate(12deg) !important;
    background: rgba(239, 245, 255, .48) !important;
}

.login-auth-badge {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #d8e6fb !important;
    border-radius: 999px !important;
    background: #f7fbff !important;
    color: #1260f6 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.login-auth-badge i,
.login-auth-success i {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #1260f6 !important;
    flex: 0 0 auto !important;
}

.login-auth-badge i:after,
.login-auth-success i:after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 4px !important;
    width: 7px !important;
    height: 4px !important;
    border-left: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    transform: rotate(-45deg) !important;
}

.login-auth-card h2 {
    position: relative !important;
    z-index: 1 !important;
    margin: 22px 0 12px !important;
    color: #081936 !important;
    font-size: 34px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.login-auth-card > p {
    position: relative !important;
    z-index: 1 !important;
    max-width: 560px !important;
    margin: 0 !important;
    color: #60728d !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
}

.login-auth-flow {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 28px !important;
}

.login-auth-flow article {
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 18px 16px !important;
    border: 1px solid #dbe6f5 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

.login-auth-flow i,
.login-auth-field i {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: #edf4ff !important;
    border: 1px solid #d8e6fb !important;
}

.login-auth-flow i.mail:before,
.login-auth-field i.mail:before {
    content: "" !important;
    width: 17px !important;
    height: 12px !important;
    border: 2px solid #1260f6 !important;
    border-radius: 3px !important;
}

.login-auth-flow i.mail:after,
.login-auth-field i.mail:after {
    content: "" !important;
    position: absolute !important;
    width: 11px !important;
    height: 11px !important;
    border-left: 2px solid #1260f6 !important;
    border-bottom: 2px solid #1260f6 !important;
    transform: rotate(-45deg) translate(1px, -1px) !important;
}

.login-auth-flow i.password:before,
.login-auth-field i.lock:before {
    content: "" !important;
    width: 15px !important;
    height: 12px !important;
    margin-top: 5px !important;
    border: 2px solid #1260f6 !important;
    border-radius: 3px !important;
}

.login-auth-flow i.password:after,
.login-auth-field i.lock:after {
    content: "" !important;
    position: absolute !important;
    top: 7px !important;
    width: 14px !important;
    height: 12px !important;
    border: 2px solid #1260f6 !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
}

.login-auth-flow i.shield:before {
    content: "" !important;
    width: 18px !important;
    height: 20px !important;
    background: #1260f6 !important;
    clip-path: polygon(50% 0, 88% 16%, 82% 68%, 50% 100%, 18% 68%, 12% 16%) !important;
}

.login-auth-flow i.shield:after {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    top: 14px !important;
    width: 8px !important;
    height: 5px !important;
    border-left: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    transform: rotate(-45deg) !important;
}

.login-auth-flow b {
    display: block !important;
    margin-top: 13px !important;
    color: #10254a !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.login-auth-flow span {
    display: block !important;
    margin-top: 7px !important;
    color: #71819a !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.login-auth-panel {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 24px !important;
    padding: 18px !important;
    border: 1px solid #dbe6f5 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

.login-auth-panel-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.login-auth-panel-head span {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #42b883 !important;
    box-shadow: 16px 0 0 #d6a93b, 32px 0 0 #1260f6 !important;
}

.login-auth-panel-head b {
    margin-left: 34px !important;
    color: #10254a !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.login-auth-field {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 54px !important;
    margin-top: 10px !important;
    padding: 9px 12px !important;
    border: 1px solid #e1eaf7 !important;
    border-radius: 12px !important;
    background: #fbfdff !important;
}

.login-auth-field span {
    color: #7b8799 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.login-auth-field em {
    display: inline-flex !important;
    align-items: center !important;
    height: 24px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #edf9f2 !important;
    color: #30935c !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 800 !important;
}

.login-auth-success {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 58px !important;
    margin-top: 12px !important;
    padding: 12px !important;
    border: 1px solid #b9d2ff !important;
    border-radius: 12px !important;
    background: #f1f6ff !important;
}

.login-auth-success i {
    grid-row: 1 / span 2 !important;
    width: 34px !important;
    height: 34px !important;
}

.login-auth-success b {
    display: block !important;
    grid-column: 2 !important;
    color: #1260f6 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

.login-auth-success span {
    display: block !important;
    grid-column: 2 !important;
    margin-top: 4px !important;
    color: #61728c !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

html[lang="en"] .login-auth-card h2 {
    font-size: 30px !important;
}

html[lang="en"] .login-auth-card > p {
    font-size: 15px !important;
    line-height: 1.62 !important;
}

html[lang="en"] .login-auth-flow b {
    font-size: 15px !important;
}

html[lang="en"] .login-auth-flow span,
html[lang="en"] .login-auth-field span,
html[lang="en"] .login-auth-success span {
    font-size: 12px !important;
}

/* Dark login visual variant: secure account verification, not a user-center screenshot. */
.login-auth-visual {
    border-color: #1f3f78 !important;
    background: linear-gradient(135deg, #071733 0%, #0b2146 55%, #12376f 100%) !important;
    box-shadow: 0 24px 52px rgba(6, 24, 55, .22) !important;
}

.login-auth-card {
    border-color: rgba(137, 171, 235, .24) !important;
    background: linear-gradient(145deg, rgba(9, 28, 61, .94), rgba(14, 43, 88, .9)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.login-auth-card:before {
    background: radial-gradient(circle, rgba(70, 132, 255, .34), rgba(70, 132, 255, 0) 67%) !important;
}

.login-auth-card:after {
    display: none !important;
}

.login-auth-badge {
    border-color: rgba(111, 160, 255, .42) !important;
    background: rgba(29, 75, 153, .42) !important;
    color: #dbe8ff !important;
}

.login-auth-badge i,
.login-auth-success i {
    background: #4f85ff !important;
}

.login-auth-card h2 {
    color: #ffffff !important;
}

.login-auth-card > p {
    color: #b8c8e6 !important;
}

.login-auth-flow article,
.login-auth-panel {
    border-color: rgba(128, 165, 229, .24) !important;
    background: rgba(255, 255, 255, .075) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.login-auth-flow i,
.login-auth-field i {
    border-color: rgba(124, 166, 255, .32) !important;
    background: rgba(83, 135, 255, .16) !important;
}

.login-auth-flow i.mail:before,
.login-auth-field i.mail:before,
.login-auth-flow i.mail:after,
.login-auth-field i.mail:after,
.login-auth-flow i.password:before,
.login-auth-field i.lock:before,
.login-auth-flow i.password:after,
.login-auth-field i.lock:after {
    border-color: #8fb5ff !important;
}

.login-auth-flow i.shield:before {
    background: #74a2ff !important;
}

.login-auth-flow b,
.login-auth-panel-head b,
.login-auth-success b {
    color: #ffffff !important;
}

.login-auth-flow span,
.login-auth-field span,
.login-auth-success span {
    color: #b8c8e6 !important;
}

.login-auth-field {
    border-color: rgba(128, 165, 229, .22) !important;
    background: rgba(5, 20, 45, .36) !important;
}

.login-auth-field em {
    background: rgba(65, 184, 131, .16) !important;
    color: #8ee0b8 !important;
}

.login-auth-success {
    border-color: rgba(94, 143, 255, .42) !important;
    background: rgba(57, 104, 220, .18) !important;
}

/* Homepage hero illustration now uses a replaceable PNG asset. */
.home-console-wrap.home-hero-image-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 430px !important;
    padding: 0 !important;
    overflow: visible !important;
}

.home-hero-dashboard-image {
    display: block !important;
    width: min(760px, 100%) !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
}

.home-console-wrap.home-hero-image-wrap .home-console {
    display: none !important;
}

/* Product hero illustration now uses a replaceable PNG asset. */
.product-showcase-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.product-hero-dashboard-image {
    display: block !important;
    width: min(760px, 100%) !important;
    height: auto !important;
    max-height: 330px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Product hero: match the compact centered style of the software download page. */
.product-showcase-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 188px !important;
    padding: 28px 0 20px !important;
    text-align: center !important;
    border-bottom: 0 !important;
    background:
        linear-gradient(145deg, rgba(229, 238, 255, .78) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(325deg, rgba(229, 238, 255, .82) 0%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(180deg, #fff 0%, #f6faff 100%) !important;
}

.product-showcase-hero:before,
.product-showcase-hero:after {
    content: "" !important;
    position: absolute !important;
    width: 760px !important;
    height: 230px !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, rgba(209, 224, 249, .65), rgba(255, 255, 255, 0)) !important;
}

.product-showcase-hero:before {
    left: -180px !important;
    top: -72px !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(32deg) !important;
}

.product-showcase-hero:after {
    right: -220px !important;
    bottom: -70px !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-26deg) !important;
}

.product-showcase-hero .container,
.product-showcase-page .container {
    width: min(1280px, calc(100% - 48px)) !important;
}

.product-showcase-hero-grid {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    min-height: 0 !important;
}

.product-showcase-copy {
    max-width: 860px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.product-showcase-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 34px !important;
    padding: 0 18px !important;
    color: #1260f6 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #eaf2ff !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.product-showcase-badge i {
    width: 20px !important;
    height: 20px !important;
    background: #1260f6 !important;
}

.product-showcase-badge i:before {
    inset: 5px !important;
}

.product-showcase-hero .product-showcase-title {
    display: block !important;
    margin: 16px 0 8px !important;
    color: #071735 !important;
    font-size: 42px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: normal !important;
}

.product-showcase-hero .product-showcase-title span {
    color: #071735 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin-left: 6px !important;
}

.product-showcase-hero .product-showcase-title em {
    color: #1260f6 !important;
    font-style: normal !important;
}

.product-showcase-hero p {
    max-width: none !important;
    margin: 0 auto !important;
    color: #1f2f4a !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    text-align: center !important;
}

.product-showcase-visual {
    display: none !important;
}

/* Homepage desktop price plan icon: keep the shield fully visible and centered. */
.home-price span small {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
    color: #263a59 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.home-price span small:before {
    content: "" !important;
    position: static !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.25 19 6.25v5.7c0 4.6-2.68 7.85-7 9.55-4.32-1.7-7-4.95-7-9.55v-5.7l7-3Z' stroke='%23d09a28' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='m8.55 12.2 2.25 2.15 4.75-5.05' stroke='%23d09a28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}

.home-purchase-row .home-price {
    flex-basis: 288px !important;
    width: 288px !important;
    overflow: visible !important;
}

.home-price span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

html[lang="en"] .home-price span {
    min-width: 152px !important;
}

/* Buy page hero: keep decorative art away from long English copy. */
.buy-exact-hero > div:first-child {
    z-index: 3 !important;
}

.buy-exact-hero-art {
    z-index: 1 !important;
    pointer-events: none !important;
}

.buy-exact-hero .buy-art-cube.one {
    right: 430px !important;
    top: 68px !important;
    opacity: .72 !important;
}

html[lang="en"] .buy-exact-hero p {
    max-width: 820px !important;
}