.wcj-page { color: #172033; background: #f5f7fc; padding-bottom: 0; font-family: Inter, system-ui, sans-serif; }
.wcj-page *, .wcj-page *::before, .wcj-page *::after { box-sizing: border-box; }
.wcj-shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.wcj-hero { padding: 50px 0 56px; background: linear-gradient(125deg, #edf0ff, #f8faff 65%); border-bottom: 1px solid #dce3ef; }
.wcj-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; width: 100%; font-size: 13px; color: #64748b; }
.wcj-page .wcj-breadcrumb, .wcj-page .wcj-breadcrumb a, .wcj-page .wcj-breadcrumb span { font-size: 13px !important; line-height: 1.5 !important; }
.wcj-breadcrumb a, .wcj-copy a, .wcj-faq a { color: #4338ca; text-decoration: underline; text-underline-offset: 3px; }
.wcj-page h1 { margin: 0 0 22px; color: #172033; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
.wcj-page h2, .wcj-page .wcj-section h2 { margin: 0 0 22px; font-size: clamp(25px, 3vw, 34px) !important; line-height: 1.24 !important; letter-spacing: -.02em; color: #172033; text-align: left; }
.wcj-page h3, .wcj-page .wcj-section h3 { padding: 0; margin: 0 0 12px; font-size: 20px !important; line-height: 1.35 !important; color: #172033; text-align: left; }
.wcj-page p, .wcj-page li { color: #4a586f; font-size: 16px; line-height: 1.75; }
.wcj-page p { margin: 0 0 18px; }
.wcj-page ul, .wcj-page ol { padding-left: 24px; margin: 0 0 24px; }
.wcj-page li { margin-bottom: 10px; }
.wcj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wcj-hero .wcj-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start; }
.wcj-card { padding: 28px; border: 1px solid #dce3ef; border-radius: 20px; background: #fff; box-shadow: 0 8px 30px #23365408; }
.wcj-card:last-child p:last-child { margin-bottom: 0; }
.wcj-hero .wcj-card { border-top: 4px solid #4f46e5; }
.wcj-hero .wcj-card h2 { font-size: 24px !important; line-height: 1.3; }
.wcj-page .wcj-caption { display: block; font-size: 13px !important; color: #526176 !important; line-height: 1.6 !important; margin-top: 12px !important; }
.wcj-page .wcj-eyebrow { font-size: 12px !important; font-weight: 800; color: #4f46e5 !important; letter-spacing: .08em; text-transform: uppercase; }
.wcj-page .wcj-lead { font-size: 18px !important; }
.wcj-card dl { margin: 0; }
.wcj-card dl > div { padding: 16px 0; border-bottom: 1px solid #e1e7f1; }
.wcj-card dl > div:first-child { padding-top: 0; }
.wcj-card dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.wcj-page .wcj-card dt { font-size: 14px !important; font-weight: 700; color: #526176; margin-top: 16px; }
.wcj-card dt:first-child, .wcj-card dl > div > dt { margin-top: 0; }
.wcj-page .wcj-card dd { margin: 6px 0 0; color: #46546b; font-size: 15px !important; line-height: 1.7; }
.wcj-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.wcj-page .wcj-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 22px; border-radius: 12px; font-size: 16px !important; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none !important; border: 1px solid transparent; transition: background .15s; }
.wcj-button-primary { color: #fff !important; background: #4f46e5; }
.wcj-button-primary:hover { color: #fff !important; background: #3730a3; }
.wcj-button-secondary { color: #3730a3 !important; background: #fff; border-color: #cbd5e1; }
.wcj-button-secondary:hover { background: #eef2ff; }
.wcj-page a:focus-visible { outline: 3px solid #818cf8; outline-offset: 4px; }
.wcj-section { padding: 48px 0; }
.wcj-section + .wcj-section { border-top: 1px solid #e1e7f1; }
.wcj-copy { max-width: 960px; }
.wcj-copy.wcj-shell { max-width: 1160px; }
.wcj-copy > p, .wcj-copy > ul, .wcj-notice p { max-width: 820px; }
.wcj-page .wcj-copy > ul > li { list-style: disc; }
.wcj-page .wcj-copy a:not(.wcj-button) { font-size: inherit !important; }
.wcj-notice { padding: 22px 26px; border-left: 4px solid #4f46e5; border-radius: 0 14px 14px 0; background: #eef2ff; margin: 24px 0; }
.wcj-notice p:last-child { margin-bottom: 0; }
.wcj-table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid #dce3ef; border-radius: 14px; background: #fff; margin: 24px 0; }
.wcj-data-table { border-collapse: collapse; width: 100%; min-width: 650px; font-size: 14px; line-height: 1.6; }
.wcj-data-table th { background: #eaf0fb; color: #263650; font-weight: 700; text-align: left; }
.wcj-data-table th, .wcj-data-table td { padding: 14px 16px; border-bottom: 1px solid #e1e7f1; vertical-align: top; }
.wcj-page .wcj-data-table th, .wcj-page .wcj-data-table td { font-size: 16px !important; }
.wcj-data-table tbody tr:last-child td { border-bottom: 0; }
.wcj-data-table td { color: #46546b; }
.wcj-example { margin: 24px 0; }
.wcj-flow { counter-reset: flow; list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wcj-flow > li { counter-increment: flow; background: #fff; border: 1px solid #dce3ef; padding: 24px; border-radius: 16px; margin: 0; }
.wcj-flow > li::before { content: counter(flow, decimal-leading-zero); display: block; font-size: 13px; color: #4f46e5; font-weight: 800; margin-bottom: 10px; }
.wcj-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wcj-page .wcj-related a { display: block; padding: 24px; border: 1px solid #dce3ef; border-radius: 16px; background: #fff; color: #3730a3; font-size: 16px !important; font-weight: 700; text-decoration: none; }
.wcj-related a:hover { background: #eef2ff; }
.wcj-page .wcj-related a span { display: block; margin-top: 10px; font-size: 14px !important; line-height: 1.6; color: #526176; font-weight: 400; }
.wcj-faq { display: grid; gap: 16px; }
.wcj-faq article, .wcj-faq details { padding: 20px 24px; border: 1px solid #dce3ef; border-radius: 16px; background: #fff; }
.wcj-page .wcj-faq summary { cursor: pointer; font-weight: 700; font-size: 18px !important; line-height: 1.45 !important; }
.wcj-page .wcj-faq h3 { font-size: 18px !important; line-height: 1.45 !important; }
.wcj-page .wcj-faq summary h3 { display: inline; padding: 0; margin: 0; }
.wcj-page .wcj-faq summary:focus-visible { outline: 3px solid #818cf8; outline-offset: 4px; border-radius: 4px; }
.wcj-faq p { max-width: 880px; }
.wcj-faq details p { margin-top: 16px; }
.wcj-faq p:last-child { margin-bottom: 0; }
.wcj-final { padding: clamp(24px, 4vw, 48px); border-radius: 20px; background: #19233f; }
.wcj-page .wcj-final h2 { max-width: 900px; margin-bottom: 16px; color: #fff; text-align: left; font-size: clamp(26px, 3vw, 34px) !important; line-height: 1.25 !important; }
.wcj-final p { max-width: 840px; color: #cbd5e1; }
.wcj-final .wcj-actions { margin-top: 24px; }
.wcj-final .wcj-button { font-size: 16px !important; }
.wcj-page .journal-maker { margin-inline: auto; }
/* Общая тема переопределяет типографику и отступы списков компонента. */
.wcj-page .jm-wrap { padding: 40px 0 48px; }
.wcj-page .jm-wrap > .container { width: min(1160px, calc(100% - 40px)); max-width: none; margin-inline: auto; padding: 0; }
.wcj-page .jm-section-header .jm-section-title { text-align: center; }
.wcj-page .jm-section-subtitle { margin: 0 auto; }
.wcj-page .jm-eyebrow, .wcj-page .jm-label { font-size: 12px !important; }
.wcj-page .jm-card-title { font-size: 18px !important; }
.wcj-page .jm-input, .wcj-page .jm-select { font-size: 16px !important; }
.wcj-page .jm-col-list { padding: 0; margin: 0 0 12px; }
.wcj-page .jm-col-item { grid-template-columns: 22px minmax(0, 1fr) auto 26px; margin: 0; }
.wcj-page .jm-col-label-input { min-width: 0; font-size: 14px !important; }
.wcj-page .jm-col-label-input:focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; }
.wcj-page .jm-type-badge { font-size: 11px !important; }
.wcj-page .jm-drag-handle { font-size: 16px !important; }
.wcj-page .jm-btn-add, .wcj-page .jm-btn-download { font-size: 16px !important; }
.wcj-page .jm-preview-head { flex-wrap: wrap; }
.wcj-page .jm-preview-head > div { min-width: 0; }
.wcj-page .jm-preview-title { font-size: 18px !important; }
.wcj-page .jm-preview-meta, .wcj-page .jm-preview-footer-hint { font-size: 12px !important; color: #526176; }
.wcj-page .jm-preview-badge, .wcj-page .jm-scale-badge { font-size: 11px !important; }
.wcj-page .jm-preview-footer { flex-wrap: wrap; gap: 8px; }
.wcj-page .jm-table { table-layout: fixed; }
.wcj-page .jm-table-scaler[style*="transform: scale"] { position: absolute; top: 0; left: 0; }
.wcj-page .jm-table th, .wcj-page .jm-table td { font-size: 11px !important; line-height: 1.35 !important; white-space: normal; overflow-wrap: break-word; }
.wcj-page .jm-table th { background: #4f46e5; }
.wcj-page .jm-table td { color: #64748b; }
@media (max-width: 850px) { .wcj-hero .wcj-grid, .wcj-grid, .wcj-flow { grid-template-columns: 1fr; } .wcj-related { grid-template-columns: 1fr; } .wcj-hero { padding: 32px 0 40px; } .wcj-section { padding: 36px 0; } }
@media (min-width: 961px), (max-width: 480px) {
    .wcj-page .jm-col-item { grid-template-columns: 22px minmax(0, 1fr) 40px; gap: 6px 9px; }
    .wcj-page .jm-drag-handle { grid-column: 1; grid-row: 1 / 3; }
    .wcj-page .jm-col-label-input { grid-column: 2 / 4; grid-row: 1; min-height: 32px; }
    .wcj-page .jm-type-badge { grid-column: 2; grid-row: 2; justify-self: start; min-height: 32px; }
    .wcj-page .jm-col-remove { grid-column: 3; grid-row: 2; min-width: 40px; min-height: 32px; }
}
@media (max-width: 480px) {
    .wcj-page .wcj-lead { font-size: 16px !important; }
    .wcj-shell, .wcj-page .jm-wrap > .container { width: calc(100% - 28px); }
    .wcj-card, .wcj-page .jm-card { padding: 22px; }
    .wcj-actions { flex-direction: column; }
    .wcj-button { width: 100%; }
    .wcj-faq article, .wcj-faq details { padding: 20px; }
    .wcj-page .jm-col-label-input { min-height: 36px; font-size: 16px !important; }
    .wcj-page .jm-type-badge, .wcj-page .jm-col-remove { min-height: 40px; }
}
@media (max-width: 360px) {
    body:has(.wcj-page) .header-content { padding-inline: 0; gap: 6px; }
    body:has(.wcj-page) .header-modern .logo-text { font-size: 16px !important; }
    body:has(.wcj-page) .header-modern .logo-image { margin-right: 0 !important; }
    body:has(.wcj-page) .header-modern .lang-dropdown .dropdown-toggle { padding: 8px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .wcj-button { transition: none; } }