/* ─────────────────────────────────────────────────────────────
   «SALONweek Задачи» — дизайн-система v2
   Токены → базовые элементы → компоненты. Mobile-first.
   ───────────────────────────────────────────────────────────── */
:root {
  /* палитра */
  --canvas: #f6f5f7;
  --surface: #ffffff;
  --surface-2: #f1eff3;
  --ink: #1b1a20;
  --muted: #716e7b;
  --faint: #a5a2af;
  --border: #e8e6ec;
  --hairline: #efedf2;

  --accent: #9d2f55;
  --accent-strong: #872646;
  --accent-soft: #fbedf2;
  --accent-ink: #ffffff;

  --ok: #178a50;      --ok-soft: #e9f7ef;
  --danger: #d23b3b;  --danger-soft: #fdeeee;
  --warn: #9a6b00;    --warn-soft: #fff6e0;
  --info: #2e6bd6;    --info-soft: #edf3fe;

  --shadow-card: 0 1px 2px rgba(27, 26, 32, .05), 0 4px 16px rgba(27, 26, 32, .05);
  --shadow-float: 0 -4px 24px rgba(27, 26, 32, .08);

  --r-lg: 18px; --r-md: 12px; --r-sm: 9px;
  --tap: 44px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #141318;
    --surface: #1d1c23;
    --surface-2: #26242e;
    --ink: #edebf2;
    --muted: #a29fae;
    --faint: #6f6c7a;
    --border: #2d2b36;
    --hairline: #262430;

    --accent: #e0567f;
    --accent-strong: #e8759a;
    --accent-soft: #33202a;
    --accent-ink: #1b1016;

    --ok: #4cc385;      --ok-soft: #17301f;
    --danger: #ef7070;  --danger-soft: #341b1b;
    --warn: #d9a53e;    --warn-soft: #322a14;
    --info: #7aa5ec;    --info-soft: #1b2436;

    --shadow-card: none;
    --shadow-float: 0 -4px 24px rgba(0, 0, 0, .4);
  }
}

/* ── база ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(66px + env(safe-area-inset-bottom));
}
a { color: var(--info); text-decoration: none; }
a:active { opacity: .7; }

/* ── шапка ────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 12px;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.topbar h1 {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 8px;
}
.topbar h1::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--accent); transform: rotate(45deg); flex: 0 0 auto;
}

main { max-width: 640px; margin: 0 auto; padding: 16px 14px 28px; }
.section-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px;
  color: var(--faint); margin: 26px 4px 10px;
}

/* ── бейджи ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-gray  { background: var(--surface-2); color: var(--muted); }
.badge-green { background: var(--ok-soft); color: var(--ok); }
.badge-red   { background: var(--danger-soft); color: var(--danger); }
.badge-blue  { background: var(--info-soft); color: var(--info); }
.badge .spin { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.badge-blue::before { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── управление вкладкой ──────────────────────────────────── */
.controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.progress-line { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 2px; }

