:root {
  --bg: #f4f6f9; --panel: #ffffff; --line: #dde3ea;
  --text: #1c2733; --muted: #6b7a8c;
  --accent: #1e6fd9; --accent-dark: #17529f;
  --danger: #c92a2a; --ok: #2b8a3e; --warn: #e8890c;
  --radius: 8px;
  font-size: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); }
h1,h2,h3 { margin: 0 0 12px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

/* login */
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { background:var(--panel); padding:32px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.08); width:340px; display:flex; flex-direction:column; gap:14px; }
.login-card h1 { font-size:20px; text-align:center; }
.login-card label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }

/* layout */
#main-screen { display:flex; min-height:100vh; }
.sidebar { width:200px; background:#20304a; color:#dbe4f0; display:flex; flex-direction:column; position:fixed; top:0; bottom:0; }
.logo { padding:18px 16px; font-weight:700; font-size:20px; line-height:1.1; border-bottom:1px solid #33456380; }
.logo small { font-weight:400; font-size:12px; color:#93a5c0; }
#nav { flex:1; overflow:auto; padding:8px 0; }
#nav a { display:block; padding:10px 16px; color:#c6d2e2; text-decoration:none; border-left:3px solid transparent; }
#nav a:hover { background:#2a3d5e; }
#nav a.active { background:#2a3d5e; border-left-color:var(--accent); color:#fff; }
.sidebar-footer { padding:12px 16px; border-top:1px solid #33456380; font-size:12px; display:flex; flex-direction:column; gap:8px; }
main { flex:1; margin-left:200px; padding:20px 24px; min-width:0; }

/* controls */
.btn { background:#e9eef5; border:1px solid var(--line); border-radius:6px; padding:7px 14px; cursor:pointer; }
.btn:hover { background:#dfe7f0; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-dark); }
.btn.danger { color:var(--danger); }
.btn.ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.btn.ok:hover { background:#24713a; }
.btn.small { padding:4px 10px; font-size:12px; }
input, select, textarea { background:#fff; border:1px solid var(--line); border-radius:6px; padding:7px 9px; }
input:focus, select:focus, textarea:focus { outline:2px solid #1e6fd930; border-color:var(--accent); }
label.f { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
label.f > input, label.f > select, label.f > textarea { color:var(--text); }
.error { color:var(--danger); font-size:13px; min-height:18px; }

/* toolbar */
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-bottom:14px; }
.toolbar .grow { flex:1; }

/* tables */
.tbl-wrap { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; max-height: calc(100vh - 170px); }
table.tbl { border-collapse:collapse; width:100%; font-size:13px; }
.tbl th, .tbl td { border-bottom:1px solid var(--line); padding:7px 10px; text-align:left; white-space:nowrap; }
.tbl th { position:sticky; top:0; background:#eef2f7; z-index:2; cursor:default; font-weight:600; }
.tbl tbody tr:hover { background:#f0f6ff; }
.tbl tbody tr { cursor:pointer; }
.tbl tbody tr.plain { cursor:default; }
.tag { display:inline-block; border-radius:10px; padding:1px 9px; font-size:12px; }
.tag.st-Ведется { background:#d3f9d8; color:#2b8a3e; }
.tag.st-Подано { background:#fff3bf; color:#997404; }
.tag.st-Завершено { background:#e7ebf0; color:#5c6b7a; }
.tag.warn { background:#ffe3e3; color:var(--danger); }

/* modal */
.modal-back { position:fixed; inset:0; background:rgba(15,25,40,.45); display:flex; align-items:flex-start; justify-content:center; padding:30px 16px; z-index:50; overflow:auto; }
.modal { background:var(--panel); border-radius:12px; width:100%; box-shadow:0 12px 50px rgba(0,0,0,.25); }
.modal.md { max-width:640px; }
.modal.lg { max-width:1200px; }
.modal-head { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-size:17px; flex:1; }
.modal-body { padding:18px 20px; }
.modal-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted); }

/* tabs */
.tabs { display:flex; flex-wrap:wrap; gap:2px; border-bottom:2px solid var(--line); margin-bottom:14px; }
.tabs button { border:none; background:none; padding:8px 13px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; color:var(--muted); }
.tabs button.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

/* forms grid */
.fgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px 14px; }
.fgrid .wide { grid-column: 1 / -1; }

/* misc */
.cards { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; min-width:150px; }
.card .num { font-size:22px; font-weight:700; }
.card .lbl { color:var(--muted); font-size:12px; }
.muted { color:var(--muted); }
.right { text-align:right; }
.mt { margin-top:14px; }
.row-actions { display:flex; gap:6px; }
#toast { position:fixed; bottom:20px; right:20px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.toast-item { background:#243447; color:#fff; padding:10px 16px; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.3); }
.toast-item.err { background:var(--danger); }
.cols-menu { position:absolute; background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.15); padding:10px; max-height:400px; overflow:auto; z-index:40; }
.cols-menu label { display:flex; gap:6px; padding:2px 4px; font-size:13px; white-space:nowrap; }
.week { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.day { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px; min-height:180px; }
.day h4 { margin:0 0 8px; font-size:13px; }
.day.today { outline:2px solid var(--accent); }
.ev { border-left:3px solid var(--accent); background:#f2f7ff; margin-bottom:6px; padding:5px 7px; font-size:12px; border-radius:0 6px 6px 0; }
.ev .k { color:var(--muted); }
.funnel { display:flex; gap:14px; margin-bottom:16px; }
.funnel .stage-col { flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px; }
.lead-card { border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin-bottom:8px; cursor:pointer; background:#fff; }
.lead-card:hover { border-color:var(--accent); }
.lead-card[draggable="true"] { cursor:grab; }
.lead-card.dragging { opacity:.5; }
.funnel .stage-col.drop-hover { border-color:var(--accent); background:#eef4ff; }
.lead-card.overdue { border-left:3px solid var(--danger); }
.due-badge { color:var(--danger); font-weight:600; font-size:12px; }
tr.clickable { cursor:pointer; }
tr.clickable:hover { background:#f2f7ff; }
tr.double-warn td { background:#fff3f0; }
tr.double-warn td:first-child { box-shadow:inset 3px 0 0 var(--danger); }
.ev-add { display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.ev-add select { flex:0 0 auto; }
.checklist .check-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); }
.checklist .ci-title { flex:1; }
.checklist .check-item.done .ci-title { text-decoration:line-through; color:var(--muted); }
.chat { display:flex; flex-direction:column; gap:8px; max-height:55vh; overflow-y:auto; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.chat-msg { padding:8px 12px; border-radius:10px; max-width:82%; line-height:1.45; }
.chat-msg.user { align-self:flex-end; background:var(--accent); color:#fff; }
.chat-msg.ai { align-self:flex-start; background:#fff; border:1px solid var(--line); }
.color-bar { display:flex; align-items:center; gap:5px; margin-bottom:10px; flex-wrap:wrap; }
.color-bar .swatch { width:22px; height:22px; border:1px solid var(--line); border-radius:4px; cursor:pointer; padding:0; }
.cols-menu { min-width:280px; max-height:70vh; overflow:auto; }
.cols-menu .col-row { display:flex; align-items:center; gap:4px; padding:2px 6px; }
.cols-menu .col-row .grow { flex:1; }
.stepper { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.stepper .step { padding:4px 10px; border:1px solid var(--line); border-radius:14px; font-size:12px; display:flex; align-items:center; gap:6px; background:#fff; }
.stepper .step .sn { display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; border-radius:50%; background:var(--line); font-size:11px; }
.stepper .step.done { color:var(--muted); }
.stepper .step.done .sn { background:var(--ok); color:#fff; }
.stepper .step.cur { border-color:var(--accent); font-weight:600; }
.stepper .step.cur .sn { background:var(--accent); color:#fff; }
.stepper .step:not(.cur) { cursor:pointer; }
.stepper .step:not(.cur):hover { border-color:var(--accent); }
.month { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.month .mh { font-weight:600; text-align:center; color:var(--muted); font-size:12px; }
.month .mcell { border:1px solid var(--line); border-radius:6px; min-height:78px; padding:4px; }
.month .mcell.today { border-color:var(--accent); background:#f2f7ff; }
.month .mcell.empty { border:none; }
.month .mnum { font-size:12px; color:var(--muted); }
.month .mev { font-size:11px; background:#eef4ff; border-radius:3px; padding:1px 4px; margin-top:2px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.perm-grid td, .perm-grid th { text-align:center; }
.perm-grid td:first-child, .perm-grid th:first-child { text-align:left; }
@media (max-width: 900px) {
  .sidebar { width:60px; }
  .logo { font-size:12px; padding:10px 6px; }
  #nav a { padding:10px 8px; font-size:11px; }
  main { margin-left:60px; padding:12px; }
  .week { grid-template-columns:1fr; }
}

/* Телефоны (§9.5): верхняя навигация, полноширинный контент, одноколоночные формы */
@media (max-width: 640px) {
  #main-screen { flex-direction:column; }
  .sidebar { position:static; width:auto; flex-direction:row; align-items:center; height:auto; }
  .logo { display:none; }
  #nav { display:flex; flex-direction:row; overflow-x:auto; padding:0; flex:1; }
  #nav a { border-left:none; border-bottom:3px solid transparent; white-space:nowrap; padding:12px 12px; font-size:13px; }
  #nav a.active { border-left:none; border-bottom-color:var(--accent); }
  .sidebar-footer { flex-direction:row; border-top:none; padding:6px 10px; }
  #whoami { display:none; }
  main { margin-left:0; padding:12px; }
  .fgrid { grid-template-columns:1fr; }
  .modal.lg, .modal.md { max-width:100%; }
  .modal-back { padding:0; }
  .modal { border-radius:0; min-height:100vh; }
  .card { min-width:calc(50% - 12px); }
  .funnel, .month { display:block; }
  .funnel .stage-col { margin-bottom:10px; }
  .month .mcell { min-height:auto; }
  .week { grid-template-columns:1fr; }
}