/* TRENER VIKTHOR — Panel UI Sync v0.2
   Brand tokens based on TRENER VIKTHOR brand reference, without changing business logic.
   Oswald loads from Google Fonts where online; no font files are bundled.
*/
:root {
  color-scheme: dark;
  --bg: #090909;
  --panel: #161618;
  --panel2: #202024;
  --line: #353538;
  --muted: #a9a9af;
  --text: #f7f7f8;
  --red: #d52d35;
  --red2: #e13b43;
  --good: #aad4b8;
  --brand-font: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1.5;
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
::selection { background: #8e2028; color: #fff; }

/* Brand lockup: same original white dragon as on the TRENER VIKTHOR brand materials. */
.brand-lockup { display: flex; align-items: center; min-width: 0; gap: 12px; }
.brand-logo { width: 48px; height: 53px; flex: none; object-fit: contain; border: 0; background: #050505; }
.brand-copy { display: grid; align-content: center; min-width: 0; gap: 5px; }
.brand-name { display: block; font: 600 23px/1.08 var(--brand-font); color: white; text-transform: uppercase; letter-spacing: .1px; white-space: nowrap; }
.brand-rule { display: block; height: 2px; width: 100%; max-width: 134px; background: var(--red); }
.brand-subtitle { font: 400 9px/1.25 var(--brand-font); letter-spacing: .65px; color: #b7b7bb; white-space: nowrap; }
.sidebar { background: #0e0e10; width: 267px; flex-basis: 267px; border-right-color: #27272a; padding: 26px 19px 24px; gap: 30px; }
.sidebar .brand-lockup { padding: 2px 2px 23px; border-bottom: 1px solid #29292d; }
.sidebar .brand-name { font-size: 22px; }
.sidebar .brand-logo { width: 44px; height: 50px; }
.sidebar .brand-subtitle { font-size: 8px; }
.nav { gap: 7px; }
.nav button { border: 1px solid transparent; border-radius: 12px; padding: 13px 15px; font-size: 13px; font-weight: 560; color: #bbbcc0; gap: 12px; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.nav button:hover { background: #1c1c1f; color: #fff; border-color: #2d2d30; }
.nav button.active { background: #202024; color: #fff; border-color: #37373b; }
.nav button.active:before { width: 2px; height: 21px; margin-left: -9px; background: var(--red); }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; color: currentColor; }
.nav-icon svg { width: 18px; height: 18px; }
.sidebar-foot { border-top-color: #2b2b30; }
.sidebar-foot button { background: #171719; color: #bbbcc1; border-color: #303035; }
.sidebar-foot button:hover { background: #252528; color: white; }

/* Focus: a quiet functional dashboard, not a marketing landing page. */
.main { max-width: 1510px; padding: 42px 46px 84px; }
.top { margin-bottom: 29px; }
.eyebrow { color: var(--red2); letter-spacing: 2px; font-size: 11px; font-weight: 750; }
h1, h2, h3 { font-family: var(--brand-font); letter-spacing: .1px; font-weight: 600; color: #f8f8f8; }
h1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; margin-bottom: 10px; }
h2 { font-size: 22px; font-weight: 550; line-height: 1.2; margin-bottom: 16px; }
h3 { font-size: 17px; line-height: 1.2; }
.top .sub { color: #b4b4ba; font-size: 13px; }
.btn { background: #202024; color: #f1f1f2; border: 1px solid #39393d; border-radius: 12px; min-height: 43px; padding: 11px 17px; font-weight: 650; box-shadow: none; transition: border-color .15s, background .15s; }
.btn:hover { background: #29292e; border-color: #68686a; }
.btn.red { background: var(--red); border-color: var(--red); color: white; }
.btn.red:hover { background: #bb2630; border-color: #bb2630; }
.btn.ghost { background: transparent; }
.btn.tiny { font-size: 12px; min-height: 36px; }
.kpis, .kpis.five { gap: 13px; margin-bottom: 21px; }
.panel { background: #171719; border: 1px solid #303034; border-radius: 21px; padding: 23px; box-shadow: none; }
.panel.soft { background: #202024; }
.kpis > .panel { min-height: 137px; padding: 22px 23px; background: #1b1b1e; }
.stat-label { color: #b3b3b9; font-size: 12px; margin-bottom: 11px; }
.stat-value { font: 600 31px/1.2 var(--brand-font); letter-spacing: 0; }
.stat-note, .kpi-sub { color: #a7a7ae; font-size: 11px; }
.section-head { margin-bottom: 16px; }
.section-head h2 { margin: 0; }
.grid-two { gap: 16px; }
.client-card { background: #222226; border: 1px solid #35353a; border-radius: 14px; padding: 15px 17px; }
.client-card:hover { border-color: #795158; }
.client-name { font-weight: 650; }
.initial { border-radius: 11px; background: #372327; color: #f2c0c5; }
.pill { border-color: #47474b; color: #d4d4d8; }
.pill.good { color: #afd9bf; border-color: #3d6550; }
.empty { border: 1px dashed #414147; border-radius: 13px; }
.sep { background: #343437; }
.field>label { color: #dbdbde; font-size: 12px; }
.field input, .field select, .field textarea, .search { border: 1px solid #414147; border-radius: 12px; background: #101012; min-height: 44px; }
.field input:hover, .field select:hover, .field textarea:hover, .search:hover { border-color: #626269; }
.field input:focus, .field select:focus, .field textarea:focus, .search:focus { border-color: var(--red); outline: 1px solid var(--red); outline-offset: 0; }
.table th { color: #afafb6; border-bottom: 1px solid #38383a; }
.table td { border-bottom: 1px solid #2d2d31; }
.table th, .table td { padding: 12px 10px; }
.table tbody tr:hover { background: #202025; }
.surface-tag { background: #25252a; }
.chart .line { stroke: #df444c; stroke-width: 2.8; }
.chart .area { fill: #b42f39; fill-opacity: .08; }
.chart .grid { stroke: #34343a; }
.chart .dot { fill: #df444c; }
.bar > div { background: var(--red); }
.feed { border-bottom-color: #303035; }
.note { background: #241a1d; border-color: #613139; }
.notice { background: #222226; border-color: #404046; }
.login { background: #090909; }
.login-card { background: #171719; border: 1px solid #38383c; border-radius: 23px; box-shadow: 0 28px 90px #0009; padding: 36px; }
.login-card .brand-lockup { margin-bottom: 35px; padding-bottom: 27px; border-bottom: 1px solid #343439; }
.login-card .brand-name { font-size: 30px; }
.login-card .brand-logo { width: 61px; height: 67px; }
.login-card .brand-rule { max-width: 180px; }
.login-card .brand-subtitle { font-size: 10px; }
.login-card h1 { font-size: 31px; }
.login-card .sub { margin-bottom: 24px; }
.modal { background: #1c1c1f; border-color: #424248; border-radius: 22px; }
.cred { background: #101013; border-color: #3a3a40; }
.footer { color: #88888f; border-top: 1px solid #28282c; padding-top: 20px; margin-top: 36px; }
.toast { background: #252528; border-color: #626267; }

/* Scaling: stable spacing on tablets and phones. */
@media (max-width: 1120px) {
  .sidebar { width: 234px; flex-basis: 234px; padding: 23px 13px; }
  .sidebar .brand-name { font-size: 20px; }
  .sidebar .brand-logo { width: 38px; height: 45px; }
  .sidebar .brand-subtitle { font-size: 7.6px; }
  .main { padding: 32px 26px 75px; }
}
@media (max-width: 720px) {
  .mobilebar { background: #111113; border-bottom-color: #2d2d31; padding: 10px 15px; }
  .mobilebar .brand-lockup { gap: 8px; }
  .mobilebar .brand-logo { width: 33px; height: 38px; }
  .mobilebar .brand-name { font-size: 18px; }
  .mobilebar .brand-rule { max-width: 110px; height: 2px; }
  .mobilebar .brand-subtitle { font-size: 6.5px; }
  .mobilebar select { background: #252529; border-color: #414145; }
  .main { padding: 25px 16px 78px; }
  .top { gap: 15px; margin-bottom: 22px; }
  .top h1 { font-size: 35px; }
  .panel { padding: 16px; border-radius: 17px; }
  .kpis > .panel { min-height: 118px; padding: 16px; }
  .stat-value { font-size: 27px; }
  .login-card { padding: 25px 22px; }
  .login-card .brand-name { font-size: 25px; }
  .login-card .brand-logo { width: 48px; height: 54px; }
  .login-card .brand-subtitle { font-size: 8px; }
}
@media (max-width: 420px) {
  .mobilebar .brand-subtitle { display: none; }
  .mobilebar .brand-rule { max-width: 105px; }
  .mobilebar .brand-name { font-size: 17px; }
  .mobilebar .btn.tiny { padding: 8px 10px; }
  .mobilebar .btn-row { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}