/* Dark is the site's only theme now (not just the default) — always on,
   regardless of the device's system light/dark setting. */
:root {
  --accent: #b58136;
  --accent-dark: #886125;
  --accent-soft: #332510;
  --good: #17a673;
  --good-soft: #113328;
  --danger: #ff4d4f;
  --danger-soft: #3a1f1f;
  --info: #3b82f6;
  --bg: #0e0f12;
  --surface: #191b20;
  --text: #f0f1f3;
  --text-muted: #9aa0ac;
  --border: #2a2d34;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .06);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Reserve the scrollbar's gutter permanently so locking scroll (overflow:
   hidden, used whenever a sheet/modal opens) never makes the scrollbar
   disappear and the background page content shift sideways to fill the gap. */
html { scrollbar-gutter: stable; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
button { font: inherit; }
a { color: inherit; }

#app {
  max-width: 620px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  padding-bottom: calc(64px + var(--safe-bottom));
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-top: var(--safe-top);
}
.topbar-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-text strong { font-size: 17px; letter-spacing: -.01em; }
.brand-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.icon-btn:active { transform: scale(.92); background: var(--bg); }
.icon-btn.active { background: var(--accent); border-color: var(--accent); color: #14161a; }
.icon-btn.spinning svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-dot {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 1.5px solid var(--surface);
}
.icon-dot.hidden { display: none; }

/* Redundant, CSS-property-based currentColor for icon fills/strokes. Some
   older iOS Safari builds fail to resolve `fill="currentColor"` /
   `stroke="currentColor"` set as a plain HTML attribute (the icon silently
   renders with the SVG's initial fill, invisible against our dark surfaces),
   but resolve it fine when the same value is set through an explicit CSS
   declaration instead — this doesn't change any color logic, every icon
   still tracks its container's `color`. */
path[fill="currentColor"] { fill: currentColor; }
svg[stroke="currentColor"] { stroke: currentColor; }

.filters-bar { display: flex; align-items: center; gap: 8px; padding: 0 16px 12px; }
.filters-bar[hidden] { display: none; }
.filters-bar .chip-row { flex: 1; min-width: 0; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chip-row[hidden] { display: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  white-space: nowrap; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  padding: 7px 13px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: all .15s ease;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #14161a; font-weight: 600; }

.filters {
  padding: 0 16px 0; display: flex; flex-direction: column; gap: 10px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .25s ease, opacity .2s ease, padding-bottom .25s ease;
}
.filters.open { max-height: 220px; opacity: 1; padding-bottom: 12px; }
.filter-controls { display: flex; gap: 8px; }
.select {
  flex: 1; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: var(--radius-md); padding: 8px 10px; font-size: 16px; min-width: 0;
}
.search-row {
  display: flex; align-items: center; gap: 8px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 12px;
}
.search-icon { color: var(--text-muted); flex-shrink: 0; }
.search-row input { border: none; background: transparent; color: var(--text); outline: none; font-size: 16px; width: 100%; }

/* ---------- Views ---------- */
.view[hidden] { display: none; }
.feed { padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 40vh; }
.feed[hidden] { display: none; }

.skeleton-list { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.skeleton-card { height: 220px; border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--surface) 30%, var(--border) 50%, var(--surface) 70%); background-size: 300% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }

.empty-state { text-align: center; padding: 60px 24px; color: var(--text-muted); }
.empty-state.hidden { display: none; }
.empty-emoji { font-size: 40px; margin-bottom: 10px; }
.muted { color: var(--text-muted); }
.muted.small { font-size: 13px; }

/* ---------- Lot cards (Аукционы / Ставки) ---------- */
.card {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  overflow: hidden; border: 1px solid var(--border); animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card.removing { animation: fadeOut .2s ease forwards; }
@keyframes fadeOut { to { opacity: 0; transform: scale(.97); } }

.card-media { position: relative; width: 100%; aspect-ratio: 16/10.5; background: var(--bg); overflow: hidden; }
.card-media img, .card-media .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.thumb-placeholder {
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px;
  background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 10px, var(--surface) 10px, var(--surface) 20px);
}
.badge {
  position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--accent-dark) 88%, transparent);
  backdrop-filter: blur(4px);
}
.badge-archived {
  position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #fff; background: rgba(20,20,20,.55);
}
.countdown-badge {
  position: absolute; bottom: 10px; left: 10px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(20,20,20,.6);
}
.countdown-badge.ending-soon { background: var(--danger); }

