:root { --knowledge-red: #ed1c24; --knowledge-ink: #17191d; --knowledge-muted: #737780; --knowledge-line: #e3e5e8; --knowledge-bg: #f4f5f6; --knowledge-article-width: 940px; }
.knowledge-page { background: var(--knowledge-bg); color: var(--knowledge-ink); }
.knowledge-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--knowledge-red); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.knowledge-kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.knowledge-feed-section { min-height: 620px; padding: 26px 0 90px; }
.knowledge-card p { color: var(--knowledge-muted); line-height: 1.55; }
.knowledge-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; color: #94979e; font-size: 10px; }
.knowledge-card-meta__reaction { display: inline-flex; align-items: center; gap: 3px; color: var(--knowledge-red); }
.knowledge-card-meta__reaction svg { width: 14px; height: 14px; fill: #ffe7e8; stroke: currentColor; }
.knowledge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; }
.knowledge-card { overflow: hidden; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--knowledge-line); border-radius: 18px; background: #fff; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.knowledge-card:hover { transform: translateY(-3px); box-shadow: 0 17px 46px rgba(25, 27, 31, .08); }
.knowledge-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: #e5e6e8; }
.knowledge-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.knowledge-card:hover .knowledge-card__media img { transform: scale(1.035); }
.knowledge-card__body { display: flex; flex-direction: column; padding: 18px; }
.knowledge-card h2 { display: -webkit-box; overflow: hidden; margin: 0 0 7px; font-size: 18px; line-height: 1.17; letter-spacing: -.025em; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.knowledge-card p { display: -webkit-box; overflow: hidden; margin: 0; font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.knowledge-card--skeleton { pointer-events: none; }
.knowledge-card--skeleton .knowledge-card__media, .knowledge-card--skeleton .knowledge-card__body > span { background: linear-gradient(90deg, #e8e9eb 25%, #f4f5f6 37%, #e8e9eb 63%); background-size: 400% 100%; animation: knowledge-skeleton-pulse 1.35s ease infinite; }
.knowledge-card--skeleton .knowledge-card__body { gap: 10px; }
.knowledge-card--skeleton .knowledge-card__body > span { display: block; height: 13px; border-radius: 999px; }
.knowledge-card--skeleton .knowledge-card__body > span:nth-child(1) { width: 76%; height: 20px; }
.knowledge-card--skeleton .knowledge-card__body > span:nth-child(2) { width: 92%; }
.knowledge-card--skeleton .knowledge-card__body > span:nth-child(3) { width: 55%; margin-top: 8px; }
@keyframes knowledge-skeleton-pulse { to { background-position: -400% 0; } }
.knowledge-empty { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 8px; color: #858991; text-align: center; }
.knowledge-empty[hidden] { display: none; }
.knowledge-empty strong { color: #24262b; font-size: 22px; }
.knowledge-more { min-width: 190px; height: 50px; margin: 28px auto 0; padding: 0 24px; border: 1px solid #202226; border-radius: 13px; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }

.knowledge-article-page { min-height: 700px; padding-bottom: 90px; }
.knowledge-breadcrumbs { width: min(var(--knowledge-article-width), calc(100% - 32px)); display: flex; gap: 9px; margin: 0 auto; padding: 24px 0; color: #91949a; font-size: 11px; }
.knowledge-breadcrumbs a:hover { color: var(--knowledge-red); }
.knowledge-article { width: min(var(--knowledge-article-width), calc(100% - 32px)); margin: 0 auto; }
.knowledge-article-skeleton { padding: 35px 0 44px; }
.knowledge-article-skeleton__head { display: grid; gap: 14px; margin-bottom: 34px; }
.knowledge-article-skeleton__head > span, .knowledge-article-skeleton__head > i, .knowledge-article-skeleton__cover, .knowledge-article-skeleton__content > span { display: block; border-radius: 999px; background: linear-gradient(90deg, #e8e9eb 25%, #f4f5f6 37%, #e8e9eb 63%); background-size: 400% 100%; animation: knowledge-skeleton-pulse 1.35s ease infinite; }
.knowledge-article-skeleton__head > span:nth-child(1) { width: 78%; height: 62px; }
.knowledge-article-skeleton__head > span:nth-child(2) { width: 51%; height: 62px; }
.knowledge-article-skeleton__head > span:nth-child(3) { width: 68%; height: 22px; }
.knowledge-article-skeleton__head > i { width: 42%; height: 12px; margin-top: 5px; }
.knowledge-article-skeleton__cover { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 42px; border-radius: 26px; }
.knowledge-article-skeleton__content { display: grid; gap: 13px; }
.knowledge-article-skeleton__content > span { width: 100%; height: 15px; }
.knowledge-article-skeleton__content > span:nth-child(2) { width: 93%; }.knowledge-article-skeleton__content > span:nth-child(3) { width: 87%; }.knowledge-article-skeleton__content > span:nth-child(4) { width: 96%; }.knowledge-article-skeleton__content > span:nth-child(5) { width: 61%; }
.knowledge-article__head { margin: 35px 0 34px; }
.knowledge-article__head h1 { margin: 0 0 18px; font-size: clamp(38px, 6vw, 70px); line-height: .98; letter-spacing: -.055em; }
.knowledge-article__lead { color: #696d74; font-size: 18px; line-height: 1.6; }
.knowledge-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 20px; margin-top: 22px; color: #95989e; font-size: 12px; }
.knowledge-article__cover { overflow: hidden; margin: 0 0 44px; border-radius: 26px; background: #e4e5e7; }
.knowledge-article__cover img { display: block; width: 100%; max-height: 650px; object-fit: cover; }
.knowledge-article__content { display: grid; gap: 26px; }
.knowledge-block--text, .knowledge-block--heading, .knowledge-block--quote { width: 100%; }
.knowledge-block--text { color: #34373d; font-size: 17px; line-height: 1.78; white-space: pre-line; }
.knowledge-block--heading h2 { font-size: clamp(27px, 4vw, 39px); line-height: 1.12; letter-spacing: -.035em; }
.knowledge-block--heading h3 { font-size: 25px; line-height: 1.2; letter-spacing: -.02em; }
.knowledge-block--quote { padding: 25px 28px; border-left: 4px solid var(--knowledge-red); border-radius: 0 18px 18px 0; background: #fff; color: #31343a; font-size: 19px; font-weight: 500; line-height: 1.55; }
.knowledge-block--image, .knowledge-block--video { overflow: hidden; margin: 12px 0; border-radius: 24px; background: #dedfe2; }
.knowledge-block__image-frame { aspect-ratio: 4 / 3; overflow: hidden; }
.knowledge-block__image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.knowledge-block--video video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 720px; object-fit: cover; }
.knowledge-block--video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.knowledge-block figcaption { padding: 12px 16px 15px; background: #fff; color: #81848b; font-size: 11px; }
.knowledge-product { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 24px; margin: 10px 0; padding: 18px; border: 1px solid #dedfe2; border-radius: 22px; background: #fff; }
.knowledge-product__media { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: #f3f4f5; }
.knowledge-product__media img { width: 100%; height: 100%; object-fit: contain; }
.knowledge-product__body span { color: var(--knowledge-red); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.knowledge-product__body h3 { margin: 8px 0; font-size: 20px; line-height: 1.25; }
.knowledge-product__body strong { font-size: 20px; }
.knowledge-product__actions { display: grid; gap: 8px; }
.knowledge-product__actions a, .knowledge-product__actions button { min-width: 140px; min-height: 43px; display: grid; place-items: center; padding: 0 16px; border: 1px solid #202226; border-radius: 12px; background: transparent; color: #202226; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.knowledge-product__actions button { border-color: var(--knowledge-red); background: var(--knowledge-red); color: #fff; }
.knowledge-reaction-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0 0; padding: 18px 0; border-top: 1px solid #dcdee1; border-bottom: 1px solid #dcdee1; }
.knowledge-reaction-bar p { color: #777b83; font-size: 13px; }
.knowledge-fire { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; border: 1px solid #f0c8ca; border-radius: 999px; background: #fff; color: #42454b; font: inherit; font-weight: 650; cursor: pointer; }
.knowledge-fire svg { width: 22px; color: var(--knowledge-red); fill: #ffe7e8; }
.knowledge-fire.is-active { border-color: var(--knowledge-red); background: var(--knowledge-red); color: #fff; }
.knowledge-fire.is-active svg { color: #fff; fill: #fff; }
.knowledge-comments { width: min(var(--knowledge-article-width), calc(100% - 32px)); margin: 34px auto 0; }
.knowledge-comments__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.knowledge-comments h2 { margin: 0; font-size: 34px; letter-spacing: -.035em; }
.knowledge-comments h2 em { color: #9a9da3; font-size: 18px; font-style: normal; }
.knowledge-comments__head p { max-width: 280px; color: #85888f; font-size: 12px; line-height: 1.5; text-align: right; }
.knowledge-comment-auth { padding: 19px 21px; border: 1px solid #e0e1e3; border-radius: 15px; background: #fff; color: #6f737b; font-size: 13px; }
.knowledge-comment-auth button { margin-left: 6px; border: 0; background: none; color: var(--knowledge-red); font: inherit; font-weight: 650; cursor: pointer; }
.knowledge-comment-form { padding: 20px; border: 1px solid #dedfe2; border-radius: 18px; background: #fff; }
.knowledge-comment-form label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 650; }
.knowledge-comment-form textarea { width: 100%; resize: vertical; padding: 15px; border: 1px solid #d8dade; border-radius: 12px; background: #fafafa; font: inherit; line-height: 1.55; }
.knowledge-comment-form > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.knowledge-comment-form button { min-height: 43px; padding: 0 18px; border: 0; border-radius: 11px; background: var(--knowledge-red); color: #fff; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.knowledge-comment-list { display: grid; gap: 12px; margin-top: 22px; }
.knowledge-comment-list.is-scrollable { max-height: var(--knowledge-comment-viewport); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 6px; }
.knowledge-comment { padding: 20px 21px; border: 1px solid #e0e1e4; border-radius: 17px; background: #fff; }
.knowledge-comment__head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.knowledge-comment__avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #202226; color: #fff; font-size: 12px; font-weight: 700; }
.knowledge-comment__head strong { font-size: 13px; }.knowledge-comment__head time { margin-left: auto; color: #999ca2; font-size: 10px; }
.knowledge-comment p { color: #484b52; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.knowledge-error { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 15px; text-align: center; }
.knowledge-error strong { font-size: 26px; }.knowledge-error a { color: var(--knowledge-red); font-weight: 650; }

@media (max-width: 980px) {
  .knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-product { grid-template-columns: 150px minmax(0, 1fr); }.knowledge-product__actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .knowledge-grid { grid-template-columns: 1fr; }
  .knowledge-article__head { margin-top: 18px; }.knowledge-article__cover, .knowledge-block--image, .knowledge-block--video { border-radius: 17px; }
  .knowledge-block--text { font-size: 16px; line-height: 1.7; }
  .knowledge-product { grid-template-columns: 110px minmax(0, 1fr); gap: 15px; }.knowledge-product__body h3 { font-size: 16px; }.knowledge-product__body strong { font-size: 16px; }
  .knowledge-comments__head { align-items: flex-start; flex-direction: column; }.knowledge-comments__head p { text-align: left; }
  .knowledge-reaction-bar { align-items: flex-start; flex-direction: column; }
}