/* WorkRadar Mini App — собственный premium SaaS UI (не Telegram theme,
   STAGE 9.1, раздел 6). Mobile-first, safe-area aware.

   MINI APP POLISH, раздел 2 — визуальный слой (только значения токенов и
   существующих правил, без единого нового/удалённого класса — все
   селекторы ниже 1:1 совпадают с разметкой в `miniapp/src/app.js`, поэтому
   полировка не требует правок бизнес-логики). Единая шкала отступов
   (4/6/8/10/12/14/16/20), приглушённая деловая индиго-палитра вместо
   ярко-фиолетового градиента, более тихие тени, аккуратные hover/active. */

/* MINI APP DARK MIGRATION (2026-08-22) — internal screens now match the
   owner-approved Home dark premium direction unconditionally (fixed dark
   tokens, no `prefers-color-scheme` branch), same principle already used by
   `body.is-home` below: every `.card`/`.stat-tile`/`.action-btn`/`.list-row`/
   `.match-card`/form/dialog on /matches, /review, /profile, /profile/edit,
   /credits, /pro, /referral, /support, /onboarding reads these `--wr-*`
   tokens, so flipping them here reskins the whole app in one place without
   touching markup, API calls, or business logic. */

/* INTERNAL SCREENS LIGHTEN FIX (2026-08-22) — owner accepted the dark
   premium direction but found internal screens too dark, forms in
   particular hard to read while typing. `--wr-bg`/`--wr-surface`/
   `--wr-surface-2`/`--wr-border` bumped ~15-20% lighter (Home is untouched:
   it reads `--hv-*` locals on `.home-v2` plus hardcoded colors under
   `body.is-home`, not these tokens). New `--wr-field-*`/`--wr-placeholder`
   tokens give `.textarea`/`.text-input` — the only two field classes in
   `app.js`, covering onboarding, profile edit, vacancy paste, support —
   a background clearly lighter than any card surface, a visible focus
   glow, and a legible placeholder. */
:root {
  /* RABOTA EST PREMIUM FINAL — internal-screen tokens realigned to the
     final pack palette: graphite/warm-office base (was indigo-tinted navy)
     with a warm gold/bronze primary accent (was violet), see task п.3/7.
     `.home-v2`/`--hv-*` below is a separate, already-approved scope and is
     intentionally left untouched. */
  --wr-bg: #17171a;
  --wr-surface: #201f22;
  --wr-surface-2: #262428;
  --wr-border: #38363c;
  --wr-text: #f1f2f9;
  --wr-text-muted: #9598b8;
  --wr-placeholder: #a4a7c2;
  --wr-field-bg: #302d33;
  --wr-field-border: #423e46;
  --wr-field-glow: rgba(185, 129, 47, 0.35);
  --wr-accent: #b9812f;
  --wr-accent-2: #8a5a1f;
  --wr-accent-soft: rgba(185, 129, 47, 0.16);
  --wr-accent-contrast: #ffffff;
  --wr-success: #34c38f;
  --wr-success-soft: rgba(52, 195, 143, 0.14);
  --wr-warning: #e0a63e;
  --wr-warning-soft: rgba(224, 166, 62, 0.14);
  --wr-danger: #f0645c;
  --wr-danger-soft: rgba(240, 100, 92, 0.14);
  --wr-radius-lg: 18px;
  --wr-radius-md: 12px;
  --wr-radius-sm: 9px;
  --wr-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35);
  --wr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --wr-ease: 150ms ease;
  /* PREMIUM V3 — shared "raised surface" recipe: a hairline top highlight
     (inset, mimics light catching a bevel) stacked with a soft ambient
     shadow and a tighter contact shadow, so every card/button reads as a
     slightly domed object instead of a flat rectangle. `--wr-press-*` is
     the matching "sunken" recipe applied on `:active` — highlight fades,
     shadow tightens, surface nudges down 1-2px — so taps feel physically
     depressed rather than just scaled. */
  --wr-raised-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --wr-raised-edge: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --wr-raised-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 22px rgba(4, 6, 16, 0.4), 0 2px 6px rgba(4, 6, 16, 0.3);
  --wr-press-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  --wr-glow-accent: 0 0 0 1px rgba(185, 129, 47, 0.22), 0 0 18px rgba(185, 129, 47, 0.22);
  --wr-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  --wr-ease-press: 120ms cubic-bezier(0.33, 0, 0.2, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--wr-bg);
  color: var(--wr-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* HOME REDESIGN v7 — Home keeps the approved premium dark visual
   regardless of system color scheme (TASK v7, п.1/13): `body.is-home` is
   toggled only for path "/" in route() (app.js), so every other screen
   and light theme elsewhere stays exactly as before. The global sticky
   brand bar and bottom navigation are hidden here too — Home renders its
   own approved composition inside `.home-v2` without duplicate navigation
   chrome (TASK v7, п.2/8). */
/* RABOTA EST PREMIUM V2 — approved premium-graphite.webp added as a
   decorative photo layer under the existing tint gradients (purely
   background, `.home-v2` cards/status/quick-row above stay real HTML/CSS,
   see task п.8: "не использовать как fullscreen screenshot интерфейса"). */
/* CREDITS UX + BACKGROUND LIGHTEN (2026-08-22) — owner request: Home reads
   noticeably darker than the rest of the app; lighten the composite ~17%
   (mid of the requested 15-20% range) without touching any card/label DOM
   or the Home tile layout. A flat translucent white wash on top of the
   existing photo+gradient stack blends every layer toward white by a fixed
   fraction — cheapest way to lighten a multi-layer background uniformly
   without re-exporting the photo or editing the tile markup/CSS below. */
/* HOME OFFICE V1 (2026-08-22) — office/shelf background replaces the old
   indigo/violet-tinted `premium-graphite.webp` composite (TASK: "graphite /
   warm gray; тёплый золотистый свет; без синего cyberpunk; без кислотного
   glow"). The blue/violet radial accents are gone; a warm bronze/gold glow
   sits at the top (under the lamp) and the graphite office photo is heavily
   darkened so it reads as a soft layer behind the interface, never as a
   literal photo (TASK: "не превращать Home в фотографию офиса"). */
body.is-home {
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(214, 176, 105, 0.16) 0%, rgba(214, 176, 105, 0) 60%),
    linear-gradient(180deg, rgba(23, 24, 26, 0.88) 0%, rgba(23, 24, 26, 0.93) 40%, rgba(19, 20, 22, 0.97) 100%),
    url("/assets/rabota-est-office-v1/backgrounds/office-mobile.webp?v=20260822-office-v1") center top / cover no-repeat,
    linear-gradient(180deg, #27282a 0%, #1d1e20 55%, #17181a 100%);
}
.is-home .app-header { display: none; }
/* HOME OFFICE V1 — bottom nav stays visible on Home (TASK п.10); `.view`
   keeps the shared `calc(92px + var(--safe-bottom))` bottom padding (see
   default `.view` rule above) so shelf content never sits under the
   floating nav dock. */
/* HOME SHELF SPACIOUS (2026-08-23) — Home only (scoped to `.is-home`, every
   other screen keeps the shared 16px `.view` padding): narrower outer side
   margins so the real-DOM shelf (`.ho-shelf-frame` below) can claim almost
   the full WebView width, per TASK "стеллаж должен занимать почти всю
   доступную ширину". */
.is-home .view { padding-left: 9px; padding-right: 9px; }
.is-home .loading-state { color: rgba(240, 242, 250, 0.62); }
.is-home .error-state { color: #ff9c93; }
.is-home .retry-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #f3f5fb;
  box-shadow: none;
}

/* MINI APP DARK MIGRATION — the old light global brand bar ("WR
   WorkRadar") is removed app-wide (not just on Home): every internal
   screen now gets its own compact dark header via `.screen-header`
   (back + section title, see `screenHeader()` in app.js) instead of a
   second, duplicate title underneath a big logo. `applyRouteChrome()` in
   app.js only ever toggles an inline `display` override on this element
   (added on Home, removed elsewhere) — leaving the stylesheet default at
   `none` means it now stays hidden everywhere, Home included. */
.app-header { display: none; }

.brand { display: flex; align-items: center; gap: 9px; }

.brand-badge {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--wr-accent), var(--wr-accent-2));
  color: var(--wr-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }

.view {
  flex: 1;
  padding: 2px 16px calc(92px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ------------------------------------------------------- bottom navigation --
   Постоянная нижняя навигация (TASK, раздел 7): Главная/Подходящие/
   Разобрать/Профиль. Рендерится один раз в статичный `#bottom-nav` из
   index.html (см. `renderBottomNav()`/`updateBottomNavActive()` в app.js),
   поэтому стили ниже не зависят от `.home-v2`/других экранов. */

/* PREMIUM V3 — "elevated dock": the nav surface is inset from the screen
   edges and floats above the background on its own shadow, like a physical
   dock, instead of a bar glued flush to the viewport edge. */
.bottom-nav {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(8px + var(--safe-bottom));
  z-index: 20;
  display: flex;
  padding: 6px calc(4px + var(--safe-right)) 6px calc(4px + var(--safe-left));
  background: linear-gradient(180deg, var(--wr-surface-2) 0%, var(--wr-surface) 70%);
  border: 1px solid var(--wr-border);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 28px rgba(3, 4, 12, 0.5),
    0 2px 8px rgba(3, 4, 12, 0.4);
}

.bottom-nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px 5px;
  border: none;
  border-radius: 13px;
  background: none;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wr-text-muted);
  cursor: pointer;
  transition: color var(--wr-ease), transform var(--wr-ease-press), background var(--wr-ease-press);
}

.bottom-nav-item svg { display: block; position: relative; z-index: 1; }
.bottom-nav-item span { position: relative; z-index: 1; }
.bottom-nav-item:active { transform: translateY(1px) scale(0.94); }
.bottom-nav-item.is-active {
  color: var(--wr-accent-contrast);
  background: linear-gradient(160deg, var(--wr-accent) 0%, var(--wr-accent-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(185, 129, 47, 0.4);
}

.loading-state, .error-state, .empty-state {
  margin-top: 36px;
  text-align: center;
  color: var(--wr-text-muted);
  font-size: 14px;
}

.error-state { color: var(--wr-danger); }

.retry-btn {
  margin-top: 12px;
  border: 1px solid var(--wr-border);
  background: linear-gradient(180deg, var(--wr-surface-2) 0%, var(--wr-surface) 65%);
  box-shadow: var(--wr-raised-highlight), var(--wr-raised-shadow);
  color: var(--wr-text);
  padding: 9px 16px;
  border-radius: var(--wr-radius-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--wr-ease-press), box-shadow var(--wr-ease-press);
}

.retry-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: var(--wr-press-shadow);
}

/* MINI APP DARK MIGRATION — единый компактный dark header для ВСЕХ
   внутренних экранов (TASK, раздел 2): back + название раздела, без
   отдельного крупного логотипа (тот жил в `.app-header`, теперь скрыт
   везде, см. выше). `screenHeader()` в app.js — единственное место,
   которое рендерит эту разметку, поэтому патч здесь покрывает разом
   /matches, /review, /profile, /profile/edit, /credits, /pro, /referral,
   /support, /onboarding. Sticky и несёт собственный safe-area отступ
   сверху — раньше эту роль играл `.app-header`. Системную панель Telegram
   (нативная BackButton) это не заменяет и не трогает. */
.screen-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px;
  padding: calc(var(--safe-top) + 12px) 0 10px;
  background: var(--wr-bg);
}

.screen-header-text { min-width: 0; }

.screen-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-sub { color: var(--wr-text-muted); font-size: 13px; margin: 1px 0 0; line-height: 1.35; }

.back-btn {
  flex: 0 0 auto;
  border: 1px solid var(--wr-border);
  background: linear-gradient(180deg, var(--wr-surface-2) 0%, var(--wr-surface) 65%);
  box-shadow: var(--wr-raised-highlight), var(--wr-raised-shadow);
  color: var(--wr-text);
  width: 32px;
  height: 32px;
  border-radius: var(--wr-radius-sm);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--wr-ease-press), box-shadow var(--wr-ease-press);
}

.back-btn:active {
  transform: translateY(1px) scale(0.94);
  box-shadow: var(--wr-press-shadow);
}

/* ----------------------------------------------------- unified card system --
   `.card` — базовая карточка (профиль/детали/пустые состояния),
   `.stat-tile`/`.action-btn`/`.list-row`/`.match-card`/`.ticket-card` — её
   варианты с одинаковыми радиусом/тенью/бордером, чтобы весь Mini App
   читался одной системой, а не набором разных компонентов. */

.card {
  background: linear-gradient(180deg, var(--wr-surface-2) 0%, var(--wr-surface) 60%);
  border: 1px solid var(--wr-border);
  border-radius: var(--wr-radius-lg);
  box-shadow: var(--wr-raised-highlight), var(--wr-raised-edge), var(--wr-raised-shadow);
  padding: 14px 16px;
}

.hero-card {
  background: linear-gradient(150deg, #241a0c, var(--wr-accent) 60%, var(--wr-accent-2));
  color: var(--wr-accent-contrast);
  border-radius: var(--wr-radius-lg);
  padding: 16px 18px;
  box-shadow: var(--wr-shadow);
}

.hero-greeting { font-size: 13.5px; opacity: 0.82; margin: 0 0 3px; font-weight: 500; }
.hero-title { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

.stat-row { display: flex; gap: 8px; }

.stat-tile {
  flex: 1;
  background: linear-gradient(180deg, var(--wr-surface-2) 0%, var(--wr-surface) 65%);
  border: 1px solid var(--wr-border);
  border-radius: var(--wr-radius-md);
  padding: 11px 13px;
  box-shadow: var(--wr-raised-highlight), var(--wr-raised-shadow);
  transition: transform var(--wr-ease-press), box-shadow var(--wr-ease-press);
}

button.stat-tile { font: inherit; }
button.stat-tile:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: var(--wr-press-shadow);
}

.stat-label { font-size: 11.5px; color: var(--wr-text-muted); margin: 0 0 3px; font-weight: 600; letter-spacing: 0.01em; }
.stat-value { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.stat-value.pro-active { color: var(--wr-success); }
.stat-value.pro-inactive { color: var(--wr-text-muted); }

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 13px 12px;
  border-radius: var(--wr-radius-md);
  border: 1px solid var(--wr-border);
  background: linear-gradient(180deg, var(--wr-surface-2) 0%, var(--wr-surface) 65%);
  box-shadow: var(--wr-raised-highlight), var(--wr-raised-shadow);
  text-align: left;
  font: inherit;
  color: var(--wr-text);
  cursor: pointer;
  transition: transform var(--wr-ease-press), box-shadow var(--wr-ease-press), border-color var(--wr-ease);
}

.action-btn:active {
  transform: translateY(1px) scale(0.985);
  border-color: var(--wr-accent);
  box-shadow: var(--wr-press-shadow);
}

.action-icon { font-size: 19px; }
.action-label { font-size: 13.5px; font-weight: 600; line-height: 1.25; }

.secondary-list { display: flex; flex-direction: column; gap: 6px; }

.profile-company-signature {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--wr-text-muted);
  opacity: 0.75;
}

.profile-company-signature-short { font-weight: 600; }

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--wr-radius-md);
  border: 1px solid var(--wr-border);
  background: linear-gradient(180deg, var(--wr-surface-2) 0%, var(--wr-surface) 65%);
  box-shadow: var(--wr-raised-highlight), var(--wr-raised-shadow);
  font: inherit;
  color: var(--wr-text);
  cursor: pointer;
  text-align: left;
  transition: transform var(--wr-ease-press), box-shadow var(--wr-ease-press), border-color var(--wr-ease);
}

.list-row:active {
  transform: translateY(1px) scale(0.99);
  border-color: var(--wr-accent);
  box-shadow: var(--wr-press-shadow);
}

.list-row-label { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; }
.list-row-chevron { color: var(--wr-text-muted); font-size: 15px; }

.primary-btn {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--wr-radius-md);
  background: linear-gradient(160deg, #e8c47a 0%, var(--wr-accent) 45%, var(--wr-accent-2) 100%);
  color: var(--wr-accent-contrast);
  padding: 13px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(40, 26, 10, 0.35),
    0 10px 22px rgba(138, 90, 31, 0.38),
    0 2px 6px rgba(26, 18, 8, 0.3);
  transition: transform var(--wr-ease-press), box-shadow var(--wr-ease-press), opacity var(--wr-ease);
}

.primary-btn:active {
  transform: translateY(2px) scale(0.985);
  box-shadow:
    inset 0 2px 6px rgba(26, 18, 8, 0.45),
    0 4px 10px rgba(138, 90, 31, 0.28);
}
.primary-btn:disabled { opacity: 0.5; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.badge-good { background: var(--wr-success-soft); color: var(--wr-success); }
.badge-possible { background: var(--wr-warning-soft); color: var(--wr-warning); }

/* Neutral pill used for source/fit/meta chips (match card, profile chips) —
   same raised-pill language as `.badge` but on the surface palette instead
   of a status color. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  background: var(--wr-surface-2);
  border: 1px solid var(--wr-border);
  color: var(--wr-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.match-card { display: flex; flex-direction: column; gap: 7px; }
.match-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.match-category { font-size: 12px; color: var(--wr-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.match-title { font-size: 15.5px; font-weight: 700; margin: 0; line-height: 1.3; }
.match-meta { font-size: 12px; color: var(--wr-text-muted); margin: 0; }
.match-snippet, .match-snippet-full { font-size: 13.5px; line-height: 1.42; margin: 0; color: var(--wr-text); white-space: pre-wrap; }
.match-budget { font-size: 12.5px; color: var(--wr-text-muted); font-weight: 600; }
.match-link { font-size: 12.5px; color: var(--wr-accent); text-decoration: none; font-weight: 600; }

/* PREMIUM V3 (TASK раздел 6) — money row отдельным raised-объектом (не
   просто строкой текста), AI-разбор — inset-панель, чтобы карточка вакансии
   читалась как единый premium opportunity object. */
.match-money-row {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wr-text);
  background: var(--wr-surface-2);
  border: 1px solid var(--wr-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.match-summary {
  border-radius: var(--wr-radius-sm);
  background: var(--wr-bg);
  border: 1px solid var(--wr-border);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
  padding: 9px 11px;
}
.match-summary-label {
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-text-muted);
}

.match-chip-row { margin-top: 1px; }

.match-card .primary-btn { margin-top: 2px; }

/* MINI APP DARK MIGRATION, раздел 3 — короткое превью описания вместо
   стены текста, с возможностью раскрыть полностью (`data-match-expand` в
   app.js переключает `hidden` у пары `.match-snippet`/`.match-snippet-full`,
   без повторного запроса к серверу). */
.match-snippet-toggle {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 1px 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wr-accent);
  cursor: pointer;
}
.match-snippet-toggle:active { opacity: 0.7; }

/* STAGE 10.2 — действия на карточке совпадения («⭐ Сохранить» / «⏭
   Неинтересно» / «🔗 Открыть»), TASK раздел 7. */
.match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.match-actions .tone-btn,
.match-actions .match-open-link {
  flex: 1 1 auto;
  text-align: center;
}
/* Secondary vs. the raised primary CTA above (TASK раздел 6: "компактнее и
   визуально вторичнее") — flatter, smaller, no lift shadow. */