.card-body { padding: 12px 14px 6px; cursor: pointer; }
.card-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-price { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.card-price-native { font-size: 12.5px; color: var(--text-muted); }
.card-title { font-size: 14px; color: var(--text); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.card-updated { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.card-bid-row { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.bid-pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.bid-pill.your-bid { color: var(--accent-dark); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); font-weight: 700; }
.status-tag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.status-tag.status-win { background: var(--good-soft); color: var(--good); }
.status-tag.status-lose { background: var(--danger-soft); color: var(--danger); }
.status-tag.status-neutral { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.card-note-preview { margin: 8px 14px 0; padding: 8px 10px; background: var(--accent-soft); border-radius: var(--radius-md); font-size: 13px; color: var(--text); white-space: pre-wrap; }

.card-actions { display: flex; border-top: 1px solid var(--border); margin-top: 10px; }
.card-actions button {
  flex: 1; border: none; background: transparent; color: var(--text); padding: 11px 6px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border-right: 1px solid var(--border);
  transition: background .15s ease;
}
.card-actions button:last-child { border-right: none; }
.card-actions button:active { background: var(--bg); }
.card-actions .act-open { color: var(--accent-dark); }
.card-actions .act-archive.is-archived { color: var(--danger); }
.card-actions .act-comment.has-note { color: var(--accent-dark); }

.all-lot-card { display: block; text-decoration: none; color: inherit; }

.pagination-row {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 4px 16px 20px;
}
.pagination-row.hidden { display: none; }
.pg-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer;
}
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-info { font-size: 13px; color: var(--text-muted); min-width: 90px; text-align: center; }

/* ---------- Monitoring ---------- */
.monitor-grid { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .monitor-grid { grid-template-columns: 1fr; } }
.monitor-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.monitor-card.is-stale { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface)); }
.monitor-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.monitor-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex-shrink: 0; }
.monitor-card.is-stale .monitor-dot { background: var(--danger); }
.monitor-count { font-size: 22px; font-weight: 800; margin-top: 4px; }
.monitor-row { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.monitor-updated { font-size: 11.5px; margin-top: 6px; color: var(--text-muted); }
.monitor-updated.is-stale { color: var(--danger); font-weight: 600; }
.monitor-summary-bar { padding: 12px 16px 0; display: flex; gap: 10px; }
.monitor-summary-pill { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; text-align: center; }
.monitor-summary-pill b { display: block; font-size: 18px; }
.monitor-summary-pill span { font-size: 11.5px; color: var(--text-muted); }

/* ---------- Projects ---------- */
.projects-grid { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.project-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow-card);
}
.project-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.project-name { font-size: 17px; font-weight: 800; }
.project-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.project-progress-pct { font-size: 15px; font-weight: 800; color: var(--accent-dark); flex-shrink: 0; }
.progress-track { height: 8px; border-radius: 999px; background: var(--bg); margin-top: 12px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #dcb876); transition: width .3s ease; }
.project-progress-label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ---------- Before/After comparison slider ---------- */
/* Dragging only starts from the handle (see .ba-handle touch-action below) —
   the frame itself keeps normal touch behaviour so the page still scrolls
   and the card still opens on tap when you touch the photo, not the handle. */
.ba-slider { margin-bottom: 12px; -webkit-user-select: none; user-select: none; }
.ba-slider-frame {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg);
}
.ba-slider-compact .ba-slider-frame { aspect-ratio: 16/10.5; }
.ba-slider-large .ba-slider-frame { aspect-ratio: 4/3; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-img-before { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.ba-label {
  position: absolute; top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; color: #fff;
  background: color-mix(in srgb, var(--text) 55%, transparent); pointer-events: none;
}
.ba-label-before { left: 8px; }
.ba-label-after { right: 8px; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos);
  width: 44px; transform: translateX(-50%);
  cursor: ew-resize; touch-action: none; pointer-events: auto;
}
.ba-handle::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%); background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.ba-handle-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}
.ba-slider.ba-dragging .ba-handle-grip { background: var(--accent); color: #14161a; }

.category-block { margin-top: 18px; }
.category-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.category-count { font-weight: 500; text-transform: none; letter-spacing: 0; }
.todo-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.todo-row:last-child { border-bottom: none; }
.todo-check {
  width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--border); background: var(--surface);
  flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.todo-check.done { background: var(--good); border-color: var(--good); }
.todo-check svg { opacity: 0; transition: opacity .1s ease; }
.todo-check.done svg { opacity: 1; }
.todo-body { flex: 1; min-width: 0; }
.todo-text { font-size: 14.5px; line-height: 1.4; }
.todo-text.done { color: var(--text-muted); text-decoration: line-through; }
.todo-done-at { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.todo-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.purchase-link {
  display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600;
  color: var(--accent-dark); text-decoration: none;
}
.purchase-link:active { opacity: .7; }

.activity-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.activity-row:last-child { border-bottom: none; }
.activity-text { font-size: 14px; line-height: 1.4; }
.activity-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.todo-photos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.todo-photo-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; cursor: pointer; border: 1px solid var(--border); }
.todo-photo-add {
  width: 52px; height: 52px; border-radius: 8px; border: 1.5px dashed var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; flex-shrink: 0;
}
.todo-del { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.todo-del:active { background: var(--bg); }


/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 620px; display: flex; justify-content: space-evenly;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + var(--safe-bottom)); z-index: 30;
  /* More tabs than fit a phone-width bar now that Видео joined the other
     admin-only sections — scroll horizontally instead of squeezing every
     button down until labels/icons overlap. justify-content stays
     space-evenly so it still looks centered/evenly spread on wide viewports
     where everything already fits without scrolling. */
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bottom-nav::-webkit-scrollbar { display: none; }
/* Deliberately not flex:1 — some logins (manager role) only ever see one of
   these buttons, and a lone flex:1 item stretches to fill the whole bar
   instead of sitting as a compact, centered tab. space-evenly on the parent
   naturally centers however many buttons are actually visible: evenly
   spread across 4, or dead-center when only 1 remains. */
.nav-btn {
  flex: 0 0 auto; min-width: 72px; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-muted); font-size: 11px; padding: 4px 10px; cursor: pointer;
}
.nav-btn.active { color: var(--accent-dark); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: calc(76px + var(--safe-bottom)); left: 50%; transform: translateX(-50%) translateY(20px);
  background: #16181d; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 50; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Sheet (modal) ---------- */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(10,12,16,.5); z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  /* Fast and starting already-mostly-opaque — the backdrop needs to mask the
     background page (see the .topbar rule above: un-sticking it during the
     lock briefly repositions it) within the same couple of frames, not fade
     in slowly from fully transparent, or that reposition flashes through. */
  animation: overlayFadeIn .12s ease;
}
.sheet-overlay.hidden { display: none; }
.sheet {
  position: relative; background: var(--surface); width: 100%; max-width: 620px; max-height: 92vh;
  border-radius: 20px 20px 0 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: slideUp .38s ease-out;
  padding-bottom: calc(20px + var(--safe-bottom));
  overscroll-behavior: contain;
  min-height: 0;
}
/* The project detail sheet specifically should open essentially full-screen
   on mobile regardless of how much content a given project has — otherwise a
   project with few tasks shrink-wraps to its content (since .sheet-overlay
   is bottom-aligned) and leaves a large, inconsistent gap at the top. Scoped
   to mobile only (matches the existing 640px breakpoint below) since a
   literal full-height sheet would look wrong as a centered desktop modal. */
