:root{
  color-scheme: light;
  --bg-page:      #f6f8fb;
  --bg-surface:   #ffffff;
  --bg-raised:    #ffffff;
  --ink:          #0b0b0b;
  --ink-secondary:#52514e;
  --ink-muted:    #898781;
  --gridline:     #e4e8ee;
  --border:       rgba(11,11,11,0.10);
  --accent:       #1e88e5;
  --accent-soft:  #e6f2fd;
  --good:         #0ca30c;
  --good-soft:    #e6f6e6;
  --warning:      #b8790a;
  --warning-soft: #fdf1da;
  --serious:      #c1552c;
  --serious-soft: #fbe9e1;
  --critical:     #d03b3b;
  --critical-soft:#fbe6e6;
  --radius: 12px;
}
[data-theme="dark"]{
  color-scheme: dark;
  --bg-page:      #0d0d0d;
  --bg-surface:   #1a1a19;
  --bg-raised:    #212120;
  --ink:          #ffffff;
  --ink-secondary:#c3c2b7;
  --ink-muted:    #898781;
  --gridline:     #2c2c2a;
  --border:       rgba(255,255,255,0.10);
  --accent:       #4c9bef;
  --accent-soft:  #16283b;
  --good:         #0ca30c;
  --good-soft:    #123312;
  --warning:      #c98500;
  --warning-soft: #332a10;
  --serious:      #ec835a;
  --serious-soft: #3a2115;
  --critical:     #e66767;
  --critical-soft:#3a1414;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg-page); color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
.tabular{ font-variant-numeric: tabular-nums; }

/* ============ каркас: боковое меню + основная область ============ */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:246px; flex-shrink:0; background:var(--bg-surface); border-right:1px solid var(--gridline);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:40;
}
.sidebar-logo{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; padding:20px 20px 16px; letter-spacing:.02em; }
.sidebar-logo svg{ width:24px; height:24px; flex-shrink:0; }
.sidebar-nav{ flex:1; padding:6px 12px; display:flex; flex-direction:column; gap:2px; }
.sidebar-link{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  font-size:13.5px; color:var(--ink-secondary); cursor:pointer;
}
.sidebar-link:hover{ background:var(--accent-soft); color:var(--accent); }
.sidebar-link.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.sidebar-link .ic{ width:18px; text-align:center; flex-shrink:0; font-size:14px; line-height:1; }
.sidebar-group .chev{ margin-left:auto; font-size:10px; color:var(--ink-muted); }
.sidebar-group .sidebar-submenu{
  display:none; flex-direction:column; margin:2px 4px 6px 29px; gap:1px;
  border-left:1px solid var(--gridline); padding-left:10px;
}
.sidebar-group.open .sidebar-submenu{ display:flex; }
.sidebar-submenu a{ padding:7px 10px; border-radius:7px; font-size:13px; color:var(--ink-secondary); }
.sidebar-submenu a:hover{ background:var(--accent-soft); color:var(--accent); }
.sidebar-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); padding:16px 12px 6px; }
.sidebar-footer{ padding:10px; border-top:1px solid var(--gridline); display:flex; flex-direction:column; gap:2px; }
.sidebar-footer form{ margin:0; }
.sidebar-footer .sidebar-link{ width:100%; border:none; background:none; cursor:pointer; font-family:inherit; text-align:left; }

.sidebar-overlay{ display:none; }

.app-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* мини-шапка сверху основной области */
.topmini{
  display:flex; align-items:center; gap:14px; padding:13px 24px; background:var(--bg-surface);
  border-bottom:1px solid var(--gridline); position:sticky; top:0; z-index:20;
}
.topmini-right{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.topmini .balance{ display:flex; gap:10px; font-size:12.5px; color:var(--ink-secondary); white-space:nowrap; }
.topmini .balance b{ color:var(--ink); }
.btn.pill{ border-radius:999px; }

/* аватар/меню пользователя (используется в мини-шапке) */
.user{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-secondary); position:relative; cursor:pointer; }
.avatar{ width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.user-menu{ display:none; position:absolute; top:100%; right:0; margin-top:8px; background:var(--bg-raised); border:1px solid var(--border); border-radius:10px; padding:6px; min-width:170px; box-shadow:0 8px 24px rgba(0,0,0,0.14); z-index:30;}
.user:hover .user-menu, .user.open .user-menu{ display:block; }
.user-menu .user-email{ padding:8px 10px 6px; font-size:12px; color:var(--ink-muted); border-bottom:1px solid var(--gridline); margin-bottom:4px; word-break:break-all; }
.user-menu a, .user-menu button{ display:block; width:100%; text-align:left; padding:7px 10px; border-radius:6px; font-size:13.5px; color:var(--ink-secondary); background:none; border:none; cursor:pointer; font-family:inherit;}
.user-menu a:hover, .user-menu button:hover{ background:var(--accent-soft); color:var(--accent); }

/* гамбургер — скрыт на десктопе, показывается медиа-запросом ниже */
.nav-toggle{
  display:none; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--border); border-radius:8px; background:var(--bg-raised); color:var(--ink);
  cursor:pointer; padding:0; flex-shrink:0;
}
.nav-toggle svg{ width:20px; height:20px; }