.match-actions-secondary,
.match-open-link {
  padding: 7px 7px;
  font-size: 11.5px;
  font-weight: 600;
  background: transparent;
  box-shadow: none;
  border-color: var(--wr-border);
  color: var(--wr-text-muted);
}
.match-actions-secondary:active,
.match-open-link:active { box-shadow: none; }
.match-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wr-border);
  border-radius: var(--wr-radius-sm);
  text-decoration: none;
  transition: transform var(--wr-ease-press);
}
.match-open-link:active { transform: translateY(1px) scale(0.97); }
.match-action-note {
  font-size: 12px;
  color: var(--wr-success);
  font-weight: 600;
  min-height: 14px;
}
.match-card-skipped { opacity: 0.45; }

.profile-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--wr-border); font-size: 13.5px; }
.profile-row:last-child { border-bottom: none; }
.profile-row-label { color: var(--wr-text-muted); }

/* PREMIUM V3 — /profile visual sections (TASK раздел 7), replacing the old
   long profile-row table with distinct raised cards + human-readable
   chips. `.card` already carries the raised-surface treatment. */
.profile-section { display: flex; flex-direction: column; gap: 7px; }
.profile-section-title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wr-text-muted);
}
.profile-section-value { margin: 0; font-size: 14px; line-height: 1.4; }
.profile-section-empty { color: var(--wr-text-muted); }

/* CREDITS UX (2026-08-22) — compact "как тратятся кредиты" rule list on
   /credits (`renderCredits`) and the pre-search cost hint on /matches
   (`renderMatches`): a short muted line under a `.profile-row`, reusing the
   existing `.profile-section`/`.profile-row` card so no new card markup is
   needed. */
.credit-rule-note { margin: -3px 0 2px; font-size: 12px; color: var(--wr-text-muted); line-height: 1.4; }

.placeholder-note {
  font-size: 12.5px;
  color: var(--wr-text-muted);
  background: var(--wr-surface-2);
  border-radius: var(--wr-radius-sm);
  padding: 11px 13px;
  line-height: 1.4;
}

/* STAGE 9.4 — /review, /referral, /support */

.field-label { font-size: 12.5px; color: var(--wr-text-muted); margin: 0 0 7px; font-weight: 600; letter-spacing: 0.01em; }

.textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--wr-field-border);
  border-radius: var(--wr-radius-sm);
  background: var(--wr-field-bg);
  color: var(--wr-text);
  caret-color: var(--wr-accent);
  font: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  min-height: 116px;
  box-shadow: var(--wr-inset-shadow);
  transition: border-color var(--wr-ease-press), box-shadow var(--wr-ease-press), background var(--wr-ease-press);
}
.textarea::placeholder { color: var(--wr-placeholder); }
.textarea:focus {
  outline: none;
  border-color: var(--wr-accent);
  background: var(--wr-surface-2);
  box-shadow: var(--wr-inset-shadow), 0 0 0 3px var(--wr-field-glow);
}

.inline-error {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--wr-danger);
}

/* BLOCKER FIX — Mini App onboarding: одиночные текстовые/числовые поля
   (город, страны, зарплата, бюджет), тот же визуальный язык, что и
   `.textarea` выше, только в одну строку. */
.text-input {
  width: 100%;
  border: 1px solid var(--wr-field-border);
  border-radius: var(--wr-radius-sm);
  background: var(--wr-field-bg);
  color: var(--wr-text);
  caret-color: var(--wr-accent);
  font: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  box-shadow: var(--wr-inset-shadow);
  transition: border-color var(--wr-ease-press), box-shadow var(--wr-ease-press), background var(--wr-ease-press);
}
.text-input::placeholder { color: var(--wr-placeholder); }
.text-input:focus {
  outline: none;
  border-color: var(--wr-accent);
  background: var(--wr-surface-2);
  box-shadow: var(--wr-inset-shadow), 0 0 0 3px var(--wr-field-glow);
}

.review-section-title { font-size: 12.5px; font-weight: 700; margin: 0 0 7px; letter-spacing: 0.01em; color: var(--wr-text-muted); text-transform: uppercase; }
.review-section p { margin: 0; font-size: 13.5px; line-height: 1.42; }
.review-section p + p { margin-top: 4px; }
.review-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.review-list li { margin-bottom: 2px; }
.review-empty { color: var(--wr-text-muted); }

.proposal-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

.tone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.tone-btn {
  border: 1px solid var(--wr-border);
  background: linear-gradient(180deg, var(--wr-surface-2) 0%, var(--wr-surface) 65%);
  color: var(--wr-text);
  border-radius: var(--wr-radius-sm);
  padding: 9px 8px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--wr-raised-highlight), 0 4px 10px rgba(4, 6, 16, 0.3);
  transition: transform var(--wr-ease-press), box-shadow var(--wr-ease-press), border-color var(--wr-ease);
}

.tone-btn:active {
  transform: translateY(1px) scale(0.97);
  border-color: var(--wr-accent);
  box-shadow: var(--wr-press-shadow);
}

.referral-link {
  font-size: 12.5px;
  word-break: break-all;
  background: var(--wr-surface-2);
  border-radius: var(--wr-radius-sm);
  padding: 10px 12px;
  margin: 0 0 12px;
}

.ticket-card { display: flex; flex-direction: column; gap: 7px; }
.ticket-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--wr-text-muted); font-weight: 600; }
.ticket-number { font-weight: 700; color: var(--wr-text); }
.ticket-message { font-size: 13.5px; line-height: 1.42; margin: 0; }
.ticket-reply {
  background: var(--wr-surface-2);
  border-radius: var(--wr-radius-sm);
  padding: 10px 12px;
}
.ticket-reply p { margin: 0; font-size: 13.5px; }
.ticket-reply .field-label { margin-bottom: 4px; }

/* ------------------------------------------------------- notifications -- */
/* STAGE 11 — экран `#/notifications` (`renderNotifications()` в app.js),
   reuses the shared `.card` base like `.ticket-card` above. */

.notification-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  margin-bottom: 10px;
}
.notification-card--unread { border-color: var(--wr-accent); background: var(--wr-accent-soft); }
.notification-top { display: flex; align-items: center; gap: 7px; }
.notification-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wr-accent);
}
.notification-title { font-size: 14px; font-weight: 700; }
.notification-date { margin-left: auto; font-size: 11.5px; color: var(--wr-text-muted); white-space: nowrap; }
.notification-message { margin: 0; font-size: 13.5px; line-height: 1.42; color: var(--wr-text-muted); }


