/* ═══════════════════════════════════════════════════════════
   МОЙ ДОХОД — Complete Design System 2026
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Layout */
  --bottom-nav-height: 60px;
  --sidebar-width: 248px;
  --header-height: 56px;

  /* Color Palette */
  --color-bg: #F2F2F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F9F9FB;
  --color-primary: #5856D6;
  --color-primary-light: rgba(88, 86, 214, 0.1);
  --color-primary-mid: rgba(88, 86, 214, 0.2);
  --color-income: #30D158;
  --color-expense: #FF453A;
  --color-warning: #FF9F0A;
  --color-info: #0A84FF;
  --color-text-primary: #1C1C1E;
  --color-text-secondary: #6C6C70;
  --color-text-tertiary: #AEAEB2;
  --color-border: rgba(0, 0, 0, 0.07);
  --color-border-strong: rgba(0, 0, 0, 0.12);
  --color-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 12px rgba(0, 0, 0, 0.04);
  --color-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  --color-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(0, 0, 0, 0.08);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #5856D6 0%, #7C7AE0 100%);
  --gradient-primary-deep: linear-gradient(135deg, #4A48C8 0%, #5856D6 50%, #7C7AE0 100%);
  --gradient-income: linear-gradient(135deg, #30D158 0%, #34C759 100%);
  --gradient-expense: linear-gradient(135deg, #FF453A 0%, #FF3B30 100%);
  --gradient-warning: linear-gradient(135deg, #FF9F0A 0%, #FF8C00 100%);
  --gradient-info: linear-gradient(135deg, #0A84FF 0%, #007AFF 100%);
  --gradient-gold: linear-gradient(135deg, #F5A623 0%, #F97316 100%);
  --gradient-success: linear-gradient(135deg, #30D158 0%, #25A244 100%);
  --gradient-loading: linear-gradient(135deg, #5856D6 0%, #7C7AE0 40%, #9590E8 100%);
  --gradient-loading-shimmer: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);

  /* Typography */
  --font-size-xs: 0.70rem;
  --font-size-sm: 0.80rem;
  --font-size-base: 0.90rem;
  --font-size-md: 1.00rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.40rem;

  /* Backward compat aliases */
  --primary: #5856D6;
  --accent: #5856D6;
  --accent-primary: #5856D6;
  --accent-secondary: #30D158;
  --accent-danger: #FF453A;
  --accent-warning: #FF9F0A;
  --primary-bg: #F2F2F7;
  --secondary-bg: #F2F2F7;
  --card-bg: #FFFFFF;
  --card-bg-secondary: rgba(88,86,214,0.06);
  --text-primary: #1C1C1E;
  --text-secondary: #6C6C70;
  --text-900: #1C1C1E;
  --text-700: #3A3A3C;
  --text-500: #6C6C70;
  --text-300: rgba(0,0,0,0.07);
  --glass-bg: rgba(255,255,255,0.88);
  --glass-border: rgba(0,0,0,0.07);
  --border-radius: 14px;
  --border-radius-lg: 20px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.16);
  --duration-fast: 0.12s;
  --duration-normal: 0.2s;
  --duration-slow: 0.4s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-bs-theme="dark"] {
  --color-bg: #0E0E12;
  --color-surface: #1C1C22;
  --color-surface-2: #242430;
  --color-primary-light: rgba(120, 118, 235, 0.12);
  --color-primary-mid: rgba(120, 118, 235, 0.22);
  --color-income: #32D74B;
  --color-expense: #FF6961;
  --color-text-primary: #F2F2F7;
  --color-text-secondary: #AEAEB2;
  --color-text-tertiary: #6C6C70;
  --color-border: rgba(255,255,255,0.07);
  --color-border-strong: rgba(255,255,255,0.12);
  --color-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --color-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --primary-bg: #0E0E12;
  --secondary-bg: #1C1C22;
  --card-bg: #1C1C22;
  --card-bg-secondary: rgba(120,118,235,0.12);
  --text-primary: #F2F2F7;
  --text-secondary: #AEAEB2;
  --text-900: #F2F2F7;
  --text-700: #E5E5EA;
  --text-500: #AEAEB2;
  --text-300: rgba(255,255,255,0.07);
  --glass-bg: rgba(28,28,34,0.9);
  --glass-border: rgba(255,255,255,0.08);
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: 16px;
}
body { min-height: 100vh; min-height: 100dvh; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ─── Keyframes ─── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideUpModal { from { transform: translateY(100%); opacity: 0.8; } to { transform: translateY(0); opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes loadPulse { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes loadingBarFill { 0% { width: 0%; } 60% { width: 70%; } 90% { width: 88%; } 100% { width: 92%; } }
@keyframes trialPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes enhancedBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1.2); opacity: 1; } }

/* ═══════════════════════════════════════════════════════════
   LOADING SCREEN — Full-screen splash
   ═══════════════════════════════════════════════════════════ */

.onb-loader {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  background-image: radial-gradient(ellipse at 50% 38%, rgba(88,86,214,0.10) 0%, transparent 60%);
}
.onb-loader-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.onb-loader-logo {
  width: 80px; height: 80px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.3rem; color: #fff;
  background: linear-gradient(135deg, #5856D6, #8E8CE8);
  box-shadow: 0 12px 32px rgba(88,86,214,0.38);
  animation: onbLogoFloat 1.9s ease-in-out infinite;
}
.onb-loader-name { margin-top: 20px; font-size: 1.3rem; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; }
.onb-loader-tagline { margin-top: 3px; font-size: 0.85rem; color: var(--color-text-secondary); }
.onb-loader-bar {
  margin-top: 24px; width: 150px; height: 4px; border-radius: 4px;
  background: var(--color-primary-light); overflow: hidden;
}
.onb-loader-bar span {
  display: block; width: 40%; height: 100%; border-radius: 4px;
  background: var(--color-primary); animation: onbLoaderSlide 1.2s ease-in-out infinite;
}
@keyframes onbLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes onbLoaderSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(300%); } }

/* ═══════════════════════════════════════════════════════════
   ONBOARDING
   ═══════════════════════════════════════════════════════════ */

.onb {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; overflow-y: auto;
  /* align-items:flex-start (NOT center) + the card's margin:auto is the canonical fix for
     "center when it fits, scroll from the top when it doesn't". With align-items:center a
     card taller than the screen got its top clipped above the scroll area — the user
     couldn't scroll up to the buttons and was stuck (broken on small phones). */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 16px;
  /* clear the system bars / home indicator so the bottom button is reachable */
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch; /* smooth momentum scroll in the VK webview */
  background: var(--color-bg);
  background-image:
    radial-gradient(ellipse at 12% 6%, rgba(88,86,214,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 88% 96%, rgba(48,209,88,0.07) 0%, transparent 50%);
}
.onb-card {
  width: 100%; max-width: 420px; margin: auto;
  background: var(--color-surface); border-radius: 24px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.05);
  padding: 26px 22px 22px;
  animation: onbCardIn 0.35s var(--ease-out, ease);
}
@keyframes onbCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.onb-step { display: flex; flex-direction: column; }

/* progress */
.onb-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.onb-progress-dot { flex: 1; height: 5px; border-radius: 3px; background: var(--color-border); transition: background 0.25s; }
.onb-progress-dot.active { background: var(--color-primary); }

/* hero icon */
.onb-hero {
  width: 72px; height: 72px; margin: 2px auto 16px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff;
  background: linear-gradient(135deg, #5856D6, #8E8CE8);
  box-shadow: 0 10px 26px rgba(88,86,214,0.32);
}
.onb-hero.success { background: linear-gradient(135deg, #30D158, #5BE07E); box-shadow: 0 10px 26px rgba(48,209,88,0.30); }

.onb-title { font-size: 1.4rem; font-weight: 800; color: var(--color-text-primary); text-align: center; margin: 0 0 6px; letter-spacing: -0.3px; }
.onb-subtitle { font-size: 0.9rem; color: var(--color-text-secondary); text-align: center; line-height: 1.45; margin: 0 0 22px; }

/* welcome feature rows */
.onb-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.onb-feature { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-radius: 14px; background: var(--color-bg); }
.onb-feature-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; }
.onb-feature-tx { min-width: 0; }
.onb-feature-ic.income { background: linear-gradient(135deg,#30D158,#5BE07E); }
.onb-feature-ic.budget { background: linear-gradient(135deg,#5856D6,#8E8CE8); }
.onb-feature-ic.goal   { background: linear-gradient(135deg,#FF9F0A,#FFBF5C); }
.onb-feature-tx strong { display: block; font-size: 0.92rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.3; }
.onb-feature-tx small  { display: block; font-size: 0.76rem; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.35; }

/* purpose grid */
.onb-purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.onb-purpose {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding: 15px 8px; border: 1.5px solid var(--color-border); border-radius: 16px;
  background: var(--color-surface); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.onb-purpose:active { transform: scale(0.97); }
.onb-purpose.selected { border-color: var(--purpose-color, var(--color-primary)); box-shadow: 0 0 0 3px var(--color-primary-light); }
.onb-purpose-ic {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff; background: var(--purpose-color, var(--color-primary));
}
.onb-purpose-name { font-size: 0.86rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.2; }
.onb-purpose-desc { font-size: 0.68rem; color: var(--color-text-secondary); line-height: 1.25; }

.onb-hint {
  display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; margin-bottom: 18px;
  border-radius: 12px; background: var(--purpose-color-light, var(--color-primary-light));
  font-size: 0.8rem; color: var(--color-text-primary); line-height: 1.4;
}
.onb-hint i { color: var(--purpose-color, var(--color-primary)); flex-shrink: 0; margin-top: 1px; }

/* balance quick amounts */
.onb-quick { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 16px 0 22px; }

/* done summary */
.onb-summary { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.onb-summary-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; background: var(--color-bg); font-size: 0.85rem; color: var(--color-text-primary); }
.onb-summary-row i { color: #30D158; font-size: 1.05rem; flex-shrink: 0; }
.onb-bonus { display: flex; align-items: center; gap: 9px; padding: 11px 13px; margin-bottom: 20px; border-radius: 12px; background: rgba(255,159,10,0.12); font-size: 0.82rem; color: var(--color-text-primary); }
.onb-bonus i { color: #FF9F0A; flex-shrink: 0; }

/* actions */
.onb-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 4px; }
.onb-foot-note { text-align: center; font-size: 0.74rem; color: var(--color-text-tertiary); margin: 12px 0 0; }

.quick-amounts-compact { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.quick-amount-btn {
  padding: 6px 14px; border: 1.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface); color: var(--color-text-primary); cursor: pointer;
  transition: all 0.15s; font-size: var(--font-size-sm); font-weight: 500;
}
.quick-amount-btn:hover, .quick-amount-btn.active { border-color: var(--color-primary); }
.quick-amount-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

.category-selection { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.category-option {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem 0.65rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer; transition: all 0.15s; text-align: center;
  min-height: 88px; gap: 2px;
}
.category-option:hover { border-color: var(--color-primary); background: var(--color-primary-light); transform: translateY(-1px); }
.category-option.selected { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: 0 0 0 3px var(--color-primary-mid); }
.category-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 0.45rem;
  flex-shrink: 0;
}
.category-icon i { font-size: 1.1rem; color: white; }
.category-name { font-weight: 600; color: var(--color-text-primary); font-size: var(--font-size-sm); line-height: 1.25; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-short-desc { font-size: 0.62rem; color: var(--color-text-secondary); line-height: 1.3; margin-top: 2px; }

/* Purpose description preview — appears below the grid when a purpose is selected */
.purpose-description-preview {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-top: 8px;
  background: var(--purpose-color-light, var(--color-primary-light));
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--purpose-color, var(--color-primary));
  font-size: 0.78rem; color: var(--color-text-primary);
  animation: fadeIn 0.2s ease; line-height: 1.45;
}
.purpose-description-preview i { color: var(--purpose-color, var(--color-primary)); flex-shrink: 0; margin-top: 1px; font-size: 0.85rem; }

.personalized-setup-compact { display: flex; flex-direction: column; gap: 8px; }
.setup-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--color-bg); border-radius: var(--radius-sm); font-size: var(--font-size-sm);
}
.setup-item i { font-size: 1.1rem; }

/* Completion screen — purpose badge + bonus notice */
.onboarding-completion-summary { margin-bottom: 10px; text-align: center; }
.completion-purpose-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--purpose-color-light, var(--color-primary-light));
  color: var(--purpose-color, var(--color-primary));
  font-size: 0.82rem; font-weight: 600;
}
.completion-purpose-badge i { font-size: 0.9rem; }

.onboarding-starter-bonus {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; margin-top: 6px;
  background: rgba(245,158,11,0.10); border-radius: var(--radius-sm);
  border-left: 3px solid #f59e0b;
  font-size: 0.76rem; color: var(--color-text-primary);
}
.onboarding-starter-bonus i { color: #f59e0b; font-size: 0.9rem; flex-shrink: 0; }

/* Premium trial offer block at onboarding step 4 */
.onboarding-trial-offer {
  margin-top: 10px; padding: 11px 14px;
  background: linear-gradient(135deg, rgba(245,166,35,0.10) 0%, rgba(0,119,255,0.07) 100%);
  border: 1.5px solid rgba(245,166,35,0.35); border-radius: var(--radius-sm);
}
.trial-offer-header { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; margin-bottom: 7px; }
.trial-offer-header i { font-size: 1rem; flex-shrink: 0; }
.trial-offer-features { display: flex; flex-wrap: wrap; gap: 6px; }
.trial-offer-features span { font-size: 0.72rem; color: var(--color-text-secondary); display: flex; align-items: center; gap: 3px; }
.trial-offer-features i { color: var(--color-success, #22c55e); font-size: 0.75rem; }

.enhanced-completion-animation {
  width: 88px; height: 88px; background: var(--gradient-income); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem; animation: scaleIn 0.4s var(--ease-elastic);
  box-shadow: 0 8px 24px rgba(48,209,88,0.3);
}
.enhanced-checkmark { color: white; font-size: 2.2rem; }

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* ── Purpose colour tokens — applied to #app by Vue's :class="purposeClass" ──── */
.purpose-savings  { --purpose-color: #10b981; --purpose-color-light: rgba(16,185,129,0.12); }
.purpose-budget   { --purpose-color: #f59e0b; --purpose-color-light: rgba(245,158,11,0.12); }
.purpose-invest   { --purpose-color: #8b5cf6; --purpose-color-light: rgba(139,92,246,0.12); }
.purpose-debt     { --purpose-color: #ef4444; --purpose-color-light: rgba(239,68,68,0.12); }
.purpose-planning { --purpose-color: #06b6d4; --purpose-color-light: rgba(6,182,212,0.12); }
.purpose-simple   { --purpose-color: var(--color-primary); --purpose-color-light: var(--color-primary-light); }

/* Use purpose colour for the XP bar in sidebar */
[class*="purpose-"] .progress-fill-compact { background: var(--purpose-color, var(--gradient-primary)); }

/* Purpose chip in sidebar / header */
.purpose-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.60rem; font-weight: 600; color: var(--purpose-color, var(--color-primary));
  background: var(--purpose-color-light, var(--color-primary-light));
  border-radius: 999px; padding: 2px 8px; margin-top: 3px;
}
.purpose-chip i { font-size: 0.65rem; }

#app { min-height: 100vh; min-height: 100dvh; background: var(--color-bg); }
.main-application { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* Header (mobile) */
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 100; height: var(--header-height); flex-shrink: 0;
}
.header-content {
  display: flex; align-items: center; height: 100%;
  padding: 0 14px; min-width: 0;
}
.header-left { display: flex; align-items: center; min-width: 0; max-width: 60vw; }

/* Balance in the top-left (mobile header) */
.header-balance-primary {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
  min-width: 0; max-width: 100%;
}
.header-balance-label {
  font-size: 0.58rem; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.header-balance-amount {
  font-size: 1.15rem; font-weight: 800; color: var(--color-text-primary);
  font-variant-numeric: tabular-nums; letter-spacing: -0.3px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-balance-amount.positive { color: var(--color-income); }
.header-balance-amount.negative { color: var(--color-expense); }


/* Backward compat — unused now but keep to not break things */
.balance-display { display: none; }
.balance-label { font-size: 0.65rem; color: var(--color-text-secondary); display: block; }
.balance-amount { font-size: 1.05rem; font-weight: 700; }
.balance-amount.positive { color: var(--color-income); }
.balance-amount.negative { color: var(--color-expense); }

.premium-badge-compact {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--color-warning); font-size: 1rem; cursor: pointer;
}
.trial-days-badge {
  font-size: 0.58rem; font-weight: 700;
  background: var(--gradient-gold); color: #fff;
  border-radius: 999px; padding: 1px 5px; line-height: 1.5;
}

/* Sidebar (desktop) */
.app-sidebar {
  display: none; width: var(--sidebar-width); flex-direction: column;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  min-height: 100dvh; overflow-y: auto; position: sticky; top: 0; height: 100vh;
}
.sidebar-content { padding: 1rem 0.75rem; flex: 1; display: flex; flex-direction: column; gap: 0; }
.sidebar-footer { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--color-border); }
.sidebar-section-title {
  font-size: 0.65rem; font-weight: 700; color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.8px; padding: 0.75rem 12px 0.25rem;
}

/* ── User profile block in sidebar ───────────────────────── */
.user-profile-compact {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.user-avatar-compact { flex-shrink: 0; }
.avatar-wrapper {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center; color: white;
}
.compact-avatar-image { width: 100%; height: 100%; }
.compact-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.compact-avatar-icon { font-size: 1.55rem; color: white; line-height: 1; }
.user-info-compact { flex: 1; min-width: 0; }
.user-name-compact {
  font-weight: 700; font-size: 0.88rem; color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-stats-compact {
  display: flex; gap: 8px; align-items: center; margin-top: 3px;
  font-size: 0.72rem; color: var(--color-text-secondary); flex-wrap: wrap;
}
.stat-compact { display: inline-flex; align-items: center; gap: 3px; }
.stat-compact i { font-size: 0.72rem; color: var(--color-primary); }
.stat-compact i.bi-coin { color: #f5a623; }
.stat-compact i.bi-crown-fill { color: #f5a623; }
.progress-compact { margin-top: 6px; }
.progress-bar-compact { height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.progress-fill-compact { height: 100%; background: var(--gradient-primary); transition: width 0.4s; border-radius: 2px; }
.progress-text-compact { font-size: 0.65rem; color: var(--color-text-tertiary); margin-top: 2px; }

/* ── Sidebar balance block ────────────────────────────────── */
.sidebar-balance {
  margin: 4px 2px 8px;
  padding: 12px 14px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  border: 1px solid rgba(99,102,241,0.15);
  min-width: 0; overflow: hidden;
}
.sidebar-balance-label { font-size: 0.65rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; }
.sidebar-balance-amount { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-balance-amount.negative { color: var(--color-expense); }
.sidebar-balance-sub { font-size: 0.68rem; color: var(--color-text-secondary); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.sidebar-balance-sub > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-balance-sub .income-text { color: var(--color-income); font-weight: 600; }
.sidebar-balance-sub .expense-text { color: var(--color-expense); font-weight: 600; }
[data-bs-theme="dark"] .sidebar-balance { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2); }

/* ── Nav items ────────────────────────────────────────────── */
.nav-menu { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--color-text-secondary); font-size: 0.88rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s; text-decoration: none; position: relative;
}
.nav-item:hover { background: var(--color-primary-light); color: var(--color-primary); text-decoration: none; }
.nav-item.active {
  background: var(--color-primary-light); color: var(--color-primary); font-weight: 700;
}
.nav-item i:first-child {
  font-size: 1.05rem; width: 22px; height: 22px; text-align: center; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-item.active i:first-child { color: var(--color-primary); }
.nav-item span:first-of-type { flex: 1; }
.nav-item-premium { opacity: 0.75; }
.nav-lock-icon { font-size: 0.6rem; color: var(--color-text-tertiary); flex-shrink: 0; }
.notification-dot { width: 8px; height: 8px; background: var(--color-expense); border-radius: 50%; flex-shrink: 0; }

/* Main content */
.app-main {
  flex: 1; overflow-y: auto;
  overflow-x: hidden; /* global safety net: nothing can push the page sideways */
  min-width: 0;
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 8px);
}
.app-main.has-banner-ad {
  padding-bottom: calc(var(--bottom-nav-height) + 60px + env(safe-area-inset-bottom, 0px) + 8px);
}
.tab-content { animation: fadeIn 0.18s var(--ease-out); }

/* Bottom nav — 5 items */
.app-bottom-nav {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 200;
  /* backdrop-filter removed: expensive GPU operation on every frame during scroll */
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--color-text-tertiary); font-size: 0.58rem; font-weight: 500;
  cursor: pointer; border: none; background: transparent; padding: 6px 2px; transition: color 0.15s;
  text-decoration: none; letter-spacing: 0.2px; position: relative;
}
.bottom-nav-item > i { font-size: 1.3rem; }
.bottom-nav-item.active { color: var(--color-primary); }
.bottom-nav-item.active > i { font-weight: bold; }
.bottom-nav-spacer { flex: 1; }

/* Analytics nav item with lock badge */
.bottom-nav-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.bottom-nav-icon-wrap .bi-graph-up { font-size: 1.3rem; }
.bottom-nav-lock {
  position: absolute; bottom: -3px; right: -5px;
  font-size: 0.6rem !important;
  color: var(--color-text-tertiary);
  background: var(--color-surface);
  border-radius: 50%; padding: 1px;
  line-height: 1;
}
.bottom-nav-item.active .bottom-nav-lock { color: var(--color-primary); }
.bottom-nav-item.nav-locked { opacity: 0.7; }

/* FAB */
.fab-add {
  position: fixed; right: 16px;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--gradient-primary);
  border: none; color: #fff; font-size: 1.7rem;
  box-shadow: 0 4px 20px rgba(88,86,214,0.45), 0 1px 6px rgba(88,86,214,0.3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 199; transition: transform 0.22s var(--ease-elastic), box-shadow 0.2s;
}
.fab-add:active { transform: scale(0.93); }
.fab-add.open { transform: rotate(45deg); box-shadow: 0 6px 24px rgba(88,86,214,0.5); }
.fab-menu {
  position: fixed; right: 12px;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 80px);
  display: flex; flex-direction: column; gap: 8px; z-index: 198;
  animation: fadeInUp 0.2s var(--ease-out);
}
.fab-menu-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface); border: none; border-radius: 14px;
  padding: 11px 18px; font-size: var(--font-size-sm); font-weight: 600;
  box-shadow: var(--color-shadow-lg); cursor: pointer; white-space: nowrap;
  color: var(--color-text-primary); transition: transform 0.15s;
}
.fab-menu-item:active { transform: scale(0.97); }
.fab-menu-item.income i { color: var(--color-income); }
.fab-menu-item.expense i { color: var(--color-expense); }
.fab-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 197; background: rgba(0,0,0,0.18); animation: fadeIn 0.2s ease; }
.mobile-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.52); z-index: 98; animation: fadeIn 0.2s ease; }

/* Desktop layout */
@media (min-width: 768px) {
  .main-application { flex-direction: row; }
  .app-sidebar { display: flex; }
  .app-header { display: none; }
  .app-bottom-nav { display: none !important; }
  .fab-add, .fab-menu, .fab-backdrop { display: none !important; }
  .app-main {
    flex: 1; padding: 1.5rem 1.75rem; padding-bottom: 1.75rem;
    max-width: 1200px; margin: 0 auto; width: 100%;
  }
  .app-main.has-banner-ad { padding-bottom: 70px; }
}
@media (min-width: 1200px) {
  .app-main { max-width: 1100px; }
}

/* ═══════════════════════════════════════════════════════════
   CARDS — Universal
   ═══════════════════════════════════════════════════════════ */

.card, .enhanced-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--color-shadow);
  border: 1px solid var(--color-border);
  overflow: hidden; margin-bottom: 14px;
}
.enhanced-card .card-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-surface);
  flex-wrap: wrap; gap: 6px;
}
.enhanced-card .card-header > * { min-width: 0; }
.enhanced-card .card-body { padding: 16px; }
.enhanced-card h5, .enhanced-card h6 { margin: 0; color: var(--color-text-primary); font-weight: 600; }

/* Stat cards */
.stat-card, .stat-card-enhanced {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--color-shadow);
  padding: 14px 16px;
  border: 1px solid var(--color-border);
}
.stat-header {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--color-text-secondary); margin-bottom: 6px; font-weight: 500;
}
.stat-header i { font-size: 0.85rem; }
.stat-value {
  font-size: clamp(1rem, 4vw, 1.3rem);
  font-weight: 700; color: var(--color-text-primary);
  font-variant-numeric: tabular-nums; line-height: 1.2;
  word-break: break-all;
}
.stat-trend { font-size: 0.72rem; color: var(--color-text-secondary); margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.stat-card.income .stat-value, .stat-card-enhanced.income .stat-value { color: var(--color-income); }
.stat-card.expense .stat-value, .stat-card-enhanced.expense .stat-value { color: var(--color-expense); }

/* Stats grid */
.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px;
}
.stat-card.balance { grid-column: span 2; }
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); padding: 16px 0 20px; gap: 14px; }
  .stat-card.balance, .stat-card-enhanced.balance { grid-column: auto; }
  .stat-value { font-size: 1.3rem; word-break: normal; }

  /* Budget tab — desktop alignment fixes */
  /* Remove inner horizontal margins: app-main already provides padding */
  .budget-list-card { margin-left: 0; margin-right: 0; }
  /* Extend the sticky period bar to flush with app-main edges (counteract its padding) */
  .budget-tab .analytics-period-bar,
  .analytics-tab .analytics-period-bar {
    margin-left: -1.75rem; margin-right: -1.75rem;
    padding-left: 1.75rem; padding-right: 1.75rem;
    /* Already sticky within app-main; top offset kept at 0 */
  }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════ */

.dashboard-tab { display: flex; flex-direction: column; padding-bottom: 8px; }

/* ── Quick action bar (NO card style) ─────────────────────── */
.quick-actions-bar {
  display: none; /* hidden on mobile — use FAB instead */
  gap: 8px; padding: 12px 12px 8px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .quick-actions-bar { display: flex; } /* show on desktop */
}
.qab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--color-bg); border: 1.5px solid var(--color-border); padding: 10px 4px;
  border-radius: var(--radius-md); cursor: pointer;
  transition: all 0.16s ease; color: var(--color-text-secondary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.qab-btn:active { transform: scale(0.95); opacity: 0.85; }
.qab-btn.income  { border-color: rgba(48,209,88,0.35); background: rgba(48,209,88,0.06); }
.qab-btn.expense { border-color: rgba(255,69,58,0.30); background: rgba(255,69,58,0.05); }
.qab-btn.goal    { border-color: rgba(99,102,241,0.30); background: rgba(99,102,241,0.06); }
@media (hover: hover) {
  .qab-btn.income:hover  { background: rgba(48,209,88,0.12); border-color: var(--color-income); }
  .qab-btn.expense:hover { background: rgba(255,69,58,0.10); border-color: var(--color-expense); }
  .qab-btn.goal:hover    { background: rgba(99,102,241,0.12); border-color: var(--color-primary); }
}
.qab-icon {
  width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.qab-btn.income  .qab-icon { background: rgba(48,209,88,0.15); color: var(--color-income); }
.qab-btn.expense .qab-icon { background: rgba(255,69,58,0.12); color: var(--color-expense); }
.qab-btn.goal    .qab-icon { background: rgba(99,102,241,0.12); color: var(--color-primary); }
.qab-label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-primary); }

@media (min-width: 768px) {
  .quick-actions-bar {
    padding: 16px 0 12px; gap: 12px; background: none; border-bottom: none;
  }
  .qab-btn { flex-direction: row; gap: 10px; padding: 13px 20px;
    border-radius: var(--radius-md); box-shadow: var(--color-shadow); justify-content: center;
  }
  .qab-btn.income  { border-color: rgba(48,209,88,0.4); background: rgba(48,209,88,0.07); }
  .qab-btn.expense { border-color: rgba(255,69,58,0.35); background: rgba(255,69,58,0.06); }
  .qab-btn.goal    { border-color: rgba(99,102,241,0.35); background: rgba(99,102,241,0.07); }
  @media (hover: hover) {
    .qab-btn.income:hover  { box-shadow: 0 4px 12px rgba(48,209,88,0.18); transform: translateY(-1px); }
    .qab-btn.expense:hover { box-shadow: 0 4px 12px rgba(255,69,58,0.18); transform: translateY(-1px); }
    .qab-btn.goal:hover    { box-shadow: 0 4px 12px rgba(99,102,241,0.18); transform: translateY(-1px); }
  }
  .qab-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1.1rem; flex-shrink: 0; }
  .qab-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-primary); }
}

/* ── Balance hero ─────────────────────────────────────────── */
.balance-hero {
  /* Hidden on both phone (balance is in the top header) and desktop (balance is in
     the left sidebar) — so it's redundant everywhere on the dashboard. */
  display: none;
  text-align: center; padding: 20px 16px 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.balance-hero-label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }
.balance-hero-amount { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.balance-hero-amount.positive { color: var(--color-text-primary); }
.balance-hero-amount.negative { color: var(--color-expense); }
.balance-hero-sub { font-size: 0.72rem; color: var(--color-text-tertiary); margin-top: 4px; }

@media (min-width: 768px) {
  /* Desktop: balance lives in the left sidebar, so keep the hero hidden here too. */
  .balance-hero { display: none; }
}

/* ── Stats row (3 pills) ──────────────────────────────────── */
.stats-row {
  display: flex; gap: 8px; padding: 12px 12px 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stats-row::-webkit-scrollbar { display: none; }
.stat-pill {
  display: flex; align-items: center; gap: 7px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 10px 11px;
  flex: 1 1 0; min-width: 0; overflow: hidden; box-shadow: var(--color-shadow);
}
.stat-pill > i { font-size: 1.05rem; flex-shrink: 0; }
.stat-pill.income > i { color: var(--color-income); }
.stat-pill.expense > i { color: var(--color-expense); }
.stat-pill.savings > i { color: var(--color-primary); }
.stat-pill.neutral > i { color: var(--color-text-secondary); }
.stat-pill-info { display: flex; flex-direction: column; min-width: 0; }
.stat-pill-label { font-size: 0.66rem; color: var(--color-text-tertiary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-pill-value { font-size: 0.84rem; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 768px) {
  .stats-row {
    padding: 0 0 20px;
    gap: 12px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
  }
  .stat-pill { min-width: 0; }
}

/* ── Dashboard 2-column content grid ─────────────────────── */
.dashboard-content {
  display: flex; flex-direction: column; gap: 0;
  padding: 8px 0 0;
}
@media (min-width: 768px) {
  .dashboard-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* minmax(0,…) lets columns shrink */
    grid-template-rows: auto;
    gap: 0 24px;
    align-items: start;
    padding-top: 0;
  }
  .dash-full-row {
    grid-column: 1 / -1; /* span both columns */
    margin-top: 4px;
    min-width: 0;
  }
}

/* min-width:0 on these flex/grid containers is REQUIRED so a long unbroken goal name
   can be clipped with an ellipsis instead of forcing the column (and the whole page)
   to overflow to the right. */
.dash-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dash-full-row { display: flex; flex-direction: column; min-width: 0; }

/* ── Dash card (replaces enhanced-card in dashboard) ─────── */
.dash-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--color-shadow);
  overflow: hidden;
  margin: 0 12px 14px;
}
@media (min-width: 768px) {
  .dash-card { margin: 0 0 20px; }
  .dash-add-goal-cta { width: 100%; margin: 0 0 20px; }
}

.dash-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--color-border);
  font-size: 0.82rem; font-weight: 600; color: var(--color-text-primary);
}
.dash-card-header i { margin-right: 5px; color: var(--color-primary); font-size: 0.9rem; }
.dash-card-sub { font-size: 0.72rem; font-weight: 400; color: var(--color-text-tertiary); }
.dash-link-btn {
  background: none; border: none; padding: 2px 6px;
  font-size: 0.75rem; color: var(--color-primary); font-weight: 600;
  cursor: pointer; border-radius: 6px;
  transition: background 0.12s;
}
.dash-link-btn:hover { background: var(--color-primary-light); }

.dash-card-body { padding: 12px 16px; }
.dash-card-body.no-pad { padding: 0; }

/* 2-column transaction list inside full-width card on desktop */
/* minmax(0,1fr), а не 1fr: иначе длинное описание (white-space:nowrap) раздувает
   min-content трека, элемент становится шире карточки и сумма уезжает за overflow:hidden */
.dash-tx-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .dash-tx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-tx-grid .transaction-item { border-bottom: 1px solid var(--color-border); }
  .dash-tx-grid .transaction-item:last-child,
  .dash-tx-grid .transaction-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

/* ── Goal rows in dashboard ───────────────────────────────── */
.dash-goal-row { padding: 10px 0; border-bottom: 1px solid var(--color-border); min-width: 0; }
.dash-goal-row:last-child { border-bottom: none; }
.dash-goal-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.dash-goal-name {
  font-weight: 600; font-size: 0.85rem; color: var(--color-text-primary);
  min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-goal-nums { font-size: 0.72rem; color: var(--color-text-secondary); white-space: nowrap; flex-shrink: 0; }
.dash-goal-status { font-size: 0.70rem; color: var(--color-text-tertiary); margin-top: 4px; }
.dash-goal-complete { font-size: 0.75rem; color: var(--color-income); margin-top: 4px; font-weight: 600; }
.dash-goal-complete i { margin-right: 3px; }
.dash-goal-actions { display: flex; gap: 6px; margin-top: 8px; }
.dash-action-btn {
  flex: 1; padding: 6px 8px; font-size: 0.75rem; font-weight: 500;
  border-radius: var(--radius-sm); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: opacity 0.12s;
}
.dash-action-btn:disabled { opacity: 0.4; cursor: default; }
.dash-action-btn.add      { background: rgba(48,209,88,0.12); color: var(--color-income); }
.dash-action-btn.withdraw { background: rgba(255,149,0,0.12); color: var(--color-warning); }
.dash-action-btn.complete { background: rgba(48,209,88,0.12); color: var(--color-income); }

/* ── Expense rows in dashboard ────────────────────────────── */
.dash-expense-row { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.dash-expense-row:last-child { border-bottom: none; }
.dash-expense-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.dash-expense-name { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--color-text-primary); min-width: 0; flex: 1; }
.dash-expense-cat { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-expense-amount { flex-shrink: 0; }
.dash-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dash-expense-amount { font-size: 0.85rem; color: var(--color-expense); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Widgets */
/* ── Month summary card ─────────────────────────────────────── */
.dash-month-card .dash-card-body { padding: 12px 16px 14px; }
.month-net { border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.month-net.positive { background: rgba(34,197,94,.08); }
.month-net.negative { background: rgba(239,68,68,.08); }
.month-net-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; min-width: 0; }
.month-net-label { font-size: 0.72rem; color: var(--color-text-secondary); font-weight: 500; white-space: nowrap; }
.month-net-amount { font-size: 1.05rem; font-weight: 800; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.month-net.positive .month-net-amount { color: var(--color-income); }
.month-net.negative .month-net-amount { color: var(--color-expense); }
.month-net-bar { height: 6px; border-radius: 99px; background: var(--color-border); overflow: hidden; display: flex; margin-bottom: 6px; }
.month-net-bar-income { height: 100%; background: var(--color-income); border-radius: 99px 0 0 99px; transition: width .4s; }
.month-net-bar-expense { height: 100%; background: var(--color-expense); border-radius: 0 99px 99px 0; transition: width .4s; }
.month-net-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 0.7rem; font-weight: 600; min-width: 0; }
.month-net-labels span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-net-labels .income-label { color: var(--color-income); }
.month-net-labels .expense-label { color: var(--color-expense); }
.month-day-row { display: flex; align-items: center; gap: 8px; }
.month-day-row .goal-progress-bar { flex: 1; }
.month-day-label { font-size: 0.68rem; color: var(--color-text-secondary); white-space: nowrap; }
.month-no-data { margin-top: 10px; text-align: center; }
.month-no-data p { font-size: 0.78rem; color: var(--color-text-secondary); margin: 0 0 8px; }
.month-cta-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── Goals in dashboard ──────────────────────────────────────── */
.dash-goal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.dash-goal-action-sm {
  padding: 4px 12px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 0.72rem; font-weight: 600; transition: opacity .15s;
}
.dash-goal-action-sm.add { background: var(--color-primary-light); color: var(--color-primary); }
.dash-goal-action-sm.complete { background: rgba(34,197,94,.12); color: var(--color-income); }
.dash-goal-action-sm:disabled { opacity: .4; pointer-events: none; }
.dash-add-goal-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 24px); margin: 0 12px 14px;
  padding: 12px; border-radius: var(--radius-md);
  border: 1.5px dashed var(--color-border);
  background: transparent; color: var(--color-text-secondary);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.dash-add-goal-cta:active { border-color: var(--color-primary); color: var(--color-primary); }

/* ── 4-stat grid (Серия · Уровень · Здоровье · Сбережения) ──── */
.dash-stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; padding: 0 12px 14px;
}
@media (min-width: 768px) {
  .dash-stats-grid {
    gap: 12px;
    padding: 0 0 20px;
  }
}
.dash-stat-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 12px 12px 10px;
  box-shadow: var(--color-shadow); cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform .15s;
}
.dash-stat-card:active { transform: scale(0.97); }
.dash-stat-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; margin-bottom: 4px;
}
.dash-stat-icon.streak { background: rgba(249,115,22,.12); color: #f97316; }
.dash-stat-icon.level  { background: rgba(99,102,241,.12); color: var(--color-primary); }
.dash-stat-icon.health-good { background: rgba(34,197,94,.12); color: var(--color-income); }
.dash-stat-icon.health-ok  { background: rgba(234,179,8,.12); color: #eab308; }
.dash-stat-icon.health-bad { background: rgba(239,68,68,.12); color: var(--color-expense); }
.dash-stat-icon.neutral    { background: var(--color-primary-light); color: var(--color-primary); }
.dash-stat-icon.savings    { background: rgba(99,102,241,.12); color: var(--color-primary); }
.dash-stat-value { font-size: 1.15rem; font-weight: 800; color: var(--color-text); line-height: 1.1; }
.dash-stat-label { font-size: 0.65rem; color: var(--color-text-secondary); font-weight: 500; line-height: 1.3; }
@media (min-width: 768px) {
  .dash-stat-card { padding: 14px 12px 12px; }
  .dash-stat-value { font-size: 1.25rem; }
}
.dash-stat-bar { height: 3px; background: var(--color-border); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.dash-stat-bar-fill { height: 100%; background: var(--gradient-primary); border-radius: 2px; transition: width .5s; }

/* ── Purpose KPI widget card ─────────────────────────────────── */
.purpose-kpi-card { padding: 0; overflow: hidden; }
.purpose-kpi-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px 8px;
}
.purpose-kpi-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.purpose-kpi-main { flex: 1; min-width: 0; }
.purpose-kpi-metric { font-size: 1.2rem; font-weight: 800; line-height: 1.1; }
.purpose-kpi-label { font-size: 0.68rem; color: var(--color-text-secondary); margin-top: 1px; }
.purpose-kpi-badge {
  font-size: 1.1rem; color: var(--color-text-secondary); opacity: 0.35; flex-shrink: 0;
}
.purpose-kpi-bar {
  height: 3px; background: var(--color-border); margin: 0 16px 10px;
  border-radius: 2px; overflow: hidden;
}
.purpose-kpi-bar-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }
.purpose-kpi-tip {
  font-size: 0.73rem; color: var(--color-text-secondary); padding: 0 16px 12px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .purpose-kpi-metric { font-size: 1.3rem; }
}

/* Streak пульсирует когда активен */
.streak-active .dash-stat-icon.streak { animation: streak-pulse 2s ease-in-out infinite; }
@keyframes streak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,.3); }
  50%       { box-shadow: 0 0 0 5px rgba(249,115,22,.0); }
}

