/* Theme = light (default), dark, or system. The server sets data-theme on ; absent/"system" follows prefers-color-scheme. The dark palette is intentionally duplicated for the system-dark media query and the forced-dark selector below — keep the two blocks in sync. */ :root { color-scheme: light dark; --bg: #f6f7f9; --panel: #ffffff; --panel-soft: #fbfcfd; --text: #1d232a; --muted: #65717f; --line: #d8dee6; --accent: #226c5f; --accent-soft: #e7f2ef; --accent-hover: #18584e; --on-accent: #ffffff; --warn: #8a5b12; --warn-soft: #fbf1db; --accent2: #345b8a; --accent2-soft: #e4edf5; --code-bg: #eef1f5; --pre-bg: #f6f7f9; --danger: #9a2c2c; --danger-soft: #fff0f0; --danger-line: #d8a8a8; --success: #226c4d; --success-soft: #eaf7f1; --success-line: #b6d7c8; --shadow: rgba(29, 35, 42, 0.14); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* System default: follow the OS unless the user forced light or dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #14181d; --panel: #1b2026; --panel-soft: #20262d; --text: #e2e7ec; --muted: #95a1ad; --line: #333c46; --accent: #4fb39f; --accent-soft: #1e352f; --accent-hover: #6cc7b5; --on-accent: #0d1f1b; --warn: #d8aa56; --warn-soft: #3a2f17; --accent2: #7da4d4; --accent2-soft: #24303f; --code-bg: #2a323b; --pre-bg: #171c22; --danger: #e08c8c; --danger-soft: #392125; --danger-line: #5d3439; --success: #82c9a5; --success-soft: #1d3226; --success-line: #2d4b3a; --shadow: rgba(0, 0, 0, 0.5); } } /* Forced dark (mirror of the system-dark palette above). */ :root[data-theme="dark"] { --bg: #14181d; --panel: #1b2026; --panel-soft: #20262d; --text: #e2e7ec; --muted: #95a1ad; --line: #333c46; --accent: #4fb39f; --accent-soft: #1e352f; --accent-hover: #6cc7b5; --on-accent: #0d1f1b; --warn: #d8aa56; --warn-soft: #3a2f17; --accent2: #7da4d4; --accent2-soft: #24303f; --code-bg: #2a323b; --pre-bg: #171c22; --danger: #e08c8c; --danger-soft: #392125; --danger-line: #5d3439; --success: #82c9a5; --success-soft: #1d3226; --success-line: #2d4b3a; --shadow: rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .topbar { display: flex; align-items: center; gap: 24px; min-height: 56px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--panel); } .brand { color: var(--text); font-weight: 700; } .nav { display: flex; gap: 12px; } .nav-link { color: var(--muted); } .logout-form { display: flex; align-items: center; gap: 10px; margin-left: auto; } .nav-user { color: var(--muted); font-size: 13px; } .page { max-width: 1120px; margin: 0 auto; padding: 28px; } .feed-header, .detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 4px; font-size: 32px; line-height: 1.15; } h2 { font-size: 19px; line-height: 1.25; } h3 { font-size: 15px; } .subtle, .crumb { color: var(--muted); } .filter-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; } .filter-form label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; } input, select, button, .button-link { height: 36px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; } input, select { padding: 0 10px; } input[type="checkbox"] { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); } button, .button-link { display: inline-flex; align-items: center; padding: 0 14px; cursor: pointer; } [hidden] { display: none !important; } button:disabled { cursor: not-allowed; opacity: 0.55; } button.danger { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); } button.primary { justify-content: center; border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 700; } button.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); } button.compact { height: 28px; padding: 0 10px; font-size: 13px; } .banner { border-radius: 8px; padding: 10px 12px; } .banner.success { border: 1px solid var(--success-line); background: var(--success-soft); color: var(--success); } .banner.error { border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--danger); } .auth-page { max-width: 380px; margin: 48px auto 0; } .auth-page h1 { margin-bottom: 16px; } .auth-form { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 22px; } .auth-form label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; } .auth-form button { justify-content: center; border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 700; } .auth-form button:hover { border-color: var(--accent-hover); background: var(--accent-hover); } .run-panel { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .chip, .status, .source-badge { display: inline-flex; align-items: center; min-height: 26px; border-radius: 999px; padding: 0 10px; font-size: 13px; font-weight: 600; } .chip { border: 1px solid var(--line); background: var(--panel); color: var(--muted); } .chip.active, .source-badge { border-color: transparent; background: var(--accent-soft); color: var(--accent); } .chips-group { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 8px; } .chips-group--sources { background: var(--accent-soft); } .chips-group--profiles { background: var(--accent2-soft); } .chips-label { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; margin-right: 2px; } .chips-group--sources .chips-label { color: var(--accent); } .chips-group--profiles .chips-label { color: var(--accent2); } /* Active chips inside groups use solid color with contrasting text to stand out from the group background tint. Must come after .chip.active (equal specificity 0,2,0) to win the cascade. */ .chips-group .chip.active { border-color: transparent; background: var(--accent); color: var(--on-accent); } .chips-group .chip--profile.active { border-color: transparent; background: var(--accent2); color: var(--on-accent); } .feed-list { display: grid; gap: 12px; } .feed-card, .empty, .comment { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .feed-card { padding: 18px; } .feed-card h2 { margin: 10px 0; } .feed-card h2 > a:first-child { color: var(--text); } .feed-card h2 > a:first-child:hover { color: var(--accent); } .post-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; } .post-media--feed { grid-template-columns: repeat(auto-fit, minmax(120px, 180px)); } .post-media-item { display: block; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); } .post-media-item img { display: block; width: 100%; height: 100%; object-fit: cover; } .thread-context { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 12px; } .thread-context--feed { margin: 10px 0 12px; font-size: 14px; } .thread-context--feed p:last-child { margin-bottom: 0; } .thread-context-list { display: grid; gap: 10px; } .thread-context-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 13px; } .feed-source-link { color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; } .card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; } .score-badge, .content-type, .tag-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; } .score-badge { background: var(--accent-soft); color: var(--accent); } .content-type { background: var(--accent2-soft, var(--panel)); color: var(--muted); text-transform: capitalize; } .tag-chip { border: 1px solid var(--line); color: var(--muted); font-weight: 500; } .summary, .body-text, .comment-body { overflow-wrap: anywhere; } .body-text, .comment-body { white-space: pre-wrap; } .comment-body { margin: 0; } .summary-clamp { position: relative; } .summary-clamp.clamped { max-height: 190px; overflow: hidden; } .summary-clamp.clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(to bottom, transparent, var(--panel)); pointer-events: none; } .summary-toggle { height: auto; margin-top: 6px; border: 0; background: transparent; color: var(--accent); padding: 0; font-size: 13px; font-weight: 600; } .summary-toggle:hover { text-decoration: underline; } .markdown-body > :last-child { margin-bottom: 0; } .markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body pre, .markdown-body table { margin: 0 0 10px; } .markdown-body ul, .markdown-body ol { padding-left: 22px; } .markdown-body code { border-radius: 4px; background: var(--code-bg); padding: 1px 5px; font-size: 0.92em; } .markdown-body pre { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--pre-bg); padding: 10px; } .markdown-body pre code { background: transparent; padding: 0; } .markdown-body blockquote { border-left: 3px solid var(--line); color: var(--muted); padding-left: 12px; } .markdown-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 13px; } .markdown-body th, .markdown-body td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; } .markdown-body th { background: var(--bg); font-weight: 700; } .markdown-body th[align="center"], .markdown-body td[align="center"] { text-align: center; } .markdown-body th[align="right"], .markdown-body td[align="right"] { text-align: right; } .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .card-statuses, .feed-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .card-statuses { min-width: 0; color: var(--muted); font-size: 13px; } .feed-card-actions { margin-left: auto; } .inline-action { display: inline-flex; margin: 0; } .icon-button { justify-content: center; width: 32px; height: 32px; padding: 0; } .feedback-button { font-size: 16px; line-height: 1; } .feedback-comment { position: relative; margin: 0; } .feedback-comment > summary { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); padding: 0 10px; cursor: pointer; font-size: 13px; list-style: none; } .feedback-comment > summary::marker, .feedback-comment > summary::-webkit-details-marker { display: none; } .feedback-comment-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; align-items: center; gap: 8px; width: min(440px, calc(100vw - 56px)); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 8px 24px var(--shadow); padding: 10px; } .feedback-comment-form input[type="text"] { flex: 1; min-width: 0; height: 30px; font-size: 13px; } .status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .status { background: var(--code-bg); color: var(--muted); } .status.muted { background: var(--bg); color: var(--muted); } .status.warn { background: var(--warn-soft); color: var(--warn); } .status.keep { background: var(--accent-soft); color: var(--accent); } .status.error { background: var(--danger-soft); color: var(--danger); } a.status { text-decoration: none; } a.status:hover { text-decoration: underline; } .daily-digest { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 18px; margin-bottom: 18px; } .daily-digest-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; } .daily-digest-header h2 { margin-bottom: 4px; } .load-more { margin-top: 18px; text-align: center; color: var(--muted); font-size: 13px; } .auto-load-idle, .auto-load-status { display: none; } .auto-load-enabled .load-more .button-link { display: none; } .auto-load-enabled .auto-load-idle { display: inline; } .auto-load-enabled .load-more.auto-loading .auto-load-idle { display: none; } .auto-load-enabled .load-more.auto-loading .auto-load-status { display: inline; } .empty { padding: 28px; } .detail-page { max-width: 960px; margin: 0 auto; } .detail-header { margin-bottom: 10px; } .detail-header h1 { max-width: 820px; } .detail-header h1 a { color: var(--text); } .detail-header h1 a:hover { color: var(--accent); } .detail-actions { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); padding: 10px 0; } .detail-actions form { display: inline-flex; margin: 0; } .detail-actions button { height: 32px; } .feed-card-actions.detail-feedback-actions { margin-left: 0; justify-content: flex-start; } .detail-feedback-actions .feedback-comment-form { right: auto; left: 0; } .processing-button { gap: 8px; } .processing-button[aria-busy="true"] { cursor: progress; opacity: 0.85; } .processing-indicator { display: none; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: processing-spin 0.7s linear infinite; } .processing-button[aria-busy="true"] .processing-indicator { display: inline-block; } @keyframes processing-spin { to { transform: rotate(360deg); } } .detail-actions-spacer { flex: 1; } .detail-section { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; } .detail-section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; } .detail-section > h2 { margin-bottom: 12px; } .detail-summary { border-top: 0; margin-top: 0; padding-top: 0; } .comment { padding: 16px; } details { margin-bottom: 22px; } summary { cursor: pointer; font-weight: 700; } pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 13px; } dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13px; } dt { color: var(--muted); overflow-wrap: anywhere; } dd { margin: 0; overflow-wrap: anywhere; } .audit-meta { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; } .comments { display: grid; gap: 10px; } .detail-summary .summary { margin-bottom: 16px; } .compact-meta, .summary-meta { color: var(--muted); } .summary-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 0; font-size: 13px; } .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .section-heading h2 { margin-bottom: 0; } .new-research-thread { margin: 0 0 14px; } .new-research-thread > summary { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 0; } .new-research-thread > summary > span:first-child { font-size: 19px; line-height: 1.25; } .new-research-thread > summary::marker, .new-research-thread > summary::-webkit-details-marker { display: none; } .new-research-thread .button-link { height: 28px; padding: 0 10px; font-size: 13px; font-weight: 600; } .new-research-thread[open] > summary { margin-bottom: 8px; } .research-form { display: grid; gap: 12px; padding: 12px 0 0; } .research-form label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; } .research-input { width: 100%; min-height: 96px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); color: var(--text); padding: 10px; font: inherit; font-size: 14px; resize: vertical; } .form-actions { display: flex; justify-content: flex-end; gap: 8px; } .research-threads { display: grid; gap: 10px; } .research-thread { margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .research-thread > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 10px 12px; border-radius: 8px; } .research-thread > summary:hover, .research-thread > summary:focus-visible { background: var(--panel-soft); } .research-thread > summary::marker, .research-thread > summary::-webkit-details-marker { display: none; } .research-thread-title { display: inline-flex; align-items: center; min-width: 0; } .research-thread-title::before { content: ">"; display: inline-flex; width: 18px; color: var(--muted); font-size: 13px; } .research-thread[open] .research-thread-title::before { content: "v"; } .research-turns { display: grid; gap: 14px; padding: 2px 12px 14px; } .research-turn { border-left: 3px solid var(--accent-soft); padding-left: 12px; } .research-turn h3 { margin-bottom: 8px; } .research-answer { margin-bottom: 10px; } .research-sources { display: grid; gap: 4px; margin: 0 0 10px; padding-left: 22px; font-size: 14px; } .tool-trace { margin: 10px 0 0; } .tool-trace pre { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--pre-bg); padding: 10px; white-space: pre-wrap; } .research-followup { display: grid; gap: 8px; } .research-followup .research-input { min-height: 76px; } .research-followup button { justify-self: start; } .evidence-section > details { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 12px 14px; } .evidence-section > details[open] > summary { margin-bottom: 10px; } .audit-details { display: grid; gap: 10px; } .audit-details h2 { margin-bottom: 2px; } .audit-details > details { margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 12px 14px; } .audit-details > details[open] > summary { margin-bottom: 10px; } .comment-score { margin-bottom: 8px; color: var(--muted); font-size: 13px; } .config-header { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 18px; } .config-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .config-section { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 18px; } .preference-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .preference-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; } .preference-fields input, .preference-fields select { width: 100%; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .form-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; } .form-grid input { width: 100%; } .json-editor, .filter-editor { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); padding: 12px; color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 13px; } .json-editor { min-height: 420px; } .common-editor { min-height: 220px; } .telegram-fields { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.65fr); gap: 14px; } .telegram-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; } .telegram-fields input { width: 100%; } .source-json-editor { min-height: 260px; margin-top: 10px; } .new-source-editor { min-height: 180px; } .filter-editor { min-height: 180px; } .filter-editor.compact { min-height: 110px; } .form-actions { text-align: right; } .save-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); box-shadow: 0 8px 28px var(--shadow); padding: 8px 8px 8px 18px; font-size: 14px; } .save-bar .save-bar-button { border-color: var(--accent); border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; } .save-bar .save-bar-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); } .resolved-list { display: grid; gap: 10px; } .source-profile-list, .profile-editor-list, .source-editor-list { display: grid; gap: 10px; } .source-profile-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 240px); gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 8px 0; } .source-profile-row:last-child { border-bottom: 0; } .source-name { font-weight: 600; overflow-wrap: anywhere; } .profile-name { color: var(--muted); overflow-wrap: anywhere; } .profile-editor { color: var(--muted); font-size: 13px; } .profile-editor, .source-editor, .new-profile, .new-source { border: 1px solid var(--line); border-radius: 8px; padding: 12px; } .profile-editor-summary, .source-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .profile-editor-summary { justify-content: flex-start; cursor: pointer; color: var(--text); } .profile-editor-summary::marker, .profile-editor-summary::-webkit-details-marker { display: none; } .profile-editor-chevron { display: inline-flex; align-items: center; justify-content: center; width: 16px; color: var(--muted); font-size: 20px; line-height: 1; transition: transform 120ms ease; } .profile-editor[open] .profile-editor-chevron { transform: rotate(90deg); } .profile-editor-name { font-weight: 700; } .profile-editor-body { display: grid; gap: 10px; margin-top: 12px; } .profile-editor-actions { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; } .source-meta { margin-top: 2px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .source-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .source-toggles { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .source-profile-picker { display: grid; gap: 6px; min-width: min(280px, 100%); color: var(--muted); font-size: 13px; } .source-profile-options { display: flex; flex-wrap: wrap; gap: 8px 12px; } .prompt-coach-outputs { display: grid; gap: 12px; margin-top: 16px; } .prompt-coach-outputs h3 { margin: 0; color: var(--text); font-size: 14px; } .prompt-coach-output { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; } .prompt-coach-output-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); font-weight: 700; } .prompt-coach-status { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; } .prompt-coach-status-active { background: var(--success-soft); color: var(--success); } .prompt-coach-status-disabled, .prompt-coach-status-not_generated { background: var(--code-bg); color: var(--muted); } .prompt-coach-status-stale { background: var(--warn-soft); color: var(--warn); } .prompt-coach-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12px; } .auto-prompt-editor { min-height: 150px; margin-top: 8px; } .auto-prompt-rationale { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: 13px; } .profile-editor label, .source-editor label, .new-profile label, .new-source label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; } .source-editor .source-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; } .source-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; } .source-editor select, .new-profile input, .template-source-form input, .source-search { min-width: 180px; } .new-profile { display: grid; gap: 10px; margin-top: 12px; } .new-source { display: grid; gap: 10px; margin-top: 12px; } .add-profile, .add-source { margin-top: 12px; margin-bottom: 0; } .add-profile summary, .add-source summary { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--on-accent); padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 700; } .add-profile summary:hover, .add-source summary:hover { border-color: var(--accent-hover); background: var(--accent-hover); } .add-profile summary::marker, .add-profile summary::-webkit-details-marker, .add-source summary::marker, .add-source summary::-webkit-details-marker { display: none; } .action-stack { display: flex; flex-wrap: wrap; gap: 8px; } .config-section .run-panel { margin-bottom: 0; } .source-picker-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); gap: 14px; } .source-picker { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; } .source-picker h3 { margin: 0 0 10px; font-size: 16px; } .source-picker-panel { display: grid; gap: 10px; align-content: start; } .private-browser-picker { grid-column: 1 / -1; } .source-picker-panel h4 { margin: 0; font-size: 15px; } .source-search { width: 100%; } .catalog-source-list, .template-source-grid { display: grid; gap: 10px; } .catalog-source-row, .template-source-form { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; } .catalog-source-row { grid-template-columns: minmax(0, 1fr) minmax(190px, auto); align-items: start; } .source-picker-actions { display: grid; justify-items: end; gap: 8px; } .template-source-form label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; } .template-source-form select, .template-source-form textarea { width: 100%; } .browser-state-editor { min-height: 120px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); color: var(--text); padding: 10px; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; resize: vertical; } .template-source-form button { justify-self: start; } .source-health-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; } .source-health-stat { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 12px; } .source-health-stat strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 22px; line-height: 1.1; } .source-health-stat span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; } .source-health-source { min-width: 220px; } .source-health-source strong { display: block; } .source-health-meta, .source-health-error { color: var(--muted); font-size: 12px; } .source-health-error { margin-top: 5px; color: var(--danger); } .source-health-flags, .source-health-actions { display: flex; flex-wrap: wrap; gap: 6px; } .source-health-actions a { white-space: nowrap; } .source-health-recent { white-space: nowrap; } .pipeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .pipeline-grid-wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .pipeline-grid form { display: grid; gap: 8px; align-content: space-between; min-height: 86px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; } .pipeline-grid form > span, .pipeline-grid label span { color: var(--muted); font-size: 13px; } .pipeline-grid label { display: grid; gap: 5px; } .pipeline-grid .force-toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; } .pipeline-grid .force-toggle input { width: auto; } .pipeline-grid input { width: 100%; } .pipeline-grid select { width: 100%; } .pipeline-grid button[type="submit"] { justify-content: center; border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 700; } .pipeline-grid button[type="submit"]:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); text-decoration: none; } .pipeline-progress { display: grid; gap: 8px; margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 12px; } .pipeline-progress[hidden] { display: none; } .pipeline-progress-header { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; } .pipeline-progress-header strong { color: var(--text); } .pipeline-progress progress { width: 100%; height: 12px; } .pipeline-progress button { justify-self: start; } .pipeline-result { display: grid; gap: 10px; } .pipeline-result[hidden] { display: none; } .pipeline-result-card { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 12px; } .pipeline-result-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; } .pipeline-result-header strong { color: var(--text); } .pipeline-result textarea { width: 100%; min-height: 180px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); color: var(--text); padding: 10px; font: inherit; font-size: 14px; resize: vertical; } .pipeline-result pre { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--pre-bg); padding: 10px; white-space: pre-wrap; } .pipeline-progress pre { max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--pre-bg); padding: 10px; white-space: pre-wrap; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .posts-table { width: 100%; table-layout: fixed; min-width: 760px; border-collapse: collapse; font-size: 14px; } .posts-table th, .posts-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .posts-table th { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; } .posts-table .num { text-align: right; } .posts-table th:nth-child(2), .posts-table td:nth-child(2) { width: 15%; } .posts-table th:nth-child(3), .posts-table td:nth-child(3) { width: 76px; } .posts-table th:nth-child(4), .posts-table td:nth-child(4) { width: 180px; } .posts-table th:nth-child(5), .posts-table td:nth-child(5) { width: 82px; } .source-health-table { min-width: 980px; } .source-health-table th:nth-child(1), .source-health-table td:nth-child(1) { width: 120px; } .source-health-table th:nth-child(2), .source-health-table td:nth-child(2) { width: 270px; } .source-health-table th:nth-child(3), .source-health-table td:nth-child(3) { width: 110px; } .source-health-table th:nth-child(4), .source-health-table td:nth-child(4) { width: 105px; } .source-health-table th:nth-child(5), .source-health-table td:nth-child(5) { width: 120px; } .source-health-table th:nth-child(6), .source-health-table td:nth-child(6) { width: 105px; } .source-health-table th:nth-child(7), .source-health-table td:nth-child(7), .source-health-table th:nth-child(8), .source-health-table td:nth-child(8) { width: 90px; } .source-health-table .source-health-source { min-width: 0; } .source-health-table .source-health-source strong, .source-health-table .source-health-meta, .source-health-table .source-health-error { overflow-wrap: anywhere; } .posts-table .status { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .interest-high { color: var(--accent); font-weight: 700; } .posts-table tr:last-child td { border-bottom: 0; } .post-title { min-width: 0; } .post-title a { overflow-wrap: anywhere; } .inline-action { margin: 0; } .inline-action button { height: 30px; padding: 0 10px; } @media (max-width: 760px) { .topbar, .page { padding-left: 16px; padding-right: 16px; } .topbar { flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; min-height: 0; } .nav { flex-wrap: wrap; gap: 10px 12px; } .nav-user { display: none; } .feed-header, .detail-header, .config-header, .daily-digest-header { display: block; } .daily-digest-header form { margin-top: 12px; } .config-header-actions { justify-content: flex-start; margin-top: 12px; } .filter-form { margin-top: 14px; } .feed-card-actions { width: 100%; justify-content: flex-end; } .feedback-comment-form { right: 0; } .detail-actions { position: static; } .form-grid { grid-template-columns: 1fr; } .telegram-fields { grid-template-columns: 1fr; } .source-profile-row { grid-template-columns: 1fr; gap: 4px; } .source-editor-header { display: grid; } .save-bar { left: 16px; right: 16px; transform: none; justify-content: space-between; } .source-picker-grid, .catalog-source-row { grid-template-columns: 1fr; } .source-picker-actions { justify-items: start; } }