@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap");

/* ============================================================
   1. RESET + BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100dvh;
}

img, svg { display: block; }
button { cursor: pointer; font-family: inherit; font-size: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
hr { border: none; }

/* ============================================================
   2. TOKENS — единственный блок
   ============================================================ */

:root {
  color-scheme: light;

  /* Colors */
  --bg:            #F5F7FB;
  --bg-soft:       #EEF1F7;
  --surface:       #FFFFFF;
  --surface-2:     #F9FAFC;
  --surface-3:     #F1F4FA;
  --border:        #E4E8F0;
  --border-strong: #D5DBE6;
  --text:          #0F172A;
  --text-soft:     #475569;
  --text-muted:    #94A3B8;
  --primary:       #1E40AF;
  --primary-strong:#1E3A8A;
  --primary-soft:  #E0E7FF;
  --accent:        #0EA47A;
  --accent-strong: #0B8E6A;
  --accent-soft:   #DCFCE7;
  --warning:       #D97706;
  --danger:        #DC2626;
  --danger-soft:   #FEE2E2;
  --info:          #0EA5E9;
  --scrollbar-thumb:       rgba(148, 163, 184, 0.45);
  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.65);

  /* Shadows */
  --shadow-soft:   0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow:        0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-lg:     0 20px 50px rgba(15, 23, 42, 0.12);

  /* Radius */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Layout */
  --content:     1280px;
  --topbar-h:    64px;
  --rail-w:      320px;

  /* Typography */
  --text-display: clamp(28px, 4vw, 40px);
  --text-h2:      22px;
  --text-h3:      17px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0B1220;
  --bg-soft:       #111827;
  --surface:       #131C2E;
  --surface-2:     #1A2438;
  --surface-3:     #232E45;
  --border:        #2A3550;
  --border-strong: #3A4665;
  --text:          #F1F5F9;
  --text-soft:     #CBD5E1;
  --text-muted:    #94A3B8;
  --primary:       #6366F1;
  --primary-strong:#818CF8;
  --primary-soft:  rgba(99, 102, 241, 0.18);
  --accent:        #10B981;
  --accent-strong: #059669;
  --accent-soft:   rgba(16, 185, 129, 0.15);
  --danger-soft:   rgba(220, 38, 38, 0.18);
  --scrollbar-thumb:       rgba(148, 163, 184, 0.28);
  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.48);
  --shadow-soft:   0 4px 20px rgba(0, 0, 0, 0.24);
  --shadow:        0 12px 40px rgba(0, 0, 0, 0.32);
  --shadow-lg:     0 24px 64px rgba(0, 0, 0, 0.40);
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1 { font-size: var(--text-display); font-weight: 800; line-height: 1.15; color: var(--text); letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.25; color: var(--text); }
h3 { font-size: var(--text-h3); font-weight: 700; line-height: 1.3; color: var(--text); }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  margin-bottom: 0;
}

.section-hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  pointer-events: none; /* SVG не должен перехватывать клики */
}
.ui-icon--brand {
  fill: unset;
  stroke: none;
  overflow: visible;
}
.btn .ui-icon--brand { width: 18px; height: 18px; }

/* App shell */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(16px, 3vw, 40px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-mark {
  width: 36px;
  height: 36px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.brand-mark-img {
  display: block;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.brand-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.brand-home-label {
  display: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.profile-chip-label {
  display: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* Topnav */
.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.topnav button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  transition: background 120ms, color 120ms;
  white-space: nowrap;
}
.topnav button:hover { background: var(--bg-soft); color: var(--text); }
.topnav button.active {
  background: var(--primary-soft);
  color: var(--primary);
}
[data-theme="dark"] .topnav button.active {
  background: var(--primary-soft);
  color: var(--primary-strong);
}

/* Topbar actions */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background 120ms, border-color 120ms;
}
.profile-chip:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.avatar-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.profile-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}
.profile-meta strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.profile-meta small {
  font-size: 11px;
  color: var(--text-muted);
}

/* Theme toggle */
#themeToggle { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-soft); transition: background 120ms; }
#themeToggle:hover { background: var(--bg-soft); }
#themeToggle .i-sun { display: block; }
#themeToggle .i-moon { display: none; }
[data-theme="dark"] #themeToggle .i-sun { display: none; }
[data-theme="dark"] #themeToggle .i-moon { display: block; }

/* Workspace */
.workspace {
  flex: 1;
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 32px clamp(16px, 3vw, 40px) 80px;
}

/* Views */
.view { display: none; }
.view.active { display: block; }

/* Page head */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.page-head h1 { margin-top: 4px; }

/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms, transform 80ms, box-shadow 120ms;
  white-space: nowrap;
  border: none;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--primary);
  color: #fff;
}
.btn--primary:hover { background: var(--primary-strong); }

.btn--accent {
  background: var(--accent);
  color: #fff;
}
.btn--accent:hover { background: var(--accent-strong); }

.btn--save {
  background: #6C63FF;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(108, 99, 255, 0.22);
  gap: 7px;
}
.btn--save:hover {
  background: #5B54E8;
  box-shadow: 0 12px 28px rgba(108, 99, 255, 0.28);
}
.btn--save .ui-icon--brand { width: 18px; height: 18px; }

.btn--ghost {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.btn--ghost:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); }

.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover { background: #b91c1c; }

.btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius);
}

.btn--block { width: 100%; }

