/* Панель Max Hedge — по прототипу на холсте. Один файл, без сборки. */
:root {
  --bg: #F3F4F6; --surface: #FFFFFF; --ink: #14171C; --muted: #5A6271; --line: #E1E4E9; --line-soft: #EEF0F3;
  --side: #111418; --side-2: #181D24; --side-3: #262D38; --side-ink: #C3C9D2; --side-muted: #9AA3AF;
  --accent: #1D4ED8; --accent-2: #1E40AF; --urgent: #C2410C;
  --ok-bg: #E3F4EA; --ok: #17633A; --err-bg: #FDE9DF; --err: #9A3412; --warn-bg: #FEF3C7; --warn: #8A3F0A;
  --info-bg: #E4ECFD; --info: #1E40AF; --neu-bg: #EDEFF2; --neu: #3F4652;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.45; }
a { color: var(--accent); } a:hover { color: var(--accent-2); }
h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
h2, .h2 { margin: 0; font-size: 15px; font-weight: 600; }
p { margin: 0; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.s13 { font-size: 13px; }

/* Каркас */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.side { flex: 1 1 232px; max-width: 100%; background: var(--side); color: #E6E9EE; padding: 20px 14px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 900px) { .side { flex: 0 0 240px; } }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; font: 600 13px 'IBM Plex Mono', monospace; color: #fff; }
.brand b { display: block; font-size: 15px; color: #fff; } .brand span { font-size: 12px; color: var(--side-muted); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--side-ink); text-decoration: none; }
.nav a:hover { background: #1B2028; color: #fff; }
.nav a.on { background: var(--side-3); color: #fff; font-weight: 500; }
.nav .badge { background: var(--urgent); color: #fff; } .nav .badge-err { background: #3A2A22; color: #FDBA8C; }
.side-box { margin-top: auto; background: var(--side-2); border: 1px solid var(--side-3); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.side-box .btn { background: #1B2028; border-color: #2E3542; color: #E6E9EE; width: 100%; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #2B323D; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; flex: none; }
.side-user b { display: block; font-size: 13px; color: #fff; font-weight: 500; } .side-user a, .side-user span { font-size: 12px; color: var(--side-muted); }
.main { flex: 999 1 560px; min-width: 0; padding: 28px 32px 48px; }
@media (max-width: 700px) { .main { padding: 20px 16px 40px; } }
.wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.head p { margin-top: 4px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.grow-3 { flex: 3 1 480px; } .grow-2 { flex: 2 1 340px; } .grow-1 { flex: 1 1 300px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }

/* Элементы */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; min-width: 0; }
.card-tight { padding: 16px 18px; }
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi .v { font: 600 26px 'IBM Plex Mono', monospace; letter-spacing: -0.02em; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.ok { background: var(--ok-bg); color: var(--ok); } .err { background: var(--err-bg); color: var(--err); }
.warn { background: var(--warn-bg); color: var(--warn); } .info { background: var(--info-bg); color: var(--info); } .neu { background: var(--neu-bg); color: var(--neu); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid #D3D7DE; background: #fff; color: var(--ink); font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--bg); color: var(--ink); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.pri:hover { background: var(--accent-2); }
.btn.dan { color: var(--err); border-color: #EFC2AC; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.score { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; font: 600 14px 'IBM Plex Mono', monospace; color: #fff; flex: none; }
.s-hi { background: var(--urgent); } .s-mid { background: var(--accent); } .s-lo { background: #6B7280; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bar { height: 8px; background: var(--neu-bg); border-radius: 4px; overflow: hidden; } .bar > div { height: 8px; background: var(--accent); }
.list-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.list-row:first-of-type { border-top: 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; background: #E8EAEE; padding: 4px; border-radius: 10px; align-self: flex-start; max-width: 100%; }
.tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent; color: var(--neu); text-decoration: none; font-weight: 500; }
.tab.on { background: #fff; border-color: #D3D7DE; color: var(--ink); }
.draft-link { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 10px; text-decoration: none; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.draft-link:hover { border-color: #B9C0CB; color: var(--ink); }
.draft-link.sel { background: #F5F8FF; border-color: var(--accent); }
.post { flex: 1 1 300px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.checks { background: #F7F8FA; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.note-box { background: #F7F8FA; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.alert-box { background: #FDF6F2; border: 1px solid #F6D5C3; border-radius: 8px; padding: 12px; }
.good-box { background: #F2F8F4; border: 1px solid #CDE8D6; border-radius: 10px; padding: 12px 14px; }
.blue-box { background: #F5F8FF; border: 1px solid #D5E0FA; border-radius: 10px; padding: 12px 14px; }
.card-img { width: 100%; max-width: 620px; border-radius: 10px; display: block; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 8px; background: #F3F5F8; border: 1px solid var(--line); font-size: 13px; }

/* Формы */
.field, textarea.field, select.field { width: 100%; min-height: 44px; border: 1px solid #D3D7DE; border-radius: 8px; padding: 0 12px; font: 400 14px 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink); background: #fff; }
textarea.field { padding: 10px 12px; line-height: 1.5; resize: vertical; }
.lbl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #3F4652; }
.lbl .help { font-size: 12px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }
.inline-form { display: inline; margin: 0; }

/* Таблицы */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: 13px; }

/* Сообщения */
.messages { display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.msg.success { background: var(--ok-bg); border-color: #CDE8D6; color: var(--ok); }
.msg.error { background: var(--err-bg); border-color: #F6D5C3; color: var(--err); }
.msg.warning { background: var(--warn-bg); border-color: #F5DFA3; color: var(--warn); }

/* Вход */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login .card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }