:root {
  --ink: #20242e;
  --muted: #747985;
  --paper: #f4f7fa;
  --card: rgba(255, 255, 255, .68);
  --line: rgba(109, 119, 144, .18);
  --accent: #6f7bd9;
  --accent-dark: #525fb7;
  --green: #5b8991;
  --shadow: 0 24px 70px rgba(68, 77, 102, .11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 10% 0%, rgba(163, 219, 222, .22), transparent 28%), radial-gradient(circle at 90% 20%, rgba(184, 177, 234, .2), transparent 30%), var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.site-header, .review-header {
  height: 76px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgba(248, 250, 252, .66); backdrop-filter: blur(20px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, #5965bc, #76a2aa); color: white; font-family: Georgia, serif; font-size: 17px; font-weight: 400; box-shadow: 0 6px 16px rgba(86, 98, 180, .2); }
.header-note { color: var(--muted); font-size: 13px; }

.landing-shell { max-width: 1180px; margin: 0 auto; padding: 7vh 5vw 5vh; display: grid; grid-template-columns: 1fr 440px; gap: 7vw; align-items: center; }
.hero h1 { max-width: 650px; margin: 14px 0 22px; font-family: Georgia, serif; font-size: clamp(44px, 5vw, 68px); line-height: 1.02; letter-spacing: -.035em; font-weight: 400; }
.hero h1 em { color: var(--accent); font-weight: 400; }
.hero-copy { max-width: 570px; color: #5f6058; font-size: 18px; line-height: 1.65; }
.eyebrow { margin: 0; color: var(--accent-dark); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
.upload-card { position: relative; padding: 34px; background: var(--card); border: 1px solid rgba(255,255,255,.75); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(140%); }
.upload-card > div:not(.card-number) { margin-bottom: 28px; }
.upload-card h2, .comments-head h2, .share-dialog h2, .agent-dialog h2 { margin: 7px 0 0; font-family: Georgia, serif; font-size: 28px; font-weight: 400; }
.card-number { position: absolute; right: 18px; top: 14px; color: #d8d3c8; font-family: 'Instrument Serif', serif; font-size: 42px; }
form label { display: block; margin-bottom: 18px; }
form label > span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; padding: 13px 14px; background: #fff; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(36, 89, 76, .09); }
textarea { resize: vertical; line-height: 1.5; }
label small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.drop-zone { min-height: 130px; margin-bottom: 24px; border: 1px dashed rgba(91,105,151,.38); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: .2s; }
.drop-zone:hover, .drop-zone.dragging, .drop-zone.has-file { border-color: var(--accent); background: rgba(232,235,255,.55); }
.drop-zone input { position: absolute; opacity: 0; pointer-events: none; }
.drop-zone strong { font-size: 14px; }
.drop-zone small { margin-top: 5px; }
.drop-icon { margin-bottom: 8px; color: var(--accent); font-size: 24px; }
.primary-button { width: 100%; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #5764bc, #6977cf); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: space-between; text-decoration: none; font-weight: 500; transition: filter .2s, transform .2s; }
.primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary-button:disabled { opacity: .55; cursor: wait; }
.form-error { min-height: 18px; margin: 0 0 8px; color: #b42c25; font-size: 12px; }
.steps { grid-column: 1 / -1; margin-top: 5vh; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.steps div { display: flex; align-items: center; gap: 14px; color: #65665f; font-size: 13px; }
.steps b { color: var(--accent); font-family: 'Instrument Serif', serif; font-size: 25px; font-weight: 400; }

dialog { color: var(--ink); border: 0; padding: 0; background: var(--card); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(27, 28, 25, .58); backdrop-filter: blur(4px); }
.share-dialog { width: min(540px, calc(100vw - 32px)); padding: 44px; }
.share-dialog > p:not(.eyebrow) { color: var(--muted); }
.dialog-close { position: absolute; top: 14px; right: 15px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; }
.copy-row { display: flex; margin: 28px 0 16px; }
.copy-row input { overflow: hidden; text-overflow: ellipsis; }
.copy-row button { border: 0; padding: 0 17px; background: var(--accent); color: white; cursor: pointer; }

.gate-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.gate-card { width: min(420px, 100%); padding: 40px; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; background: var(--card); backdrop-filter: blur(24px); box-shadow: var(--shadow); text-align: center; }
.gate-card .brand { margin-bottom: 45px; }
.gate-lock { width: 64px; height: 64px; margin: 0 auto 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-size: 35px; }
.gate-card h1 { margin: 10px 0; font-family: Georgia, serif; font-size: 34px; font-weight: 400; }
.gate-card > p:not(.eyebrow) { margin-bottom: 28px; color: var(--muted); font-size: 14px; }

.review-header { position: sticky; top: 0; z-index: 20; height: 64px; background: rgba(248, 250, 252, .72); }
.header-actions { display: flex; gap: 8px; }
.document-meta { text-align: center; }
.document-meta strong, .document-meta span { display: block; }
.document-meta strong { max-width: 50vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.document-meta span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.quiet-button { padding: 9px 13px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font-size: 12px; }
.review-layout { min-height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(0, 1fr) 350px; }
.markdown-body { width: min(760px, calc(100% - 70px)); margin: 0 auto; padding: 58px 48px 100px; line-height: 1.68; }
.markdown-body > * { position: relative; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-family: Georgia, serif; font-weight: 400; line-height: 1.2; letter-spacing: -.018em; }
.markdown-body h1 { margin: 0 0 30px; font-size: 42px; }
.markdown-body h2 { margin: 46px 0 16px; font-size: 29px; }
.markdown-body h3 { margin-top: 30px; font-size: 22px; }
.markdown-body p, .markdown-body li { font-size: 14px; }
.markdown-body a { color: var(--accent-dark); }
.markdown-body blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); color: #5b5c55; font-family: 'Instrument Serif', serif; font-size: 22px; }
.markdown-body pre { overflow-x: auto; padding: 20px; background: #292a26; color: #f5f2e9; font-size: 13px; }
.markdown-body code { padding: 2px 5px; background: #e8e4d9; font-size: .88em; }
.markdown-body pre code { padding: 0; background: transparent; }
.markdown-body table { width: 100%; border-collapse: collapse; }
.markdown-body th, .markdown-body td { border-bottom: 1px solid var(--line); padding: 10px; text-align: left; }
.markdown-body img { max-width: 100%; }
.commentable-block { transition: background .25s, box-shadow .25s; }
.commentable-block:hover { background: rgba(255,255,255,.5); }
.commentable-block.has-comments { box-shadow: -3px 0 0 var(--accent); }
.commentable-block.focused-block { background: #fff1df; }
.block-comment-button { position: absolute; left: -38px; top: .25em; width: 25px; height: 25px; opacity: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--accent); cursor: pointer; transition: opacity .2s; }
.commentable-block:hover > .block-comment-button, .commentable-block.has-comments > .block-comment-button { opacity: 1; }
.selection-button { position: fixed; z-index: 30; padding: 9px 13px; border: 0; border-radius: 3px; background: var(--ink); color: #fff; box-shadow: 0 7px 20px rgba(0,0,0,.2); cursor: pointer; font-size: 12px; }

.comments-panel { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; border-left: 1px solid var(--line); background: rgba(255,255,255,.48); backdrop-filter: blur(18px); }
.comments-head { position: sticky; top: 0; z-index: 3; padding: 24px 24px 18px; border-bottom: 1px solid var(--line); background: rgba(250, 251, 253, .82); backdrop-filter: blur(18px); display: flex; justify-content: space-between; align-items: center; }
.comments-head h2 { font-size: 28px; }
.count-badge { min-width: 26px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: 15px; background: rgba(84,96,176,.12); color: var(--accent-dark); font-size: 11px; }
.empty-comments { padding: 90px 40px; color: var(--muted); text-align: center; line-height: 1.6; font-size: 13px; }
.empty-comments > span { display: block; margin-bottom: 14px; color: var(--accent); font-size: 30px; }
.comments-list { padding: 10px 0 60px; }
.comment-card { margin: 10px 12px; padding: 18px; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; background: rgba(255,255,255,.58); box-shadow: 0 8px 24px rgba(61,69,91,.05); cursor: default; }
.comment-card > blockquote { margin: 0 0 18px; padding: 9px 12px; border-left: 2px solid var(--accent); background: #f5f1e8; color: #686960; font-size: 12px; line-height: 1.5; }
.comment-author { display: grid; grid-template-columns: 27px auto auto 1fr; align-items: center; gap: 8px; font-size: 12px; }
.comment-author > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; }
.comment-author i, .reply i { padding: 2px 5px; background: #ffe1d4; color: var(--accent-dark); font-size: 9px; font-style: normal; text-transform: uppercase; }
.comment-author time { color: #9a9a91; text-align: right; font-size: 10px; }
.comment-card > p { margin: 14px 0; white-space: pre-wrap; font-size: 13px; line-height: 1.6; }
.reply-button, .cancel-reply { padding: 0; border: 0; background: transparent; color: var(--accent-dark); cursor: pointer; font-size: 11px; font-weight: 600; }
.replies { margin: 18px 0 0 18px; border-left: 1px solid var(--line); }
.reply { padding: 8px 0 8px 14px; }
.reply div { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.reply p { margin: 5px 0; white-space: pre-wrap; font-size: 12px; line-height: 1.5; }
.nested-replies { margin: 9px 0 0 8px; border-left: 1px solid rgba(100,112,164,.24); }
.nested-replies > .reply { padding-left: 12px; }
.reply[data-depth="3"], .reply[data-depth="4"], .reply[data-depth="5"], .reply[data-depth="6"], .reply[data-depth="7"], .reply[data-depth="8"] { margin-left: 0; }
.reply-form { margin-top: 16px; padding: 14px; background: #f4f1e9; }
.reply-form input, .reply-form textarea { margin-bottom: 8px; padding: 9px; font-size: 12px; }
.reply-form > div { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.reply-form button[type="submit"] { border: 0; padding: 7px 10px; background: var(--ink); color: #fff; cursor: pointer; font-size: 11px; }
.comment-popover { position: fixed; z-index: 50; padding: 12px; border: 1px solid rgba(255,255,255,.82); border-radius: 15px; background: rgba(250,252,255,.9); box-shadow: 0 18px 50px rgba(45,52,75,.2); backdrop-filter: blur(22px) saturate(140%); }
.comment-popover blockquote { max-height: 54px; overflow: hidden; margin: 0 24px 10px 0; padding: 7px 9px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 11px; line-height: 1.4; }
.comment-popover textarea { min-height: 74px; padding: 10px; border-radius: 9px; background: rgba(255,255,255,.72); font-size: 12px; }
.comment-popover form { display: grid; }
.comment-popover form button { justify-self: end; border: 0; border-radius: 8px; padding: 8px 13px; background: var(--accent); color: white; cursor: pointer; font-size: 11px; }
.popover-close { position: absolute; right: 8px; top: 7px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; }

.editor-drawer { position: fixed; z-index: 60; inset: 0 0 0 auto; width: min(720px, 100vw); display: grid; grid-template-rows: auto auto auto 1fr auto auto; background: rgba(247,249,252,.94); border-left: 1px solid rgba(255,255,255,.8); box-shadow: -24px 0 70px rgba(45,52,75,.16); backdrop-filter: blur(24px); }
.editor-open::after { content: ''; position: fixed; z-index: 55; inset: 0; background: rgba(40,45,58,.16); backdrop-filter: blur(2px); }
.editor-head { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.editor-head strong { display: block; margin-top: 3px; font-family: Georgia, serif; font-size: 21px; font-weight: 400; }
.editor-head button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 25px; }
.editor-title-row { padding: 12px 18px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.editor-title-row input { padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,.65); }
#save-status { color: var(--muted); font-size: 10px; }
.editor-tabs { padding: 0 18px; display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.editor-tabs button { padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.editor-tabs button.active { border-color: var(--accent); color: var(--ink); }
#markdown-editor { min-height: 0; height: 100%; border: 0; padding: 22px; background: rgba(255,255,255,.42); box-shadow: none; resize: none; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.editor-preview { width: 100%; max-width: none; height: 100%; overflow-y: auto; padding: 28px 38px; background: rgba(255,255,255,.42); }
.claude-box { margin: 12px 18px; padding: 13px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; border: 1px solid rgba(108,120,196,.18); border-radius: 13px; background: linear-gradient(135deg, rgba(224,229,255,.55), rgba(220,241,240,.5)); }
.claude-box strong, .claude-box small { display: block; }
.claude-box strong { font-size: 12px; }
.claude-box small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.claude-box textarea { grid-column: 1 / -1; padding: 9px; border-radius: 8px; background: rgba(255,255,255,.65); font-size: 11px; }
.claude-box button { grid-column: 2; border: 0; border-radius: 8px; padding: 8px 12px; background: rgba(86,99,186,.92); color: white; cursor: pointer; font-size: 10px; }
.editor-footer { padding: 13px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.editor-footer button { border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px; background: rgba(255,255,255,.64); cursor: pointer; font-size: 11px; }
.editor-footer #save-document { border-color: transparent; background: var(--accent); color: white; }
.agent-dialog { width: min(560px, calc(100vw - 28px)); padding: 32px; border-radius: 18px; background: rgba(249,251,253,.94); backdrop-filter: blur(24px); }
.agent-dialog > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.55; }
.agent-dialog .copy-row { margin: 22px 0 15px; }
.agent-dialog .copy-row input { border-radius: 9px 0 0 9px; font: 11px ui-monospace, monospace; }
.agent-dialog .copy-row button { border-radius: 0 9px 9px 0; background: var(--accent); }
.agent-instructions { padding: 14px; display: grid; grid-template-columns: 86px 1fr; gap: 10px; border-radius: 12px; background: rgba(226,231,246,.55); font-size: 11px; line-height: 1.45; }
.agent-instructions strong { color: var(--accent-dark); }
.agent-instructions code { overflow-x: auto; white-space: nowrap; font-size: 10px; }
.danger-link { margin-top: 16px; padding: 0; border: 0; background: transparent; color: #8e5867; cursor: pointer; font-size: 10px; }

@media (max-width: 900px) {
  .landing-shell { grid-template-columns: 1fr; padding-top: 7vh; }
  .upload-card { max-width: 560px; }
  .steps { margin-top: 20px; }
  .review-layout { display: block; }
  .markdown-body { width: min(100% - 30px, 760px); padding: 50px 25px 80px; }
  .comments-panel { position: static; height: auto; border-top: 1px solid var(--line); border-left: 0; }
  .comments-head { position: static; }
}
@media (max-width: 560px) {
  .header-note { display: none; }
  .landing-shell { padding: 45px 18px; }
  .hero h1 { font-size: 50px; }
  .upload-card { padding: 27px 20px; }
  .form-grid, .steps { grid-template-columns: 1fr; }
  .steps { gap: 10px; }
  .review-header { padding: 0 15px; }
  .review-header .brand { font-size: 0; }
  .document-meta strong { max-width: 52vw; }
  .quiet-button { font-size: 0; }
  .quiet-button::after { content: 'Ссылка'; font-size: 11px; }
  .markdown-body h1 { font-size: 44px; }
  .block-comment-button { left: -25px; }
  .gate-card { padding: 34px 24px; }
}