/* ── dash-hint-btn (переиспользуется в month card CTA) ───────── */
.dash-hint-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px;
  border: none; cursor: pointer; font-size: 0.8rem; font-weight: 600;
  background: var(--color-primary); color: #fff;
  transition: opacity 0.15s;
}
.dash-hint-btn:active { opacity: 0.8; }
.dash-hint-btn.secondary { background: var(--color-primary-light); color: var(--color-primary); }

/* Legacy widget cards (kept for other potential uses) */
.widget-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 12px; box-shadow: var(--color-shadow);
  cursor: pointer; transition: transform 0.15s; overflow: hidden;
}
.widget-card:active { transform: scale(0.97); }
.widget-header { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--color-text-secondary); margin-bottom: 6px; font-weight: 500; }
.widget-header i { font-size: 0.9rem; }
.widget-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-content { font-size: 1rem; font-weight: 700; color: var(--color-primary); line-height: 1.2; }
.widget-progress { height: 3px; background: var(--color-border); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.widget-progress-fill { height: 100%; border-radius: 2px; background: var(--gradient-primary); transition: width 0.5s; }
.widget-success .widget-content { color: var(--color-income); }
.widget-warning .widget-content { color: var(--color-warning); }
.widget-danger .widget-content { color: var(--color-expense); }

/* Goal list in dashboard */
.dashboard-tab .goal-list-item { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.dashboard-tab .goal-list-item:last-child { border-bottom: none; }

/* Recent transactions in dashboard */
.transaction-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  /* Не интерактивен (нет @click) — без cursor:pointer и hover/active-подсветки,
     чтобы не выглядел кликабельным. */
  cursor: default;
  /* min-width:0 — иначе как grid-элемент в .dash-tx-grid он раздувается под длинный
     текст (default min-width:auto) и описание вылезает за карточку без многоточия */
  min-width: 0;
}
.transaction-item:last-child { border-bottom: none; }
.transaction-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white;
}
.transaction-icon.income { background: rgba(48,209,88,0.15); color: var(--color-income); }
.transaction-icon.expense { background: rgba(255,69,58,0.12); color: var(--color-expense); }
.transaction-icon.transfer { background: var(--color-primary-light); color: var(--color-primary); }
.transaction-icon.transfer-in { background: rgba(48,209,88,0.12); color: var(--color-income); }
.transaction-icon.transfer-out { background: rgba(255,69,58,0.1); color: var(--color-expense); }
.transaction-info { flex: 1; min-width: 0; }
.transaction-title, .transaction-category { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-description { font-size: 0.72rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-meta { font-size: 0.68rem; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.transaction-date { }
.transaction-id { opacity: 0.5; }
.transaction-amount {
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: var(--font-size-sm); white-space: nowrap;
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; min-width: 64px;
}
.transaction-amount.income, .transaction-amount.transfer-in { color: var(--color-income); }
.transaction-amount.expense, .transaction-amount.transfer-out { color: var(--color-expense); }

/* ═══════════════════════════════════════════════════════════
   TRANSACTIONS TAB — redesigned
   ═══════════════════════════════════════════════════════════ */

.transactions-tab { padding-bottom: 16px; }

/* ─── Top bar ────────────────────────────────────────────── */
.tx-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; gap: 8px; flex-wrap: wrap;
}
.tx-title {
  font-size: 1.1rem; font-weight: 700; color: var(--color-text-primary);
  margin: 0; display: flex; align-items: center; gap: 8px;
}
.tx-count-badge {
  font-size: 0.70rem; font-weight: 700; padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-primary-light); color: var(--color-primary);
}
.tx-filters { display: flex; gap: 6px; flex-shrink: 0; }
.tx-filter-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap; line-height: 1;
}
.tx-filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tx-filter-btn.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }
.tx-filter-btn i { font-size: 0.82rem; flex-shrink: 0; }
.tx-filter-btn.dropdown-toggle::after { margin-left: 2px; vertical-align: middle; }
/* Truncate filter label on very small screens */
.tx-filter-label { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Category dropdown color dot */
.cat-dot-inline {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0; margin-right: 8px; vertical-align: middle;
}

/* ─── Custom period picker ───────────────────────────────── */
.tx-custom-period {
  margin: 0 0 0;
  padding: 10px 16px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.tx-custom-period-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* Each label+input is one flexible unit. */
.tx-cp-field {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 150px; min-width: 0; margin: 0;
}
.tx-cp-field .compact-input { flex: 1; min-width: 0; padding-left: 10px; padding-right: 6px; }
.tx-cp-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Фикс. ширина у «С»/«по»: иначе разная длина подписи (1 vs 2 символа) даёт
   разную ширину инпутов в их строках — поля выглядели разного размера. */
.tx-custom-label { font-size: 0.78rem; color: var(--color-text-secondary); white-space: nowrap; flex-shrink: 0; min-width: 26px; }
/* Small screens: give each date its OWN full-width row so the native picker can render
   the full year (it was truncating "2026" → "20" when squeezed two-per-row). */
@media (max-width: 480px) {
  .tx-cp-field { flex-basis: 100%; }
  .tx-cp-actions { width: 100%; justify-content: flex-end; }
}
.tx-custom-close {
  background: none; border: none; color: var(--color-text-secondary);
  cursor: pointer; padding: 4px 6px; border-radius: 6px;
  font-size: 0.85rem; line-height: 1; transition: color 0.12s, background 0.12s;
}
.tx-custom-close:hover { background: var(--color-bg); color: var(--color-text-primary); }

/* ─── Stats strip — mobile: 3-column grid, no icons ─────── */
.tx-stats-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0 0 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.tx-stat-pill {
  padding: 10px 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-right: 1px solid var(--color-border);
}
.tx-stat-pill:last-child { border-right: none; }
/* Icons hidden on mobile — not enough space */
.tx-stat-icon-wrap { display: none; }
.tx-stat-sep       { display: none; }
.tx-stat-text { text-align: center; min-width: 0; }
.tx-stat-val {
  font-size: 0.82rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2;
}
.tx-stat-val.income  { color: var(--color-income); }
.tx-stat-val.expense { color: var(--color-expense); }
.tx-stat-lbl { font-size: 0.63rem; color: var(--color-text-secondary); margin-top: 1px; }

/* ─── List card — mobile: full-width, no radius ─────────── */
.tx-list-card {
  margin: 8px 0 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

/* ─── Date group ─────────────────────────────────────────── */
.tx-date-group + .tx-date-group { border-top: 2px solid var(--color-bg); }
.tx-date-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px 5px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.tx-date-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-text-tertiary);
}
.tx-date-count {
  font-size: 0.65rem; font-weight: 600; color: var(--color-text-tertiary);
  background: var(--color-border); border-radius: 999px;
  padding: 1px 6px;
}

/* ─── Transaction row ────────────────────────────────────── */
.tx-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px 10px 17px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: background 0.12s;
  position: relative;
}
.tx-row:last-child { border-bottom: none; }
.tx-row:hover { background: var(--color-bg); }
.tx-row.goal-transfer { background: rgba(0,0,0,0.015); }