/* ============================================================
   HOME SCREEN REDESIGN v7 — owner-approved visual reference, ported 1:1
   (TASK v7: "владелец визуально утвердил конкретное направление Home").
   Scoped strictly to `.home-v2` (rendered only by renderHome() in
   app.js) plus the `body.is-home` rules near the top of this file. Local
   custom properties below are declared on `.home-v2` itself, not on
   `:root`, so no other screen (matches/review/profile/credits/PRO/
   referral/support) is affected. Fixed dark tokens — no
   `prefers-color-scheme` branch — Home keeps its signature midnight
   visual in both system themes (TASK v7, п.1/13). */

.home-v2 {
  --hv-surface: rgba(255, 255, 255, 0.045);
  --hv-border: rgba(255, 255, 255, 0.09);
  --hv-text: #f3f5fb;
  --hv-text-muted: rgba(240, 242, 250, 0.6);
  --hv-accent: #7db8ff;
  --hv-success: #5fe3b3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: calc(var(--safe-top) + 10px);
}

/* ------------------------------------------------------------- header -- */

.hv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* HOME HEADER COMPACT (2026-08-22) — the old `.hv-hero` card (bordered,
   gradient-filled container with a large decorative hero image beneath the
   brand row) is removed on owner request: the top zone must read as a
   plain compact row on the shared app background, not a hero card. The
   brand mark is now a standalone transparent briefcase glyph (no
   background/border of its own) and the notification bell is the only
   header action — the former avatar/profile button is dropped since
   profile access already lives in "Мой профиль" + the bottom nav. */

.hv-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

.hv-brandmark {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fd3ff;
}
.hv-brandmark svg { display: block; }
.hv-brandmark img { display: block; width: 48px; height: 48px; object-fit: contain; }

.hv-brand-text { min-width: 0; }
.hv-brand-name { margin: 0 0 2px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: #ffffff; }
.hv-brand-sub { margin: 0; font-size: 12px; color: rgba(240, 242, 250, 0.56); line-height: 1.3; }

/* STAGE 11 — колокольчик уведомлений; единственное действие в шапке (TASK,
   раздел 5: "не ломать Home v1, не менять 4 основные карточки"). */
.hv-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.hv-bell {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--hv-border);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 10px rgba(2, 4, 12, 0.3);
  color: var(--hv-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--wr-ease-press), border-color 150ms ease, box-shadow var(--wr-ease-press);
}
.hv-bell:active {
  transform: translateY(1px) scale(0.94);
  border-color: var(--hv-accent);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}
.hv-bell svg { display: block; }
.hv-bell-icon { display: block; width: 32px; height: 32px; object-fit: contain; }

.hv-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #f0645c;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* --------------------------------------------------------- status row -- */

.hv-status-row { display: flex; gap: 8px; }

.hv-status-card {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4.5px 12px;
  border-radius: 13px;
  border: 1px solid var(--hv-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(2, 4, 12, 0.35);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: default;
}
.hv-status-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.24;
  pointer-events: none;
}
.hv-status-card--balance::before {
  background-image: url("/assets/rabota-est-v2/ui-surfaces/card-surface.webp?v=20260822-rabotaestv11");
}
.hv-status-card--pro::before {
  background-image: url("/assets/rabota-est-v2/ui-surfaces/card-surface.webp?v=20260822-rabotaestv11");
}
.hv-status-card > * {
  position: relative;
  z-index: 1;
}
.hv-status-card--btn { cursor: pointer; transition: transform 150ms ease, border-color 150ms ease, box-shadow var(--wr-ease-press); }
.hv-status-card--btn:active {
  transform: translateY(1px) scale(0.98);
  border-color: var(--hv-accent);
  box-shadow: var(--wr-press-shadow);
}

.hv-status-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(155deg, rgba(143, 211, 255, 0.32) 0%, rgba(143, 211, 255, 0.1) 100%);
  color: #8fd3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -6px 10px rgba(0, 0, 0, 0.18);
}
.hv-status-icon svg { display: block; }
.hv-status-icon img { display: block; width: 46px; height: 46px; object-fit: contain; }

.hv-status-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hv-status-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(240, 242, 250, 0.5);
  margin: 0;
}
.hv-status-value { font-size: 14px; font-weight: 700; margin: 0; color: #ffffff; }
.hv-status-value.is-on { color: var(--hv-success); }
.hv-status-value.is-off { color: rgba(240, 242, 250, 0.55); }

/* ------------------------------------------------------------ actions -- */

/* HOME TILES MINIMAL (2026-08-22) — owner request: drop the big colored
   card + inner icon plaque nesting under the 4 primary actions and the 3
   bottom actions. Each action is now just a large 3D glyph with a caption
   below it, no card background/border of its own — the shared premium
   graphite page background shows through. Tap target stays finger-sized via
   min-height/padding on the (now invisible) button, not via a visible box. */

.hv-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

.hv-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  min-height: 128px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  text-align: center;
  font: inherit;
  color: #ffffff;
  cursor: pointer;
  transition: transform var(--wr-ease-press), background 150ms ease;
}
.hv-action:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.05);
}

.hv-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hv-action-icon svg { display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
.hv-action-icon img { display: block; width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); }

.hv-action-title {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.24;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------- quick row -- */

.hv-quick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

.hv-quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  text-align: center;
  font: inherit;
  color: var(--hv-text);
  cursor: pointer;
  transition: transform var(--wr-ease-press), background 150ms ease;
}
.hv-quick:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.05);
}

.hv-quick-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hv-quick-icon svg { display: block; }
.hv-quick-icon img { display: block; width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.32)); }

.hv-quick-title { font-size: 11.5px; font-weight: 700; line-height: 1.25; }

/* ------------------------------------------------------------- blocked -- */

.home-blocked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--hv-border);
  background: var(--hv-surface);
  margin-top: 8px;
}
.home-blocked-text { margin: 0; font-size: 13.5px; color: var(--hv-text); }

.home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--hv-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 18px rgba(2, 4, 12, 0.32);
  text-align: left;
  font: inherit;
  color: var(--hv-text);
  cursor: pointer;
  transition: transform var(--wr-ease-press), border-color 150ms ease, box-shadow var(--wr-ease-press);
}
.home-row:active {
  transform: translateY(1px) scale(0.98);
  border-color: var(--hv-accent);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.home-row-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(155deg, rgba(125, 184, 255, 0.32) 0%, rgba(125, 184, 255, 0.1) 100%);
  color: #a9d1ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -6px 10px rgba(0, 0, 0, 0.18);
}
.home-row-icon svg { display: block; }