@media (max-width: 639px) {
  /* 100vh on mobile Safari is the height with browser chrome (address bar)
     hidden — the actual visible area varies as that chrome shows/hides,
     which is exactly why this looked right sometimes and clipped/gapped
     other times. 100dvh tracks the real visible viewport instead. */
  #sheet { min-height: calc(100dvh - var(--safe-top) - 10px); max-height: calc(100dvh - var(--safe-top) - 10px); }
}
@keyframes slideUp { 0% { transform: translateY(100%); } 70% { transform: translateY(-15px); } 100% { transform: translateY(0); } }
@keyframes overlayFadeIn { from { background-color: rgba(10,12,16,.35); } to { background-color: rgba(10,12,16,.5); } }
.sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 999px; margin: 10px auto 4px; }
.sheet-content { padding: 6px 18px 18px; width: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; }
.close-x {
  position: absolute; top: 14px; right: 14px; z-index: 5; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg); border: none; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
@media (min-width: 640px) { .sheet-overlay { align-items: center; } .sheet { border-radius: 20px; max-height: 88vh; margin: 20px; } }

/* Task-creation / move-todo modals stack above the project sheet */
#taskModalOverlay { z-index: 55; }
#historyModalOverlay { z-index: 55; }
#donePhotoOverlay { z-index: 55; }
#purchaseModalOverlay { z-index: 55; }