.page{ padding:24px 28px 60px; max-width:1280px; margin:0 auto; width:100%; }
.page h1{ font-size:19px; margin:0 0 18px; }

.flash{ padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:13.5px; }
.flash.success{ background:var(--good-soft); color:var(--good); }
.flash.error{ background:var(--critical-soft); color:var(--critical); }

.filters{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.filters input, .filters select{
  border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:13px;
  background:var(--bg-raised); color:var(--ink); font-family:inherit;
}
.filters input::placeholder{ color:var(--ink-muted); }

table{ width:100%; border-collapse:collapse; background:var(--bg-surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);}
th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--gridline); }
td{ padding:11px 14px; font-size:13.5px; border-bottom:1px solid var(--gridline); color:var(--ink); vertical-align:middle;}
tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background: rgba(30,136,229,0.05); }
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.badge.good{ background:var(--good-soft); color:var(--good); }
.badge.warning{ background:var(--warning-soft); color:var(--warning); }
.badge.serious{ background:var(--serious-soft); color:var(--serious); }
.badge.critical{ background:var(--critical-soft); color:var(--critical); }
.badge.neutral{ background:var(--accent-soft); color:var(--accent); }
.toolbar{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); background:var(--bg-raised); color:var(--ink); font-size:13px;
  padding:8px 14px; border-radius:8px; cursor:pointer; font-family:inherit;
}
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.small{ padding:5px 10px; font-size:12px; }
.btn.danger{ color:var(--critical); border-color:var(--critical-soft); }
select.status-select{ border:1px solid var(--border); border-radius:6px; padding:4px 6px; font-size:12px; background:var(--bg-raised); color:var(--ink); font-family:inherit;}
.input-referral{ width:280px; max-width:100%; }

.pagination{ display:flex; gap:6px; margin-top:14px; }
.pagination a, .pagination span{ padding:6px 11px; border-radius:6px; font-size:13px; border:1px solid var(--border); color:var(--ink-secondary); }
.pagination a.current{ background:var(--accent); color:#fff; border-color:var(--accent); }

.cat-chips{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.cat-chip{ padding:7px 15px; border-radius:999px; font-size:12.5px; border:1px solid var(--border); color:var(--ink-secondary); background:var(--bg-raised);}
.cat-chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card{ border:1px solid var(--border); border-radius:var(--radius); padding:18px; background:var(--bg-surface); display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s ease, border-color .15s ease;}
.card:hover{ box-shadow:0 6px 20px rgba(11,11,11,0.06); border-color:var(--accent); }
.card .icon{ width:42px; height:42px; border-radius:11px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; color:var(--accent); font-weight:700; font-size:17px;}
.card h4{ margin:0; font-size:14.5px; }
.card .bank{ font-size:12px; color:var(--ink-muted); margin-top:-6px; }
.card .cond{ font-size:12.5px; color:var(--ink-secondary); line-height:1.4; flex:1; white-space:pre-line; }
.card .rewards{ display:flex; gap:8px; flex-wrap:wrap; }
.reward-chip{ font-size:11.5px; padding:4px 8px; border-radius:6px; background:var(--good-soft); color:var(--good); font-weight:600; }
.reward-chip.manager{ background:var(--accent-soft); color:var(--accent); }

/* карточки сотрудников/консультантов */
.consultant-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.consultant-card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-surface); padding:16px; }
.consultant-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.consultant-avatar{ width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; text-transform:uppercase;}
.consultant-name{ font-size:14px; font-weight:600; }
.consultant-role{ font-size:12px; color:var(--ink-muted); }
.consultant-fields{ display:flex; flex-direction:column; gap:7px; }
.cf{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-secondary); }
.cf b{ color:var(--ink); font-weight:600; }