/* Left accent stripe */
.tx-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 0;
}
.tx-row.income::before  { background: var(--color-income); }
.tx-row.expense::before { background: var(--color-expense); }
.tx-row.transfer::before,
.tx-row.transfer-in::before,
.tx-row.transfer-out::before { background: var(--color-primary); }

/* Type icon */
.tx-icon-wrap {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.tx-icon-wrap.income  { background: rgba(48,209,88,0.13); color: var(--color-income); }
.tx-icon-wrap.expense { background: rgba(255,69,58,0.10); color: var(--color-expense); }
.tx-icon-wrap.transfer,
.tx-icon-wrap.transfer-in,
.tx-icon-wrap.transfer-out { background: var(--color-primary-light); color: var(--color-primary); }

/* Info block */
.tx-info { flex: 1; min-width: 0; }
.tx-cat-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tx-cat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tx-cat-name {
  font-size: var(--font-size-sm); font-weight: 600;
  color: var(--color-text-primary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tx-desc-line {
  font-size: 0.71rem; color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}

/* ─── Action buttons ─────────────────────────────────────── */
/* Mobile: always visible, small icon buttons */
.tx-actions { display: flex; gap: 5px; flex-shrink: 0; align-self: center; }
.tx-transfer-hint {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; color: var(--color-text-tertiary); opacity: 0.6;
  font-size: 0.8rem;
}
.tx-action-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.78rem; color: var(--color-text-secondary);
  transition: background 0.13s, border-color 0.13s, color 0.13s;
  flex-shrink: 0;
}
.tx-action-btn.edit:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.tx-action-btn.del:hover  { border-color: var(--color-expense); color: var(--color-expense); background: rgba(255,69,58,0.08); }

/* ── Desktop: three independent cards (same pattern as Dashboard) ── */
@media (min-width: 768px) {
  .transactions-tab { padding-bottom: 4px; }

  /* Card 1 — Title + filters */
  .tx-topbar {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--color-shadow);
    padding: 16px 20px;
    margin-bottom: 16px;
  }

  /* Custom period attached below topbar */
  .tx-custom-period {
    margin: -12px 0 16px; padding: 10px 20px 12px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border); border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  /* Card 2 — Stats strip: horizontal flex with icons */
  .tx-stats-strip {
    display: flex; align-items: center;
    grid-template-columns: unset;
    margin: 0 0 16px; padding: 14px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--color-shadow);
    background: var(--color-surface);
  }
  .tx-stat-pill {
    flex: 1; flex-direction: row; gap: 10px; padding: 0;
    align-items: center; justify-content: flex-start;
    border-right: none; text-align: left;
  }
  .tx-stat-icon-wrap { display: flex; }
  .tx-stat-sep { display: block; width: 1px; height: 30px; background: var(--color-border); flex-shrink: 0; margin: 0 16px; }
  .tx-stat-text { text-align: left; }
  .tx-stat-val { font-size: 0.9rem; }

  /* Card 3 — Transaction list */
  .tx-list-card {
    margin: 0; border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--color-shadow);
  }

  /* Empty state as card */
  .tx-empty { margin: 0; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--color-shadow); }

  /* Hover-reveal action buttons (the transfer lock-hint stays visible — it's informational) */
  .tx-action-btn { opacity: 0; pointer-events: none; transition: opacity 0.18s; }
  .tx-row:hover .tx-action-btn { opacity: 1; pointer-events: auto; }
  .tx-action-btn { width: 28px; height: 28px; border-radius: 6px; font-size: 0.74rem; }

  .tx-row { padding: 11px 20px 11px 22px; gap: 14px; }
  .tx-date-header { padding: 8px 20px 6px; }
}

/* ─── Amount column ──────────────────────────────────────── */
.tx-amount-col {
  flex-shrink: 0; text-align: right; min-width: 74px;
  display: flex; flex-direction: column; align-items: flex-end;
}
.tx-amount-val {
  font-size: var(--font-size-sm); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.3;
}
.tx-amount-col.income .tx-amount-val,
.tx-amount-col.transfer-in .tx-amount-val { color: var(--color-income); }
.tx-amount-col.expense .tx-amount-val,
.tx-amount-col.transfer-out .tx-amount-val { color: var(--color-expense); }

.tx-type-tag {
  font-size: 0.60rem; font-weight: 700;
  padding: 1px 5px; border-radius: 4px; margin-top: 3px; white-space: nowrap;
}
.tx-type-tag.income   { background: rgba(48,209,88,0.12); color: var(--color-income); }
.tx-type-tag.expense  { background: rgba(255,69,58,0.10); color: var(--color-expense); }
.tx-type-tag.transfer { background: var(--color-primary-light); color: var(--color-primary); }

/* ─── Empty state ────────────────────────────────────────── */
.tx-empty {
  margin: 8px 0 0; padding: 48px 20px; text-align: center;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.tx-empty i { font-size: 2.8rem; color: var(--color-text-tertiary); display: block; margin-bottom: 12px; }
.tx-empty p { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); margin: 0 0 4px; }
.tx-empty span { font-size: 0.78rem; color: var(--color-text-secondary); }

/* Desktop: empty state with card styling */
@media (min-width: 768px) {
  .tx-empty {
    margin: 0; border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--color-shadow);
  }
}

/* ─── Meta line (date + id) ──────────────────────────────── */
.tx-meta-line {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 0.65rem; color: var(--color-text-tertiary); line-height: 1;
}
.tx-meta-id { opacity: 0.75; }

/* ─── Dark theme fixes ───────────────────────────────────── */
[data-bs-theme="dark"] .tx-row.goal-transfer { background: rgba(255,255,255,0.025); }
[data-bs-theme="dark"] .tx-action-btn { background: var(--color-surface); }
[data-bs-theme="dark"] .tx-date-header { background: rgba(0,0,0,0.15); }

/* ═══════════════════════════════════════════════════════════
   GOALS TAB
   ═══════════════════════════════════════════════════════════ */

.goals-tab { padding: 0 16px 24px; }
@media (min-width: 768px) { .goals-tab { padding: 0 0 24px; } }

/* ── Header ───────────────────────────────────────────────── */
.goals-tab-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 14px; gap: 12px; flex-wrap: wrap;
}
.goals-tab-title {
  margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--color-text-primary);
  display: flex; align-items: center; gap: 8px;
}
.goals-count-badge {
  font-size: 0.70rem; font-weight: 700;
  background: var(--color-primary-light); color: var(--color-primary);
  border-radius: 999px; padding: 2px 9px;
}
.goals-header-right { display: flex; align-items: center; gap: 10px; }
.goals-limit-txt { font-size: 0.75rem; color: var(--color-text-secondary); }
.goals-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm); border: none;
  background: var(--color-primary); color: #fff;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s;
}
.goals-add-btn:hover:not(:disabled) { opacity: 0.88; }
.goals-add-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Summary strip ────────────────────────────────────────── */
.goals-summary-strip {
  display: flex; align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--color-shadow);
  margin-bottom: 16px; overflow: hidden;
}
.goals-ss-item { flex: 1; text-align: center; padding: 12px 4px; }
.goals-ss-val {
  font-size: 0.92rem; font-weight: 700; color: var(--color-text-primary);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.goals-ss-pct { color: var(--color-primary); }
.goals-ss-lbl { font-size: 0.63rem; font-weight: 500; color: var(--color-text-secondary); margin-top: 2px; }
.goals-ss-sep { width: 1px; background: var(--color-border); height: 28px; flex-shrink: 0; }

/* ── Grid ─────────────────────────────────────────────────── */
/* auto-fill + minmax: 1 card → full width, 2 → half each, 3+ → ~280px columns */
.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
@media (max-width: 479px) { .goals-grid { grid-template-columns: 1fr; } }

/* ── Card ─────────────────────────────────────────────────── */
.goal-card-enhanced {
  background: var(--color-surface); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); padding: 0;
  box-shadow: var(--color-shadow); overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
}
.goal-card-enhanced:hover { box-shadow: var(--color-shadow-lg); transform: translateY(-1px); }
.goal-card-done  { border-color: rgba(48,209,88,0.25); }
.goal-card-cancelled { opacity: 0.72; border-color: rgba(255,159,10,0.22); }

.goal-card-accent { height: 4px; width: 100%; }
.goal-card-body   { padding: 14px 16px; }