.done-photo-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.btn-plain { background: transparent; border: none; color: var(--text-muted); padding: 10px; font-size: 15px; cursor: pointer; }
.modal-sheet { max-width: 480px; }

.field-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 16px 0 6px; }
.field-label:first-of-type { margin-top: 4px; }
.new-name-input {
  width: 100%; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: var(--radius-md); padding: 9px 12px; font-size: 16px; margin-top: 8px;
}
.new-name-input.hidden { display: none; }

.task-photo-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.task-photo-preview { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.task-photo-remove {
  position: relative; width: 64px; height: 64px;
}
.task-photo-remove button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--danger); color: #fff; border: 2px solid var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; padding: 0;
}

.subcategory-block { margin: 10px 0 4px 8px; padding-left: 10px; border-left: 2px solid var(--border); }
.subcategory-title { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.subcategory-count { font-weight: 500; }

.todo-edit-chevron {
  flex-shrink: 0; align-self: center; width: 28px; height: 28px; border-radius: 50%;
  border: none; background: transparent; color: var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.todo-edit-chevron:active { background: var(--bg); color: var(--text-muted); }

.add-project-header-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--accent); color: #14161a;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}

.header-toggle-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.header-toggle-btn.active { background: var(--accent); border-color: var(--accent); color: #14161a; }

.detail-media { position: relative; width: 100%; aspect-ratio: 16/11; border-radius: var(--radius-md); overflow: hidden; background: var(--bg); margin-bottom: 14px; }
.detail-media img { width: 100%; height: 100%; object-fit: cover; }
.detail-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.detail-price { font-size: 24px; font-weight: 800; }
.detail-price-native { font-size: 13.5px; color: var(--text-muted); }
.detail-title { font-size: 15px; margin-top: 4px; color: var(--text); }
.detail-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.meta-pill { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 12px; color: var(--text-muted); }
.detail-desc { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-muted); white-space: pre-wrap; }
.detail-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 18px 0 8px; }

.note-textarea {
  width: 100%; min-height: 90px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px;
  font-size: 16px; font-family: inherit; background: var(--bg); color: var(--text); resize: vertical;
}
.note-textarea:focus { outline: none; border-color: var(--accent); }