.btn--small {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.btn--small.btn--icon { width: 34px; height: 34px; }

/* Brand icon sizes — share buttons */
[data-share="whatsapp"] .ui-icon--brand,
[data-share="telegram"] .ui-icon--brand { width: 18px; height: 18px; flex-shrink: 0; }
.sheet-action[data-share="whatsapp"] .ui-icon,
.sheet-action[data-share="telegram"] .ui-icon,
.sheet-action[data-share="pdf"] .ui-icon { width: 24px; height: 24px; flex-shrink: 0; fill: unset; stroke: none; overflow: visible; }
[data-share="pdf"] .ui-icon--brand { width: 18px; height: 18px; flex-shrink: 0; }
[data-share] .ui-icon { width: 24px; height: 24px; }

/* --- FIELDS --- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 120px;
}
.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}
.field-label .ui-icon { width: 14px; height: 14px; }

.field--row {
  flex-direction: row;
  align-items: center;
}
.field--row .field-label { white-space: nowrap; }

.field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -4px;
}

.phone-input,
.contact-input {
  display: flex;
  align-items: center;
  height: 44px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 120ms, box-shadow 120ms;
}
.phone-input:focus-within,
.contact-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.phone-input-prefix,
.contact-input-prefix {
  padding-left: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
  user-select: none;
}
.contact-input.is-telegram .contact-input-prefix { display: none; }
.phone-input-field,
.contact-input-field {
  height: 100%;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  flex: 1;
  min-width: 0;
  padding-left: 8px;
}
.contact-input.is-telegram .contact-input-field { padding-left: 14px; }

.input {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  transition: border-color 120ms, box-shadow 120ms;
  outline: none;
  width: 100%;
}
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.input::placeholder { color: var(--text-muted); }
.input--compact { width: 100px; }
.input--price { width: 120px; }

.select {
  height: 44px;
  padding: 0 36px 0 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  transition: border-color 120ms;
  outline: none;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.textarea {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  transition: border-color 120ms;
  outline: none;
  resize: vertical;
  width: 100%;
  min-height: 80px;
}
.textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.textarea,
.modal-body,
.sheet,
.bottom-sheet-body {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.textarea::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.sheet::-webkit-scrollbar,
.bottom-sheet-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.textarea::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.sheet::-webkit-scrollbar-track,
.bottom-sheet-body::-webkit-scrollbar-track {
  background: transparent;
}

.textarea::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.sheet::-webkit-scrollbar-thumb,
.bottom-sheet-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

.textarea::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.sheet::-webkit-scrollbar-thumb:hover,
.bottom-sheet-body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.textarea::-webkit-scrollbar-button,
.modal-body::-webkit-scrollbar-button,
.sheet::-webkit-scrollbar-button,
.bottom-sheet-body::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.textarea::-webkit-scrollbar-corner,
.modal-body::-webkit-scrollbar-corner,
.sheet::-webkit-scrollbar-corner,
.bottom-sheet-body::-webkit-scrollbar-corner {
  background: transparent;
}

/* --- CARDS --- */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.card--padded { padding: 24px; }
.card--quiet { background: var(--surface-2); border-color: transparent; }

/* --- CHIPS --- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background 100ms, color 100ms, border-color 100ms;
  flex-shrink: 0;
}
.chip:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); }
.chip--active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent), var(--shadow-soft);
  transform: translateY(-1px);
}
.chip:active { transform: translateY(0); }
.chip[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.chip--accent.chip--active {
  background: var(--accent);
  border-color: var(--accent);
}
.chip--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.chip--ghost:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border); }

.chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row--wrap { flex-wrap: wrap; overflow: visible; }

#powerChips {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 6px;
  margin: 0 -4px;
}
#powerChips .chip--active,
#powerChips .chip[aria-pressed="true"] {
  transform: none;
}

.base-install-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
}
.base-install-toggle input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex: 0 0 auto;
}
.base-install-toggle strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}
.base-install-toggle small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.base-install-toggle:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* --- SEGMENTED CONTROL --- */
.segmented {
  display: flex;
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
}
.segmented__option {
  flex: 1;
  height: 38px;
  padding: 0 16px;
  border-radius: calc(var(--radius) - 3px);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  transition: background 120ms, color 120ms;
  cursor: pointer;
}
.segmented__option:hover { color: var(--text); }
.segmented__option.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
}

/* --- SLIDER --- */
.slider-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.slider {
  flex: 1;
  height: 6px;
  appearance: none;
  background: var(--border);
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
}

/* --- BADGES --- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.badge--success { background: var(--accent-soft); color: var(--accent-strong); }
.badge--warning { background: #FEF3C7; color: #92400E; }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--muted { background: var(--bg-soft); color: var(--text-muted); }
.badge--accent { background: var(--accent-soft); color: var(--accent-strong); }
.badge--primary { background: var(--primary-soft); color: var(--primary); }

/* --- STATUS PILL --- */
.status-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-soft);
  color: var(--text-muted);
}
.status-pill--draft { background: var(--bg-soft); color: var(--text-muted); }
.status-pill--sent { background: #DBEAFE; color: #1D4ED8; }
.status-pill--in_progress { background: #FEF3C7; color: #92400E; }
.status-pill--approved { background: #F0FDF4; color: #15803D; }
.status-pill--completed { background: var(--accent-soft); color: var(--accent-strong); }
.status-pill--rejected { background: var(--danger-soft); color: var(--danger); }
[data-theme="dark"] .status-pill--sent { background: rgba(59, 130, 246, 0.22); color: #60A5FA; }
[data-theme="dark"] .status-pill--in_progress { background: rgba(245, 158, 11, 0.18); color: #FBBF24; }
[data-theme="dark"] .status-pill--completed { background: rgba(34, 197, 94, 0.18); color: #4ADE80; }
[data-theme="dark"] .status-pill--rejected { background: rgba(239, 68, 68, 0.2); color: #F87171; }
[data-theme="dark"] .status-pill--approved { background: var(--accent-soft); color: var(--accent); }

/* --- CHECKBOX CARD --- */
.checkbox-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  transition: background 120ms, border-color 120ms;
}
.checkbox-card:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.checkbox-card input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); }
.checkbox-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

/* Check row (inline checkbox) */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
}
.check-row:last-child { border-bottom: none; }
.check-row input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); flex-shrink: 0; }
.check-row span { flex: 1; }

/* Inline check */
.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}
.inline-check input { accent-color: var(--primary); }

/* --- MODAL --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 680px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border);
}
.modal-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* --- BOTTOM SHEET --- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: flex-end;
  backdrop-filter: blur(3px);
}
.sheet {
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
}
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 8px auto 16px;
}
.sheet-content { padding: 0 16px 8px; }
.sheet-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text);
}
.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 100ms;
  text-align: left;
}
.sheet-action:hover, .sheet-action:active { background: var(--bg-soft); }
.sheet-action .ui-icon { width: 20px; height: 20px; color: var(--text-soft); }

/* --- TOAST --- */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 300;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--surface);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 200ms, transform 200ms;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- LOADER --- */
.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  backdrop-filter: blur(4px);
}
.loader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}
.loader-overlay span { color: var(--surface); font-weight: 600; font-size: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- EMPTY STATE --- */
.empty, .empty-state {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.empty-state h2 { font-size: 18px; margin-bottom: 8px; color: var(--text-soft); }
.empty-state p { margin-bottom: 16px; }

/* --- ADD ROW --- */
.add-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.add-row .input { flex: 1; min-width: 120px; }
.add-row--compact .input { height: 40px; font-size: 14px; }
.add-row--compact .btn { height: 40px; }

/* --- EDITABLE LIST --- */
.editable-list { display: flex; flex-direction: column; gap: 6px; }
.editable-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.editable-row .input {
  height: 38px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}
.editable-row .input:first-of-type { flex: 2; }
.editable-row .input[type="number"] { width: 110px; flex: 0 0 auto; }
/* Кнопка удаления заметнее */
.editable-row .btn--icon { width: 38px; height: 38px; color: var(--danger, #ef4444); flex-shrink: 0; }
.editable-row .btn--icon .ui-icon { width: 18px; height: 18px; }

/* Service row */
.service-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.service-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
.service-row.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.service-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.service-row span { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); }
.service-row span small { display: block; color: var(--text-muted); font-size: 12px; }
.service-row input[type="number"] {
  width: 70px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  text-align: center;
  display: none;
}
.service-row.is-selected input[type="number"] { display: block; }

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* Button col */
.button-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================
   6. SCREENS
   ============================================================ */

/* --- AUTH --- */
.auth-view {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  padding: 24px;
}
.auth-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  color: var(--text);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 1.25rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.auth-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}
.auth-brand .brand-mark { width: 44px; height: 44px; font-size: 16px; border-radius: var(--radius); }
.auth-brand .brand-mark-img { width: 44px; height: 44px; }
.auth-brand .brand-title { display: block; font-size: 20px; font-weight: 800; color: var(--text); }
.auth-brand .brand-subtitle { display: block; font-size: 13px; color: var(--text-muted); }
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.25rem;
}
.auth-input-group {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.auth-input-group:first-child { margin-top: 0; }
.auth-input-group label {
  display: block;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.auth-input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  outline: 0;
  background-color: var(--bg-soft);
  padding: 0.75rem 1rem;
  color: var(--text);
  transition: border-color 120ms, box-shadow 120ms;
}
.auth-input::placeholder { color: var(--text-muted); opacity: 0.7; }
.auth-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.auth-submit {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  background-color: var(--primary);
  padding: 0.75rem;
  text-align: center;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background-color 120ms;
}
.auth-submit:hover { background-color: var(--primary-strong); }
.auth-social-message {
  display: flex;
  align-items: center;
  padding-top: 1.25rem;
  margin-top: 0.25rem;
}
.auth-line {
  height: 1px;
  flex: 1 1 0%;
  background-color: var(--border);
}
.auth-social-message .auth-message {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-muted);
}
.auth-telegram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 44px;
  gap: 8px;
  padding-top: 0.75rem;
}
.btn-tg-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: #2aabee;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-tg-login:hover { background: #229ed9; }
.btn-tg-login:disabled { opacity: 0.7; cursor: wait; }
.btn-tg-login .ui-icon { width: 20px; height: 20px; }
.auth-telegram-waiting {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  margin: 0;
}
.auth-signup {
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--text-muted);
  margin: 1.25rem 0 0;
}
.auth-signup-link {
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0;
  margin-left: 0.25rem;
}
.auth-signup-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  color: var(--primary-strong);
}