.home-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-row-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.home-row-arrow { flex: 0 0 auto; color: var(--hv-text-muted); display: flex; }

/* Mobile 360–430px: tighten the grid/quick-row so the whole composition
   (header + status + 4 actions + 3 quick actions) fits without a long
   scroll (TASK v7, п.5). */
@media (max-width: 380px) {
  .hv-action { padding: 10px 6px; min-height: 116px; }
  .hv-action-icon img { width: 72px; height: 72px; }
  .hv-action-title { font-size: 13.5px; }
  .hv-quick { padding: 8px 6px; }
  .hv-quick-icon img { width: 52px; height: 52px; }
}

/* ============================================================
   HOME OFFICE V1 — REAL DOM SHELF (2026-08-23). Built against the same
   owner-approved `reference/master-board-clean.png` the retired
   `.home-scene`/hotspot composition below used to crop wholesale (TASK
   п.1: "убрать home-scene.webp + hotspots + live patches поверх картинки"),
   this time as an actual HTML/CSS shelf — graphite/charcoal panel, CSS
   vertical rails, 3 CSS horizontal planks, bronze/gold edges, soft shadows
   (TASK п.3: "без фотографии шкафа; без нового raster background") — with
   real live cards/buttons on top instead of transparent tap targets over a
   flattened image. Scoped strictly to `.home-office` (rendered only by
   renderHome() in app.js) plus the `body.is-home` background rule near the
   top of this file — no other screen is touched. Local custom properties
   below are declared on `.home-office` itself, matching `theme.json` from
   the reference master pack (graphite/bronze/gold, no blue/violet). */

.home-office {
  --ho-bronze: #b88752;
  --ho-gold: #d6b069;
  --ho-border: rgba(214, 176, 105, 0.28);
  --ho-text: #f6f4ef;
  --ho-text-muted: #b8b5ad;
  --ho-success: #5fe3b3;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding-top: calc(var(--safe-top) + 10px);
  /* TASK п.8 — Home claims the full available WebView area below the
     header/bottom-nav dock (92px, same reserved height `.view` already
     pads for); the shelf itself still sizes to its own real content (no
     forced stretch of any child), this only keeps the warm background from
     ever stopping short on tall screens. No `aspect-ratio` anywhere in this
     block — unlike the retired master-image composition below, height is
     never derived from a picture. */
  min-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 92px);
  min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 92px);
}

/* Lamp/light — TASK п.2: "тёплый свет лампы сверху как CSS-декор", a pure
   CSS radial-gradient glow (no raster overlay asset) behind the
   header/shelf. */
.ho-lamp {
  position: absolute;
  top: calc(var(--safe-top) - 40px);
  left: 50%;
  width: 320px;
  height: 210px;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 0%, rgba(214, 176, 105, 0.4) 0%, rgba(214, 176, 105, 0.16) 45%, rgba(214, 176, 105, 0) 75%);
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------- header -- */

.ho-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ho-brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; }

.ho-brandmark { flex: 0 0 auto; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.ho-brandmark img { display: block; width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }

.ho-brand-text { min-width: 0; }
.ho-brand-name { margin: 0 0 2px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--ho-text); }
.ho-brand-sub { margin: 0; font-size: 12px; color: var(--ho-text-muted); line-height: 1.3; }

.ho-bell {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--ho-border);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--wr-ease-press), border-color 150ms ease;
}
.ho-bell:active { transform: translateY(1px) scale(0.94); border-color: var(--ho-gold); }
.ho-bell-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--ho-gold); }
.ho-bell-icon svg { display: block; width: 20px; height: 20px; }

.ho-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #f0645c;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* --------------------------------------------------------- shelf frame -- */
/* REAL DOM SHELF (2026-08-23) — the carcass is 100% CSS (TASK п.3: "без
   фотографии шкафа; без нового raster background"), sized entirely by its
   own content, never a background image or a fixed aspect-ratio. The frame
   is a graphite/charcoal panel with a bronze/gold hairline border; two
   `::before`/`::after` bars are the vertical stojki (side rails) running
   its full height; each `.ho-shelf` group draws its own horizontal plank
   (`.ho-shelf::after`) directly under its content, so 3 groups = 3 real
   shelves, each holding exactly the items resting on it. */

.ho-shelf-frame {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 13px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, #2c2d2f 0%, #232426 55%, #1c1d1f 100%);
  border: 1px solid var(--ho-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 32px rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.3);
}
/* Vertical stojki — graphite posts flanking the shelf, thin bronze/gold
   edge highlight (TASK п.3: "вертикальные стойки; лёгкие bronze/gold
   кромки"). */
.ho-shelf-frame::before,
.ho-shelf-frame::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3c3d3f 0%, #242527 100%);
  box-shadow: inset 0 0 0 1px rgba(214, 176, 105, 0.32);
  z-index: 0;
}
.ho-shelf-frame::before { left: 5px; }
.ho-shelf-frame::after { right: 5px; }

.ho-shelf { position: relative; z-index: 1; padding: 12px 4px 26px; }
/* The plank each group's items rest on — a thin graphite bar with a
   bronze/gold top edge and a soft contact shadow underneath, i.e. a real
   CSS shelf board, not a divider line. */
.ho-shelf::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 6px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #3f4042 0%, #232426 100%);
  border-top: 2px solid var(--ho-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 9px rgba(0, 0, 0, 0.38);
}
.ho-shelf:last-child { padding-bottom: 14px; }
/* STATUS SECTION COMPACT (2026-08-23) — TASK: "Ваш статус" and the
   Balance/PRO cards read as oversized; shrink the group's own vertical
   padding/gaps (~38% total height cut vs. the prior 40px clearance) while
   keeping its plank (`.ho-shelf::after`) intact underneath. */
.ho-shelf--status { padding: 6px 4px 14px; }
.ho-shelf--status .ho-shelf-label { margin-bottom: 4px; }

.ho-shelf-label {
  margin: 0 0 10px 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ho-text-muted);
}

/* --------------------------------------------------------- status shelf -- */

.ho-status-row { display: flex; gap: 8px; }

.ho-status-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 13px;
  border: 1px solid var(--ho-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.08) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 16px rgba(0, 0, 0, 0.32);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: transform var(--wr-ease-press), border-color 150ms ease;
}
.ho-status-card:active { transform: translateY(1px) scale(0.98); border-color: var(--ho-gold); }

.ho-status-icon { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.ho-status-icon img { display: block; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); }

