:root { font-family: Inter, Arial, Helvetica, sans-serif; color: #17233a; background: #f6f8fb; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
.topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 max(24px, calc((100vw - 1420px)/2)); background: #fff; border-bottom: 1px solid #e0e6ef; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #1d3a61; color: #fff; }
.brand-muted { font-weight: 500; color: #667388; }
.topbar-note { font-size: 12px; color: #667388; }
.layout { max-width: 1420px; margin: auto; padding: 28px 24px 56px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 21px; }
.page-heading h1 { font-size: 26px; line-height: 1.2; margin: 0 0 7px; }
.page-heading p { margin: 0; color: #69778a; font-size: 14px; }
.counter { font-size: 13px; color: #4b647f; white-space: nowrap; }
.mode-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid #dfe5ed; border-radius: 11px; background: #fff; }
.mode-tab { min-height: 36px; padding: 7px 15px; border: 0; border-radius: 8px; background: transparent; color: #52647b; font-size: 13px; font-weight: 700; }
.mode-tab.active { background: #1d3a61; color: #fff; }
.plan-panel { margin: 0 0 12px; padding: 13px 18px; border: 1px solid #d9e5f1; border-radius: 12px; background: #eef5fc; }
.plan-panel > summary { cursor: pointer; color: #21466f; font-size: 13px; font-weight: 700; }
.plan-explain, .plan-next { margin: 12px 0 0; color: #516a84; font-size: 12px; line-height: 1.5; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.plan-format { display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #dbe7f3; border-radius: 8px; background: #fff; color: #60748c; font-size: 11px; }
.plan-format strong { color: #244568; font-size: 12px; }
.discovery-panel { margin: 0 0 18px; padding: 16px 20px; border: 1px solid #dfe5ed; border-radius: 13px; background: #fff; }
.discovery-panel > summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.discovery-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.discovery-controls label, .discovery-help, #discovery-status { color: #627287; font-size: 13px; }
.discovery-controls select { min-height: 40px; padding: 8px 10px; border: 1px solid #d1dbe7; border-radius: 8px; background: #fff; color: #17233a; }
.discovery-help { margin: 12px 0 0; line-height: 1.5; }
.discovery-results h3 { margin: 20px 0 12px; font-size: 14px; }
.found-card { margin-top: 10px; padding: 14px 16px; border: 1px solid #e1e6ee; border-radius: 10px; }
.found-card summary { cursor: pointer; font-weight: 700; line-height: 1.4; }
.found-pitch { color: #35526f; font-size: 14px; line-height: 1.5; }
.catalog-box { margin: 12px 0 16px; padding: 12px; border: 1px solid #e2eaf2; border-radius: 9px; background: #f8fbff; color: #52647b; font-size: 12px; }
.catalog-caption { margin-bottom: 9px; color: #29415e; font-weight: 700; }
.catalog-item { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.catalog-item img { width: 72px; height: 72px; border-radius: 7px; background: #fff; object-fit: contain; }
.catalog-item > div { display: flex; flex-direction: column; gap: 4px; }
.catalog-item strong { color: #17233a; font-size: 13px; }
.catalog-box small { display: block; margin-top: 7px; color: #718095; }
.catalog-missing { margin: 8px 0; color: #8a4e38; }
.found-card .article-body p { font-size: 14px; }
.found-checks { color: #675138; font-size: 13px; line-height: 1.5; }
.found-card .source-links { margin: 12px 0; }
.found-card > .button { margin: 4px 8px 0 0; }
.workspace { display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); gap: 20px; align-items: start; }
.queue, .detail { min-width: 0; border: 1px solid #e1e6ed; border-radius: 17px; background: #fff; box-shadow: 0 6px 24px #17233a08; }
.queue { padding: 19px; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 15px; }
.panel-heading h2 { margin: 0; font-size: 16px; }
.panel-heading span { font-size: 12px; color: #718096; }
.article-list { display: flex; flex-direction: column; gap: 9px; }
.article-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; width: 100%; padding: 13px 14px; border: 1px solid #e1e6ee; border-radius: 11px; background: #fff; color: #17233a; text-align: left; }
.article-choice:hover, .article-choice.selected { border-color: #587eae; background: #f2f6fd; }
.choice-kicker { font-size: 11px; font-weight: 700; color: #456489; }
.article-choice strong { font-size: 14px; line-height: 1.38; }
.choice-status { font-size: 12px; color: #718096; }
.choice-status.yes { color: #17704e; font-weight: 700; }
.choice-status.no { color: #80544a; }
.detail { padding: 28px 32px; }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eyebrow { color: #61748d; font-size: 12px; }
.decision { padding: 6px 9px; border-radius: 7px; background: #edf2f8; color: #60748c; font-size: 11px; font-weight: 700; }
.decision.yes { background: #ddf2e8; color: #166344; }
.decision.no { background: #f3ece9; color: #80544a; }
.detail h2 { margin: 16px 0 18px; max-width: 760px; font-size: 27px; line-height: 1.27; letter-spacing: -.02em; }
.owner-pitch { max-width: 760px; margin: 0; font-size: 18px; line-height: 1.55; }
.owner-draft { margin-top: 28px; padding-top: 23px; border-top: 1px solid #e7ecf3; }
.owner-sources { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; max-width: 76ch; margin-top: 11px; color: #718095; font-size: 12px; }
.owner-sources a { color: #315e93; text-decoration: underline; text-underline-offset: 2px; }
.decision-actions, .manager-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 29px; }
.button { min-height: 41px; padding: 9px 15px; border: 1px solid #d1dbe7; border-radius: 9px; background: #fff; color: #29415e; font-size: 13px; font-weight: 700; }
.button:hover { background: #f3f7fc; }
.button.yes { border-color: #238660; color: #146644; }
.button.yes:hover, .button.yes.active { background: #197451; border-color: #197451; color: #fff; }
.button.no:hover, .button.no.active { background: #5e6c7b; border-color: #5e6c7b; color: #fff; }
.button.primary { background: #1d3a61; border-color: #1d3a61; color: #fff; }
.button.primary:hover { background: #294c7a; }
.article-body { max-width: 76ch; }
.article-body p { margin: 0 0 17px; font-size: 16px; line-height: 1.68; }
.manager-note, .manager-sources { margin-top: 23px; padding-top: 19px; border-top: 1px solid #e7ecf3; }
.manager-note p { max-width: 76ch; margin: 0; font-size: 13px; line-height: 1.55; }
.source-links { display: flex; flex-wrap: wrap; gap: 8px; }
.source-links a { padding: 8px 10px; border: 1px solid #dce3ed; border-radius: 8px; color: #315e93; font-size: 12px; text-decoration: none; }
.source-links a:hover { text-decoration: underline; }
.queue-group + .queue-group { margin-top: 18px; padding-top: 15px; border-top: 1px solid #e7ecf3; }
.queue-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 9px; }
.queue-group-head h3 { margin: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #5c6b7e; }
.queue-group-count { font-size: 11px; color: #8794a5; }
.topbar-side { display: flex; align-items: center; gap: 12px; }
.viewer { font-size: 12px; color: #5c6b7e; }
.entrance { max-width: 380px; margin: 12vh auto; padding: 0 20px; }
.sign-in { padding: 26px 24px; border: 1px solid #dfe6ef; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px #17233a12; }
.sign-in h1 { margin: 0 0 8px; font-size: 21px; }
.sign-in .muted { margin: 0 0 18px; }
.sign-in label { display: block; margin: 0 0 5px; font-size: 12px; color: #4a5d75; }
.sign-in input { width: 100%; margin: 0 0 14px; padding: 9px 11px; border: 1px solid #cfdcea; border-radius: 8px; font: inherit; font-size: 14px; box-sizing: border-box; }
.sign-in .button { width: 100%; }
.sign-in .error { margin: 0 0 14px; }
.manager-edit { margin-top: 20px; }
.manager-edit .muted { margin: 0 0 14px; }
.edit-label { display: block; margin: 0 0 5px; font-size: 12px; color: #4a5d75; }
.edit-title, .edit-note { width: 100%; margin: 0 0 14px; padding: 9px 11px; border: 1px solid #cfdcea; border-radius: 8px; font: inherit; font-size: 15px; box-sizing: border-box; }
.edit-body { width: 100%; margin: 0 0 14px; padding: 11px 13px; border: 1px solid #cfdcea; border-radius: 8px; font: inherit; font-size: 15px; line-height: 1.6; box-sizing: border-box; resize: vertical; }
.edit-title:focus, .edit-body:focus, .edit-note:focus { outline: 2px solid #4574ae; outline-offset: 1px; }
.edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.edit-counter { font-size: 12px; color: #718095; }
.edit-counter.warn { color: #8a6d2f; }
.edit-counter.over { color: #8e2525; }
.photo-place { flex: none; width: 18px; font-size: 12px; color: #8794a5; text-align: right; }
.photo-row .button.small { padding: 4px 8px; }
.manager-photos { margin-top: 23px; padding-top: 19px; border-top: 1px solid #e7ecf3; }
.photo-row { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; padding: 5px 8px 5px 4px; border: 1px solid #eef2f7; border-radius: 9px; background: #fbfcfe; font-size: 12px; }
.photo-kind { flex: none; padding: 2px 8px; border-radius: 20px; background: #eef3f9; color: #4a5d75; }
.photo-kind.file { background: #eaf4ec; color: #3d6b48; }
.photo-ref { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #46586d; }
.photo-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 13px; }
.photo-url { flex: 1 1 240px; padding: 7px 10px; border: 1px solid #cfdcea; border-radius: 8px; font: inherit; font-size: 13px; }
.button.small { padding: 6px 10px; font-size: 12px; }
.manager-ready { margin-top: 23px; padding-top: 19px; border-top: 1px solid #e7ecf3; }
.check-row { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 9px; font-size: 13px; line-height: 1.5; color: #2a3a4f; cursor: pointer; }
.check-row input { margin: 3px 0 0; flex: none; width: 15px; height: 15px; }
.manager-ready .button { margin-top: 6px; }
.manager-ready .muted { margin: 9px 0 0; }
.owner-clarify { margin: 0 0 20px; padding: 14px 16px; border: 1px solid #cfd9e6; border-radius: 9px; background: #f6f9fd; }
.clarify-question + .clarify-question { margin-top: 14px; padding-top: 13px; border-top: 1px solid #e1e8f1; }
.clarify-text { margin: 0 0 9px; font-size: 14px; line-height: 1.5; color: #22323f; }
.clarify-options { display: flex; flex-wrap: wrap; gap: 8px; }
.button.clarify { padding: 7px 12px; font-size: 13px; }
.button.clarify.active { background: #1d3a61; border-color: #1d3a61; color: #fff; }
.clarify-answer { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: #5c6b7e; }
.clarify-answer a { color: #315e93; }
.owner-products { margin: 0 0 20px; }
.product-links { display: flex; flex-wrap: wrap; gap: 7px; }
.product-links a { padding: 4px 9px; border: 1px solid #cfdcea; border-radius: 20px; background: #f2f7fd; color: #27507f; font-size: 12px; text-decoration: none; }
.product-links a.weak { border-style: dashed; background: #fff; color: #71818f; }
.product-links a:hover { text-decoration: underline; }
.owner-history { margin: 0 0 20px; padding: 13px 15px; border: 1px solid #e2d9c3; border-radius: 9px; background: #fdfaf2; }
.history-related { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.history-related li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.45; }
.history-related .relation { flex: none; padding: 2px 7px; border-radius: 20px; background: #ece3cd; color: #6c5c39; font-size: 11px; }
.history-related li.same .relation { background: #8e2525; color: #fff; }
.history-related .near-title { flex: 1 1 240px; color: #2a3a4f; }
/* Один вид у всех заголовков секций материала. */
.detail h3 { margin: 0 0 11px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5c6b7e; }
.owner-history h3 { color: #7a6a45; }
.detail > section { margin-top: 22px; padding-top: 19px; border-top: 1px solid #e7ecf3; }
/* Кнопки: заполненная — главное действие, контурная — обычное, тихая и значок — служебные. */
.button.quiet { border-color: transparent; background: transparent; color: #77869a; font-weight: 600; }
.button.quiet:hover { background: #f1f4f9; color: #47586d; }
.button.icon { min-height: 30px; width: 30px; padding: 0; font-size: 13px; line-height: 1; }
.button.small, .button.icon { min-height: 30px; }
.button:disabled { opacity: .45; cursor: default; }
.button:disabled:hover { background: #fff; }
.file-picker { display: inline-flex; align-items: center; }
.file-picker input { display: none; }
.muted, .empty { font-size: 13px; line-height: 1.5; color: #718095; }
.muted { margin: 18px 0 0; }
.empty { margin: 0; }
.error { margin: 0 0 17px; padding: 12px 15px; border: 1px solid #e7a8a8; border-radius: 9px; background: #fff0f0; color: #8e2525; }
.toast { position: fixed; right: 24px; bottom: 24px; max-width: 360px; padding: 11px 15px; border-radius: 9px; background: #1e3757; color: #fff; font-size: 13px; box-shadow: 0 8px 25px #17233a30; opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.show { opacity: 1; }
.button:focus-visible, .mode-tab:focus-visible, .article-choice:focus-visible, a:focus-visible { outline: 2px solid #4574ae; outline-offset: 2px; }
@media (max-width: 850px) { .workspace { grid-template-columns: 1fr; } .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .queue { padding: 15px; } .article-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .detail { padding: 22px; } .topbar { padding: 0 18px; } }
@media (max-width: 560px) { .layout { padding: 20px 14px 40px; } .topbar-note { display: none; } .page-heading { align-items: flex-start; flex-direction: column; } .page-heading h1 { font-size: 22px; } .article-list { grid-template-columns: 1fr; } .detail { padding: 19px; } .detail h2 { font-size: 22px; } .owner-pitch { font-size: 16px; } .article-body p { font-size: 15px; } .decision-actions .button { flex: 1 1 auto; } }