.goal-card-top {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
}
.goal-card-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.goal-card-info { flex: 1; min-width: 0; }
.goal-card-title {
  font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary);
  margin: 0 0 2px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.goal-card-subdesc {
  font-size: 0.70rem; color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.goal-menu-btn {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: var(--color-bg); color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; cursor: pointer; flex-shrink: 0; transition: background 0.12s;
}
.goal-menu-btn:hover { background: var(--color-border-strong); }

/* Progress section */
.goal-progress-section { margin-bottom: 12px; }
.goal-progress-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
}
.goal-pct-lbl    { font-size: 0.75rem; font-weight: 700; color: var(--color-text-primary); }
.goal-amounts-lbl { font-size: 0.68rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.goal-progress-bar  { height: 7px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.goal-progress-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.goal-achieved-badge {
  display: flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 0.72rem; font-weight: 600; color: var(--color-income);
}
.goal-status-lbl { font-size: 0.68rem; color: var(--color-text-secondary); margin-top: 5px; }

/* Action buttons */
.goal-actions { display: flex; gap: 7px; }
.goal-action-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 8px; border-radius: var(--radius-sm); border: 1.5px solid;
  font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s;
  white-space: nowrap;
}
.goal-action-btn.add      { border-color: rgba(48,209,88,0.35);  color: var(--color-income);  background: rgba(48,209,88,0.06); }
.goal-action-btn.withdraw { border-color: rgba(255,159,10,0.35); color: var(--color-warning); background: rgba(255,159,10,0.06); }
.goal-action-btn.complete { border-color: rgba(48,209,88,0.35);  color: var(--color-income);  background: rgba(48,209,88,0.06); width: 100%; }
.goal-action-btn.add:hover:not(:disabled)      { background: rgba(48,209,88,0.12); }
.goal-action-btn.withdraw:hover:not(:disabled) { background: rgba(255,159,10,0.12); }
.goal-action-btn.complete:hover:not(:disabled) { background: rgba(48,209,88,0.12); }
.goal-action-btn:disabled { opacity: 0.4; cursor: default; }

/* Completed / Cancelled card details */
.goal-done-amount      { font-size: 0.75rem; font-weight: 600; color: var(--color-income); display: flex; align-items: center; }
.goal-cancelled-amount { font-size: 0.72rem; color: var(--color-text-secondary); display: flex; align-items: center; }
.goal-status-badge {
  flex-shrink: 0; font-size: 0.63rem; font-weight: 700;
  border-radius: 5px; padding: 2px 7px; white-space: nowrap;
}
.goal-status-badge.done      { background: rgba(48,209,88,0.12); color: var(--color-income); }
.goal-status-badge.cancelled { background: rgba(255,159,10,0.12); color: var(--color-warning); }

/* Section titles (completed / cancelled groups) */
.goals-section { margin-top: 28px; }
.goals-section-title {
  font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary);
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.goals-section-badge {
  font-size: 0.63rem; font-weight: 700; border-radius: 999px; padding: 1px 8px;
}
.goals-section-badge.done      { background: rgba(48,209,88,0.12); color: var(--color-income); }
.goals-section-badge.cancelled { background: rgba(255,159,10,0.12); color: var(--color-warning); }

/* Empty state */
.goals-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 24px 40px; text-align: center; gap: 10px;
}
.goals-empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-primary-light); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: 4px;
}
.goals-empty-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text-primary); }
.goals-empty-desc  { font-size: 0.82rem; color: var(--color-text-secondary); max-width: 260px; line-height: 1.5; margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════
   PROFILE TAB (prf-* prefix)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.prf { padding-bottom: 24px; }

.prf-hero {
  background: var(--gradient-primary);
  padding: 28px 16px 16px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.prf-hero-deco {
  position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.12); pointer-events: none;
}
.prf-hero-body {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; z-index: 1;
}
.prf-av-wrap { position: relative; }
.prf-av {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.85);
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.prf-av-icon { font-size: 2.6rem; color: #fff; line-height: 1; }
.prf-av-img { width: 100%; height: 100%; object-fit: cover; }
.prf-av-level {
  position: absolute; bottom: -3px; right: -3px;
  width: 22px; height: 22px; border-radius: 7px;
  background: rgba(255,255,255,0.95); color: var(--color-primary);
  font-size: 0.65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-primary);
}
.avatar-frame { position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; border-radius: 50%; pointer-events: none; }
.prf-name {
  font-size: 1.15rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.prf-rank {
  font-size: 0.72rem; font-weight: 600;
  background: rgba(255,255,255,0.2); color: #fff;
  padding: 2px 10px; border-radius: 999px;
}

/* XP bar */
.prf-xp {
  width: 100%; max-width: 280px; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
}
.prf-xp-track {
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
}
.prf-xp-fill {
  height: 100%; background: #fff; border-radius: 3px; transition: width 0.4s;
}
.prf-xp-lbl {
  font-size: 0.65rem; color: rgba(255,255,255,0.75);
  text-align: right;
}

/* ── Stats strip ──────────────────────────────────────────── */
.prf-stats {
  display: flex; align-items: stretch;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.prf-sc {
  flex: 1; text-align: center;
  padding: 10px 4px;
}
.prf-sdiv {
  width: 1px; background: var(--color-border);
  margin: 8px 0;
}
.prf-sv {
  font-size: 1rem; font-weight: 700; color: var(--color-text-primary);
  line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 3px;
}
.prf-sv-tok i { font-size: 0.75rem; color: var(--color-warning); }
.prf-sv-of { font-size: 0.72rem; font-weight: 500; color: var(--color-text-tertiary); }
.prf-sl {
  font-size: 0.60rem; color: var(--color-text-secondary);
  margin-top: 2px; white-space: nowrap;
}

/* ── Quick access ─────────────────────────────────────────── */
.prf-quick {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.prf-qbtn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 16px;
  background: none; border: none; border-bottom: 1px solid var(--color-border);
  cursor: pointer; text-align: left; transition: background 0.12s;
}
.prf-qbtn:last-child { border-bottom: none; }
.prf-qbtn:active { background: var(--color-primary-light); }
.prf-qbtn.locked { opacity: 0.7; }
.prf-qicon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.prf-qicon-budget  { background: var(--gradient-warning); color: #fff; }
.prf-qicon-analytics { background: var(--gradient-primary); color: #fff; }
.prf-qicon-settings { background: linear-gradient(135deg, #8e8e93, #636366); color: #fff; }
.prf-qtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prf-qname { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); line-height: 1.3; }
.prf-qdesc { font-size: 0.68rem; color: var(--color-text-secondary); }
.prf-qend { font-size: 0.78rem; color: var(--color-text-tertiary); flex-shrink: 0; }

/* ── Tab navigation ───────────────────────────────────────── */
.prf-nav {
  display: flex; background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 10;
}
.prf-nb {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border: none; background: none; cursor: pointer;
  color: var(--color-text-secondary); font-size: 0.60rem; font-weight: 500;
  border-bottom: 2.5px solid transparent; transition: all 0.15s;
  position: relative;
}
.prf-nb i { font-size: 1rem; }
.prf-nb.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.prf-nb-dot {
  position: absolute; top: 5px; right: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-expense);
  border: 1.5px solid var(--color-surface);
}
.prf-nb-dot-prem { background: var(--color-warning); }

/* ── Panes ────────────────────────────────────────────────── */
.prf-panes { padding: 0; }
.prf-pane { padding: 12px 16px 16px; animation: fadeIn 0.18s ease; }
.prf-pane-shop { padding-left: 0; padding-right: 0; }

.prf-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary);
}
.prf-section-meta { font-size: 0.72rem; font-weight: 500; color: var(--color-text-secondary); }

/* ── Rewarded ad card ─────────────────────────────────────── */
.prf-ad-card {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(10,212,120,0.08), rgba(10,132,255,0.08));
  border: 1px solid rgba(10,212,120,0.2); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 14px;
}
.prf-ad-icon { font-size: 1.6rem; color: var(--color-income); flex-shrink: 0; }
.prf-ad-body { flex: 1; min-width: 0; }
.prf-ad-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); }
.prf-ad-desc { font-size: 0.70rem; color: var(--color-text-secondary); margin-top: 1px; }
.prf-ad-btn {
  background: var(--gradient-primary); color: #fff; border: none;
  border-radius: 10px; padding: 7px 14px; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.prf-ad-btn:disabled { opacity: 0.55; cursor: default; }

/* ── Quest groups ─────────────────────────────────────────── */
.prf-quest-group { margin-bottom: 14px; }
.prf-quest-group-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--color-text-secondary);
  margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.prf-quest-list { display: flex; flex-direction: column; gap: 8px; }

/* Collapsible "Выполнено (N)" header for completed tutorial quests */
.prf-done-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px;
  cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary);
  transition: background 0.15s;
}
.prf-done-toggle:hover { background: var(--color-surface); }
.prf-done-toggle > i:first-child { color: #30D158; font-size: 1rem; }
.prf-done-chevron { margin-left: auto; font-size: 0.85rem; }

.prf-quest {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 11px 12px;
  box-shadow: var(--color-shadow);
}
.prf-quest.done { opacity: 0.62; }
.prf-quest-daily { border-left: 3px solid var(--color-primary); }
.prf-quest-ico {
  font-size: 1rem; color: var(--color-primary);
  width: 24px; text-align: center; flex-shrink: 0; padding-top: 1px;
}
.prf-quest.done .prf-quest-ico { color: var(--color-income); }
.prf-quest-daily .prf-quest-ico { color: var(--color-warning); }
.prf-quest-body { flex: 1; min-width: 0; }
.prf-quest-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); }
.prf-quest-desc { font-size: 0.70rem; color: var(--color-text-secondary); margin-top: 1px; }
.prf-quest-time { font-size: 0.65rem; color: var(--color-text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 3px; }
.prf-quest-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.prf-quest-pts {
  font-size: 0.72rem; font-weight: 700; color: var(--color-primary);
  background: var(--color-primary-light); padding: 2px 7px; border-radius: 999px;
}
.prf-quest-btn {
  background: var(--gradient-primary); color: #fff; border: none;
  border-radius: 8px; padding: 5px 12px; font-size: 0.72rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.prf-quest-btn-ad {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  display: flex; align-items: center; gap: 4px;
}
.prf-quest-done {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(48,209,88,0.1); color: var(--color-income);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}

/* ── Empty & all-done states ──────────────────────────────── */
.prf-empty-state {
  text-align: center; padding: 2.5rem 1rem;
  color: var(--color-text-tertiary);
}
.prf-empty-state i { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.prf-empty-state p { font-size: var(--font-size-sm); margin: 0; }

.prf-all-done {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(48,209,88,.08); color: var(--color-income);
  font-size: 0.82rem; font-weight: 600; margin-top: 8px;
}
.prf-all-done i { font-size: 1rem; }

/* ── Achievements ─────────────────────────────────────────── */
.prf-ach-grid { display: flex; flex-direction: column; gap: 8px; }
.prf-ach {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 12px 14px;
  box-shadow: var(--color-shadow);
}
.prf-ach:not(.unlocked) { opacity: 0.5; filter: grayscale(0.5); }
.prf-ach.unlocked { border-color: rgba(255,159,10,0.3); }
.prf-ach-ico {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--gradient-gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.1rem;
}
.prf-ach:not(.unlocked) .prf-ach-ico { background: var(--color-border); color: var(--color-text-tertiary); }
.prf-ach-body { flex: 1; min-width: 0; }
.prf-ach-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); }
.prf-ach-desc { font-size: 0.70rem; color: var(--color-text-secondary); margin-top: 1px; }
.prf-ach-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.prf-ach-rarity {
  font-size: 0.60rem; font-weight: 700;
  background: rgba(255,159,10,0.1); color: var(--color-warning);
  padding: 1px 6px; border-radius: 4px; text-transform: uppercase;
}
.prf-ach-reward { font-size: 0.65rem; color: var(--color-text-secondary); display: flex; align-items: center; gap: 2px; }
.prf-ach-status { font-size: 1.1rem; color: var(--color-income); flex-shrink: 0; }
.prf-ach:not(.unlocked) .prf-ach-status { color: var(--color-text-tertiary); }

/* ── Shop ─────────────────────────────────────────────────── */
.shop-bal-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--gradient-gold);
  margin-bottom: 0;
}
.shop-bal-left { display: flex; align-items: center; gap: 10px; }
.shop-bal-coin {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.shop-bal-num { font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; }
.shop-bal-sub { font-size: 0.68rem; color: rgba(255,255,255,0.8); margin-top: 1px; }
.shop-bal-earn { font-size: 0.68rem; color: rgba(255,255,255,0.75); text-align: right; max-width: 80px; }

/* Category filter */
.shop-cats {
  display: flex; gap: 6px; padding: 10px 16px;
  overflow-x: auto; scrollbar-width: none;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cat-btn {
  padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg); color: var(--color-text-secondary);
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; display: flex; align-items: center; gap: 5px;
  transition: all 0.15s;
}
.shop-cat-btn.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }

/* Items grid */
.shop-grid-new {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 12px 16px;
}
@media (min-width: 480px) { .shop-grid-new { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .shop-grid-new { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

.shop-card-new {
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden; position: relative;
  display: flex; flex-direction: column; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  box-shadow: var(--color-shadow);
}
.shop-card-new:active { transform: scale(0.97); }
.shop-card-new.owned { border-color: var(--color-primary-mid); }
.shop-card-new.applied { border-color: var(--color-income); }
.shop-card-nocoins { opacity: 0.82; }

/* Status badges */
.shop-card-badge-new {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: 0.60rem; font-weight: 700; border-radius: 5px;
  padding: 2px 6px; display: flex; align-items: center; gap: 2px;
}
.shop-card-badge-new.applied { background: rgba(48,209,88,0.85); color: #fff; }
.shop-card-badge-new.new-badge { background: rgba(255,159,10,0.9); color: #fff; }

/* Preview area */
.shop-card-preview-new {
  aspect-ratio: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-primary); font-size: 2rem; color: #fff;
  overflow: hidden;
}
.shop-card-preview-new.theme { background: linear-gradient(135deg, #1C1C22, #3A3A4A); }
.shop-card-preview-new img { width: 100%; height: 100%; object-fit: cover; }
/* Фолбэк для старого WebView (Chrome < 88) без поддержки aspect-ratio: иначе превью
   схлопывается в полоску. Современные браузеры используют aspect-ratio выше. */
@supports not (aspect-ratio: 1 / 1) {
  .shop-card-preview-new { height: 140px; }
}

/* Info area */
.shop-card-info-new { padding: 8px 10px 4px; flex: 1; }
.shop-card-name-new { font-size: 0.78rem; font-weight: 600; color: var(--color-text-primary); }
.shop-card-desc-new { font-size: 0.65rem; color: var(--color-text-secondary); margin-top: 2px; }

/* Footer */
.shop-card-foot {
  padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 5px; align-items: stretch;
}
.shop-price-tag {
  display: flex; align-items: center; gap: 3px;
  font-size: 0.85rem; font-weight: 700; color: var(--color-text-primary);
}
.shop-price-tag i { color: var(--color-warning); }
.shop-price-low { color: var(--color-expense); }
.shop-price-low i { color: var(--color-expense); }

.shop-btn-buy-new {
  background: var(--gradient-primary); color: #fff; border: none;
  border-radius: 8px; padding: 7px 8px; font-size: 0.72rem; font-weight: 600;
  cursor: pointer; width: 100%; text-align: center;
  transition: opacity 0.15s;
}
.shop-btn-buy-new:disabled { opacity: 0.55; cursor: default; background: var(--color-border); color: var(--color-expense); }
.shop-btn-applied-new {
  background: rgba(48,209,88,0.1); color: var(--color-income);
  border: 1.5px solid var(--color-income);
  border-radius: 8px; padding: 6px 8px; font-size: 0.72rem; font-weight: 600;
  width: 100%; text-align: center; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background 0.15s;
}
.shop-btn-applied-new:hover { background: rgba(48,209,88,0.18); }
.shop-btn-applied-new:active { transform: scale(0.98); }
.shop-btn-apply-new {
  background: var(--color-primary-light); color: var(--color-primary);
  border: 1.5px solid var(--color-primary-mid);
  border-radius: 8px; padding: 6px 8px; font-size: 0.72rem; font-weight: 600;
  cursor: pointer; width: 100%; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}

/* ── Theme segmented toggle (single shop card, switches light↔dark) ── */
.theme-toggle-seg {
  display: flex; width: 100%;
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  border-radius: 8px; padding: 3px; gap: 3px;
}
.theme-toggle-opt {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  border-radius: 6px; padding: 5px 4px;
  font-size: 0.95rem; color: var(--color-text-secondary);
  transition: background 0.15s, color 0.15s;
}
.theme-toggle-opt.active {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ── Premium card ─────────────────────────────────────────── */
.prf-prem-card {
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--color-shadow);
}
@media (min-width: 768px) {
  /* Desktop: don't let the card stretch across the whole wide pane (left-skewed look).
     Cap it and center it; lay the features out in two balanced columns. */
  .prf-prem-card { max-width: 560px; margin: 0 auto; }
  .prf-prem-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
}

/* Invite-friends banner on the dashboard (prominent entry point) */
.dash-invite-banner {
  display: flex; align-items: center; gap: 12px;
  /* Align with the dashboard cards (same 12px side inset, stretches via the
     flex column parent — no width:100% which caused the edge-to-edge overflow).
     Top margin balances the gap above (stats-row leaves only 4px) with the 16px below. */
  margin: 12px 12px 16px; padding: 12px 14px; border: none; text-align: left;
  border-radius: var(--radius-md); color: #fff;
  background: linear-gradient(135deg, #5856D6, #8E8CE8);
  box-shadow: 0 4px 14px rgba(88,86,214,0.30);
  transition: transform 0.15s, box-shadow 0.15s;
}
@media (min-width: 768px) {
  /* Desktop: app-main provides the side padding, so match the cards (no side margin) */
  .dash-invite-banner { margin: 0 0 20px; }
}
.dash-invite-banner:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(88,86,214,0.38); }
.dash-invite-ic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18); font-size: 1.2rem;
}
.dash-invite-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dash-invite-tx strong { font-size: 0.95rem; font-weight: 600; }
.dash-invite-tx small { font-size: 0.74rem; opacity: 0.92; }
.dash-invite-arrow { font-size: 1.05rem; opacity: 0.9; flex-shrink: 0; }

/* Invite-friends (referral) card */
.prf-invite-card {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 14px 16px;
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--color-shadow);
}
.prf-invite-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, #5856D6, #7B79E0);
}
.prf-invite-body { flex: 1; min-width: 0; }
.prf-invite-title { font-weight: 600; font-size: 0.95rem; color: var(--color-text-primary); }
.prf-invite-sub { font-size: 0.74rem; color: var(--color-text-secondary); line-height: 1.35; margin-top: 2px; }
.prf-invite-btn {
  flex-shrink: 0; border: none; border-radius: 10px;
  padding: 9px 14px; font-size: 0.82rem; font-weight: 600; color: #fff;
  background: #5856D6; white-space: nowrap; transition: opacity 0.15s, transform 0.15s;
}
.prf-invite-btn:hover { opacity: 0.92; transform: translateY(-1px); }
@media (max-width: 479px) {
  .prf-invite-card { flex-wrap: wrap; }
  .prf-invite-btn { width: 100%; margin-top: 4px; }
}
[data-bs-theme="dark"] .prf-invite-card { background: var(--color-surface); border-color: var(--color-border); }
@media (min-width: 768px) {
  /* Match the premium card width so both sit centered and aligned on desktop */
  .prf-invite-card { max-width: 560px; margin: 14px auto 0; }
}

/* Lifetime premium badge (shown instead of a renew button) */
.prf-prem-lifetime-badge {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: 12px;
  font-size: 0.9rem; font-weight: 600; color: #30D158;
  background: rgba(48,209,88,0.12); border: 1px solid rgba(48,209,88,0.25);
}
.prf-prem-lifetime-badge i { font-size: 1.05rem; }
.prf-prem-card.active { border-color: rgba(88,86,214,0.35); }

.prf-prem-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.prf-prem-card.active .prf-prem-head {
  background: var(--gradient-primary);
}
.prf-prem-gem {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--color-warning); flex-shrink: 0;
}
.prf-prem-card.active .prf-prem-gem { color: #fff; }
.prf-prem-title {
  font-size: 1rem; font-weight: 700; color: var(--color-text-primary);
}
.prf-prem-card.active .prf-prem-title { color: #fff; }
.prf-prem-trial-tag {
  font-size: 0.65rem; font-weight: 700;
  background: rgba(255,255,255,0.25); color: #fff;
  border-radius: 999px; padding: 2px 8px; margin-top: 3px; display: inline-block;
}

.prf-prem-status {
  padding: 12px 18px;
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
}
.prf-prem-urgent {
  display: flex; align-items: center; gap: 7px;
  background: rgba(220,53,69,0.1); border: 1px solid rgba(220,53,69,0.3);
  border-radius: 8px; padding: 8px 12px;
  color: #dc3545; font-size: 0.80rem; font-weight: 600;
  margin-bottom: 8px;
}
.prf-prem-info-row {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--font-size-sm); color: var(--color-text-primary);
}

.prf-prem-features {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--color-border);
}
.prf-prem-feat {
  display: flex; align-items: flex-start; gap: 10px;
}
.prf-prem-feat > i { font-size: 1rem; color: var(--color-primary); margin-top: 2px; flex-shrink: 0; }
.prf-prem-feat div { display: flex; flex-direction: column; gap: 1px; }
.prf-prem-feat strong { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); }
.prf-prem-feat small { font-size: 0.68rem; color: var(--color-text-secondary); }

.prf-prem-cta { padding: 16px 18px; }
.prf-prem-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
  justify-content: center; margin-bottom: 12px;
}
.prf-prem-price-num { font-size: 1.5rem; font-weight: 800; color: var(--color-text-primary); }
.prf-prem-price-per { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.prf-prem-price-rub { width: 100%; text-align: center; font-size: 0.72rem; color: var(--color-text-secondary); }
.prf-prem-buy-btn {
  width: 100%; background: var(--gradient-gold); color: #fff; border: none;
  border-radius: 14px; padding: 13px 20px; font-size: var(--font-size-sm); font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 4px 16px rgba(245,166,35,0.3); transition: opacity 0.15s, transform 0.15s;
}
.prf-prem-buy-btn:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); }
.prf-prem-buy-btn:disabled { opacity: 0.55; cursor: default; }
.prf-prem-trial-btn {
  width: 100%; background: transparent; border: 1.5px solid var(--color-primary);
  color: var(--color-primary); border-radius: 10px;
  padding: 10px 16px; font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px;
}
.prf-prem-trial-btn:disabled { opacity: 0.55; cursor: default; }
.prf-prem-disclaimer { font-size: 0.68rem; color: var(--color-text-secondary); text-align: center; margin: 8px 0 0; }
.prf-prem-renew { padding: 14px 18px; text-align: center; }
.prf-prem-renew-btn {
  background: transparent; border: 1.5px solid var(--color-primary);
  color: var(--color-primary); border-radius: 10px;
  padding: 8px 20px; font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.prf-prem-renew-btn:hover { background: var(--color-primary); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   PROFILE → PREMIUM (redesigned, .pp-*)
   ═══════════════════════════════════════════════════════════ */
.pp-wrap { display: flex; flex-direction: column; gap: 14px; }
.pp-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 22px; overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,0.07);
}

