/* ==========================================================================
   PEPEL PRO / ФЕНИКС — design system
   Black canvas + ember orange + ash gold + phoenix glow
   ========================================================================== */
:root{
  --bg-0:#05060a;
  --bg-1:#0a0c12;
  --bg-2:#11131c;
  --bg-3:#171a26;
  --line:rgba(255,255,255,0.07);
  --line-soft:rgba(255,255,255,0.04);
  --text:#f3ece1;
  --text-dim:#a39a8d;
  --muted:#6b6358;

  --ember:#ff5b1f;
  --ember-2:#ff8a3d;
  --ash-gold:#f2c66b;
  --crimson:#c91d3a;
  --phoenix-violet:#7a3bff;
  --cyan:#37e1ff;
  --ok:#3fd28b;
  --warn:#f2c66b;
  --bad:#ff4d6d;

  --grad-phoenix: linear-gradient(135deg,#ff5b1f 0%,#ff8a3d 40%,#f2c66b 100%);
  --grad-ash: linear-gradient(180deg,#0a0c12 0%,#05060a 100%);
  --grad-card: linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  --grad-glow: radial-gradient(circle at 50% 0%, rgba(255,91,31,0.25), transparent 60%);

  --shadow-sm:0 4px 16px rgba(0,0,0,0.4);
  --shadow-md:0 10px 32px rgba(0,0,0,0.55);
  --shadow-lg:0 24px 64px rgba(0,0,0,0.7);
  --shadow-glow:0 0 32px rgba(255,91,31,0.35);
  --shadow-glow-soft:0 0 18px rgba(255,138,61,0.22);

  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  --t-fast: 160ms cubic-bezier(.2,.7,.2,1);
  --t-med:  280ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 520ms cubic-bezier(.2,.7,.2,1);

  --font-display:'Manrope','Inter','SF Pro Display',system-ui,sans-serif;
  --font-body:'Inter','SF Pro Text',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg-0);color:var(--text);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{min-height:100vh;overflow-x:hidden;}

::selection{background:rgba(255,91,31,0.35);color:#fff;}

a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg-1);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2a2f3b,#1a1d27);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--ember),#a73a13);}

/* ============= Utility ============= */
.container{max-width:1440px;margin:0 auto;padding:0 32px;}
.row{display:flex;gap:16px;flex-wrap:wrap;}
.col{flex:1;min-width:0;}
.grid{display:grid;gap:16px;}
.center{display:flex;align-items:center;justify-content:center;}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.muted{color:var(--text-dim);}
.dim{color:var(--muted);}
.mono{font-family:var(--font-mono);}
.eyebrow{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-dim);font-weight:600;}
.gradient-text{background:var(--grad-phoenix);-webkit-background-clip:text;background-clip:text;color:transparent;}
.kbd{font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,0.05);border:1px solid var(--line);color:var(--text-dim);}

/* ============= Headings ============= */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-0.01em;margin:0;}
h1{font-size:clamp(40px,5vw,72px);line-height:1.05;letter-spacing:-0.025em;}
h2{font-size:clamp(22px,2.2vw,34px);line-height:1.15;}
h3{font-size:18px;line-height:1.25;}
h4{font-size:14px;font-weight:600;}

/* ============= Buttons ============= */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,0.03);color:var(--text);
  font-weight:600;font-size:13px;letter-spacing:0.02em;cursor:pointer;
  transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);}
.btn:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--grad-phoenix);border:none;color:#0a0a0a;font-weight:700;
  box-shadow:var(--shadow-glow);}
.btn-primary:hover{box-shadow:0 0 48px rgba(255,91,31,0.55);transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:var(--line);}
.btn-dark{background:#0a0c12;border:1px solid var(--line);}
.btn-icon{padding:10px;border-radius:12px;}
.btn-sm{padding:8px 14px;font-size:12px;}
.btn-lg{padding:16px 28px;font-size:14px;}
.btn-full{width:100%;justify-content:center;}

/* ============= Card / Surface ============= */
.surface{background:var(--grad-card);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.card{background:var(--grad-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:border-color var(--t-fast),transform var(--t-fast);}
.card:hover{border-color:rgba(255,138,61,0.25);}
.card-pad-sm{padding:16px;}
.card-glow{position:relative;overflow:hidden;}
.card-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(255,91,31,0.5),transparent 40%,rgba(242,198,107,0.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}

/* ============= Form ============= */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);font-weight:600;}
.input,.select,textarea.input{
  width:100%;padding:14px 16px;background:rgba(255,255,255,0.03);border:1px solid var(--line);
  border-radius:var(--r-md);color:var(--text);font-size:14px;outline:none;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);}