/* --- DASHBOARD --- */
.dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.dash-hero h1 { font-size: clamp(24px, 3.5vw, 36px); }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.metric-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-card.is-tile-locked {
  opacity: 0.72;
}
.metric-lock-wrap.is-feature-locked > :not(.feature-lock) {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}
.feature-lock--tile {
  padding: 8px;
  border-radius: var(--radius-lg);
  background: rgba(8, 12, 24, 0.28);
}
.feature-lock__icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.16);
  color: #f87171;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.18);
}
.feature-lock__icon-only .ui-icon {
  width: 22px;
  height: 22px;
}
.feature-lock-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
}
.feature-lock-hint__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #f87171;
}
.metric-card--accent { background: var(--primary); border-color: var(--primary); }
.metric-card--accent .metric-label,
.metric-card--accent .metric-value,
.metric-card--accent .metric-sub { color: rgba(255,255,255,0.9); }
.metric-card--accent .metric-value { color: #fff; }
.metric-card--accent.metric-lock-wrap.is-feature-locked {
  background: var(--surface);
  border-color: var(--border);
}
.metric-card--accent.metric-lock-wrap.is-feature-locked .metric-label,
.metric-card--accent.metric-lock-wrap.is-feature-locked .metric-sub {
  color: var(--text-muted);
}
.metric-card--accent.metric-lock-wrap.is-feature-locked .metric-value {
  color: var(--text);
}
.metric-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.metric-value { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1.1; }
.metric-sub { font-size: 12px; color: var(--text-muted); }

.dash-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.dash-content-grid--recent {
  grid-template-columns: 1fr;
}
.dash-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.dash-panel {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.dash-panel-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.dash-panel-body {
  padding: 8px 10px 12px;
  flex: 1;
  min-height: 56px;
}
.dash-panel-body .empty {
  margin: 0;
  padding: 12px 6px;
  font-size: 13px;
}
.dash-list { display: flex; flex-direction: column; gap: 2px; }
.dash-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  transition: background 100ms;
}
.dash-list-item:hover { background: var(--bg-soft); }
.dash-list-item--clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dash-list-item--clickable:active { background: var(--bg-soft); }
.dash-list-item-info { flex: 1; min-width: 0; }
.dash-list-item-info strong { font-size: 14px; font-weight: 700; color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-item-info small { font-size: 12px; color: var(--text-muted); }
.dash-list-item-amount { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
.dash-list-item-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Onboarding */
.onboarding-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid var(--border);
}
.onboarding-card h3 { margin-bottom: 16px; font-size: 16px; }
.onboarding-list { display: flex; flex-direction: column; gap: 8px; }
.onboarding-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.onboarding-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.onboarding-item div { flex: 1; }
.onboarding-item strong { display: block; font-size: 14px; color: var(--text); }
.onboarding-item small { font-size: 12px; color: var(--text-muted); }

/* --- CALCULATOR --- */
.calc-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.calc-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.calc-topbar-left h1 { font-size: 22px; }
.save-state {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Template strip */
.template-strip {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: visible; /* нужно для dropdown-меню */
  scrollbar-width: none;
  padding: 2px 0 32px; /* pad снизу — место для dropdown */
  margin-bottom: -30px; /* компенсируем pad чтобы не занимал место */
  min-width: 0;
}
.template-strip::-webkit-scrollbar { display: none; }
.template-strip-btn { flex-shrink: 0; }

/* Template chip */
.template-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: all 100ms;
  flex-shrink: 0;
  position: relative;
}
.template-chip:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); }
.template-chip.active-template { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.template-chip .chip-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: inherit;
  opacity: 0.6;
}
.template-chip .chip-menu-btn:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.template-chip .chip-menu-btn .ui-icon { width: 14px; height: 14px; }

/* Template create area */
.template-create {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.template-create.open { display: flex; }
.template-create .input { height: 38px; font-size: 14px; flex: 1; min-width: 160px; }

/* Template menu dropdown */
.template-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 50;
  min-width: 160px;
  padding: 4px;
  display: none;
}
.template-menu.open { display: flex; flex-direction: column; gap: 2px; }
.template-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  text-align: left;
  transition: background 100ms;
}
.template-menu button:hover { background: var(--bg-soft); color: var(--text); }
.template-menu button.danger { color: var(--danger); }
.template-menu button.danger:hover { background: var(--danger-soft); }
.template-menu .ui-icon { width: 15px; height: 15px; }

/* Calc layout */
.calc-layout {
  display: grid;
  grid-template-columns: 1fr var(--rail-w);
  gap: 24px;
  align-items: start;
}

/* Calc sections */
.calculator-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calc-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.calc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.calc-section-head::-webkit-details-marker { display: none; }
.calc-section-head::before { display: none; }
.calc-section[open] .calc-section-head { border-bottom: 1px solid var(--border); }
.calc-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.calc-section-summary {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.calc-section-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--primary-soft);
  color: var(--primary);
}
.calc-section-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Extra groups */
.extra-group { display: flex; flex-direction: column; gap: 10px; }
.extra-group-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Discount row */
.discount-row { display: flex; align-items: center; gap: 12px; }
.discount-hint {
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
  line-height: 1.5;
}

/* Inner collapsible */
.calc-section-inner {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.calc-section-inner > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  list-style: none;
}
.calc-section-inner > summary::-webkit-details-marker { display: none; }
.calc-section-inner[open] > summary { border-bottom: 1px solid var(--border); }
.calc-section-inner .field { padding: 12px 16px; }
.calc-section-inner .textarea { border: none; background: transparent; }