.detail-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn {
  flex: 1; border: none; border-radius: var(--radius-md); padding: 13px 10px; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #14161a; }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-danger-outline { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); }
.btn-save { background: var(--text); color: var(--surface); margin-top: 10px; width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

/* Price history mini chart (shared look with the auction detail sheet) */
.price-history-box { }

/* ---------- Объявления (Avito auto-refresh) ---------- */
.avito-card {
  margin: 12px 16px; padding: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.avito-card input.select, .avito-card select.select { width: 100%; }
.avito-card .hidden { display: none; }
.avito-login-picker {
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  padding-bottom: 14px;
}
.avito-login-picker > label { display: block; margin-bottom: 7px; }
.avito-login-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 36px;
  gap: 8px;
  align-items: center;
}
.avito-login-picker-row .select { min-width: 0; }
.avito-login-picker-row .icon-btn:disabled { cursor: default; opacity: .4; }
.listing-task-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card);
  overflow: hidden;
}
.listing-slider {
  position: relative; aspect-ratio: 16 / 10; margin: 0 -16px 2px; background: var(--bg); overflow: hidden;
}
.listing-slider img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.listing-slider-count {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px;
  background: rgba(15, 17, 20, .72); color: #fff; font-size: 11px; line-height: 1.2;
}
.listing-slider-btn {
  position: absolute; top: 50%; translate: 0 -50%; width: 34px; height: 44px; border: 0;
  background: rgba(15, 17, 20, .62); color: #fff; font-size: 28px; cursor: pointer;
}
.listing-slider-btn.prev { left: 0; }
.listing-slider-btn.next { right: 0; }
.listing-task-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.listing-task-heading { min-width: 0; }
.listing-task-tools { display: flex; gap: 6px; flex-shrink: 0; }
.listing-task-title { font-size: 15px; font-weight: 700; line-height: 1.35; word-break: break-word; }
.listing-task-price { margin-top: 3px; font-size: 18px; font-weight: 800; }
.listing-task-url { font-size: 12px; color: var(--text-muted); word-break: break-all; }
.listing-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--border);
}
.listing-stats > div { min-width: 0; padding: 9px 5px; text-align: center; }
.listing-stats > div + div { border-left: 1px solid var(--border); }
.listing-stats strong { display: block; font-size: 15px; }
.listing-stats span {
  display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; line-height: 1.25;
  overflow-wrap: anywhere;
}
.listing-task-description {
  color: var(--text-muted); font-size: 13px; line-height: 1.45; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.listing-task-meta { font-size: 12px; color: var(--text-muted); }
.listing-task-meta.status-failed { color: var(--danger); }
.listing-edit-status { color: var(--text-muted); font-size: 12px; }
.listing-edit-status.success { color: var(--good); }
.listing-edit-status.failed { color: var(--danger); }
.listing-variants-state { margin-top: 10px; color: var(--text-muted); font-size: 12px; }
.listing-variants-state.failed { color: var(--danger); }
.listing-description-variants { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.listing-description-variants summary { color: var(--text-muted); font-size: 12px; cursor: pointer; }
.listing-search-insights { border-top: 1px solid var(--border); padding-top: 10px; }
.listing-search-insights summary { color: var(--text-muted); font-size: 12px; cursor: pointer; }
.listing-search-recommendations,
.listing-search-queries { display: grid; gap: 8px; margin-top: 10px; }
.listing-search-recommendations > div,
.listing-search-queries > div { min-width: 0; border-left: 2px solid var(--border); padding-left: 9px; }
.listing-search-recommendations strong,
.listing-search-queries strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.listing-search-recommendations span,
.listing-search-queries span {
  display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.listing-variant-ranking { display: grid; gap: 10px; margin-top: 10px; }
.listing-variant-row { min-width: 0; border-left: 2px solid var(--border); padding-left: 9px; }
.listing-variant-row.active { border-left-color: var(--good); }
.listing-variant-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.listing-variant-head span { color: var(--good); }
.listing-variant-metrics { margin-top: 3px; color: var(--text-muted); font-size: 11px; overflow-wrap: anywhere; }
.listing-variant-preview {
  display: -webkit-box; margin-top: 5px; color: var(--text-muted); font-size: 12px; line-height: 1.4;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap;
}
.listing-owner-warning {
  padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft);
  color: var(--text-muted); font-size: 12px; line-height: 1.4;
}
.listing-task-actions { display: flex; gap: 8px; align-items: center; }
.toggle-switch {
  position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; transition: background .15s ease;
}
.toggle-switch.on { background: var(--accent); border-color: var(--accent); }
.toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.toggle-switch.on::after { transform: translateX(18px); }
.icon-btn-danger { color: var(--danger); }
.listing-edit-form { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; max-width: 100%; }
.listing-edit-form .field-label { margin-top: 6px; }
.listing-edit-form .select { width: 100%; max-width: 100%; }
.listing-edit-form .note-textarea { display: block; width: 100%; max-width: 100%; min-height: 150px; }
.listing-edit-form .btn { margin-top: 8px; flex: none; }
.listing-edit-photos-head {
  display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin-top: 6px;
}
.listing-photo-add { position: relative; cursor: pointer; }
.listing-photo-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.listing-photo-add.disabled { opacity: .4; cursor: default; }
.listing-edit-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; min-width: 0; }
.listing-edit-photo {
  position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); cursor: grab;
}
.listing-edit-photo:active { cursor: grabbing; }
.listing-edit-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.listing-edit-photo-order {
  position: absolute; top: 5px; left: 5px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 5px; background: rgba(15, 17, 20, .72);
  color: #fff; font-size: 10px;
}
.listing-edit-photo-actions {
  position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(15, 17, 20, .76);
}
.listing-edit-photo-actions button {
  height: 30px; padding: 0; border: 0; border-right: 1px solid rgba(255,255,255,.2);
  background: transparent; color: #fff; font-size: 20px; cursor: pointer;
}
.listing-edit-photo-actions button:last-child { border-right: 0; color: #ff8b95; }
.listing-edit-photo-actions button:disabled { opacity: .3; cursor: default; }
.price-history-loading, .price-history-empty { font-size: 13.5px; color: var(--text-muted); padding: 4px 0; }
.price-history-chart-wrap { position: relative; width: 100%; touch-action: pan-y; }
.price-history-svg { width: 100%; height: 100px; display: block; overflow: visible; cursor: crosshair; }
.ph-grid { stroke: var(--border); stroke-width: 1; }
.ph-dot-end { stroke: var(--surface); stroke-width: 2; }
.ph-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; flex-wrap: wrap; padding: 4px 0; }
.ph-row-date { color: var(--text-muted); min-width: 78px; }
.ph-row-price { font-weight: 600; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 60; display: flex; align-items: center; justify-content: center; }
.lightbox.hidden { display: none; }
.lightbox img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 6px; }

