* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* иначе .login{display:grid} перебивает атрибут hidden и оверлей не скрывается */
html, body { margin: 0; height: 100%; }
body { font: 13px/1.35 -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #1f2430; background: #eef1f5; }

/* login */
.login { position: fixed; inset: 0; display: grid; place-items: center; background: #eef1f5; z-index: 50; }
.login-box { background: #fff; padding: 28px 30px; border-radius: 12px; box-shadow: 0 6px 30px rgba(0,0,0,.12); width: 320px; text-align: center; }
.login-box h1 { font-size: 18px; margin: 0 0 6px; }
.login-box p { color: #6b7280; margin: 0 0 14px; }
.login-box input { width: 100%; padding: 10px 12px; border: 1px solid #cbd2dc; border-radius: 8px; font-size: 14px; }
.login-box button { margin-top: 12px; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: #2e75b6; color: #fff; font-size: 14px; cursor: pointer; }
.err { color: #c0392b; margin-top: 10px; min-height: 16px; font-size: 12px; }

/* topbar */
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #1f2430; color: #fff; position: sticky; top: 0; z-index: 20; }
.topbar .ttl { font-size: 15px; }
.topbar .meta { color: #b9c0cc; font-size: 12px; flex: 1; }
.topbar .actions button { background: #33405a; color: #fff; border: 0; border-radius: 6px; padding: 6px 12px; margin-left: 8px; cursor: pointer; font-size: 12px; }
.topbar .actions button:hover { background: #445; }
.status { padding: 8px 16px; color: #6b7280; font-size: 12px; }

/* table */
.tablewrap { overflow: auto; height: calc(100vh - 84px); padding: 0 12px 40px; }
table.m { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
table.m th, table.m td { border-right: 1px solid #e2e6ec; border-bottom: 1px solid #e2e6ec; padding: 3px 8px; white-space: nowrap; text-align: center; }
table.m thead th { position: sticky; top: 0; z-index: 6; background: #1f4e78; color: #fff; font-weight: 600; }
table.m thead th.q { background: #375623; }
table.m thead th.sp, table.m td.sp, table.m tr.block td.sp, table.m tr.sec td.sp { background: #eef1f5; border: 0; min-width: 14px; width: 14px; }
/* первый столбец — залипающий */
.rowlabel { position: sticky; left: 0; z-index: 5; background: #fff; text-align: left !important; min-width: 340px; max-width: 340px; box-shadow: 1px 0 0 #d4dae2; }
thead th.corner { left: 0; z-index: 8; background: #1f4e78; text-align: left !important; min-width: 340px; max-width: 340px; }
td.num { text-align: right; }
td.q { background: #eef7ee; }
/* блок/секция строки */
tr.block td { color: #fff; font-weight: 700; text-align: left; border-bottom: 2px solid rgba(0,0,0,.15); }
tr.block .rowlabel { color: #fff; box-shadow: none; }
tr.sec td { background: #dde9f6; font-weight: 600; text-align: left; }
tr.sec .rowlabel { background: #dde9f6; }
tr.data { cursor: pointer; }
tr.data:hover td { background: #fff9e6; }
tr.data:hover td.rowlabel { background: #fff9e6; }
/* выбранная строка — горизонтальная полоса-подсветка через всю ширину (заливка heatmap видна) */
tr.data.sel td { box-shadow: inset 0 2px 0 #f08c00, inset 0 -2px 0 #f08c00; }
tr.data.sel td.rowlabel { background: #fff3bf !important; font-weight: 700; box-shadow: inset 0 2px 0 #f08c00, inset 0 -2px 0 #f08c00, 1px 0 0 #d4dae2; }
tr.data.sel:hover td { background: inherit; }
/* heatmap */
.churn { color: #7a1f1f; }
.conv { color: #1e5b2a; }
.neg { color: #c0392b; }
.pos { color: #1e5b2a; }
.dim { color: #aab2bd; }