/* Summary Rail */
.summary-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  min-width: 0;
}
.summary-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
}
.summary-card-head {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary-install {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
}
.summary-client {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--text-muted);
}
.summary-breakdown {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  min-height: 40px;
}
.summary-breakdown span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.summary-breakdown b { font-weight: 500; color: var(--text-soft); }
.summary-breakdown strong { font-weight: 700; color: var(--text); }
.summary-grand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-soft);
}
.summary-total {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.summary-actions {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
/* ── Share row (summary rail) ── */
.share-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  align-items: stretch;
  min-width: 0;
}

/* Pill: WA и TG — компактные, в одну строку */
.share-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 8px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: opacity 90ms, transform 80ms;
  white-space: nowrap;
  min-width: 0;
}
.share-pill--wa { background: #25D366; color: #fff; border: none; }
.share-pill--tg { background: #229ED9; color: #fff; border: none; }
.share-pill--muted {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
}
.share-pill--muted:hover { background: var(--surface-2); opacity: 1; transform: none; }
.share-row .share-pill--wa { grid-column: 1 / span 3; }
.share-row .share-pill--tg { grid-column: 4 / span 3; }
.share-pill:hover { opacity: .88; transform: scale(.98); }
.share-pill .ui-icon--brand { width: 15px; height: 15px; flex-shrink: 0; }

/* Маленькие icon-кнопки с подписью — второй ряд */
.share-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  min-width: 0;
  min-height: 38px;
  padding: 5px 2px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.share-row .share-icon-btn {
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.share-row .share-icon-btn:hover {
  background: var(--bg-soft);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong));
  color: var(--text);
}
.share-row .share-icon-btn .ui-icon {
  width: 16px;
  height: 16px;
  color: currentColor;
}
.share-row .share-icon-btn[data-share="pdf"] .ui-icon--brand {
  color: #F87171;
}
.share-row .share-icon-btn[data-share="pdf"]:hover .ui-icon--brand {
  color: #FCA5A5;
}
.share-row .share-icon-btn:nth-child(3) { grid-column: 1 / span 2; }
.share-row .share-icon-btn:nth-child(4) { grid-column: 3 / span 2; }
.share-row .share-icon-btn:nth-child(5) { grid-column: 5 / span 2; }
.summary-lines {
  border-top: 1px solid var(--border);
}
.summary-lines > summary {
  padding: 14px 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
}
.summary-lines > summary::-webkit-details-marker { display: none; }
.line-items {
  padding: 8px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.line-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.line-item b { font-weight: 600; color: var(--text); display: block; }
.line-item span { font-size: 11px; color: var(--text-muted); }
.line-item strong { font-weight: 700; color: var(--text); white-space: nowrap; }

/* Proposal area (inline preview) */
.proposal-area {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 2px solid var(--border);
}
.proposal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.proposal-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, opacity 120ms;
}
.proposal-share-btn:hover:not(:disabled) { background: var(--surface-3); }
.proposal-share-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.proposal-share-btn--wa {
  border-color: rgba(37, 211, 102, 0.45);
  color: #25D366;
}
.proposal-share-btn--tg {
  border-color: rgba(34, 158, 217, 0.45);
  color: #229ED9;
}
.proposal-share-btn .ui-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.proposal-share-btn .ui-icon--brand {
  width: 16px;
  height: 16px;
}
.proposal-quota-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 32px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.proposal-preview-wrap {
  position: relative;
}
.feature-lock-wrap {
  position: relative;
}
.feature-lock-wrap.is-feature-locked > :not(.feature-lock) {
  filter: blur(12px);
  user-select: none;
  pointer-events: none;
}
.metric-card.metric-lock-wrap.is-feature-locked > :not(.feature-lock) {
  filter: blur(8px);
}
.feature-lock-wrap.is-feature-locked > .feature-lock {
  pointer-events: auto;
}
.feature-lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 12, 24, 0.35);
  border-radius: var(--radius-lg);
}
.feature-lock__card {
  max-width: 360px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.feature-lock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
}
.feature-lock__icon .ui-icon {
  width: 20px;
  height: 20px;
}
.feature-lock__card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.feature-lock__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-soft);
}
.proposal-preview-wrap.is-locked .proposal-sheet {
  filter: blur(16px);
  user-select: none;
  pointer-events: none;
}
.proposal-quota-lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 12, 24, 0.35);
  border-radius: var(--radius-lg);
}
.proposal-quota-lock__card {
  max-width: 360px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.proposal-quota-lock__card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.proposal-quota-lock__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-soft);
}
.subscription-status--tier-free_active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.subscription-status--tier-free_locked {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
.subscription-status--tier-premium {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

/* Selected chip */
.selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 8px 0 14px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  font-size: 13px;
  font-weight: 600;
}
.selected-chip button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* --- PREVIEW SCREEN --- */
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.preview-toolbar h2 { flex: 1; }
.preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: stretch;
}
.preview-actions .share-pill {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--radius);
  gap: 6px;
}
.preview-actions .share-pill .ui-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.preview-actions .share-pill .ui-icon--brand {
  width: 16px;
  height: 16px;
}
.preview-body {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 16px;
}
.preview-body .proposal-sheet {
  max-width: 720px;
  width: 100%;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
}