.run-select {
  width: 100%; min-height: var(--tap);
  padding: 10px 40px 10px 14px; font-size: 15px; font-weight: 500;
  color: var(--ink); background-color: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23716e7b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* чипы-фильтры */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px; margin: 0 -2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 36px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .12s;
}
.chip.active { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* ── карточки ─────────────────────────────────────────────── */
.cards { display: flex; flex-direction: column; gap: 12px; }
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 16px;
  box-shadow: var(--shadow-card);
  transition: opacity .15s, box-shadow .15s;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: transparent;
}
.card.ok::before  { background: var(--ok); }
.card.err::before { background: var(--danger); }
.card.dim { opacity: .55; }
.card h3 { margin: 10px 0 4px; font-size: 15.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.card .desc {
  color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer;
}
.card .desc.open { display: block; -webkit-line-clamp: unset; }
.card .desc p { margin: 0 0 6px; }
.card .meta { color: var(--muted); font-size: 13px; margin-top: 8px; }

.chiprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag {
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  letter-spacing: .2px; background: var(--surface-2); color: var(--muted);
}
.tag-critical { background: var(--danger-soft); color: var(--danger); }
.tag-high     { background: var(--warn-soft); color: var(--warn); }
.tag-medium   { background: var(--surface-2); color: var(--muted); }
.tag-low      { background: var(--surface-2); color: var(--faint); }

/* ── кнопки ───────────────────────────────────────────────── */
.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn {
  min-height: var(--tap); padding: 10px 18px; border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 650; letter-spacing: .1px;
  border: 1px solid transparent; cursor: pointer; transition: all .12s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-primary:active { background: var(--accent-strong); }
.btn-ok { background: var(--ok); color: #fff; }
.btn-secondary { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.btn-icon { background: var(--surface-2); border: 0; color: var(--muted); min-width: var(--tap); }

/* правка в карточке */
.card input[type=text], .card textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  font: inherit; background: var(--canvas); color: var(--ink); margin-top: 8px;
}
.card input[type=text]:focus, .card textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.card textarea { min-height: 110px; resize: vertical; }
.field-error { border-color: var(--danger) !important; }
.error-text { color: var(--danger); font-size: 13px; margin-top: 6px; font-weight: 500; }

/* ── sticky-панель публикации ─────────────────────────────── */
.sticky-panel {
  position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--hairline);
  box-shadow: var(--shadow-float);
  padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; z-index: 15;
}
@media (min-width: 700px) {
  .sticky-panel { max-width: 640px; margin: 0 auto; border: 1px solid var(--hairline);
    border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
.sticky-counts { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ── таб-бар ──────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbtn {
  flex: 1; min-height: 58px; border: 0; background: transparent; color: var(--faint);
  font-size: 11px; font-weight: 600; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: color .12s;
}
.tabbtn svg { width: 23px; height: 23px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbtn.active { color: var(--accent); }

/* ── плашки, статы, поиск ─────────────────────────────────── */
.plate { padding: 11px 14px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; }
.plate-warning { background: var(--warn-soft); color: var(--warn); }
.plate-error { background: var(--danger-soft); color: var(--danger); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 14px 16px; box-shadow: var(--shadow-card);
}
.stat .num { font-size: 26px; font-weight: 750; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 12px; font-weight: 600; color: var(--faint); margin-top: 2px;
  text-transform: uppercase; letter-spacing: .5px; }

.bar-row { font-size: 13.5px; }
.bar-row .bar-title { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.bar-row .bar-title .bar-val { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row .bar-bg { background: var(--surface-2); border-radius: 5px; margin-top: 8px; }
.bar-row .bar { height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #ffffff)); }
@media (prefers-color-scheme: dark) {
  .bar-row .bar { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); }
}

.search-row { display: flex; gap: 8px; }
.search-row input {
  flex: 1; min-height: var(--tap); padding: 10px 14px; font-size: 16px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card);
}
.search-row input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
mark { background: color-mix(in srgb, var(--warn) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ── состояния ────────────────────────────────────────────── */
.skeleton { height: 104px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface) 50%, var(--surface-2) 70%);
  background-size: 200% 100%; animation: shim 1.3s infinite; border: 1px solid var(--hairline); }
@keyframes shim { to { background-position: -200% 0; } }

.empty { text-align: center; color: var(--muted); padding: 44px 20px; font-size: 14.5px; }
.empty .emo {
  font-size: 30px; display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-card); margin-bottom: 14px;
}

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 30;
  background: var(--ink); color: var(--canvas); padding: 11px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; max-width: 90vw; box-shadow: var(--shadow-float);
}
.toast.error { background: var(--danger); color: #fff; }

/* ── модалки и вход ───────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 40%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal {
  background: var(--surface); border-radius: 22px; padding: 24px;
  max-width: 400px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.modal h2 { font-size: 19px; letter-spacing: -.2px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-size: 19px; font-weight: 750; letter-spacing: -.3px; }
.login-brand::before { content: ""; width: 12px; height: 12px; border-radius: 3.5px;
  background: var(--accent); transform: rotate(45deg); }
.login-field { width: 100%; min-height: var(--tap); padding: 11px 14px; font-size: 16px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--canvas); color: var(--ink); margin-bottom: 10px; }
.login-field:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.login-field[readonly] { color: var(--muted); }

.hidden { display: none !important; }

/* кнопки карточки — в одну строку */
.actions .btn { flex: 1 1 0; padding-inline: 10px; white-space: nowrap; }
.actions .btn-icon { flex: 0 0 auto; }