* { box-sizing: border-box; }
body { font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; color: #1a1a1a; background: #f6f7fb; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: #fff; border-bottom: 1px solid #e1e4ec; }
.topbar .logo { font-weight: 700; font-size: 17px; color: #1a1a1a; }
.topbar nav { display: flex; gap: 16px; align-items: center; margin-left: auto; }
.topbar nav a { color: #555; }
.topbar .user { color: #888; font-size: 13px; }
.topbar .link { background: none; border: 0; color: #0066cc; cursor: pointer; padding: 0; font: inherit; }

main { padding: 24px; }
.container { max-width: 880px; margin: 0 auto; background: #fff; padding: 24px 32px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }

h1 { font-size: 24px; margin: 0 0 16px; }
h3 { font-size: 16px; margin: 24px 0 8px; }
p { margin: 0 0 12px; }
.muted { color: #888; }
.error { background: #ffe8e8; color: #b00; padding: 8px 12px; border-radius: 6px; margin: 8px 0; font-size: 14px; }

label { display: block; margin: 12px 0; }
small.hint { display: block; margin-top: 4px; color: #888; font-size: 12px; line-height: 1.5; }
input[type=text], input[type=password], textarea { width: 100%; padding: 10px 12px; border: 1px solid #d4d8e1; border-radius: 6px; font: inherit; background: #fff; }
textarea { font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; }
fieldset { border: 1px solid #e1e4ec; border-radius: 6px; padding: 12px 16px; margin: 12px 0; }
fieldset.provider label { display: inline-block; margin: 0 16px 0 0; }
fieldset legend { color: #555; padding: 0 6px; }
button, .btn { display: inline-block; padding: 9px 16px; background: #0066cc; color: #fff; border: 0; border-radius: 6px; cursor: pointer; font: inherit; }
button:hover, .btn:hover { background: #0052a3; text-decoration: none; }
.btn.secondary { background: #fff; color: #333; border: 1px solid #d4d8e1; }
.btn.secondary:hover { background: #f0f1f5; }
button.link { background: none; color: #0066cc; padding: 0; }

.login-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f6f7fb; }
.login-form { background: #fff; padding: 32px; border-radius: 12px; width: 320px; box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.login-form h1 { text-align: center; margin-bottom: 16px; }

.status { margin-top: 16px; padding: 12px; border-radius: 6px; background: #f0f4ff; font-size: 14px; }
.status.hidden { display: none; }

.status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; margin-left: 6px; }
.status-pending, .status-running { background: #fff3c4; color: #7a5a00; }
.status-completed { background: #d6f5d8; color: #1a6e26; }
.status-partial { background: #ffe8c2; color: #8a4d00; }
.status-failed { background: #ffd6d6; color: #a00; }

.tabs { display: flex; gap: 4px; margin: 24px 0 0; border-bottom: 1px solid #e1e4ec; }
.tab { background: transparent; color: #555; border: 0; border-bottom: 2px solid transparent; padding: 10px 16px; cursor: pointer; }
.tab[data-active] { color: #0066cc; border-bottom-color: #0066cc; }
.tab-panel { display: none; padding-top: 16px; }
.tab-panel[data-active] { display: block; }

.actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }

.regen-indicator { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff7e0; color: #7a5a00; border-radius: 6px; margin-bottom: 12px; font-size: 14px; }
.regen-indicator.hidden { display: none; }
.regen-indicator .spinner { width: 14px; height: 14px; border: 2px solid #c9a73a; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.tab-panel.regenerating [data-titles-container],
.tab-panel.regenerating [data-content-container] { opacity: 0.4; pointer-events: none; }

.version-selector { margin-bottom: 12px; padding: 8px 12px; background: #f6f7fb; border-radius: 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.version-selector.hidden { display: none; }
.version-btn { background: #fff; color: #555; border: 1px solid #d4d8e1; padding: 4px 10px; font-size: 12px; border-radius: 4px; cursor: pointer; }
.version-btn:hover { background: #f0f1f5; }
.version-btn[data-active] { background: #0066cc; color: #fff; border-color: #0066cc; }
.titles { list-style: none; padding: 0; }
.titles li { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #f0f1f5; }
.titles li span { flex: 1; }
.titles button.copy { background: #fff; color: #555; border: 1px solid #d4d8e1; padding: 4px 10px; font-size: 12px; }

.text { background: #f6f7fb; padding: 16px; border-radius: 6px; white-space: pre-wrap; font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; max-height: 600px; overflow: auto; }
.preview { width: 100%; height: 600px; border: 1px solid #e1e4ec; border-radius: 6px; }

/* Превью текста с оформлением (Дзен/VC) — то, что копируется как rich-text */
.rich-preview { background: #fff; border: 1px solid #e1e4ec; border-radius: 6px; padding: 20px 24px; max-height: 600px; overflow: auto; line-height: 1.6; color: #1a1a1a; }
.rich-preview h3 { font-size: 18px; margin: 20px 0 8px; }
.rich-preview p { margin: 10px 0; }
.rich-preview ul, .rich-preview ol { margin: 10px 0; padding-left: 22px; }
.rich-preview li { margin: 5px 0; }
.rich-preview a { color: #2563eb; }
.rich-preview strong { font-weight: 600; }

/* SEO-блок (только у блога): Title + Description с копированием */
.seo-field { margin: 8px 0 12px; }
.seo-label { font-size: 12px; color: #888; text-transform: uppercase; margin-bottom: 4px; }
.seo-row { display: flex; align-items: center; gap: 8px; background: #f6f7fb; border: 1px solid #e1e4ec; border-radius: 6px; padding: 8px 12px; }
.seo-value { flex: 1; font-size: 14px; }
.seo-row button.copy { background: #fff; color: #555; border: 1px solid #d4d8e1; padding: 4px 10px; font-size: 12px; }

/* Сгенерированная картинка (блог/Дзен) */
.gen-image { display: block; max-width: 100%; width: 100%; border: 1px solid #e1e4ec; border-radius: 8px; margin: 8px 0 12px; }

table.history { width: 100%; border-collapse: collapse; font-size: 14px; }
table.history th, table.history td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #f0f1f5; }
table.history th { color: #888; font-weight: 500; font-size: 12px; text-transform: uppercase; }

.admin-list { list-style: none; padding: 0; }
.admin-list li { padding: 8px 0; border-bottom: 1px solid #f0f1f5; }
.admin-edit textarea { font-family: ui-monospace, "SF Mono", monospace; }
.backups { list-style: none; padding: 0; font-size: 13px; color: #666; }
.backups li { padding: 4px 0; }

.meta { background: #f6f7fb; padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.meta div { margin: 2px 0; }