/* Hero */
.pp-hero {
  position: relative; overflow: hidden;
  padding: 26px 20px 22px; text-align: center; color: #fff;
  background: linear-gradient(140deg, #4A48C8 0%, #5856D6 48%, #8E8CE8 100%);
}
.pp-hero-glow {
  position: absolute; top: -60px; right: -40px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.30) 0%, transparent 70%);
  pointer-events: none;
}
.pp-hero-gem {
  position: relative; width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  color: #fff; background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.30);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.pp-hero-title { position: relative; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.3px; }
.pp-hero-sub { position: relative; margin-top: 5px; font-size: 0.84rem; color: rgba(255,255,255,0.85); line-height: 1.4; }

/* Perks */
.pp-perks { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pp-perk {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 14px; background: var(--color-bg);
}
.pp-perk-ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  color: #fff; background: linear-gradient(135deg, #5856D6, #8E8CE8);
}
.pp-perk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-perk-tx strong { font-size: 0.9rem; font-weight: 600; color: var(--color-text-primary); }
.pp-perk-tx small { font-size: 0.72rem; color: var(--color-text-secondary); margin-top: 1px; }
.pp-perk-on { color: #30D158; font-size: 1.15rem; flex-shrink: 0; }

/* Footer */
.pp-foot { padding: 4px 16px 18px; }
.pp-price { text-align: center; margin-bottom: 12px; }
.pp-price-num { display: block; font-size: 1.6rem; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.5px; }
.pp-price-tag { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--color-text-secondary); }
.pp-buy {
  width: 100%; border: none; border-radius: 14px; padding: 14px 20px;
  font-size: 0.95rem; font-weight: 700; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, #5856D6, #7B79E0);
  box-shadow: 0 6px 18px rgba(88,86,214,0.35); transition: opacity 0.15s, transform 0.15s;
}
.pp-buy:hover:not(:disabled) { opacity: 0.93; transform: translateY(-1px); }
.pp-buy:disabled { opacity: 0.6; cursor: default; }
.pp-trial {
  width: 100%; margin-top: 9px; border: 1.5px solid var(--color-border); background: var(--color-surface);
  border-radius: 12px; padding: 11px 16px; font-size: 0.85rem; font-weight: 600;
  color: var(--color-text-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: border-color 0.15s;
}
.pp-trial:hover:not(:disabled) { border-color: var(--color-primary); }
.pp-trial:disabled { opacity: 0.6; cursor: default; }
.pp-note { text-align: center; font-size: 0.7rem; color: var(--color-text-tertiary); margin: 10px 0 0; }
.pp-owned {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px; border-radius: 14px; font-size: 0.92rem; font-weight: 700;
  color: #30D158; background: rgba(48,209,88,0.12); border: 1px solid rgba(48,209,88,0.25);
}
.pp-owned i { font-size: 1.1rem; }

/* Invite friends card */
.pp-invite {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 16px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #30D158, #28B14C);
  box-shadow: 0 6px 18px rgba(48,209,88,0.28); transition: transform 0.15s, box-shadow 0.15s;
}
.pp-invite:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(48,209,88,0.36); }
.pp-invite-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: rgba(255,255,255,0.20);
}
.pp-invite-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-invite-tx strong { font-size: 0.95rem; font-weight: 700; }
.pp-invite-tx small { font-size: 0.74rem; opacity: 0.92; margin-top: 1px; }
.pp-invite-arr { font-size: 1.05rem; opacity: 0.9; flex-shrink: 0; }

@media (min-width: 768px) {
  /* Full width like the other profile tabs; perks in two columns to fill the card */
  .pp-perks { display: grid; grid-template-columns: 1fr 1fr; }
}
[data-bs-theme="dark"] .pp-card { background: var(--color-surface); border-color: var(--color-border); }
[data-bs-theme="dark"] .pp-perk { background: var(--color-bg); }