.ho-status-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ho-status-label { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ho-text-muted); }
.ho-status-value { margin: 0; font-size: 15px; font-weight: 700; color: var(--ho-text); }
.ho-status-value.is-on { color: var(--ho-success); }
.ho-status-value.is-off { color: var(--ho-text-muted); }

/* Blocked Home state keeps the same office-v1 visual system and support
   route access, without falling back to the retired `.home-v2` layer. */
.ho-blocked {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 16px;
  margin-top: 18px;
  border-radius: 14px;
  border: 1px solid var(--ho-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(0, 0, 0, 0.1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 20px rgba(0, 0, 0, 0.34);
}
.ho-blocked-text { margin: 0; font-size: 13.5px; color: var(--ho-text); }

.ho-support-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--ho-border);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  text-align: left;
  font: inherit;
  color: var(--ho-text);
  cursor: pointer;
  transition: transform var(--wr-ease-press), border-color 150ms ease;
}
.ho-support-row:active { transform: translateY(1px) scale(0.98); border-color: var(--ho-gold); }
.ho-support-row-icon { flex: 0 0 auto; display: flex; color: var(--ho-gold); }
.ho-support-row-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.ho-support-row-arrow { flex: 0 0 auto; display: flex; color: var(--ho-text-muted); }

/* ---------------------------------------------------------- folder grid -- */
/* Main-action and service folders share one interaction pattern — no extra
   frame/box around the folder asset, whole tile clickable, live HTML label
   (TASK, п.5: "выглядит как офисная папка/досье на полке; вся папка
   кликабельная") — but NOT one scale: main-shelf folders read clearly
   larger than the service-shelf ones, so `.ho-folder--main`/
   `.ho-folder--service` modifiers size the icon differently on top of the
   shared `.ho-folder` base. Both shelves now hold exactly 4 items (TASK
   п.5: "Grid: repeat(4, minmax(0,1fr))"), so they share one 4-column grid.
   Icons size via `width: 100%` capped by a `max-width` on `.ho-folder-icon`
   (not a fixed px width on the `<img>`) so they always shrink to fit their
   own grid column first — this is what keeps all 4 folders on one row with
   no horizontal scroll at 360px without per-breakpoint pixel tuning (TASK
   п.5/8: "на 360px все 4 должны помещаться без горизонтального scroll"). */

.ho-folder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.ho-folder-grid--service { gap: 6px; }

.ho-folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 6px 2px;
  border: none;
  background: transparent;
  text-align: center;
  font: inherit;
  color: var(--ho-text);
  cursor: pointer;
  transition: transform var(--wr-ease-press);
}
.ho-folder:active { transform: scale(0.94); }
/* Tighter icon-to-label gap (TASK п.2), still enough room for the now-larger
   icon below to clear the label above it. */
.ho-folder--main { gap: 5px; }

.ho-folder-icon { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 auto; }
.ho-folder-icon img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }

/* PRIMARY ACTIONS ENLARGE (2026-08-23): main-shelf tiles read ~12% bigger
   without growing the shelf/grid/button footprint (TASK: "не раздувать
   стеллаж") — `transform: scale()` paints the icon larger on top of its
   unchanged layout box, so the grid/column/button width used for the
   4-in-a-row math and touch target stays byte-for-byte the same (no
   horizontal-overflow risk). This only reads safely because the current
   production icon assets (`find-work.webp`/`matches.webp`/
   `review-vacancy.webp`/`profile-search.webp`) carry >=8% transparent
   margin on every edge, so the scaled-up glyph never actually reaches its
   own original box edge and neighboring tiles' art never visually touches. */
.ho-folder--main .ho-folder-icon { max-width: 100px; transform: scale(1.12); }
.ho-folder--service .ho-folder-icon { max-width: 66px; }

.ho-folder-title {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve a fixed 2-line box regardless of whether the label actually
     wraps (TASK п.15 fix: at 360px some labels wrap to 2 lines and some
     don't, which used to make `.ho-shelf--main`'s real height unpredictable
     and let the shelf-plank background land mid-label on narrow screens —
     see `.ho-shelf-frame`'s comment). A constant reserved height keeps each
     shelf group's height stable across breakpoints/labels. */
  min-height: 2.4em;
}
.ho-folder--main .ho-folder-title { font-size: 13px; }
.ho-folder--service .ho-folder-title { font-size: 11px; }

/* Mobile 360–430px: keep the shelf grids from overflowing/overlapping
   (TASK, п.8: "360/390/430 без horizontal overflow"), while keeping main
   folders visibly bigger than service ones at every width. `.ho-folder-icon`
   already shrinks to its own grid column via `width: 100%` (above); these
   breakpoints only tighten the `max-width` cap for nicer proportions on
   narrow screens, they are not load-bearing for the no-overflow guarantee. */
@media (max-width: 380px) {
  .ho-folder--main .ho-folder-icon { max-width: 87px; }
  .ho-folder--service .ho-folder-icon { max-width: 59px; }
  .ho-folder--main .ho-folder-title { font-size: 12px; }
  .ho-folder--service .ho-folder-title { font-size: 10px; }
  .ho-status-icon, .ho-status-icon img { width: 42px; height: 42px; }
}

@media (max-width: 360px) {
  .ho-shelf-frame { padding-left: 11px; padding-right: 11px; }
  .ho-folder--main .ho-folder-icon { max-width: 77px; }
  .ho-folder--service .ho-folder-icon { max-width: 54px; }
}

/* ============================================================
   HOME REFERENCE SCENE V1 (2026-08-22, RETIRED 2026-08-23) — this whole
   block (`.home-scene-stage`/`.home-scene`/`.home-scene-hotspot`/
   `.home-scene-patch`/`.home-scene-value`/`.home-scene-badge`) rendered
   Home as a single pixel-locked crop of `reference/master-board-clean.png`
   (`home-scene.webp`) with transparent tap targets and small live-data
   patches over it. TASK (2026-08-23) "убрать home-scene.webp + hotspots +
   live patches поверх картинки" retires this in favor of the real DOM
   shelf in `.home-office`/`.ho-*` above (now the active Home layer);
   `home-scene.webp` stays on disk and this CSS stays here unused (same
   convention as the older retired `.home-v2`/`.hv-*` block further above)
   — renderHome() in app.js no longer emits any of the classes below. */
/* HOME FULL-WIDTH HARDENING (2026-08-22) — no functional change (there was
   no `max-width` fighting the scene anywhere in this file), only an
   explicit `max-width: none`/`box-sizing: border-box` guard so the scene
   and its image can never again be capped narrower than `.view`'s content
   box by a future rule. Measured at 360/390/430px: the scene already fills
   `.view`'s full width edge-to-edge (16px side padding, no overflow). */
/* RESPONSIVE STAGE (2026-08-23) — on tall phones the old width-driven sizing
   (`.home-scene` at `width:100%; height:auto`) left a large empty gap below
   the last shelf before the bottom nav, because the scene's height only
   ever tracked the viewport's *width*, never its height (TASK: "сцена
   заканчивается слишком рано"). `.home-scene-stage` is the new outer box:
   it is the sole flex child of `.view` (already `display:flex;flex:1` with
   a bottom padding that reserves the bottom-nav dock, see `.view`/
   `.bottom-nav` above) and centers/clips its content; `.home-scene` (now
   the inner "frame") gets its height directly from the real viewport height
   (`100dvh`, TASK п.4 — falls back to `100vh` first for browsers without
   `dvh` support) minus every fixed chrome height between the top of `.view`
   and the bottom-nav dock, so it scales for any viewport/safe-area combo
   with no per-device breakpoints. `width: auto` + `aspect-ratio` derive the
   frame's width from that height, so it scales up together with every
   hotspot/patch/value span nested inside it (all still positioned by
   percentage of this same frame box, unchanged, TASK п.3). Where the
   scaled-up frame is wider than the stage, `overflow: hidden` on the stage
   crops the excess symmetrically off the left/right decorative edges
   (TASK п.2: "допустимо немного обрезать декоративные края слева/справа" +
   "центрировать увеличенную сцену") instead of stretching or distorting
   the image — the image itself keeps its exact intrinsic 432:625 ratio.
   (A `height: 100%` frame — resolving against the stage's flex-computed
   height — was tried first but Chrome/WebKit don't reliably propagate a
   percentage height through a flex item that also carries `aspect-ratio`;
   it kept collapsing to the image's intrinsic 625px regardless of viewport,
   so the frame height is computed directly from the viewport instead.) */
.home-scene-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin-top: calc(var(--safe-top) + 4px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}
.home-scene {
  --hs-gold: #d6b069;
  --hs-text: #f6f4ef;
  --hs-text-muted: #b8b5ad;
  --hs-success: #5fe3b3;
  position: relative;
  flex: none;
  width: auto;
  max-width: none;
  aspect-ratio: 432 / 625;
  box-sizing: border-box;
  /* 138px = .view's own top+bottom padding around this stage (2px top,
     92px reserved for the bottom-nav dock) + this frame's margin-top's own
     fixed part (4px) + a 40px design gap so the last shelf lands ~40-80px
     above the dock instead of flush against it (TASK "цель"); `--safe-top`/
     `--safe-bottom` are subtracted on top of that so notches/home-indicators
     never eat into the reserved gap. */
  height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 138px);
  height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 138px);
}
.home-scene-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-scene-hotspot {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}
.home-scene-hotspot:active { opacity: 0.82; }

