/* Klario Solutions: original logo, local fonts, neutral surfaces and red accents. */
@import url('assets/brand/fonts.css');
:root {
  --bg:#f0f2f1; --paper:#fff; --ink:#3a3c3b; --muted:#656766;
  --line:#d4d6d5; --green:#b80000; --soft:#fff0f0;
  --red:#a60000; --amber:#785317; --amber-bg:#fff4dc;
  font-family:Roboto,'Segoe UI',Arial,sans-serif;
}
.sidebar { background:#242625; border-color:#3a3c3b; }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:17px; white-space:normal; }
.brand-logo { display:block; width:170px; height:auto; }
.brand-product { display:block; font-size:12px; font-weight:400; letter-spacing:2px; color:#d4d6d5; text-transform:uppercase; }
.sidebar .brand { padding:0 10px 24px; border-bottom:1px solid #454746; }
.nav-label { margin-top:30px; color:#b5b7b6; }
.nav { color:#c7c9c8; }
.nav:hover { background:#343635; }
.nav.active { background:#3d2020; color:#fff; box-shadow:inset 3px 0 #ff0000; }
.nav b { background:#484a49; color:#fff; }
.nav.active b { background:#6b2525; }
.sidebar-bottom, .sidebar-bottom .text-button { color:#b5b7b6; }
.sidebar-bottom strong { color:#f0f2f1; }
.live-dot { background:#ff0000; }
.page-heading h1, .login h1, .setup h1 { font-family:'Roboto Slab',Georgia,serif; font-weight:700; letter-spacing:-1.6px; }
.accent { color:#ff0000; }
.primary { background:#cc0000; }
.primary:hover { background:#a60000; }
.stats .stat-featured { background:#fff; border-color:#d4d6d5; border-top:3px solid #ff0000; padding-top:18px; }
.stat-featured strong { color:#b80000; }
.tab.active { background:#3a3c3b; }
.nav,.tab,.primary,.secondary { border-radius:4px; }
.card:hover { border-color:#a6a8a7; box-shadow:0 5px 20px #0000000d; }
.card-top { background:#f0f2f1; }
.card-top .placeholder { color:#949695; }
.favorite { border-color:#cacccb; }
.favorite.selected { background:#fff0f0; }
.reason { color:#656766; }
.card-bottom { border-color:#e7e9e8; }
.badge.watch { background:#f0f2f1; color:#606261; }
.empty { border-color:#b6b8b7; }
.login .brand { background:#242625; padding:25px 28px; border-left:4px solid #ff0000; margin-bottom:45px; border-radius:4px; }
.login .brand-logo { width:190px; }
dialog::backdrop { background:#202222d9; }
@media(max-width:1150px) { .sidebar .brand-logo { width:150px; } }
@media(max-width:760px) {
  .sidebar .brand { flex-direction:row; align-items:center; justify-content:space-between; padding:0 0 17px; }
  .sidebar .brand-logo { width:128px; }
  .brand-product { font-size:10px; letter-spacing:1.3px; }
  .stats .stat-featured { padding-top:13px; }
}