/* Оформление проекта: тёмно-синий фон, золото, Oswald + Manrope */
@font-face{font-family:'Oswald';font-weight:400 700;font-display:swap;src:url(../fonts/oswald-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0400-045F}
@font-face{font-family:'Oswald';font-weight:400 700;font-display:swap;src:url(../fonts/oswald-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:'Manrope';font-weight:400 800;font-display:swap;src:url(../fonts/manrope-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0400-045F}
@font-face{font-family:'Manrope';font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF}

:root{
  --фон:#0b1621; --карта:#101f2c; --карта2:#0f1e2a; --шапка:#0e1c29;
  --линия:#1e3243; --линия2:#24384a; --золото:#c9a227; --золото-св:#e3c05a;
  --текст:#c3cfd9; --тихий:#8ba0b0; --совсем-тихий:#6f8494;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--фон);color:var(--текст);font-family:'Manrope',Arial,sans-serif;font-size:14.5px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--золото);text-decoration:none}
a:hover{color:var(--золото-св)}
h1,h2,h3,.осв{font-family:'Oswald',Arial,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.12em;margin:0}
.обёртка{max-width:1220px;margin:0 auto;padding:0 22px 80px}

/* ——— шапка и бургер ——— */
.шапка{background:var(--шапка);border-bottom:1px solid var(--линия2);position:sticky;top:0;z-index:40}
.шапка .в{max-width:1220px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px}
.бургер{width:42px;height:38px;flex:0 0 auto;background:transparent;border:1px solid var(--золото);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 9px;cursor:pointer}
.бургер i{display:block;height:2px;background:var(--золото)}
.шапка .где{flex:1;min-width:0}
.шапка .где .над{font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.24em;font-size:9.5px;color:var(--золото)}
.шапка .где .имя{font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.шапка .я{text-align:right;font-size:11px;color:var(--тихий);white-space:nowrap}
.шапка .я b{display:block;color:var(--текст);font-size:12.5px;font-weight:700}
@media(max-width:640px){.шапка .я{display:none}}

.штора{position:fixed;inset:0;background:rgba(4,10,16,.72);opacity:0;pointer-events:none;transition:opacity .18s;z-index:50}
.меню{position:fixed;top:0;left:0;bottom:0;width:310px;max-width:86vw;background:var(--шапка);border-right:1px solid var(--линия2);transform:translateX(-102%);transition:transform .2s;z-index:51;overflow-y:auto;padding-bottom:30px}
body.меню-открыто .штора{opacity:1;pointer-events:auto}
body.меню-открыто .меню{transform:none}
.меню .верх{padding:16px 20px;border-bottom:1px solid var(--линия2);display:flex;align-items:center;justify-content:space-between}
.меню .верх .з{font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--золото)}
.меню .закрыть{background:none;border:0;color:var(--тихий);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.меню .раздел{padding:16px 20px 6px;font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:9.5px;color:var(--совсем-тихий)}
.меню a.п{display:flex;align-items:center;gap:9px;padding:9px 20px;color:var(--текст);border-left:2px solid transparent;font-size:13.5px}
.меню a.п:hover{background:#12212e;color:#fff}
.меню a.п.тут{border-left-color:var(--золото);background:#12212e;color:var(--золото)}
.меню a.п .кв{width:6px;height:6px;background:var(--золото);flex:0 0 auto}
.меню .низ{margin-top:18px;padding:14px 20px 0;border-top:1px solid var(--линия2)}

/* ——— заголовки блоков ——— */
.первый{background:var(--шапка);border-bottom:1px solid var(--линия2);padding:30px 0 24px;margin-bottom:24px}
.первый .в{max-width:1220px;margin:0 auto;padding:0 22px}
.первый .над{color:var(--золото);letter-spacing:.24em;font-size:11px;margin-bottom:8px;font-family:'Oswald',Arial,sans-serif;text-transform:uppercase}
.первый h1{color:#fff;font-size:25px}
.первый p{color:var(--тихий);max-width:880px;margin:10px 0 0;font-size:13.5px}
.заг{margin:34px 0 16px}
.заг h2{color:var(--золото);font-size:15px;letter-spacing:.2em}
.заг .л{height:1px;background:var(--линия2);margin-top:9px}

/* ——— плитки итогов ——— */
.итоги{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:18px 0 26px}
.плитка{border:1px solid var(--золото);padding:12px 14px;background:var(--шапка)}
.плитка .т{font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:9.5px;color:var(--тихий)}
.плитка .з{font-family:'Oswald',Arial,sans-serif;font-size:21px;color:var(--золото);margin-top:4px}
@media(max-width:1000px){.итоги{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.итоги{grid-template-columns:repeat(2,1fr)}}

/* ——— карточки направлений ——— */
.сетка{display:grid;gap:12px}
.в2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.в2{grid-template-columns:1fr}}
.напр{background:var(--карта);border:1px solid var(--линия);display:grid;grid-template-columns:130px 1fr}
.напр img{width:130px;height:100%;min-height:150px;object-fit:cover;display:block}
.напр .тело{padding:12px 14px;min-width:0}
.напр h3{color:#fff;font-size:13px;letter-spacing:.07em;margin-bottom:2px}
.напр .гр{color:var(--совсем-тихий);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;font-family:'Oswald',Arial,sans-serif}
.поля{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.поле{display:flex;flex-direction:column;gap:2px}
.поле label{font-size:9.5px;color:var(--тихий);text-transform:uppercase;letter-spacing:.1em;font-family:'Oswald',Arial,sans-serif}
.вывод{margin-top:9px;font-size:12px;color:var(--тихий)}
.вывод b{color:var(--золото);font-weight:700}
@media(max-width:520px){.напр{grid-template-columns:1fr}.напр img{width:100%;height:120px;min-height:0}}

/* ——— поля и кнопки ——— */
input[type=number],input[type=text],select{background:#0c1925;border:1px solid #2a4257;color:var(--золото-св);padding:6px 8px;font-family:'Manrope',Arial,sans-serif;font-size:13.5px;font-weight:700;max-width:100%}
input[type=number]{width:88px}
input:focus,select:focus{outline:none;border-color:var(--золото)}
input[readonly]{color:var(--тихий);font-weight:400}
label.флаг{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--текст);font-weight:400;cursor:pointer}
input[type=checkbox]{accent-color:var(--золото);width:16px;height:16px}
.кнопки{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
button,.кнопка{background:var(--золото);border:0;color:#0c1620;font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12px;padding:10px 18px;cursor:pointer;display:inline-block}
button.тихая,.кнопка.тихая{background:transparent;border:1px solid var(--золото);color:var(--золото)}
button.опасная{background:transparent;border:1px solid #a5424a;color:#d9737a}
button:disabled{opacity:.45;cursor:default}

/* ——— таблицы ——— */
/* Ширина страницы всегда равна экрану телефона. Широкие таблицы листаются
   внутри своей рамки, а не растягивают весь сайт: иначе телефон уменьшает
   страницу целиком, поля разъезжаются, и всё становится мелким.
   min-width:0 обязателен — клетка сетки по умолчанию не уже своего
   содержимого, и одна широкая таблица раздвигала всю колонку. */
/* Именно clip, а не hidden: hidden делает страницу своим прокручиваемым
   окном, и липкая шапка перестаёт липнуть. */
html,body{max-width:100%;overflow-x:clip}
.обёртка,.первый .в,.шапка .в{width:100%}
.сетка>*,.набор>*,.итоги>*,.напр,.панель,.поля>*{min-width:0}
/* Листать вбок — только саму таблицу: страница при этом стоит на месте. */
.таб{max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.таб table{max-width:none}

.таб{overflow-x:auto;border:1px solid var(--линия);background:var(--карта2);margin-bottom:10px}
table{border-collapse:collapse;width:100%;font-size:12.6px;min-width:700px}
thead th{background:#14283a;color:var(--золото);font-family:'Oswald',Arial,sans-serif;font-weight:400;letter-spacing:.09em;text-transform:uppercase;font-size:10px;padding:9px 11px;text-align:right;border-bottom:1px solid var(--золото)}
thead th:first-child{text-align:left}
td{padding:7px 11px;border-bottom:1px solid #182b3a;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td:first-child{text-align:left;white-space:normal}
tbody tr:nth-child(even){background:#111f2c}
tr.важно td{background:#16283a;color:#fff}
tfoot td{background:#14283a;color:#fff;font-weight:700;border-top:1px solid var(--золото)}

/* ——— прочее ——— */
.заметка{color:var(--совсем-тихий);font-size:12px;margin:8px 0 0}
.панель{background:var(--карта);border:1px solid var(--линия);padding:14px 16px;margin-bottom:12px}
.набор{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.набор .поле{background:var(--карта);border:1px solid var(--линия);padding:10px 12px}
.набор input{width:100%}
@media(max-width:900px){.набор{grid-template-columns:repeat(2,1fr)}}
.метка{display:inline-block;font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;padding:3px 8px;border:1px solid var(--линия2);color:var(--тихий)}
.метка.да{border-color:var(--золото);color:var(--золото)}
.метка.ждёт{border-color:#7a6a2a;color:var(--золото-св)}
.метка.нет{border-color:#5c3238;color:#d9737a}
ul.список{list-style:none;padding:0;margin:10px 0}
ul.список li{position:relative;padding-left:16px;margin-bottom:6px}
ul.список li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--золото)}
.середина{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.окно{background:var(--карта);border:1px solid var(--линия2);padding:30px 28px;max-width:440px;width:100%;text-align:center}
.окно h1{color:#fff;font-size:19px;margin-bottom:6px}
.окно .над{color:var(--золото);letter-spacing:.24em;font-size:10px;font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;margin-bottom:12px}
.окно p{color:var(--тихий);font-size:13px}
.ошибка{border:1px solid #5c3238;background:#1b1216;color:#d9737a;padding:10px 14px;margin:12px 0;font-size:13px}
.успех{border:1px solid #2f5d3a;background:#101f18;color:#7fc493;padding:10px 14px;margin:12px 0;font-size:13px}

/* Фото человека рядом с именем. Нет снимка — показываем первую букву:
   пустой кружок читается как «сломалось», буква — как «фото не загрузили». */
.снимок{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--линия2);background:var(--карта)}
.снимок.крупный{width:96px;height:96px}
.буква{display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',Arial,sans-serif;font-size:15px;color:var(--тихий);
  text-transform:uppercase;letter-spacing:.04em}
.буква.крупный{font-size:38px}
.с_фото{display:flex;align-items:center;gap:10px;text-align:left}

/* Полный план внутри страницы. Рамка нужна, чтобы его стили не спорили
   с нашими, но видно её быть не должно: во всю ширину вкладки, без границ,
   высота — по самому документу, чтобы не было прокрутки внутри прокрутки. */
.план-целиком{margin:0 -22px;background:#fff}
.план-целиком iframe{display:block;width:100%;border:0;min-height:80vh}
.строка-настройки{padding:10px 0;border-bottom:1px solid var(--линия2)}
.строка-настройки:last-child{border-bottom:0}

/* Знак вопроса возле каждой цифры. Маленький и сбоку: он объясняет,
   а не заслоняет — поэтому не в строку с числом, а рядом, тише по цвету. */
.что{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:5px;padding:0;flex:0 0 auto;
  border:1px solid var(--линия2);border-radius:50%;background:transparent;
  color:var(--совсем-тихий);font-family:'Manrope',Arial,sans-serif;
  font-size:10px;line-height:1;cursor:pointer;vertical-align:middle}
.что:hover,.что:focus{border-color:var(--золото);color:var(--золото);outline:none}
th .что{margin-left:4px}

/* Карандаш и корзина возле названий: переименовать услугу или убрать её
   из проекта. Значки бледные — они рядом с названием, а не вместо него. */
.правки{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
.правка{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;padding:0;flex:0 0 auto;
  border:1px solid var(--линия2);border-radius:5px;background:transparent;
  color:var(--совсем-тихий);font-size:10px;line-height:1;cursor:pointer}
.правка:hover,.правка:focus{border-color:var(--золото);color:var(--золото);outline:none}
.правка.убрать:hover,.правка.убрать:focus{border-color:#d06a6a;color:#d06a6a}
/* Раскрытие: строка направления кликается, услуги под ней — тише и с отступом. */
tr.раскрыть{cursor:pointer}
tr.раскрыть:hover td{background:rgba(201,168,76,.06)}
.стрелка{display:inline-block;width:12px;color:var(--золото)}
.стрелка-кнопка{background:none;border:0;padding:0 2px;color:var(--золото);
  font-size:12px;line-height:1;cursor:pointer}
tr.внутри td{color:var(--тихий);background:rgba(255,255,255,.02)}
tr.внутри td:first-child{padding-left:22px}
.тихая.выбрана{border-color:var(--золото);color:var(--золото)}
.глубина{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}

/* Второй строкой в клетке — сколько услуг за месяц. Мельче и тише цифры
   выручки: это пояснение к ней, а не второе число наравне. */
/* Месяц, объём которого задан руками, — точка, через которую идёт линия.
   Остальные месяцы считаются между точками и подписаны бледнее. */
input.цена.точка{border-color:var(--золото);color:#fff}

.сколько{display:block;margin-top:2px;color:var(--совсем-тихий);
  font-size:10px;letter-spacing:.02em;white-space:nowrap}

.имя-правка{width:100%;min-width:180px;padding:5px 7px;
  border:1px solid var(--золото);border-radius:6px;
  background:var(--фон);color:#fff;font:inherit}

/* Окошко с пояснением. Поверх страницы, но страницу не закрывает:
   узкая карточка снизу по центру — на телефоне так удобнее всего. */
.пояснение{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:60;width:min(440px,calc(100vw - 28px));display:none;
  /* Непрозрачный фон обязателен: сквозь него читалась страница,
     и в окошке нельзя было разобрать ни слова. */
  background:var(--фон);border:1px solid var(--золото);
  box-shadow:0 10px 40px rgba(0,0,0,.55);padding:14px 16px}
.пояснение.видно{display:block}
.пояснение .з{font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:10px;color:var(--золото);margin-bottom:6px;
  padding-right:24px}
.пояснение p{margin:0;font-size:13px;line-height:1.55;color:#fff}
.пояснение .закрыть{position:absolute;top:8px;right:10px;background:none;border:0;
  color:var(--тихий);font-size:20px;line-height:1;cursor:pointer;padding:0}

/* Посчитанное поле: выглядит как поле ввода, но править нечего —
   значение выводится из прайса, и подделать его руками нельзя. */
.поле .посчитано{padding:9px 10px;border:1px solid var(--линия);
  color:var(--золото-св);font-family:'Manrope',Arial,sans-serif;font-size:14px}
/* Цена прямо в таблице прайса: узкая, чтобы таблица не разъезжалась. */
input.цена{width:100px;padding:5px 7px;background:var(--карта2);
  border:1px solid var(--линия);color:var(--текст);font-size:13px;text-align:right}
input.цена:focus{border-color:var(--золото);outline:none}

/* Пункты админки: закрытая полка с номером, по нажатию раскрывается.
   На <details> держится сам браузер — ни строчки скрипта не нужно. */
.пункт{background:var(--карта);border:1px solid var(--линия);margin-bottom:10px}
.пункт>summary{list-style:none;cursor:pointer;padding:13px 16px;
  display:flex;align-items:center;gap:10px;color:#fff;font-size:13px;
  font-family:'Oswald',Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.пункт>summary::-webkit-details-marker{display:none}
.пункт>summary::after{content:'+';margin-left:auto;color:var(--совсем-тихий);
  font-family:'Manrope',Arial,sans-serif;font-size:16px;line-height:1}
.пункт[open]>summary::after{content:'−'}
.пункт>summary:hover{background:var(--карта2)}
.пункт .номер{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:0 0 22px;border:1px solid var(--линия2);
  color:var(--золото);font-size:11px;letter-spacing:0}
.пункт .нутро{padding:0 16px 16px;border-top:1px solid var(--линия)}
.пункт .нутро>.таб{margin-top:12px}
/* Две кнопки под одной ячейкой не должны вставать друг на друга столбиком. */
form.в_строку{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px}
form.в_строку input[type=file]{color:var(--тихий);font-size:11px;max-width:170px}

/* Переключатель сервисов в меню: два проекта одного клуба. Крупнее пунктов —
   это выбор «где я», а не «куда листаю». */
.меню .сервис{display:block;padding:10px 20px;border-left:3px solid transparent;
  color:var(--тихий);text-decoration:none}
.меню .сервис b{display:block;color:#fff;font-family:'Oswald',Arial,sans-serif;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.меню .сервис span{display:block;font-size:11px;color:var(--совсем-тихий);margin-top:2px}
.меню .сервис:hover{background:var(--карта2)}
.меню .сервис.тут{border-left-color:var(--золото);background:var(--карта2)}
.меню .сервис.тут b{color:var(--золото)}

/* ---------- WORK: календарь, карточки записей, графики ---------- */
/* Полоса управления: виды календаря, стрелки, выбор мастера — в одну строку,
   а на телефоне переносится сама. */
.панель.полоса{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between}
.виды{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.виды label{display:flex;gap:6px;align-items:center}
.поля{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.поля label{display:flex;flex-direction:column;gap:4px;font-size:11px;
  color:var(--совсем-тихий);text-transform:uppercase;letter-spacing:.1em}
.поля label.флаг{flex-direction:row;align-items:center;text-transform:none;
  letter-spacing:0;font-size:12.5px;color:var(--текст)}
.метка{display:inline-block;padding:1px 6px;border:1px solid var(--линия2);
  font-size:10px;color:var(--тихий);letter-spacing:.08em}
.метка.выполнено{border-color:var(--золото);color:var(--золото)}
.метка.отменено{opacity:.6;text-decoration:line-through}
.тревога{color:#e2705f}
.тихая-строка{opacity:.5}
/* Месяц сеткой: день — клетка, внутри первые записи и «ещё N». */
table.месяц td{vertical-align:top;height:92px;padding:4px}
table.месяц td.чужой{opacity:.35}
table.месяц td.сегодня{outline:1px solid var(--золото)}
table.месяц td a{display:block;text-decoration:none;color:var(--текст)}
table.месяц .число{display:block;font-family:'Oswald',Arial,sans-serif;font-size:12px;
  color:var(--совсем-тихий);margin-bottom:3px}
table.месяц .точка{display:block;font-size:10px;color:var(--текст);
  border-left:2px solid var(--золото);padding-left:4px;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.месяц .точка.выполнено{border-left-color:#5fa88a}
table.месяц .точка.отменено{opacity:.45}
table.месяц .ещё{font-size:10px;color:var(--совсем-тихий)}
.день-столбик{vertical-align:top;padding:6px}
.день-столбик.сегодня{outline:1px solid var(--золото)}
.карточка-записи{display:block;text-decoration:none;color:var(--текст);
  border:1px solid var(--линия);border-left:2px solid var(--золото);
  padding:5px 7px;margin-bottom:5px;font-size:11.5px}
.карточка-записи b{color:#fff}
.карточка-записи span{display:block;color:var(--совсем-тихий);font-size:10.5px}
.карточка-записи.выполнено{border-left-color:#5fa88a}
.карточка-записи.отменено{opacity:.5}
.сетка-года{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.месяц-плитка{display:block;background:var(--карта);border:1px solid var(--линия);
  padding:12px;text-decoration:none;text-align:center}
.месяц-плитка .т{color:var(--совсем-тихий);font-size:11px;text-transform:uppercase;
  letter-spacing:.12em;font-family:'Oswald',Arial,sans-serif}
.месяц-плитка .з{color:var(--золото-св);font-size:22px;font-family:'Oswald',Arial,sans-serif}
.месяц-плитка .под{color:var(--совсем-тихий);font-size:10px}
.график{width:100%;min-height:60px;overflow:hidden}
.набор-услуг{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px}