/* ИзиСайт Админ — брендбук: Onest, #4F7DFF, светлый premium SaaS */
:root {
  --blue: #4F7DFF;
  --blue-dark: #3B63D9;
  --blue-soft: #EDF2FF;
  --bg: #F6F8FC;
  --card: #FFFFFF;
  --text: #101828;
  --text-2: #475467;
  --text-3: #98A2B3;
  --border: #EAECF2;
  --green: #12B76A;
  --green-soft: #ECFDF3;
  --red: #F04438;
  --red-soft: #FEF3F2;
  --amber: #F79009;
  --amber-soft: #FFFAEB;
  --violet: #7A5AF8;
  --violet-soft: #F4F1FE;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.05);
  --shadow-lg: 0 8px 40px rgba(16,24,40,.12);
  --r: 16px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family:'Onest',-apple-system,sans-serif;
  background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.hidden { display:none !important; }
.muted { color:var(--text-3); font-weight:500; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- login ---------- */
.login-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(600px 400px at 20% 0%, rgba(79,125,255,.10), transparent),
    radial-gradient(600px 400px at 85% 100%, rgba(122,90,248,.08), transparent),
    var(--bg);
  padding:20px;
}
.login-card {
  width:100%; max-width:400px; background:var(--card);
  border:1px solid var(--border); border-radius:24px;
  padding:40px 36px; box-shadow:var(--shadow-lg); text-align:center;
}
.login-logo { margin-bottom:16px; }
.logo-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:14px;
  background:linear-gradient(135deg,var(--blue),#6E9AFF);
  color:#fff; font-weight:800; font-size:22px;
  box-shadow:0 6px 20px rgba(79,125,255,.35);
}
.login-card h1 { font-size:22px; font-weight:700; margin-bottom:4px; }
.login-sub { color:var(--text-3); margin-bottom:28px; }
.login-card form { text-align:left; display:flex; flex-direction:column; gap:14px; }
.login-card label { font-size:13px; font-weight:600; color:var(--text-2); display:flex; flex-direction:column; gap:6px; }
.login-card input {
  font-family:inherit; font-size:15px; padding:11px 14px;
  border:1px solid var(--border); border-radius:12px; background:#FBFCFE;
  outline:none; transition:border .15s, box-shadow .15s;
}
.login-card input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(79,125,255,.12); background:#fff; }
.login-error { background:var(--red-soft); color:var(--red); font-size:13px; padding:10px 14px; border-radius:10px; }

/* ---------- buttons ---------- */
.btn {
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  border:none; border-radius:999px; padding:10px 20px;
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  transition:all .15s; white-space:nowrap;
}
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(79,125,255,.30); }
.btn-primary:hover { background:var(--blue-dark); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--text-2); border:1px solid var(--border); }
.btn-ghost:hover { background:#F2F4F8; }
.btn-danger { background:var(--red-soft); color:var(--red); }
.btn-danger:hover { background:#fde0dd; }
.btn-sm { padding:6px 14px; font-size:13px; }
.btn-block { width:100%; padding:12px; font-size:15px; }
.btn:disabled { opacity:.5; cursor:default; transform:none; }

/* ---------- layout ---------- */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:232px; flex-shrink:0; background:var(--card);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; padding:20px 14px;
}
.sidebar-logo { display:flex; align-items:center; gap:11px; padding:4px 10px 20px; }
.sidebar-logo b { font-size:15.5px; display:block; line-height:1.2; }
.sidebar-logo small { color:var(--text-3); font-size:12px; }
.nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.nav a {
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:12px;
  color:var(--text-2); font-weight:500; font-size:14px;
  transition:all .12s; text-decoration:none;
}
.nav a:hover { background:#F4F6FB; color:var(--text); text-decoration:none; }
.nav a.active { background:var(--blue-soft); color:var(--blue); font-weight:600; }
.nav-ic { width:18px; text-align:center; font-size:14px; opacity:.85; }
.sidebar-foot { display:flex; flex-direction:column; gap:10px; padding:14px 10px 0; border-top:1px solid var(--border); }
.foot-link { font-size:13px; color:var(--text-3); }

.main { flex:1; min-width:0; }
.page { max-width:1200px; margin:0 auto; padding:32px 36px 64px; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.page-head h2 { font-size:24px; font-weight:700; letter-spacing:-.01em; }
.page-head .sub { color:var(--text-3); margin-top:2px; font-size:13.5px; }
.head-actions { display:flex; gap:10px; align-items:center; }

/* ---------- cards & grids ---------- */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); }
.card-pad { padding:20px 22px; }
.card h3 { font-size:15px; font-weight:700; margin-bottom:14px; }
.grid { display:grid; gap:16px; }
.grid-kpi { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.grid-2 { grid-template-columns:1fr 1fr; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .grid-2,.grid-3 { grid-template-columns:1fr; } }
.mt { margin-top:16px; } .mt-lg { margin-top:24px; }

.kpi { padding:18px 20px; }
.kpi .k-label { font-size:12.5px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.kpi .k-value { font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:6px; }
.kpi .k-note { font-size:12.5px; margin-top:4px; color:var(--text-3); }
.k-up { color:var(--green); font-weight:600; }
.k-bad { color:var(--red); font-weight:600; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th {
  text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-3); padding:10px 14px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
td { padding:11px 14px; border-bottom:1px solid #F2F4F8; vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background .1s; }
tbody tr:hover { background:#FAFBFE; }
tr.clickable { cursor:pointer; }
.td-main { font-weight:600; }
.td-sub { font-size:12px; color:var(--text-3); }

/* ---------- badges ---------- */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;
  background:#F2F4F8; color:var(--text-2); white-space:nowrap;
}
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7; }
.badge.b-green { background:var(--green-soft); color:var(--green); }
.badge.b-red { background:var(--red-soft); color:var(--red); }
.badge.b-blue { background:var(--blue-soft); color:var(--blue); }
.badge.b-amber { background:var(--amber-soft); color:var(--amber); }
.badge.b-violet { background:var(--violet-soft); color:var(--violet); }
.badge.no-dot::before { display:none; }

/* ---------- inputs / search ---------- */
.input, select.input {
  font-family:inherit; font-size:14px; padding:9px 14px;
  border:1px solid var(--border); border-radius:12px; background:var(--card);
  outline:none; transition:border .15s, box-shadow .15s; color:var(--text);
}
.input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(79,125,255,.12); }
.search { min-width:260px; }

/* ---------- charts ---------- */
.chart-box { position:relative; height:220px; }
.chart-box.sm { height:170px; }

/* ---------- modal ---------- */
.modal-overlay {
  position:fixed; inset:0; background:rgba(16,24,40,.45);
  display:flex; align-items:center; justify-content:center; z-index:100;
  backdrop-filter:blur(3px); padding:20px;
  animation:fade .15s;
}
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal {
  background:var(--card); border-radius:20px; padding:28px;
  width:100%; max-width:440px; box-shadow:var(--shadow-lg);
  animation:pop .18s;
}
@keyframes pop { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }
.modal h3 { font-size:17px; margin-bottom:18px; }
.modal .form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.modal .form-row label { font-size:13px; font-weight:600; color:var(--text-2); }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* ---------- toast ---------- */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--text); color:#fff; padding:11px 22px; border-radius:999px;
  font-size:14px; font-weight:500; box-shadow:var(--shadow-lg); z-index:200;
  animation:pop .2s;
}
.toast.err { background:var(--red); }

/* ---------- misc ---------- */
.funnel-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.funnel-label { width:210px; font-size:13.5px; font-weight:600; color:var(--text-2); flex-shrink:0; }
.funnel-bar-wrap { flex:1; background:#F2F4F8; border-radius:999px; height:26px; position:relative; overflow:hidden; }
.funnel-bar { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue),#7A9DFF); transition:width .4s; }
.funnel-val { position:absolute; right:12px; top:0; line-height:26px; font-size:12.5px; font-weight:700; }

.detail-grid { display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:start; }
@media (max-width:1000px){ .detail-grid { grid-template-columns:1fr; } }
.kv { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #F2F4F8; font-size:13.5px; }
.kv:last-child { border-bottom:none; }
.kv b { text-align:right; }
.kv .lab { color:var(--text-3); }

.back-link { display:inline-flex; align-items:center; gap:6px; color:var(--text-3); font-size:13px; margin-bottom:10px; font-weight:500; }
.empty { text-align:center; color:var(--text-3); padding:36px 0; font-size:14px; }
.loading { text-align:center; color:var(--text-3); padding:60px 0; }
.spin {
  display:inline-block; width:22px; height:22px; border-radius:50%;
  border:3px solid var(--blue-soft); border-top-color:var(--blue);
  animation:sp .7s linear infinite;
}
@keyframes sp { to { transform:rotate(360deg);} }

.pill-tabs { display:inline-flex; background:#EFF1F6; border-radius:999px; padding:3px; gap:2px; }
.pill-tabs button {
  font-family:inherit; border:none; background:transparent; cursor:pointer;
  padding:6px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--text-2);
}
.pill-tabs button.on { background:#fff; color:var(--text); box-shadow:var(--shadow); }

.svc-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #F2F4F8; }
.svc-row:last-child { border-bottom:none; }
.mono { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12.5px; }
.err-text { color:var(--red); font-size:12.5px; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- mobile bar (скрыта на десктопе) ---------- */
.mobile-bar { display:none; }
.sidebar-backdrop { display:none; }
.logo-badge.sm { width:30px; height:30px; font-size:16px; border-radius:9px; box-shadow:none; }

/* ======================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (Telegram WebApp / телефоны ~375-430px)
   ====================================================================== */
@media (max-width:768px) {
  body { font-size:14.5px; }

  /* верхняя шапка с бургером */
  .mobile-bar {
    display:flex; align-items:center; gap:12px;
    position:fixed; top:0; left:0; right:0; height:54px; z-index:60;
    background:var(--card); border-bottom:1px solid var(--border);
    padding:0 14px; padding-top:env(safe-area-inset-top);
    box-shadow:0 1px 8px rgba(16,24,40,.05);
  }
  .mobile-title { font-weight:700; font-size:15px; display:flex; align-items:center; gap:9px; }
  .mobile-title small { color:var(--text-3); font-weight:500; font-size:12px; }
  .burger {
    width:40px; height:40px; border:none; background:transparent; cursor:pointer;
    display:flex; flex-direction:column; justify-content:center; gap:5px; padding:8px;
    border-radius:10px;
  }
  .burger span { display:block; height:2.5px; border-radius:2px; background:var(--text); transition:.2s; }

  /* сайдбар -> выезжающий drawer */
  .app { display:block; }
  .sidebar {
    position:fixed; top:0; bottom:0; left:0; height:100%; width:270px; z-index:80;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 10px 40px rgba(16,24,40,.25); padding-top:calc(20px + env(safe-area-inset-top));
  }
  body.nav-open .sidebar { transform:translateX(0); }
  .sidebar-backdrop {
    display:block; position:fixed; inset:0; z-index:70;
    background:rgba(16,24,40,.4); opacity:0; pointer-events:none; transition:opacity .2s;
    backdrop-filter:blur(2px);
  }
  body.nav-open .sidebar-backdrop { opacity:1; pointer-events:auto; }
  .nav a { padding:12px 14px; font-size:15px; }        /* крупнее тапы */

  /* контент под шапкой */
  .main { padding-top:54px; }
  .page { padding:16px 14px 56px; max-width:100%; }

  /* заголовки страниц */
  .page-head { flex-direction:column; align-items:stretch; gap:12px; margin-bottom:18px; }
  .page-head h2 { font-size:20px; }
  .head-actions { flex-wrap:wrap; }
  .search, .input.search { min-width:0; width:100%; }
  select.input, .input { width:100%; }
  .head-actions .btn { flex:1; }

  /* KPI и сетки в один столбец */
  .grid-kpi { grid-template-columns:1fr 1fr; gap:12px; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .kpi { padding:14px 15px; }
  .kpi .k-value { font-size:22px; }
  .card-pad { padding:16px; }

  /* графики компактнее */
  .chart-box { height:190px; }
  .chart-box.sm { height:150px; }

  /* таблицы скроллятся по горизонтали, тап-строки */
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { font-size:13px; min-width:520px; }
  th, td { padding:9px 11px; }
  .err-text { max-width:180px; }

  /* карточка пользователя/проекта в один столбец */
  .detail-grid { grid-template-columns:1fr; }
  .funnel-label { width:130px; font-size:12.5px; }

  /* кнопки крупнее для пальца */
  .btn { padding:11px 18px; }
  .btn-sm { padding:8px 14px; }

  /* модалка на всю ширину снизу */
  .modal { max-width:100%; padding:22px 18px; border-radius:18px; }
  .modal-overlay { padding:12px; align-items:flex-end; }

  .pill-tabs { flex-wrap:wrap; }
}

/* очень узкие экраны — KPI в один столбец */
@media (max-width:420px) {
  .grid-kpi { grid-template-columns:1fr; }
}