/* ── Каркас amoCRM-вида: тёмный левый рельс + контент ─────────────────────── */
body.appv2 { background: var(--bg); margin: 0; }

.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: 76px; z-index: 100;
  background: var(--dark); display: flex; flex-direction: column; align-items: center;
  padding: 10px 0; box-shadow: 2px 0 12px rgba(0,0,0,.18);
}
.rail-brand {
  width: 42px; height: 42px; border-radius: 12px; background: var(--teal);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 800; font-size: 20px; text-decoration: none; margin-bottom: 14px; flex: 0 0 auto;
}
.rail-brand:hover { text-decoration: none; filter: brightness(1.08); }
.rail-nav { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: none; }
.rail-nav::-webkit-scrollbar { width: 0; height: 0; }
.rail-item {
  position: relative; width: 64px; padding: 8px 2px 6px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: rgba(255,255,255,.55); text-decoration: none; transition: .14s;
}
.rail-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.rail-item.active { background: rgba(255,255,255,.12); color: #fff; }
.rail-item.active::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 26px; border-radius: 0 4px 4px 0; background: var(--teal);
}
.rail-ico { width: 24px; height: 24px; }
.rail-ico svg { width: 24px; height: 24px; display: block; }
.rail-emoji { font-size: 20px; line-height: 24px; display: block; }
.rail-label { font-size: 10px; font-weight: 600; letter-spacing: .1px; line-height: 1.1; text-align: center; }
.rail-badge {
  position: absolute; top: 3px; right: 10px; min-width: 17px; height: 17px; padding: 0 4px;
  background: #ef4444; color: #fff; border-radius: 9px; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--dark);
}
.rail-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; }
.rail-langs { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.rail-langs a { font-size: 10px; font-weight: 800; color: rgba(255,255,255,.4); text-decoration: none; padding: 1px 5px; border-radius: 5px; }
.rail-langs a.on { color: #fff; background: rgba(255,255,255,.14); }
.rail-logout {
  margin-top: 2px; width: 40px; height: 40px; border-radius: 10px; color: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center; transition: .14s;
}
.rail-logout svg { width: 22px; height: 22px; }
.rail-logout:hover { background: rgba(239,68,68,.18); color: #fca5a5; }

.appmain { margin-left: 76px; min-height: 100vh; display: flex; flex-direction: column; }
.apptop {
  height: 56px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  position: sticky; top: 0; z-index: 50;
}
.apptitle { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.apptop-r { display:flex; align-items:center; gap:14px; }
.apptop-branch { border:1px solid var(--border); border-radius:9px; padding:6px 10px; font:inherit; font-size:13px; font-weight:600; background:#fff; outline:none; cursor:pointer; max-width:220px; }
.apptop-branch:focus { border-color:var(--teal); }
.legacy-top { position: fixed; top: 0; left: 76px; right: 0; height: 46px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; padding: 0 20px; z-index: 60; }
@media (max-width: 640px) { .legacy-top { left: 60px; } }
.apptop-langs { display: flex; gap: 2px; }
.apptop-langs a { font-size: 11px; font-weight: 800; color: var(--muted); text-decoration: none; padding: 3px 7px; border-radius: 6px; }
.apptop-langs a.on { color: #fff; background: var(--teal); }
.apptop-user { font-size: 13px; color: var(--muted); font-weight: 600; }
.apptop-role { color: var(--teal); font-weight: 800; }
.appbody { padding: 22px 24px; flex: 1; }

/* Карточки Рабочего стола */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; margin-bottom: 22px; }
.dash-kpi { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.dash-kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.dash-kpi .l { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.dash-kpi.warn .v { color: var(--danger); }
.dash-kpi.ok .v { color: var(--success); }
.dash-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.dash-card h2 { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.dash-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.dash-row:last-child { border-bottom: none; }
.dash-row .nm { font-weight: 600; font-size: 13.5px; }
.dash-row .am { font-weight: 800; color: var(--success); font-size: 13px; }

@media (max-width: 640px) {
  .rail { width: 60px; }
  .rail-item, .rail-brand { width: 50px; }
  .rail-label { display: none; }
  .appmain { margin-left: 60px; }
  .appbody { padding: 16px 14px; }
}