/* ── PROFILE: Desktop — full-width page layout ────────────── */
@media (min-width: 768px) {
  /* Single column, full-bleed — fill app-main edge-to-edge */
  .prf {
    display: block; padding-bottom: 0;
    margin: -1.5rem -1.75rem -1.75rem; /* counteract app-main padding */
  }

  /* ── Hero: horizontal banner ── */
  .prf-hero {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 22px 28px 18px;
    border-radius: 0;
    margin-bottom: 0;
  }
  .prf-hero-body {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    flex: 1;
    text-align: left;
  }
  .prf-av     { width: 80px; height: 80px; flex-shrink: 0; }
  .prf-name   { font-size: 1.3rem; }
  .prf-rank   { font-size: 0.75rem; }
  /* XP bar stretches to fill remaining space */
  .prf-xp {
    flex: 1; max-width: 320px;
    align-self: center;
  }
  .prf-xp-track { height: 7px; }
  .prf-xp-lbl   { font-size: 0.72rem; margin-top: 4px; opacity: 0.85; color: rgba(255,255,255,0.9); }

  /* ── Stats strip: evenly spaced, no extra padding ── */
  .prf-stats {
    border-radius: 0;
    border-bottom: 2px solid var(--color-bg);
  }
  .prf-sc { padding: 14px 8px; }
  .prf-sv { font-size: 1.1rem; }

  /* ── Quick access: side-by-side row ── */
  .prf-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 0;
    border-top: none;
    border-bottom: 2px solid var(--color-bg);
  }
  .prf-qbtn {
    border-bottom: none;
    border-right: 1px solid var(--color-border);
    padding: 14px 20px;
  }
  .prf-qbtn:last-child { border-right: none; }
  .prf-qbtn:hover { background: var(--color-primary-light); }

  /* ── Nav tabs: sticky, horizontal, larger text ── */
  .prf-nav {
    position: sticky; top: 0; z-index: 10;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .prf-nb {
    flex-direction: row;
    justify-content: center;
    gap: 7px;
    padding: 12px 16px;
    font-size: 0.82rem;
    border-bottom-width: 3px;
  }
  .prf-nb i { font-size: 0.95rem; }

  /* ── Panes: full width white area ── */
  .prf-panes {
    background: var(--color-surface);
    min-height: 300px;
  }
  .prf-pane { padding: 20px 24px 24px; }
  .prf-pane-shop { padding: 0; }

  /* ── Achievements: 2-col grid ── */
  .prf-ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ── Shared: urgent renew animation ──────────────────────── */
.btn-renew-urgent { border-color: #dc3545 !important; color: #dc3545 !important; animation: pulse-urgent 1.4s ease-in-out infinite; }
.btn-renew-urgent:hover { background: #dc3545 !important; color: #fff !important; }
@keyframes pulse-urgent { 0%, 100% { box-shadow: 0  0 0 0 rgba(220,53,69,0.35); } 50% { box-shadow: 0 0 0 6px rgba(220,53,69,0); } }

/* ── Smart Assistant card (used in dashboard) ─────────────── */
.assistant-card {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 12px 16px; padding: 13px 13px 13px 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  position: relative; overflow: hidden;
}
.assistant-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 4px 0 0 4px;
}
.assistant-card.greeting::before, .assistant-card.insight::before { background: var(--color-primary); }
.assistant-card.positive::before  { background: var(--color-income); }
.assistant-card.warning::before   { background: #f59e0b; }
.assistant-card.alert::before     { background: var(--color-expense); }
.assistant-card.weekend::before   { background: #8b5cf6; }
@keyframes assistant-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.assistant-fade-enter-active { animation: assistant-in .3s cubic-bezier(.22,1,.36,1); }
.assistant-fade-leave-active { transition: opacity .18s; }
.assistant-fade-leave-to     { opacity: 0; }
.assistant-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; margin-left: 13px;
  background: var(--color-bg);
}
.assistant-card.positive  .assistant-icon { color: var(--color-income);   background: rgba(48,209,88,.1); }
.assistant-card.alert     .assistant-icon { color: var(--color-expense);  background: rgba(255,69,58,.1); }
.assistant-card.warning   .assistant-icon { color: #f59e0b;               background: rgba(245,158,11,.1); }
.assistant-card.insight   .assistant-icon { color: var(--color-primary);  background: var(--color-primary-light); }
.assistant-card.weekend   .assistant-icon { color: #8b5cf6;               background: rgba(139,92,246,.1); }
.assistant-card.greeting  .assistant-icon { color: var(--color-primary);  background: var(--color-primary-light); }
.assistant-body { flex: 1; min-width: 0; padding-right: 4px; }
.assistant-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: .03em;
  margin-bottom: 3px; color: var(--color-text-secondary); text-transform: uppercase;
}
.assistant-text { font-size: 0.875rem; line-height: 1.5; color: var(--color-text-primary); margin: 0; }
.assistant-action-btn {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 8px; padding: 5px 12px; border-radius: 20px; border: none;
  background: var(--color-primary-light); color: var(--color-primary);
  font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
.assistant-action-btn:active { background: var(--color-primary); color: #fff; }
.assistant-dismiss {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: transparent; color: var(--color-text-secondary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; margin: 0 6px 0 0; opacity: .5; align-self: flex-start; padding-top: 1px;
}
.assistant-dismiss:active { opacity: 1; }
@media (min-width: 768px) { .assistant-card { margin: 0 0 20px; } }

/* Premium-activated / trial modal (built by gamification.js createModal) */
.premium-icon {
  width: 64px; height: 64px; margin: 4px auto 14px;
  border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; color: #fff;
  background: linear-gradient(135deg, #5856D6, #8E8CE8);
  box-shadow: 0 6px 18px rgba(88,86,214,0.35);
}
.premium-modal-title {
  font-size: 1.25rem; font-weight: 800; line-height: 1.25;
  color: var(--color-text-primary); margin: 0 0 6px; text-align: center;
}
.premium-modal-sub {
  font-size: 0.9rem; color: var(--color-text-secondary);
  margin: 0 0 16px; text-align: center; line-height: 1.4;
}
.premium-features-list { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.premium-feature {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--color-primary-light);
  font-size: 0.9rem; font-weight: 500; color: var(--color-text-primary);
}
.premium-feature i { font-size: 1.05rem; color: var(--color-primary); flex-shrink: 0; }
[data-bs-theme="dark"] .premium-feature { background: rgba(88,86,214,0.15); }

/* Confetti (created by gamification.js createConfetti) — had NO styles, so the 50
   generated divs piled up as static colored squares and broke the modal layout. */
.confetti {
  position: fixed; top: -20px; z-index: 2100;
  border-radius: 2px; pointer-events: none;
  opacity: 0.9; will-change: transform;
  animation: confettiFall 3s linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(102vh) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* Achievement-unlocked modal (gamification.js showAchievementUnlocked) */
.ach-modal { text-align: center; }
.ach-modal-icon {
  width: 76px; height: 76px; margin: 6px auto 12px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem; color: #fff;
  background: linear-gradient(135deg, #CD7F32, #E0A060); /* bronze default */
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.ach-modal-icon.silver   { background: linear-gradient(135deg, #9AA3AD, #C4CCD4); box-shadow: 0 10px 26px rgba(154,163,173,0.35); }
.ach-modal-icon.gold     { background: linear-gradient(135deg, #F5A623, #FFD66B); box-shadow: 0 10px 26px rgba(245,166,35,0.35); }
.ach-modal-icon.platinum { background: linear-gradient(135deg, #5856D6, #8E8CE8); box-shadow: 0 10px 26px rgba(88,86,214,0.35); }
.ach-modal-badge {
  display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase; padding: 3px 12px; border-radius: 999px; margin-bottom: 12px;
  color: #fff; background: #CD7F32;
}
.ach-modal-badge.silver   { background: #9AA3AD; }
.ach-modal-badge.gold     { background: #F5A623; }
.ach-modal-badge.platinum { background: #5856D6; }
.ach-modal-title { font-size: 0.84rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin: 0 0 4px; }
.ach-modal-name { font-size: 1.3rem; font-weight: 800; color: var(--color-text-primary); margin: 0 0 6px; letter-spacing: -0.3px; }
.ach-modal-desc { font-size: 0.88rem; color: var(--color-text-secondary); line-height: 1.45; margin: 0 0 16px; }
.ach-modal-reward {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px; font-size: 0.95rem; font-weight: 700;
  color: #B8860B; background: rgba(245,166,35,0.14); border: 1px solid rgba(245,166,35,0.3);
}
.ach-modal-reward i { font-size: 1.05rem; color: #F5A623; }
.ach-modal-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ach-modal-foot .submit-btn {
  width: 100%; white-space: nowrap; text-align: center;
  padding-left: 8px; padding-right: 8px; /* keep icon+label centered on narrow cells */
}

/* Level-up modal footer — two equal buttons side by side (Поделиться | Отлично!) */
.lvl-foot-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lvl-foot-2col .submit-btn {
  width: 100%; white-space: nowrap; text-align: center;
  padding-left: 8px; padding-right: 8px;
}

/* ── Level-up modal (used by gamification.js) ─────────────── */
.compact-footer, .levelup-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
}
.levelup-header { padding: 8px 0 16px; }
.levelup-icon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff;
  box-shadow: 0 4px 20px rgba(249,115,22,.35);
}
.levelup-title { font-size: 1.3rem; font-weight: 800; color: var(--color-text-primary); margin: 0 0 6px; }
.levelup-subtitle { font-size: 0.95rem; color: var(--color-text-secondary); margin: 0; line-height: 1.4; }
.levelup-subtitle strong { color: var(--color-primary); }
.level-benefits { text-align: left; margin-top: 16px; }
.benefits-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin: 0 0 10px; }
.benefits-list { display: flex; flex-direction: column; gap: 8px; }
.benefit-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--color-bg); font-size: 0.875rem; color: var(--color-text-primary);
}
.benefit-item i { font-size: 1rem; color: var(--color-primary); flex-shrink: 0; width: 20px; text-align: center; }

/* ── Paywall modal buttons (used in app.js) ───────────────── */
.btn-premium-trial { width: 100%; background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); border-radius: 10px; padding: 10px 16px; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
.btn-premium-trial:hover:not(:disabled) { background: var(--color-primary-light, rgba(0,119,255,0.08)); }
.btn-premium-trial:disabled { opacity: 0.55; cursor: default; }
.paywall-btn-trial { width: 100%; background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); border-radius: 12px; padding: 11px 16px; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.paywall-btn-trial:hover:not(:disabled) { background: var(--color-primary-light, rgba(0,119,255,0.08)); }
.paywall-btn-trial:disabled { opacity: 0.55; cursor: default; }

/* ═══════════════════════════════════════════════════════════
   ANALYTICS TAB
   ═══════════════════════════════════════════════════════════ */

.analytics-tab { background: var(--color-bg); min-height: 100%; }
.analytics-period-bar {
  background: var(--color-surface); padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.period-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; /* smooth momentum scroll */
  scroll-padding: 0 8px;
}
.period-tabs::-webkit-scrollbar { display: none; }
.period-tab {
  padding: 6px 14px; border-radius: 999px; border: none;
  background: transparent; font-size: 0.80rem; font-weight: 500;
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; transition: all 0.15s;
  /* CRITICAL: keep full width so the row overflows and SCROLLS instead of the flex
     algorithm squishing the tabs (which hid "Все время"/"Свой" with no way to reach them). */
  flex-shrink: 0;
}
.period-tab.active { background: var(--color-primary); color: #fff; }
.custom-period-row {
  display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: var(--font-size-sm);
}
.custom-period-row .compact-input { padding: 6px 10px; font-size: 0.78rem; }

.analytics-loading { display: flex; justify-content: center; padding: 3rem 0; }

.analytics-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
.summary-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--color-shadow); }
.summary-card.balance { grid-column: span 2; }
.summary-label { font-size: 0.70rem; color: var(--color-text-secondary); margin-bottom: 4px; font-weight: 500; }
.summary-value { font-size: 1.2rem; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.summary-card.income .summary-value { color: var(--color-income); }
.summary-card.expense .summary-value { color: var(--color-expense); }
.summary-card.positive .summary-value { color: var(--color-income); }
.summary-card.negative .summary-value { color: var(--color-expense); }

.view-toggle-bar { padding: 0 16px 12px; }
.view-toggle { display: inline-flex; background: var(--color-bg); border-radius: 12px; padding: 3px; border: 1px solid var(--color-border); }
.toggle-btn {
  padding: 6px 16px; border: none; background: transparent;
  border-radius: 9px; font-size: 0.80rem; font-weight: 500;
  color: var(--color-text-secondary); cursor: pointer;
  display: flex; align-items: center; gap: 5px; transition: all 0.15s;
}
.toggle-btn.active {
  background: var(--color-surface); color: var(--color-primary);
  box-shadow: var(--color-shadow); font-weight: 600;
}

.analytics-charts { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.chart-type-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.chart-tab {
  padding: 5px 14px; border-radius: 999px;
  border: 1.5px solid var(--color-border); background: transparent;
  font-size: 0.78rem; font-weight: 500; color: var(--color-text-secondary); cursor: pointer;
}
.chart-tab.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.chart-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--color-shadow); }
.chart-canvas-box { position: relative; height: 240px; }
.chart-canvas-box > canvas { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.chart-canvas-box > .analytics-empty-chart { height: 100%; }
.analytics-empty-chart {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 16px; gap: 8px; text-align: center;
  color: var(--color-text-secondary);
}
.analytics-empty-chart i   { font-size: 2.2rem; opacity: .4; }
.analytics-empty-chart p   { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--color-text-primary); }
.analytics-empty-chart span { font-size: 0.8rem; }
.chart-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chart-card-header h3 { font-size: var(--font-size-sm); font-weight: 600; margin: 0; }
.chart-type-mini-tabs { display: flex; gap: 4px; }
.chart-type-mini-tabs button { padding: 4px 10px; border-radius: 999px; border: none; background: var(--color-bg); font-size: 0.70rem; color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s; }
.chart-type-mini-tabs button.active { background: var(--color-primary); color: #fff; }

.donut-with-legend { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.donut-container { flex-shrink: 0; width: 140px; }
.category-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; min-width: 0; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-name { flex: 1; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-pct { color: var(--color-text-secondary); flex-shrink: 0; }
.legend-amount { font-weight: 600; color: var(--color-text-primary); flex-shrink: 0; white-space: nowrap; }

.analytics-table-wrap { padding: 0 16px 16px; }
.table-filter-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.table-filter-tabs button {
  padding: 5px 14px; border-radius: 999px;
  border: 1.5px solid var(--color-border); background: transparent;
  font-size: 0.78rem; cursor: pointer; color: var(--color-text-secondary); font-weight: 500; transition: all 0.15s;
}
.table-filter-tabs button.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.analytics-table-container { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--color-shadow); }
.analytics-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.analytics-table th { padding: 10px 14px; background: var(--color-bg); font-size: 0.68rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; text-align: left; }
.analytics-table td { padding: 10px 14px; border-top: 1px solid var(--color-border); vertical-align: middle; color: var(--color-text-primary); }
.table-color-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.table-type-badge { font-size: 0.60rem; padding: 1px 5px; border-radius: 4px; margin-left: 4px; font-weight: 700; }
.table-type-badge.income { background: rgba(48,209,88,0.12); color: var(--color-income); }
.table-type-badge.expense { background: rgba(255,69,58,0.1); color: var(--color-expense); }
.table-progress-bar { height: 4px; background: var(--color-bg); border-radius: 2px; overflow: hidden; min-width: 40px; }
.table-progress-bar div { height: 100%; border-radius: 2px; transition: width 0.3s; }
.text-income { color: var(--color-income) !important; }
.text-expense { color: var(--color-expense) !important; }
.text-end { text-align: right; }
.table-total-row td { font-weight: 700; border-top: 2px solid var(--color-border-strong); background: var(--color-bg); padding: 12px 14px; }

@media (min-width: 768px) {
  .analytics-summary { grid-template-columns: repeat(3, 1fr); padding-left: 0; padding-right: 0; }
  .analytics-summary .summary-card.balance { grid-column: auto; }
  .analytics-charts   { padding-left: 0; padding-right: 0; }
  .view-toggle-bar    { padding-left: 0; padding-right: 0; }
  .analytics-table-wrap { padding-left: 0; padding-right: 0; }
}

/* ═══════════════════════════════════════════════════════════
   MODALS — Bottom sheet on mobile, centered on desktop
   ═══════════════════════════════════════════════════════════ */

/* Override Bootstrap's .modal-backdrop.show { opacity: 0.5 } which makes
   the entire element (incl. content) semi-transparent. We use rgba background
   for the dimming effect instead of opacity on the wrapper. */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 1050; padding: 0; animation: fadeIn 0.2s ease;
  opacity: 1 !important;
  /* backdrop-filter removed: compensated with slightly darker overlay */
}

/* ── Lock background scroll while ANY modal is open ──────────────────────────
   The scroll container is .app-main (overflow-y:auto), not body — so locking body
   alone wasn't enough, and the previously-added .modal-open class had no rule at all.
   Every modal (Vue v-if modals AND the DOM-injected achievement/level-up/share modals)
   renders a .modal-backdrop; the confirm dialog uses .app-confirm-backdrop. :has()
   matches while that element is in the DOM and STOPS matching the instant it's removed
   (v-if off / .remove()), so scroll is restored automatically on close — for stacked
   modals too (it stays locked until the last backdrop is gone). */
body:has(.modal-backdrop) .app-main,
body:has(.app-confirm-backdrop) .app-main {
  overflow: hidden !important;
}
body:has(.modal-backdrop),
body:has(.app-confirm-backdrop) {
  overflow: hidden;
}
/* Belt-and-suspenders for the DOM-injected modals, which already toggle body.modal-open. */
body.modal-open .app-main { overflow: hidden !important; }
body.modal-open { overflow: hidden; }
/* Secondary modals that can open ON TOP of another modal (add-category launched from
   the transaction modal; paywall triggered anywhere). Higher z-index so they stack
   above the base modal regardless of DOM order. */
.modal-backdrop-elevated { z-index: 1060 !important; }
.paywall-backdrop { z-index: 1070 !important; }
.modal-container, .compact-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%; max-width: 100%;
  max-height: 94vh; max-height: 94dvh; overflow-y: auto;
  /* flex-колонка: тело (.modal-body) скроллится само, а шапка/кнопки фиксированы.
     Так у модалок с телом не появляется «фантомный» скроллбар всего контейнера
     из-за пары пикселей переполнения (sticky-шапка + border + отступы). */
  display: flex; flex-direction: column;
  animation: slideUpModal 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 481px) {
  .modal-backdrop { align-items: center; padding: 16px; }
  .modal-container, .compact-modal { border-radius: var(--radius-xl); max-width: 480px; max-height: 90vh; max-height: 90dvh; }
}

/* Ручка-«полоска» убрана: она намекала на свайп-закрытие, которого нет, — ложная
   аффорданс. Закрытие — крестиком или тапом по фону. (Если позже добавим реальный
   swipe-to-dismiss, вернуть индикатор.) */

.modal-header, .compact-header {
  padding: 16px 16px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; background: var(--color-surface); z-index: 2;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0; /* шапка не сжимается — скроллится только тело */
}
.modal-title {
  font-size: 1.05rem; font-weight: 700; color: var(--color-text-primary);
  margin: 0; display: flex; align-items: center; gap: 6px;
}
.modal-close, .compact-close {
  background: var(--color-bg); border: none; width: 30px; height: 30px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary); cursor: pointer; flex-shrink: 0;
  transition: background 0.15s; font-size: 0.9rem;
}
.modal-close:hover, .compact-close:hover { background: var(--color-primary-light); color: var(--color-primary); }
.modal-body, .compact-body { padding: 12px 16px 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.compact-form { display: flex; flex-direction: column; gap: 14px; }

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */

.form-section { display: flex; flex-direction: column; gap: 6px; }
.section-label { font-size: 0.72rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; }
.compact-input, .amount-field, .compact-textarea {
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 11px 14px;
  font-size: var(--font-size-base); color: var(--color-text-primary); width: 100%;
  transition: border-color 0.15s, background 0.15s; font-family: inherit;
}
.compact-input:focus, .amount-field:focus, .compact-textarea:focus {
  outline: none; border-color: var(--color-primary); background: var(--color-surface);
}
.compact-textarea { resize: none; min-height: 64px; max-height: 140px; overflow-y: auto; }

.amount-input-compact {
  position: relative; display: flex; align-items: center;
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); transition: border-color 0.15s;
}
.amount-input-compact:focus-within { border-color: var(--color-primary); background: var(--color-surface); }
.amount-input-compact .amount-field { background: transparent !important; border: none !important; flex: 1; }
.amount-input-compact .currency-symbol { padding: 0 14px 0 4px; font-weight: 600; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.goal-edit-hint { margin-top: 5px; font-size: 0.72rem; color: var(--color-text-tertiary); }

/* Add-transaction: breathing room below the header divider so the amount field isn't cramped */
.qa-form { margin-top: 10px; }

/* Auto-fill note + clear, shown under the amount field */
.qa-prefill-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px;
}
.qa-prefill-note {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--color-primary); font-weight: 500; min-width: 0;
}
.qa-prefill-note i { flex-shrink: 0; }
.qa-clear-btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: var(--color-bg); border: 1px solid var(--color-border);
  color: var(--color-text-secondary); border-radius: 999px;
  padding: 4px 11px; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.qa-clear-btn:hover { background: var(--color-bg); color: var(--color-expense); border-color: var(--color-expense); }
.qa-clear-btn:active { transform: scale(0.97); }

/* Settings toggle row + switch */
.settings-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 14px 14px; cursor: pointer;
}
.settings-toggle-tx { min-width: 0; }
.settings-toggle-name { font-size: 0.9rem; font-weight: 600; color: var(--color-text-primary); }
.settings-toggle-desc { font-size: 0.74rem; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.35; }
.settings-switch {
  flex-shrink: 0; width: 46px; height: 28px; border-radius: 999px;
  background: var(--color-border); position: relative; transition: background 0.2s;
}
.settings-switch.on { background: var(--color-primary); }
.settings-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s;
}
.settings-switch.on .settings-switch-knob { transform: translateX(18px); }
.goal-edit-warn {
  display: flex; align-items: flex-start; gap: 5px;
  color: var(--color-warning); font-weight: 500; line-height: 1.35;
}
.goal-edit-warn i { margin-top: 1px; flex-shrink: 0; }
.amount-input-compact.large .amount-field { font-size: 1.5rem; font-weight: 700; padding: 14px; }
.amount-input-compact.large .currency-symbol { font-size: 1.2rem; }

.amount-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.amount-column { display: flex; flex-direction: column; gap: 6px; }
.balance-info { font-size: 0.72rem; color: var(--color-text-secondary); margin-top: 3px; }

/* Buttons */
.submit-btn {
  border: none; border-radius: var(--radius-sm);
  padding: 12px 20px; font-size: var(--font-size-base); font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.submit-btn.primary { background: var(--color-primary); color: #fff; }
.submit-btn.primary:hover:not(:disabled) { background: #4644BD; }
.submit-btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.submit-btn.secondary { background: var(--color-bg); color: var(--color-text-secondary); border: 1.5px solid var(--color-border); }
.submit-btn.secondary:hover { background: var(--color-border); }
.submit-btn.outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text-primary); }
.submit-btn.warning { background: var(--color-warning); color: #fff; }
.submit-btn.full-width { width: 100%; }
.submit-btn.small { padding: 7px 14px; font-size: 0.80rem; }
.action-buttons { display: flex; gap: 8px; }
.action-buttons .submit-btn { flex: 1; }

/* Category pills */
.category-scroll { overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 4px; }
.category-scroll::-webkit-scrollbar { display: none; }
.category-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.category-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  border-radius: 999px; padding: 6px 12px;
  font-size: 0.78rem; font-weight: 500; color: var(--color-text-primary);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.category-pill:hover { border-color: var(--color-primary); }
.category-pill.active { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
/* "+ Добавить" pill — dashed accent so it reads as an action, not a category */
.category-pill-add {
  border-style: dashed; border-color: var(--color-primary);
  color: var(--color-primary); font-weight: 600;
}
.category-pill-add:hover { background: var(--color-primary-light); }
.category-pill-add i { font-size: 0.85rem; }
.category-pill.predicted { border-color: var(--color-warning); background: rgba(255,159,10,0.08); }
.category-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Color picker */
.color-scroll { overflow-x: auto; scrollbar-width: none; }
.color-scroll::-webkit-scrollbar { display: none; }
/* Horizontal padding so the first/last swatch isn't clipped by the scroll edge when it
   scales up / gets its selected border (was padding: 4px 0 → left edge got cut off). */
.color-options-row { display: flex; gap: 8px; padding: 6px 8px; }
.color-option-compact {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0;
  transition: transform 0.15s; border: 2.5px solid transparent;
}
.color-option-compact:hover { transform: scale(1.1); }
.color-option-compact.selected { border-color: var(--color-text-primary); transform: scale(1.12); }

/* Category type selector */
.enhanced-category-type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.type-option-card {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border-radius: var(--radius-sm); background: var(--color-bg); border: 1.5px solid var(--color-border);
  cursor: pointer; transition: all 0.15s;
}
.type-option-card.selected.income { border-color: var(--color-income); background: rgba(48,209,88,0.07); }
.type-option-card.selected.expense { border-color: var(--color-expense); background: rgba(255,69,58,0.07); }
.type-icon { font-size: 1.4rem; }
.type-option-card.income .type-icon { color: var(--color-income); }
.type-option-card.expense .type-icon { color: var(--color-expense); }
.type-content { flex: 1; min-width: 0; }
.type-title { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.type-description { font-size: 0.70rem; color: var(--color-text-secondary); }
.type-check { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-primary); }

/* Goal info card */
.goal-info-card { display: flex; align-items: center; gap: 10px; background: var(--color-bg); border-radius: var(--radius-sm); padding: 10px; }
.goal-color { width: 8px; height: 36px; border-radius: 4px; flex-shrink: 0; }
.goal-details { flex: 1; min-width: 0; }
.goal-details strong { display: block; font-size: var(--font-size-sm); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-progress-text { font-size: 0.72rem; color: var(--color-text-secondary); }

/* ═══════════════════════════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════════════════════════ */

/* ── Notification toast container — fixed to viewport bottom ── */
.notification-container {
  position: fixed;
  /* mobile: TOP, just under the sticky header — keeps toasts clear of the FAB and the
     bottom nav entirely (they used to overlap the income/expense FAB at the bottom). */
  top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 8px);
  left: 50%; transform: translateX(-50%);
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  width: calc(100vw - 32px); max-width: 420px;
  pointer-events: none; /* container itself is not clickable */
}
@media (min-width: 768px) {
  .notification-container {
    /* desktop: bottom-right, no header/nav in the way */
    top: auto; bottom: 24px; left: auto; right: 24px; transform: none;
    width: auto; max-width: 380px;
    flex-direction: column-reverse;
  }
}

.notification-toast {
  background: var(--color-surface); border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08);
  padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
  width: 100%; position: relative; overflow: hidden;
  border: 1px solid var(--color-border);
  pointer-events: all; /* toasts themselves are clickable */
  /* mobile: toasts are at the TOP, so they slide DOWN into view from above */
  opacity: 0; transform: translateY(-16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}
.notification-toast.show {
  opacity: 1; transform: translateY(0);
}
.notification-toast.hiding {
  opacity: 0; transform: translateY(-12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
@media (min-width: 768px) {
  /* desktop: toasts are bottom-right, so they slide UP from below */
  .notification-toast { transform: translateY(16px); }
  .notification-toast.hiding { transform: translateY(8px); }
}

/* Close (×) button — top-right corner. The whole toast is clickable to dismiss; this
   is the explicit affordance. Reserve space so it never overlaps the points badge. */
.notification-toast { padding-right: 30px; }
.notification-close {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text-tertiary); font-size: 0.7rem; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.notification-close:hover { background: var(--color-bg); color: var(--color-text-primary); }
.notification-close:active { transform: scale(0.9); }

/* Type border accents */
.notification-toast.success { border-left: 3px solid var(--color-income); }
.notification-toast.error   { border-left: 3px solid var(--color-expense); }
.notification-toast.warning { border-left: 3px solid var(--color-warning); }
.notification-toast.info    { border-left: 3px solid var(--color-primary); }
.notification-toast.points  { border-left: 3px solid #f59e0b; }
.notification-toast.quest   { border-left: 3px solid var(--color-primary); }
.notification-toast.achievement { border-left: 3px solid #f59e0b; }
.notification-toast.streak  { border-left: 3px solid #f97316; }

/* Icon colors */
.notification-icon { font-size: 1.15rem; flex-shrink: 0; }
.notification-toast.success .notification-icon { color: var(--color-income); }
.notification-toast.error   .notification-icon { color: var(--color-expense); }
.notification-toast.warning .notification-icon { color: var(--color-warning); }
.notification-toast.info    .notification-icon { color: var(--color-primary); }
.notification-toast.points  .notification-icon { color: #f59e0b; }
.notification-toast.achievement .notification-icon { color: #f59e0b; }
.notification-toast.streak  .notification-icon { color: #f97316; }

.notification-content { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; }
.notification-body { flex: 1; min-width: 0; }
.notification-title { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.notification-message { font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.4; }
.notification-points-badge {
  font-size: 0.78rem; font-weight: 700; color: #f59e0b;
  background: rgba(245,158,11,0.1); border-radius: 20px; padding: 2px 8px;
  white-space: nowrap; flex-shrink: 0; align-self: center;
}
.notification-close { background: transparent; border: none; color: var(--color-text-tertiary); cursor: pointer; padding: 0 4px; font-size: 1rem; }
.notification-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--color-primary); transition: width linear; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM / TRIAL / PAYWALL / SIDEBAR BANNERS
   ═══════════════════════════════════════════════════════════ */

.sidebar-premium-banner { padding: 0 0 8px; margin-top: 4px; }
.trial-banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-primary-light); border: 1px solid var(--color-primary-mid);
  border-radius: var(--radius-sm); padding: 9px 12px; transition: all 0.2s; cursor: pointer;
}
.trial-banner:hover { background: var(--color-primary-mid); }
.trial-banner.trial-expiring {
  background: rgba(255,69,58,0.08); border-color: rgba(255,69,58,0.2);
  animation: trialPulse 2.5s ease-in-out infinite;
}
.trial-banner-icon { font-size: 1rem; color: var(--color-primary); flex-shrink: 0; }
.trial-expiring .trial-banner-icon { color: var(--color-expense); }
.trial-banner-content { flex: 1; min-width: 0; }
.trial-banner-title { font-size: 0.65rem; color: var(--color-text-secondary); font-weight: 500; }
.trial-banner-days { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); }
.trial-upgrade-btn {
  background: var(--gradient-primary); border: none; border-radius: 7px; color: #fff;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; cursor: pointer; flex-shrink: 0;
}

.upgrade-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  color: #fff; border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 0.80rem; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(245,158,11,0.3);
  text-align: center;
}
.upgrade-banner:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.4); }
.upgrade-banner i { font-size: 1rem; flex-shrink: 0; }

/* Paywall modal */
.paywall-backdrop { z-index: 1060; }
.paywall-modal { max-width: 400px; position: relative; }
.paywall-close { position: absolute; top: 14px; right: 14px; z-index: 10; }
.paywall-content {
  padding: 1.75rem 1.5rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  position: relative;
}
.paywall-icon-wrap { }
.paywall-icon {
  width: 72px; height: 72px; border-radius: 24px;
  background: var(--gradient-gold);
  display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff;
  box-shadow: 0 8px 28px rgba(245,166,35,0.35);
}
/* Premium-activated / trial modal icon — indigo brand plate with white diamond
   (overrides the gold paywall icon, centered inside the celebration modal). */
.premium-activated-icon {
  margin: 4px auto 16px;
  background: linear-gradient(135deg, #5856D6, #8E8CE8);
  box-shadow: 0 8px 28px rgba(88,86,214,0.35);
}
.paywall-title { font-size: 1.4rem; font-weight: 800; color: var(--color-text-primary); margin: 0; }
.paywall-subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.paywall-features {
  width: 100%; background: var(--color-primary-light); border-radius: var(--radius-md);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.paywall-feature { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.paywall-feature i { font-size: 1rem; flex-shrink: 0; }
.paywall-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 6px; }
.price-amount { font-size: 1.5rem; font-weight: 800; color: var(--color-text-primary); }
.price-period { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.price-approx { width: 100%; font-size: 0.78rem; color: var(--color-text-secondary); }
.paywall-actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.paywall-btn-primary {
  width: 100%; background: var(--gradient-gold); color: #fff; border: none;
  border-radius: 14px; padding: 13px 20px; font-size: var(--font-size-sm); font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 4px 16px rgba(245,166,35,0.3); transition: opacity 0.15s, transform 0.15s;
}
.paywall-btn-primary:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.paywall-btn-primary:disabled { opacity: 0.55; cursor: default; }
.paywall-btn-secondary { background: transparent; border: none; color: var(--color-text-secondary); font-size: 0.80rem; cursor: pointer; padding: 5px; margin-top: 6px; }
.paywall-btn-secondary:hover { color: var(--color-text-primary); }

/* ═══════════════════════════════════════════════════════════
   APP CONFIRM DIALOG
   ═══════════════════════════════════════════════════════════ */

@keyframes confirm-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes confirm-box-in {
  from { opacity: 0; transform: scale(0.90) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.app-confirm-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: confirm-backdrop-in 0.18s ease both;
}
.app-confirm-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--color-shadow-xl);
  padding: 28px 24px 20px;
  max-width: 320px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  animation: confirm-box-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.app-confirm-icon-wrap {
  width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 4px;
}
.app-confirm-icon-wrap.danger {
  background: rgba(255,69,58,0.12); color: var(--color-expense);
}
.app-confirm-icon-wrap.info {
  background: var(--color-primary-light); color: var(--color-primary);
}
.app-confirm-title {
  font-size: 1rem; font-weight: 700; color: var(--color-text-primary);
  margin-bottom: 2px;
}
.app-confirm-message {
  font-size: 0.82rem; color: var(--color-text-secondary);
  line-height: 1.5; margin-bottom: 6px;
}
.app-confirm-actions {
  display: flex; gap: 8px; width: 100%; margin-top: 8px;
}
.app-confirm-btn {
  flex: 1; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid transparent; transition: all 0.15s;
}
.app-confirm-btn.secondary {
  background: var(--color-bg); border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.app-confirm-btn.secondary:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.app-confirm-btn.danger {
  background: var(--color-expense); color: #fff;
}
.app-confirm-btn.danger:hover { background: #e03028; }
.app-confirm-btn.primary {
  background: var(--gradient-primary); color: #fff;
}
.app-confirm-btn.primary:hover { opacity: 0.9; }

/* Dark theme */
[data-bs-theme="dark"] .app-confirm-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
}
[data-bs-theme="dark"] .app-confirm-btn.secondary {
  background: rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════
   ADVERTISING
   ═══════════════════════════════════════════════════════════ */

.rewarded-ad-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(10,212,120,0.06), rgba(10,132,255,0.06));
  border: 1.5px solid rgba(10,212,120,0.18); border-radius: 14px;
  padding: 14px 16px; margin-top: 12px; transition: border-color 0.2s; cursor: pointer;
}
.rewarded-ad-card:hover { border-color: rgba(10,212,120,0.35); }
.rewarded-ad-icon { font-size: 1.8rem; color: #0AD478; flex-shrink: 0; }
.rewarded-ad-content { flex: 1; min-width: 0; }
.rewarded-ad-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); margin-bottom: 1px; }
.rewarded-ad-desc { font-size: 0.78rem; color: var(--color-text-secondary); }
.rewarded-ad-limit { font-size: 0.70rem; color: var(--color-text-tertiary); margin-top: 2px; }
.rewarded-ad-btn {
  background: linear-gradient(135deg, #0AD478, #0A84FF); color: #fff; border: none;
  border-radius: 10px; padding: 7px 14px; font-size: var(--font-size-sm); font-weight: 700;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; gap: 4px;
  white-space: nowrap; transition: opacity 0.15s;
}
.rewarded-ad-btn:disabled { opacity: 0.5; cursor: default; }
.rewarded-ad-btn:not(:disabled):hover { opacity: 0.88; }

/* ═══════════════════════════════════════════════════════════
   SMART PREDICTION UI
   ═══════════════════════════════════════════════════════════ */

/* Section label row — label + badge side by side */
.section-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.section-label-row .section-label { margin-bottom: 0; }

/* Prediction reason badge (dismissible) */
.prediction-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--color-primary-light); color: var(--color-primary);
  font-size: 0.68rem; font-weight: 600;
  border: 1px solid rgba(88,86,214,0.18);
  cursor: pointer; transition: opacity 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.prediction-badge:hover { opacity: 0.8; }
.prediction-badge i { font-size: 0.65rem; }

/* Amount hint chip — tap to apply */
.amount-hint-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px; padding: 5px 12px;
  background: var(--color-primary-light); color: var(--color-primary);
  border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, transform 0.12s;
  border: 1px solid rgba(88,86,214,0.18);
  user-select: none;
}
.amount-hint-chip:hover { background: var(--color-primary-mid); transform: scale(1.02); }
.amount-hint-chip i { font-size: 0.72rem; }

/* Alternative suggestion chips row */
.alt-suggestions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.alt-label {
  font-size: 0.68rem; font-weight: 600; color: var(--color-text-tertiary);
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  white-space: nowrap;
}
.alt-label i { color: var(--color-warning); }
.alt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  font-size: 0.75rem; font-weight: 500; color: var(--color-text-secondary);
  cursor: pointer; transition: all 0.14s; white-space: nowrap;
}
.alt-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.alt-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.alt-amount {
  font-size: 0.68rem; opacity: 0.7; margin-left: 2px;
}

/* Vue transition for hints */
.hint-fade-enter-active, .hint-fade-leave-active { transition: opacity 0.2s, transform 0.2s; }
.hint-fade-enter-from, .hint-fade-leave-to { opacity: 0; transform: translateY(-4px); }

/* Predicted category pill highlight */
.category-pill.predicted {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}
.category-pill.predicted::after {
  content: '';
  position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary);
  border: 1.5px solid var(--color-surface);
}
.category-pill { position: relative; }

/* Remove old blocking overlay (kept for safety, now hidden) */
.prediction-loading-overlay { display: none !important; }
.compact-body.loading > * { opacity: 1 !important; pointer-events: auto !important; }

/* ═══════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════ */

.empty-state {
  text-align: center; padding: 3rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty-state > i, .empty-state > .bi { font-size: 3rem; color: var(--color-text-tertiary); }
.empty-state h5 { color: var(--color-text-primary); margin: 0; font-weight: 600; }
.empty-state p { color: var(--color-text-secondary); margin: 0; font-size: var(--font-size-sm); }

/* ═══════════════════════════════════════════════════════════
   BOOTSTRAP OVERRIDES — Unified design
   ═══════════════════════════════════════════════════════════ */

/* Buttons */
.btn {
  font-weight: 600; border-radius: var(--radius-sm) !important;
  font-family: inherit; transition: all 0.15s; font-size: 0.85rem; padding: 8px 16px;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-sm { padding: 5px 12px !important; font-size: 0.78rem !important; border-radius: var(--radius-xs) !important; }
.btn-primary { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; }
.btn-primary:hover { background: #4644BD !important; border-color: #4644BD !important; }
.btn-secondary { background: var(--color-bg) !important; border-color: var(--color-border-strong) !important; color: var(--color-text-primary) !important; }
.btn-secondary:hover { background: var(--color-border) !important; }
.btn-success { background: var(--color-income) !important; border-color: var(--color-income) !important; color: #fff !important; }
.btn-success:hover { background: #28B849 !important; border-color: #28B849 !important; }
.btn-danger { background: var(--color-expense) !important; border-color: var(--color-expense) !important; color: #fff !important; }
.btn-outline-primary { border-color: var(--color-primary) !important; color: var(--color-primary) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--color-primary-light) !important; }
.btn-outline-secondary { border-color: var(--color-border-strong) !important; color: var(--color-text-secondary) !important; background: transparent !important; }
.btn-outline-secondary:hover { background: var(--color-bg) !important; }
.btn-outline-success { border-color: var(--color-income) !important; color: var(--color-income) !important; background: transparent !important; }
.btn-outline-success:hover { background: rgba(48,209,88,0.08) !important; }
.btn-outline-danger { border-color: var(--color-expense) !important; color: var(--color-expense) !important; background: transparent !important; }
.btn-outline-danger:hover { background: rgba(255,69,58,0.08) !important; }
.btn-outline-warning { border-color: var(--color-warning) !important; color: var(--color-warning) !important; background: transparent !important; }
.btn-outline-warning:hover { background: rgba(255,159,10,0.08) !important; }
.btn-close { background-size: 14px !important; opacity: 0.6; }

/* Badges */
.badge {
  font-weight: 700 !important; border-radius: 999px !important;
  font-size: 0.65rem !important; padding: 3px 8px !important;
}
.bg-primary { background: var(--color-primary) !important; }
.bg-success { background: var(--color-income) !important; }
.bg-danger { background: var(--color-expense) !important; }
.bg-warning { background: var(--color-warning) !important; }
.bg-secondary { background: var(--color-text-secondary) !important; }
.bg-info { background: var(--color-info) !important; }

/* Alerts */
.alert {
  border-radius: var(--radius-sm) !important; font-size: var(--font-size-sm) !important;
  border: none !important; padding: 10px 14px !important;
  display: flex; align-items: flex-start; gap: 8px;
}
.alert-success { background: rgba(48,209,88,0.1) !important; color: var(--color-income) !important; }
.alert-warning { background: rgba(255,159,10,0.1) !important; color: var(--color-warning) !important; }
.alert-danger { background: rgba(255,69,58,0.1) !important; color: var(--color-expense) !important; }
.alert-info { background: var(--color-primary-light) !important; color: var(--color-primary) !important; }

/* Progress */
.progress {
  background: var(--color-border) !important; border-radius: 999px !important;
  overflow: hidden;
}
.progress-bar {
  border-radius: 999px; transition: width 0.4s ease !important;
}
.progress-bar.bg-success { background: var(--color-income) !important; }
.progress-bar.bg-warning { background: var(--color-warning) !important; }
.progress-bar.bg-danger { background: var(--color-expense) !important; }

/* Dropdowns */
.dropdown-menu {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--color-shadow-lg) !important;
  padding: 6px !important; font-size: var(--font-size-sm) !important;
  /* cap width so a long category name can't blow the menu past the screen */
  max-width: min(280px, calc(100vw - 24px));
}
.dropdown-item {
  border-radius: var(--radius-xs) !important; padding: 8px 12px !important;
  color: var(--color-text-primary) !important; font-size: var(--font-size-sm) !important;
  transition: background 0.12s;
  /* truncate long category names instead of overflowing the menu */
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--color-primary-light) !important; color: var(--color-primary) !important; }
.dropdown-item.active { background: var(--color-primary) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--color-border) !important; margin: 4px 0 !important; }
.dropdown-toggle::after { margin-left: 6px; vertical-align: middle; }

/* Form controls (Bootstrap) */
.form-control, .form-select {
  background: var(--color-bg) !important; border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important; color: var(--color-text-primary) !important;
  font-family: inherit !important; font-size: var(--font-size-sm) !important;
  padding: 8px 12px !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(88,86,214,0.12) !important;
  background: var(--color-surface) !important;
}
.form-label { font-size: 0.72rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }

/* Spinner */
.spinner-border { border-color: currentColor transparent currentColor currentColor; }
.spinner-border-sm { width: 0.85rem; height: 0.85rem; border-width: 0.14em; }

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

.text-success { color: var(--color-income) !important; }
.text-danger { color: var(--color-expense) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-muted { color: var(--color-text-secondary) !important; }
.text-dark-emphasis { color: var(--color-text-primary) !important; }
.text-indigo { color: var(--color-primary) !important; }
.text-orange { color: var(--color-warning) !important; }
.fw-medium { font-weight: 500 !important; }
.fw-bold { font-weight: 700 !important; }

/* Row/Col — keep Bootstrap's own gutters */

/* ── Budget tab ──────────────────────────────────────────────────────────── */
.budget-tab { padding: 0 0 16px; }
/* Give the stats grid breathing room below the sticky period bar */
.budget-tab .stats-grid,
.analytics-tab .stats-grid,
.analytics-tab .analytics-summary { margin-top: 4px; }

/* Category list card */
.budget-list-card {
  margin: 12px 16px 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--color-shadow);
}
.budget-list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.budget-list-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); display: flex; align-items: center; gap: 6px; }

/* Category rows */
.budget-category-item { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.budget-category-item:last-child { border-bottom: none; }
.budget-cat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
/* flex: 1 + min-width: 0 lets the name shrink and truncate instead of pushing amounts off-screen */
.budget-cat-name {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-primary);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.budget-cat-name .cat-dot { flex-shrink: 0; }
/* amounts never wrap or shrink — they must stay on one line */
.budget-cat-amounts {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--font-size-sm); font-weight: 600;
  flex-shrink: 0; white-space: nowrap;
}
.budget-cat-sep { color: var(--color-text-secondary); font-weight: 400; }
.budget-cat-limit { color: var(--color-text-secondary); font-weight: 400; }

/* Custom progress bar */
.budget-bar-track { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.budget-bar-fill  { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.budget-bar-fill.ok      { background: var(--color-income); }
.budget-bar-fill.warning { background: #f59e0b; }
.budget-bar-fill.danger  { background: var(--color-expense); }

.budget-cat-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.budget-cat-pct  { font-size: 0.7rem; color: var(--color-text-secondary); white-space: nowrap; }
.budget-cat-rest { font-size: 0.7rem; font-weight: 500; white-space: nowrap; text-align: right; }

/* Empty state */
.budget-multiplier-badge {
  font-size: 0.65rem; font-weight: 700;
  background: var(--color-primary-light); color: var(--color-primary);
  border-radius: 999px; padding: 1px 7px; margin-left: 6px;
  vertical-align: middle;
}
.budget-empty { padding: 40px 16px; text-align: center; }
.budget-empty i { font-size: 2.5rem; color: var(--color-text-secondary); display: block; margin-bottom: 12px; }
.budget-empty p { font-weight: 600; color: var(--color-text-primary); margin: 0 0 4px; }
.budget-empty span { display: block; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.budget-empty .submit-btn { display: inline-flex; }

/* Budget input modal rows */
.budget-input-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.budget-input-row:last-of-type { border-bottom: none; margin-bottom: 8px; }
.budget-input-label {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-size: var(--font-size-sm); font-weight: 500;
}
/* Category name in modal: allow truncation if too long */
.budget-input-label > span:not(.cat-dot) {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.budget-input-spent {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Legacy compat */
.budget-category-input { padding: 14px; background: var(--color-bg); border-radius: var(--radius-sm); margin-bottom: 10px; }

/* ── Analytics timeline table ────────────────────────────────────────────── */
.timeline-table { }
.timeline-group { border-bottom: 1px solid var(--color-border); }
.timeline-group:last-child { border-bottom: none; }
.timeline-period-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 14px;
  background: var(--color-bg);
  font-weight: 600; font-size: var(--font-size-sm);
}
.tl-period-label { color: var(--color-text-primary); }
.tl-period-totals { display: flex; gap: 10px; font-size: var(--font-size-sm); }
.tl-income  { color: var(--color-income);  font-weight: 600; }
.tl-expense { color: var(--color-expense); font-weight: 600; }
.timeline-cat-row {
  display: flex; align-items: center;
  padding: 6px 14px 6px 28px; gap: 8px;
  font-size: var(--font-size-sm);
}
.timeline-cat-row:last-child { padding-bottom: 10px; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tl-cat-name   { flex: 1; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-cat-amount { font-weight: 500; flex-shrink: 0; }


/* ── Analytics: per-month category breakdown (toggle, stacked chart, pivot) ── */
.breakdown-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.breakdown-label { font-size: 0.68rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; }
.breakdown-hint { margin: 0 0 10px; font-size: 0.76rem; color: var(--color-text-secondary); }
.chart-card-header + .breakdown-hint { margin-top: -4px; }
/* Stacked category chart needs extra height for the bottom legend */
.chart-canvas-box.tall { height: 320px; }

/* Pivot table: categories (rows) × months (columns), horizontal scroll,
   sticky category column (left) and totals column (right). */
.pivot-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--color-shadow);
}
.pivot-table {
  border-collapse: separate; border-spacing: 0;
  width: max-content; min-width: 100%;
  font-size: var(--font-size-sm); font-variant-numeric: tabular-nums;
}
.pivot-table th, .pivot-table td { white-space: nowrap; }
.pivot-cell {
  padding: 9px 12px; text-align: right;
  border-top: 1px solid var(--color-border); color: var(--color-text-primary);
}
.pivot-head {
  background: var(--color-bg); border-top: none;
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--color-text-secondary);
}
.pivot-zero { color: var(--color-text-secondary); opacity: .45; }
.pivot-strong { font-weight: 700; }

/* Sticky first column (category name) */
.pivot-cat {
  position: sticky; left: 0; z-index: 2;
  text-align: left; padding: 9px 12px; max-width: 168px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 1px 0 0 var(--color-border);
}
.pivot-cat-name {
  display: inline-block; max-width: 132px; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text-primary);
}
.pivot-cat .tl-dot { display: inline-block; margin-right: 7px; vertical-align: middle; }

/* Sticky totals column (right) */
.pivot-total-col {
  position: sticky; right: 0; z-index: 2;
  background: var(--color-surface);
  box-shadow: -1px 0 0 var(--color-border);
}

/* Header + footer backgrounds for sticky cells must stay opaque */
.pivot-head.pivot-cat, .pivot-head.pivot-total-col { background: var(--color-bg); z-index: 3; }
.pivot-foot { font-weight: 700; background: var(--color-bg); border-top: 2px solid var(--color-border-strong); }
.pivot-foot.pivot-cat, .pivot-foot.pivot-total-col { background: var(--color-bg); }

/* Subtle type accent on the per-category totals */
.pivot-table.income .pivot-strong { color: var(--color-income); }
.pivot-table.expense .pivot-strong { color: var(--color-expense); }

.month-totals-table { font-variant-numeric: tabular-nums; }

/* Two stacked pivot sections (Доходы / Расходы) when filter = «Всё» */
.pivot-section + .pivot-section { margin-top: 16px; }
.pivot-section-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 6px; padding-left: 2px;
}
.pivot-section-title::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.pivot-section-title.income { color: var(--color-income); }
.pivot-section-title.income::before { background: var(--color-income); }
.pivot-section-title.expense { color: var(--color-expense); }
.pivot-section-title.expense::before { background: var(--color-expense); }


/* Settings tab */
.settings-tab { padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) { .settings-tab { padding: 12px 0 20px; } }

.settings-section-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.settings-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px 12px;
  border-bottom: 1px solid var(--color-border);
}
.settings-section-title {
  font-size: 0.88rem; font-weight: 700; color: var(--color-text-primary);
  display: flex; align-items: center; gap: 7px;
}
.settings-section-title i { color: var(--color-primary); font-size: 0.9rem; }

/* Category groups */
/* Category limit indicator (free users) */
.cat-limit-bar { padding: 10px 16px 8px; border-bottom: 1px solid var(--color-border); }
.cat-limit-label { font-size: 0.73rem; color: var(--color-text-secondary); margin-bottom: 5px; }
.cat-limit-full { color: var(--color-primary); cursor: pointer; font-weight: 600; }
.cat-limit-track { height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.cat-limit-fill { height: 100%; background: var(--gradient-primary); border-radius: 2px; transition: width .4s; }
/* Lapsed-premium banner inside category limit bar */
.cat-limit-lapsed { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: var(--color-primary-light, rgba(0,119,255,0.07)); border: 1px solid rgba(0,119,255,0.2); border-radius: 8px; font-size: 0.75rem; color: var(--color-text-primary); cursor: pointer; line-height: 1.4; }
.cat-limit-lapsed i { color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }
.cat-limit-lapsed:hover { background: var(--color-primary-light, rgba(0,119,255,0.12)); }

.cat-group { border-bottom: 1px solid var(--color-border); }
.cat-group:last-child { border-bottom: none; }
.cat-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: var(--color-bg);
}
.cat-group-label {
  font-size: 0.70rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 5px;
}
.cat-group-label.income { color: var(--color-income); }
.cat-group-label.expense { color: var(--color-expense); }
.cat-group-count {
  font-size: 0.70rem; font-weight: 600; color: var(--color-text-tertiary);
  background: var(--color-border); border-radius: 999px; padding: 2px 8px;
}
.cat-list { display: flex; flex-direction: column; }
.cat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}
.cat-row:last-child { border-bottom: none; }
.cat-row:active { background: var(--color-primary-light); }
.cat-row-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cat-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--color-surface);
}
.cat-dot.lg { width: 18px; height: 18px; }
.cat-info { flex: 1; min-width: 0; }
.cat-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-meta { font-size: 0.70rem; color: var(--color-text-tertiary); margin-top: 1px; }
.cat-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cat-action-btn {
  width: 30px; height: 30px; border-radius: var(--radius-xs);
  border: none; background: var(--color-bg); color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; cursor: pointer; transition: all 0.13s;
}
.cat-action-btn:hover { background: var(--color-primary-light); color: var(--color-primary); }
.cat-action-btn.danger:hover { background: rgba(255,99,97,0.12); color: var(--color-expense); }
.cat-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cat-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 20px; color: var(--color-text-tertiary); font-size: 0.85rem;
}

/* Edit category modal extras */
.cat-edit-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--color-bg); border-radius: var(--radius-sm);
  margin-top: 10px; border: 1px solid var(--color-border);
}
.color-swatches {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.color-swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: white; transition: transform 0.12s, border-color 0.12s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: var(--color-text-primary); transform: scale(1.12); }

/* Delete category modal extras */
.delete-cat-target {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 12px;
}
.delete-cat-name { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); }
.delete-cat-warn {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; background: rgba(255,159,67,0.10);
  border-radius: var(--radius-sm); border: 1px solid rgba(255,159,67,0.25);
  font-size: 0.82rem; color: var(--color-text-primary);
}
.delete-cat-warn i { color: var(--color-warning); flex-shrink: 0; margin-top: 1px; }
.delete-cat-info {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 12px; background: var(--color-primary-light);
  border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--color-primary);
}
.submit-btn.danger {
  background: var(--color-expense) !important; color: white;
  border-color: var(--color-expense) !important;
}
.submit-btn.danger:hover { opacity: 0.9; }

/* Category list in settings (legacy) */
.category-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--color-bg); border-radius: var(--radius-sm);
  margin-bottom: 8px; border: 1px solid var(--color-border);
}
.category-list-item:last-child { margin-bottom: 0; }

/* Theme selector */
.theme-selector { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.theme-option {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s;
  flex: 1 1 0; min-width: 160px; min-height: 72px;
}
.theme-option:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.theme-option.active { border-color: var(--color-primary); background: var(--color-primary-light); }
.theme-option.disabled { opacity: 0.55; cursor: default; }
.theme-preview {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--gradient-primary); display: flex; align-items: center;
  justify-content: center; font-size: 1.15rem; color: white; flex-shrink: 0;
}
.theme-preview[data-theme="light"] { background: linear-gradient(135deg, #F2F2F7, #FFFFFF); color: #5856D6; border: 1.5px solid var(--color-border); }
.theme-preview[data-theme="dark"] { background: linear-gradient(135deg, #1C1C22, #3A3A4A); }
.theme-preview[data-theme="auto"] { background: linear-gradient(135deg, #F2F2F7 50%, #1C1C22 50%); }
.theme-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); }
.theme-description { font-size: 0.70rem; color: var(--color-text-secondary); }
.theme-price { font-size: 0.70rem; color: var(--color-warning); margin-top: 2px; display: flex; align-items: center; gap: 3px; }

/* About section */
.about-app { text-align: center; padding: 8px 0; }
.about-app .bi { font-size: 2.5rem; color: var(--color-primary); display: block; margin-bottom: 8px; }

/* Fix Bootstrap row/col to work in our layout */
.row { gap: 0; }
[class*="col-"] { padding-left: 6px; padding-right: 6px; }
.row.g-0 > [class*="col-"] { padding: 0; }

/* ═══════════════════════════════════════════════════════════
   DARK MODE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════ */

/* ─ Base ─────────────────────────────────────────────────── */
[data-bs-theme="dark"] body { background: var(--color-bg); color: var(--color-text-primary); }
[data-bs-theme="dark"] * { color: inherit; }

/* ─ Text utilities ───────────────────────────────────────── */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-dark-emphasis { color: var(--color-text-primary) !important; }
[data-bs-theme="dark"] .text-muted         { color: var(--color-text-secondary) !important; }
[data-bs-theme="dark"] .text-body          { color: var(--color-text-primary) !important; }
[data-bs-theme="dark"] .text-body-secondary{ color: var(--color-text-secondary) !important; }
[data-bs-theme="dark"] .text-body-tertiary { color: var(--color-text-tertiary) !important; }
/* :not(.submit-btn) — иначе это правило для мелкого текста перекрашивает текст кнопок
   с классом .small (.submit-btn.primary.small: «ОК», «Настроить») в серый и они выглядят неактивными */
[data-bs-theme="dark"] small, [data-bs-theme="dark"] .small:not(.submit-btn) { color: var(--color-text-secondary); }
/* Цветные карточки с белым текстом: <small> внутри них не должен перекрашиваться в серый
   правилом выше — на зелёном/фиолетовом фоне это нечитаемо. Возвращаем белый. */
[data-bs-theme="dark"] .pp-invite small,
[data-bs-theme="dark"] .dash-invite-banner small { color: #fff; }

/* ─ Cards / panels ───────────────────────────────────────── */
[data-bs-theme="dark"] .card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .card-header {
  background: var(--color-surface-2) !important;
  border-bottom-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .card-body  { color: var(--color-text-primary) !important; }
[data-bs-theme="dark"] .card-title { color: var(--color-text-primary) !important; }
[data-bs-theme="dark"] .card-footer{
  background: var(--color-surface-2) !important;
  border-top-color: var(--color-border) !important;
}

/* ─ Bootstrap bg-* overrides ─────────────────────────────── */
[data-bs-theme="dark"] .bg-light   { background: var(--color-surface-2) !important; color: var(--color-text-primary) !important; }
[data-bs-theme="dark"] .bg-white   { background: var(--color-surface) !important; }
[data-bs-theme="dark"] .bg-body    { background: var(--color-bg) !important; }
[data-bs-theme="dark"] .bg-body-secondary { background: var(--color-surface) !important; }
[data-bs-theme="dark"] .border     { border-color: var(--color-border) !important; }
[data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end { border-color: var(--color-border) !important; }

/* ─ Form controls ────────────────────────────────────────── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .compact-input,
[data-bs-theme="dark"] .amount-field,
[data-bs-theme="dark"] .compact-textarea {
  background: var(--color-surface-2) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .compact-input:focus {
  background: var(--color-surface) !important;
  border-color: var(--color-primary) !important;
}
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-label-modern,
[data-bs-theme="dark"] label { color: var(--color-text-secondary) !important; }
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
[data-bs-theme="dark"] ::placeholder { color: var(--color-text-tertiary) !important; }

/* ─ Buttons ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-outline-secondary {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .btn-close { filter: invert(1); }

/* ─ Dropdowns ────────────────────────────────────────────── */
[data-bs-theme="dark"] .dropdown-toggle {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-bs-theme="dark"] .dropdown-menu {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
[data-bs-theme="dark"] .dropdown-item { color: var(--color-text-primary) !important; }

/* ─ Lists / tables ───────────────────────────────────────── */
[data-bs-theme="dark"] .list-group-item {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .table { color: var(--color-text-primary) !important; }
[data-bs-theme="dark"] .table th, [data-bs-theme="dark"] .table td { border-color: var(--color-border) !important; }
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: var(--color-surface-2) !important; }

/* ─ Modals ───────────────────────────────────────────────── */
[data-bs-theme="dark"] .modal-content {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .modal-header {
  border-bottom-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .modal-footer { border-top-color: var(--color-border) !important; }
[data-bs-theme="dark"] .modal-sheet {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .modal-sheet-title { color: var(--color-text-primary) !important; }
[data-bs-theme="dark"] .modal-sheet-body,
[data-bs-theme="dark"] .modal-sheet-footer { color: var(--color-text-primary); }

/* ─ Custom components ────────────────────────────────────── */
[data-bs-theme="dark"] .trial-banner { background: rgba(88,86,214,0.15); border-color: rgba(88,86,214,0.3); }
[data-bs-theme="dark"] .paywall-features { background: rgba(88,86,214,0.15); }
[data-bs-theme="dark"] .rewarded-ad-card { background: linear-gradient(135deg, rgba(10,212,120,0.08), rgba(10,132,255,0.08)); }
[data-bs-theme="dark"] .notification-toast { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.2); }
[data-bs-theme="dark"] .enhanced-loading-screen { background: linear-gradient(160deg, #3A38A0 0%, #4644BD 40%, #6260CC 70%, #7E7AC4 100%); }

/* ─ Settings tab dark overrides ──────────────────────────── */
[data-bs-theme="dark"] .settings-section-card { background: var(--color-surface); border-color: var(--color-border); }
[data-bs-theme="dark"] .settings-section-hdr  { border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .cat-group-header { background: var(--color-bg); }
[data-bs-theme="dark"] .cat-row { border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .cat-row:active { background: var(--color-primary-light); }
[data-bs-theme="dark"] .cat-action-btn { background: var(--color-surface-2); color: var(--color-text-secondary); }
[data-bs-theme="dark"] .cat-edit-preview { background: var(--color-bg); border-color: var(--color-border); }
[data-bs-theme="dark"] .delete-cat-warn { background: rgba(255,159,67,0.08); border-color: rgba(255,159,67,0.18); }
[data-bs-theme="dark"] .delete-cat-info { background: var(--color-primary-light); }
[data-bs-theme="dark"] .cat-group { border-bottom-color: var(--color-border); }

/* ─ Misc ──────────────────────────────────────────────────── */
[data-bs-theme="dark"] .enhanced-card { background: var(--color-surface); border-color: var(--color-border); }
[data-bs-theme="dark"] .goal-card-enhanced { background: var(--color-surface); border-color: var(--color-border); }
[data-bs-theme="dark"] .widget-card { background: var(--color-surface); border-color: var(--color-border); }

/* Mobile: hide analytics quick-btn; desktop: hide entire quick block */
.prf-qbtn-analytics { display: none; }
@media (min-width: 768px) { .prf-quick { display: none !important; } }

/* ─ Profile (prf-*) dark overrides ───────────────────────── */
[data-bs-theme="dark"] .prf-av-level { color: var(--color-primary) !important; background: var(--color-surface); border-color: var(--color-primary); }
[data-bs-theme="dark"] .prf-stats { background: var(--color-surface); }
[data-bs-theme="dark"] .prf-quick { background: var(--color-surface); }
[data-bs-theme="dark"] .prf-qbtn { border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .prf-nav  { background: var(--color-surface); border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .prf-quest { background: var(--color-surface-2); border-color: var(--color-border); }
[data-bs-theme="dark"] .prf-ach  { background: var(--color-surface-2); border-color: var(--color-border); }
[data-bs-theme="dark"] .shop-cats { background: var(--color-surface); border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .shop-card-new { background: var(--color-surface-2); border-color: var(--color-border); }
[data-bs-theme="dark"] .prf-prem-card { background: var(--color-surface); border-color: var(--color-border); }
[data-bs-theme="dark"] .prf-prem-head { background: var(--color-surface); border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .prf-prem-card.active .prf-prem-head { background: var(--gradient-primary); }
[data-bs-theme="dark"] .prf-prem-status { background: rgba(88,86,214,0.1); border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .prf-prem-features { border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .prf-ad-card { background: linear-gradient(135deg, rgba(10,212,120,0.06), rgba(10,132,255,0.06)); }
[data-bs-theme="dark"] .bottom-nav { background: rgba(14,14,18,0.94); border-top-color: var(--color-border); }
[data-bs-theme="dark"] .app-header { background: rgba(14,14,18,0.92); border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .color-swatch { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .color-swatch.active { border-color: var(--color-text-primary); }
[data-bs-theme="dark"] .amount-hint-chip { background: var(--color-primary-light); border-color: rgba(120,118,235,0.25); }
[data-bs-theme="dark"] .alt-chip { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-secondary); }
[data-bs-theme="dark"] .alt-chip:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
[data-bs-theme="dark"] .alt-suggestions { border-top-color: var(--color-border); }
[data-bs-theme="dark"] .prediction-badge { background: var(--color-primary-light); border-color: rgba(120,118,235,0.2); }
[data-bs-theme="dark"] .category-pill.predicted { border-color: var(--color-primary) !important; background: var(--color-primary-light) !important; }

/* ── Dark theme: dashboard new components ─────────────────── */
[data-bs-theme="dark"] .quick-actions-bar { background: none; border-bottom-color: var(--color-border); }
/* Тинт кладём поверх сплошного --color-surface (через linear-gradient), а не полупрозрачным
   rgba поверх фона страницы — иначе на десктопе (где у бара background:none) подложка кнопок
   мутнеет и не совпадает с пиллами/карточками. Так кнопки имеют ту же «подложку», что весь тёмный UI. */
[data-bs-theme="dark"] .qab-btn.income  { background: linear-gradient(rgba(48,209,88,0.10), rgba(48,209,88,0.10)), var(--color-surface); border-color: rgba(48,209,88,0.30); }
[data-bs-theme="dark"] .qab-btn.expense { background: linear-gradient(rgba(255,69,58,0.09), rgba(255,69,58,0.09)), var(--color-surface); border-color: rgba(255,69,58,0.28); }
[data-bs-theme="dark"] .qab-btn.goal    { background: linear-gradient(rgba(99,102,241,0.12), rgba(99,102,241,0.12)), var(--color-surface); border-color: rgba(99,102,241,0.30); }
[data-bs-theme="dark"] .balance-hero { background: var(--color-surface); border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .stat-pill { background: var(--color-surface); border-color: var(--color-border); }
[data-bs-theme="dark"] .dash-card { background: var(--color-surface); border-color: var(--color-border); }
[data-bs-theme="dark"] .dash-card-header { border-bottom-color: var(--color-border); color: var(--color-text-primary); }
[data-bs-theme="dark"] .dash-goal-row { border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .dash-expense-row { border-bottom-color: var(--color-border); }
[data-bs-theme="dark"] .user-profile-compact { border-bottom-color: var(--color-border); }
/* Desktop QAB card style in dark mode — colored tints override the base surface */
@media (min-width: 768px) {
  [data-bs-theme="dark"] .qab-btn.income  { background: rgba(48,209,88,0.08); border-color: rgba(48,209,88,0.28); }
  [data-bs-theme="dark"] .qab-btn.expense { background: rgba(255,69,58,0.08); border-color: rgba(255,69,58,0.25); }
  [data-bs-theme="dark"] .qab-btn.goal    { background: rgba(99,102,241,0.09); border-color: rgba(99,102,241,0.28); }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   GOAL COMPLETION MODAL (.cg-*)
   Пошаговая верстка окна «Выполнение цели». Цель редизайна — сделать
   очевидным, что выбор категории обязателен (раньше кнопка просто была
   неактивной и пользователи не понимали почему). Всё на theme-переменных,
   поэтому светлая/тёмная тема работают автоматически.
   ═══════════════════════════════════════════════════════════ */
.cg-form { gap: 16px; }

/* Шапка-поздравление */
.cg-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 2px 0; }
.cg-hero-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; color: #fff; background: var(--gradient-gold);
  box-shadow: 0 6px 18px rgba(245,166,35,0.35);
}
.cg-hero-name { font-size: 1.12rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; }
.cg-hero-sub { font-size: 0.82rem; color: var(--color-text-secondary); max-width: 290px; line-height: 1.4; }

/* Шаг */
.cg-step {
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding: 13px; display: flex; flex-direction: column; gap: 11px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.cg-step--plain { border: 0; border-radius: 0; padding: 0; }
/* Обязательный незаполненный шаг — притягивает внимание */
.cg-step--todo {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
/* Заполнен — мягкая «зелёная галочка» */
.cg-step--done { border-color: var(--color-income); background: rgba(48,209,88,0.07); }

.cg-step-head { display: flex; align-items: flex-start; gap: 10px; }
.cg-step-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; background: var(--color-primary); color: #fff;
}
.cg-step--done .cg-step-num { background: var(--color-income); }
.cg-step-num--ghost {
  background: var(--color-bg); color: var(--color-text-secondary);
  border: 1.5px solid var(--color-border);
}
.cg-step-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-step-title {
  font-size: 0.9rem; font-weight: 700; color: var(--color-text-primary);
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
}
.cg-step-hint { font-size: 0.76rem; color: var(--color-text-secondary); line-height: 1.35; }
.cg-step--todo .cg-step-hint { color: var(--color-primary); font-weight: 600; }

/* Бейджи «обязательно» / «необязательно» */
.cg-req {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--color-expense); background: rgba(255,69,58,0.12);
  padding: 2px 7px; border-radius: 999px;
}
.cg-opt {
  font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--color-text-tertiary); background: var(--color-bg);
  padding: 2px 7px; border-radius: 999px;
}

.cg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-empty { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.4; }

/* Возврат остатка */
.cg-return {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.8rem; color: var(--color-warning);
  background: rgba(255,159,10,0.1); border-radius: var(--radius-sm); padding: 10px 12px;
}
.cg-return i { font-size: 1rem; flex-shrink: 0; }

/* Подвал с подсказкой и кнопками */
.cg-footer { display: flex; flex-direction: column; gap: 9px; }
.cg-footer-warn {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 0.78rem; font-weight: 600; color: var(--color-primary); text-align: center;
}
.cg-footer-warn i { font-size: 1.1rem; animation: cgNudge 1.1s ease-in-out infinite; }
@keyframes cgNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.cg-actions { margin-top: 0; }

/* На широких экранах кнопки можно прижать вправо и не растягивать на всю ширину */
@media (min-width: 481px) {
  .cg-actions { justify-content: flex-end; }
  .cg-actions .submit-btn { flex: 0 1 auto; min-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-footer-warn i { animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   TRACKING MODE — full vs partial (dashboard, onboarding, settings, hint)
   ═══════════════════════════════════════════════════════════ */

/* (.balance-hero-sub is already defined next to the other .balance-hero-* rules) */

/* Onboarding: tracking-mode choice cards (stacked, full-width) */
.onb-mode-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.onb-mode {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center; text-align: left;
  padding: 14px; border: 1.5px solid var(--color-border); border-radius: 16px;
  background: var(--color-surface); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.onb-mode:active { transform: scale(0.98); }
.onb-mode.selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.onb-mode-ic {
  grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff; background: var(--color-primary);
}
.onb-mode-name { font-size: 0.92rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.2; }
.onb-mode-desc { font-size: 0.74rem; color: var(--color-text-secondary); line-height: 1.3; }
.onb-balance-block { margin-bottom: 6px; }
.onb-balance-q { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Settings: tracking-mode toggle.
   .settings-section-card has no padding (content sets its own), so the body needs it. */
.track-mode-body { padding: 12px 14px 14px; }
.track-mode-note { font-size: 0.78rem; color: var(--color-text-secondary); line-height: 1.45; margin: 0 0 12px; }
.track-mode-note strong { color: var(--color-text-primary); }
.track-mode-toggle { display: flex; flex-direction: column; gap: 8px; }
.track-mode-opt {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  column-gap: 11px; align-items: center; text-align: left;
  padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 14px;
  background: var(--color-surface); cursor: pointer; transition: all 0.15s;
}
.track-mode-opt.active { border-color: var(--color-primary); background: var(--color-primary-light); }
.track-mode-opt-ic {
  grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--color-text-secondary); background: var(--color-bg);
}
.track-mode-opt.active .track-mode-opt-ic { color: #fff; background: var(--color-primary); }
.track-mode-opt-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text-primary); }
.track-mode-opt-desc { font-size: 0.72rem; color: var(--color-text-secondary); }

/* Dashboard one-time hint banner — aligns with the other full-width dashboard
   blocks (.assistant-card / .dash-invite-banner): 12px side inset on mobile,
   no inset on desktop where the column provides padding. */
.track-mode-hint {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 34px 14px 14px; margin: 0 12px 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--color-shadow);
}
@media (min-width: 768px) { .track-mode-hint { margin: 0 0 20px; } }
.track-mode-hint-ic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #fff; background: var(--color-primary);
}
.track-mode-hint-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.track-mode-hint-body strong { font-size: 0.9rem; color: var(--color-text-primary); }
.track-mode-hint-body small { font-size: 0.78rem; color: var(--color-text-secondary); line-height: 1.35; }
.track-mode-hint-actions { display: flex; gap: 8px; margin-top: 8px; }
.track-mode-hint-close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  border: none; background: transparent; color: var(--color-text-secondary);
  cursor: pointer; border-radius: 8px; font-size: 1rem; line-height: 1;
}
.track-mode-hint-close:hover { background: var(--color-bg); }

/* Onboarding: "matched to your goal" recommendation note (step 3) */
.onb-rec {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 14px; padding: 9px 12px; border-radius: 12px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  font-size: 0.76rem; color: var(--color-text-secondary); line-height: 1.35;
}
.onb-rec i { color: var(--color-primary); flex-shrink: 0; }

/* Settings: financial-goal picker grid */
.purpose-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.purpose-pick {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 10px; border: 1.5px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface); cursor: pointer; text-align: left; transition: all 0.15s;
}
.purpose-pick.active { border-color: var(--color-primary); background: var(--color-primary-light); }
.purpose-pick-ic {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.purpose-pick-name {
  font-size: 0.8rem; font-weight: 600; color: var(--color-text-primary);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.purpose-pick-check { position: absolute; top: 6px; right: 7px; font-size: 0.8rem; color: var(--color-primary); }

/* Dashboard: goal row at the top of the purpose KPI card */
.purpose-kpi-goal-row {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px 0; font-size: 0.72rem; color: var(--color-text-secondary);
  cursor: pointer;
}
.purpose-kpi-goal-row strong { color: var(--color-text-primary); font-weight: 700; }
.purpose-kpi-goal-arrow { margin-left: auto; opacity: 0.5; font-size: 0.75rem; }