/* --- PROPOSAL SHEET — light document theme (PDF reference) --- */
.proposal-sheet {
  --proposal-bg: #FFFFFF;
  --proposal-surface: #F4F6FA;
  --proposal-surface-2: #EEF1F7;
  --proposal-border: #E2E8F0;
  --proposal-accent: #635BFF;
  --proposal-accent-soft: rgba(99, 91, 255, 0.1);
  --proposal-text: #1E293B;
  --proposal-muted: #64748B;
  --proposal-header-bg: #1A1F3D;
  --proposal-header-muted: rgba(255, 255, 255, 0.62);
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
  background: var(--proposal-bg);
  color: var(--proposal-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--proposal-border);
}
.proposal-top {
  position: relative;
  overflow: hidden;
  padding: 14px 18px;
  background:
    radial-gradient(ellipse 60% 90% at 100% 0%, rgba(99, 146, 255, 0.22) 0%, transparent 58%),
    linear-gradient(135deg, #151a35 0%, #1a1f3d 52%, #222850 100%);
  border-bottom: none;
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: start;
}
.proposal-top-total {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-top: 2px;
  padding-left: 8px;
  min-width: 0;
}
.proposal-top-total-amount {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  --proposal-total-size: clamp(22px, 4vw, 28px);
  --proposal-total-icon-scale: 2.35;
  font-size: var(--proposal-total-size);
}
.proposal-top-total span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--proposal-header-muted);
  margin-bottom: 4px;
}
.proposal-top-total strong {
  display: block;
  font-size: inherit;
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.proposal-top-total-icon {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 0.15em;
  flex-shrink: 0;
  font-size: inherit;
}
.proposal-top-total-icon svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(1em * var(--proposal-total-icon-scale));
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.proposal-top-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.proposal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.proposal-logo {
  width: 44px;
  height: 44px;
  background: transparent;
  box-shadow: none;
}
.proposal-logo.brand-mark-img {
  object-fit: contain;
}
.proposal-brand > div { flex: 1; }
.proposal-brand strong { display: block; font-size: 16px; font-weight: 800; color: #fff; }
.proposal-brand span { font-size: 12px; color: var(--proposal-header-muted); }
.proposal-heading h2 { color: #fff; font-size: 20px; font-weight: 800; }
.proposal-heading p {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--proposal-header-muted);
  margin-top: 2px;
}
.proposal-meta-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}
.proposal-meta-icon svg { display: block; width: 100%; height: 100%; }
.proposal-number { display: flex; gap: 8px; align-items: center; }
.proposal-number span { font-size: 11px; color: var(--proposal-header-muted); }
.proposal-number strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--proposal-accent);
  background: rgba(99, 91, 255, 0.18);
  border: 1px solid rgba(147, 140, 255, 0.35);
  padding: 3px 10px;
  border-radius: 999px;
}
.proposal-client {
  margin: 0;
  padding: 10px 16px;
  background: var(--proposal-surface);
  border-bottom: 1px solid var(--proposal-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--proposal-text);
}
.proposal-client-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.proposal-client-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--proposal-accent);
  flex-shrink: 0;
}
.proposal-client-icon svg { display: block; width: 100%; height: 100%; }
.proposal-client-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--proposal-accent);
}
.proposal-client-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.proposal-client-item em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--proposal-muted);
  margin-right: 4px;
}
.proposal-client-item { color: var(--proposal-text); font-weight: 600; }
.proposal-client-sep { color: #CBD5E1; font-weight: 700; }
.proposal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 12px;
  padding: 12px 16px;
  align-items: start;
  background: var(--proposal-bg);
}
.proposal-lines {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.proposal-group h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--proposal-accent);
  font-weight: 700;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--proposal-border);
}
.proposal-group-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--proposal-accent);
  flex-shrink: 0;
}
.proposal-group-icon svg { display: block; width: 100%; height: 100%; }
.proposal-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px solid #F1F5F9;
}
.proposal-line:last-child { border-bottom: none; }
.proposal-line div { flex: 1; min-width: 0; }
.proposal-line b { font-weight: 700; color: var(--proposal-text); display: block; }
.proposal-line span { font-size: 10px; color: var(--proposal-muted); }
.proposal-line strong { font-weight: 700; color: var(--proposal-text); white-space: nowrap; }
.proposal-summary {
  margin: 0;
  padding: 10px 12px;
  background: var(--proposal-surface);
  border-radius: 10px;
  border: 1px solid var(--proposal-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.proposal-summary-title,
.proposal-summary h3 {
  font-size: 10px;
  font-weight: 700;
  color: var(--proposal-accent);
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.proposal-summary-row,
.proposal-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.proposal-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--proposal-muted);
}
.proposal-summary-row strong { font-weight: 700; color: var(--proposal-text); }
.proposal-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--proposal-accent-soft);
  color: var(--proposal-accent);
  flex-shrink: 0;
  padding: 2px;
}
.proposal-summary-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.proposal-summary-icon--total {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--proposal-accent);
  color: #fff;
  padding: 3px;
}
.proposal-summary-total {
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid var(--proposal-border);
}
.proposal-summary-total .proposal-summary-label { color: var(--proposal-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.proposal-summary-amount {
  font-size: 18px;
  font-weight: 900;
  color: var(--proposal-accent);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.proposal-bottom {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--proposal-border);
  background: var(--proposal-bg);
}
.proposal-bottom-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--proposal-accent);
  margin-bottom: 8px;
  font-weight: 700;
}
.proposal-bottom-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--proposal-accent);
}
.proposal-bottom-icon svg { display: block; width: 100%; height: 100%; }
.proposal-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  align-items: start;
}
.proposal-bottom-grid--single {
  grid-template-columns: 1fr;
}
.proposal-bottom-aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proposal-conditions-text {
  margin: 0;
  font-size: 11px;
  color: #334155;
  line-height: 1.5;
}
.proposal-note-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--proposal-surface);
  border: 1px solid var(--proposal-border);
  border-radius: 8px;
}
.proposal-note-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--proposal-accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.proposal-note-icon svg { display: block; width: 100%; height: 100%; }
.proposal-note-card p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #334155;
}
.proposal-contact-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 16px;
  background: var(--proposal-surface);
  border-top: 1px solid var(--proposal-border);
  font-size: 10px;
  color: var(--proposal-muted);
}
.proposal-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.proposal-contact-icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--proposal-accent);
  flex-shrink: 0;
}
.proposal-contact-icon svg { display: block; width: 100%; height: 100%; }
.proposal-footer {
  padding: 6px 16px 10px;
  background: var(--proposal-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--proposal-muted);
  border-top: 1px solid var(--proposal-border);
  gap: 16px;
  flex-wrap: wrap;
}

/* --- HISTORY --- */
.history-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.search-wrap {
  position: relative;
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  width: 16px;
  height: 16px;
}
.search-input { padding-left: 42px; }
.filter-chips {
  padding-bottom: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  scroll-behavior: smooth;
  scroll-padding-inline: 8px;
}
.filter-chips .chip { flex-shrink: 0; }

#clientFilterChips {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 6px;
}
@media (min-width: 721px) {
  #clientFilterChips .chip {
    height: 32px;
    padding: 0 11px;
    font-size: 13px;
  }
}

/* ── Mobile templates button ── */
.mobile-templates-btn { display: none; }

/* ── Bottom sheet (mobile overlay) ── */
.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
}
.bottom-sheet-backdrop[hidden] { display: none !important; }
.bottom-sheet {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bottom-sheet-head h3 { font-size: 16px; font-weight: 700; margin: 0; }
.bottom-sheet-segment {
  padding: 0 16px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-template-mode .segmented__option {
  height: 36px;
  font-size: 13px;
  padding: 0 10px;
}
.mobile-template-hidden {
  font-size: 13px;
  color: var(--text-soft);
}
.bottom-sheet-body {
  overflow-y: auto;
  padding: 12px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bottom-sheet-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.bottom-sheet-footer .btn { width: 100%; justify-content: center; }
.template-sheet-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  transition: background 100ms, border-color 100ms;
  width: 100%;
}
.template-sheet-card:hover { background: var(--bg-soft); }
.template-sheet-card.active-template { border-color: var(--primary); background: var(--primary-soft); }
.template-sheet-card-info { flex: 1; min-width: 0; }
.template-sheet-card-info strong { font-size: 14px; font-weight: 700; color: var(--text); display: block; margin-bottom: 2px; }
.template-sheet-card-info span { font-size: 12px; color: var(--text-muted); }

.template-sheet-card--manage {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
  cursor: default;
}
.template-sheet-card--hidden { opacity: 0.72; }
.template-sheet-card-row {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.template-sheet-card-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 10px 12px 14px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.template-sheet-card-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.template-sheet-card-more {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.template-sheet-card-more .ui-icon { width: 18px; height: 18px; }
.template-sheet-card-more:hover { color: var(--text); background: var(--bg-soft); }
.template-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
}
.template-sheet-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 1 calc(50% - 3px);
  min-height: 38px;
  padding: 0 10px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}
.template-sheet-actions button:hover { background: var(--surface-2); color: var(--text); }
.template-sheet-actions button.danger {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.25);
  background: var(--danger-soft);
}
.template-sheet-actions button.danger:hover { color: var(--danger); background: rgba(239, 68, 68, 0.14); }
.template-sheet-actions .ui-icon { width: 14px; height: 14px; }

/* history-card: flex-column, работает и на desktop и на mobile */
.history-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 100ms;
  cursor: default;
  overflow: visible;
  position: relative;
}
.history-card:last-child { border-bottom: none; }
.history-card:hover { background: var(--surface-2); }