.input:focus,.select:focus,textarea.input:focus{
  border-color:rgba(255,138,61,0.55);background:rgba(255,138,61,0.06);box-shadow:0 0 0 4px rgba(255,91,31,0.12);}
.input::placeholder{color:var(--muted);}

/* ============= Badges & Pills ============= */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;letter-spacing:0.04em;background:rgba(255,255,255,0.05);
  border:1px solid var(--line);color:var(--text-dim);}
.badge-ok{background:rgba(63,210,139,0.12);color:#7be5ad;border-color:rgba(63,210,139,0.25);}
.badge-warn{background:rgba(242,198,107,0.12);color:#f2c66b;border-color:rgba(242,198,107,0.25);}
.badge-bad{background:rgba(255,77,109,0.12);color:#ff8a9e;border-color:rgba(255,77,109,0.25);}
.badge-ember{background:rgba(255,91,31,0.14);color:#ffb38a;border-color:rgba(255,91,31,0.3);}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px currentColor;}

/* ============= Topbar ============= */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:14px 28px;background:rgba(5,6,10,0.72);backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:0.02em;}
.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--grad-phoenix);box-shadow:var(--shadow-glow-soft);font-size:18px;}
.brand-name{font-family:var(--font-display);font-size:16px;}
.brand-name b{font-weight:800;}
.brand-name span{color:var(--text-dim);font-weight:500;margin-left:6px;font-size:13px;}
.topbar .spacer{flex:1;}

/* ============= App shell (hub) ============= */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh;}
.sidebar{position:sticky;top:0;height:100vh;padding:18px 14px;border-right:1px solid var(--line);
  background:linear-gradient(180deg,#08090f 0%,#05060a 100%);overflow-y:auto;}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:8px 10px 16px;}
.nav-section{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);
  padding:18px 12px 8px;font-weight:700;}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;
  color:var(--text-dim);font-size:13px;font-weight:500;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);}
.nav-item:hover{background:rgba(255,255,255,0.04);color:var(--text);}
.nav-item.active{background:linear-gradient(90deg,rgba(255,91,31,0.18),rgba(255,91,31,0.04));
  color:var(--text);position:relative;}
.nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:var(--grad-phoenix);border-radius:0 4px 4px 0;}
.nav-item .ico{font-size:16px;width:22px;text-align:center;}
.nav-item .nav-badge{margin-left:auto;font-size:10px;padding:2px 6px;border-radius:6px;
  background:rgba(255,91,31,0.2);color:#ffb38a;font-weight:700;}
.main{padding:28px clamp(24px,3vw,56px) 80px;width:100%;min-width:0;}

/* Section header */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:24px;flex-wrap:wrap;}
.section-head h1{font-size:36px;}
.section-head .desc{color:var(--text-dim);font-size:14px;max-width:560px;}

/* ============= KPI tiles ============= */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.kpi{padding:20px;border-radius:var(--r-lg);background:var(--grad-card);border:1px solid var(--line);
  position:relative;overflow:hidden;}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;
  background:radial-gradient(circle,rgba(255,91,31,0.18),transparent 60%);pointer-events:none;}
.kpi .label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.kpi .value{font-family:var(--font-display);font-size:32px;font-weight:800;margin-top:8px;letter-spacing:-0.02em;}
.kpi .delta{font-size:12px;color:var(--ok);font-weight:600;margin-top:6px;}
.kpi .delta.down{color:var(--bad);}

/* ============= Tables ============= */
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{text-align:left;padding:12px 14px;font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);font-weight:700;}
.data-table td{padding:14px;border-bottom:1px solid var(--line-soft);}
.data-table tr:hover td{background:rgba(255,255,255,0.02);}

/* ============= Animated background grid ============= */
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);}
.bg-ember{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(800px 600px at 80% 10%,rgba(255,91,31,0.18),transparent 60%),
    radial-gradient(700px 600px at 10% 90%,rgba(122,59,255,0.13),transparent 60%),
    var(--bg-0);}

/* ============= Animations ============= */
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,91,31,0.5);}
  50%{box-shadow:0 0 40px 8px rgba(255,91,31,0.0);}}
@keyframes rise{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes spin360{to{transform:rotate(360deg);}}
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;}
.rise-1{animation-delay:.05s;}.rise-2{animation-delay:.15s;}.rise-3{animation-delay:.25s;}
.rise-4{animation-delay:.35s;}.rise-5{animation-delay:.45s;}