/* ---------- Login screen ---------- */
.login-screen {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-screen.hidden { display: none; }
.login-card {
  width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px 24px;
  display: flex; flex-direction: column; align-items: center;
}
.login-logo { width: 108px; height: 108px; border-radius: 26px; margin-bottom: 14px; }
.login-title { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.login-card .field-label { align-self: flex-start; }
.login-card input { margin-top: 8px; }
.login-error { color: var(--danger); font-size: 13px; margin-top: 10px; text-align: center; }
.login-error.hidden { display: none; }

/* ---------- Видео (scenario planning board) ---------- */
.scenario-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card);
  cursor: pointer; transition: transform .15s ease, border-color .15s ease;
}
.scenario-card:active { transform: scale(.985); }
.scenario-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.scenario-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.scenario-status-pill {
  flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .02em;
}
.scenario-status-idea { background: var(--info); color: #0b1220; opacity: .9; }
.scenario-status-shooting { background: var(--accent); color: #1a1204; }
.scenario-status-editing { background: #9b6bd8; color: #180c2b; }
.scenario-status-published { background: var(--good); color: #06231a; }
.scenario-hook { color: var(--text-muted); font-size: 13.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scenario-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.scenario-tag {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); border: 1px solid transparent;
}
.scenario-car-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--bg);
  color: var(--text-muted); border: 1px solid var(--border);
}
.scenario-refs-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.scenario-refs-strip::-webkit-scrollbar { display: none; }
.scenario-ref-thumb {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border); background: var(--bg);
}
.scenario-ref-thumb.link {
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 16px;
}
.scenario-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scenario-checklist-progress { display: flex; align-items: center; gap: 6px; min-width: 0; }
.scenario-progress-track { width: 56px; height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; flex-shrink: 0; }
.scenario-progress-fill { height: 100%; background: var(--good); border-radius: inherit; transition: width .2s ease; }
.scenario-meta { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

/* Scenario editor (task modal) */
.scenario-editor { display: flex; flex-direction: column; gap: 14px; }
.scenario-status-select { display: flex; gap: 8px; flex-wrap: wrap; }
.scenario-status-option {
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
  padding: 7px 13px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: all .15s ease;
}
.scenario-status-option.active { border-color: var(--accent); color: var(--text); font-weight: 600; background: var(--accent-soft); }
.scenario-section-title {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  margin-top: 4px;
}
.scenario-checklist { display: flex; flex-direction: column; gap: 6px; }
.scenario-checklist-item {
  display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 9px 11px;
}
.scenario-checklist-item.done .scenario-checklist-label { text-decoration: line-through; color: var(--text-muted); }
.scenario-checklist-label { flex: 1; font-size: 14px; word-break: break-word; }
.scenario-checklist-check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: transparent;
}
.scenario-checklist-item.done .scenario-checklist-check { background: var(--good); border-color: var(--good); color: #06231a; }
.scenario-checklist-add { display: flex; gap: 8px; }
.scenario-refs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scenario-ref-card {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg);
}
.scenario-ref-card img { width: 100%; height: 100%; object-fit: cover; }
.scenario-ref-card.link-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px; text-align: center; text-decoration: none; color: var(--text);
}
.scenario-ref-card.link-card span { font-size: 11px; color: var(--text-muted); word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.scenario-ref-remove {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(14,15,18,.72); color: #fff; border: none; display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 14px; line-height: 1;
}
.scenario-add-link-row { display: flex; gap: 8px; }
.scenario-stats-row { display: flex; gap: 10px; }
.scenario-stats-row .field-label { margin-bottom: 4px; }
.scenario-stats-row > div { flex: 1; min-width: 0; }