/* Дизайн-проход v3: сочный красный, плоские кнопки без выпуклости, двухтоновые иконки. Подключается после v2.css. */
:root {
  --red: #e8243a; --red2: #c4132a; --red-soft: rgba(232, 36, 58, .10);
  --acc: #e8243a; --acc2: #ff4a5e; --acc-soft: rgba(232, 36, 58, .10);
  --gold: #ffb020; --gold2: #ffc954; --gold-soft: rgba(255, 176, 32, .16);
  --rail-bg: #d8192f; --rail-bg2: #f0253d; --rail-ink: #fff5f3;
}
:root[data-theme="night"] { --rail-bg: #b3142a; --rail-bg2: #d8192f; --acc: #ff3b57; --acc2: #ff6a7f; }
:root[data-theme="fire"] { --rail-bg: #c0152c; --rail-bg2: #e01f36; --bg: #5a0f1c; --bg2: #6b1322; --panel: #6f1424; --panel2: #7c1828; --card: #731526; }
.shell { background: linear-gradient(170deg, var(--rail-bg2) 0%, var(--rail-bg) 55%, #c4132a 100%); }
.login { background: var(--rail-bg); }
.lg-form { background: linear-gradient(180deg, var(--rail-bg2), var(--rail-bg)); }
.lg-form .pad button { background: rgba(255, 255, 255, .12); border: 0; }
.lg-form .pad button:hover { background: rgba(255, 255, 255, .2); }
.lg-tag { background: var(--red); box-shadow: 0 10px 24px -8px rgba(232, 36, 58, .5); }
.profile-h { background: linear-gradient(135deg, var(--rail-bg2), var(--rail-bg)); }
.post .pimg { background: linear-gradient(145deg, var(--rail-bg2), var(--rail-bg)); }
.toast { background: #2a1416; }
.msg.me .bub { background: var(--red); }

/* рельс: активный пункт — светлая плашка, без вдавленности */
.nav a { color: rgba(255, 245, 243, .86); }
.nav a svg { color: rgba(255, 245, 243, .78); }
.nav a:hover { background: rgba(255, 255, 255, .1); }
.nav a.on { background: #fff; color: var(--red2); box-shadow: 0 6px 16px -8px rgba(60, 0, 10, .5); font-weight: 600; }
.nav a.on svg { color: var(--red); filter: none; }
.nav .badge { background: rgba(0, 0, 0, .18); } .nav a.on .badge { background: var(--red-soft); color: var(--red2); }
.nav .badge.warn { background: var(--gold); color: #2a1200; } .nav .badge.hot { background: #fff; color: var(--red2); }
.nav a.on .badge.warn { background: var(--gold); color: #2a1200; }
.rail .foot { background: rgba(0, 0, 0, .14); }
.topbar .search { background: rgba(255, 255, 255, .14); border: 0; color: rgba(255, 245, 243, .8); }
.topbar .search:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.topbar kbd { background: rgba(0, 0, 0, .18); border: 0; color: rgba(255, 245, 243, .8); }
.topbar .user { background: rgba(255, 255, 255, .12); } .topbar .user:hover { background: rgba(255, 255, 255, .2); }
.topbar .ic { color: rgba(255, 245, 243, .9); } .topbar .ic:hover { background: rgba(255, 255, 255, .14); }
.ic .dot { background: var(--gold); box-shadow: 0 0 0 2px var(--rail-bg); }
.sp.on { background: rgba(255, 255, 255, .14); color: #fff; } .sp.on i { background: #7CFFB2; box-shadow: 0 0 8px #7CFFB2; }
.sp.off { background: rgba(0, 0, 0, .16); color: rgba(255, 245, 243, .8); }
.tabbar .on { color: var(--red); }

/* кнопки: плоские, без градиентов и бликов */
.btn, .btn:hover, .btn.pri, .btn.pri:hover, .btn.red, .btn.red:hover, .btn.ok, .btn.ok:hover, .btn.bad, .btn.ghost {
  background-image: none; box-shadow: none; transform: none; filter: none; border: 0;
}
.btn { height: 40px; padding: 0 16px; border-radius: 12px; background: var(--bg2); color: var(--ink); font-weight: 600; transition: background .15s, color .15s; }
.btn:hover { background: color-mix(in srgb, var(--bg2) 80%, var(--ink) 8%); }
.btn.pri { background: var(--red); color: #fff; }
.btn.pri:hover { background: var(--red2); }
.btn.red { background: var(--red-soft); color: var(--red2); }
.btn.red:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }
.btn.ok { background: var(--ok); color: #fff; } .btn.ok:hover { background: #1a9a62; }
.btn.bad { background: var(--bad-soft); color: var(--bad); } .btn.bad:hover { background: color-mix(in srgb, var(--bad) 22%, transparent); }
.btn.ghost { background: transparent; color: var(--ink2); } .btn.ghost:hover { background: var(--hover); color: var(--ink); }
.btn.gold { background: var(--gold); color: #2a1200; } .btn.gold:hover { background: #f0a010; }
.btn:active { opacity: .85; }
.btn svg { width: 18px; height: 18px; }
.phead .btn.pri { border-radius: 12px; }
.lg-form .btn.pri { background: var(--gold); color: #2a1200; }
:root[data-theme="night"] .btn, :root[data-theme="fire"] .btn { background: rgba(255, 255, 255, .08); } :root[data-theme="night"] .btn:hover, :root[data-theme="fire"] .btn:hover { background: rgba(255, 255, 255, .14); }

/* поля, сегменты, вкладки — тот же плоский язык */
.inp, select.inp, textarea.inp { box-shadow: none; border: 1.5px solid transparent; background: var(--bg2); }
.inp:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); background: var(--card); }
.seg .on, .tabs a.on { box-shadow: none; background: var(--card); }
.tabs a.on { color: var(--red2); } .tabs a.on svg { color: var(--red); }
.tabs a em { background: var(--red-soft); color: var(--red2); }
.card { box-shadow: 0 1px 2px rgba(70, 25, 25, .04), 0 10px 30px -18px rgba(70, 25, 25, .18); }
.card:hover { box-shadow: 0 1px 2px rgba(70, 25, 25, .05), 0 16px 40px -20px rgba(70, 25, 25, .26); }
.card h3::before, .ch h3::before { background: var(--red); border-radius: 2px; width: 3px; }
.card .more { background: transparent; color: var(--red2); padding: 6px 8px; } .card .more:hover { background: var(--red-soft); }
.kpi::before { display: none; }
.kpi .l svg, .kpi:nth-child(n) .l svg { color: var(--red); opacity: .9; }
.kpi:nth-child(6n+2) .l svg { color: var(--gold); } .kpi:nth-child(6n+3) .l svg { color: var(--info); } .kpi:nth-child(6n+4) .l svg { color: var(--vio); } .kpi:nth-child(6n+5) .l svg { color: var(--ok); } .kpi:nth-child(6n) .l svg { color: var(--orange); }
.kpi.acc { background: linear-gradient(135deg, var(--red-soft), transparent 60%); } .kpi.acc .v { color: var(--red2); }
.pill.acc { background: var(--red-soft); color: var(--red2); }
.prog i { background: var(--red); }
.hero .ctrls button.on { background: var(--red); color: #fff; box-shadow: none; }
.hero .zones button.on, .hero .zones button:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.tdrawer .btn.pri { background: var(--red); color: #fff; }
.oc.sel { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.stc.on { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.stc .si { background: none; }
.chan.on { background: var(--red-soft); }
.fc-day.td { background: linear-gradient(160deg, var(--red-soft), var(--card)); box-shadow: 0 0 0 2px var(--red); }
.tipbox { border-color: rgba(255, 176, 32, .5); }
.lane.l-new > header i { background: var(--red); }
.cells i.cur { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); } .cells i.on { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .14); } .cells i::after { background: #fff; } .cells i.cur:not(.on)::after { background: #fff; }
.lg-form .dots i.on { background: #fff; border-color: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .6); }
.lg-form .lg-hint b { color: #fff; }
.user .ava { background: #fff !important; color: var(--red2); }

/* двухтоновые иконки: вторая тонировка — тот же цвет с прозрачностью */
svg.i { fill: currentColor; stroke: none; }
.nav a svg, .topbar svg.i, .tabbar svg.i { width: 24px; height: 24px; }
.kpi .l svg, .kpi:nth-child(n) .l svg { width: 30px; height: 30px; }
.kpi2 .ico svg { width: 28px; height: 28px; }
.empty svg { width: 52px; height: 52px; }
.tchip svg { width: 24px; height: 24px; }
.al > svg:first-child { width: 26px; height: 26px; }
.tabs a svg, .seg svg, .btn svg { width: 18px; height: 18px; }
.modal .ic svg, .ic svg { width: 20px; height: 20px; }