/* Системы счисления в новом виде: первый экран с конвертером, разбор, таблица, тренажёр */
/* Файл подключается раньше rd.css, поэтому селекторы начинаются с html body.rd: иначе общие правила статьи перебивают здешние */
html body.rd .ss-kicker { display: block; margin: 0 0 12px; font: 400 12px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
html body.rd .mono { font-family: var(--f-mono); }
html body.rd .nb { white-space: nowrap; }
html body.rd .op { color: var(--accent); }

/* Первый экран */
html body.rd .ss-top { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 40px; align-items: start; padding: 0 var(--gut) 56px; }
html body.rd .ss-top__text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
html body.rd .ss-dek { margin: 0; max-width: 640px; font: 400 19px/1.55 var(--f-text); color: var(--ink); }
html body.rd .ss-short { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 22px; background: var(--card); }
html body.rd .ss-short .rd-label { margin: 0; }
html body.rd .ss-short__v { font: 600 26px/1.3 var(--f-mono); letter-spacing: -.5px; color: var(--ink); }
html body.rd .ss-short__v sub { font-size: .55em; color: var(--accent); }
html body.rd .ss-short__cap { margin: 0; font: 400 14px/1.45 var(--f-ui); color: var(--mute); }
html body.rd .ss-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* Конвертер */
html body.rd .ss-cv { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 28px; background: var(--card); box-shadow: 0 12px 40px #0D0D0D14; min-width: 0; scroll-margin-top: 16px; }
html body.rd .ss-cv__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
html body.rd .ss-cv__head .rd-label { margin: 0; }
html body.rd .ss-cv__full { font: 500 14px/1.3 var(--f-ui); color: var(--accent); text-decoration: none; white-space: nowrap; }
html body.rd .ss-cv__full:hover { text-decoration: underline; }
html body.rd .ss-cv__lab { display: block; margin: 0 0 -12px; font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
html body.rd .ss-cv__sel .ss-cv__lab { margin: 0 0 8px; }
html body.rd .ss-cv__inp { width: 100%; box-sizing: border-box; padding: 14px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--tile); font: 600 32px/1.2 var(--f-mono); letter-spacing: -.5px; color: var(--ink); text-transform: uppercase; outline: none; }
html body.rd .ss-cv__inp:focus { border-color: var(--accent); }
html body.rd .ss-cv__bases { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
html body.rd .ss-cv__sel { min-width: 0; }
html body.rd .ss-cv__sel select { width: 100%; height: 50px; box-sizing: border-box; padding: 0 36px 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7075' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; font: 500 15px/1 var(--f-ui); color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
html body.rd .ss-cv__sel select:focus { outline: none; border-color: var(--accent); }
html body.rd .ss-cv__swap { width: 50px; height: 50px; border: 0; border-radius: 999px; background: var(--pill); font: 500 20px/1 var(--f-ui); color: var(--ink); cursor: pointer; transition: background .15s; }
html body.rd .ss-cv__swap:hover { background: var(--accent-soft); color: var(--accent); }
html body.rd .ss-cv__res { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px; background: var(--tile); min-width: 0; }
html body.rd .ss-cv__res .rd-label { margin: 0; }
html body.rd .ss-cv__ans { font: 600 40px/1.15 var(--f-mono); letter-spacing: -1px; color: var(--ink); overflow-wrap: anywhere; }
html body.rd .ss-cv__ans sub { font-size: .45em; color: var(--accent); letter-spacing: 0; }
html body.rd .ss-cv__err { display: block; font: 500 15px/1.45 var(--f-ui); letter-spacing: 0; color: var(--bad); }
html body.rd .ss-cv__rest { display: flex; flex-direction: column; }
html body.rd .ss-cv__rest:empty { display: none; }
html body.rd .ss-cv__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font: 400 14px/1.35 var(--f-ui); color: var(--mute); }
html body.rd .ss-cv__v { font: 500 16px/1.35 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; text-align: right; }
html body.rd .ss-cv__v sub { color: var(--accent); }
html body.rd .ss-cv__btns { display: flex; flex-wrap: wrap; gap: 10px; }
html body.rd .ss-cv__sol { margin: 0; }

/* Главы разбора */
html body.rd .rd-article__body h2 { scroll-margin-top: 16px; }
html body.rd .rd-article__body h2 em, html body.rd .ss-bcard h2 em { font-style: normal; color: var(--mute); }
html body.rd .ss-num { display: block; margin: 0 0 10px; font: 500 13px/1 var(--f-mono); letter-spacing: 1px; color: var(--accent); }
html body.rd .rd-label .ss-num { display: inline; margin: 0 8px 0 0; font-size: inherit; letter-spacing: inherit; }
html body.rd .ss-lede { font-size: 19px; line-height: 1.55; color: var(--mute); }
html body.rd .rd-article__body h3 { font: 600 20px/1.3 var(--f-ui); margin: 32px 0 12px; }

html body.rd .ss-bases { display: flex; gap: 12px; margin: 24px 0; }
html body.rd .ss-base { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 16px; background: var(--tile); min-width: 0; }
html body.rd .ss-base__d { font: 600 22px/1.2 var(--f-mono); color: var(--ink); white-space: nowrap; }
html body.rd .ss-base__b { font: 400 13px/1.3 var(--f-ui); color: var(--mute); }
html body.rd .ss-base--acc { background: var(--accent-soft); }
html body.rd .ss-base--acc .ss-base__d { color: var(--accent); }

html body.rd .formula { margin: 24px 0; padding: 20px 24px; border-radius: 16px; background: var(--tile); font: 500 18px/1.7 var(--f-mono); color: var(--ink); text-align: center; overflow-x: auto; }
html body.rd .formula sub, html body.rd .formula sup { font-size: .65em; }

html body.rd .steps { list-style: none; counter-reset: ss-step; margin: 24px 0; padding: 0; }
html body.rd .steps li::marker { content: none; }
html body.rd .steps li { counter-increment: ss-step; position: relative; margin: 0; padding: 16px 0 16px 52px; border-top: 1px solid var(--line); }
html body.rd .steps li:first-child { border-top: 0; }
html body.rd .steps li::before { content: counter(ss-step); position: absolute; left: 0; top: 14px; width: 32px; height: 32px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 14px/32px var(--f-mono); text-align: center; }
html body.rd .steps .res { display: inline-block; margin: 8px 0 0; padding: 4px 10px; border-radius: 8px; background: var(--accent-soft); font: 500 15px/1.4 var(--f-mono); color: var(--accent); }
html body.rd .steps li > .res { display: table; }

html body.rd .figure { margin: 24px 0; padding: 24px; border-radius: 20px; background: var(--tile); }
html body.rd #figBox svg { display: block; width: 100%; height: auto; }
html body.rd .figure__cap { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; font: 400 14px/1.45 var(--f-ui); color: var(--mute); }
html body.rd .figure__cap p { margin: 0; font: inherit; color: inherit; }
html body.rd .figref { flex: none; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }

html body.rd .ss-div { display: flex; align-items: center; gap: 24px; margin: 24px 0; padding: 24px; border-radius: 20px; background: var(--tile); }
html body.rd .ss-div__rows { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
html body.rd .ss-div__row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); font: 500 16px/1.4 var(--f-mono); color: var(--ink); }
html body.rd .ss-div__row:first-child { border-top: 0; }
html body.rd .ss-div__r { flex: none; width: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); text-align: center; font-weight: 600; }
html body.rd .ss-div__cap { flex: 0 0 220px; display: flex; flex-direction: column; gap: 10px; }
html body.rd .ss-div__up { font: 400 12px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
html body.rd .ss-div__ans { font: 600 32px/1.1 var(--f-mono); color: var(--accent); }
html body.rd .ss-div__ans sub { font-size: .5em; }

/* Таблицы */
html body.rd .table-wrap { margin: 24px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
html body.rd .tbl { display: table; width: 100%; margin: 0; border-collapse: collapse; font: 400 15px/1.45 var(--f-ui); color: var(--ink); background: var(--card); }
html body.rd .tbl th { border: 0; border-radius: 0; padding: 12px 18px; vertical-align: top; background: var(--pill); font: 500 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); text-align: left; white-space: nowrap; }
html body.rd .tbl td { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 18px; border-top: 1px solid var(--line); white-space: nowrap; }
html body.rd .tbl tbody th { border-top: 1px solid var(--line); background: var(--tile); }
html body.rd .tbl--text, html body.rd .tbl--roman, html body.rd .tbl--nums { width: 100%; }
html body.rd .tbl--text td:last-child { white-space: normal; min-width: 200px; }
html bodyX-space: normal; text-align: left; vertical-align: top; }
html body.rd .tbl--roman td, html body.rd .tbl--nums td { font-family: var(--f-mono); }
html body.rd .tbl--nums td:first-child { font-weight: 600; }
html body.rd .tbl--nums .hs { display: none; }
html body.rd .ss-note { margin: 12px 0 0; font: 400 14px/1.5 var(--f-ui); color: var(--mute); }
html body.rd .tblpdf { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 22px 0 28px; }
html body.rd .tblpdf .mono { font-size: 12px; color: var(--mute); }
html body.rd .ss-pdf { border: 0; cursor: pointer; font-family: var(--f-ui); }
html body.rd .print-head { display: none; }
#printSheet { display: none; }

/* Тренажёр */
html body.rd .trainer { display: flex; flex-direction: column; gap: 18px; margin: 24px 0 12px; padding: 28px; border-radius: 20px; background: var(--bg); }
html body.rd .trainer__tabs { display: inline-flex; align-self: flex-start; gap: 0; padding: 4px; border-radius: 999px; background: var(--tile); }
html body.rd .trainer__tab { padding: 10px 18px; border: 0; border-radius: 999px; background: none; font: 500 14px/1.2 var(--f-ui); color: var(--mute); cursor: pointer; }
html body.rd .trainer__tab:hover { color: var(--ink); }
html body.rd .trainer__tab[aria-selected="true"] { background: var(--ink); color: #fff; }
html body.rd .trainer__panel { display: flex; flex-direction: column; gap: 14px; }
html body.rd .trainer__panel[hidden] { display: none; }
html body.rd .trainer__lab { margin: 0; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
html body.rd .trainer__task { font: 600 40px/1.15 var(--f-mono); letter-spacing: -1px; color: var(--ink); text-align: center; overflow-wrap: anywhere; }
html body.rd .trainer__task sub { font-size: .45em; color: var(--accent); letter-spacing: 0; }
html body.rd .trainer__form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
html body.rd .finp { display: flex; flex-direction: column; align-items: center; gap: 6px; }
html body.rd .finp__lab { font-size: 11px; letter-spacing: .5px; color: var(--mute); }
html body.rd .trainer input.dinp { width: clamp(150px, 46vw, 220px); box-sizing: border-box; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font: 600 20px/1.2 var(--f-mono); color: var(--ink); text-align: center; text-transform: uppercase; outline: none; }
html body.rd .trainer input.dinp:focus { border-color: var(--accent); }
html body.rd .trainer input.binp { width: 84px; }
html body.rd .trainer input.inp--ok { border-color: var(--good); color: var(--good); }
html body.rd .trainer input.inp--no { border-color: var(--bad); }
html body.rd .trainer__btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; }
html body.rd .ss-link { padding: 8px 0; border: 0; background: none; font: 500 15px/1.3 var(--f-ui); color: var(--accent); cursor: pointer; }
html body.rd .ss-link:hover { text-decoration: underline; }
html body.rd .trainer__msg { margin: 0; font: 500 15px/1.45 var(--f-ui); text-align: center; }
html body.rd .trainer__msg:empty { display: none; }
html body.rd .trainer__msg.ok { color: var(--good); }
html body.rd .trainer__msg.no { color: var(--bad); }
html body.rd .trainer__sol { display: none; }
html body.rd .trainer__sol.show { display: block; padding: 20px 24px; border-radius: 16px; background: var(--tile); font: 400 15px/1.55 var(--f-text); color: var(--ink); text-align: left; overflow-x: auto; }
html body.rd .trainer__sol p { margin: 0 0 10px; font: inherit; }
html body.rd .trainer__sol .steps { margin: 8px 0 0; }
html body.rd .trainer__sol .steps li { padding: 12px 0 12px 44px; }
html body.rd .trainer__sol .steps li::before { top: 10px; width: 28px; height: 28px; line-height: 28px; font-size: 13px; }
html body.rd .trainer__sol .steps .res { white-space: normal; display: block; width: fit-content; max-width: 100%; box-sizing: border-box; margin: .4em 0 0; overflow-wrap: anywhere; }
html body.rd .trainer__sol .divl { display: block; margin: .35em 0; font-family: var(--f-mono); }
html body.rd .trainer__score { margin: 0; font-size: 12px; color: var(--mute); text-align: center; }
html body.rd .trainer__score:empty { display: none; }

/* Низ: ошибки, вопросы, источники, ещё по теме */
html body.rd .ss-bcard { padding: 48px; border-radius: 24px; background: var(--card); }
html body.rd .ss-bcard h2 { margin: 56px 0 20px; font: 700 30px/1.2 var(--f-ui); letter-spacing: -.4px; color: var(--ink); scroll-margin-top: 16px; }
html body.rd .ss-bcard h2:first-child { margin-top: 0; }
html body.rd .ss-bcard .faq { margin-top: 32px; padding: 0; border-radius: 0; background: none; }
html body.rd .ss-errors { list-style: none; margin: 0; padding: 0; }
html body.rd .ss-errors li { margin: 0; position: relative; padding: 16px 0 16px 36px; border-top: 1px solid var(--line); font: 400 16px/1.6 var(--f-text); color: var(--ink); }
html body.rd .ss-errors li:first-child { border-top: 0; }
html body.rd .ss-errors li::before { content: "×"; position: absolute; left: 0; top: 14px; width: 24px; height: 24px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font: 600 16px/24px var(--f-ui); text-align: center; }
html body.rd .ss-bcard > p { margin: 0 0 16px; font: 400 16px/1.6 var(--f-text); color: var(--mute); }
html body.rd .refs { display: flex; flex-direction: column; margin: 8px 0 0; }
html body.rd .ref { display: grid; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); }
html body.rd .ref:first-child { border-top: 0; }
html body.rd .ref__b { font: 600 16px/1.4 var(--f-ui); color: var(--ink); }
html body.rd .ref__b em { display: block; margin-top: 6px; font: 400 11px/1.3 var(--f-mono); font-style: normal; letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
html body.rd .ref__t { font: 400 15px/1.55 var(--f-text); color: var(--mute); }
html body.rd .refs__note { margin: 16px 0 0; font: 400 14px/1.5 var(--f-ui); color: var(--mute); }
@media (min-width: 860px) {
    html body.rd .ref { grid-template-columns: 1fr 1.15fr; gap: 24px; }
}

html body.rd .ss-more { display: flex; flex-direction: column; scroll-margin-top: 16px; }
html body.rd .ss-more .rd-label { margin: 0 0 8px; }
html body.rd .ss-more .more__i { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; }
html body.rd .ss-more .rd-label + .more__i { border-top: 0; }
html body.rd .ss-more .more__i b { font: 600 15px/1.35 var(--f-ui); color: var(--ink); }
html body.rd .ss-more .more__i span { font: 400 13px/1.4 var(--f-ui); color: var(--mute); }
html body.rd .ss-more .more__i:hover b { color: var(--accent); }
html body.rd .ss-memo h3 { margin: 8px 0 8px; font: 600 20px/1.3 var(--f-ui); color: var(--ink); }
html body.rd .ss-memo__fine { margin: 0 0 12px; font: 400 13px/1.45 var(--f-ui); color: var(--mute); }
html body.rd .ss-memo__list { margin: 0; }
html body.rd .ss-memo__list div { padding: 12px 0; border-top: 1px solid var(--line); }
html body.rd .ss-memo__list dt { font: 500 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
html body.rd .ss-memo__list dd { margin: 4px 0 0; font: 400 14px/1.5 var(--f-text); color: var(--ink); }

/* Оглавление с номерами глав */
html body.rd .ss-toc .content-links__list { counter-reset: ss-toc; }
html body.rd .ss-toc .content-links__item { counter-increment: ss-toc; }
html body.rd .ss-toc .content-links__item .button { display: flex; gap: 10px; align-items: baseline; }
html body.rd .ss-toc .content-links__item .button::before { content: counter(ss-toc, decimal-leading-zero); flex: none; font: 500 11px/1 var(--f-mono); color: var(--accent); }

/* Адаптив */
@media (max-width: 1180px) {
    html body.rd .ss-top { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
}
@media (max-width: 1024px) {
    html body.rd .ss-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
    html body.rd .ss-top { gap: 24px; padding: 0 16px 40px; }
    html body.rd .ss-dek { font-size: 17px; }
    html body.rd .ss-short { padding: 20px; }
    html body.rd .ss-short__v { font-size: 20px; }
    html body.rd .ss-cv { padding: 20px 16px; border-radius: 22px; gap: 16px; }
    html body.rd .ss-cv__inp { font-size: 26px; padding: 12px 16px; }
    html body.rd .ss-cv__bases { grid-template-columns: minmax(0, 1fr); }
    html body.rd .ss-cv__swap { justify-self: center; transform: rotate(90deg); }
    html body.rd .ss-cv__res { padding: 18px 16px; }
    html body.rd .ss-cv__ans { font-size: 30px; }
    html body.rd .ss-cv__btns .rd-btn { flex: 1 1 100%; justify-content: center; }
    html body.rd .ss-lede { font-size: 17px; }
    html body.rd .ss-bases { flex-wrap: wrap; }
    html body.rd .ss-base { flex: 1 1 calc(50% - 6px); padding: 14px 16px; }
    html body.rd .formula { padding: 16px; font-size: 15px; text-align: left; }
    html body.rd .figure { padding: 16px; }
    html body.rd .ss-div { flex-direction: column; align-items: stretch; padding: 16px; gap: 16px; }
    html body.rd .ss-div__cap { flex: none; }
    html body.rd .tbl th, html body.rd .tbl td { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 12px; }
    html body.rd .tbl--nums .hl { display: none; }
    html body.rd .tbl--nums .hs { display: inline; }
    html body.rd .ss-pdf { width: 100%; justify-content: center; }
    html body.rd .trainer { padding: 20px 16px; }
    html body.rd .trainer__tabs { align-self: stretch; }
    html body.rd .trainer__tab { flex: 1 1 0; padding: 10px 8px; }
    html body.rd .trainer__task { font-size: 30px; }
    html body.rd .trainer__sol.show { padding: 16px; }
    html body.rd .trainer__sol .divl { font-size: 13px; }
    html body.rd .ss-bcard { padding: 24px 16px; border-radius: 22px; }
    html body.rd .ss-bcard h2 { font-size: 24px; margin-top: 40px; }
    html body.rd .ss-bcard .faq { padding: 0; }
}

@media print {
    body.printing > * { display: none !important; }
    body.printing > #printSheet { display: block !important; }
    #printSheet .table-wrap { overflow: visible; border: 0; box-shadow: none; }
    #printSheet .print-head { display: block; margin-bottom: 12px; font-family: "JetBrains Mono", monospace; font-size: 11pt; }
    #printSheet .print-head span { display: block; margin-top: 5px; font-size: 8.5pt; color: #555; }
    #printSheet .tbl { width: 100%; font-size: 10pt; border-collapse: collapse; }
    #printSheet .tbl th, #printSheet .tbl td { padding: 4px 8px; border: 1px solid #999; }
    #printSheet .tbl .hs { display: none; }
    #printSheet .tbl thead { display: table-header-group; }
    #printSheet .tbl tr { page-break-inside: avoid; }
    @page { margin: 14mm; }
}