/* Coordinates below are pixel-measured against the 432×625 crop itself
   (`home-scene.webp`) and expressed as percentages of that box, so they
   track `width: 100%` scaling at any viewport without a second set of
   breakpoint numbers (TASK п.4/5). */

/* Top bell → #/notifications. */
.hs-bell { left: 79%; top: 4%; width: 14%; height: 10%; }
/* Status shelf: two cards → #/credits and #/pro. */
.hs-balance { left: 2.8%; top: 28.2%; width: 45.3%; height: 12.3%; }
.hs-pro { left: 49.1%; top: 28.2%; width: 47.0%; height: 12.3%; }
/* Main-actions shelf (4 folders): icons ~y291-372, wrapped titles to
   ~y417 in the 432×625 crop. */
.hs-find { left: 0%; top: 42.9%; width: 23.1%; height: 24.3%; }
.hs-matches { left: 23.1%; top: 42.9%; width: 23.2%; height: 24.3%; }
.hs-review { left: 46.3%; top: 42.9%; width: 23.1%; height: 24.3%; }
.hs-profile { left: 69.4%; top: 42.9%; width: 23.2%; height: 24.3%; }
/* Service shelf (4 folders): icons ~y472-553, wrapped titles to ~y596. */
.hs-credits-folder { left: 0%; top: 71.7%; width: 23.1%; height: 24.3%; }
.hs-referral { left: 23.1%; top: 71.7%; width: 23.2%; height: 24.3%; }
.hs-support { left: 46.3%; top: 71.7%; width: 23.1%; height: 24.3%; }
.hs-notifications-folder { left: 69.4%; top: 71.7%; width: 23.2%; height: 24.3%; }

/* Live-data patches — cover only the reference's own demo value text
   (TASK п.6: "не перекрывать всю статусную карточку"), then draw the real
   value on top in the same position/weight as the reference card.
   `.home-scene-patch`/`.home-scene-value` are siblings of the hotspot
   buttons above (not nested inside them) so their percentages resolve
   against the full scene box, not a hotspot's own smaller box. */
.home-scene-patch {
  position: absolute;
  background: #14181a;
  border-radius: 4px;
  pointer-events: none;
}
/* Balance: value text only (∞/amount + "без лимита"/"N кредитов"), the
   wallet icon left of it and the "БАЛАНС" label above it stay part of the
   scene image untouched. */
.home-scene-patch--balance { left: 20.8%; top: 31.2%; width: 16.2%; height: 7.7%; }
/* PRO: value text only (status + expiry), the crown icon and "PRO" label
   stay part of the scene image untouched. */
.home-scene-patch--pro { left: 62.5%; top: 31.2%; width: 20.8%; height: 7.5%; }
.home-scene-patch--bell {
  left: 85.9%;
  top: 6.4%;
  width: 4.4%;
  height: 2.9%;
  border-radius: 50%;
  background: #22262a;
}

.home-scene-value {
  position: absolute;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 2.6vw;
  font-weight: 700;
  line-height: 1.18;
  color: var(--hs-text);
  pointer-events: none;
}
/* Value spans are wider than their patch above — the extra room to the
   right is already empty dark card interior in the reference image, not
   demo text, so text can flow into it without a wider (more intrusive)
   patch underneath. */
.home-scene-value--balance { left: 21.5%; top: 32%; width: 25%; }
.home-scene-value--pro { left: 63%; top: 32%; width: 31%; color: var(--hs-gold); }
.home-scene-value--pro.is-off { color: var(--hs-text-muted); }

.home-scene-badge {
  position: absolute;
  left: 88.1%;
  top: 7.85%;
  transform: translate(-50%, -50%);
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #f0645c;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}

@media (min-width: 431px) {
  .home-scene-value { font-size: 12.5px; }
}