:root{--primary:#0B5FFF;--accent:#00B2A9;--text:#1A1A1A;--muted:#7a8290;--bg:#f5f7fb;--card:#fff;--border:#e6eaf0}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:13px}
.error{color:#d33}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--card);border-bottom:1px solid var(--border)}
.brand{font-size:16px}.logo{font-size:18px}
.userbox{display:flex;gap:10px;align-items:center;font-size:14px}
.btn{display:inline-block;border:none;border-radius:8px;padding:9px 16px;font-size:14px;cursor:pointer;text-decoration:none;text-align:center}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-oauth{background:#fff;border:1px solid var(--border);color:var(--text);margin:6px 0;display:block}
.btn-oauth:hover{border-color:var(--primary)}
.login{display:flex;justify-content:center;padding:60px 20px}
.login-card{width:340px;text-align:center}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin:16px}
h1{font-size:20px}h2{font-size:17px;margin-top:0}h3{font-size:15px}
.tabs{display:flex;gap:6px;padding:12px 16px 0}
.tab{background:transparent;border:none;padding:10px 16px;border-radius:8px 8px 0 0;cursor:pointer;font-size:14px;color:var(--muted)}
.tab.active{background:var(--card);color:var(--primary);font-weight:600;box-shadow:0 -1px 0 var(--border)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields label,.settings-row label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px}
input,select{padding:8px;border:1px solid var(--border);border-radius:8px;font-size:14px;color:var(--text);background:#fff}
input.saved{border-color:var(--accent);background:#eefdfb}
.upload{display:flex;align-items:center;gap:10px;margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.svc-table .qty{width:70px}.req{color:#d33}
.sc-cell{display:flex;gap:10px;flex-wrap:wrap}.sc{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:3px}
.vat{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:14px}
.totals-card{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
.totals{font-size:14px;line-height:1.9}.grand{font-size:20px;font-weight:700;color:var(--primary);margin-top:6px}
.actions{display:flex;align-items:center;gap:14px}
.pedit{width:120px}
.settings-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.divider{margin:14px 0 8px;color:var(--muted);font-size:12px}
.devlogin input{width:100%;margin-bottom:8px}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.stat{background:var(--bg);border-radius:12px;padding:14px 18px;text-align:center;min-width:120px}
.stat b{display:block;font-size:24px;color:var(--primary)}.stat span{font-size:12px;color:var(--muted)}
a{color:var(--primary)}


/* ---- Логин в визуальном стиле staff.logangels.com ---- */
:root{--st-blue:#0B5CFF;--st-blue-d:#0A48C7;--st-ink:#04061c;--st-bg:#F5F7FB;
      --st-line:#e7ebf3;--st-purple:#9566A3;--st-ink2:#4a5570;--st-err:#c7433a}
.login{display:flex;align-items:center;justify-content:center;min-height:100vh;
       padding:24px;background:var(--st-bg);position:relative}
.bgfx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--st-bg)}
.bgfx i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.30}
.bgfx i:nth-child(1){width:62vmax;height:62vmax;left:-22vmax;top:-24vmax;
  background:radial-gradient(circle,#0B5CFF 0%,rgba(11,92,255,0) 70%);animation:d1 34s ease-in-out infinite}
.bgfx i:nth-child(2){width:52vmax;height:52vmax;right:-20vmax;top:14vmax;
  background:radial-gradient(circle,#9566A3 0%,rgba(149,102,163,0) 70%);animation:d2 44s ease-in-out infinite}
.bgfx i:nth-child(3){width:46vmax;height:46vmax;left:8vmax;bottom:-22vmax;
  background:radial-gradient(circle,#0A48C7 0%,rgba(10,72,199,0) 70%);animation:d3 52s ease-in-out infinite}
@keyframes d1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(9vmax,7vmax,0)}}
@keyframes d2{0%,100%{transform:translate3d(-7vmax,5vmax,0)}50%{transform:translate3d(4vmax,-6vmax,0)}}
@keyframes d3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-6vmax,-8vmax,0)}}
@media (prefers-reduced-motion:reduce){.bgfx i{animation:none!important}}
.log{position:relative;z-index:1;background:#fff;border:1px solid var(--st-line);
     border-radius:20px;padding:24px 20px;width:100%;max-width:380px;
     box-shadow:0 4px 22px rgba(4,6,28,.06);text-align:left}
.log h2{margin:0 0 6px;font-size:22px;letter-spacing:-.5px;color:var(--st-ink)}
.log .ts{font-size:14px;color:var(--st-ink2);line-height:1.55;margin-bottom:16px}
.log .hint{margin:14px 0 0;font-size:12.5px}
.pinbox{width:100%;min-height:56px;border:2px solid var(--st-line);border-radius:14px;
        font-size:26px;letter-spacing:.5em;text-align:center;margin-bottom:12px;
        padding:10px 12px;color:var(--st-ink);background:#fff}
.pinbox:focus{outline:none;border-color:var(--st-blue)}
.log .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;
          border-radius:999px;border:none;cursor:pointer;font:inherit;font-size:17px;
          font-weight:700;background:var(--st-blue);color:#fff;margin:0}
.log .btn:active{background:var(--st-blue-d)}
.log .err{color:var(--st-err);font-size:14px;margin:12px 0 0}


/* ==================== АДАПТИВ ==================== */
/* Базовые правила, полезные на всех ширинах */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
input,select,button{font-size:16px}          /* <16px iOS зумит страницу при фокусе */
input,select{min-height:44px}                 /* тапабельная зона */
.btn{min-height:44px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
img,table{max-width:100%}

/* ---- Планшет: сетка в одну колонку, таблицы со скроллом ---- */
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .card{margin:12px}
  .tw table{min-width:640px}                  /* скроллим внутри обёртки, не всю страницу */
}

/* ---- Телефон: перестроение ---- */
@media (max-width:640px){
  .topbar{padding:10px 12px;gap:8px}
  .brand{font-size:14px;line-height:1.25}
  .brand b{display:block}                     /* название на вторую строку, шапка не жрёт экран */
  .userbox{font-size:13px;gap:6px}
  .userbox .btn{padding:8px 12px;min-height:40px}

  /* Вкладки — горизонтальная лента вместо переноса в три ряда */
  .tabs{overflow-x:auto;flex-wrap:nowrap;padding:10px 10px 0;gap:4px;
        scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex:0 0 auto;padding:11px 14px;font-size:14px;min-height:44px}

  .card{margin:10px;padding:14px;border-radius:12px}
  h2{font-size:16px}
  .fields{grid-template-columns:1fr}          /* поля в одну колонку */
  .settings-row{flex-direction:column;align-items:stretch;gap:12px}
  .settings-row .btn{width:100%}
  .upload{flex-direction:column;align-items:stretch;gap:8px}

  /* ---- ТАБЛИЦЫ -> КАРТОЧКИ ----
     На 360 px шесть колонок не помещаются ни при каком раскладе. Горизонтальный
     скролл внутри таблицы уводит цену и поле ввода за край: на телефоне это
     означает «скроллю вправо, забыл, какая это услуга». Поэтому строка
     разворачивается в карточку, подпись колонки берётся из data-label. */
  .tw{overflow-x:visible}
  .tw table{min-width:0}
  .svc-table thead,.hist-table thead,.price-table thead{display:none}
  .svc-table,.hist-table,.price-table,
  .svc-table tbody,.hist-table tbody,.price-table tbody{display:block;width:100%}
  .svc-table tr,.hist-table tr,.price-table tr{
    display:block;border:1px solid var(--border);border-radius:12px;
    padding:10px 12px;margin-bottom:10px;background:#fff}
  .svc-table td,.hist-table td,.price-table td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    border:none;padding:5px 0;text-align:right;font-size:14px}
  .svc-table td::before,.hist-table td::before,.price-table td::before{
    content:attr(data-label);flex:0 0 42%;text-align:left;
    color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
  .svc-table td.c-name,.hist-table td.c-name,.price-table td.c-name{
    font-weight:700;font-size:15px;text-align:left;display:block;
    padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--border)}
  .svc-table td.c-name::before,.hist-table td.c-name::before,.price-table td.c-name::before{display:none}
  .svc-table td[data-label="Группа"]{display:none}   /* группа дублирует смысл — на телефоне лишняя */
  .svc-table .qty,.price-table .pedit{width:120px;text-align:right}
  .hist-table td.dl{justify-content:flex-end;gap:16px}
  .hist-table td.dl a{padding:8px 4px}               /* ссылки на файлы — попасть пальцем */
  .price-table td:last-child .btn{width:100%}

  /* ---- Липкая панель итогов и действий ----
     Форма услуг длинная; без этого «Сформировать КП» надо искать в конце списка. */
  .totals-card{position:sticky;bottom:0;z-index:30;margin:0;border-radius:14px 14px 0 0;
    flex-direction:column;align-items:stretch;gap:10px;
    box-shadow:0 -6px 20px rgba(4,6,28,.10);
    padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
  .totals{font-size:13px;line-height:1.6}
  .totals .grand{font-size:18px}
  .actions{flex-direction:column;align-items:stretch;gap:8px}
  .actions .btn{width:100%}
  #tab-gen{padding-bottom:4px}

  .stat-row{gap:8px}
  .stat{flex:1 1 calc(50% - 8px);min-width:0;padding:12px}
  .stat b{font-size:20px}
  .an-table{font-size:14px}
}

/* ---- Узкие бюджетные Android ---- */
@media (max-width:380px){
  .card{margin:8px;padding:12px}
  .tab{padding:11px 12px;font-size:13px;min-height:44px}
  .svc-table td::before,.hist-table td::before,.price-table td::before{flex-basis:46%;font-size:11px}
  .svc-table .qty,.price-table .pedit{width:104px}
  .log{padding:20px 16px}
}

/* ---- Экран входа на телефоне ---- */
@media (max-width:640px){
  .login{padding:16px}
  .log h2{font-size:20px}
  .pinbox{font-size:24px;min-height:54px}
}

/* Расширенный режим: экономика сделки. Внутренние данные — визуально отделены. */
#eco-block .card{border-left:4px solid var(--primary)}
.tot-eco{margin-top:12px;background:#F5F7FB;border-radius:12px;padding:12px 14px}
.tot-eco .row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px dashed #e7ebf3;font-size:14px}
.tot-eco .row:last-child{border-bottom:none}
.tot-eco .row .n{color:var(--muted)}
.tot-eco .row.muted .v{color:var(--muted);font-size:13px}
tr.step-now{background:#EAF1FB}
tr.step-now td{font-weight:600}
@media (max-width:640px){
  .tot-eco .row{flex-direction:column;gap:2px}
  .tot-eco .row .v{text-align:left}
}

/* ---------- вход через провайдера (задача #63) ---------- */
.providers{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.log .providers .btn-provider{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:52px;border-radius:14px;font-size:16px;font-weight:600;
  text-decoration:none;border:1.5px solid var(--st-line);background:#fff;color:var(--st-ink);
  cursor:pointer}
.log .providers .btn-provider:hover{border-color:var(--st-blue);background:#f6f9ff}
.log .providers .btn-provider.prov-google::before{content:"G";font-weight:800;color:#4285F4}
.log .providers .btn-provider.prov-yandex::before{content:"Я";font-weight:800;color:#FC3F1D}
.log .providers .btn-provider.disabled{opacity:.5;cursor:not-allowed;background:#f2f3f5;
  color:var(--st-ink2);border-style:dashed}
.log .providers .btn-provider.disabled:hover{border-color:var(--st-line);background:#f2f3f5}
.userbox .av{width:28px;height:28px;border-radius:50%;object-fit:cover}
.userbox .who{display:flex;flex-direction:column;line-height:1.2}
.userbox .who i{font-style:normal;font-size:11.5px}
.tab.hidden{display:none}
@media (max-width:480px){
  .userbox .who i{display:none}
  .btn-provider{font-size:15px;min-height:50px}
}

/* ---------- меню пользователя в шапке (задача #68) ---------- */
.umenu{position:relative}
.umenu>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:4px 8px;border-radius:10px;border:1px solid transparent}
.umenu>summary::-webkit-details-marker{display:none}
.umenu>summary:hover{border-color:var(--border);background:var(--bg)}
.umenu[open]>summary{border-color:var(--border);background:var(--bg)}
.umenu .caret{font-size:11px;color:var(--muted)}
.userbox .av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.av-ph{display:flex;align-items:center;justify-content:center;background:var(--primary);
  color:#fff;font-size:13px;font-weight:700}
.umenu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:50;
  width:min(300px,calc(100vw - 24px));background:var(--card);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 10px 30px rgba(4,6,28,.12);padding:6px;text-align:left}
.umenu-head{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;
  display:flex;flex-direction:column;line-height:1.3;word-break:break-word}
.umenu-head .muted{font-size:12px}
.umenu-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  padding:9px 10px;border-radius:9px;border:none;background:transparent;color:var(--text);
  font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.umenu-item:hover{background:var(--bg)}
.umenu-item i{font-style:normal;font-size:11.5px;line-height:1.35}
.umenu-item .ext{font-size:11px;color:var(--muted)}
.umenu-exit{color:#b3261e;font-weight:600}
@media (max-width:480px){
  /* На узком экране подпись роли уже скрыта — оставляем аватар и имя, шапку не распирает */
  .umenu>summary{padding:4px 6px;gap:6px}
  .userbox .who b{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .umenu-pop{width:min(280px,calc(100vw - 16px))}
}

/* ---------- способы входа в карточке сотрудника (задача #69) ---------- */
.idn{display:inline-flex;align-items:center;gap:5px;background:var(--bg);
  border:1px solid var(--border);border-radius:8px;padding:3px 7px;margin:2px 4px 2px 0;font-size:12.5px}
.idn i{font-style:normal;font-size:11px}
.idn-x{border:none;background:transparent;color:var(--muted);cursor:pointer;
  font-size:14px;line-height:1;padding:0 2px}
.idn-x:hover{color:#b3261e}

/* ---------- вход через кабинет и переключатель организаций (задача #72) ---------- */
.log .providers .btn-provider.prov-la{background:var(--st-blue);border-color:var(--st-blue);color:#fff}
.log .providers .btn-provider.prov-la:hover{background:var(--st-blue-d);border-color:var(--st-blue-d)}
.log .providers .btn-provider.prov-la::before{content:"⚙";font-weight:800}
.log .providers .or{text-align:center;font-size:12.5px;color:var(--st-ink2);margin:2px 0 4px}
.umenu-orgs{border-top:1px solid var(--border);margin:6px 0;padding-top:6px}
.umenu-orgs>i{display:block;font-style:normal;font-size:11px;color:var(--muted);padding:0 10px 4px}
.umenu-org.on{background:var(--bg);font-weight:600}
.umenu-org.on::after{content:"✓";margin-left:auto;color:var(--accent)}