/* Верхняя строка: статус + имя + сумма */
.hc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.hc-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.hc-mid-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: visible;
  flex-wrap: wrap;
}
.hc-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.hc-amount {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Средняя строка: контакт + дата */
.hc-mid {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  overflow: visible;
  flex-wrap: wrap;
}
.hc-sub {
  font-size: 13px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.hc-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Нижняя строка: кнопки действий */
.hc-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Совместимость с legacy классами (если где-то остались) */
.history-card-info { flex: 1; min-width: 0; }
.history-card-info h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-card-info p { font-size: 13px; color: var(--text-soft); }
.history-card-info small { font-size: 12px; color: var(--text-muted); }
.history-card-amount { font-size: 17px; font-weight: 800; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.history-card-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.history-menu-wrap { position: relative; }
.history-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 40;
  min-width: 160px;
  padding: 4px;
  display: none;
}
.history-menu.open { display: flex; flex-direction: column; gap: 2px; }
.history-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  text-align: left;
  transition: background 100ms;
}
.history-menu button:hover { background: var(--bg-soft); color: var(--text); }
.history-menu .danger { color: var(--danger); }
.history-menu .danger:hover { background: var(--danger-soft); }

/* Quote row (in client detail) */
.quote-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  background: var(--surface);
}
.quote-row.is-completed { opacity: 0.65; }
.quote-row-info { flex: 1; }
.quote-row-info strong { font-size: 14px; font-weight: 700; display: block; color: var(--text); }
.quote-row-info small { font-size: 12px; color: var(--text-muted); }
.quote-row-amount { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }

.quote-status-picker {
  position: relative;
  flex-shrink: 0;
  width: fit-content;
}
.quote-status-picker.is-open {
  z-index: 30;
}
.quote-status-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: opacity 100ms, transform 80ms;
}
.quote-status-trigger:active { transform: scale(0.98); }
.quote-status-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  width: 118px;
  padding: 3px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  display: none;
  flex-direction: column;
  gap: 2px;
}
.quote-status-menu.open { display: flex; }
.quote-status-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  border-radius: calc(var(--radius-sm) - 1px);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  background: transparent;
  transition: background 100ms, border-color 100ms;
}
.quote-status-option:hover { filter: brightness(1.08); }
.quote-status-option.is-active {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}
.status-select--draft { background: var(--bg-soft); color: var(--text-muted); border-color: var(--border); }
.status-select--sent { background: rgba(99, 102, 241, 0.15); color: #818CF8; border-color: rgba(99, 102, 241, 0.35); }
.status-select--in_progress { background: rgba(245, 158, 11, 0.15); color: #FBBF24; border-color: rgba(245, 158, 11, 0.35); }
.status-select--approved { background: rgba(34, 197, 94, 0.14); color: #4ADE80; border-color: rgba(34, 197, 94, 0.35); }
.status-select--completed { background: rgba(34, 197, 94, 0.22); color: #86EFAC; border-color: rgba(34, 197, 94, 0.45); }
.status-select--rejected { background: var(--danger-soft); color: var(--danger); border-color: rgba(239, 68, 68, 0.35); }
.quote-row-info .quote-status-picker { margin-bottom: 4px; }

/* --- CLIENTS --- */
.clients-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}
.clients-list-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.clients-detail-panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 24px;
  min-height: 400px;
}

.client-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  transition: border-color 120ms, background 120ms;
}
.client-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.client-card.selected-card { border-color: var(--primary); background: var(--primary-soft); }
.client-card h3 { font-size: 15px; font-weight: 700; color: var(--text); }
.client-card-status {
  flex-shrink: 0;
  height: 18px;
  padding: 0 7px;
  font-size: 10px;
}
.client-card p { font-size: 13px; color: var(--text-soft); }
.client-card small { font-size: 12px; color: var(--text-muted); }
.client-card .client-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.client-card .client-card-amount { font-size: 15px; font-weight: 700; color: var(--text); }

/* Client detail */
.client-back-btn {
  margin-bottom: 20px;
  display: none; /* shown only on mobile via media query below */
}
.client-stats {
  display: flex;
  gap: 16px;
  margin: 16px 0;
  padding: 16px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.client-stat { text-align: center; flex: 1; }
.client-stat-value { font-size: 22px; font-weight: 800; color: var(--text); display: block; }
.client-stat-label { font-size: 12px; color: var(--text-muted); }
.client-data { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.client-data > div { display: flex; gap: 12px; align-items: baseline; }
.client-data dt { font-size: 13px; font-weight: 600; color: var(--text-muted); width: 80px; flex-shrink: 0; }
.client-data dd { font-size: 14px; font-weight: 500; color: var(--text); }
.client-history-list { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.client-history-list h3 { font-size: 14px; font-weight: 700; color: var(--text-soft); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }

/* --- PRICING --- */
.pricing-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: start;
}
.pricing-nav {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 8px;
}
.pricing-nav-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  text-align: left;
  transition: background 100ms, color 100ms;
  cursor: pointer;
}
.pricing-nav-item:hover { background: var(--bg-soft); color: var(--text); }
.pricing-nav-item.active { background: var(--primary-soft); color: var(--primary); }
.pricing-content { display: flex; flex-direction: column; gap: 16px; }
/* Все панели скрыты — показывается только активная (desktop + mobile одинаково) */
.pricing-panel { margin-bottom: 0; display: none; }
.pricing-panel[data-active] { display: block; }
.pricing-panel h2 { margin-bottom: 20px; }
.pricing-panel[hidden] { display: none !important; }

/* Price rates table */
.price-rates-table {
  width: 100%;
  border-collapse: collapse;
}
.price-rates-table th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 8px 10px;
  text-align: left;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.price-rates-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.price-rates-table td:first-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  width: 60px;
  text-align: center;
}
.price-rates-table input {
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  width: 100%;
  outline: none;
}
.price-rates-table input:focus { border-color: var(--primary); }

.price-extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.compact-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.compact-field span { font-size: 13px; color: var(--text-soft); flex: 1; font-weight: 500; }
.compact-field input { width: 90px; height: 34px; padding: 0 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); font-size: 14px; outline: none; background: var(--surface); color: var(--text); }
.compact-field small { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.compact-field input:focus { border-color: var(--primary); }

/* --- PROFILE --- */
.profile-cards { display: flex; flex-direction: column; gap: 20px; }
.profile-cards .card--padded { display: flex; flex-direction: column; gap: 16px; }
.subscription-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.subscription-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.subscription-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.subscription-row dt {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.subscription-row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.subscription-plan {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.subscription-plan--free {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}
.subscription-plan--premium,
.subscription-plan--pro,
.subscription-plan--enterprise {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}
.subscription-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.subscription-status--active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.subscription-status--exhausted {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
#view-calculator [data-share]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.profile-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- MOBILE NAV --- */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0 0 env(safe-area-inset-bottom);
  height: calc(60px + env(safe-area-inset-bottom));
  align-items: flex-start;
  justify-content: space-around;
}
.mobile-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 8px;
  flex: 1;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  transition: color 120ms;
}
.mobile-nav button .ui-icon { width: 22px; height: 22px; }
.mobile-nav button.active { color: var(--primary); }
.mobile-nav button span { letter-spacing: 0; }

/* --- MOBILE STICKY --- */
.mobile-sticky {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 91;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
  align-items: center;
  box-shadow: 0 -4px 20px rgba(15,23,42,0.08);
}
.mobile-total-btn {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
  padding: 0;
}
.mobile-total-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.mobile-total-value { font-size: 20px; font-weight: 800; color: var(--text); }

/* --- CLIENT VIEW --- */
.client-view {
  min-height: 100dvh;
  background: var(--bg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.client-view .proposal-sheet {
  max-width: 720px;
  width: 100%;
  box-shadow: var(--shadow);
}
.client-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  max-width: 720px;
  width: 100%;
}

/* ============================================================
   7. MOBILE — @media screen and (max-width: 720px)
   ============================================================ */

@media screen and (max-width: 720px) {
  /* ── Base: предотвращаем горизонтальный overflow ── */
  html { overflow-x: hidden; }
  body { font-size: 16px; overflow-x: hidden; }
  * { max-width: 100%; }
  img, svg, video { max-width: 100%; }

  /* ── Мобильный контент: отступ снизу под фиксированную навигацию ── */
  .workspace > section { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* ── Topbar ── */
  .topnav { display: none; }
  .topbar {
    padding: 0 12px;
    gap: 8px;
    height: 56px;
    --topbar-h: 56px;
    justify-content: space-between;
  }
  .brand-name { display: none; }
  .brand,
  .profile-chip {
    height: 36px;
    padding: 0 10px 0 8px;
    gap: 6px;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    flex-shrink: 0;
  }
  .brand:active,
  .profile-chip:active { background: var(--bg-soft); }
  .brand-home-label,
  .profile-chip-label {
    display: inline;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
  }
  .brand-mark {
    width: 24px;
    height: 24px;
    font-size: 10px;
    border-radius: 6px;
  }
  .brand-mark-img {
    width: 24px;
    height: 24px;
  }
  .topbar-actions { margin-left: auto; }

  /* Профиль: pill как у «Шаблоны», на мобиле без имени и email */
  .profile-meta { display: none; }
  .profile-chip {
    border-radius: var(--radius);
    gap: 6px;
  }
  .avatar-mark {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }

  /* Кнопка темы */
  #themeToggle { width: 36px; height: 36px; }

  /* ── Workspace ── */
  .workspace {
    padding: 16px 16px calc(72px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }
  .app-shell { overflow-x: hidden; }

  /* ── Mobile nav ── */
  .mobile-nav {
    display: flex;
    height: calc(56px + env(safe-area-inset-bottom));
  }
  .mobile-nav button { padding: 6px 4px; font-size: 10px; gap: 2px; }
  .mobile-nav button .ui-icon { width: 20px; height: 20px; }
  .app-shell[data-view="calculator"] .mobile-nav { display: none; }
  .app-shell[data-view="preview"] .mobile-nav { display: none; }

  /* Мобильный стики только в калькуляторе */
  .app-shell[data-view="calculator"] .mobile-sticky { display: flex; }

  /* Toast */
  .toast { bottom: calc(72px + env(safe-area-inset-bottom) + 8px); }
  .app-shell[data-view="calculator"] .toast { bottom: calc(68px + env(safe-area-inset-bottom) + 8px); }

  /* ── Page head ── */
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .page-head h1 { font-size: clamp(20px, 6vw, 28px); }
  .page-head > .btn { order: -1; }

  /* ── Dashboard ── */
  .dash-hero { flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .dash-hero h1 { font-size: clamp(20px, 6vw, 28px); }
  .dash-hero .btn { width: 100%; justify-content: center; }

  /* Метрики: 2×2 grid, фиксированная ширина */
  .metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow: visible;
    padding: 0;
    margin-bottom: 20px;
  }
  .metric-card {
    min-width: 0;
    width: 100%;
    padding: 14px 12px;
  }
  .metric-value { font-size: 20px; }
  .metric-label { font-size: 11px; }
  .metric-sub { font-size: 11px; }

  .dash-content-grid { grid-template-columns: 1fr; gap: 14px; }
  .dash-status-grid { grid-template-columns: 1fr; gap: 14px; }
  .dash-panel-head { padding: 12px 14px; }
  .dash-panel-head h2 { font-size: 14px; }
  .dash-panel-body { padding: 6px 8px 10px; }
  .section-header h2 { font-size: 16px; }
  .dash-list-item { padding: 10px 8px; gap: 8px; flex-wrap: nowrap; }
  .dash-list-item-info strong { font-size: 13px; }
  .dash-list-item-info small { font-size: 11px; }
  .dash-list-item-amount { font-size: 13px; }
  .dash-list-item-actions .btn { display: none; }
  .dash-list-item--clickable { min-height: 48px; }

  /* ── Calculator ── */
  .calc-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    overflow: visible;
    align-items: center;
  }
  .calc-topbar-left h1 { font-size: 17px; }
  .calc-topbar-left {
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }
  .calc-topbar-left .save-state {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-templates-btn {
    display: inline-flex !important;
    width: auto;
    min-width: 0;
    height: 36px;
    padding: 0 10px 0 8px;
    gap: 6px;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
  }
  .mobile-templates-btn span {
    display: inline;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text);
  }
  .mobile-templates-btn .ui-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--primary);
  }
  .calc-layout { grid-template-columns: 1fr; }
  .summary-rail { display: none; }
  .proposal-area { margin-top: 20px; padding-top: 20px; }
  .template-strip { display: none; }
  .template-strip-btn { display: none; }

  /* Секции калькулятора */
  .calc-section-body { padding: 14px; gap: 12px; }
  .calc-section-head { padding: 14px 16px; }
  .calc-section-title { font-size: 14px; }

  /* Поля: стек в колонку */
  .field-row { flex-direction: column; gap: 10px; }
  .field-row .field { min-width: 0; width: 100%; flex: none; }
  .field { min-width: 0; }

  /* Power chips */
  .chip-row { gap: 6px; padding-bottom: 4px; }
  #powerChips { gap: 6px; padding: 4px 4px 6px; margin: 0 -4px; }
  #powerChips .chip {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    justify-content: center;
    transition: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  #powerChips .chip--active,
  #powerChips .chip[aria-pressed="true"] {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
  }
  .base-install-toggle {
    padding: 12px;
    gap: 10px;
  }
  .base-install-toggle strong { font-size: 13px; }
  .base-install-toggle small { font-size: 11px; }

  /* Скидка */
  .discount-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .field--row { flex-direction: column; align-items: flex-start; }
  .slider-group { width: 100%; }
  /* Шаблоны: показываем мобильную кнопку */
  .template-strip-btn { display: none !important; }

  /* Инпуты: минимум 16px чтобы iOS не зумил */
  .input, .select, .textarea { font-size: 16px !important; }
  .input--compact { font-size: 16px !important; }

  /* add-row: всегда колонка на мобайле */
  .add-row,
  .add-row--compact {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .add-row .input,
  .add-row--compact .input {
    width: 100%;
    min-width: 0;
    flex: none;
    height: 48px;
    font-size: 16px !important;
  }
  .add-row .btn,
  .add-row--compact .btn { width: 100%; height: 48px; font-size: 16px; }

  /* editable-row на мобайле: имя + цена + иконка */
  .editable-row { flex-wrap: wrap; }
  .editable-row .input:first-of-type { flex: 1 1 auto; min-width: 0; }
  .editable-row .input[type="number"] { width: 90px; flex: 0 0 90px; }
  .editable-row .btn--icon { flex-shrink: 0; }

  /* ── История ── */
  .history-controls { gap: 8px; margin-bottom: 16px; }
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .filter-chips .chip { flex-shrink: 0; height: 34px; font-size: 13px; padding: 0 12px; }

  .hc-name { font-size: 14px; }
  .hc-amount { font-size: 15px; }
  .hc-sub { font-size: 12px; }
  .hc-actions .btn--small { height: 32px; padding: 0 10px; font-size: 12px; }
  .history-menu { position: fixed; right: 16px; left: auto; top: auto; }

  /* ── Клиенты ── */
  .clients-layout { grid-template-columns: 1fr; }
  #clientFilterChips {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .clients-detail-panel { display: none; min-height: 0; }
  .app-shell.client-detail-open .clients-list-panel { display: none; }
  .app-shell.client-detail-open .clients-detail-panel { display: block; padding: 16px; }
  .client-back-btn { display: flex; } /* show back button on mobile */
  .client-card { padding: 12px; }
  .client-card h3 { font-size: 14px; }
  .client-stat-value { font-size: 18px; }
  .clients-list-panel { gap: 8px; }
  .clients-list-panel .filter-chips { margin-top: 4px; }

  /* ── Прайс ── */
  .pricing-layout { grid-template-columns: 1fr; }
  .pricing-nav { display: none; }
  .price-extras-grid { grid-template-columns: 1fr; }
  .compact-field { flex-wrap: wrap; }
  .compact-field span { flex: 1 1 100%; }
  .compact-field input { width: 100%; }

  /* ── Профиль ── */
  .profile-cards .field-row { flex-direction: column; }
  .profile-cards .card--padded { padding: 16px; }
  .button-col .btn { justify-content: flex-start; }

  /* ── Auth ── */
  .auth-view { align-items: center; justify-content: center; padding: 24px 16px; }
  .auth-card {
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-lg);
    max-width: 100%;
  }

  /* ── Modal → bottom sheet ── */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92dvh;
  }
  .modal-body { padding: 16px; gap: 12px; }
  .modal-actions { padding: 12px 16px 20px; }
  .template-editor-options { grid-template-columns: 1fr; }

  /* ── Предложение (КП) ── */
  .proposal-body { grid-template-columns: 1fr; }
  .proposal-bottom-grid { grid-template-columns: 1fr; }
  .proposal-top {
    padding: 16px;
    padding-right: 16px;
    grid-template-columns: 1fr;
    background: linear-gradient(135deg, #151a35 0%, #1a1f3d 52%, #222850 100%);
  }
  .proposal-top-total {
    text-align: left;
    align-items: flex-start;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .proposal-top-total-amount {
    align-items: stretch;
    --proposal-total-size: clamp(20px, 5.5vw, 26px);
  }
  .proposal-top-total-icon svg {
    max-height: calc(1em * var(--proposal-total-icon-scale));
  }
  .proposal-client { padding: 10px 16px; gap: 4px; }
  .proposal-body { padding: 12px; gap: 10px; }
  .proposal-lines { gap: 8px; }
  .proposal-summary { margin: 0; }
  .proposal-bottom { padding: 12px 16px; }
  .proposal-contact-bar { padding: 8px 12px; gap: 6px 10px; }
  .proposal-footer { padding: 10px 16px; flex-direction: column; gap: 4px; }
  .proposal-number strong { font-size: 16px; }
  .proposal-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }
  .proposal-toolbar > div:first-child {
    min-width: 0;
    width: 100%;
  }
  .proposal-toolbar h2 {
    font-size: 28px;
    line-height: 1.1;
  }
  .proposal-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    min-width: 0;
  }
  .proposal-actions .btn {
    min-width: 0;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Предпросмотр КП в калькуляторе ── */
  .proposal-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .proposal-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .proposal-share-btn {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
  }

  /* ── Публичная страница клиента ── */
  .client-view { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
}

/* Mobile price tabs (created by JS) */
.mobile-price-tabs {
  display: none;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 6px;
  padding: 0 0 10px;
  margin-bottom: 16px;
}
.mobile-price-tabs::-webkit-scrollbar { display: none; }
.mobile-price-tabs button {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-price-tabs button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
@media screen and (max-width: 720px) {
  .mobile-price-tabs { display: flex; }
}

/* ============================================================
   8. PRINT — @media print
   ============================================================ */

@media print {
  @page { size: A4; margin: 8mm; }

  /* Hide everything except the KP sheet */
  .topbar,
  .mobile-nav,
  .mobile-sticky,
  .summary-rail,
  .calculator-form,
  .template-panel,
  .template-create,
  #templateList,
  .template-strip,
  .calc-topbar,
  .page-head,
  .toast,
  .loader-overlay,
  .modal-backdrop,
  .sheet-backdrop,
  .proposal-toolbar,
  .proposal-quota-lock,
  .client-actions,
  .calc-topbar-left,
  #view-dashboard,
  #view-history,
  #view-clients,
  #view-pricing,
  #view-profile,
  #view-calculator .calc-layout,
  #view-calculator .calc-topbar,
  #view-calculator .mobile-sticky {
    display: none !important;
  }

  body, html {
    background: #fff !important;
    color: #111 !important;
  }

  .app-shell,
  .workspace,
  #view-calculator,
  .proposal-area,
  .proposal-preview-wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
  }

  .view { display: none !important; }
  #view-calculator { display: block !important; }

  .proposal-area { margin: 0 !important; padding: 0 !important; border: none !important; }
  .proposal-preview-wrap.is-locked .proposal-sheet { filter: none !important; }

  /* KP sheet — same look as preview, full page width */
  .proposal-sheet {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    color: #1E293B !important;
  }

  .proposal-top {
    grid-template-columns: minmax(0, 1fr) minmax(180px, max-content) !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #151a35 0%, #1a1f3d 52%, #222850 100%) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .proposal-logo {
    box-shadow: none !important;
  }

  .proposal-top-total {
    align-items: flex-end !important;
    text-align: right !important;
    padding-top: 0 !important;
    padding-left: 8px !important;
    border-top: none !important;
    overflow: visible !important;
    max-width: none !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
  }

  .proposal-top-total-amount {
    --proposal-total-size: 24px;
    font-size: 24px !important;
    overflow: visible !important;
  }

  .proposal-top-total strong {
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .proposal-top-total-icon svg {
    height: 44px !important;
    max-height: none !important;
    filter: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .proposal-top-total-icon svg g {
    filter: none !important;
  }

  .proposal-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 200px !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    page-break-inside: auto !important;
  }

  .proposal-bottom {
    page-break-inside: auto !important;
  }

  .proposal-bottom-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 12px !important;
    page-break-inside: auto !important;
  }

  .proposal-sheet,
  .proposal-sheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .proposal-line { page-break-inside: avoid; break-inside: avoid; }
  .proposal-group,
  .proposal-summary,
  .proposal-note-card {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* Client view print */
  .client-view {
    padding: 0 !important;
    background: #fff !important;
    min-height: auto !important;
  }
  .client-view .proposal-sheet {
    box-shadow: none !important;
    border: none !important;
  }
  .client-actions { display: none !important; }
}

/* Stability fixes v11: keep mobile workspace clean without changing calculation logic. */
@media screen and (max-width: 720px) {
  .app-shell.proposal-in-view .mobile-sticky,
  .app-shell[data-view="preview"] .mobile-sticky,
  .app-shell:not([data-view="calculator"]) .mobile-sticky {
    display: none !important;
  }

  .template-card {
    flex-basis: 188px;
  }

  .template-card strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .template-card span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .service-row {
    min-height: 48px;
    padding: 8px 10px;
  }

  .service-row input[type="number"] {
    width: 64px;
    height: 32px;
    padding: 0 8px;
  }

  .service-row.is-selected {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 64px;
    align-items: center;
  }

  .service-row.is-selected input[type="number"] {
    grid-column: 3;
    grid-row: 1 / 3;
    justify-self: end;
  }
}