/* документы */
.doc-tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.doc-tab{ padding:8px 16px; border-radius:999px; font-size:13px; border:1px solid var(--border); color:var(--ink-secondary); background:var(--bg-raised); }
.doc-tab.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.doc-list{ display:flex; flex-direction:column; gap:10px; }
.doc-row{ display:flex; align-items:center; gap:13px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-surface); transition:box-shadow .15s ease, border-color .15s ease;}
.doc-row:hover{ box-shadow:0 6px 20px rgba(11,11,11,0.06); border-color:var(--accent); }
.doc-row .doc-icon{ width:38px; height:38px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.doc-row .doc-title{ font-size:13.5px; font-weight:600; }
.doc-row .doc-sub{ font-size:12px; color:var(--ink-muted); margin-top:2px; }
.doc-row .doc-arrow{ margin-left:auto; color:var(--ink-muted); }

.form-card{ max-width:420px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-surface); padding:24px; margin:24px auto; }
.form-card h3{ margin:0 0 18px; font-size:16px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; color:var(--ink-secondary); margin-bottom:5px; }
.field input, .field select, .field textarea{ width:100%; border:1px solid var(--border); border-radius:8px; padding:9px 11px; font-size:13.5px; background:var(--bg-raised); color:var(--ink); font-family:inherit;}
.field .error{ color:var(--critical); font-size:12px; margin-top:4px; }
.consent{ display:flex; gap:8px; font-size:12px; color:var(--ink-secondary); margin:16px 0; line-height:1.4;}
.consent a{ color:var(--accent); text-decoration:underline; }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.stat-tile{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-surface); padding:14px 16px; }
.stat-tile .label{ font-size:12px; color:var(--ink-muted); display:flex; align-items:center; gap:6px; margin-bottom:6px;}
.stat-tile .value{ font-size:24px; font-weight:700; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dashboard-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.chart-card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-surface); padding:18px; }
.chart-card h4{ margin:0 0 4px; font-size:13.5px; }
.chart-card .sub{ font-size:12px; color:var(--ink-muted); margin-bottom:14px; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--ink-secondary); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.leader-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--gridline); font-size:13px; }
.leader-row:last-child{ border-bottom:none; }
.leader-bar{ flex:1; height:6px; border-radius:4px; background:var(--gridline); overflow:hidden;}
.leader-bar i{ display:block; height:100%; background:var(--accent); }

.note{ font-size:12px; color:var(--ink-muted); margin-top:16px; line-height:1.5; }

/* ============ экран входа ============ */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg-page); padding:20px; }
.login-box{ display:flex; flex-direction:column; align-items:center; width:100%; }
.login-logo{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:22px; font-weight:700; font-size:16px; letter-spacing:.04em; color:var(--ink); }
.login-logo svg{ width:42px; height:42px; }
.login-box .form-card{ margin:0; width:380px; max-width:100%; padding:28px 26px; }
.login-title{ font-size:23px; margin:0 0 6px; text-align:center; }
.login-sub{ font-size:13px; color:var(--ink-muted); text-align:center; margin:0 0 22px; }

/* ============ Мобильная адаптация ============ */
@media (max-width: 900px){
  .sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:0 0 28px rgba(0,0,0,0.18);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-overlay.show{ display:block; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:35; }
  .nav-toggle{ display:flex; }
}

@media (max-width: 720px){
  .topmini{ padding:10px 14px; gap:10px; }
  .topmini .balance{ display:none; }
  .support-btn span{ display:none; }

  .page{ padding:14px 12px 40px; }
  .page h1{ font-size:17px; }

  .filters{ flex-direction:column; align-items:stretch; }
  .filters input, .filters select{ width:100% !important; }

  .cat-chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }

  .cards-grid{ grid-template-columns:1fr; }
  .consultant-grid{ grid-template-columns:1fr; }
  .dashboard-grid{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }

  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar .btn{ justify-content:center; }

  /* таблицы -> карточки построчно, как на оригинальном сайте на мобильном */
  table, thead, tbody, th, tr, td{ display:block; }
  table{ background:none; border:none; }
  thead{ display:none; }
  tbody tr{
    background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius);
    margin-bottom:12px; overflow:hidden;
  }
  tbody tr:hover td{ background:none; }
  td{
    display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
    padding:9px 12px; border-bottom:1px solid var(--gridline); text-align:right; font-size:13px;
  }
  td:last-child{ border-bottom:none; }
  td::before{
    content: attr(data-label); font-weight:600; color:var(--ink-secondary); text-align:left; flex:0 0 auto;
  }
  td:has(input), td:has(select), td:has(form){ flex-direction:column; align-items:stretch; text-align:left; }
  td:has(input) input, td:has(select) select{ width:100%; }
  td form{ width:100%; }

  .leader-row{ flex-wrap:wrap; }
  .leader-row span[style*="width:170px"]{ width:auto !important; flex:1 1 100%; }
}