/* Выписки: нежная тема «Тиффани». Пастель: мятно-бирюзовый, пудрово-розовый, сливочный.
   Подключается последней и перекрывает оформление «Бюджетов» (base.css). */
:root {
  --bg: #f5fbfa;
  --panel: #ffffff;
  --ink: #2c4a48;
  --ink-2: #4d6866;
  --muted: #8aa3a1;
  --line: #e0efed;
  --soft: #f0f8f7;
  --tiffany: #81d8d0;
  --tiffany-deep: #0abab5;
  --tiffany-ink: #127e79;
  --tiffany-soft: #e6f7f5;
  --powder: #f7d6de;
  --powder-soft: #fdf1f4;
  --cream: #fff8e7;
  --lilac: #e7e2f7;
  --acid: var(--tiffany);
  --acid-soft: var(--tiffany-soft);
  --acid-ink: var(--tiffany-ink);
  --plus: #129a8f;
  --minus: #c76a86;
  --blue: var(--tiffany-ink);
  --radius: 20px;
  --display: "Raleway", "Inter", sans-serif;
  --shadow: 0 1px 0 rgba(44,74,72,.03), 0 14px 34px -22px rgba(18,126,121,.35);
}
body { background: radial-gradient(1200px 500px at 85% -10%, #e2f6f3 0%, transparent 60%),
  radial-gradient(900px 400px at 20% 110%, var(--powder-soft) 0%, transparent 60%), var(--bg); background-attachment: fixed; }
a { color: var(--tiffany-ink); }

/* заголовки: без крика, тонкие и изящные */
h1 { font-family: var(--display); font-weight: 700; text-transform: none; letter-spacing: -.01em; font-size: 32px; line-height: 1.1; color: var(--ink); }
h2 { font-family: var(--display); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 18px; }

/* меню: светлое, мятное */
.side { background: linear-gradient(185deg, #cdf1ec 0%, #e9f8f6 55%, #fbeff2 100%); color: var(--ink);
  border-right: 1px solid #d6eeeb; }
.side::after { background: none; content: ""; left: auto; right: -60px; bottom: 120px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.7), transparent 70%); transform: none; opacity: 1; }
.side-brand { color: var(--ink); }
.side-brand img { width: 46px; height: 46px; }
.side-brand b { font-family: var(--display); font-weight: 800; text-transform: none; font-size: 22px; letter-spacing: -.01em; }
.side nav a { color: var(--ink-2); border-radius: 14px; }
.side nav a:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.side nav a.on { color: var(--tiffany-ink); background: #fff; box-shadow: 0 6px 18px -12px rgba(18,126,121,.6); font-weight: 600; }
.ico { background: #b9e3de; }
.side nav a.on .ico { background: var(--tiffany-deep); }
.side .who { color: var(--ink-2); border-top: 1px solid rgba(44,74,72,.1); }
.side .who .btn { color: var(--muted); }
.side .who .btn:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.side .tagline { color: var(--muted); font-style: italic; }
.agency-link { color: var(--ink-2); }
.agency-link:hover { color: var(--ink); }
.agency-link .dot { background: var(--powder); box-shadow: 0 0 0 3px rgba(199,106,134,.15); }
.agency-link .dot.on { background: var(--tiffany-deep); box-shadow: 0 0 0 3px rgba(10,186,181,.18); }

/* кнопки */
.btn { border-radius: 999px; border-color: var(--line); }
.btn:hover { border-color: var(--tiffany); }
.btn.primary, main .btn.primary { background: var(--tiffany); border-color: var(--tiffany); color: #0f3c39; font-weight: 600; }
.btn.primary:hover, main .btn.primary:hover { background: var(--tiffany-deep); border-color: var(--tiffany-deep); color: #fff; box-shadow: none; }
.btn.ghost:hover { background: var(--tiffany-soft); }
.btn.danger, .btn.ghost.danger { color: var(--minus); }
.btn.post { background: linear-gradient(135deg, #8fe0d8, #5fcbc3); border: 0; color: #fff; font-family: var(--display); font-weight: 800;
  text-transform: none; font-size: 15px; letter-spacing: .01em; border-radius: 16px; padding: 12px 22px;
  box-shadow: 0 10px 22px -12px rgba(10,186,181,.9); text-shadow: 0 1px 0 rgba(0,0,0,.08); }
.btn.post:hover { background: linear-gradient(135deg, #5fcbc3, #0abab5); color: #fff; transform: translateY(-1px); }
.tabs .btn.on { background: var(--tiffany-ink); border-color: var(--tiffany-ink); color: #fff; }

/* карточки и таблицы */
.card { border-radius: var(--radius); border-color: #e6f2f0; }
table.list th, table.lines th { color: var(--muted); }
table.list tr.click:hover td { background: var(--tiffany-soft); }
table.lines tr.posted td { background: #f6fcfb; }
table.lines tr.error td { background: var(--powder-soft); }
select.in, input.in, .ln-comment textarea, .modal label.f input, .modal label.f select { border-color: #d9ecea; border-radius: 12px; }
select.in:focus, input.in:focus, textarea:focus, input:focus, select:focus { outline: 2px solid rgba(129,216,208,.6); outline-offset: 1px; }
.req { background: var(--tiffany-soft); border-radius: 14px; }
.drop { border-color: #bfe7e2; border-radius: 22px; background: rgba(255,255,255,.75); }
.drop.over { border-color: var(--tiffany-deep); background: var(--tiffany-soft); }

/* метки */
.conf.hi { background: var(--tiffany); color: #0f3c39; }
.conf.mid { background: var(--cream); color: #8a6d1f; }
.conf.lo { background: var(--powder); color: #9b3f5c; }
.chk { background: var(--soft); }
.chk.ok { background: var(--tiffany-soft); color: var(--tiffany-ink); }
.chk.bad { background: var(--powder-soft); color: var(--minus); border: 1px solid var(--powder); }
.banner.trial { background: var(--cream); color: #7a6020; border: 1px solid #f6e7bd; }
.banner.err { background: var(--powder-soft); color: var(--minus); border: 1px solid var(--powder); }
.done { color: var(--tiffany-ink); }
.done.trial { color: #a3842b; }
.tag.locked { background: var(--powder); color: #9b3f5c; }
.toast { background: var(--tiffany-ink); color: #fff; border-radius: 999px; }
table.rep tr.sect td { background: var(--tiffany-soft); }
.modal { border-radius: 24px; }
.modal-ico { background: var(--powder); color: #9b3f5c; }
.modal-wrap { background: rgba(44,74,72,.28); backdrop-filter: blur(3px); }

/* вход */
body.login-page { background: linear-gradient(160deg, #cdf1ec 0%, #f2fbfa 50%, #fbe7ed 100%); }
body.login-page::before { background: radial-gradient(circle, rgba(129,216,208,.55), transparent 65%); width: 520px; height: 520px;
  right: -120px; top: -120px; transform: none; border-radius: 50%; opacity: 1; }
body.login-page::after { background: radial-gradient(circle, rgba(247,214,222,.8), transparent 65%); width: 380px; height: 380px;
  left: -100px; bottom: -100px; border-radius: 50%; }
.login { border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(18,126,121,.45); }
.login h1 { font-size: 40px; text-transform: none; }
.login .btn.primary { border-radius: 14px; }
.ln-kind input[type=checkbox] { width: auto; }
.req .switch { justify-content: flex-start; gap: 6px; color: var(--ink-2); }

/* ---------- раскладка: шапка компактная и на месте, таблица прокручивается внутри себя ----------
   Страница ровно по высоте окна; шапка (не выше ~3 см на ноутбуке) не уезжает; у таблицы свои полосы
   прокрутки по вертикали и горизонтали, строка заголовков закреплена, в отчёте закреплена и первая колонка. */
main { height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 12px 22px 14px; max-width: none; }
main > * { flex: none; }
main > .tbox { flex: 1 1 auto; min-height: 0; overflow: auto; }
.page-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 8px; min-height: 36px; }
.page-head h1 { font-size: 22px; line-height: 1.15; margin: 0; white-space: nowrap; }
.page-head .sub { font-size: 12px; }
.page-head .in { padding: 5px 8px; }
.head-line { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.head-line b { color: var(--ink); font-size: 13px; margin-left: 4px; }
.head-line b.plus { color: var(--plus); } .head-line b.minus { color: var(--minus); }
.head-line .chk { padding: 2px 8px; font-size: 11px; }
.tabs { margin-bottom: 8px; gap: 4px; }
.tabs .btn.sm { padding: 3px 10px; }
.pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill.trial { background: var(--cream); color: #7a6020; border: 1px solid #f6e7bd; }
.pill.err { background: var(--powder-soft); color: var(--minus); border: 1px solid var(--powder); }

/* загрузка в одну строку прямо в шапке */
.page-head .drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px 6px 14px; border-width: 2px;
  border-radius: 16px; flex: 1 1 520px; text-align: left; }
.page-head .drop b { font-size: 13px; }
.page-head .drop .sub { font-size: 11px; }
.page-head .drop select { max-width: 340px; margin-left: auto; }

/* заголовки таблиц на месте */
.tbox table.list th, .tbox table.lines th, .tbox table.rep th { position: sticky; top: 0; z-index: 3; background: #fbfefe;
  box-shadow: inset 0 -1px 0 var(--line); }
table.list th { padding: 9px 14px; } table.list td { padding: 10px 14px; }
table.lines td { padding: 9px 10px; }
.tbox .ent { border-radius: 16px; }
.tbox .ent h2 { position: sticky; left: 0; }
.rep-wrap { overflow-x: auto; }
table.rep td:first-child, table.rep th:first-child { position: sticky; left: 0; background: #fff; z-index: 2; }
table.rep th:first-child { z-index: 4; background: #fbfefe; }
table.rep tr.sect td:first-child { background: var(--tiffany-soft); }
#rep.tbox { gap: 12px; }
.card.tbox { border-radius: 16px; }
/* полосы прокрутки заметные, но нежные */
.tbox::-webkit-scrollbar, .rep-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
.tbox::-webkit-scrollbar-thumb, .rep-wrap::-webkit-scrollbar-thumb { background: #bfe6e1; border-radius: 10px; border: 3px solid #fff; }
.tbox::-webkit-scrollbar-thumb:hover, .rep-wrap::-webkit-scrollbar-thumb:hover { background: var(--tiffany); }
.tbox::-webkit-scrollbar-track, .rep-wrap::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 900px) { main { height: auto; overflow: visible; } main > .tbox { overflow: auto; max-height: 80vh; } }
.page-head { flex-wrap: nowrap; }
.page-head > * { flex-shrink: 0; }
.page-head h1, .page-head > .sub { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head > .sub { flex-basis: 0; flex-grow: 1; }
.page-head .grow { flex: 0 0 4px; }
main { padding-top: 8px; }
.head-line { margin-bottom: 6px; }
.page-head .in, .page-head input, .page-head select { width: auto; flex: 0 1 auto; min-width: 0; }
.page-head input[type=date] { width: 140px; }
.page-head select.in { max-width: 260px; }
.chk { white-space: normal; line-height: 1.3; }
table.list td .checks { min-width: 260px; max-width: 420px; }
.page-head h1 { flex-shrink: 0; }
.page-head h1.shrink { flex-shrink: 1; }

/* отчёт деревом */
table.rep tr.k-section td { font-weight: 800; background: var(--tiffany-soft); font-size: 13px; }
table.rep tr.k-group td { font-weight: 700; background: #f8fcfc; }
table.rep tr.lv1 td.name { padding-left: 22px; }
table.rep tr.lv2 td.name { padding-left: 38px; }
table.rep tr.lv3 td.name { padding-left: 58px; font-size: 12px; color: var(--ink-2); }
table.rep tr.k-client { cursor: pointer; }
table.rep tr.k-client:hover td { background: var(--tiffany-soft); }
table.rep .tw { display: inline-block; width: 14px; color: var(--tiffany-ink); }
table.rep td.plan { font-style: italic; opacity: .75; }
table.rep th.fut { color: var(--tiffany-ink); }
table.rep td.tot { font-weight: 700; }
table.rep td.name { white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
table.rep tr.k-section td:first-child { background: var(--tiffany-soft); }
table.rep tr.k-group td:first-child { background: #f8fcfc; }
.page-head select#st { min-width: 120px; }
.page-head select#ag { min-width: 150px; }