:root { color-scheme: light; --ink:#17212b; --muted:#66727f; --line:#dfe5e9; --bg:#f5f7f8; --panel:#fff; --accent:#0c7669; --accent-soft:#e5f4f1; --danger:#b42318; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:14px/1.5 Inter,Segoe UI,Arial,sans-serif; color:var(--ink); background:var(--bg); }
button,input,select,textarea { font:inherit; }
button { border:0; border-radius:8px; padding:10px 14px; background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { color:var(--ink); background:#eef1f3; }
button:disabled { opacity:.55; cursor:not-allowed; }
.shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; overflow:auto; padding:20px 14px; color:#eaf3f1; background:#132b30; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; margin:0 6px 22px; }
.brand-mark { display:grid; place-items:center; flex:0 0 36px; height:36px; border-radius:10px; color:#fff; background:var(--accent); font-weight:800; }
nav { display:grid; gap:3px; }
nav a { padding:9px 12px; border-radius:8px; color:#bcd0ce; text-decoration:none; }
nav a:hover,nav a.active { color:#fff; background:#24464b; }
.workspace { min-width:0; }
.topbar { position:sticky; z-index:5; top:0; display:flex; align-items:center; justify-content:space-between; min-height:70px; padding:12px 24px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); }
.topbar small { display:block; color:var(--muted); }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.menu { display:none; padding:8px 10px; }
main { padding:24px; max-width:1500px; width:100%; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card { padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 9px rgba(16,40,44,.04); }
.card h2,.card h3 { margin:0 0 12px; }
.metric { font-size:28px; font-weight:750; }
.muted { color:var(--muted); }
.badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:var(--accent-soft); color:#155e55; font-size:12px; font-weight:700; }
.badge.warning { background:#fff2cc; color:#7a4d00; }.badge.error { background:#fee4e2; color:var(--danger); }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.toolbar label { min-width:130px; }
.pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
table { border-collapse:collapse; width:100%; min-width:720px; }
th,td { padding:11px 13px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.035em; background:#fafbfb; }
tr:last-child td { border-bottom:0; }
.empty,.loading { padding:40px; text-align:center; color:var(--muted); background:#fff; border:1px dashed var(--line); border-radius:12px; }
.error { color:var(--danger); }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:#eef3f2; }
.login-card { width:min(430px,100%); padding:32px; border-radius:16px; background:#fff; box-shadow:0 16px 48px rgba(19,43,48,.14); }
.login-card .brand-mark { margin-bottom:18px; }.login-card h1 { margin:0 0 8px; }.login-card p { color:var(--muted); }
label { display:grid; gap:6px; color:var(--muted); font-weight:600; }
input,select,textarea { width:100%; padding:10px 12px; border:1px solid #cbd5db; border-radius:8px; color:var(--ink); background:#fff; }
.login-card button { width:100%; margin-top:14px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.form-grid .wide { grid-column:1/-1; }
.subnav { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.subnav a { padding:7px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink); text-decoration:none; background:#fff; }
.subnav a:hover,.subnav a.active { color:#fff; background:var(--accent); border-color:var(--accent); }
.modal-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(19,43,48,.45); overflow:auto; }
.modal { width:min(560px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:14px; box-shadow:0 24px 64px rgba(19,43,48,.3); }
.modal-lg { width:min(720px,100%); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.modal-head strong { font-size:16px; }
.modal-close { padding:4px 10px; line-height:1; font-size:20px; background:#eef1f3; color:var(--ink); }
.modal-body { padding:20px; }
.modal-body input { margin:8px 0 12px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.mm-results { display:grid; gap:6px; max-height:340px; overflow:auto; margin-top:6px; }
.mm-result { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); cursor:pointer; }
.mm-result:hover { border-color:var(--accent); background:var(--accent-soft); }
.mm-result-main { display:grid; gap:2px; min-width:0; }
.mm-result-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.confirm-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin:10px 0 16px; }
.confirm-side { padding:14px; border:1px solid var(--line); border-radius:10px; background:#fafbfb; }
.confirm-side h4 { margin:0 0 6px; color:var(--muted); font-size:12px; letter-spacing:.05em; }
.confirm-arrow { font-size:22px; color:var(--muted); }
.tl-row { padding:10px 0; border-bottom:1px solid var(--line); }
.tl-row:last-child { border-bottom:0; }
.tl-meta { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.tl-content { padding-left:6px; white-space:pre-wrap; word-break:break-word; }
.trace-sec { margin-bottom:14px; }
.trace-sec h4 { margin:0 0 6px; font-size:13px; color:var(--muted); }
.trace-sec pre, pre { white-space:pre-wrap; word-break:break-word; background:#f6f8f8; border:1px solid var(--line); border-radius:8px; padding:12px; font:12px/1.5 ui-monospace,Consolas,monospace; max-height:320px; overflow:auto; }
textarea { width:100%; min-height:120px; padding:10px 12px; border:1px solid #cbd5db; border-radius:8px; font:13px/1.5 ui-monospace,Consolas,monospace; }
/* ADMIN-6: business-friendly presentation layer */
.placeholder { max-width:760px; }.placeholder ul { padding-left:20px; }

/* 1. Карточки: hover только для компактных/кликабельных summary-карточек (§37).
   Большие detail-панели, формы, таблицы, редакторы и превью НЕ масштабируются. */
.card { transition: box-shadow .14s ease, border-color .14s ease; }
.card.hover-card, .card.compact-card { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.card.hover-card:hover, .card.compact-card:hover { transform: scale(1.012); box-shadow: 0 8px 22px rgba(16,40,44,.10); }
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--accent); }
.card.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Toast-уведомления о действиях (§36) */
#toast-host { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: 420px; }
.toast { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; box-shadow: 0 10px 26px rgba(16,40,44,.16); font-size: 13px; }
.toast.ok { border-color: #2f9e6b; background: #f1fbf6; }
.toast.error { border-color: #d64545; background: #fdf3f3; color: #8a1f1f; }
.toast.info { border-color: #3f7fbf; background: #f2f7fd; }

/* Строки выбора (checkbox рядом с label, §21) */
.choice-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; margin: 4px 0; }
.choice-row input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 auto; }
.choice-row .choice-main { flex: 1 1 auto; }
.choice-row .choice-note { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.choice-row.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card-head h3 { margin: 0; }
.card-link-hint { color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.card.clickable:hover .card-link-hint::after { content: ' →'; }
.kpi { font-size: 26px; font-weight: 750; line-height: 1.15; }
.kpi-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }

/* 2. Drag & drop карточек */
.grid.draggable .card { cursor: grab; }
.grid.draggable .card.dragging { opacity: .45; cursor: grabbing; }
.grid.draggable .card.drop-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.drag-handle { color: var(--muted); font-size: 13px; letter-spacing: 2px; user-select: none; }

/* 3. Пояснения и подсказки */
.help { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; background: #f4faf9; }
.help-body { min-width: 0; }
.help h4 { margin: 0 0 6px; font-size: 13px; }
.help p { margin: 0 0 6px; color: var(--ink); font-size: 13px; }
.help ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink); font-size: 13px; }
.help-toggle { font-size: 12px; }
.tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: #e6ecee; color: var(--muted); font-size: 11px; font-weight: 700; cursor: help; vertical-align: middle; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; }
.flow span.step { padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.flow span.arrow { color: var(--muted); }

/* 4. Раскрываемые технические детали */
details.tech { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
details.tech > summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
details.tech[open] > summary { margin-bottom: 8px; }
details.tech pre { max-height: 280px; }

/* 5. Списки/таблицы: понятные подписи */
.toolbar.wrap { flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-group label { color: var(--muted); font-size: 12px; }
.table-note { color: var(--muted); font-size: 12px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.status-list { display: grid; gap: 8px; margin: 0; padding-left: 18px; }
.status-list li { line-height: 1.45; }

/* ADMIN-14: упрощённая страница публикации */
.channel-option { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; }
.channel-option.is-selected { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.channel-option .why { margin-top: 6px; }
.channel-option .why > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.channel-option .why p { margin: 6px 0 0; font-size: 12px; }
.readiness { display: grid; gap: 4px; margin: 8px 0 10px; padding-left: 0; list-style: none; }
.readiness li { font-size: 14px; line-height: 1.5; }
.readiness li.ok { color: var(--ink); }
.readiness li.error { color: var(--danger); }
.visual-chosen { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.visual-chosen > img { width: 100%; max-width: 460px; border-radius: 10px; border: 1px solid var(--line); }
.visual-meta { flex: 1 1 260px; min-width: 240px; }
.visual-meta p { margin: 4px 0; }
.thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); vertical-align: middle; }
.preview-text { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; max-height: 360px; overflow: auto; }
details.tech-section > summary { cursor: pointer; }

/* ADMIN-15: редактор контента и preview статьи */
.editor-fields { display: grid; gap: 10px; }
.editor-fields .field { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.editor-fields .field input, .editor-fields .field textarea, .editor-fields .field select { width: 100%; margin-top: 4px; font-weight: 400; color: var(--ink); }
.field-help { margin: -4px 0 4px; font-size: 12px; color: var(--muted); font-weight: 400; }
.warning { color: #a86200; }
.site-preview { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; max-width: 720px; }
.site-preview .site-hero { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin-bottom: 14px; }
.site-preview h1 { margin: 0 0 10px; font-size: 26px; line-height: 1.25; }
.site-preview .site-lead { font-size: 16px; color: var(--muted); margin: 0 0 14px; }
.site-preview p { margin: 0 0 12px; line-height: 1.6; }
.site-preview .site-h2 { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.site-preview .site-h2 ul { margin: 6px 0 0; padding-left: 18px; }

/* ADMIN-4: AI Quality */
.badge.secondary { background:#eef1f3; color:var(--ink); }
select[multiple] { min-height:40px; max-height:96px; padding:6px; }
.toolbar label { display:flex; align-items:center; gap:6px; color:var(--muted); }
.toolbar label input[type="checkbox"] { width:auto; }
.card pre { max-height:260px; }
@media (max-width:900px) { .grid { grid-template-columns:1fr 1fr; }.shell { grid-template-columns:1fr; }.sidebar { position:fixed; z-index:10; width:250px; transform:translateX(-100%); transition:.2s; }.shell.menu-open .sidebar { transform:translateX(0); }.menu { display:block; }.topbar { justify-content:flex-start; gap:14px; }.topbar-actions { margin-left:auto; } }
@media (max-width:600px) { .grid,.form-grid { grid-template-columns:1fr; }.form-grid .wide { grid-column:auto; } main,.topbar { padding:14px; }.topbar-actions .badge { display:none; } }