/* ============= Responsive ============= */
@media (max-width:1024px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:-280px;transition:left var(--t-med);z-index:80;width:260px;}
  .sidebar.open{left:0;}
  .main{padding:20px;}
}

/* ============================================================
   MOBILE (≤780px) — единый блок для всех hub-страниц (Classic UI).
   Решает: пустоту сверху, горизонтальный скролл, KPI/funnel/grid.
   ============================================================ */
@media (max-width:780px){
  /* 1) Глобально запрещаем горизонтальный скролл */
  html, body{ overflow-x:hidden !important; max-width:100vw; }
  body{ position:relative; }
  *{ max-width:100vw; }
  img, canvas, svg, video{ max-width:100%; height:auto; }

  /* 2) App-shell на мобиле */
  .app{ grid-template-columns:1fr !important; min-height:auto; }
  .sidebar{ position:fixed; left:-280px; width:260px; transition:left .25s; z-index:80; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .sidebar.open{ left:0; box-shadow:0 20px 60px rgba(0,0,0,.6); }

  /* 3) .main: компактные паддинги, без overflow */
  .main{
    padding:8px 12px 60px !important;
    max-width:100vw;
    overflow-x:hidden;
  }

  /* 4) Перебиваем inline negative margin у topbar в marketing/production hub */
  .main > header.topbar,
  .main > .topbar{
    position:relative !important;
    margin:0 0 12px !important;
    border-radius:14px !important;
    padding:8px 10px !important;
    gap:8px !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    flex-wrap:wrap;
  }
  .topbar .brand{ font-size:13px; gap:8px; min-width:0; flex:1; }
  .topbar .brand-name{ font-size:14px; }
  .topbar .brand .muted{ display:none; }
  .topbar .badge, .topbar .badge-ok{ display:none !important; }
  .topbar .row{ gap:6px !important; flex-wrap:wrap; }
  .topbar .btn{ font-size:11px; padding:8px 10px; }

  /* 5) Section-head компактнее, кнопки во всю ширину */
  .section-head{ gap:10px; margin-bottom:14px; }
  .section-head h1{ font-size:22px !important; line-height:1.15; }
  .section-head .desc{ font-size:12.5px; }
  .section-head .row{ width:100%; gap:8px; }
  .section-head .row .btn{ flex:1; min-width:0; font-size:12px; padding:9px 10px; }

  /* 6) KPI-тайлы: 2 колонки на средних, 1 — на узких */
  .kpi-grid{ grid-template-columns: repeat(2,1fr) !important; gap:10px !important; }
  .kpi{ padding:12px !important; }
  .kpi .label{ font-size:10px; letter-spacing:0.14em; }
  .kpi .value{ font-size:20px !important; margin-top:6px; }
  .kpi .delta{ font-size:11px; }
  .kpi::after{ width:80px; height:80px; right:-20px; top:-20px; }

  /* 7) Inline grid-template-columns с большим minmax → 1 колонка */
  [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  .src-grid, .map-stats, .obj-pick, .quick-form, .photo-grid, .two-col, .own-grid{
    grid-template-columns: 1fr !important;
  }

  /* 8) Воронка лидов: горизонтальный snap-скролл внутри карточки */
  .funnel{
    display:grid !important;
    grid-template-columns: repeat(5, minmax(78px,1fr)) !important;
    gap:6px !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:4px;
  }
  .funnel .stage{ padding:10px 6px !important; scroll-snap-align:start; }
  .funnel .stage .v{ font-size:18px !important; }
  .funnel .stage .l{ font-size:9px !important; letter-spacing:0.08em !important; }

  /* 9) Источники / карты / календарь */
  .src{ padding:12px !important; gap:10px; }
  .src .icon{ width:38px; height:38px; font-size:16px; }
  .src .val{ font-size:14px !important; }
  .src .meta{ font-size:11px; }
  .map-stub{ height:240px !important; }
  .calendar{ gap:4px !important; }
  .day{ padding:4px !important; font-size:9px !important; border-radius:8px !important; }

  /* 10) obj-row / dept-row — без 5 узких колонок */
  .obj-row{ grid-template-columns:1fr auto !important; row-gap:6px; }
  .dept-row .bar{ width:80px !important; }

  /* 11) Карточки/таблицы компактные */
  .card{ padding:14px !important; border-radius:14px !important; }
  .card h2, .card h3{ font-size:16px !important; }
  .data-table, table.pnl{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; max-width:100%; }

  /* 12) Длинные id / email / урлы — переносить */
  .obj-row, .dept-row, .data-table, .kpi, .card, .src{ word-break:break-word; overflow-wrap:anywhere; }

  /* 13) Любые inline width / max-width не вылезают за viewport */
  [style*="width:"]:not(.fill):not(.bar i){ max-width:100% !important; }
}

/* ============================================================
   MOBILE v2 — фиксы для estimator/foreman (без .main, есть <main>)
   ============================================================ */
@media (max-width:780px){
  /* 1) <main> с inline padding:32px — перебиваем */
  body > main[style*="padding"]{
    padding:8px 12px 60px !important;
    max-width:100vw !important;
  }
  body > main{ max-width:100vw !important; overflow-x:hidden; }

  /* 2) Topbar на estimator/foreman: sticky → relative и компактный */
  body > header.topbar{
    position:relative !important;
    padding:8px 12px !important;
    gap:8px !important;
    flex-wrap:wrap;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  body > header.topbar .badge{ display:none !important; }
  body > header.topbar .brand-name span{ display:none; }
  body > header.topbar .row .btn{ font-size:11px; padding:8px 10px; }

  /* 3) Estimate-table → card view (читается на узких экранах) */
  .estimate-table{ display:block; width:100%; }
  .estimate-table thead{ display:none; }
  .estimate-table tbody{ display:block; }
  .estimate-table tr{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "name name"
      "qty price"
      "sum  sum";
    gap:4px 10px;
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,0.02);
    border-radius:10px;
    margin-bottom:6px;
  }
  .estimate-table tr.group{
    display:block;
    background:rgba(255,91,31,0.08) !important;
    color:#ff8a3d !important;
    padding:8px 12px !important;
    border-radius:8px;
    margin:10px 0 4px;
  }
  .estimate-table tr.group td{ display:block !important; padding:0 !important; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; }
  .estimate-table td{
    display:block;
    padding:0 !important;
    border:none !important;
    text-align:left !important;
    font-size:13px;
  }
  .estimate-table td:nth-child(1){ grid-area:name; font-weight:600; }
  .estimate-table td:nth-child(2){ display:none; /* единица — внутри qty показываем */ }
  .estimate-table td:nth-child(3){ grid-area:qty; color:var(--text-dim); font-size:12px; }
  .estimate-table td:nth-child(3)::before{ content:"Кол-во: "; color:var(--muted); }
  .estimate-table td:nth-child(4){ grid-area:price; color:var(--text-dim); font-size:12px; text-align:right !important; }
  .estimate-table td:nth-child(4)::before{ content:"Цена: "; color:var(--muted); }
  .estimate-table td:nth-child(5){ grid-area:sum; font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff; padding-top:4px !important; border-top:1px dashed rgba(255,255,255,0.06) !important; margin-top:4px; }
  .estimate-table td:nth-child(5)::before{ content:"Сумма: "; color:var(--muted); font-weight:500; font-size:11px; }

  /* 4) Универсальный data-table → card view */
  .data-table{ display:block; }
  .data-table thead{ display:none; }
  .data-table tbody, .data-table tr{ display:block; }
  .data-table tr{ padding:10px 12px; background:rgba(255,255,255,0.02); border-radius:10px; margin-bottom:6px; border:1px solid var(--line); }
  .data-table td{ display:flex; justify-content:space-between; padding:4px 0 !important; border:none !important; font-size:13px; gap:10px; }
  .data-table td::before{ content:attr(data-label); color:var(--muted); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }

  /* 5) Карта объектов: разумная высота, проследим что не плывёт */
  #objectsMap{ height:380px !important; }
  .leaflet-container{ font-size:12px; }

  /* 6) Map toolbar — кнопки во всю ширину рядами */
  .map-toolbar{ gap:6px !important; }
  .map-toolbar .chip{ font-size:11px; padding:6px 10px; }

  /* 7) Скрываем bg-grid mask, чтобы фон не казался "пустым" */
  .bg-grid{ background-size:32px 32px; opacity:.4; }

  /* 8) FAB настроек на странице входа — на мобиле прячем (страховка) */
  .lgx-fab{ display:none !important; }
}

/* === Убираем дубль бургера: floating .dlx-fab-sidebar отключаем,
       оставляем единственную кнопку ☰ в topbar === */
.dlx-fab-sidebar{ display:none !important; }
.dlx-edge-trigger{ display:none !important; }